sellmate-design-system-react 9.0.0-beta.75 → 9.0.0-beta.76

package/eslint/lib/class-names.mjs

@@ -10,14 +10,12 @@
  * 동적으로 조립되는 부분(변수·삼항의 식별자 등)은 정적 분석 대상이 아니므로 건너뛴다.
  */
 
-const CLASS_ATTRS = new Set(["className", "class"]);
-const CLASS_HELPERS = new Set(["cn", "clsx", "classNames", "classnames", "cva", "twMerge"]);
+const CLASS_ATTRS = new Set(['className', 'class']);
+const CLASS_HELPERS = new Set(['cn', 'clsx', 'classNames', 'classnames', 'cva', 'twMerge']);
 
 /** 문자열을 공백 기준 클래스 토큰으로 나눈다 (variant 접두어는 유지) */
 export function tokenize(value) {
-  return String(value)
-    .split(/\s+/)
-    .filter(Boolean);
+  return String(value).split(/\s+/).filter(Boolean);
 }
 
 /**
@@ -38,16 +36,16 @@ function indexOfTopLevelColon(s) {
   let depth = 0;
   for (let i = 0; i < s.length; i++) {
     const c = s[i];
-    if (c === "[") depth++;
-    else if (c === "]") depth--;
-    else if (c === ":" && depth === 0) return i;
+    if (c === '[') depth++;
+    else if (c === ']') depth--;
+    else if (c === ':' && depth === 0) return i;
   }
   return -1;
 }
 
 /** `!gap-12` / `-mt-8` 같은 접두 기호 제거 */
 export function stripModifiers(token) {
-  return token.replace(/^!/, "").replace(/^-/, "");
+  return token.replace(/^!/, '').replace(/^-/, '');
 }
 
 /**
@@ -55,7 +53,7 @@ export function stripModifiers(token) {
  * @returns {Array<{ token: string, node: import('estree').Node }>}
  */
 export function collectClassTokens(attrNode) {
-  if (attrNode.type !== "JSXAttribute") return [];
+  if (attrNode.type !== 'JSXAttribute') return [];
   const name = attrNode.name?.name;
   if (!CLASS_ATTRS.has(name)) return [];
 
@@ -64,46 +62,46 @@ export function collectClassTokens(attrNode) {
     for (const token of tokenize(raw)) out.push({ token, node });
   };
 
-  const visit = (node) => {
+  const visit = node => {
     if (!node) return;
     switch (node.type) {
-      case "Literal":
-        if (typeof node.value === "string") push(node.value, node);
+      case 'Literal':
+        if (typeof node.value === 'string') push(node.value, node);
         break;
-      case "TemplateLiteral":
+      case 'TemplateLiteral':
         // 정적 부분만 본다. 보간(${}) 안쪽은 아래 표현식 방문으로 따로 처리.
-        for (const q of node.quasis) push(q.value.cooked ?? "", node);
+        for (const q of node.quasis) push(q.value.cooked ?? '', node);
         for (const e of node.expressions) visit(e);
         break;
-      case "JSXExpressionContainer":
+      case 'JSXExpressionContainer':
         visit(node.expression);
         break;
-      case "CallExpression": {
+      case 'CallExpression': {
         const callee = node.callee;
-        const fnName = callee?.type === "Identifier" ? callee.name : callee?.property?.name;
+        const fnName = callee?.type === 'Identifier' ? callee.name : callee?.property?.name;
         if (fnName && CLASS_HELPERS.has(fnName)) {
           for (const arg of node.arguments) visit(arg);
         }
         break;
       }
-      case "ConditionalExpression":
+      case 'ConditionalExpression':
         visit(node.consequent);
         visit(node.alternate);
         break;
-      case "LogicalExpression":
+      case 'LogicalExpression':
         visit(node.left);
         visit(node.right);
         break;
-      case "ArrayExpression":
+      case 'ArrayExpression':
         for (const el of node.elements) visit(el);
         break;
-      case "ObjectExpression":
+      case 'ObjectExpression':
         // clsx({ 'gap-12': cond }) 형태 — 키가 클래스다
         for (const prop of node.properties) {
-          if (prop.type === "Property" && prop.key) {
-            if (prop.key.type === "Literal" && typeof prop.key.value === "string") {
+          if (prop.type === 'Property' && prop.key) {
+            if (prop.key.type === 'Literal' && typeof prop.key.value === 'string') {
               push(prop.key.value, prop.key);
-            } else if (prop.key.type === "Identifier" && !prop.computed) {
+            } else if (prop.key.type === 'Identifier' && !prop.computed) {
               push(prop.key.name, prop.key);
             }
           }

package/eslint/lib/table-column.mjs

@@ -58,17 +58,17 @@ export function isNonQuantityLabel(label) {
 /** 객체 리터럴에서 프로퍼티 노드를 이름으로 찾는다 */
 export function prop(objectNode, name) {
   return objectNode.properties.find(
-    (p) =>
-      p.type === "Property" &&
+    p =>
+      p.type === 'Property' &&
       !p.computed &&
-      ((p.key.type === "Identifier" && p.key.name === name) ||
-        (p.key.type === "Literal" && p.key.value === name)),
+      ((p.key.type === 'Identifier' && p.key.name === name) ||
+        (p.key.type === 'Literal' && p.key.value === name)),
   );
 }
 
 /** 문자열 리터럴 값 (아니면 undefined) */
 export function literalString(node) {
-  return node?.value?.type === "Literal" && typeof node.value.value === "string"
+  return node?.value?.type === 'Literal' && typeof node.value.value === 'string'
     ? node.value.value
     : undefined;
 }
@@ -89,10 +89,10 @@ export function literalString(node) {
  * @returns {{ nameProp, labelProp, columnName: string | undefined } | null}
  */
 export function asColumnShape(node) {
-  const nameProp = prop(node, "name");
-  const labelProp = prop(node, "label");
+  const nameProp = prop(node, 'name');
+  const labelProp = prop(node, 'label');
   if (!nameProp || !labelProp) return null;
-  if (!prop(node, "field") && !prop(node, "autoWidth")) return null;
+  if (!prop(node, 'field') && !prop(node, 'autoWidth')) return null;
   // name 이 문자열 리터럴이 아니면 컬럼 정의로 단정하지 않는다 (일반 객체 오탐 방지)
   const columnName = literalString(nameProp);
   if (columnName === undefined) return null;
@@ -104,9 +104,9 @@ export function asColumnShape(node) {
  * @returns {{ nameProp, labelProp, label: string } | null}
  */
 export function asColumn(node) {
-  const nameProp = prop(node, "name");
-  const labelProp = prop(node, "label");
-  if (!nameProp || !labelProp || !prop(node, "field")) return null;
+  const nameProp = prop(node, 'name');
+  const labelProp = prop(node, 'label');
+  if (!nameProp || !labelProp || !prop(node, 'field')) return null;
 
   const label = literalString(labelProp);
   if (label === undefined) return null; // 동적 label 은 판단하지 않는다

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

@@ -11,7 +11,7 @@
  *
  * AGENTS.md §2-2.
  */
-import { collectClassTokens, stripVariants, stripModifiers } from "../lib/class-names.mjs";
+import { collectClassTokens, stripVariants, stripModifiers } from '../lib/class-names.mjs';
 
 /**
  * 컴포넌트별 기대 간격 (px).
@@ -33,8 +33,8 @@ const GROUP_GAP = {
 
 /** 이 컴포넌트들은 전용 그룹 컴포넌트가 따로 있다 */
 const HAS_GROUP_COMPONENT = {
-  SRadio: "SRadioGroup (direction 으로 간격을 맞춥니다)",
-  SRadioButton: "SRadioGroup — 그룹 간격이 -1px(테두리 겹침)이라 직접 만들지 않습니다",
+  SRadio: 'SRadioGroup (direction 으로 간격을 맞춥니다)',
+  SRadioButton: 'SRadioGroup — 그룹 간격이 -1px(테두리 겹침)이라 직접 만들지 않습니다',
 };
 
 /** gap 유틸리티에서 px 값을 뽑는다. 토큰 var() 참조면 null(검사 제외) */
@@ -43,7 +43,7 @@ function readGap(tokens) {
     const util = stripModifiers(stripVariants(token));
     const m = util.match(/^gap-(.+)$/);
     if (!m) continue;
-    if (m[1].startsWith("[")) return { skip: true }; // gap-[var(--...)] 등
+    if (m[1].startsWith('[')) return { skip: true }; // gap-[var(--...)] 등
     // 간격 스케일은 `gap-sd-8` 형태다. 접두 없는 `gap-8` 은 Tailwind 기본 스케일이라
     // 값이 다르므로(32px) no-off-scale-spacing 이 따로 잡는다 — 여기선 다루지 않는다.
     const scaled = /^sd-(\d+)$/.exec(m[1]);
@@ -55,21 +55,19 @@ function readGap(tokens) {
 /** JSX 자식 중 컴포넌트 엘리먼트만 (공백 텍스트 제외) */
 function elementChildren(node) {
   return (node.children ?? []).filter(
-    (ch) =>
-      ch.type === "JSXElement" &&
-      ch.openingElement.name.type === "JSXIdentifier",
+    ch => ch.type === 'JSXElement' && ch.openingElement.name.type === 'JSXIdentifier',
   );
 }
 
-const nameOf = (el) => el.openingElement.name.name;
+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",
+      a => a.type === 'JSXAttribute' && a.name?.name === 'size',
     );
-    if (attr?.value?.type === "Literal" && typeof attr.value.value === "string") {
+    if (attr?.value?.type === 'Literal' && typeof attr.value.value === 'string') {
       return attr.value.value;
     }
   }
@@ -78,33 +76,33 @@ function sizeOf(children) {
 
 /** spec(number | {default, bySize}) 을 size 로 해석 */
 function resolve(spec, size) {
-  if (typeof spec === "number") return spec;
+  if (typeof spec === 'number') return spec;
   if (!spec) return undefined;
   return (size && spec.bySize?.[size]) ?? spec.default;
 }
 
 export default {
   meta: {
-    type: "problem",
+    type: 'problem',
     docs: {
-      description: "같은 컴포넌트를 나열할 때 컴포넌트별 그룹 간격 사용",
+      description: '같은 컴포넌트를 나열할 때 컴포넌트별 그룹 간격 사용',
     },
     schema: [
       {
-        type: "object",
+        type: 'object',
         properties: {
-          ignore: { type: "array", items: { type: "string" }, uniqueItems: true },
+          ignore: { type: 'array', items: { type: 'string' }, uniqueItems: true },
         },
         additionalProperties: false,
       },
     ],
     messages: {
       wrongGap:
-        "{{component}} 를 {{dirLabel}} 배열할 때 간격은 `gap-sd-{{expected}}` 입니다{{actualLabel}}. (AGENTS.md §2-2)",
+        '{{component}} 를 {{dirLabel}} 배열할 때 간격은 `gap-sd-{{expected}}` 입니다{{actualLabel}}. (AGENTS.md §2-2)',
       useGroupComponent:
-        "{{component}} 를 직접 flex 로 감싸지 마세요 — {{suggestion}}. (AGENTS.md §2-2)",
+        '{{component}} 를 직접 flex 로 감싸지 마세요 — {{suggestion}}. (AGENTS.md §2-2)',
     },
-    fixable: "code",
+    fixable: 'code',
   },
 
   create(context) {
@@ -113,7 +111,8 @@ export default {
     return {
       JSXElement(node) {
         const classAttr = node.openingElement.attributes.find(
-          (a) => a.type === "JSXAttribute" && (a.name?.name === "className" || a.name?.name === "class"),
+          a =>
+            a.type === 'JSXAttribute' && (a.name?.name === 'className' || a.name?.name === 'class'),
         );
         if (!classAttr) return;
 
@@ -121,23 +120,24 @@ export default {
         const utils = tokens.map(({ token }) => stripModifiers(stripVariants(token)));
 
         // flex 컨테이너가 아니면 대상이 아니다
-        if (!utils.includes("flex") && !utils.includes("inline-flex")) return;
+        if (!utils.includes('flex') && !utils.includes('inline-flex')) return;
         // 양끝 분리는 gap 규칙 대상이 아니다 (하단 버튼 배치 등)
-        if (utils.some((u) => u.startsWith("justify-between") || u.startsWith("justify-around"))) return;
+        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 (!children.every(ch => nameOf(ch) === first)) return;
         if (ignore.has(first)) return;
 
         // 전용 그룹 컴포넌트가 있으면 그쪽을 권한다
         if (HAS_GROUP_COMPONENT[first]) {
           context.report({
             node: node.openingElement,
-            messageId: "useGroupComponent",
+            messageId: 'useGroupComponent',
             data: { component: first, suggestion: HAS_GROUP_COMPONENT[first] },
           });
           return;
@@ -146,7 +146,7 @@ export default {
         const spec = GROUP_GAP[first];
         if (!spec) return;
 
-        const vertical = utils.includes("flex-col") || utils.includes("flex-col-reverse");
+        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;
@@ -157,24 +157,26 @@ export default {
 
         context.report({
           node: node.openingElement,
-          messageId: "wrongGap",
+          messageId: 'wrongGap',
           data: {
             component: first,
-            dirLabel: spec.both ? "" : vertical ? "세로로" : "가로로",
+            dirLabel: spec.both ? '' : vertical ? '세로로' : '가로로',
             expected: String(expected),
-            actualLabel: gap.value == null ? " (지정되지 않았습니다)" : ` — 현재 gap-sd-${gap.value}`,
+            actualLabel:
+              gap.value == null ? ' (지정되지 않았습니다)' : ` — 현재 gap-sd-${gap.value}`,
           },
           fix(fixer) {
             // 기존 gap 유틸리티가 리터럴 문자열일 때만 안전하게 교체한다
             if (gap.value == null) return null;
             const literal = classAttr.value;
             const raw =
-              literal?.type === "Literal"
+              literal?.type === 'Literal'
                 ? literal
-                : literal?.type === "JSXExpressionContainer" && literal.expression.type === "Literal"
+                : literal?.type === 'JSXExpressionContainer' &&
+                    literal.expression.type === 'Literal'
                   ? literal.expression
                   : null;
-            if (!raw || typeof raw.value !== "string") return null;
+            if (!raw || typeof raw.value !== 'string') return null;
             const next = raw.value.replace(
               new RegExp(`(^|\\s)gap-sd-${gap.value}(?=\\s|$)`),
               `$1gap-sd-${expected}`,

package/eslint/rules/divider-vertical-height.mjs

@@ -16,18 +16,18 @@
  *
  * AGENTS.md §3-6.
  */
-import { collectClassTokens, stripVariants, stripModifiers } from "../lib/class-names.mjs";
+import { collectClassTokens, stripVariants, stripModifiers } from '../lib/class-names.mjs';
 
 /** 높이를 정하는 유틸리티인가 — `h-auto` 만 예외(기본값과 같아 stretch 가 살아 있다) */
 function heightUtil(util) {
   const m = /^h-(.+)$/.exec(util);
-  if (!m || m[1] === "auto") return null;
+  if (!m || m[1] === 'auto') return null;
   return m[1];
 }
 
 /** 교차축 정렬을 이미 직접 지정했는가 */
 function alignsSelf(util) {
-  return /^self-/.test(util) || util === "my-auto" || util === "mt-auto" || util === "mb-auto";
+  return /^self-/.test(util) || util === 'my-auto' || util === 'mt-auto' || util === 'mb-auto';
 }
 
 /**
@@ -41,45 +41,45 @@ function toHeightProp(value) {
   if (scaled) return `{${scaled[1]}}`;
   const arbitrary = /^\[(.+)\]$/.exec(value);
   if (!arbitrary) return null;
-  const inner = arbitrary[1].replace(/_/g, " ");
+  const inner = arbitrary[1].replace(/_/g, ' ');
   const px = /^(\d+(?:\.\d+)?)px$/.exec(inner);
   if (px) return `{${px[1]}}`;
   if (inner.includes('"')) return null;
   return `"${inner}"`;
 }
 
-const isClassAttr = (a) =>
-  a.type === "JSXAttribute" && (a.name?.name === "className" || a.name?.name === "class");
+const isClassAttr = a =>
+  a.type === 'JSXAttribute' && (a.name?.name === 'className' || a.name?.name === 'class');
 
 export default {
   meta: {
-    type: "problem",
+    type: 'problem',
     docs: {
-      description: "세로 SDivider 의 높이는 className 이 아니라 height prop 으로 지정",
+      description: '세로 SDivider 의 높이는 className 이 아니라 height prop 으로 지정',
     },
     schema: [],
     messages: {
       useHeightProp:
-        "세로 SDivider 의 높이는 `height` prop 으로 주세요{{suggestion}} — `className` 으로 주면 `align-self: stretch` 가 무효가 되어 선이 줄 맨 위에 붙습니다. (AGENTS.md §3-6)",
+        '세로 SDivider 의 높이는 `height` prop 으로 주세요{{suggestion}} — `className` 으로 주면 `align-self: stretch` 가 무효가 되어 선이 줄 맨 위에 붙습니다. (AGENTS.md §3-6)',
     },
-    fixable: "code",
+    fixable: 'code',
   },
 
   create(context) {
     return {
       JSXOpeningElement(node) {
-        if (node.name.type !== "JSXIdentifier" || node.name.name !== "SDivider") return;
+        if (node.name.type !== 'JSXIdentifier' || node.name.name !== 'SDivider') return;
 
         const attrs = node.attributes;
-        const named = (n) => attrs.find((a) => a.type === "JSXAttribute" && a.name?.name === n);
+        const named = n => attrs.find(a => a.type === 'JSXAttribute' && a.name?.name === n);
 
         // 세로 분할선만 대상. `vertical={expr}` 처럼 값이 정적이지 않으면 판단하지 않는다.
-        const vertical = named("vertical");
+        const vertical = named('vertical');
         if (!vertical) return;
         if (vertical.value !== null && vertical.value?.expression?.value !== true) return;
 
         // 이미 height prop 을 쓰고 있으면 컴포넌트가 정렬까지 맡는다
-        if (named("height")) return;
+        if (named('height')) return;
 
         const classAttr = attrs.find(isClassAttr);
         if (!classAttr) return;
@@ -98,29 +98,29 @@ export default {
 
         context.report({
           node,
-          messageId: "useHeightProp",
-          data: { suggestion: propValue ? ` (\`height=${propValue}\`)` : "" },
+          messageId: 'useHeightProp',
+          data: { suggestion: propValue ? ` (\`height=${propValue}\`)` : '' },
           fix(fixer) {
             if (!propValue) return null;
             // className 이 통짜 문자열일 때만 안전하게 손댄다 (cn()·템플릿 리터럴은 제외)
             const raw =
-              classAttr.value?.type === "Literal"
+              classAttr.value?.type === 'Literal'
                 ? classAttr.value
-                : classAttr.value?.type === "JSXExpressionContainer" &&
-                    classAttr.value.expression.type === "Literal"
+                : classAttr.value?.type === 'JSXExpressionContainer' &&
+                    classAttr.value.expression.type === 'Literal'
                   ? classAttr.value.expression
                   : null;
-            if (!raw || typeof raw.value !== "string") return null;
+            if (!raw || typeof raw.value !== 'string') return null;
 
             const rest = raw.value
               .split(/\s+/)
               .filter(Boolean)
-              .filter((t) => t !== `h-${height}`);
+              .filter(t => t !== `h-${height}`);
             if (rest.length === raw.value.split(/\s+/).filter(Boolean).length) return null;
 
             const fixes = [fixer.insertTextAfter(vertical, ` height=${propValue}`)];
             if (rest.length > 0) {
-              fixes.push(fixer.replaceText(raw, `"${rest.join(" ")}"`));
+              fixes.push(fixer.replaceText(raw, `"${rest.join(' ')}"`));
             } else {
               // 속성만 지우면 공백이 두 칸 남는다 — 앞 공백까지 함께 지운다
               const src = context.sourceCode ?? context.getSourceCode();