Design 토큰 파싱 동작 수정 및 토큰 생성 (#14)

* feat: 스토리북 초기 설정

* chore: 로컬 환경 설정 gitignore에 추가

* feat: 디자인 토큰 tailwind 적용 설정

* feat: 스토리북 배포용 공용 컴포넌트 설정

* feat: tailwind설정에 postcss관련 설정 임시 복원 및 storybook 배포 설정

* feat: 스토리북 배포 관련 설정 추가

* feat: 디자인 시스템 스토리북 초기 및 테스트용 설정

* feat: 프리티어 및 린트 설치 및 설정 (임시)

* style: 린트 및 프리티어로 인한 코드 스타일 변경

* feat: 디자인 시스템 스토리북 배포 설정 수정

포크한 레포에 작동 테스틀 위해 연결
스토리북 형태도 세팅함

* feat: token 변환 설정파일 수정

구조 수정 및 tailwind prefix에 맞게 mapping

* docs: 디자인 시스템 관련 리드미 템플릿 수정

* feat: 디자인 시스템 패키지 배포 테스트 성공

* chore: tailwind/postcss 버전 복구

* feat: 스토리북 스타일 autodocs처리

* docs: 디자인 시스템 관련 문서들 정리(임시)

* feat: 토큰 설정 및 스토리북 배포 설정 수정

* feat: 빌드 관련 tailwindcss/postcss 버전 수정 및 gitignore 포함

이전 패키지 버전에선 빌드가 안 됐음.

* feat: ci linux환경에서의 스토리북 빌드 관련 패키지 설정 수정

* Merge branch 'design' into main

* feat: 디자인 시스템 스토리북 예시 수정

* feat: zustand설치

* feat: 상현 개인 레포에서 스토리북 배포 동작하도록 수정

vercel 정책 상 prography계정의 레포는 organization이라 유료 플랜이라.

* feat: deploy-storybook path에 자기자신 포함해, 변경 시 동작하도록 수정

* fix: deploy-storybook path경로 수정

마이너 수정이라 main에서 진행

* feat: Chromatic UI 테스팅 github action 실험 적용

* feat: chromatic 설치

* feat: chromatic ci 관련 yarn->npm으로 변경

* feat: chromatic 실험용 Test 컴폰너트 ui 변경

* feat: chromatic github action 패키지 버전 수정

* feat: chromatic ci 중단 옵션 수정

* feat: upstream PR에 대해 작동하도록 수정

* feat: 크로마틱 연동 테스트

* feat: 스토리북 plop통한 템플릿 생성 기능 추가

* docs: 스토리북 Intro 문서 수정

* feat: 크로마틱 연동 upstream에 적용하도록 수정

* docs: 스토리북 Intro 문구 수정

code형태 아니어야 했기에.

* docs: 스토리북 intro 스타일 다듬기

* docs: 스토리북 버전 및 change log관련 문구 수정

* feat: 스토리북 배포 주소 추가

* docs: 스토리북 intro 문서 스타일 수정.

숫자 표기 안되는 문제로 인해.

* docs: 프로젝트 README에 디자인시스템 배포 페이지 추가

* docs: 스토리북 Intro 스타일 수정

* docs: 프로젝트 README에 디자인시스템 배포 페이지 추가

* fix: 디자인 시스템 chromatic 연결 프로젝트 변경

다른 프로젝트랑 연결 되어 있었기에 수정.

* feat: chromatic github action에서 pull request target 방식으로 수정

forked에서의 pull request로는 secret을 사용할 수 없기 때문에.

* feat: 디자인 토큰 새로운 형식 대해 파싱 수정

파싱되지 않던 형식 처리, tailwind에선 사용되지 않는 토큰 제거, tailwind prefix 매핑 수정.

* feat: 수정된 디자인 토큰 파싱으로 tailwind 토큰 생성

* fix: github action 관련 chromatic 액션 버전 수정

Author: Hys-Lee

.github/workflows/chromatic.yml

@@ -40,7 +40,7 @@ jobs:
         run: npm run build-storybook # 또는 npm run build-storybook
 
       - name: Run Chromatic
-        uses: chromaui/action@12.2.0
+        uses: chromaui/action@v1
         with:
           # 👇 Chromatic 프로젝트 토큰 (Secrets에 저장 권장)
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

app/tokens.css

@@ -1,2 +1,74 @@
 @theme {
-}
+  --radius-2: 0.125rem;
+  --radius-4: 0.25rem;
+  --radius-8: 0.5rem;
+  --radius-12: 0.75rem;
+  --radius-16: 1rem;
+  --color-label-inverse: #ffffff;
+  --color-label-normal: #33363d;
+  --color-label-strong: #1e2124;
+  --color-label-alternative: #464c53;
+  --color-label-primary: #5d5fef;
+  --color-label-disabled: #8a949e;
+  --color-label-assistive: #6d7882;
+  --color-background-normal: #f7f7f8;
+  --color-background-strong: #33363d;
+  --color-background-primary: #5d5fef;
+  --color-background-alternative: #e6e8ea;
+  --color-background-disabled: #b1b8be;
+  --color-status-negative: #ea3429;
+  --color-status-positive: #228738;
+  --spacing-gap-2: 0.125rem;
+  --spacing-gap-4: 0.25rem;
+  --spacing-gap-8: 0.5rem;
+  --spacing-gap-12: 0.75rem;
+  --spacing-gap-16: 1rem;
+  --spacing-gap-20: 1.25rem;
+  --spacing-padding-2: 0.125rem;
+  --spacing-padding-4: 0.25rem;
+  --spacing-padding-8: 0.5rem;
+  --spacing-padding-12: 0.75rem;
+  --spacing-padding-16: 1rem;
+  --spacing-padding-20: 1.25rem;
+  --radius-round: 62.438rem;
+  --border-normal: 0.062rem solid #cdd1d5;
+  --font-fontFamilies-suit-variable: SUIT Variable;
+  --leading-lineHeights-0: 140%;
+  --leading-lineHeights-1: 120%;
+  --leading-lineHeights-2: 140%;
+  --leading-lineHeights-3: 140%;
+  --leading-lineHeights-4: 140%;
+  --leading-lineHeights-5: 120%;
+  --leading-lineHeights-6: 120%;
+  --leading-lineHeights-7: 140%;
+  --font-weight-fontWeights-suit-variable-0: Bold;
+  --font-weight-fontWeights-suit-variable-1: Regular;
+  --font-weight-fontWeights-suit-variable-2: Medium;
+  --text-fontSize-0: 24;
+  --text-fontSize-1: 16;
+  --text-fontSize-2: 16;
+  --text-fontSize-3: 14;
+  --text-fontSize-4: 14;
+  --text-fontSize-5: 20;
+  --text-fontSize-6: 20;
+  --text-fontSize-7: 12;
+  --tracking-letterSpacing-0: -1%;
+  --tracking-letterSpacing-1: -1%;
+  --tracking-letterSpacing-2: -1%;
+  --tracking-letterSpacing-3: -1%;
+  --tracking-letterSpacing-4: -1%;
+  --tracking-letterSpacing-5: -1%;
+  --tracking-letterSpacing-6: -1%;
+  --tracking-letterSpacing-7: -1%;
+  --non-mapped-paragraphSpacing-0: 0;
+  --non-mapped-paragraphSpacing-1: 0;
+  --non-mapped-paragraphSpacing-2: 0;
+  --non-mapped-paragraphSpacing-3: 0;
+  --non-mapped-paragraphSpacing-4: 0;
+  --non-mapped-paragraphSpacing-5: 0;
+  --non-mapped-paragraphSpacing-6: 0;
+  --non-mapped-paragraphSpacing-7: 0;
+  --non-mapped-textCase-none: none;
+  --non-mapped-textDecoration-none: none;
+  --spacing-paragraphIndent-0: 0px;
+}

