mble 블 허브 UI 구성 요소 라이브러리

1) 목표와 원칙

이유: 기능 제공 속도를 높이고 일관된 UX를 제공하며 지원을 단순화하십시오.

• 의미와 중립. 구성 요소는 비즈니스 로직에서 재봉하지 않고 UI 문제를 해결합니다.
• 기본값으로 A11y. 역할, 포커스 링, 아리아 속성 및 대비가 구성 요소에 꿰매어집니다.
• i18n 우선. 줄 길이, 숫자 형식, RTL-상자에서 고려하십시오.
• Temization. 토큰을 통한 가벼운/어두운 테마 및 브랜드 악센트.
• 확장 성. 균일 한 API, 사소한 방출의 안정성, 주요 이동.

2) 근거: 디자인 토큰 (기초)

json
{
"color": {
"text": { "default": "{palette. neutral. 900}", "muted": "{palette. neutral. 600}", "inverse": "{palette. neutral. 0}" },
"surface": { "default": "{palette. neutral. 0}", "elevated": "{palette. neutral. 50}", "brand": "{palette. brand. 50}" },
"accent": { "primary": "{palette. brand. 600}", "success": "{palette. green. 600}", "warning": "{palette. amber. 600}", "error": "{palette. red. 600}" }
},
"space": { "xs": 4, "sm": 8, "md": 12, "lg": 16, "xl": 24 },
"radius": { "sm": 8, "md": 12, "lg": 16, "full": 999 },
"elevation": { "0": "none", "1": "0 1px 2px rgba(0,0,0,.08)", "2": "0 4px 12px rgba(0,0,0,.12)" },
"motion": { "fast": "120ms", "base": "200ms" },
"opacity": { "disabled": 0. 45, "muted": 0. 7 }
}

규칙: 시맨틱 토큰 (예: '컬러. 악센트. 성공 ') 은 구성 요소에서 사용됩니다. 팔레트-내부.

3) 구성 요소 범주

1. 따라서 아이콘, 타이포그래피, 링크, 배지, 나누기, 아바타.
2. 입력, 입력, 숫자 입력, 선택, 콤보 박스, 데이트 픽커, 체크 박스, 라디오, 스위치, 슬라이더, 텍스타 레아, 파일 업로드.
3. 내비게이션: AppBar, 탭, 빵 부스러기, Pagination, Drawer/cybde, Stepper.
4. 경고, InlineError, Tooltip, Toast, Snackbar, Modal, Popover, Skeleton, Progress, StatusDot.
5. 데이터 및 테이블: 테이블, DataList, 카드, 아코디언, 태그, EmptyState.

• GameTile (게임 카드)
• 프로 비더 배지
• 잭팟 티커
• LiveBadge (라이브 테이블/쇼)
• 로비 필터 (제공자/장르/제한)
• 보너스 배너/보너스 카드
• MissionProgress/AchievementBadge
• 토너먼트 리더 보드
• 월렛 카드/BalanceWidget
• 페이먼트 메토 카드
• DepositForm/WithdrawalForm
• KYCStatusBadge/KYCChecklist
• 책임있는 GamingBanner/LimitsControl
• AgeGate/SessionTimer/RiskAlert
• SystemStatus/MaintenanceBanner

4) 구성 요소 페이지: 필요한 내용

목적 및시기 사용/사용 금지.
구성 및 변형. 차원, 상태, 수정 자.
API. 소품, 이벤트, 슬롯, 제어/제어되지 않은 모드.
A11y. 역할, 초점, 아리아 연결, 살아있는 지역.
i18n. 장기, 형식, 현지화 가능한 서명.
마이크로 코피. 추천 텍스트 (CTA, 힌트, 오류).
코드 예. 일반적인 경우 에지 케이스 (오류, 로딩, 비어 있음).
테스트. 시각적 행렬/단위/상호 작용/A11y.
반예. 빈번한 사용법 오류.

5) 주요 구성 요소: 빠른 사양

5. 1 단추

변형: '1 차 | 2 차 | 유령 | 파괴적인' 차원: 'sm | md | lg'

상태: 정상, 호버, 초점 표시, 활성, 로딩, 비활성화

A11y: 눈에 띄는 포커스 링, '로딩' 을위한 'aria-bady', 토글을위한 'aria-pressed'

마이크로 코피: 동작 + 객체 (변경 사항 저장, 확인)

예제 방지: "OK"

5. 입력/필드 2 개

성분: 라벨, 필드, 도우미, 오류, 접두사/접미사

A11y: '아리아 유효하지 않음', '아리아-디스크 리브 비', с봉은 'for/id'

오류 패턴: 무엇이 잘못되었는지 + 수정하는 방법 ("형식으로 숫자 입력 + 380"..)

슬롯: '접두사' (아이콘), '접미사' (버튼 "암호 표시")

5. 3 선택/콤보 박스

기능: 목록 검색, 키보드, 긴 목록 가상화

