sellmate-design-system-react 2.2.0 → 3.1.0

package/eslint/rules/require-locale-number.mjs

@@ -0,0 +1,78 @@
+/**
+ * 숫자 컬럼은 예외 없이 `toLocaleString()` 으로 세 자리 콤마를 넣도록 강제한다.
+ *
+ * 전화번호·사업자번호처럼 하이픈이 들어가는 값은 숫자가 아니라 서식이 정해진
+ * 문자열이므로 대상에서 뺀다. 그 밖에 예외가 필요하면 `allow` 로 컬럼을 지정한다.
+ *
+ * AGENTS.md §1-4 / §3-4.
+ */
+import {
+  NUMERIC_LABEL,
+  IDENTIFIER_ONLY,
+  prop,
+  asColumn,
+} from "../lib/table-column.mjs";
+
+export default {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "금액·수량 등 숫자 표시에 toLocaleString 사용",
+    },
+    schema: [
+      {
+        type: "object",
+        properties: {
+          /** 검사에서 뺄 컬럼 name */
+          allow: { type: "array", items: { type: "string" }, uniqueItems: true },
+        },
+        additionalProperties: false,
+      },
+    ],
+    messages: {
+      missingFormat:
+        "숫자 컬럼 `{{label}}` 에 format 이 없습니다. `format: (v) => `${Number(v).toLocaleString()}{{unit}}`` 처럼 세 자리 구분을 넣으세요. (AGENTS.md §1-4)",
+      missingLocale:
+        "숫자 컬럼 `{{label}}` 의 format 이 toLocaleString 을 쓰지 않습니다. 세 자리 구분 없이 표시됩니다. (AGENTS.md §1-4)",
+    },
+  },
+
+  create(context) {
+    const allow = new Set(context.options[0]?.allow ?? []);
+
+    return {
+      ObjectExpression(node) {
+        const column = asColumn(node);
+        if (!column) return;
+
+        const { labelProp, label, columnName } = column;
+        if (columnName && allow.has(columnName)) return;
+
+        // 숫자 컬럼이면 모두 대상 — 하이픈 서식 문자열(전화번호 등)만 뺀다
+        if (!NUMERIC_LABEL.test(label) || IDENTIFIER_ONLY.test(label)) return;
+
+        // render 로 셀을 직접 그리는 경우는 이 규칙이 판단하지 않는다
+        if (prop(node, "render")) return;
+
+        const unit = /금액|가격|단가|판매가|원가|비용|수수료|배송비|할인|합계|총액|잔액/.test(label)
+          ? "원"
+          : "";
+
+        const formatProp = prop(node, "format");
+        if (!formatProp) {
+          context.report({
+            node: labelProp,
+            messageId: "missingFormat",
+            data: { label, unit },
+          });
+          return;
+        }
+
+        const src = context.sourceCode.getText(formatProp);
+        if (!src.includes("toLocaleString")) {
+          context.report({ node: formatProp, messageId: "missingLocale", data: { label } });
+        }
+      },
+    };
+  },
+};

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