sd-tokens.config.mjs

@@ -1,49 +1,128 @@
 import StyleDictionary from "style-dictionary";
+import { usesReferences } from "style-dictionary/utils";
 
+/**
+ * tailwind에서 사용되는 prefix 매핑
+ */
 const token2TailwindTypeMap = {
   color: "color",
-  sizing: "dimension",
-  spacing: "dimension",
-  dimension: "dimension",
-  borderWidth: "border-witdh",
-  borderRadius: "radius",
-  border: "color",
+  sizing: "spacing",
+  spacing: "spacing",
+  dimension: "spacing",
+  // border는 합쳐져서 오기 때문에 다르게 처리해야 함.
+  borderWidth: "border-witdh", // 얘는 일단 없어져야함.
+  borderRadius: "radius", // 얘는 따로임.
+  border: "border",
+  //
   opacity: "opacity",
   boxShadow: "shadow",
+  // 폰트도 체크해볼 것.
   fontFamilies: "font",
   fontWeights: "font-weight",
   lineHeights: "leading",
-  fontSizes: "font-size",
+  fontSizes: "text",
   letterSpacing: "tracking",
+
+  // paragraphSpacing는 token type에 존재는 하지만 값을 0으로 해 안쓰는 듯. tailwind엔 없음.
 };
 
-// 커스텀 포맷 등록
+/**
+ * 파싱에서 아예 제외시킬 토큰들.
+ * tailwind에서 사용되지 않으면서 에러를 일으키는 경우들.
+ * EX)
+ * semantic의 토큰을 참조값으로 사용하는 semantic 토큰의 경우
+ */
+const excludingTokenNames = ["title", "body", "caption"];
+
+/**
+ * tailwind에서 사용할 수 있도록 formatting
+ */
 StyleDictionary.registerFormat({
   name: "css/theme-variables",
 
   format: function ({ dictionary }) {
     return [
       "@theme {",
-      ...dictionary.allTokens.map(
-        (prop) =>
-          `  --${token2TailwindTypeMap?.[prop.type] ?? "non-mapped"}-${prop.name}: ${prop.value};`,
-      ),
+      ...dictionary.allTokens
+        .filter((prop) => !prop.name.includes("primitive"))
+        .map((prop) => {
+          //test
+          console.log("prop.name, prop.type: ", prop.name, prop.type);
+          const nameFromPath = prop.path.slice(1).join("-");
+
+          return `  --${token2TailwindTypeMap?.[prop.type] ?? "non-mapped"}-${nameFromPath}: ${prop.value};`;
+        }),
       "}",
     ].join("\n");
   },
 });
 