A11y: 'role = "combobox"', 'aria-excended', 'aria-activedescendant'

빈 결과: "아무것도 발견되지 않았습니다. 요청 변경 "

5. 4 모달/드로어

규칙: 트랩 포커스, ESC/오버레이 닫기, 포커스를 개시 자로 복귀

사용: 지불 확인, 리베이트 규칙, KYC 단계

5. 5 토스트/스냅 바

시간: 2-4 초, 흐름 차단 없음

라이브 지역: 성공을위한 'aria-live =' polite '', 실수를위한 '독단적'

예: "지불이 승인되었습니다. 잔액이 업데이트되었습니다 "

5. 6 EmptyState

템플릿: 컨텍스트 + 값 + CTA + 보조 CTA

예: "첫 번째 게임을 추가하면 선택된 게임이 여기에 나타납니다. [즐겨 찾기에 추가] "

6) iGaming 구성 요소: 세부 사항 및 API

6. 1 게임 타일

목적: 로비/카탈로그의 게임 카드.
구성: 커버, 공급자, 태그 (New/Hot/Jackpot/Live), RTP (도매), 빠른 조치.

ts
<GameTile title="Lightning Roulette"
provider="Evolution"
tags={["Live","Popular"]}
isJackpot={true}
onPlay={...}
onFavToggle={...}
/>

상태: 호버 (빠른 시작), 골격, 사용할 수 없음 (지역/시간).
A11y: alt 텍스트, 키보드 시작, 'aria-label = "Play Lightning Roulette"'.

6. 로비 필터 2 개

목적: 로비 필터 (장르, 공급자, 한계, 변동성).
기능: 사전 설정 저장, 필터 재설정, 결과 카운터.
마이크로 카피: "필터", "재설정 필터", "발견: 128".

6. 3 보너스 배너/보너스 카드

옵션: 환영, 재 장전, 현금 환급, 프리 스핀, 토너먼트.
필드: 헤더, 조건, 유효 기간, CTA ("활성화 보너스").
A11y: 조건에 대한 언급은 'aria-describby' → 조건에 대한 자세한 내용을 읽을 수 있습니다.
패턴 방지: 키 구속 조건을 숨깁니다.

6. 4 잭팟 티커

목적: 자동 새로 고침 잭팟 실행량.
API: 데이터 소스, 업데이트 기간, 통화 형식.
A11y: 'role = "state"' 는 화면 판독기의 가독성을 위반하지 않습니다.

6. 5 토너먼트 리더 보드

구성: 위치 테이블, 포인트, 상, 타이머, 자신의 위치.
기능: 페이지 매김/가상화, 회선 수정.
A11y: 'th '/' scope', 읽을 수있는 열, 화살표 탐색.

6. 6 월렛 카드/BalanceWidget

필드: 잔액, 차단 된 자금, 보너스 잔액, 통화.
동작: "Top up", "Display", "History".
보안: 숨기기/쇼 양, 공통 영역에서 마스킹.

6. 7 페이먼트 메토 카드

필드: 공급자 로고, 제한, 수수료, ETA, 지역 가용성.
상태: 사용 가능하지 않음 (지역/상태) 과정에서 경고를 제한합니다.

마이크로 카피: "1. 공급자는 5% 의 수수료를 보류합니다. "" 지불-최대 15 분 "

6. 8 DepositForm/WithdrawalForm

패턴: 인라인 검증, 금액 제한, 동일한 방법 규칙 프롬프트.
A11y: 오류 선언 ('독단적'), 첫 번째 오류에 집중합니다.
서비스 분야: AML이 필요한 경우 "자금 출처", "목적".

6. 9 KYCStatusBadge/KYCChecklist

상태: 'none | 기본 | 확장 | 거부 된 | 보류 중'.
텍스트: "~ 2 분이 걸립니다", "눈부심이없는 사진, 모서리 및 텍스트가 표시됩니다".
CTA: "확인", 보조: "왜 이것이 중요합니까? ».

6. 10 LimitsControl/ResponsibleGamingBanner

목적: 예금/요금/시간, 휴식, 자기 배제 제한.
도움말과 관련하여 중립적이고 압력이 없습니다.

7) 레이아웃 패턴 (레시피)

등록/ACC: Stepper + Form + InlineError + PageAlert + SuccessToast.
지불 방법 카드 + AmountInpit + LimitsHint + ConfirmModal + StatusToast.
확인: SearchBar + LobbyFilts + GameGrid (иGameTile) + Pagination + EmptyState.
계정: 토너먼트 리더 보드 + MissionProgress + BonusBanner.
책임: ResponsibleGamingBanner + LimitsControl + FAQ 링크.

8) 접근성 (A11y)

