feat(docs): render rootage table

docs/app/docs/[[...slug]]/page.tsx

@@ -11,6 +11,8 @@ import { DocsBody, DocsDescription, DocsPage, DocsTitle } from "fumadocs-ui/page
 import { AtomIcon } from "lucide-react";
 import type { Metadata } from "next";
 import { notFound } from "next/navigation";
+import { TokenTable } from "@/components/token-table";
+import { ComponentSpecTable } from "@/components/component-spec-table";
 
 const { AutoTypeTable } = createTypeTable();
 
@@ -34,6 +36,8 @@ export default async function Page({
             ...defaultMdxComponents,
             Installation,
             ComponentExample,
+            TokenTable,
+            ComponentSpecTable,
             Tab,
             Tabs,
             Step,

docs/components/component-spec-table.tsx

@@ -0,0 +1,99 @@
+import {
+  ComponentSpecExpression,
+  stringifyTokenExpression,
+  stringifyValueExpression,
+} from "@seed-design/rootage-core";
+import { getRootage } from "./get-rootage";
+import { Fragment } from "react";
+
+interface ComponentSpecTableProps {
+  id: string;
+}
+
+function stringifyVariantKey(key: Record<string, string>) {
+  const entries = Object.entries(key);
+
+  if (entries.length === 0) {
+    return "base";
+  }
+
+  return entries.map(([key, value]) => `${key}=${value}`).join(", ");
+}
+
+function VariantTable(props: { variant: ComponentSpecExpression[number] }) {
+  const { variant } = props;
+  const tableItems = variant.state.flatMap((state) => {
+    const stateKey = state.key.join(", ");
+    return state.slot.flatMap((slot) => {
+      const slotKey = slot.key;
+      return slot.property.map((property) => {
+        const propertyKey = property.key;
+        const value = property.value;
+        return {
+          stateKey,
+          slotKey,
+          propertyKey,
+          value,
+        };
+      });
+    });
+  });
+
+  return (
+    <table>
+      <colgroup>
+        <col style={{ width: "15%" }} />
+        <col style={{ width: "15%" }} />
+        <col style={{ width: "15%" }} />
+        <col />
+      </colgroup>
+      <thead>
+        <tr>
+          <th>상태</th>
+          <th>슬롯</th>
+          <th>속성</th>
+          <th>값</th>
+        </tr>
+      </thead>
+      <tbody>
+        {tableItems.map(({ stateKey, slotKey, propertyKey, value }, index) => {
+          const prevItem = tableItems[index - 1];
+          const shouldRenderState = stateKey !== prevItem?.stateKey;
+          const shouldRenderSlot = shouldRenderState || slotKey !== prevItem?.slotKey;
+          const shouldRenderProperty = shouldRenderSlot || propertyKey !== prevItem?.propertyKey;
+          return (
+            <tr key={`${stateKey}/${slotKey}/${propertyKey}`}>
+              <td>{shouldRenderState ? stateKey : null}</td>
+              <td>{shouldRenderSlot ? slotKey : null}</td>
+              <td>{shouldRenderProperty ? propertyKey : null}</td>
+              <td>
+                {value.type === "token"
+                  ? stringifyTokenExpression(value)
+                  : stringifyValueExpression(value)}
+              </td>
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+}
+
+export async function ComponentSpecTable(props: ComponentSpecTableProps) {
+  const rootage = await getRootage();
+  const componentSpec = rootage.componentSpecs.find((spec) => spec.id === props.id);
+
+  if (!componentSpec) {
+    return <div>Component spec {props.id} not found</div>;
+  }
+
+  return componentSpec.data.map((variant) => {
+    const variantKey = stringifyVariantKey(variant.key);
+    return (
+      <Fragment key={variantKey}>
+        <h3>{variantKey}</h3>
+        <VariantTable variant={variant} />
+      </Fragment>
+    );
+  });
+}

docs/components/get-rootage.tsx

@@ -0,0 +1,13 @@
+import { Model, parse } from "@seed-design/rootage-core";
+
+export const getRootage = async () => {
+  const index: { resources: { path: string }[] } = await import("@/public/rootage/index.json").then(
+    (module) => {
+      return module.default;
+    },
+  );
+  const models: Model[] = await Promise.all(
+    index.resources.map((resource) => import(`@/public/rootage${resource.path}`)),
+  );
+  return parse(models);
+};

docs/components/token-table.tsx

@@ -0,0 +1,49 @@
+import { stringifyTokenExpression, stringifyValueExpression } from "@seed-design/rootage-core";
+import { getRootage } from "./get-rootage";
+
+interface TokenTableProps {
+  groups: string[];
+}
+
+export async function TokenTable(props: TokenTableProps) {
+  const rootage = await getRootage();
+  const tokenDeclsToRender = rootage.tokens.filter((tokenDecl) =>
+    props.groups.every((group, index) => tokenDecl.token.group[index] === group),
+  );
+  const collectionName = tokenDeclsToRender[0].collection;
+  const collection = rootage.tokenCollections.find(
+    (collection) => collection.name === collectionName,
+  );
+  const modes = collection?.modes ?? [];
+  const tableItems = tokenDeclsToRender.map((decl) => ({
+    name: stringifyTokenExpression(decl.token),
+    values: decl.values,
+  }));
+
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th>이름</th>
+          {modes.map((mode) => (
+            <th key={mode}>{mode === "default" ? "값" : mode}</th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {tableItems.map((item) => (
+          <tr key={item.name}>
+            <td>{item.name}</td>
+            {item.values.map(({ mode, value }) => (
+              <td key={mode}>
+                {value.type === "token"
+                  ? stringifyTokenExpression(value)
+                  : stringifyValueExpression(value)}
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}

docs/content/docs/design/components/action-chip.mdx

@@ -26,4 +26,8 @@ description: TBD
     description="Action Chip 컴포넌트를 React로 사용하는 방법을 설명합니다."
     href="/docs/react/components/action-chip"
   />
-</Cards>
+</Cards>
+
+## Spec
+
+<ComponentSpecTable id={"action-chip"} />

docs/content/docs/design/foundation/radius.mdx

@@ -6,13 +6,4 @@ description: Radius는 컴포넌트 혹은 콘텐츠 모서리의 둥글기를 
 
 ### Radius Tokens
 
-| 이름 | 값 |
-| --- | --- |
-| `$radius.x0.5` | 2px |
-| `$radius.x1` | 4px |
-| `$radius.x1.5` | 6px |
-| `$radius.x2` | 8px |
-| `$radius.x3` | 12px |
-| `$radius.x4` | 16px |
-| `$radius.x5` | 20px |
-| `$radius.x6` | 24px |
+<TokenTable groups={["radius"]} />

docs/content/docs/design/foundation/typography.mdx

@@ -9,18 +9,9 @@ TBD
 
 ### 토큰
 
-| 이름 | 값 |
-| --- | --- |
-| `$font-size.25` | 11px |
-| `$font-size.50` | 12px |
-| `$font-size.75` | 13px |
-| `$font-size.100` | 14px |
-| `$font-size.200` | 16px |
-| `$font-size.300` | 18px |
-| `$font-size.400` | 20px |
-| `$font-size.500` | 22px |
-| `$font-size.600` | 24px |
-| `$font-size.700` | 26px |
+### Font Size Tokens
+
+<TokenTable groups={["font-size"]} />
 
 ### 폰트 스케일링
 
@@ -45,8 +36,6 @@ TBD
 
 ### 토큰
 
-| 이름 | 값 |
-| --- | --- |
-| `$font-weight.regular` | 400 |
-| `$font-weight.medium` | 500 |
-| `$font-weight.bold` | 700 |
+### Font Weight Tokens
+
+<TokenTable groups={["font-weight"]} />

docs/package.json

@@ -25,6 +25,7 @@
     "@seed-design/react-tabs": "0.0.0-alpha-20241030023710",
     "@seed-design/recipe": "0.0.0-alpha-20241114011809",
     "@seed-design/rootage-cli": "0.0.0",
+    "@seed-design/rootage-core": "0.0.0",
     "@seed-design/stylesheet": "3.0.0-alpha-20241121055833",
     "@stackflow/config": "^1.2.0",
     "@stackflow/core": "^1.1.0",

yarn.lock

@@ -10532,6 +10532,7 @@ __metadata:
     "@seed-design/react-tabs": 0.0.0-alpha-20241030023710
     "@seed-design/recipe": 0.0.0-alpha-20241114011809
     "@seed-design/rootage-cli": 0.0.0
+    "@seed-design/rootage-core": 0.0.0
     "@seed-design/stylesheet": 3.0.0-alpha-20241121055833
     "@stackflow/config": ^1.2.0
     "@stackflow/core": ^1.1.0