@xfilecom/front-core

Design tokens (tokens.css), atomic layout (base.css), browser-only React components. Nest / 서버 의존 없음.

문서 (상세)

| 문서 | 내용 | |------|------| | docs/DESIGN_SYSTEM.md | MUI Paper / react-native-paper 등과 개념 매핑, elevation·역할 색 | | docs/COMPONENTS.md | 컴포넌트별 소스 경로, props 요약, 복붙 예제 코드 | | docs/SHADCN.md | shadcn/ui 대응표 — Radix 없이 쓰는 범위·앱 의존 권장 |

npm 패키지에 docs/가 포함되므로, 설치 후 node_modules/@xfilecom/front-core/docs/에서도 동일 파일을 볼 수 있다.

CSS 로드 순서

1. @xfilecom/front-core/tokens.css
2. @xfilecom/front-core/base.css
3. (선택) 앱 xfc-theme.css에서 --xfc-* 덮어쓰기
4. (선택) 레이아웃 app.css

다크: tokens.css — html.dark / data-theme="dark".

배경: body 기본은 옅은 액센트 그라데이션. 단색만 쓰려면 body { background-image: none; }.

React import

import {
  Paper,
  Card,
  Button,
  Text,
  Dialog,
} from '@xfilecom/front-core';

서브패스: @xfilecom/front-core/atoms, @xfilecom/front-core/overlays.

Showcase (라이브 갤러리)

tokens.css·base.css(·앱 테마) 다음에 스타일을 한 줄 더 넣고, 컴포넌트를 import 합니다.

import '@xfilecom/front-core/showcase.css';
import { DesignSystemShowcase } from '@xfilecom/front-core/showcase';

데모마다 코드 보기(TSX)와, 해당하는 경우 CSS 보기(:root·base.css 클래스·토큰 예시)를 접어서 볼 수 있습니다.

Paper (표면)

MUI Paper / RN Surface에 대응하는 얇은 래퍼:

<Paper elevation={2} style={{ padding: 'var(--xfc-space-lg)' }}>
  …
</Paper>
<Paper variant="outlined" style={{ padding: 16 }}>…</Paper>

기본 문자열·a11y

• 기본 UI 문구는 영어 (토스트 Dismiss, Confirm OK/Cancel). 한국어는 props로 덮어쓴다.
• Dialog / BottomSheet: 스크롤 잠금, Escape, 포커스 트랩 (useFocusTrap).
• Toast: error → role="alert", 그 외 role="status".

Version

npm run build 시 package.json의 version이 src/generatedVersion.ts에 반영된다.

폼

Input, Textarea, Select, Checkbox, Field — 자세한 예는 COMPONENTS.md.