feat(docs): highlight rows with same slot and property

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

@@ -12,7 +12,7 @@ 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";
+import { ComponentSpecBlock } from "@/components/component-spec-block";
 
 const { AutoTypeTable } = createTypeTable();
 
@@ -37,7 +37,7 @@ export default async function Page({
             Installation,
             ComponentExample,
             TokenTable,
-            ComponentSpecTable,
+            ComponentSpecBlock,
             Tab,
             Tabs,
             Step,

docs/components/component-spec-block.tsx

@@ -0,0 +1,36 @@
+import { Fragment } from "react";
+import { ComponentVariantTable } from "./component-variant-table";
+import { getRootage } from "./get-rootage";
+
+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(", ");
+}
+
+interface ComponentSpecTableProps {
+  id: string;
+}
+
+export async function ComponentSpecBlock(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>
+        <ComponentVariantTable variant={variant} />
+      </Fragment>
+    );
+  });
+}

docs/components/component-spec-table.tsx → docs/components/component-variant-table.tsx

@@ -1,26 +1,18 @@
+"use client";
+
 import {
   ComponentSpecExpression,
   stringifyTokenExpression,
   stringifyValueExpression,
 } from "@seed-design/rootage-core";
-import { getRootage } from "./get-rootage";
-import { Fragment } from "react";
-
-interface ComponentSpecTableProps {
-  id: string;
-}
+import { useState } from "react";
 
-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(", ");
-}
+export function ComponentVariantTable(props: { variant: ComponentSpecExpression[number] }) {
+  const [hoveredRow, setHoveredRow] = useState<{
+    slotKey: string;
+    propertyKey: string;
+  } | null>(null);
 
-function VariantTable(props: { variant: ComponentSpecExpression[number] }) {
   const { variant } = props;
   const tableItems = variant.state.flatMap((state) => {
     const stateKey = state.key.join(", ");
@@ -62,7 +54,16 @@ function VariantTable(props: { variant: ComponentSpecExpression[number] }) {
           const shouldRenderSlot = shouldRenderState || slotKey !== prevItem?.slotKey;
           const shouldRenderProperty = shouldRenderSlot || propertyKey !== prevItem?.propertyKey;
           return (
-            <tr key={`${stateKey}/${slotKey}/${propertyKey}`}>
+            <tr
+              className={
+                hoveredRow?.slotKey === slotKey && hoveredRow?.propertyKey === propertyKey
+                  ? "bg-fd-muted"
+                  : ""
+              }
+              key={`${stateKey}/${slotKey}/${propertyKey}`}
+              onMouseEnter={() => setHoveredRow({ slotKey, propertyKey })}
+              onMouseLeave={() => setHoveredRow(null)}
+            >
               <td>{shouldRenderState ? stateKey : null}</td>
               <td>{shouldRenderSlot ? slotKey : null}</td>
               <td>{shouldRenderProperty ? propertyKey : null}</td>
@@ -78,22 +79,3 @@ function VariantTable(props: { variant: ComponentSpecExpression[number] }) {
     </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/content/docs/design/components/action-chip.mdx

@@ -7,15 +7,14 @@ description: TBD
 
 ### 옵션 테이블
 
-| 속성         | 값                | 기본값  |
-|--------------|-------------------|---------|
-| size         | medium, small      | medium  |
-| layout       | with text, icon only | with text   |
-| disabled     | true, false        | false   |
-| count        | number             |         |
-| prefix icon  | icon               |         |
-| suffix icon  | Icon               |         |
-
+| 속성        | 값                   | 기본값    |
+| ----------- | -------------------- | --------- |
+| size        | medium, small        | medium    |
+| layout      | with text, icon only | with text |
+| disabled    | true, false          | false     |
+| count       | number               |           |
+| prefix icon | icon                 |           |
+| suffix icon | Icon                 |           |
 
 ## 링크
 
@@ -30,4 +29,4 @@ description: TBD
 
 ## Spec
 
-<ComponentSpecTable id="action-chip" />
+<ComponentSpecBlock id="action-chip" />

docs/content/docs/design/components/badge.mdx

@@ -26,4 +26,4 @@ description: TBD
 
 ## Spec
 
-<ComponentSpecTable id="badge" />
+<ComponentSpecBlock id="badge" />