feat(docs): organize component docs into category folders

- Group components by category using route groups (buttons, controls, display, feedback, layout, navigation)
- URL paths remain unchanged due to route group syntax
- Update ComponentGrid to display components grouped by category
- Add defaultOpen: true to all category meta.json files

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: te6-in

docs/components/component-grid.tsx

@@ -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>
   );
 }

…ontent/docs/components/action-button.mdx …s/components/(buttons)/action-button.mdxdocs/content/docs/components/action-button.mdx renamed to docs/content/docs/components/(buttons)/action-button.mdx docs/content/docs/components/action-button.mdx renamed to docs/content/docs/components/(buttons)/action-button.mdx

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