Add hooks & type to sections

__tests__/components/component-categories.test.tsx

@@ -21,6 +21,10 @@ describe("SectionsList", () => {
 
   it("category should have componentList === null if comingSoonCategory === true", () => {
     for (const section of SectionsList) {
+      if (section.type !== "multiple-component") {
+        continue;
+      }
+      //TODO: Handle the single-component test
       for (const category of section.categoriesList) {
         if (category.comingSoonCategory) {
           expect(category.componentList).toBeNull();
@@ -51,6 +55,9 @@ describe("SectionsList", () => {
     };
 
     for (const section of SectionsList) {
+      if (section.type !== "multiple-component") {
+        continue;
+      }
       for (const category of section.categoriesList) {
         if (category.componentList) {
           for (const component of category.componentList) {

biome.json

@@ -44,7 +44,7 @@
         "all": true,
         "noDefaultExport": "off",
         "noNamespaceImport": "info",
-        "useNamingConvention": "info"
+        "useNamingConvention": "off"
       },
       "suspicious": {
         "all": true,
@@ -56,4 +56,4 @@
       }
     }
   }
-}
+}

package.json

@@ -17,12 +17,6 @@
     "test": "vitest",
     "generate-package-list-check": "node scripts/generate-package-list-check.js"
   },
-  "git": {
-    "pre-commit": "lint-staged"
-  },
-  "lint-staged": {
-    "*": "biome format --write ./src"
-  },
   "dependencies": {
     "@ctrl/tinycolor": "4.1.0",
     "@radix-ui/react-dialog": "1.1.1",
@@ -81,4 +75,4 @@
     "typescript": "5.4.5",
     "vitest": "2.0.5"
   }
-}
+}

readme.md

@@ -52,6 +52,16 @@ The component roadmap can be find on the [featurebase page](https://cuicui.featu
 - [ ] Create the pages for the category sections (i.e https://cuicui.day/application-ui) -> Display the grid of the components as the home page but for each section
 - [ ] Improve SEO with better title and meta tags on components & site pages
 - [ ] Improve homepage performance by replacing component integrations by images
+- [ ] Re-add precommit (fix importer order & console rules)
+
+```json
+"git": {
+    "pre-commit": "lint-staged"
+},
+"lint-staged": {
+  "*": "biome format --write ./src"
+},
+```
 
 ## License
 

src/app/(components)/[section]/[category]/multiple-component-section.tsx

@@ -0,0 +1,57 @@
+import { fetchMultipleComponentData } from "#/src/app/(components)/[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 } from "#/src/lib/types/component";
+import { notFound } from "next/navigation";
+import { Fragment } from "react";
+
+export default async function MultipleComponentCategory({
+  category,
+}: Readonly<{ category: CategoryType }>) {
+  if (category.comingSoonCategory) {
+    return <ComingSoonCard />;
+  }
+
+  if (!category.componentList) {
+    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-6">
+      {componentList.map((component) => (
+        <Fragment key={component.title}>
+          <HeaderComponent
+            componentBadges={component.componentBadges}
+            description={component.description}
+            title={component.title}
+          />
+          <VariantTabs
+            variantList={component.componentList}
+            isChildUsingHeightFull={component.isChildUsingHeightFull}
+            isIframed={component.isIframed}
+            isResizable={component.isResizable}
+            key={component.title}
+            rerenderButton={component.rerenderButton}
+            size={component.sizePreview}
+          />
+          <InspirationComponentFooter
+            inspiration={component.inspiration}
+            inspirationLink={component.inspirationLink}
+          />
+        </Fragment>
+      ))}
+    </div>
+  );
+}

src/app/(components)/[section]/[category]/page.tsx

@@ -1,20 +1,33 @@
 import { notFound } from "next/navigation";
-import { Fragment } from "react";
-import { fetchComponentData } from "#/src/app/(components)/[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 { SectionsList } from "#/src/lib/cuicui-components/sections-list";
+import SingleComponentCategory from "#/src/app/(components)/[section]/[category]/single-component-section";
+import MultipleComponentCategory from "#/src/app/(components)/[section]/[category]/multiple-component-section";
+import type {
+  CategoryType,
+  MultiComponentSectionType,
+  PageSectionType,
+  SectionType,
+  SingleComponentCategoryType,
+  SingleComponentSectionType,
+} from "#/src/lib/types/component";
 
 export async function generateStaticParams() {
   // Iterate over the SectionsList to create all possible combinations of section and category
-  const params = SectionsList.flatMap((section) =>
-    section.categoriesList.map((category) => ({
-      section: section.slug,
-      category: category.slug,
-    })),
-  );
+
+  const params = SectionsList.flatMap((section) => {
+    if (
+      section.type === "multiple-component" ||
+      section.type === "single-component"
+    ) {
+      return section.categoriesList.map((category) => ({
+        section: section.slug,
+        category: category.slug,
+      }));
+    }
+    if (section.type === "page") {
+      //TODO : Handle pages
+    }
+  });
 
   // Return the generated params array
   return params;
@@ -31,51 +44,57 @@ export default async function Page({
   const section = SectionsList.find(
     (section) => section.slug === params.section,
   );
-
-  const category = section?.categoriesList.find(
-    (category) => category.slug === params.category,
-  );
-
-  if (!category) {
+  if (!section) {
     return notFound();
   }
+  if (section?.type === "page") {
+    return;
+  }
 
-  if (category.comingSoonCategory) {
-    return <ComingSoonCard />;
+  if (section?.type === "single-component") {
+    const category = findCategoryBySlug(section, params.category);
+    if (!category) {
+      return notFound();
+    }
+    return <SingleComponentCategory category={category} />;
   }
-  if (!category.componentList) {
-    return notFound();
+
+  if (section?.type === "multiple-component") {
+    const category = findCategoryBySlug(section, params.category);
+    if (!category) {
+      return notFound();
+    }
+    return <MultipleComponentCategory category={category} />;
   }
+}
 
-  const componentList = await fetchComponentData({
-    categorySlug: category.slug,
-    componentList: category.componentList,
-  });
+// Function Overloads
+function findCategoryBySlug(
+  section: SingleComponentSectionType,
+  categoryParamSlug: string,
+): SingleComponentCategoryType | null;
 
+function findCategoryBySlug(
+  section: MultiComponentSectionType,
+  categoryParamSlug: string,
+): CategoryType | null;
+
+function findCategoryBySlug(
+  section: PageSectionType,
+  categoryParamSlug: string,
+): null;
+
+// General Implementation
+function findCategoryBySlug(
+  section: SectionType,
+  categoryParamSlug: string,
+): SingleComponentCategoryType | CategoryType | null {
+  if (section.type === "page") {
+    return null;
+  }
   return (
-    <div className="space-y-6">
-      {componentList.map((component) => (
-        <Fragment key={component.title}>
-          <HeaderComponent
-            componentBadges={component.componentBadges}
-            description={component.description}
-            title={component.title}
-          />
-          <VariantTabs
-            componentList={component.componentList}
-            isChildUsingHeightFull={component.isChildUsingHeightFull}
-            isIframed={component.isIframed}
-            isResizable={component.isResizable}
-            key={component.title}
-            rerenderButton={component.rerenderButton}
-            size={component.sizePreview}
-          />
-          <InspirationComponentFooter
-            inspiration={component.inspiration}
-            inspirationLink={component.inspirationLink}
-          />
-        </Fragment>
-      ))}
-    </div>
+    section?.categoriesList.find(
+      (category) => category.slug === categoryParamSlug,
+    ) ?? null
   );
 }

src/app/(components)/[section]/[category]/process-variant-data.ts

@@ -1,10 +1,11 @@
 import type {
   ComponentType,
-  ComponentVariantType,
+  SingleComponentType,
+  VariantType,
 } from "#/src/lib/types/component";
 import { getFileContentAsString } from "#/src/utils/get-file-content-as-string";
 
-interface ProcessedVariant extends ComponentVariantType {
+interface ProcessedVariant extends VariantType {
   previewCode: string;
   componentCode?: string;
 }
@@ -13,35 +14,54 @@ interface ProcessedComponent extends ComponentType {
   componentList: ProcessedVariant[];
 }
 
-export async function fetchVariantData(
-  categorySlug: string,
-  componentSlug: string,
-  variant: ComponentVariantType,
-) {
+export async function fetchVariantData({
+  categorySlug,
+  componentSlug,
+  variant,
+}: {
+  categorySlug: string;
+  componentSlug?: string;
+  variant: VariantType;
+}) {
   const variantName = variant.name;
   const variantSlugPreviewFile = variant.slugPreviewFile ?? variantName;
   const variantSlugComponentFile = variant.slugComponentFile ?? variantName;
 
-  const previewCode = await getFileContentAsString({
-    componentSlug: categorySlug,
-    variantName: `${componentSlug}/${variantSlugPreviewFile}`,
-  });
+  let previewCode: string | null = null;
+  let componentCode: string | undefined;
+  if (componentSlug) {
+    previewCode = await getFileContentAsString({
+      componentSlug: categorySlug,
+      variantName: `${componentSlug}/${variantSlugPreviewFile}`,
+    });
 
-  const componentCode = variant.slugComponentFile
-    ? await getFileContentAsString({
-        componentSlug: categorySlug,
-        variantName: `${componentSlug}/${variantSlugComponentFile}`,
-      })
-    : undefined;
+    componentCode = variant.slugComponentFile
+      ? await getFileContentAsString({
+          componentSlug: categorySlug,
+          variantName: `${componentSlug}/${variantSlugComponentFile}`,
+        })
+      : undefined;
+  } else {
+    previewCode = await getFileContentAsString({
+      componentSlug: categorySlug,
+      variantName: variantSlugPreviewFile,
+    });
 
+    componentCode = variant.slugComponentFile
+      ? await getFileContentAsString({
+          componentSlug: categorySlug,
+          variantName: variantSlugComponentFile,
+        })
+      : undefined;
+  }
   return {
     ...variant,
     previewCode,
     componentCode,
   };
 }
 
-export async function fetchComponentData({
+export async function fetchMultipleComponentData({
   componentList,
   categorySlug,
 }: {
@@ -54,11 +74,11 @@ export async function fetchComponentData({
     const processedVariants: ProcessedVariant[] = [];
 
     for (const variant of component.variantList) {
-      const processedVariant = await fetchVariantData(
+      const processedVariant = await fetchVariantData({
         categorySlug,
-        component.slug,
+        componentSlug: component.slug,
         variant,
-      );
+      });
       processedVariants.push(processedVariant);
     }
 
@@ -72,3 +92,23 @@ export async function fetchComponentData({
 
   return processedComponents;
 }
+
+export async function fetchSingleComponentData({
+  categorySlug,
+  component,
+}: {
+  categorySlug: string;
+  component: SingleComponentType;
+}) {
+  const processedVariants: ProcessedVariant[] = [];
+
+  for (const variant of component.variantList) {
+    const processedVariant = await fetchVariantData({ categorySlug, variant });
+    processedVariants.push(processedVariant);
+  }
+
+  return {
+    ...component,
+    componentList: processedVariants,
+  };
+}