Merge branch 'dev' into feat/bottom-sheet-close-button

Author: junghyeonsu

.changeset/heavy-lies-train.md

@@ -7,53 +7,72 @@ import {
 
 const client = createFigmaClient(process.env.FIGMA_PERSONAL_ACCESS_TOKEN!);
 
+function getCategoryFromPath(path: string): string | null {
+  const match = path.match(/components\/\(([^)]+)\)\//);
+  if (!match) return null;
+
+  return match[1].charAt(0).toUpperCase() + match[1].slice(1);
+}
+
 export async function ComponentGrid() {
-  // Get all component pages
   const allPages = docsSource.getPages();
 
-  const componentPages = allPages
-    .filter((page) => {
-      // Only include pages under /docs/components/
-      if (!page.url.startsWith("/docs/components/")) return false;
+  const categorizedPages = new Map<string, typeof allPages>();
+
+  for (const page of allPages) {
+    if (!page.url.startsWith("/docs/components/")) continue;
+    if (page.data.deprecated) continue;
 
-      if (page.data.deprecated) return false;
+    const category = getCategoryFromPath(page.path);
 
-      return true;
-    })
-    .sort((a, b) => {
-      // Sort alphabetically by title
-      const titleA = a.data.title;
-      const titleB = b.data.title;
+    if (!category) continue;
 
-      return titleA.localeCompare(titleB);
-    });
+    if (!categorizedPages.has(category)) {
+      categorizedPages.set(category, []);
+    }
+
+    categorizedPages.get(category)!.push(page);
+  }
+
+  for (const pages of categorizedPages.values()) {
+    pages.sort((a, b) => a.data.title.localeCompare(b.data.title));
+  }
+
+  const sortedCategories = Array.from(categorizedPages.entries()).sort(([a], [b]) =>
+    a.localeCompare(b),
+  );
 
   return (
-    <ul className="grid grid-cols-2 md:grid-cols-3 gap-4 pb-10 not-prose items-stretch">
-      {componentPages.map(async (page) => {
-        return (
-          <li key={page.url}>
-            <ComponentCard
-              className="h-full"
-              {...(page.data.coverImageFigmaId && {
-                coverImageSrc: (
-                  await fetchFigmaImageUrls({
-                    client,
-                    fileKey: process.env.FIGMA_FILE_KEY!,
-                    nodeIds: [page.data.coverImageFigmaId],
-                    options: {
-                      scale: 3,
-                    },
-                  })
-                ).get(page.data.coverImageFigmaId),
-              })}
-              title={page.data.title}
-              description={page.data.description}
-              href={page.url}
-            />
-          </li>
-        );
-      })}
-    </ul>
+    <div className="space-y-10 pb-10">
+      {sortedCategories.map(([category, pages]) => (
+        <section key={category}>
+          <h2 className="text-xl font-semibold mb-4">{category}</h2>
+          <ul className="grid grid-cols-2 md:grid-cols-3 gap-4 not-prose items-stretch">
+            {pages.map(async (page) => (
+              <li key={page.url}>
+                <ComponentCard
+                  className="h-full"
+                  {...(page.data.coverImageFigmaId && {
+                    coverImageSrc: (
+                      await fetchFigmaImageUrls({
+                        client,
+                        fileKey: process.env.FIGMA_FILE_KEY!,
+                        nodeIds: [page.data.coverImageFigmaId],
+                        options: {
+                          scale: 3,
+                        },
+                      })
+                    ).get(page.data.coverImageFigmaId),
+                  })}
+                  title={page.data.title}
+                  description={page.data.description}
+                  href={page.url}
+                />
+              </li>
+            ))}
+          </ul>
+        </section>
+      ))}
+    </div>
   );
 }

docs/components/component-grid.tsx

@@ -17,13 +17,15 @@ export function stringifyTokenLit(token: AST.TokenLit): AST.TokenRef {
 }
 
 export function stringifyValueLit(lit: AST.ValueLit): string {
+  const tokenReference = (token: AST.TokenLit) => stringifyTokenLit(token);
+
   switch (lit.kind) {
     case "DimensionLit":
       return lit.unit === "rem"
-        ? `${css.staticStringifier.value(lit)} (${lit.value * 16}px)`
-        : css.staticStringifier.value(lit);
+        ? `${css.staticStringifier.value(lit, tokenReference)} (${lit.value * 16}px)`
+        : css.staticStringifier.value(lit, tokenReference);
     default:
-      return css.staticStringifier.value(lit);
+      return css.staticStringifier.value(lit, tokenReference);
   }
 }
 

docs/components/rootage.ts

@@ -19,9 +19,56 @@ export interface TokenCellProps {
   resolvedValue: AST.ValueLit;
 }
 
+function renderGradientWithTokens(gradient: AST.GradientLit) {
+  return (
+    <span>
+      {gradient.stops.map((stop, index) => (
+        <Fragment key={index}>
+          {stop.color.kind === "TokenLit" ? (
+            <TokenLink id={stop.color.identifier} />
+          ) : (
+            stop.color.value
+          )}{" "}
+          {(stop.position.value * 100).toFixed(1)}%{index < gradient.stops.length - 1 ? ", " : ""}
+        </Fragment>
+      ))}
+    </span>
+  );
+}
+
+function renderShadowWithTokens(shadow: AST.ShadowLit) {
+  return (
+    <span>
+      {shadow.layers.map((layer, index) => (
+        <Fragment key={index}>
+          {layer.offsetX.value}
+          {layer.offsetX.unit} {layer.offsetY.value}
+          {layer.offsetY.unit} {layer.blur.value}
+          {layer.blur.unit} {layer.spread.value}
+          {layer.spread.unit}{" "}
+          {layer.color.kind === "TokenLit" ? (
+            <TokenLink id={layer.color.identifier} />
+          ) : (
+            layer.color.value
+          )}
+          {index < shadow.layers.length - 1 ? ", " : ""}
+        </Fragment>
+      ))}
+    </span>
+  );
+}
+
 export function TokenCell(props: TokenCellProps) {
   const { isExpanded, values, resolvedValue } = props;
 
+  const isGradientWithTokens =
+    resolvedValue.kind === "GradientLit" &&
+    resolvedValue.stops.some((stop) => stop.color.kind === "TokenLit");
+
+  const isShadowWithTokens =
+    resolvedValue.kind === "ShadowLit" &&
+    resolvedValue.layers.some((layer) => layer.color.kind === "TokenLit");
+
   return (
     <div className="flex justify-between" aria-expanded={isExpanded}>
       <div className="flex flex-col gap-1">
@@ -30,7 +77,11 @@ export function TokenCell(props: TokenCellProps) {
             <Fragment key={item.ref}>
               <div className="flex items-center gap-2">
                 <TypeIndicator value={resolvedValue} />{" "}
-                {item.ref.startsWith("$") ? (
+                {index === values.length - 1 && isShadowWithTokens ? (
+                  renderShadowWithTokens(resolvedValue as AST.ShadowLit)
+                ) : index === values.length - 1 && isGradientWithTokens ? (
+                  renderGradientWithTokens(resolvedValue as AST.GradientLit)
+                ) : item.ref.startsWith("$") ? (
                   <TokenLink id={item.ref} description={item.description} />
                 ) : (
                   item.ref
@@ -46,7 +97,11 @@ export function TokenCell(props: TokenCellProps) {
         ) : (
           <div className="flex items-center gap-2">
             <TypeIndicator value={resolvedValue} />{" "}
-            {values[0].ref.startsWith("$") ? (
+            {isShadowWithTokens ? (
+              renderShadowWithTokens(resolvedValue as AST.ShadowLit)
+            ) : isGradientWithTokens ? (
+              renderGradientWithTokens(resolvedValue as AST.GradientLit)
+            ) : values[0].ref.startsWith("$") ? (
               <TokenLink id={values[0].ref} description={values[0].description} />
             ) : (
               values[0].ref

docs/components/token-cell.tsx

@@ -5,15 +5,24 @@ import { IconLayers, IconRuler, IconSpline } from "./icons";
 // Gradient를 CSS linear-gradient로 변환하는 유틸리티 함수
 function gradientToCss(gradient: AST.GradientLit): string {
   const stops = gradient.stops
-    .map((stop) => `${stop.color.value} ${(stop.position.value * 100).toFixed(1)}%`)
+    .map((stop) => {
+      const color =
+        stop.color.kind === "ColorHexLit"
+          ? stop.color.value
+          : `var(--seed-${stop.color.identifier.replace(/\$/g, "").replace(/\./g, "-")})`;
+      return `${color} ${(stop.position.value * 100).toFixed(1)}%`;
+    })
     .join(", ");
   return `linear-gradient(to right, ${stops})`;
 }
 
 // Gradient 정보를 텍스트로 변환하는 함수
 function gradientToText(gradient: AST.GradientLit): string {
   const stops = gradient.stops
-    .map((stop) => `${stop.color.value} at ${(stop.position.value * 100).toFixed(1)}%`)
+    .map((stop) => {
+      const color = stop.color.kind === "ColorHexLit" ? stop.color.value : stop.color.identifier;
+      return `${color} at ${(stop.position.value * 100).toFixed(1)}%`;
+    })
     .join(", ");
   return `Gradient: ${stops}`;
 }

docs/components/type-indicator.tsx

@@ -0,0 +1,4 @@
+{
+  "title": "Buttons",
+  "defaultOpen": true
+}