+/**
+ * 참조값을 사용하는 토큰들에 대해 처리.
+ * 피참조값은 Primitive로 가정함.
+ */
+StyleDictionary.registerTransform({
+  name: "value/cssVarRef",
+  type: "value",
+  transitive: true,
+  filter: function (token) {
+    // 이 토큰이 다른 토큰을 참조하는지 확인합니다.
+    const filterRes =
+      typeof token.original.value === "string" &&
+      token.original.value.startsWith("{") &&
+      token.original.value.endsWith("}");
+
+    return filterRes;
+  },
+  transform: function (token, options) {
+    const originalValue = token.original.value;
+    if (usesReferences(originalValue)) return undefined;
+
+    throw new Error("transform 내부 transform defer 에러");
+  },
+});
+
+/**
+ * 아래는 사용될 토큰들에 대해 Semantic에서의 참조값은 Primitive의 것으로
+ * 참조 경로 재구성하는 작업.
+ */
+
+const convertRef = (stringValue, setName) => {
+  if (stringValue.startsWith("{"))
+    // 참조인 "{","}"내부에 setName추가
+    return `{${setName}.${stringValue.slice(1, -1)}}`;
+
+  // 참조가 아니라면
+  return stringValue;
+};
+
 const recursliveParsingHelper = (setName, curKey, curValue) => {
   // 종료 조건
   if (Object.keys(curValue).includes("type")) {
-    const prevValueHandled = curValue.value.slice(1, -1);
-    return { ...curValue, value: `{${setName}.${prevValueHandled}}` };
+    const newValue =
+      typeof curValue.value === "string"
+        ? convertRef(curValue.value, setName)
+        : // object인 경우
+          Object.entries(curValue.value).reduce(
+            (acc, [tokenEleKey, tokenELeValue]) => {
+              if (tokenELeValue.startsWith("{"))
+                return {
+                  ...acc,
+                  [tokenEleKey]: convertRef(tokenELeValue, setName),
+                };
+              return { ...acc, [tokenEleKey]: tokenELeValue };
+            },
+            {},
+          );
+    return {
+      [curKey]: { ...curValue, value: newValue },
+    };
   }
 
   const resultValue = Object.entries(curValue).reduce(
     (acc, [nextKey, innerObj]) => {
-      const resValue = recursliveParsingHelper(setName, nextKey, innerObj);
-      return { ...acc, [nextKey]: resValue };
+      const resToken = recursliveParsingHelper(setName, nextKey, innerObj);
+      return { ...acc, ...resToken };
     },
     {},
   );
@@ -58,22 +137,29 @@ StyleDictionary.registerParser({
 
     const convertedParsed = Object.entries(parsed).reduce(
       (accAllTokens, [setName, tokens]) => {
-        if (setName.startsWith("Primitive") || setName.startsWith("$"))
+        if (setName.startsWith("Primitive") || setName.startsWith("$")) {
           return { ...accAllTokens, [setName]: tokens };
+        }
 
-        const primitiveSet = setName.replace("Semantic", "Primitive");
+        const primitiveTargetSet = setName.replace("Semantic", "Primitive");
 
         const semanticTokens = Object.entries(tokens).reduce(
           (accSemanticTokens, [key, value]) => {
+            // 제외시킬 토큰은 파싱 제외.
+            if (excludingTokenNames.includes(key))
+              return { ...accSemanticTokens };
+
             const newSemanticTokens = recursliveParsingHelper(
-              primitiveSet,
+              primitiveTargetSet,
               key,
               value,
             );
+
             return { ...accSemanticTokens, ...newSemanticTokens };
           },
           {},
         );
+
         return { ...accAllTokens, [setName]: semanticTokens };
       },
       {},
@@ -83,13 +169,19 @@ StyleDictionary.registerParser({
   },
 });
 
+/**
+ * 토큰 처리 설정
+ */
+
 export default {
   source: ["tokens/**/*.json"],
 
   parsers: ["json-parser"],
   platforms: {
     css: {
       transformGroup: "css",
+
+      transforms: ["value/cssVarRef"],
       buildPath: "app/", //변환한 파일을 저장할 경로
       files: [
         {

tokens/design-tokens.json

@@ -803,9 +803,6 @@
   },
   "$themes": [],
   "$metadata": {
-    "tokenSetOrder": [
-      "Primitive/light",
-      "Semantic/light"
-    ]
+    "tokenSetOrder": ["Primitive/light", "Semantic/light"]
   }
-}
+}