sellmate-design-system-react 3.1.0 → 3.3.0

package/dist/styles.css

@@ -1308,6 +1308,9 @@
   .flex-col {
     flex-direction: column;
   }
+  .flex-col-reverse {
+    flex-direction: column-reverse;
+  }
   .flex-row {
     flex-direction: row;
   }
@@ -1329,6 +1332,9 @@
   .items-stretch {
     align-items: stretch;
   }
+  .justify-around {
+    justify-content: space-around;
+  }
   .justify-between {
     justify-content: space-between;
   }
@@ -1419,6 +1425,9 @@
   .gap-\[40px\] {
     gap: 40px;
   }
+  .gap-\[var\(--\.\.\.\)\] {
+    gap: var(--...);
+  }
   .gap-\[var\(--cmp-callout-body-gap\)\] {
     gap: var(--cmp-callout-body-gap);
   }
@@ -1428,6 +1437,9 @@
   .gap-\[var\(--cmp-checkbox-gap\)\] {
     gap: var(--cmp-checkbox-gap);
   }
+  .gap-\[var\(--cmp-checkbox-group-gap-horizontal\)\] {
+    gap: var(--cmp-checkbox-group-gap-horizontal);
+  }
   .gap-\[var\(--cmp-chip-gap\)\] {
     gap: var(--cmp-chip-gap);
   }

package/eslint/index.mjs

@@ -10,6 +10,7 @@ import noOffScaleSpacing from "./rules/no-off-scale-spacing.mjs";
 import preferTypoPreset from "./rules/prefer-typo-preset.mjs";
 import tableNumericAlign from "./rules/table-numeric-align.mjs";
 import requireLocaleNumber from "./rules/require-locale-number.mjs";
+import componentGroupGap from "./rules/component-group-gap.mjs";
 
 const PLUGIN_NAME = "sellmate";
 
@@ -22,6 +23,7 @@ const plugin = {
     "prefer-typo-preset": preferTypoPreset,
     "table-numeric-align": tableNumericAlign,
     "require-locale-number": requireLocaleNumber,
+    "component-group-gap": componentGroupGap,
   },
 };
 
@@ -38,6 +40,7 @@ const recommended = [
       [`${PLUGIN_NAME}/no-off-scale-spacing`]: "error",
       [`${PLUGIN_NAME}/table-numeric-align`]: "error",
       [`${PLUGIN_NAME}/require-locale-number`]: "error",
+      [`${PLUGIN_NAME}/component-group-gap`]: "error",
       // 대체 프리셋 판단에 여지가 있어 warn
       [`${PLUGIN_NAME}/prefer-typo-preset`]: "warn",
     },

package/eslint/rules/component-group-gap.mjs