항상 보이는 초점 (어두운 테마 포함).
모든 대화식 요소를 통한 키보드 탐색.
토스트/상태에 대한 'aria-live = "polite/surgative"'.
대조적으로 WCAG 2보다 낮지 않습니다. 1 AA.
아이콘의 텍스트 만이 의미의 반송파가 아닙니다.
RTL 모드, 320 px 확인 및 가독성이 크게 나타납니다.

9) 현지화 및 형식

모든 사용자 문자열은 i18n 키를 통해 이루어집니다

ui. button. save = Save wallet. deposit. success = Payment accepted. Balance updated.
kyc. photo. hint = Photo without glare, corners and text are visible.
filters. reset = Reset filters

날짜/통화 포맷-문자열이 아닌 유틸리티로.
톤맵 (중립/지원/공식) 을 통한 언어 톤.

10) 성능과 품질

가상화 목록 (게임, 테이블).
그림의 게으른로드, 페이지 별 코드 스 플라이 싱.
번들 크기: UI 패키지 예산, 무거운 종속성 없음.
속도 인식, 스피너-최소한의 해골.
테스트: 중요한 흐름에 대한 단위, 비주얼 스냅 샷, 상호 작용, A11y, E2E.

11) 검증 및 릴리스

SemVer: 패치-버그; 미성년자 - 비파괴; 전공-이주와 함께.
릴리스 노트: 스크린 샷 전후 토큰/API/동작.
우울증: 도크 마킹, 코드 모드 및 린터 규칙.
스토리 북/놀이터: 라이브 예, 접근성 패널, RTL 토글.

12) 기여

새로운 구성 요소의 RFC: 문제 → 옵션 → 선택한 결정 → A11y → i18n → API → 위험.
PR 체크리스트: 도크, 스토리, 테스트, 비주얼 스냅 샷, 대비, i18n, 다크/RTL.
완료의 정의: 구성 요소 + 문서 + 테스트 + 패턴 예.

13) MVP 세트 및 로드맵

• 버튼, 입력, 선택, 체크 박스, 라디오, 스위치, 모달, 토스트, 툴팁, 프로그레시브, 스켈레톤, 카드, 강조, 탭, 페이지 부스러기, 테이블, 게임 타일, 로비 필터, 보너스 배너, 월렛 카드, 페이먼트 메토드 카드, KYCusBadge.

가수: TournamentLeaderboard, JackpotTicker, MissionProgress, LimitsControl, SystemStatus, Drawer/shybad, DatePicker, Combobox, FileUploads.

14) 마이크로 코피 예 (완성 된 인서트)

CTA: "변경 사항 저장", "확인", "결제 방법 추가".

오류: "잘못된 날짜 형식. DD를 사용하십시오. MM. YYYY. "," 파일이 너무 큽니다 (최대 10MB) "

성공: "지불이 수락되었습니다. 균형이 업데이트되 "완료! "확인 된 문서"

빈 상태: "" {query} "로 아무것도 발견되지 않았습니다. 필터를 설정하거나 쿼리를 개선하십시오. "

15) 반 패턴

UI 구성 요소 내 비즈니스 로직 (남용 중단).
보이지 않는 초점 또는 의미의 의존성은 색상에만 있습니다.
구성 요소 코드에 포함 된 문자열 (i18n 제외).
의미론의 위반 ('div' 버튼, 'ul/ol/li' 없이 나열).
명확한 규칙이없는 변형 (곱셈 'ButtonPrimaryBlueBig2').

16) 점검표

• 목적, 변형, API가 설명됩니다.
• A11y: 역할, 초점, 아리아 속성, 대조.
• i18n: 모든 행이 렌더링되고 긴 언어가 사용되며 RTL이 확인됩니다.
• 스토리/데모: 일반, 다운로드, 오류, 공백.
• 테스트: 단위 + 시각적 + 상호 작용 + A11y.
• 비즈니스 논리가없고 UI/동작 만 있습니다.

• 구성 요소 체계와 초점 순서가 있습니다.
• 마이크로 코피 및 오류/성공 텍스트가 정의됩니다.
• 측정 된 키 메트릭 (단계 변환, 오류율, 시간 대 완료).

17) 구성 요소 용 문서 골격 (템플릿)

이름과 목적

사용시기/사용하지 않기

옵션 및 상태

API (소품, 이벤트, 슬롯)

접근성 (역할, 키보드, 아리아, 대비)

i18n (키, 형식, 길이, RTL)

마이크로 코피 (예)

코드 샘플 (일반 및 가장자리)

테스트 행렬

예제 방지

합계

mble 블 허브 UI는 단순한 블록 세트가 아니라 규칙: 토큰 → 구성 요소 → 패턴 → 문서 → 메트릭스. 이 안내서에 따라 팀은 기능을 더 빠르게 제공하고 사용자는 예측 가능하고 저렴한 인터페이스를 얻으며 시각적 부채없이 제품 규모를 확장합니 필요한 경우 예제와 i18n 키가 포함 된 MVP 세트로 도크의 첫 페이지를 수집합니다.