@@ -0,0 +1,93 @@
+/**
+ * 숫자 컬럼이 오른쪽 정렬(`align: 'right'`)인지 검사한다.
+ *
+ * 자릿수가 세로로 맞아야 값의 크기를 비교할 수 있으므로,
+ * 금액·수량·개수처럼 숫자가 들어가는 컬럼은 예외 없이 오른쪽 정렬한다.
+ *
+ * 대상은 `name` · `label` · `field` 를 모두 가진 객체 리터럴(= STableColumn 형태)뿐이라
+ * 일반 객체를 오탐하지 않는다.
+ *
+ * AGENTS.md §3-4.
+ */
+
+import {
+  NUMERIC_LABEL,
+  IDENTIFIER_ONLY,
+  NUMERIC_FORMAT,
+  prop,
+  literalString,
+  asColumn,
+} from "../lib/table-column.mjs";
+
+export default {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "테이블의 숫자 컬럼은 오른쪽 정렬",
+    },
+    schema: [
+      {
+        type: "object",
+        properties: {
+          /** 검사에서 뺄 컬럼 name */
+          allow: { type: "array", items: { type: "string" }, uniqueItems: true },
+        },
+        additionalProperties: false,
+      },
+    ],
+    messages: {
+      needsRight:
+        "숫자 컬럼 `{{label}}` 은 `align: 'right'` 로 오른쪽 정렬해야 합니다{{reason}}. (AGENTS.md §3-4)",
+    },
+    fixable: "code",
+  },
+
+  create(context) {
+    const allow = new Set(context.options[0]?.allow ?? []);
+
+    return {
+      ObjectExpression(node) {
+        const column = asColumn(node);
+        if (!column) return;
+
+        const { labelProp, label, columnName } = column;
+        if (columnName && allow.has(columnName)) return;
+
+        // 숫자 판정 — label 키워드 또는 format 의 숫자 서식
+        let reason = "";
+        let numeric = false;
+
+        if (NUMERIC_LABEL.test(label) && !IDENTIFIER_ONLY.test(label)) {
+          numeric = true;
+        }
+
+        const formatProp = prop(node, "format");
+        if (formatProp) {
+          const src = context.sourceCode.getText(formatProp);
+          if (NUMERIC_FORMAT.test(src)) {
+            numeric = true;
+            reason = " (format 이 숫자를 서식화하고 있습니다)";
+          }
+        }
+
+        if (!numeric) return;
+
+        const alignProp = prop(node, "align");
+        if (literalString(alignProp) === "right") return;
+
+        context.report({
+          node: alignProp ?? labelProp,
+          messageId: "needsRight",
+          data: { label, reason },
+          fix(fixer) {
+            if (alignProp) {
+              return fixer.replaceText(alignProp.value, "'right'");
+            }
+            // align 이 없으면 label 뒤에 추가한다
+            return fixer.insertTextAfter(labelProp, ", align: 'right'");
+          },
+        });
+      },
+    };
+  },
+};

package/eslint/scale.gen.mjs

@@ -0,0 +1,16 @@
+/* 자동 생성: npm run build (scripts/gen-eslint-scale.mjs). 직접 수정 금지. */
+
+/** gap-*, p-*, m-* 등 간격 유틸리티가 받을 수 있는 값 (px) */
+export const SPACING = [2,4,6,8,10,12,16,19,20,22,24,28,32,36,40,44,48,56,60,62,80];
+
+/** text-* 숫자 유틸리티가 받을 수 있는 값 (px) */
+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 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-navigation-lg-bold","typo-navigation-lg-medium","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-danger","border-default","border-strong","border-success","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"];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sellmate-design-system-react",
-  "version": "2.2.0",
+  "version": "3.1.0",
   "description": "Sellmate Design System — React (TypeScript + Tailwind v4) port",
   "license": "UNLICENSED",
   "keywords": [
@@ -16,7 +16,10 @@
     "**/*.css"
   ],
   "files": [
-    "dist"
+    "dist",
+    "eslint",
+    "!eslint/__tests__",
+    "AGENTS.md"
   ],
   "exports": {
     ".": {
@@ -25,7 +28,8 @@
       "require": "./dist/index.cjs"
     },
     "./theme.css": "./dist/theme.css",
-    "./styles.css": "./dist/styles.css"
+    "./styles.css": "./dist/styles.css",
+    "./eslint": "./eslint/index.mjs"
   },
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -33,7 +37,7 @@
   "scripts": {
     "prepublishOnly": "node scripts/guard-publish-branch.mjs",
     "prepack": "npm run build",
-    "build": "npm run gen:tokens && tsup && node scripts/preserve-directives.mjs && npm run build:dts && npm run build:css",
+    "build": "npm run gen:tokens && tsup && node scripts/preserve-directives.mjs && npm run build:dts && npm run build:css && node scripts/copy-docs.mjs && node scripts/gen-eslint-scale.mjs && node scripts/gen-llms.mjs",
     "build:dts": "tsc -p tsconfig.build.json --emitDeclarationOnly",
     "gen:tokens": "node scripts/generate-tokens.mjs",
     "docs:gen": "node scripts/gen-docs.mjs",
@@ -46,6 +50,7 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "test:spec": "npm run build && node --test ./src/components/**/*.test.mjs",
+    "test:eslint": "node --test ./eslint/__tests__/*.test.mjs",
     "typecheck": "tsc --noEmit",
     "lint": "eslint \"src/**/*.{ts,tsx}\"",
     "lint:fix": "eslint \"src/**/*.{ts,tsx}\" --fix",