sellmate-design-system-react 9.0.0-beta.0 → 9.0.0-beta.100

package/eslint/rules/table-numeric-align.mjs

@@ -19,20 +19,20 @@ import {
   prop,
   literalString,
   asColumn,
-} from "../lib/table-column.mjs";
+} from '../lib/table-column.mjs';
 
 export default {
   meta: {
-    type: "problem",
+    type: 'problem',
     docs: {
-      description: "테이블의 숫자 컬럼은 오른쪽 정렬",
+      description: '테이블의 숫자 컬럼은 오른쪽 정렬',
     },
     schema: [
       {
-        type: "object",
+        type: 'object',
         properties: {
           /** 검사에서 뺄 컬럼 name */
-          allow: { type: "array", items: { type: "string" }, uniqueItems: true },
+          allow: { type: 'array', items: { type: 'string' }, uniqueItems: true },
         },
         additionalProperties: false,
       },
@@ -41,7 +41,7 @@ export default {
       needsRight:
         "숫자 컬럼 `{{label}}` 은 `align: 'right'` 로 오른쪽 정렬해야 합니다{{reason}}. (AGENTS.md §3-4)",
     },
-    fixable: "code",
+    fixable: 'code',
   },
 
   create(context) {
@@ -61,34 +61,34 @@ export default {
 
         // render/renderCell 로 셀을 직접 그리면 라벨만으로 숫자 여부를 알 수 없다
         // (`정산서 번호` → 링크, `순번` → 핀 아이콘). 실제 숫자 서식이 있을 때만 숫자로 본다.
-        const renderProp = prop(node, "renderCell") ?? prop(node, "render");
+        const renderProp = prop(node, 'renderCell') ?? prop(node, 'render');
         if (renderProp && !NUMERIC_FORMAT.test(context.sourceCode.getText(renderProp))) return;
 
         // 숫자 판정 — label 키워드 또는 format 의 숫자 서식
-        let reason = "";
+        let reason = '';
         let numeric = NUMERIC_LABEL.test(label);
 
-        const formatProp = prop(node, "format");
+        const formatProp = prop(node, 'format');
         if (formatProp) {
           const src = context.sourceCode.getText(formatProp);
           if (NUMERIC_FORMAT.test(src)) {
             numeric = true;
-            reason = " (format 이 숫자를 서식화하고 있습니다)";
+            reason = ' (format 이 숫자를 서식화하고 있습니다)';
           }
         }
 
         if (!numeric) return;
 
-        const alignProp = prop(node, "align");
-        if (literalString(alignProp) === "right") return;
+        const alignProp = prop(node, 'align');
+        if (literalString(alignProp) === 'right') return;
 
         // align 은 헤더·셀 공통이라 "헤더 가운데 + 셀 우측" 은 tdClass 로만 표현된다
-        const tdClassProp = prop(node, "tdClass");
+        const tdClassProp = prop(node, 'tdClass');
         if (tdClassProp && CELL_RIGHT_CLASS.test(context.sourceCode.getText(tdClassProp))) return;
 
         context.report({
           node: alignProp ?? labelProp,
-          messageId: "needsRight",
+          messageId: 'needsRight',
           data: { label, reason },
           fix(fixer) {
             if (alignProp) {

package/eslint/scale.gen.mjs

@@ -7,10 +7,13 @@ export const SPACING = [2,4,6,8,10,12,16,19,20,22,24,28,32,36,40,44,48,56,60,62,
 export const TEXT_SIZES = [10,11,12,13,14,16,18,20,24,28,32];
 
 /** rounded-* 가 받을 수 있는 키 */
-export const RADIUS = ["2","4","6","8","full","control-sm","control-md","feedback-xs-square","feedback-sm-square","feedback-pill","field-sm","field-md","navigation","item-bordered"];
+export const RADIUS = ["2","4","6","8","10","12","full","control-sm","control-md","control-round","feedback-xs-square","feedback-sm-square","feedback-pill","field-sm","field-md","navigation","item-bordered"];
 
 /** 타이포그래피 프리셋 클래스 */
-export const TYPO_PRESETS = ["typo-body-lg-bold","typo-body-lg-default","typo-body-lg-medium","typo-body-md-bold","typo-body-md-default","typo-body-md-medium","typo-body-sm-bold","typo-body-sm-default","typo-body-sm-medium","typo-body-xs-default","typo-control-lg","typo-control-md-default","typo-control-md-underline","typo-control-sm-default","typo-control-sm-underline","typo-control-xs-bold","typo-control-xs-default","typo-control-xs-medium","typo-control-xs-underline","typo-feedback-md-bold","typo-feedback-md-medium","typo-feedback-md-underline","typo-feedback-sm-bold","typo-feedback-sm-medium","typo-feedback-sm-regular","typo-feedback-sm-underline","typo-feedback-xs","typo-field-lg-bold","typo-field-lg-default","typo-field-lg-medium","typo-field-md-bold","typo-field-md-default","typo-field-md-medium","typo-field-sm-bold","typo-field-sm-default","typo-field-sm-medium","typo-field-xs-default","typo-heading-lg","typo-heading-md","typo-heading-sm","typo-heading-xs","typo-heading-xxs","typo-item-md-default","typo-item-md-selected","typo-item-sm-default","typo-item-sm-selected","typo-navigation-lg-medium","typo-navigation-lg-semibold","typo-navigation-md-bold","typo-navigation-sm-bold","typo-navigation-sm-default","typo-navigation-sm-medium","typo-navigation-xs-bold","typo-navigation-xs-medium","typo-table-accent","typo-table-body","typo-table-header"];
+export const TYPO_PRESETS = ["typo-body-lg-bold","typo-body-lg-default","typo-body-lg-medium","typo-body-lg-semibold","typo-body-md-bold","typo-body-md-default","typo-body-md-medium","typo-body-md-semibold","typo-body-sm-bold","typo-body-sm-default","typo-body-sm-medium","typo-body-sm-semibold","typo-body-xs-bold","typo-body-xs-default","typo-body-xs-medium","typo-body-xs-semibold","typo-control-lg","typo-control-md-default","typo-control-md-underline","typo-control-sm-default","typo-control-sm-underline","typo-control-xs-bold","typo-control-xs-default","typo-control-xs-medium","typo-control-xs-underline","typo-feedback-md-bold","typo-feedback-md-medium","typo-feedback-md-regular","typo-feedback-md-underline","typo-feedback-sm-bold","typo-feedback-sm-medium","typo-feedback-sm-regular","typo-feedback-sm-semibold","typo-feedback-sm-underline","typo-feedback-xs","typo-field-lg-bold","typo-field-lg-default","typo-field-lg-medium","typo-field-md-bold","typo-field-md-default","typo-field-md-medium","typo-field-sm-bold","typo-field-sm-default","typo-field-sm-medium","typo-field-xs-default","typo-heading-lg","typo-heading-md","typo-heading-sm","typo-heading-xl","typo-heading-xs","typo-heading-xxs","typo-item-md-default","typo-item-md-selected","typo-item-sm-default","typo-item-sm-selected","typo-navigation-lg-medium","typo-navigation-lg-semibold","typo-navigation-md-bold","typo-navigation-sm-bold","typo-navigation-sm-default","typo-navigation-sm-medium","typo-navigation-xs-bold","typo-navigation-xs-medium","typo-table-accent","typo-table-body","typo-table-header"];
 
 /** 색상 유틸리티 키 (text-*, bg-*, border-* 공통) */
-export const COLORS = ["bg-accent","bg-accentBright","bg-accentFaint","bg-accentLight","bg-brand","bg-caution","bg-danger","bg-dangerLight","bg-deep","bg-frame","bg-neutralBright","bg-neutralLight","bg-progress","bg-screen","bg-subtle","bg-success","bg-successLight","bg-tableHeader","bg-warning","black","blue-strong","blue-subtle","border-accent","border-accentLight","border-bold","border-danger","border-default","border-strong","border-success","border-warning","brilliantblue-05","brilliantblue-10","brilliantblue-20","brilliantblue-25","brilliantblue-40","brilliantblue-50","brilliantblue-60","brilliantblue-70","brilliantblue-75","brilliantblue-80","brilliantblue-85","brilliantblue-90","brilliantblue-95","brilliantblue-99","control-bg-inverseHover","danger-15","danger-20","danger-30","danger-45","danger-60","danger-70","danger-75","danger-80","danger-85","danger-90","danger-95","danger-99","danger-strong","danger-subtle","darkblue-strong","darkblue-subtle","disabled-bg","disabled-border","disabled-icon","disabled-text","divider-default","fg-accent","fg-accentLight","fg-brand","fg-danger","fg-dangerLight","fg-deep","fg-inverse","fg-primary","fg-quaternary","fg-secondary","fg-subtleCool","fg-subtleWarm","fg-success","fg-tertiary","fg-warning","field-bg-default","field-bg-hover","field-bg-readOnly","field-border-danger","field-border-default","field-border-focus","field-border-hover","field-border-success","field-icon-default","field-text-default","field-text-placeholder","field-text-readOnly","green-15","green-25","green-45","green-55","green-65","green-70","green-75","green-80","green-85","green-90","green-95","green-99","green-strong","green-subtle","grey-05","grey-10","grey-20","grey-25","grey-30","grey-35","grey-45","grey-50","grey-55","grey-60","grey-65","grey-70","grey-80","grey-85","grey-90","grey-95","grey-strong","grey-subtle","indigo-strong","indigo-subtle","lightblue-strong","lightblue-subtle","link-accent","navigation-gnb-bg-dark","oceanblue-15","oceanblue-25","oceanblue-50","oceanblue-60","oceanblue-65","oceanblue-70","oceanblue-75","oceanblue-80","oceanblue-85","oceanblue-90","oceanblue-95","oceanblue-99","olive-05","olive-10","olive-15","olive-20","olive-30","olive-45","olive-55","olive-65","olive-70","olive-80","olive-90","olive-95","orange-10","orange-20","orange-35","orange-45","orange-55","orange-60","orange-65","orange-75","orange-85","orange-90","orange-95","orange-99","orange-strong","orange-subtle","primary-05","primary-10","primary-20","primary-25","primary-40","primary-50","primary-60","primary-70","primary-75","primary-80","primary-85","primary-90","primary-95","primary-99","red-15","red-20","red-30","red-45","red-60","red-70","red-75","red-80","red-85","red-90","red-95","red-99","red-strong","red-subtle","steelblue-10","steelblue-25","steelblue-45","steelblue-60","steelblue-65","steelblue-70","steelblue-75","steelblue-80","steelblue-85","steelblue-90","steelblue-95","steelblue-99","success-15","success-25","success-45","success-55","success-65","success-70","success-75","success-80","success-85","success-90","success-95","success-99","success-strong","success-subtle","warning-10","warning-20","warning-35","warning-45","warning-55","warning-60","warning-65","warning-75","warning-85","warning-90","warning-95","warning-99","warning-strong","warning-subtle","white","yellow-10","yellow-20","yellow-25","yellow-30","yellow-40","yellow-45","yellow-50","yellow-60","yellow-70","yellow-80","yellow-90","yellow-95","yellow-moderate","yellow-strong","yellow-subtle"];
+export const COLORS = ["bg-accent","bg-accentBright","bg-accentFaint","bg-accentLight","bg-brand","bg-caution","bg-danger","bg-dangerLight","bg-deep","bg-frame","bg-neutralBright","bg-neutralLight","bg-progress","bg-screen","bg-subtle","bg-success","bg-successLight","bg-tableHeader","bg-warning","black","blue-moderate","blue-strong","blue-subtle","border-accent","border-accentLight","border-bold","border-danger","border-default","border-strong","border-success","border-warning","brilliantblue-05","brilliantblue-10","brilliantblue-20","brilliantblue-25","brilliantblue-40","brilliantblue-50","brilliantblue-60","brilliantblue-70","brilliantblue-75","brilliantblue-80","brilliantblue-85","brilliantblue-90","brilliantblue-95","brilliantblue-99","control-bg-inverseHover","danger-15","danger-20","danger-30","danger-45","danger-60","danger-70","danger-75","danger-80","danger-85","danger-90","danger-95","danger-99","danger-moderate","danger-strong","danger-subtle","darkblue-moderate","darkblue-strong","darkblue-subtle","disabled-bg","disabled-border","disabled-icon","disabled-text","divider-default","fg-accent","fg-accentLight","fg-brand","fg-danger","fg-dangerLight","fg-deep","fg-inverse","fg-primary","fg-quaternary","fg-secondary","fg-subtleCool","fg-subtleWarm","fg-success","fg-successLight","fg-tertiary","fg-warning","fg-warningLight","field-bg-default","field-bg-hover","field-bg-readOnly","field-border-danger","field-border-default","field-border-focus","field-border-hover","field-border-success","field-icon-default","field-text-default","field-text-placeholder","field-text-readOnly","green-15","green-25","green-45","green-55","green-65","green-70","green-75","green-80","green-85","green-90","green-95","green-99","green-moderate","green-strong","green-subtle","grey-05","grey-10","grey-20","grey-25","grey-30","grey-35","grey-45","grey-50","grey-55","grey-60","grey-65","grey-70","grey-80","grey-85","grey-90","grey-95","grey-moderate","grey-strong","grey-subtle","indigo-moderate","indigo-strong","indigo-subtle","lightblue-strong","lightblue-subtle","link-accent","navigation-gnb-bg-dark","navigation-gnb-bg-system","oceanblue-15","oceanblue-25","oceanblue-50","oceanblue-60","oceanblue-65","oceanblue-70","oceanblue-75","oceanblue-80","oceanblue-85","oceanblue-90","oceanblue-95","oceanblue-99","olive-05","olive-10","olive-15","olive-20","olive-30","olive-45","olive-55","olive-65","olive-70","olive-80","olive-90","olive-95","orange-10","orange-20","orange-35","orange-45","orange-55","orange-60","orange-65","orange-75","orange-85","orange-90","orange-95","orange-99","orange-moderate","orange-strong","orange-subtle","primary-05","primary-10","primary-20","primary-25","primary-40","primary-50","primary-60","primary-70","primary-75","primary-80","primary-85","primary-90","primary-95","primary-99","purple-15","purple-25","purple-45","purple-55","purple-65","purple-70","purple-75","purple-80","purple-85","purple-90","purple-95","purple-99","purple-moderate","purple-strong","purple-subtle","red-15","red-20","red-30","red-45","red-60","red-70","red-75","red-80","red-85","red-90","red-95","red-99","red-moderate","red-strong","red-subtle","steelblue-10","steelblue-25","steelblue-45","steelblue-60","steelblue-65","steelblue-70","steelblue-75","steelblue-80","steelblue-85","steelblue-90","steelblue-95","steelblue-99","success-15","success-25","success-45","success-55","success-65","success-70","success-75","success-80","success-85","success-90","success-95","success-99","success-moderate","success-strong","success-subtle","warning-10","warning-20","warning-35","warning-45","warning-55","warning-60","warning-65","warning-75","warning-85","warning-90","warning-95","warning-99","warning-moderate","warning-strong","warning-subtle","white","yellow-10","yellow-20","yellow-25","yellow-30","yellow-40","yellow-45","yellow-50","yellow-60","yellow-70","yellow-80","yellow-90","yellow-95","yellow-moderate","yellow-strong","yellow-subtle"];
+
+/** 필드 폭 등급 (px). SFieldWidth 의 'xs'|'sm'|'md'|'lg'|'xl' 이 풀리는 값이다 */
+export const FIELD_WIDTHS = {"xs":80,"sm":120,"md":160,"lg":240,"xl":480};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sellmate-design-system-react",
-  "version": "9.0.0-beta.0",
+  "version": "9.0.0-beta.100",
   "description": "Sellmate Design System — React (TypeScript + Tailwind v4) port",
   "license": "UNLICENSED",
   "keywords": [
@@ -49,7 +49,8 @@
     "build:dts": "tsc -p tsconfig.build.json --emitDeclarationOnly",
     "gen:tokens": "node scripts/generate-tokens.mjs",
     "docs:gen": "node scripts/gen-docs.mjs",
-    "build:css": "cp ./src/styles/theme.css ./dist/theme.css && tailwindcss -i ./src/styles/entry.css -o ./dist/styles.css",
+    "docs:recipes": "node scripts/gen-recipes.mjs",
+    "build:css": "cp ./src/styles/theme.css ./dist/theme.css && cp ./src/styles/pretendard.css ./dist/pretendard.css && rm -rf ./dist/fonts && cp -R ./src/styles/fonts ./dist/fonts && tailwindcss -i ./src/styles/entry.css -o ./dist/styles.css",
     "dev": "tsup --watch",
     "playground": "vite --config vite.playground.config.ts",
     "playground:next:install": "npm --prefix playground-next install",
@@ -57,24 +58,28 @@
     "playground:next:build": "npm run playground:next:install && npm run build && npm --prefix playground-next run build",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "test:spec": "npm run build && node --test ./src/components/**/*.test.mjs",
+    "test:spec": "npm run build && node --test ./src/components/**/*.test.mjs ./src/lib/*.test.mjs",
     "test:eslint": "node --test ./eslint/__tests__/*.test.mjs",
     "test:cli": "node --test ./bin/__tests__/*.test.mjs",
     "typecheck": "tsc --noEmit",
     "lint": "eslint \"src/**/*.{ts,tsx}\"",
     "lint:fix": "eslint \"src/**/*.{ts,tsx}\" --fix",
-    "format": "prettier --check \"src/**/*.{ts,tsx,css,json,md}\"",
-    "format:fix": "prettier --write \"src/**/*.{ts,tsx,css,json,md}\"",
+    "format": "prettier --check .",
+    "format:fix": "prettier --write .",
     "check:tokens": "node scripts/check-hardcoded.mjs",
     "check:refs": "node scripts/check-refs.mjs",
     "check:docs": "node scripts/check-docs-coverage.mjs",
     "check:docs-refs": "node scripts/check-docs-refs.mjs",
     "check:routing": "node scripts/check-routing.mjs",
+    "check:cn-scales": "node scripts/check-cn-scales.mjs",
+    "check:categories": "node scripts/check-story-categories.mjs",
+    "check:recipes": "node scripts/gen-recipes.mjs --check",
     "version": "node scripts/version.mjs --prerelease beta --tag",
     "version:dry": "node scripts/version.mjs --prerelease beta --dry-run",
     "version:stable": "node scripts/version.mjs --tag",
     "version:stable:dry": "node scripts/version.mjs --dry-run",
-    "clean": "rm -rf dist storybook-static"
+    "clean": "rm -rf dist storybook-static",
+    "prepare": "husky"
   },
   "peerDependencies": {
     "react": ">=18",
@@ -86,13 +91,26 @@
     "@radix-ui/react-dialog": "^1.1.18",
     "@radix-ui/react-dropdown-menu": "^2.1.19",
     "@radix-ui/react-popover": "^1.1.18",
+    "@radix-ui/react-slider": "^1.4.2",
     "@radix-ui/react-switch": "^1.3.2",
     "@radix-ui/react-tooltip": "^1.2.11",
+    "@tiptap/core": "^3.30.2",
+    "@tiptap/extension-image": "^3.30.2",
+    "@tiptap/extension-list": "^3.30.2",
+    "@tiptap/extension-table": "^3.30.2",
+    "@tiptap/extension-text-align": "^3.30.2",
+    "@tiptap/extension-text-style": "^3.30.2",
+    "@tiptap/extension-typography": "^3.30.2",
+    "@tiptap/extensions": "^3.30.2",
+    "@tiptap/react": "^3.30.2",
+    "@tiptap/starter-kit": "^3.30.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.0.2"
   },
   "devDependencies": {
+    "@commitlint/cli": "^20.5.0",
+    "@commitlint/config-conventional": "^20.5.0",
     "@eslint/js": "^9.39.1",
     "@storybook/addon-docs": "^10.4.6",
     "@storybook/react-vite": "^10.4.6",
@@ -101,13 +119,16 @@
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^6.0.0",
+    "conventional-commits-parser": "^6.4.0",
     "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "globals": "^14.0.0",
+    "husky": "^9.1.6",
     "jsdom": "^26.1.0",
+    "lint-staged": "^15.2.10",
     "prettier": "^3.9.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",