Skip to content

Commit

Permalink
feat: mapping (#524)
Browse files Browse the repository at this point in the history 
* feat: mapping package (color)

* add in change-case in devDeps

* chore: remove `@june-so/analytics-node`

* refactor, add reporter

* feat: typography mapping
  • Loading branch information
@junghyeonsu
junghyeonsu authored Feb 14, 2025
1 parent ce2bd1d commit 4abf409
Show file tree
Hide file tree
Showing 25 changed files with 1,177 additions and 1,085 deletions.
37 changes: 8 additions & 29 deletions bun.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -1265,8 +1270,6 @@

"@june-so-sandbox/api": ["@june-so-sandbox/[email protected]", "", {}, "sha512-ydYidkz633TRiLoAQLPVR4o7FBBiQf86OXj4A+B2MPTMXUJ0YdQMyiJUPcr9T7RuBn0dlzpKDsdVpOGJhZ4e7Q=="],

"@june-so/analytics-node": ["@june-so/[email protected]", "", { "dependencies": { "@segment/analytics-node": "^1.1.0" } }, "sha512-gY/tzrtC8ONw6czaillRiLwqLp+r7lNiPdLbpgB61b42pgAYBHdiU0qjweS6xASRZSYaqH27WFADtBtw4KsifA=="],

"@kwsites/file-exists": ["@kwsites/[email protected]", "", { "dependencies": { "debug": "^4.1.1" } }, "sha512-m9/5YGR18lIwxSFDwfE3oA7bWuq9kdau6ugN4H2rJeyhFQZcG9AgSHkQtSD15a8WvTgfz9aikZMrKPHvbpqFiw=="],

"@kwsites/promise-deferred": ["@kwsites/[email protected]", "", {}, "sha512-GaHYm+c0O9MjZRu0ongGBRbinu8gVAMd2UZjji6jVmqKtZluZnptXGWhz1E8j8D2HJ3f/yMxKAUC0b+57wncIw=="],
Expand All @@ -1279,10 +1282,6 @@

"@lezer/lr": ["@lezer/[email protected]", "", { "dependencies": { "@lezer/common": "^1.0.0" } }, "sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA=="],

"@lukeed/csprng": ["@lukeed/[email protected]", "", {}, "sha512-Z7C/xXCiGWsg0KuKsHTKJxbWhpI3Vs5GwLfOean7MGyVFGqdRgBbAjOCh6u4bbjPc/8MJ2pZmK/0DLdCbivLDA=="],

"@lukeed/uuid": ["@lukeed/[email protected]", "", { "dependencies": { "@lukeed/csprng": "^1.1.0" } }, "sha512-qC72D4+CDdjGqJvkFMMEAtancHUQ7/d/tAiHf64z8MopFDmcrtbcJuerDtFceuAfQJ2pDSfCKCtbqoGBNnwg0w=="],

"@manypkg/find-root": ["@manypkg/[email protected]", "", { "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/[email protected]", "", { "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=="],
Expand Down Expand Up @@ -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"],
Expand Down Expand Up @@ -1681,12 +1682,6 @@

"@seed-design/vars": ["@seed-design/vars@workspace:packages/vars"],

"@segment/analytics-core": ["@segment/[email protected]", "", { "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/[email protected]", "", { "dependencies": { "tslib": "^2.4.1" } }, "sha512-THTIzBPHnvu1HYJU3fARdJ3qIkukO3zDXsmDm+kAeUks5R9CBXOQ6rPChiASVzSmwAIIo5uFIXXnCraojlq/Gw=="],

"@segment/analytics-node": ["@segment/[email protected]", "", { "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/[email protected]", "", { "dependencies": { "@sentry/core": "8.54.0" } }, "sha512-DKWCqb4YQosKn6aD45fhKyzhkdG7N6goGFDeyTaJFREJDFVDXiNDsYZu30nJ6BxMM7uQIaARhPAC5BXfoED3pQ=="],

"@sentry-internal/feedback": ["@sentry-internal/[email protected]", "", { "dependencies": { "@sentry/core": "8.54.0" } }, "sha512-nQqRacOXoElpE0L0ADxUUII0I3A94niqG9Z4Fmsw6057QvyrV/LvTiMQBop6r5qLjwMqK+T33iR4/NQI5RhsXQ=="],
Expand Down Expand Up @@ -2523,8 +2518,6 @@

"dotenv": ["[email protected]", "", {}, "sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ=="],

"dset": ["[email protected]", "", {}, "sha512-2QF/g9/zTaPDc3BjNcVTGoBbXBgYfMTTceLaYcFJ/W9kggFUkhxD/hMEeuLKbugyef9SqAx8cpgwlIP/jinUTA=="],

"dunder-proto": ["[email protected]", "", { "dependencies": { "call-bind-apply-helpers": "^1.0.1", "es-errors": "^1.3.0", "gopd": "^1.2.0" } }, "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A=="],

"duplexify": ["[email protected]", "", { "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=="],
Expand Down Expand Up @@ -3357,8 +3350,6 @@

"node-abort-controller": ["[email protected]", "", {}, "sha512-AGK2yQKIjRuqnc6VkX2Xj5d+QW8xZ87pa1UK6yA6ouUyuxfHuMP6umE5QK7UmTeOAymo+Zx1Fxiuw9rVx8taHQ=="],

"node-fetch": ["[email protected]", "", { "dependencies": { "whatwg-url": "^5.0.0" }, "peerDependencies": { "encoding": "^0.1.0" }, "optionalPeers": ["encoding"] }, "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A=="],

"node-html-parser": ["[email protected]", "", { "dependencies": { "css-select": "^5.1.0", "he": "1.2.0" } }, "sha512-qIsTMOY4C/dAa5Q5vsobRpOOvPfC4pB61UVW2uSwZNUp0QU/jCekTal1vMmbO0DgdHeLUJpv/ARmDqErVxA3Sg=="],

"node-polyfill-webpack-plugin": ["[email protected]", "", { "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=="],
Expand Down Expand Up @@ -4547,12 +4538,6 @@

"@seed-design/rootage-core/vitest": ["[email protected]", "", { "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": ["[email protected]", "", {}, "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="],

"@segment/analytics-generic-utils/tslib": ["[email protected]", "", {}, "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="],

"@segment/analytics-node/tslib": ["[email protected]", "", {}, "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="],

"@shikijs/rehype/@shikijs/types": ["@shikijs/[email protected]", "", { "dependencies": { "@shikijs/vscode-textmate": "^10.0.1", "@types/hast": "^3.0.4" } }, "sha512-CBaMY+a3pepyC4SETi7+bSzO0f6hxEQJUUuS4uD7zppzjmrN4ZRtBqxaT+wOan26CR9eeJ5iBhc4qvWEwn7Eeg=="],

"@shikijs/rehype/shiki": ["[email protected]", "", { "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=="],
Expand Down Expand Up @@ -4863,8 +4848,6 @@

"no-case/tslib": ["[email protected]", "", {}, "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="],

"node-fetch/whatwg-url": ["[email protected]", "", { "dependencies": { "tr46": "~0.0.3", "webidl-conversions": "^3.0.0" } }, "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw=="],

"node-polyfill-webpack-plugin/readable-stream": ["[email protected]", "", { "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": ["[email protected]", "", {}, "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA=="],
Expand Down Expand Up @@ -5765,10 +5748,6 @@

"mdast-util-mdx-jsx/parse-entities/is-hexadecimal": ["[email protected]", "", {}, "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg=="],

"node-fetch/whatwg-url/tr46": ["[email protected]", "", {}, "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="],

"node-fetch/whatwg-url/webidl-conversions": ["[email protected]", "", {}, "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="],

"ora/chalk/supports-color": ["[email protected]", "", { "dependencies": { "has-flag": "^4.0.0" } }, "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw=="],

"parallel-transform/readable-stream/safe-buffer": ["[email protected]", "", {}, "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="],
Expand Down
25 changes: 10 additions & 15 deletions docs/components/token-mapping-table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
});
Expand All @@ -40,7 +35,7 @@ export async function TokenMappingTable({ mappings }: TokenMappingTableProps) {
resolvedValue: value,
};
}),
note: mapping.note,
description: mapping.description,
}));

return (
Expand Down Expand Up @@ -72,7 +67,7 @@ export async function TokenMappingTable({ mappings }: TokenMappingTableProps) {
</Fragment>
))}
</td>
<td>{item.note}</td>
<td>{item.description}</td>
</tr>
))}
</tbody>
Expand Down
29 changes: 12 additions & 17 deletions docs/components/typography-mapping-table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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),
);
Expand All @@ -33,7 +28,7 @@ export async function TypographyMappingTable({ mappings }: TypographyMappingTabl

return id;
}),
note: item.note,
description: item.description,
}));

return (
Expand All @@ -52,24 +47,24 @@ export async function TypographyMappingTable({ mappings }: TypographyMappingTabl
</thead>
<tbody>
{tableItems.map((item) => (
<tr key={item.previousTokenId}>
<td>{item.previousTokenId}</td>
<tr key={item.previous}>
<td>{item.previous}</td>
<td className="align-middle space-y-2">
{item.newTextStyleIds.length > 0 &&
item.newTextStyleIds.map((newTextStyleId, index) => {
{item.next.length > 0 &&
item.next.map((newTextStyleId, index) => {
return (
<Fragment key={newTextStyleId}>
<Text textStyle={newTextStyleId as TextProps["textStyle"]}>
{newTextStyleId}
</Text>
{index !== item.newTextStyleIds.length - 1 && (
{index !== item.next.length - 1 && (
<div className="text-xs text-center">또는</div>
)}
</Fragment>
);
})}
</td>
<td>{item.note}</td>
<td>{item.description}</td>
</tr>
))}
</tbody>
Expand Down
Loading

0 comments on commit 4abf409

Please sign in to comment.