@@ -0,0 +1,186 @@
+/**
+ * 같은 컴포넌트를 여러 개 나열할 때 컴포넌트별 그룹 간격을 지키게 한다.
+ *
+ * 일반 요소 사이의 기본값(gap-8)과 달리, 체크박스·라디오는 가로 24 / 세로 8 처럼
+ * **배열 방향에 따라 값이 다르다.** 가로 배열에 8 을 쓰면 항목이 붙어 보인다.
+ *
+ * 오탐을 줄이기 위해 다음은 검사하지 않는다.
+ *  - `justify-between` 등으로 양끝 분리한 경우 (하단 버튼 배치 규칙 §3-5)
+ *  - gap 을 토큰 var() 로 직접 참조한 경우
+ *  - 자식이 2개 미만이거나 여러 종류가 섞인 경우
+ *
+ * AGENTS.md §2-2.
+ */
+import { collectClassTokens, stripVariants, stripModifiers } from "../lib/class-names.mjs";
+
+/**
+ * 컴포넌트별 기대 간격 (px).
+ * horizontal/vertical 이 다르면 각각, 같으면 both 로 둔다.
+ * sizes 가 있으면 자식의 size prop 에 따라 값이 갈린다.
+ */
+const GROUP_GAP = {
+  SCheckbox: { horizontal: 24, vertical: 8 },
+  SRadio: { horizontal: 24, vertical: 8 },
+  STextLink: {
+    horizontal: { default: 16, bySize: { md: 24, lg: 24 } },
+    vertical: 4,
+  },
+  SGhostButton: { both: 4 },
+  SButton: { both: { default: 8, bySize: { lg: 12 } } },
+  STag: { both: 8 },
+  SToggle: { both: 8 },
+};
+
+/** 이 컴포넌트들은 전용 그룹 컴포넌트가 따로 있다 */
+const HAS_GROUP_COMPONENT = {
+  SRadio: "SRadioGroup (direction 으로 간격을 맞춥니다)",
+  SRadioButton: "SRadioGroup — 그룹 간격이 -1px(테두리 겹침)이라 직접 만들지 않습니다",
+};
+
+/** gap 유틸리티에서 px 값을 뽑는다. 토큰 var() 참조면 null(검사 제외) */
+function readGap(tokens) {
+  for (const { token } of tokens) {
+    const util = stripModifiers(stripVariants(token));
+    const m = util.match(/^gap-(.+)$/);
+    if (!m) continue;
+    if (m[1].startsWith("[")) return { skip: true }; // gap-[var(--...)] 등
+    if (/^\d+$/.test(m[1])) return { value: Number(m[1]) };
+  }
+  return { value: null }; // gap 자체가 없음
+}
+
+/** JSX 자식 중 컴포넌트 엘리먼트만 (공백 텍스트 제외) */
+function elementChildren(node) {
+  return (node.children ?? []).filter(
+    (ch) =>
+      ch.type === "JSXElement" &&
+      ch.openingElement.name.type === "JSXIdentifier",
+  );
+}
+
+const nameOf = (el) => el.openingElement.name.name;
+
+/** 자식들의 size prop 중 가장 먼저 나오는 리터럴 값 */
+function sizeOf(children) {
+  for (const ch of children) {
+    const attr = ch.openingElement.attributes.find(
+      (a) => a.type === "JSXAttribute" && a.name?.name === "size",
+    );
+    if (attr?.value?.type === "Literal" && typeof attr.value.value === "string") {
+      return attr.value.value;
+    }
+  }
+  return undefined;
+}
+
+/** spec(number | {default, bySize}) 을 size 로 해석 */
+function resolve(spec, size) {
+  if (typeof spec === "number") return spec;
+  if (!spec) return undefined;
+  return (size && spec.bySize?.[size]) ?? spec.default;
+}
+
+export default {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "같은 컴포넌트를 나열할 때 컴포넌트별 그룹 간격 사용",
+    },
+    schema: [
+      {
+        type: "object",
+        properties: {
+          ignore: { type: "array", items: { type: "string" }, uniqueItems: true },
+        },
+        additionalProperties: false,
+      },
+    ],
+    messages: {
+      wrongGap:
+        "{{component}} 를 {{dirLabel}} 배열할 때 간격은 `gap-{{expected}}` 입니다{{actualLabel}}. (AGENTS.md §2-2)",
+      useGroupComponent:
+        "{{component}} 를 직접 flex 로 감싸지 마세요 — {{suggestion}}. (AGENTS.md §2-2)",
+    },
+    fixable: "code",
+  },
+
+  create(context) {
+    const ignore = new Set(context.options[0]?.ignore ?? []);
+
+    return {
+      JSXElement(node) {
+        const classAttr = node.openingElement.attributes.find(
+          (a) => a.type === "JSXAttribute" && (a.name?.name === "className" || a.name?.name === "class"),
+        );
+        if (!classAttr) return;
+
+        const tokens = collectClassTokens(classAttr);
+        const utils = tokens.map(({ token }) => stripModifiers(stripVariants(token)));
+
+        // flex 컨테이너가 아니면 대상이 아니다
+        if (!utils.includes("flex") && !utils.includes("inline-flex")) return;
+        // 양끝 분리는 gap 규칙 대상이 아니다 (하단 버튼 배치 등)
+        if (utils.some((u) => u.startsWith("justify-between") || u.startsWith("justify-around"))) return;
+
+        const children = elementChildren(node);
+        if (children.length < 2) return;
+
+        // 같은 컴포넌트로만 이루어진 그룹만 판단한다
+        const first = nameOf(children[0]);
+        if (!children.every((ch) => nameOf(ch) === first)) return;
+        if (ignore.has(first)) return;
+
+        // 전용 그룹 컴포넌트가 있으면 그쪽을 권한다
+        if (HAS_GROUP_COMPONENT[first]) {
+          context.report({
+            node: node.openingElement,
+            messageId: "useGroupComponent",
+            data: { component: first, suggestion: HAS_GROUP_COMPONENT[first] },
+          });
+          return;
+        }
+
+        const spec = GROUP_GAP[first];
+        if (!spec) return;
+
+        const vertical = utils.includes("flex-col") || utils.includes("flex-col-reverse");
+        const dirSpec = spec.both ?? (vertical ? spec.vertical : spec.horizontal);
+        const expected = resolve(dirSpec, sizeOf(children));
+        if (expected == null) return;
+
+        const gap = readGap(tokens);
+        if (gap.skip) return;
+        if (gap.value === expected) return;
+
+        context.report({
+          node: node.openingElement,
+          messageId: "wrongGap",
+          data: {
+            component: first,
+            dirLabel: spec.both ? "" : vertical ? "세로로" : "가로로",
+            expected: String(expected),
+            actualLabel: gap.value == null ? " (지정되지 않았습니다)" : ` — 현재 gap-${gap.value}`,
+          },
+          fix(fixer) {
+            // 기존 gap 유틸리티가 리터럴 문자열일 때만 안전하게 교체한다
+            if (gap.value == null) return null;
+            const literal = classAttr.value;
+            const raw =
+              literal?.type === "Literal"
+                ? literal
+                : literal?.type === "JSXExpressionContainer" && literal.expression.type === "Literal"
+                  ? literal.expression
+                  : null;
+            if (!raw || typeof raw.value !== "string") return null;
+            const next = raw.value.replace(
+              new RegExp(`(^|\\s)gap-${gap.value}(?=\\s|$)`),
+              `$1gap-${expected}`,
+            );
+            if (next === raw.value) return null;
+            return fixer.replaceText(raw, `"${next}"`);
+          },
+        });
+      },
+    };
+  },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sellmate-design-system-react",
-  "version": "3.1.0",
+  "version": "3.3.0",
   "description": "Sellmate Design System — React (TypeScript + Tailwind v4) port",
   "license": "UNLICENSED",
   "keywords": [
@@ -19,8 +19,13 @@
     "dist",
     "eslint",
     "!eslint/__tests__",
+    "bin",
+    "!bin/__tests__",
     "AGENTS.md"
   ],
+  "bin": {
+    "sellmate-ds": "./bin/sellmate-ds.mjs"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -51,6 +56,7 @@
     "build-storybook": "storybook build",
     "test:spec": "npm run build && node --test ./src/components/**/*.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",