diff --git a/bun.lock b/bun.lock index 2e84a2815..95b195c7e 100644 --- a/bun.lock +++ b/bun.lock @@ -35,6 +35,7 @@ "@sanity/table": "^1.1.3", "@sanity/vision": "3", "@sanity/visual-editing": "^2.10.5", + "@seed-design/mapping": "0.0.0", "@seed-design/react": "0.0.0", "@seed-design/react-icon": "^0.7.3", "@seed-design/recipe": "0.0.0-alpha-20241212122822", @@ -165,7 +166,7 @@ "version": "0.0.11", "bin": "./bin/index.mjs", "dependencies": { - "@june-so/analytics-node": "^8.0.0", + "@seed-design/mapping": "0.0.0", "cac": "^6.7.14", "es-toolkit": "^1.25.2", "execa": "^9.4.1", @@ -198,6 +199,10 @@ "esbuild": "^0.25.0", }, }, + "packages/mapping": { + "name": "@seed-design/mapping", + "version": "0.0.0", + }, "packages/qvism-preset": { "name": "@seed-design/qvism-preset", "version": "0.0.0", @@ -1265,8 +1270,6 @@ "@june-so-sandbox/api": ["@june-so-sandbox/api@0.3.1", "", {}, "sha512-ydYidkz633TRiLoAQLPVR4o7FBBiQf86OXj4A+B2MPTMXUJ0YdQMyiJUPcr9T7RuBn0dlzpKDsdVpOGJhZ4e7Q=="], - "@june-so/analytics-node": ["@june-so/analytics-node@8.0.0", "", { "dependencies": { "@segment/analytics-node": "^1.1.0" } }, "sha512-gY/tzrtC8ONw6czaillRiLwqLp+r7lNiPdLbpgB61b42pgAYBHdiU0qjweS6xASRZSYaqH27WFADtBtw4KsifA=="], - "@kwsites/file-exists": ["@kwsites/file-exists@1.1.1", "", { "dependencies": { "debug": "^4.1.1" } }, "sha512-m9/5YGR18lIwxSFDwfE3oA7bWuq9kdau6ugN4H2rJeyhFQZcG9AgSHkQtSD15a8WvTgfz9aikZMrKPHvbpqFiw=="], "@kwsites/promise-deferred": ["@kwsites/promise-deferred@1.1.1", "", {}, "sha512-GaHYm+c0O9MjZRu0ongGBRbinu8gVAMd2UZjji6jVmqKtZluZnptXGWhz1E8j8D2HJ3f/yMxKAUC0b+57wncIw=="], @@ -1279,10 +1282,6 @@ "@lezer/lr": ["@lezer/lr@1.4.2", "", { "dependencies": { "@lezer/common": "^1.0.0" } }, "sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA=="], - "@lukeed/csprng": ["@lukeed/csprng@1.1.0", "", {}, "sha512-Z7C/xXCiGWsg0KuKsHTKJxbWhpI3Vs5GwLfOean7MGyVFGqdRgBbAjOCh6u4bbjPc/8MJ2pZmK/0DLdCbivLDA=="], - - "@lukeed/uuid": ["@lukeed/uuid@2.0.1", "", { "dependencies": { "@lukeed/csprng": "^1.1.0" } }, "sha512-qC72D4+CDdjGqJvkFMMEAtancHUQ7/d/tAiHf64z8MopFDmcrtbcJuerDtFceuAfQJ2pDSfCKCtbqoGBNnwg0w=="], - "@manypkg/find-root": ["@manypkg/find-root@1.1.0", "", { "dependencies": { "@babel/runtime": "^7.5.5", "@types/node": "^12.7.1", "find-up": "^4.1.0", "fs-extra": "^8.1.0" } }, "sha512-mki5uBvhHzO8kYYix/WRy2WX8S3B5wdVSc9D6KcU5lQNglP2yt58/VfLuAK49glRXChosY8ap2oJ1qgma3GUVA=="], "@manypkg/get-packages": ["@manypkg/get-packages@1.1.3", "", { "dependencies": { "@babel/runtime": "^7.5.5", "@changesets/types": "^4.0.1", "@manypkg/find-root": "^1.1.0", "fs-extra": "^8.1.0", "globby": "^11.0.0", "read-yaml-file": "^1.1.0" } }, "sha512-fo+QhuU3qE/2TQMQmbVMqaQ6EWbMhi4ABWP+O4AM1NqPBuy0OrApV5LO6BrrgnhtAHS2NH6RrVk9OL181tTi8A=="], @@ -1625,6 +1624,8 @@ "@seed-design/figma-spec-widget": ["@seed-design/figma-spec-widget@workspace:tools/figma-spec-widget"], + "@seed-design/mapping": ["@seed-design/mapping@workspace:packages/mapping"], + "@seed-design/qvism-cli": ["@seed-design/qvism-cli@workspace:tools/qvism/cli"], "@seed-design/qvism-core": ["@seed-design/qvism-core@workspace:tools/qvism/core"], @@ -1681,12 +1682,6 @@ "@seed-design/vars": ["@seed-design/vars@workspace:packages/vars"], - "@segment/analytics-core": ["@segment/analytics-core@1.4.1", "", { "dependencies": { "@lukeed/uuid": "^2.0.0", "@segment/analytics-generic-utils": "1.1.1", "dset": "^3.1.2", "tslib": "^2.4.1" } }, "sha512-kV0Pf33HnthuBOVdYNani21kYyj118Fn+9757bxqoksiXoZlYvBsFq6giNdCsKcTIE1eAMqNDq3xE1VQ0cfsHA=="], - - "@segment/analytics-generic-utils": ["@segment/analytics-generic-utils@1.1.1", "", { "dependencies": { "tslib": "^2.4.1" } }, "sha512-THTIzBPHnvu1HYJU3fARdJ3qIkukO3zDXsmDm+kAeUks5R9CBXOQ6rPChiASVzSmwAIIo5uFIXXnCraojlq/Gw=="], - - "@segment/analytics-node": ["@segment/analytics-node@1.3.0", "", { "dependencies": { "@lukeed/uuid": "^2.0.0", "@segment/analytics-core": "1.4.1", "@segment/analytics-generic-utils": "1.1.1", "buffer": "^6.0.3", "node-fetch": "^2.6.7", "tslib": "^2.4.1" } }, "sha512-lRLz1WZaDokMoUe299yP5JkInc3OgJuqNNlxb6j0q22umCiq6b5iDo2gRmFn93reirIvJxWIicQsGrHd93q8GQ=="], - "@sentry-internal/browser-utils": ["@sentry-internal/browser-utils@8.54.0", "", { "dependencies": { "@sentry/core": "8.54.0" } }, "sha512-DKWCqb4YQosKn6aD45fhKyzhkdG7N6goGFDeyTaJFREJDFVDXiNDsYZu30nJ6BxMM7uQIaARhPAC5BXfoED3pQ=="], "@sentry-internal/feedback": ["@sentry-internal/feedback@8.54.0", "", { "dependencies": { "@sentry/core": "8.54.0" } }, "sha512-nQqRacOXoElpE0L0ADxUUII0I3A94niqG9Z4Fmsw6057QvyrV/LvTiMQBop6r5qLjwMqK+T33iR4/NQI5RhsXQ=="], @@ -2523,8 +2518,6 @@ "dotenv": ["dotenv@16.4.7", "", {}, "sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ=="], - "dset": ["dset@3.1.4", "", {}, "sha512-2QF/g9/zTaPDc3BjNcVTGoBbXBgYfMTTceLaYcFJ/W9kggFUkhxD/hMEeuLKbugyef9SqAx8cpgwlIP/jinUTA=="], - "dunder-proto": ["dunder-proto@1.0.1", "", { "dependencies": { "call-bind-apply-helpers": "^1.0.1", "es-errors": "^1.3.0", "gopd": "^1.2.0" } }, "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A=="], "duplexify": ["duplexify@4.1.3", "", { "dependencies": { "end-of-stream": "^1.4.1", "inherits": "^2.0.3", "readable-stream": "^3.1.1", "stream-shift": "^1.0.2" } }, "sha512-M3BmBhwJRZsSx38lZyhE53Csddgzl5R7xGJNk7CVddZD6CcmwMCH8J+7AprIrQKH7TonKxaCjcv27Qmf+sQ+oA=="], @@ -3357,8 +3350,6 @@ "node-abort-controller": ["node-abort-controller@3.1.1", "", {}, "sha512-AGK2yQKIjRuqnc6VkX2Xj5d+QW8xZ87pa1UK6yA6ouUyuxfHuMP6umE5QK7UmTeOAymo+Zx1Fxiuw9rVx8taHQ=="], - "node-fetch": ["node-fetch@2.7.0", "", { "dependencies": { "whatwg-url": "^5.0.0" }, "peerDependencies": { "encoding": "^0.1.0" }, "optionalPeers": ["encoding"] }, "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A=="], - "node-html-parser": ["node-html-parser@6.1.13", "", { "dependencies": { "css-select": "^5.1.0", "he": "1.2.0" } }, "sha512-qIsTMOY4C/dAa5Q5vsobRpOOvPfC4pB61UVW2uSwZNUp0QU/jCekTal1vMmbO0DgdHeLUJpv/ARmDqErVxA3Sg=="], "node-polyfill-webpack-plugin": ["node-polyfill-webpack-plugin@2.0.1", "", { "dependencies": { "assert": "^2.0.0", "browserify-zlib": "^0.2.0", "buffer": "^6.0.3", "console-browserify": "^1.2.0", "constants-browserify": "^1.0.0", "crypto-browserify": "^3.12.0", "domain-browser": "^4.22.0", "events": "^3.3.0", "filter-obj": "^2.0.2", "https-browserify": "^1.0.0", "os-browserify": "^0.3.0", "path-browserify": "^1.0.1", "process": "^0.11.10", "punycode": "^2.1.1", "querystring-es3": "^0.2.1", "readable-stream": "^4.0.0", "stream-browserify": "^3.0.0", "stream-http": "^3.2.0", "string_decoder": "^1.3.0", "timers-browserify": "^2.0.12", "tty-browserify": "^0.0.1", "type-fest": "^2.14.0", "url": "^0.11.0", "util": "^0.12.4", "vm-browserify": "^1.1.2" }, "peerDependencies": { "webpack": ">=5" } }, "sha512-ZUMiCnZkP1LF0Th2caY6J/eKKoA0TefpoVa68m/LQU1I/mE8rGt4fNYGgNuCcK+aG8P8P43nbeJ2RqJMOL/Y1A=="], @@ -4547,12 +4538,6 @@ "@seed-design/rootage-core/vitest": ["vitest@0.34.6", "", { "dependencies": { "@types/chai": "^4.3.5", "@types/chai-subset": "^1.3.3", "@types/node": "*", "@vitest/expect": "0.34.6", "@vitest/runner": "0.34.6", "@vitest/snapshot": "0.34.6", "@vitest/spy": "0.34.6", "@vitest/utils": "0.34.6", "acorn": "^8.9.0", "acorn-walk": "^8.2.0", "cac": "^6.7.14", "chai": "^4.3.10", "debug": "^4.3.4", "local-pkg": "^0.4.3", "magic-string": "^0.30.1", "pathe": "^1.1.1", "picocolors": "^1.0.0", "std-env": "^3.3.3", "strip-literal": "^1.0.1", "tinybench": "^2.5.0", "tinypool": "^0.7.0", "vite": "^3.1.0 || ^4.0.0 || ^5.0.0-0", "vite-node": "0.34.6", "why-is-node-running": "^2.2.2" }, "peerDependencies": { "@edge-runtime/vm": "*", "@vitest/browser": "*", "@vitest/ui": "*", "happy-dom": "*", "jsdom": "*", "playwright": "*", "safaridriver": "*", "webdriverio": "*" }, "optionalPeers": ["@edge-runtime/vm", "@vitest/browser", "@vitest/ui", "happy-dom", "jsdom", "playwright", "safaridriver", "webdriverio"], "bin": { "vitest": "vitest.mjs" } }, "sha512-+5CALsOvbNKnS+ZHMXtuUC7nL8/7F1F2DnHGjSsszX8zCjWSSviphCb/NuS9Nzf4Q03KyyDRBAXhF/8lffME4Q=="], - "@segment/analytics-core/tslib": ["tslib@2.6.2", "", {}, "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="], - - "@segment/analytics-generic-utils/tslib": ["tslib@2.6.2", "", {}, "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="], - - "@segment/analytics-node/tslib": ["tslib@2.6.2", "", {}, "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="], - "@shikijs/rehype/@shikijs/types": ["@shikijs/types@2.3.2", "", { "dependencies": { "@shikijs/vscode-textmate": "^10.0.1", "@types/hast": "^3.0.4" } }, "sha512-CBaMY+a3pepyC4SETi7+bSzO0f6hxEQJUUuS4uD7zppzjmrN4ZRtBqxaT+wOan26CR9eeJ5iBhc4qvWEwn7Eeg=="], "@shikijs/rehype/shiki": ["shiki@2.3.2", "", { "dependencies": { "@shikijs/core": "2.3.2", "@shikijs/engine-javascript": "2.3.2", "@shikijs/engine-oniguruma": "2.3.2", "@shikijs/langs": "2.3.2", "@shikijs/themes": "2.3.2", "@shikijs/types": "2.3.2", "@shikijs/vscode-textmate": "^10.0.1", "@types/hast": "^3.0.4" } }, "sha512-UZhz/gsUz7DHFbQBOJP7eXqvKyYvMGramxQiSDc83M/7OkWm6OdVHAReEc3vMLh6L6TRhgL9dvhXz9XDkCDaaw=="], @@ -4863,8 +4848,6 @@ "no-case/tslib": ["tslib@2.6.2", "", {}, "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="], - "node-fetch/whatwg-url": ["whatwg-url@5.0.0", "", { "dependencies": { "tr46": "~0.0.3", "webidl-conversions": "^3.0.0" } }, "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw=="], - "node-polyfill-webpack-plugin/readable-stream": ["readable-stream@4.7.0", "", { "dependencies": { "abort-controller": "^3.0.0", "buffer": "^6.0.3", "events": "^3.3.0", "process": "^0.11.10", "string_decoder": "^1.3.0" } }, "sha512-oIGGmcpTLwPga8Bn6/Z75SVaH1z5dUut2ibSyAMVhmUggWpmDn2dapB0n7f8nwaSiRtepAsfJyfXIO5DCVAODg=="], "node-polyfill-webpack-plugin/type-fest": ["type-fest@2.19.0", "", {}, "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA=="], @@ -5765,10 +5748,6 @@ "mdast-util-mdx-jsx/parse-entities/is-hexadecimal": ["is-hexadecimal@2.0.1", "", {}, "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg=="], - "node-fetch/whatwg-url/tr46": ["tr46@0.0.3", "", {}, "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="], - - "node-fetch/whatwg-url/webidl-conversions": ["webidl-conversions@3.0.1", "", {}, "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="], - "ora/chalk/supports-color": ["supports-color@7.2.0", "", { "dependencies": { "has-flag": "^4.0.0" } }, "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw=="], "parallel-transform/readable-stream/safe-buffer": ["safe-buffer@5.1.2", "", {}, "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="], diff --git a/docs/components/token-mapping-table.tsx b/docs/components/token-mapping-table.tsx index f0d7d7dc9..58e8dade2 100644 --- a/docs/components/token-mapping-table.tsx +++ b/docs/components/token-mapping-table.tsx @@ -2,34 +2,29 @@ import { resolveToken, type AST } from "@seed-design/rootage-core"; import { getRootage, stringifyValueLit } from "@/components/rootage"; import { ExpandableTokenCell } from "@/components/expandable-token-cell"; import { Fragment } from "react"; - -interface TokenMapping { - previousTokenId: string; - newTokenIds: AST.TokenRef[]; - note?: string; -} +import type { FoundationTokenMapping } from "@seed-design/mapping"; interface TokenMappingTableProps { - mappings: TokenMapping[]; + mappings: FoundationTokenMapping[]; } export interface TokenMappingItem { - previousTokenId: TokenMapping["previousTokenId"]; + previousTokenId: string; newTokens: { - id: TokenMapping["newTokenIds"][number]; + id: string; values: string[]; resolvedValue: AST.ValueLit; }[]; - note?: TokenMapping["note"]; + description?: string; } export async function TokenMappingTable({ mappings }: TokenMappingTableProps) { const rootage = await getRootage(); const tableItems: TokenMappingItem[] = mappings.map((mapping) => ({ - previousTokenId: mapping.previousTokenId, - newTokens: mapping.newTokenIds.map((newId) => { - const { path, value } = resolveToken(rootage, newId, { + previousTokenId: mapping.previous, + newTokens: mapping.next.map((newId) => { + const { path, value } = resolveToken(rootage, newId as `$${string}`, { global: "default", color: "theme-light", }); @@ -40,7 +35,7 @@ export async function TokenMappingTable({ mappings }: TokenMappingTableProps) { resolvedValue: value, }; }), - note: mapping.note, + description: mapping.description, })); return ( @@ -72,7 +67,7 @@ export async function TokenMappingTable({ mappings }: TokenMappingTableProps) { ))} - {item.note} + {item.description} ))} diff --git a/docs/components/typography-mapping-table.tsx b/docs/components/typography-mapping-table.tsx index 1ca44ad8b..436775c8f 100644 --- a/docs/components/typography-mapping-table.tsx +++ b/docs/components/typography-mapping-table.tsx @@ -2,15 +2,10 @@ import { getRootage } from "@/components/rootage"; import { Text } from "@/registry/ui/text"; import { Fragment } from "react"; import { TextProps } from "@/registry/ui/text"; - -interface TypographyMapping { - previousTokenId: string; - newTextStyleIds: string[]; - note?: string; -} +import type { FoundationTokenMapping } from "@seed-design/mapping"; interface TypographyMappingTableProps { - mappings: TypographyMapping[]; + mappings: FoundationTokenMapping[]; } export async function TypographyMappingTable({ mappings }: TypographyMappingTableProps) { @@ -20,9 +15,9 @@ export async function TypographyMappingTable({ mappings }: TypographyMappingTabl throw new Error("Typography component spec not found"); } - const tableItems: TypographyMapping[] = mappings.map((item) => ({ - previousTokenId: item.previousTokenId, - newTextStyleIds: item.newTextStyleIds.map((id) => { + const tableItems: FoundationTokenMapping[] = mappings.map((item) => ({ + previous: item.previous, + next: item.next.map((id) => { const typography = rootage.componentSpecEntities.typography.body.find(({ variants }) => variants.some((variant) => variant.name === "textStyle" && variant.value === id), ); @@ -33,7 +28,7 @@ export async function TypographyMappingTable({ mappings }: TypographyMappingTabl return id; }), - note: item.note, + description: item.description, })); return ( @@ -52,24 +47,24 @@ export async function TypographyMappingTable({ mappings }: TypographyMappingTabl {tableItems.map((item) => ( - - {item.previousTokenId} + + {item.previous} - {item.newTextStyleIds.length > 0 && - item.newTextStyleIds.map((newTextStyleId, index) => { + {item.next.length > 0 && + item.next.map((newTextStyleId, index) => { return ( {newTextStyleId} - {index !== item.newTextStyleIds.length - 1 && ( + {index !== item.next.length - 1 && (
또는
)} ); })} - {item.note} + {item.description} ))} diff --git a/docs/content/docs/design/foundation/color/migration-to-v3.mdx b/docs/content/docs/design/foundation/color/migration-to-v3.mdx index 889b04ef5..89f868d95 100644 --- a/docs/content/docs/design/foundation/color/migration-to-v3.mdx +++ b/docs/content/docs/design/foundation/color/migration-to-v3.mdx @@ -5,6 +5,7 @@ description: SEED V2 색상에서 마이그레이션하는 방법을 안내합 import { TokenMappingTable } from "@/components/token-mapping-table"; import { IconPaletteLine } from "@daangn/react-monochrome-icon"; +import { semanticColorMappings, scaleColorMappings, staticColorMappings } from "@seed-design/mapping/color"; ## 개요 @@ -15,653 +16,19 @@ V2 색상 토큰을 사용 중인 경우, V3 색상 토큰 맵핑을 활용하 ### Semantic Tokens ### Scale Tokens ### Static Tokens ## 링크 diff --git a/docs/content/docs/design/foundation/typography/migration-to-v3.mdx b/docs/content/docs/design/foundation/typography/migration-to-v3.mdx index bc1ae8666..713c98bd1 100644 --- a/docs/content/docs/design/foundation/typography/migration-to-v3.mdx +++ b/docs/content/docs/design/foundation/typography/migration-to-v3.mdx @@ -4,6 +4,7 @@ description: SEED V2 타이포그래피 토큰에서 마이그레이션하는 --- import { TypographyMappingTable } from "@/components/typography-mapping-table"; +import { typographyMappings } from "@seed-design/mapping/typography"; import { IconTUppercaseSerifLine } from "@daangn/react-monochrome-icon"; ## 개요 @@ -12,194 +13,7 @@ V2 Semantic 타이포그래피 토큰을 사용 중인 경우, V3 텍스트 스 ## Semantic 타이포그래피 토큰 맵핑 - + ## 링크 diff --git a/docs/package.json b/docs/package.json index 5e11d0d43..e4ac9645e 100644 --- a/docs/package.json +++ b/docs/package.json @@ -38,6 +38,7 @@ "@seed-design/rootage-core": "0.0.0", "@seed-design/stackflow": "0.0.0", "@seed-design/stylesheet": "3.0.0-alpha-20241212122822", + "@seed-design/mapping": "0.0.0", "@stackflow/config": "^1.2.0", "@stackflow/core": "^1.1.0", "@stackflow/plugin-basic-ui": "^1.10.0", diff --git a/packages/codemod/.env.example b/packages/codemod/.env.example deleted file mode 100644 index 0ca2af9be..000000000 --- a/packages/codemod/.env.example +++ /dev/null @@ -1 +0,0 @@ -PUBLIC_JUNE_SO_WRITE_KEY="YOUR_WRITE_KEY" diff --git a/packages/codemod/build.mjs b/packages/codemod/build.mjs index c5ea07e10..18d578920 100644 --- a/packages/codemod/build.mjs +++ b/packages/codemod/build.mjs @@ -50,5 +50,5 @@ fs.readdirSync("./src/transforms").forEach((folder) => { external: [...Object.keys(pkg.dependencies)], define, }) - .catch(() => process.exit(1)) + .catch(() => process.exit(1)); }); diff --git a/packages/codemod/package.json b/packages/codemod/package.json index 0d8ca05d1..67b159682 100644 --- a/packages/codemod/package.json +++ b/packages/codemod/package.json @@ -19,7 +19,7 @@ "test": "LOG=true bun vitest" }, "dependencies": { - "@june-so/analytics-node": "^8.0.0", + "@seed-design/mapping": "0.0.0", "cac": "^6.7.14", "es-toolkit": "^1.25.2", "execa": "^9.4.1", diff --git a/packages/codemod/src/index.ts b/packages/codemod/src/index.ts index 255228222..a2b878db9 100644 --- a/packages/codemod/src/index.ts +++ b/packages/codemod/src/index.ts @@ -2,13 +2,13 @@ import { cac } from "cac"; import { execaNode } from "execa"; +import { readdirSync } from "fs"; import { createRequire } from "module"; import { dirname, resolve } from "path"; -import { createTrack, LOG_PREFIX } from "./utils/log.js"; -import { readdirSync } from "fs"; +import { minVersion, satisfies } from "semver"; import { z } from "zod"; -import { satisfies, minVersion } from "semver"; import { getGitInfo } from "./utils/git.js"; +import { createTrack, LOG_PREFIX } from "./utils/log.js"; const require = createRequire(import.meta.url); const packageJson = require("../package.json"); @@ -109,9 +109,6 @@ async function runTransform( const jscodeshiftPath = require.resolve("jscodeshift/bin/jscodeshift"); const { log, parser, extensions, ignoreConfig, track: isTrackEnabled } = options; - // `../`로 시작하는 path에서 ignore-pattern 작동하지 않는 문제 - // https://github.com/facebook/jscodeshift/issues/556 - const fixedPaths = paths.map((path) => resolve(process.cwd(), path)); const fixedPathsCombined = fixedPaths.join(" "); @@ -124,7 +121,11 @@ async function runTransform( await execaNode({ stdout: "inherit", - env: { LOG: `${log}`, TRACK: `${isTrackEnabled}`, GIT_INFO: JSON.stringify(gitInfo) }, + env: { + LOG: `${log}`, + TRACK: `${isTrackEnabled}`, + GIT_INFO: JSON.stringify(gitInfo), + }, })` ${jscodeshiftPath} ${fixedPathsCombined} -t ${transformPath} @@ -135,9 +136,7 @@ async function runTransform( } function getAvailableTransforms() { - return readdirSync(TRANSFORM_PATH) - .filter((file) => file.endsWith(".mjs") || file.endsWith(".js") || file.endsWith(".cjs")) - .map((file) => file.split(".").slice(0, -1).join(".")); + return readdirSync(TRANSFORM_PATH); } function printTransforms(transforms: string[]) { diff --git a/packages/codemod/src/transforms/replace-vars-color/__testfixtures__/semantic.input.tsx b/packages/codemod/src/transforms/replace-vars-color/__testfixtures__/semantic.input.tsx new file mode 100644 index 000000000..e9e7fe46f --- /dev/null +++ b/packages/codemod/src/transforms/replace-vars-color/__testfixtures__/semantic.input.tsx @@ -0,0 +1,5 @@ +// @ts-nocheck +import { vars } from "@seed-design/design-token"; + +const willChange = vars.$semantic.color.primaryLowHover; +const willNotChange = vars.$semantic.color.paperAccent; diff --git a/packages/codemod/src/transforms/replace-vars-color/__testfixtures__/semantic.output.tsx b/packages/codemod/src/transforms/replace-vars-color/__testfixtures__/semantic.output.tsx new file mode 100644 index 000000000..cf987d83e --- /dev/null +++ b/packages/codemod/src/transforms/replace-vars-color/__testfixtures__/semantic.output.tsx @@ -0,0 +1,7 @@ +// @ts-nocheck +import { vars as legacyVars } from "@seed-design/design-token"; + +import { vars } from "@seed-design/vars"; + +const willChange = vars.$color.palette.carrot200; +const willNotChange = legacyVars.$semantic.color.paperAccent; diff --git a/packages/codemod/src/transforms/replace-vars-color/ast-utils.ts b/packages/codemod/src/transforms/replace-vars-color/ast-utils.ts new file mode 100644 index 000000000..58303b6c8 --- /dev/null +++ b/packages/codemod/src/transforms/replace-vars-color/ast-utils.ts @@ -0,0 +1,34 @@ +import type * as jscodeshift from "jscodeshift"; +import type { ASTPath } from "jscodeshift"; + +export function getMemberExpressionName(path: ASTPath): string { + const parts: string[] = []; + let current: jscodeshift.MemberExpression | jscodeshift.Identifier = path.node; + + while (current.type === "MemberExpression") { + if (current.property.type === "Identifier") { + parts.unshift(current.property.name); + } + current = current.object as jscodeshift.MemberExpression | jscodeshift.Identifier; + } + + if (current.type === "Identifier") { + parts.unshift(current.name); + } + + return parts.join("."); +} + +export function buildMemberExpression( + j: jscodeshift.JSCodeshift, + name: string, +): jscodeshift.MemberExpression { + const parts = name.split("."); + let expr: jscodeshift.Identifier | jscodeshift.MemberExpression = j.identifier(parts[0]); + + for (let i = 1; i < parts.length; i++) { + expr = j.memberExpression(expr, j.identifier(parts[i])); + } + + return expr as jscodeshift.MemberExpression; +} diff --git a/packages/codemod/src/transforms/replace-vars-color/import-handler.ts b/packages/codemod/src/transforms/replace-vars-color/import-handler.ts new file mode 100644 index 000000000..29e208d9a --- /dev/null +++ b/packages/codemod/src/transforms/replace-vars-color/import-handler.ts @@ -0,0 +1,36 @@ +import type * as jscodeshift from "jscodeshift"; + +export function handleImports( + j: jscodeshift.JSCodeshift, + root: jscodeshift.Collection, + hasUnresolvedTokens: boolean, +) { + if (hasUnresolvedTokens) { + // design-token import의 vars를 legacyVars로 변경 + root + .find(j.ImportDeclaration, { + source: { value: "@seed-design/design-token" }, + }) + .forEach((path) => { + path.node.specifiers = [ + j.importSpecifier(j.identifier("vars"), j.identifier("legacyVars")), + ]; + }); + + // @seed-design/vars import 추가 + const varsImport = j.importDeclaration( + [j.importSpecifier(j.identifier("vars"), j.identifier("vars"))], + j.literal("@seed-design/vars"), + ); + root.find(j.ImportDeclaration).at(0).insertAfter(varsImport); + } else { + // 모든 토큰이 변경 가능한 경우 design-token을 vars로 교체 + root + .find(j.ImportDeclaration, { + source: { value: "@seed-design/design-token" }, + }) + .forEach((path) => { + path.node.source.value = "@seed-design/vars"; + }); + } +} diff --git a/packages/codemod/src/transforms/replace-vars-color/index.ts b/packages/codemod/src/transforms/replace-vars-color/index.ts index c3fa5cad4..8f1b268e0 100644 --- a/packages/codemod/src/transforms/replace-vars-color/index.ts +++ b/packages/codemod/src/transforms/replace-vars-color/index.ts @@ -1,73 +1,81 @@ import type * as jscodeshift from "jscodeshift"; -import type { ASTPath } from "jscodeshift"; -import { SCALE_TO_PALETTE_MAP } from "./mapping.js"; +import { colorMappings } from "@seed-design/mapping/color"; +import { TokenMigrationReporter } from "../../utils/reporter.js"; +import { handleImports } from "./import-handler.js"; +import { getMemberExpressionName, buildMemberExpression } from "./ast-utils.js"; +import { fromKebabCaseWithNumbers, toKebabCaseWithNumbers } from "./token-utils.js"; const replaceVarsColor: jscodeshift.Transform = (file, api) => { const j = api.jscodeshift; const root = j(file.source); + const reporter = new TokenMigrationReporter("replace-vars-color"); + const unresolvedIdentifiers = new Set(); - // 1. Replace imports - root - .find(j.ImportDeclaration, { - source: { - value: "@seed-design/design-token", - }, - }) - .forEach((path) => { - path.node.source.value = "@seed-design/vars"; - }); + reporter.startNewFile(file.path); - // 2. Replace scale color references + // Replace color references root .find(j.MemberExpression) .filter((path) => { const memberName = getMemberExpressionName(path); - return memberName.startsWith("vars.$scale.color."); + return memberName.startsWith("vars."); }) .forEach((path) => { const memberName = getMemberExpressionName(path); - const newName = SCALE_TO_PALETTE_MAP[memberName]; + const tokenId = toKebabCaseWithNumbers(memberName); + const mapping = colorMappings.find((m) => m.previous === tokenId); + const line = path.node.loc?.start.line; + + if (mapping) { + if (mapping.next.length === 0 || mapping.next.length > 1) { + reporter.addResult({ + previousToken: memberName, + nextToken: null, + line, + status: "failure", + failureReason: + mapping.next.length === 0 ? "No mapping available" : "Multiple mappings found", + }); + unresolvedIdentifiers.add(memberName); + return; + } - if (newName) { + const newName = `${fromKebabCaseWithNumbers(mapping.next[0])}`; const newExpr = buildMemberExpression(j, newName); path.replace(newExpr); - api.report?.(`Changed ${memberName} to ${newName} at ${file.path}`); + + reporter.addResult({ + previousToken: memberName, + nextToken: newName, + line, + status: "success", + }); } }); - return root.toSource(); -}; - -function getMemberExpressionName(path: ASTPath): string { - const parts: string[] = []; - let current: jscodeshift.MemberExpression | jscodeshift.Identifier = path.node; + // Handle imports first + handleImports(j, root, unresolvedIdentifiers.size > 0); - while (current.type === "MemberExpression") { - if (current.property.type === "Identifier") { - parts.unshift(current.property.name); - } - current = current.object as jscodeshift.MemberExpression | jscodeshift.Identifier; - } - - if (current.type === "Identifier") { - parts.unshift(current.name); + // Then update unresolved references to use legacyVars + if (unresolvedIdentifiers.size > 0) { + root + .find(j.MemberExpression) + .filter((path) => { + const memberName = getMemberExpressionName(path); + return unresolvedIdentifiers.has(memberName); + }) + .forEach((path) => { + const memberName = getMemberExpressionName(path); + const newName = memberName.replace(/^vars\./, "legacyVars."); + const newExpr = buildMemberExpression(j, newName); + path.replace(newExpr); + }); } - return parts.join("."); -} - -function buildMemberExpression( - j: jscodeshift.JSCodeshift, - name: string, -): jscodeshift.MemberExpression { - const parts = name.split("."); - let expr: jscodeshift.Identifier | jscodeshift.MemberExpression = j.identifier(parts[0]); + reporter.finishFile(); + reporter.writeReport(); - for (let i = 1; i < parts.length; i++) { - expr = j.memberExpression(expr, j.identifier(parts[i])); - } - - return expr as jscodeshift.MemberExpression; -} + return root.toSource(); +}; export default replaceVarsColor; diff --git a/packages/codemod/src/transforms/replace-vars-color/mapping.ts b/packages/codemod/src/transforms/replace-vars-color/mapping.ts deleted file mode 100644 index 1ce2f61dc..000000000 --- a/packages/codemod/src/transforms/replace-vars-color/mapping.ts +++ /dev/null @@ -1,123 +0,0 @@ -export const SCALE_TO_PALETTE_MAP: Record = { - // Gray - "vars.$scale.color.gray00": "vars.$color.palette.gray00", - "vars.$scale.color.gray50": "vars.$color.palette.gray100", - "vars.$scale.color.gray100": "vars.$color.palette.gray200", - "vars.$scale.color.gray200": "vars.$color.palette.gray300", - "vars.$scale.color.gray300": "vars.$color.palette.gray400", - "vars.$scale.color.gray400": "vars.$color.palette.gray500", - "vars.$scale.color.gray500": "vars.$color.palette.gray600", - "vars.$scale.color.gray600": "vars.$color.palette.gray700", - "vars.$scale.color.gray700": "vars.$color.palette.gray800", - "vars.$scale.color.gray800": "vars.$color.palette.gray900", - "vars.$scale.color.gray900": "vars.$color.palette.gray1000", - - // Gray Alpha - "vars.$scale.color.grayAlpha50": "vars.$color.palette.gray200", - "vars.$scale.color.grayAlpha100": "vars.$color.palette.gray300", - "vars.$scale.color.grayAlpha200": "vars.$color.palette.gray500", - "vars.$scale.color.grayAlpha500": "vars.$color.palette.gray700", - - // Carrot - "vars.$scale.color.carrot50": "vars.$color.palette.carrot100", - "vars.$scale.color.carrot100": "vars.$color.palette.carrot200", - "vars.$scale.color.carrot200": "vars.$color.palette.carrot300", - "vars.$scale.color.carrot300": "vars.$color.palette.carrot400", - "vars.$scale.color.carrot400": "vars.$color.palette.carrot500", - "vars.$scale.color.carrot500": "vars.$color.palette.carrot600", - "vars.$scale.color.carrot600": "vars.$color.palette.carrot600", - "vars.$scale.color.carrot700": "vars.$color.palette.carrot700", - "vars.$scale.color.carrot800": "vars.$color.palette.carrot700", - "vars.$scale.color.carrot900": "vars.$color.palette.carrot800", - "vars.$scale.color.carrot950": "vars.$color.palette.carrot800", - - // Carrot Alpha - "vars.$scale.color.carrotAlpha50": "vars.$color.palette.carrot100", - "vars.$scale.color.carrotAlpha100": "vars.$color.palette.carrot200", - "vars.$scale.color.carrotAlpha200": "vars.$color.palette.carrot200", - - // Blue - "vars.$scale.color.blue50": "vars.$color.palette.blue100", - "vars.$scale.color.blue100": "vars.$color.palette.blue200", - "vars.$scale.color.blue200": "vars.$color.palette.blue300", - "vars.$scale.color.blue300": "vars.$color.palette.blue400", - "vars.$scale.color.blue400": "vars.$color.palette.blue400", - "vars.$scale.color.blue500": "vars.$color.palette.blue600", - "vars.$scale.color.blue600": "vars.$color.palette.blue600", - "vars.$scale.color.blue700": "vars.$color.palette.blue800", - "vars.$scale.color.blue800": "vars.$color.palette.blue900", - "vars.$scale.color.blue900": "vars.$color.palette.blue900", - "vars.$scale.color.blue950": "vars.$color.palette.blue1000", - - // Blue Alpha - "vars.$scale.color.blueAlpha50": "vars.$color.palette.blue100", - "vars.$scale.color.blueAlpha100": "vars.$color.palette.blue100", - "vars.$scale.color.blueAlpha200": "vars.$color.palette.blue200", - - // Red - "vars.$scale.color.red50": "vars.$color.palette.red100", - "vars.$scale.color.red100": "vars.$color.palette.red200", - "vars.$scale.color.red200": "vars.$color.palette.red300", - "vars.$scale.color.red300": "vars.$color.palette.red400", - "vars.$scale.color.red400": "vars.$color.palette.red600", - "vars.$scale.color.red500": "vars.$color.palette.red700", - "vars.$scale.color.red600": "vars.$color.palette.red700", - "vars.$scale.color.red700": "vars.$color.palette.red800", - "vars.$scale.color.red800": "vars.$color.palette.red900", - "vars.$scale.color.red900": "vars.$color.palette.red900", - "vars.$scale.color.red950": "vars.$color.palette.red900", - - // Red Alpha - "vars.$scale.color.redAlpha50": "vars.$color.palette.red100", - "vars.$scale.color.redAlpha100": "vars.$color.palette.red200", - "vars.$scale.color.redAlpha200": "vars.$color.palette.red300", - - // Green - "vars.$scale.color.green50": "vars.$color.palette.green100", - "vars.$scale.color.green100": "vars.$color.palette.green200", - "vars.$scale.color.green200": "vars.$color.palette.green300", - "vars.$scale.color.green300": "vars.$color.palette.green400", - "vars.$scale.color.green400": "vars.$color.palette.green500", - "vars.$scale.color.green500": "vars.$color.palette.green600", - "vars.$scale.color.green600": "vars.$color.palette.green700", - "vars.$scale.color.green700": "vars.$color.palette.green800", - "vars.$scale.color.green800": "vars.$color.palette.green900", - "vars.$scale.color.green900": "vars.$color.palette.green900", - "vars.$scale.color.green950": "vars.$color.palette.green900", - - // Green Alpha - "vars.$scale.color.greenAlpha50": "vars.$color.palette.green100", - "vars.$scale.color.greenAlpha100": "vars.$color.palette.green200", - "vars.$scale.color.greenAlpha200": "vars.$color.palette.green200", - - // Yellow - "vars.$scale.color.yellow50": "vars.$color.palette.yellow100", - "vars.$scale.color.yellow100": "vars.$color.palette.yellow200", - "vars.$scale.color.yellow200": "vars.$color.palette.yellow300", - "vars.$scale.color.yellow300": "vars.$color.palette.yellow400", - "vars.$scale.color.yellow400": "vars.$color.palette.yellow500", - "vars.$scale.color.yellow500": "vars.$color.palette.yellow700", - "vars.$scale.color.yellow600": "vars.$color.palette.yellow700", - "vars.$scale.color.yellow700": "vars.$color.palette.yellow800", - "vars.$scale.color.yellow800": "vars.$color.palette.yellow800", - "vars.$scale.color.yellow900": "vars.$color.palette.yellow900", - "vars.$scale.color.yellow950": "vars.$color.palette.yellow900", - - // Yellow Alpha - "vars.$scale.color.yellowAlpha50": "vars.$color.palette.yellow100", - "vars.$scale.color.yellowAlpha100": "vars.$color.palette.yellow100", - "vars.$scale.color.yellowAlpha200": "vars.$color.palette.yellow100", - - // Purple - "vars.$scale.color.purple50": "vars.$color.palette.purple100", - "vars.$scale.color.purple100": "vars.$color.palette.purple300", - "vars.$scale.color.purple200": "vars.$color.palette.purple400", - "vars.$scale.color.purple300": "vars.$color.palette.purple400", - "vars.$scale.color.purple400": "vars.$color.palette.purple500", - "vars.$scale.color.purple500": "vars.$color.palette.purple600", - "vars.$scale.color.purple600": "vars.$color.palette.purple700", - "vars.$scale.color.purple700": "vars.$color.palette.purple800", - "vars.$scale.color.purple800": "vars.$color.palette.purple900", - "vars.$scale.color.purple900": "vars.$color.palette.purple900", - "vars.$scale.color.purple950": "vars.$color.palette.purple1000", -}; diff --git a/packages/codemod/src/transforms/replace-vars-color/token-utils.ts b/packages/codemod/src/transforms/replace-vars-color/token-utils.ts new file mode 100644 index 000000000..af5290522 --- /dev/null +++ b/packages/codemod/src/transforms/replace-vars-color/token-utils.ts @@ -0,0 +1,20 @@ +/** + * vars.$scale.color.carrot500 -> $scale.color.carrot-500 + * vars.$scale.color.grayAlpha50 -> $scale.color.gray-alpha-50 + */ +export function toKebabCaseWithNumbers(name: string): string { + return name + .replace(/^vars\./, "") + .replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`) + .replace(/(\d+)/g, "-$1"); +} + +/** + * $scale.color.carrot-500 -> vars.$scale.color.carrot500 + * $scale.color.gray-alpha-50 -> vars.$scale.color.grayAlpha50 + */ +export function fromKebabCaseWithNumbers(name: string): string { + return `vars.${name + .replace(/-(\d+)/g, "$1") + .replace(/-([a-z])/g, (_, char) => char.toUpperCase())}`; +} diff --git a/packages/codemod/src/utils/log.ts b/packages/codemod/src/utils/log.ts index c3661cfc1..7eed91030 100644 --- a/packages/codemod/src/utils/log.ts +++ b/packages/codemod/src/utils/log.ts @@ -1,27 +1,13 @@ -import { Analytics, type TrackParams as JuneTrackParams } from "@june-so/analytics-node"; import colors from "picocolors"; export const LOG_PREFIX = colors.bold("@seed-design/codemod"); interface TrackParams { event: string; - properties: JuneTrackParams["properties"]; + properties: Record; } export const createTrack = (metadata?: Record) => { - if (process.env.PUBLIC_JUNE_SO_WRITE_KEY === undefined) return null; - - const analytics = new Analytics(process.env.PUBLIC_JUNE_SO_WRITE_KEY); - const userId = process.env.USER ?? "unknown"; - return ({ event, properties }: TrackParams) => - analytics.track({ - event: `@seed-design/codemod: ${event}`, - userId, - properties: { - cwd: process.cwd(), - ...metadata, - ...properties, - }, - }); + console.log(LOG_PREFIX, event, properties, metadata); }; diff --git a/packages/codemod/src/utils/reporter.ts b/packages/codemod/src/utils/reporter.ts new file mode 100644 index 000000000..3566458ea --- /dev/null +++ b/packages/codemod/src/utils/reporter.ts @@ -0,0 +1,107 @@ +import * as fs from "fs"; +import * as path from "path"; + +interface TokenMigrationResult { + previousToken: string; + nextToken: string | null; + line?: number; + status: "success" | "failure"; + failureReason?: string; +} + +interface FileMigration { + filePath: string; + results: TokenMigrationResult[]; +} + +export class TokenMigrationReporter { + private timestamp: string; + private fileMigrations: FileMigration[] = []; + private currentFile: FileMigration | null = null; + private readonly reportDir = path.join(process.cwd(), ".report"); + private transformName: string; + + constructor(transformName: string) { + this.transformName = transformName; + this.timestamp = this.generateTimestamp(); + } + + private generateTimestamp(): string { + const koreaTimeDiff = 9 * 60 * 60 * 1000; + return new Date(new Date().getTime() + koreaTimeDiff).toISOString(); + } + + private getReportPath(): string { + return path.join(this.reportDir, `${this.transformName}.md`); + } + + private getRelativePath(absolutePath: string): string { + if (!absolutePath) return "unknown"; + + try { + const resolvedPath = path.resolve(absolutePath); + return path.relative(this.reportDir, resolvedPath); + } catch { + return "unknown"; + } + } + + startNewFile(filePath: string) { + this.currentFile = { + filePath: this.getRelativePath(filePath), + results: [], + }; + } + + addResult(result: TokenMigrationResult) { + if (!this.currentFile) return; + this.currentFile.results.push(result); + } + + finishFile() { + if (this.currentFile && this.currentFile.results.length > 0) { + this.fileMigrations.push(this.currentFile); + } + this.currentFile = null; + } + + hasResults(): boolean { + return this.fileMigrations.length > 0; + } + + writeReport() { + if (!this.hasResults()) return; + + if (!fs.existsSync(this.reportDir)) { + fs.mkdirSync(this.reportDir, { recursive: true }); + } + + const reportFile = this.getReportPath(); + const existingContent = fs.existsSync(reportFile) ? fs.readFileSync(reportFile, "utf8") : ""; + + const migrationReport = this.fileMigrations + .map((file) => { + const filename = path.basename(file.filePath); + const resultsList = file.results + .map((result) => { + const lineInfo = result.line ? ` (line: ${result.line})` : ""; + const status = result.status === "success" ? "✅" : "❌"; + const failureInfo = result.failureReason + ? `\n - Reason: ${result.failureReason}` + : ""; + + return ` - ${status} \`${result.previousToken}\` → ${result.nextToken ? `\`${result.nextToken}\`` : "undefined"}${lineInfo}${failureInfo}`; + }) + .join("\n"); + + return `### [${filename}](${file.filePath}) +- timestamp: ${this.timestamp} +- results +${resultsList}`; + }) + .join("\n\n"); + + const separator = existingContent ? "\n\n" : ""; + fs.writeFileSync(reportFile, existingContent + separator + migrationReport); + } +} diff --git a/packages/mapping/color.d.ts b/packages/mapping/color.d.ts new file mode 100644 index 000000000..6c4d092cc --- /dev/null +++ b/packages/mapping/color.d.ts @@ -0,0 +1,6 @@ +import type { FoundationTokenMapping } from "./index"; + +export declare const semanticColorMappings: FoundationTokenMapping[]; +export declare const scaleColorMappings: FoundationTokenMapping[]; +export declare const staticColorMappings: FoundationTokenMapping[]; +export declare const colorMappings: FoundationTokenMapping[]; diff --git a/packages/mapping/color.mjs b/packages/mapping/color.mjs new file mode 100644 index 000000000..8519ae2ca --- /dev/null +++ b/packages/mapping/color.mjs @@ -0,0 +1,642 @@ +export const semanticColorMappings = [ + { + previous: "$semantic.color.on-primary", + next: ["$color.palette.static-white"], + }, + { + previous: "$semantic.color.primary", + next: ["$color.bg.brand-solid", "$color.fg.brand"], + }, + { + previous: "$semantic.color.primary-low", + next: ["$color.palette.carrot-100"], + }, + { + previous: "$semantic.color.secondary", + next: ["$color.palette.gray-900"], + description: "Deprecated", + }, + { + previous: "$semantic.color.secondary-low", + next: ["$color.bg.neutral-weak"], + }, + { + previous: "$semantic.color.success", + next: ["$color.bg.positive-solid", "$color.fg.positive"], + }, + { + previous: "$semantic.color.success-low", + next: ["$color.bg.positive-weak"], + }, + { + previous: "$semantic.color.warning", + next: ["$color.bg.warning-solid"], + }, + { + previous: "$semantic.color.warning-low", + next: ["$color.bg.warning-weak"], + }, + { + previous: "$semantic.color.critical", + next: ["$color.bg.critical-solid", "$color.fg.critical"], + }, + { + previous: "$semantic.color.critical-low", + next: ["$color.bg.critical-weak"], + }, + { + previous: "$semantic.color.overlay-dim", + next: ["$color.bg.overlay"], + }, + { + previous: "$semantic.color.overlay-low", + next: ["$color.bg.overlay-muted"], + }, + { + previous: "$semantic.color.paper-sheet", + next: [], + description: "TBD", + }, + { + previous: "$semantic.color.paper-dialog", + next: ["$color.bg.layer-floating"], + }, + { + previous: "$semantic.color.paper-floating", + next: ["$color.bg.layer-floating"], + }, + { + previous: "$semantic.color.paper-contents", + next: ["$color.bg.layer-fill"], + }, + { + previous: "$semantic.color.paper-default", + next: ["$color.bg.layer-default"], + }, + { + previous: "$semantic.color.paper-background", + next: ["$color.bg.layer-basement"], + }, + { + previous: "$semantic.color.paper-accent", + next: [], + description: "TBD", + }, + { + previous: "$semantic.color.primary-hover", + next: ["$color.bg.brand-solid-pressed"], + }, + { + previous: "$semantic.color.primary-pressed", + next: ["$color.bg.brand-solid-pressed"], + }, + { + previous: "$semantic.color.primary-low-hover", + next: ["$color.palette.carrot-200"], + }, + { + previous: "$semantic.color.primary-low-active", + next: ["$color.palette.carrot-200"], + }, + { + previous: "$semantic.color.primary-low-pressed", + next: ["$color.palette.carrot-200"], + }, + { + previous: "$semantic.color.gray-hover", + next: ["$color.bg.layer-default-pressed"], + }, + { + previous: "$semantic.color.gray-pressed", + next: ["$color.bg.layer-default-pressed"], + }, + { + previous: "$semantic.color.on-primary-overlay-50", + next: [], + description: "TBD", + }, + { + previous: "$semantic.color.on-primary-overlay-200", + next: [], + description: "TBD", + }, + { + previous: "$semantic.color.on-primary-low-overlay-50", + next: [], + description: "TBD", + }, + { + previous: "$semantic.color.on-primary-low-overlay-100", + next: [], + description: "TBD", + }, + { + previous: "$semantic.color.on-primary-low-overlay-200", + next: [], + description: "TBD", + }, + { + previous: "$semantic.color.on-gray-overlay-50", + next: [], + description: "TBD", + }, + { + previous: "$semantic.color.on-gray-overlay-100", + next: [], + description: "TBD", + }, + { + previous: "$semantic.color.divider-1", + next: ["$color.stroke.on-image", "$color.palette.static-black-alpha-50"], + description: "Deprecated", + }, + { + previous: "$semantic.color.divider-2", + next: ["$color.stroke.neutral-muted"], + }, + { + previous: "$semantic.color.divider-3", + next: ["$color.stroke.neutral"], + }, + { + previous: "$semantic.color.accent", + next: ["$color.bg.informative-solid"], + }, + { + previous: "$semantic.color.ink-text", + next: ["$color.fg.neutral"], + }, + { + previous: "$semantic.color.ink-text-low", + next: ["$color.fg.neutral-subtle"], + }, + { + previous: "$semantic.color.gray-active", + next: [], + description: "TBD", + }, +]; + +export const scaleColorMappings = [ + { + previous: "$scale.color.gray-00", + next: ["$color.palette.gray-00"], + }, + { + previous: "$scale.color.gray-50", + next: ["$color.palette.gray-100"], + }, + { + previous: "$scale.color.gray-100", + next: ["$color.palette.gray-200"], + }, + { + previous: "$scale.color.gray-200", + next: ["$color.palette.gray-300"], + }, + { + previous: "$scale.color.gray-300", + next: ["$color.palette.gray-400"], + }, + { + previous: "$scale.color.gray-400", + next: ["$color.palette.gray-500"], + }, + { + previous: "$scale.color.gray-500", + next: ["$color.palette.gray-600"], + }, + { + previous: "$scale.color.gray-600", + next: ["$color.palette.gray-700"], + }, + { + previous: "$scale.color.gray-700", + next: ["$color.palette.gray-800"], + }, + { + previous: "$scale.color.gray-800", + next: ["$color.palette.gray-900"], + }, + { + previous: "$scale.color.gray-900", + next: ["$color.palette.gray-1000"], + }, + { + previous: "$scale.color.gray-alpha-50", + next: ["$color.palette.gray-200", "$color.stroke.on-image"], + }, + { + previous: "$scale.color.gray-alpha-100", + next: ["$color.palette.gray-300"], + }, + { + previous: "$scale.color.gray-alpha-200", + next: ["$color.palette.gray-500"], + }, + { + previous: "$scale.color.gray-alpha-500", + next: ["$color.palette.gray-700"], + }, + { + previous: "$scale.color.carrot-50", + next: ["$color.palette.carrot-100"], + }, + { + previous: "$scale.color.carrot-100", + next: ["$color.palette.carrot-200"], + }, + { + previous: "$scale.color.carrot-200", + next: ["$color.palette.carrot-300"], + }, + { + previous: "$scale.color.carrot-300", + next: ["$color.palette.carrot-400"], + }, + { + previous: "$scale.color.carrot-400", + next: ["$color.palette.carrot-500"], + }, + { + previous: "$scale.color.carrot-500", + next: ["$color.palette.carrot-600"], + }, + { + previous: "$scale.color.carrot-600", + next: ["$color.palette.carrot-600"], + }, + { + previous: "$scale.color.carrot-700", + next: ["$color.palette.carrot-700"], + }, + { + previous: "$scale.color.carrot-800", + next: ["$color.palette.carrot-700"], + }, + { + previous: "$scale.color.carrot-900", + next: ["$color.palette.carrot-800"], + }, + { + previous: "$scale.color.carrot-950", + next: ["$color.palette.carrot-800"], + }, + { + previous: "$scale.color.carrot-alpha-50", + next: ["$color.palette.carrot-100"], + }, + { + previous: "$scale.color.carrot-alpha-100", + next: ["$color.palette.carrot-200"], + }, + { + previous: "$scale.color.carrot-alpha-200", + next: ["$color.palette.carrot-200"], + }, + { + previous: "$scale.color.blue-50", + next: ["$color.palette.blue-100"], + }, + { + previous: "$scale.color.blue-100", + next: ["$color.palette.blue-200"], + }, + { + previous: "$scale.color.blue-200", + next: ["$color.palette.blue-300"], + }, + { + previous: "$scale.color.blue-300", + next: ["$color.palette.blue-400"], + }, + { + previous: "$scale.color.blue-400", + next: ["$color.palette.blue-400"], + }, + { + previous: "$scale.color.blue-500", + next: ["$color.palette.blue-600"], + }, + { + previous: "$scale.color.blue-600", + next: ["$color.palette.blue-600"], + }, + { + previous: "$scale.color.blue-700", + next: ["$color.palette.blue-800"], + }, + { + previous: "$scale.color.blue-800", + next: ["$color.palette.blue-900"], + }, + { + previous: "$scale.color.blue-900", + next: ["$color.palette.blue-900"], + }, + { + previous: "$scale.color.blue-950", + next: ["$color.palette.blue-1000"], + }, + { + previous: "$scale.color.blue-alpha-50", + next: ["$color.palette.blue-100"], + }, + { + previous: "$scale.color.blue-alpha-100", + next: ["$color.palette.blue-100"], + }, + { + previous: "$scale.color.blue-alpha-200", + next: ["$color.palette.blue-200"], + }, + { + previous: "$scale.color.red-50", + next: ["$color.palette.red-100"], + }, + { + previous: "$scale.color.red-100", + next: ["$color.palette.red-200"], + }, + { + previous: "$scale.color.red-200", + next: ["$color.palette.red-300"], + }, + { + previous: "$scale.color.red-300", + next: ["$color.palette.red-400"], + }, + { + previous: "$scale.color.red-400", + next: ["$color.palette.red-600"], + }, + { + previous: "$scale.color.red-500", + next: ["$color.palette.red-700"], + }, + { + previous: "$scale.color.red-600", + next: ["$color.palette.red-700"], + }, + { + previous: "$scale.color.red-700", + next: ["$color.palette.red-800"], + }, + { + previous: "$scale.color.red-800", + next: ["$color.palette.red-900"], + }, + { + previous: "$scale.color.red-900", + next: ["$color.palette.red-900"], + }, + { + previous: "$scale.color.red-950", + next: ["$color.palette.red-900"], + }, + { + previous: "$scale.color.red-alpha-50", + next: ["$color.palette.red-100"], + }, + { + previous: "$scale.color.red-alpha-100", + next: ["$color.palette.red-200"], + }, + { + previous: "$scale.color.red-alpha-200", + next: ["$color.palette.red-300"], + }, + { + previous: "$scale.color.green-50", + next: ["$color.palette.green-100"], + }, + { + previous: "$scale.color.green-100", + next: ["$color.palette.green-200"], + }, + { + previous: "$scale.color.green-200", + next: ["$color.palette.green-300"], + }, + { + previous: "$scale.color.green-300", + next: ["$color.palette.green-400"], + }, + { + previous: "$scale.color.green-400", + next: ["$color.palette.green-500"], + }, + { + previous: "$scale.color.green-500", + next: ["$color.palette.green-600"], + }, + { + previous: "$scale.color.green-600", + next: ["$color.palette.green-700"], + }, + { + previous: "$scale.color.green-700", + next: ["$color.palette.green-800"], + }, + { + previous: "$scale.color.green-800", + next: ["$color.palette.green-900"], + }, + { + previous: "$scale.color.green-900", + next: ["$color.palette.green-900"], + }, + { + previous: "$scale.color.green-950", + next: ["$color.palette.green-900"], + }, + { + previous: "$scale.color.green-alpha-50", + next: ["$color.palette.green-100"], + }, + { + previous: "$scale.color.green-alpha-100", + next: ["$color.palette.green-200"], + }, + { + previous: "$scale.color.green-alpha-200", + next: ["$color.palette.green-200"], + }, + { + previous: "$scale.color.yellow-50", + next: ["$color.palette.yellow-100"], + }, + { + previous: "$scale.color.yellow-100", + next: ["$color.palette.yellow-200"], + }, + { + previous: "$scale.color.yellow-200", + next: ["$color.palette.yellow-300"], + }, + { + previous: "$scale.color.yellow-300", + next: ["$color.palette.yellow-400"], + }, + { + previous: "$scale.color.yellow-400", + next: ["$color.palette.yellow-500"], + }, + { + previous: "$scale.color.yellow-500", + next: ["$color.palette.yellow-700"], + }, + { + previous: "$scale.color.yellow-600", + next: ["$color.palette.yellow-700"], + }, + { + previous: "$scale.color.yellow-700", + next: ["$color.palette.yellow-800"], + }, + { + previous: "$scale.color.yellow-800", + next: ["$color.palette.yellow-800"], + }, + { + previous: "$scale.color.yellow-900", + next: ["$color.palette.yellow-900"], + }, + { + previous: "$scale.color.yellow-950", + next: ["$color.palette.yellow-900"], + }, + { + previous: "$scale.color.yellow-alpha-50", + next: ["$color.palette.yellow-100"], + }, + { + previous: "$scale.color.yellow-alpha-100", + next: ["$color.palette.yellow-100"], + }, + { + previous: "$scale.color.yellow-alpha-200", + next: ["$color.palette.yellow-100"], + }, + { + previous: "$scale.color.purple-50", + next: ["$color.palette.purple-100"], + }, + { + previous: "$scale.color.purple-100", + next: ["$color.palette.purple-300"], + }, + { + previous: "$scale.color.purple-200", + next: ["$color.palette.purple-400"], + }, + { + previous: "$scale.color.purple-300", + next: ["$color.palette.purple-400"], + }, + { + previous: "$scale.color.purple-400", + next: ["$color.palette.purple-500"], + }, + { + previous: "$scale.color.purple-500", + next: ["$color.palette.purple-600"], + }, + { + previous: "$scale.color.purple-600", + next: ["$color.palette.purple-700"], + }, + { + previous: "$scale.color.purple-700", + next: ["$color.palette.purple-800"], + }, + { + previous: "$scale.color.purple-800", + next: ["$color.palette.purple-900"], + }, + { + previous: "$scale.color.purple-900", + next: ["$color.palette.purple-900"], + }, + { + previous: "$scale.color.purple-950", + next: ["$color.palette.purple-1000"], + }, +]; + +export const staticColorMappings = [ + { + previous: "$static.color.static-black", + next: ["$color.palette.static-black"], + }, + { + previous: "$static.color.static-white", + next: ["$color.palette.static-white"], + }, + { + previous: "$static.color.static-gray-900", + next: ["$color.palette.gray-1000"], + }, + { + previous: "$static.color.static-carrot-50", + next: ["$color.palette.carrot-100"], + }, + { + previous: "$static.color.static-carrot-800", + next: ["$color.palette.carrot-700"], + }, + { + previous: "$static.color.static-green-50", + next: ["$color.palette.green-100"], + }, + { + previous: "$static.color.static-green-800", + next: ["$color.palette.green-900"], + }, + { + previous: "$static.color.static-yellow-50", + next: ["$color.palette.yellow-100"], + }, + { + previous: "$static.color.static-yellow-800", + next: ["$color.palette.yellow-800"], + }, + { + previous: "$static.color.static-red-50", + next: ["$color.palette.red-100"], + }, + { + previous: "$static.color.static-red-800", + next: ["$color.palette.red-900"], + }, + { + previous: "$static.color.static-blue-50", + next: ["$color.palette.blue-100"], + }, + { + previous: "$static.color.static-blue-800", + next: ["$color.palette.blue-900"], + }, + { + previous: "$static.color.static-black-alpha-200", + next: ["$color.palette.static-black-alpha-200"], + }, + { + previous: "$static.color.static-black-alpha-500", + next: ["$color.palette.static-black-alpha-500"], + }, + { + previous: "$static.color.static-white-alpha-50", + next: [], + }, + { + previous: "$static.color.static-white-alpha-200", + next: ["$color.palette.static-white-alpha-200"], + }, +]; + +export const colorMappings = [ + ...semanticColorMappings, + ...scaleColorMappings, + ...staticColorMappings, +]; diff --git a/packages/mapping/index.d.ts b/packages/mapping/index.d.ts new file mode 100644 index 000000000..e219117cc --- /dev/null +++ b/packages/mapping/index.d.ts @@ -0,0 +1,5 @@ +export interface FoundationTokenMapping { + previous: string; + next: string[]; + description?: string; +} diff --git a/packages/mapping/package.json b/packages/mapping/package.json new file mode 100644 index 000000000..3a2bfe24d --- /dev/null +++ b/packages/mapping/package.json @@ -0,0 +1,21 @@ +{ + "name": "@seed-design/mapping", + "version": "0.0.0", + "private": true, + "main": "./index.js", + "module": "./index.mjs", + "types": "./index.d.ts", + "exports": { + ".": { + "types": "./index.d.ts" + }, + "./color": { + "types": "./color.d.ts", + "import": "./color.mjs" + }, + "./typography": { + "types": "./typography.d.ts", + "import": "./typography.mjs" + } + } +} diff --git a/packages/mapping/typography.d.ts b/packages/mapping/typography.d.ts new file mode 100644 index 000000000..0ebdd586f --- /dev/null +++ b/packages/mapping/typography.d.ts @@ -0,0 +1,3 @@ +import type { FoundationTokenMapping } from "./index"; + +export declare const typographyMappings: FoundationTokenMapping[]; diff --git a/packages/mapping/typography.mjs b/packages/mapping/typography.mjs new file mode 100644 index 000000000..48960a16d --- /dev/null +++ b/packages/mapping/typography.mjs @@ -0,0 +1,186 @@ +export const typographyMappings = [ + { + previous: "$semantic.typography.h1", + next: [], + description: "Deprecated", + }, + { + previous: "$semantic.typography.h2", + next: [], + description: "Deprecated", + }, + { + previous: "$semantic.typography.h3", + next: [], + description: "Deprecated", + }, + { + previous: "$semantic.typography.h4", + next: ["t10Bold"], + description: "줄간격 -0.1px", + }, + { + previous: "$semantic.typography.title1Bold", + next: ["t9Bold"], + description: "줄간격 -0.4px", + }, + { + previous: "$semantic.typography.title1Regular", + next: [], + }, + { + previous: "$semantic.typography.title2Bold", + next: ["t7Bold"], + }, + { + previous: "$semantic.typography.title2Regular", + next: [], + }, + { + previous: "$semantic.typography.title3Bold", + next: ["t6Bold"], + description: "줄간격 -0.3px", + }, + { + previous: "$semantic.typography.title3Regular", + next: [], + }, + { + previous: "$semantic.typography.subtitle1Bold", + next: ["t5Bold"], + description: "줄간격 +0.4px", + }, + { + previous: "$semantic.typography.subtitle1Regular", + next: ["t5Regular"], + description: "줄간격 +0.4px", + }, + { + previous: "$semantic.typography.subtitle2Bold", + next: ["t4Bold"], + description: "줄간격 +0.1px", + }, + { + previous: "$semantic.typography.subtitle2Regular", + next: ["t4Regular"], + description: "줄간격 +0.1px", + }, + { + previous: "$semantic.typography.bodyL1Bold", + next: ["t5Bold"], + description: "줄간격 -2px", + }, + { + previous: "$semantic.typography.bodyL1Regular", + next: ["articleBody"], + }, + { + previous: "$semantic.typography.bodyL2Bold", + next: ["t4Bold"], + description: "줄간격 -2px", + }, + { + previous: "$semantic.typography.bodyL2Regular", + next: [], + description: "TBD", + }, + { + previous: "$semantic.typography.bodyM1Bold", + next: ["t5Bold"], + description: "줄간격 +0.4px", + }, + { + previous: "$semantic.typography.bodyM1Regular", + next: ["t5Regular"], + description: "줄간격 +0.4px", + }, + { + previous: "$semantic.typography.bodyM2Bold", + next: ["t4Bold"], + description: "줄간격 +0.1px", + }, + { + previous: "$semantic.typography.bodyM2Regular", + next: ["t4Regular"], + description: "줄간격 +0.1px", + }, + { + previous: "$semantic.typography.caption1Bold", + next: ["t3Bold"], + description: "줄간격 -1.5px", + }, + { + previous: "$semantic.typography.caption1Regular", + next: ["t3Regular"], + description: "줄간격 -1.5px", + }, + { + previous: "$semantic.typography.caption2Bold", + next: ["t2Bold"], + description: "줄간격 -0.2px", + }, + { + previous: "$semantic.typography.caption2Regular", + next: ["t2Regular"], + description: "줄간격 -0.2px", + }, + { + previous: "$semantic.typography.label1Bold", + next: ["t6Bold"], + description: "줄간격 -0.3px", + }, + { + previous: "$semantic.typography.label1Regular", + next: [], + }, + { + previous: "$semantic.typography.label2Bold", + next: ["t5Bold"], + description: "줄간격 +0.4px", + }, + { + previous: "$semantic.typography.label2Regular", + next: ["t5Regular"], + description: "줄간격 +0.4px", + }, + { + previous: "$semantic.typography.label3Bold", + next: ["t4Bold"], + description: "줄간격 +0.1px", + }, + { + previous: "$semantic.typography.label3Regular", + next: ["t4Regular"], + description: "줄간격 +0.1px", + }, + { + previous: "$semantic.typography.label4Bold", + next: ["t2Bold"], + description: "줄간격 -0.2px", + }, + { + previous: "$semantic.typography.label4Regular", + next: ["t2Regular"], + description: "줄간격 -0.2px", + }, + { + previous: "$semantic.typography.label5Bold", + next: ["t1Bold"], + description: "줄간격 +0.1px", + }, + { + previous: "$semantic.typography.label5Regular", + next: ["t1Regular"], + description: "줄간격 +0.1px", + }, + { + previous: "$semantic.typography.label6Bold", + next: [], + description: "Deprecated", + }, + { + previous: "$semantic.typography.label6Regular", + next: [], + description: "Deprecated", + }, +];