New architecture - Automate section list creation (#65)

* ✨ add component & variants to new section list generation

* ✨ Add component.ts & rename preview with .variant extension

* ✨ Add component.ts & .variant to preview files

* ✨ Refactor section handling and improve type definitions for better clarity and consistency

* ✨ Update new architecture on website

* 🔥 remove old logic

* ✨ Refactor generateStaticParams for improved type safety and remove unused code

* ✨ Rename components to follow variant naming convention and update imports for consistency

* ✨ add back the hooks

* ✨ Remove latest old files

* ✅ Add a passing test case using Vitest

* ✨ Simplify passing test structure by removing unnecessary function wrapper

apps/website/__test__/passing-test.test.ts

@@ -0,0 +1,7 @@
+import { describe, expect, it } from "vitest";
+
+describe("passing test", () => {
+  it("should pass", () => {
+    expect(true).toBe(true);
+  });
+});

apps/website/src/app/(site)/[section]/[category]/layout.tsx

@@ -3,8 +3,10 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import type { ReactNode } from "react";
 import { NEXT_PUBLIC_SITE_URL } from "#/src/lib/site.const";
-import { findCategoryBySlug } from "#/src/utils/section-category-components-utils/find-category-by-slug";
-import { findSectionBySlug } from "#/src/utils/section-category-components-utils/find-section-by-slug";
+import {
+  newFindCategoryBySlug,
+  newFindSectionBySlug,
+} from "#/src/utils/section-category-components-utils/section-list-utils";
 
 export async function generateMetadata({
   params,
@@ -15,38 +17,23 @@ export async function generateMetadata({
   }>;
 }) {
   const { section: sectionParam, category: categoryParam } = await params;
-  const section = findSectionBySlug(sectionParam);
+  const section = newFindSectionBySlug(sectionParam);
   if (!section) {
     return {};
   }
 
-  if (section.type === "page") {
-    const page = section.pageList.find((page) => page.slug === categoryParam);
-    if (page) {
-      return {
-        title: page.name,
-        description: page.description,
-        openGraph: {
-          title: page.name,
-          description: page.description,
-        },
-        alternates: {
-          canonical: `${NEXT_PUBLIC_SITE_URL}/${section.slug}/${page.slug}`,
-        },
-        robots: "all",
-      };
-    }
-    return {};
-  }
+  const category = newFindCategoryBySlug({
+    sectionSlug: sectionParam,
+    categorySlug: categoryParam,
+  });
 
-  const category = findCategoryBySlug(section, categoryParam);
   if (category) {
     return {
-      title: `${category.name} React Components`,
-      description: `${category.description}. Advanced ${category.name} React components using tailwind CSS. Just copy paste amazing UI and UX.`,
+      title: `${category.meta.name} React Components`,
+      description: `${category.meta.description}. Advanced ${category.meta.name} React components using tailwind CSS. Just copy paste amazing UI and UX.`,
       openGraph: {
-        title: `${category.name} React Components`,
-        description: `${category.description}. Advanced ${category.name} React components using tailwind CSS. Just copy paste amazing UI and UX.`,
+        title: `${category.meta.name} React Components`,
+        description: `${category.meta.description}. Advanced ${category.meta.name} React components using tailwind CSS. Just copy paste amazing UI and UX.`,
       },
       alternates: {
         canonical: `${NEXT_PUBLIC_SITE_URL}/${section.slug}/${category.slug}`,
@@ -69,11 +56,14 @@ export default async function CategoryLayout({
 }) {
   const { section: sectionParam, category: categoryParam } = await params;
 
-  const sectionInList = findSectionBySlug(sectionParam);
+  const sectionInList = newFindSectionBySlug(sectionParam);
   if (!sectionInList) {
     return notFound();
   }
-  const categoryInList = findCategoryBySlug(sectionInList, categoryParam);
+  const categoryInList = newFindCategoryBySlug({
+    sectionSlug: sectionParam,
+    categorySlug: categoryParam,
+  });
   if (!categoryInList) {
     return notFound();
   }
@@ -88,7 +78,7 @@ export default async function CategoryLayout({
         <meta content="all" name="robots" />
       </Head>
       <h1 className="bg-gradient-to-b from-black to-black/40 dark:from-white dark:to-white/10 bg-clip-text font-medium text-transparent text-3xl sm:text-5xl inline tracking-tighter">
-        {categoryInList.name} components
+        {categoryInList.meta.name} components
       </h1>
       {children}
     </div>

apps/website/src/app/(site)/[section]/[category]/multiple-component-section.tsx

@@ -1,38 +1,31 @@
 import { notFound } from "next/navigation";
-import { fetchMultipleComponentData } from "#/src/app/(site)/[section]/[category]/process-variant-data";
 import ComingSoonCard from "#/src/components/coming-soon";
 import HeaderComponent from "#/src/components/component-wrapper/header-component";
 import InspirationComponentFooter from "#/src/components/component-wrapper/inspiration-component-footer";
 import VariantTabs from "#/src/components/component-wrapper/variant-tabs";
-import type { CategoryType, SectionType } from "@cuicui/ui/lib/types/component";
+import type {
+  NewCategoryType,
+  SectionType,
+} from "@cuicui/ui/lib/types/component";
 import GithubEditButton from "#/src/components/component-wrapper/github-edit-button";
 
 export default async function MultipleComponentCategory({
   category,
   sectionSlug,
-}: Readonly<{ category: CategoryType; sectionSlug: SectionType["slug"] }>) {
-  if (category.comingSoonCategory) {
+}: Readonly<{ category: NewCategoryType; sectionSlug: SectionType["slug"] }>) {
+  if (category.meta?.comingSoonCategory) {
     return <ComingSoonCard />;
   }
 
-  if (!category.componentList) {
+  if (!category.components || category.components.length === 0) {
+    console.error("No components found in category", category);
     return notFound();
   }
 
-  // If the componentList is not an array, we convert it to an array
-  const componentArray = Array.isArray(category.componentList)
-    ? category.componentList
-    : [category.componentList];
-
-  const componentList = await fetchMultipleComponentData({
-    categorySlug: category.slug,
-    componentList: componentArray,
-  });
-
   return (
     <div className="space-y-32">
-      {componentList.map((component) => (
-        <div className="" key={component.name}>
+      {category.components.map((component) => (
+        <div className="" key={component.meta.name}>
           <div className="flex">
             <GithubEditButton
               sectionSlug={sectionSlug}
@@ -41,27 +34,15 @@ export default async function MultipleComponentCategory({
             />
           </div>
           <HeaderComponent
-            componentBadges={component.componentBadges}
-            description={component.description}
-            title={component.name}
+            componentBadges={component.meta.componentBadges}
+            description={component.meta.description}
+            title={component.meta.name}
           />
           <InspirationComponentFooter
-            inspiration={component.inspiration}
-            inspirationLink={component.inspirationLink}
-          />
-          <VariantTabs
-            isIframed={component.isIframed}
-            isResizable={component.isResizable}
-            key={component.name}
-            rerenderButton={component.rerenderButton}
-            size={component.sizePreview}
-            variantList={component.componentList}
-            componentParams={{
-              sectionSlug,
-              categorySlug: category.slug,
-              componentSlug: component.slug,
-            }}
+            inspiration={component.meta.inspiration}
+            inspirationLink={component.meta.inspirationLink}
           />
+          <VariantTabs component={component} />
         </div>
       ))}
     </div>