Fix component rendering for .ts components (#60)

* ♻️ refactor SectionsList to sectionList across the application

* 🐛 Check isValid before rendering

* ⬆️ update qrcode.react to version 4.1.0

Author: damien-schneider

apps/website/__tests__/components/component-categories.test.tsx

@@ -1,14 +1,14 @@
 import { describe, expect, it } from "vitest";
-import { SectionsList } from "@cuicui/ui";
+import { sectionList } from "@cuicui/ui/lib/section-list";
 import { getFileContentAsString } from "#/src/utils/get-file-content-as-string";
 
-describe("SectionsList", () => {
+describe("sectionList", () => {
   it("should have the correct number of sections", () => {
-    expect(SectionsList).toHaveLength(7);
+    expect(sectionList).toHaveLength(7);
   });
 
   it("should have the correct section slugs in the good order", () => {
-    const sectionSlugs = SectionsList.map((section) => section.slug);
+    const sectionSlugs = sectionList.map((section) => section.slug);
     expect(sectionSlugs).toEqual([
       "common-ui",
       "application-ui",
@@ -21,7 +21,7 @@ describe("SectionsList", () => {
   });
 
   it("category should have componentList === null if comingSoonCategory === true", () => {
-    for (const section of SectionsList) {
+    for (const section of sectionList) {
       if (section.type !== "multiple-component") {
         continue;
       }
@@ -55,7 +55,7 @@ describe("SectionsList", () => {
       }
     };
 
-    for (const section of SectionsList) {
+    for (const section of sectionList) {
       if (section.type !== "multiple-component") {
         continue;
       }

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

@@ -1,7 +1,7 @@
 import { notFound } from "next/navigation";
 import MultipleComponentCategory from "#/src/app/(site)/[section]/[category]/multiple-component-section";
 import SingleComponentCategory from "#/src/app/(site)/[section]/[category]/single-component-section";
-import { SectionsList } from "@cuicui/ui";
+import { sectionList } from "@cuicui/ui/lib/section-list";
 import type {
   CategoryType,
   SingleComponentCategoryType,
@@ -15,7 +15,7 @@ type Props = {
 };
 
 export async function generateStaticParams() {
-  const params = SectionsList.flatMap((section) => {
+  const params = sectionList.flatMap((section) => {
     if (
       section.type === "multiple-component" ||
       section.type === "single-component"
@@ -38,7 +38,7 @@ export async function generateStaticParams() {
 }
 
 export default async function Page({ params }: Readonly<Props>) {
-  const section = SectionsList.find(
+  const section = sectionList.find(
     (section) => section.slug === params.section,
   );
   if (!section) {

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

@@ -27,7 +27,7 @@ export default async function SingleComponentCategory({
 
   const component = await fetchSingleComponentData({
     categorySlug: category.slug,
-    component: { ...category.component },
+    component: category.component,
   });
 
   return (

apps/website/src/app/card.tsx

@@ -2,7 +2,7 @@ import type {
   CategoryType,
   SingleComponentCategoryType,
 } from "@cuicui/ui/lib/types/component";
-import { categoriesPreviewsList } from "@/categories-previews-list";
+import { categoriesPreviewsList } from "@cuicui/ui/categories-previews-list";
 import { createElement } from "react";
 import { HourglassIcon } from "lucide-react";
 
@@ -28,7 +28,7 @@ export const MainMenuCardContent = ({
   if (Component) {
     return (
       <div className="flex items-center justify-center size-full gap-2 py-4 px-12">
-        {createElement(Component, { category })}
+        {createElement(Component)}
       </div>
     );
   }

apps/website/src/app/preview/[section]/[category]/[component]/[variant]/page.tsx

@@ -1,4 +1,4 @@
-import { SectionsList } from "@cuicui/ui/lib/sections-list";
+import { sectionList } from "@cuicui/ui/lib/section-list";
 import type { Metadata } from "next";
 import { notFound } from "next/navigation";
 import { createElement } from "react";
@@ -9,7 +9,7 @@ export const metadata: Metadata = {
 };
 
 export async function generateStaticParams() {
-  return SectionsList.map((section) => {
+  return sectionList.map((section) => {
     if (section.type === "multiple-component") {
       return section.categoriesList.map((category) => {
         return category.componentList?.map((component) => {
@@ -70,7 +70,7 @@ export const findCorrespondingComponent = ({
   component: string;
   variant?: string;
 }) => {
-  const sectionFound = SectionsList.find((s) => s.slug === section);
+  const sectionFound = sectionList.find((s) => s.slug === section);
   if (!sectionFound) {
     return null;
   }

apps/website/src/app/preview/[section]/[category]/[component]/page.tsx

@@ -1,5 +1,5 @@
 import { findCorrespondingComponent } from "#/src/app/preview/[section]/[category]/[component]/[variant]/page";
-import { SectionsList } from "@cuicui/ui/lib/sections-list";
+import { sectionList } from "@cuicui/ui/lib/section-list";
 import type { Metadata } from "next";
 import { notFound } from "next/navigation";
 import { createElement } from "react";
@@ -10,7 +10,7 @@ export const metadata: Metadata = {
 };
 
 export async function generateStaticParams() {
-  return SectionsList.map((section) => {
+  return sectionList.map((section) => {
     if (section.type === "single-component") {
       return section.categoriesList.map((category) => {
         if (!category.component) {

apps/website/src/app/sitemap.ts

@@ -1,5 +1,5 @@
 import type { MetadataRoute } from "next";
-import { SectionsList } from "@cuicui/ui";
+import { sectionList } from "@cuicui/ui/lib/section-list";
 
 export const port = process.env.PORT ?? 3000;
 
@@ -34,7 +34,7 @@ const staticSitemap: MetadataRoute.Sitemap = [
 
 function getComponentsSitemap(): MetadataRoute.Sitemap {
   const componentSitemap: MetadataRoute.Sitemap = [];
-  SectionsList.flatMap((section) => {
+  sectionList.flatMap((section) => {
     if (
       section.type === "multiple-component" ||
       section.type === "single-component"

apps/website/src/components/component-wrapper/component-tab-renderer.tsx

@@ -21,7 +21,7 @@ import {
 } from "#/src/ui/shadcn/scrollarea";
 import { cn } from "#/src/utils/cn";
 import { getContainerHeightClass } from "#/src/components/component-wrapper/get-container-height-class";
-import { createElement } from "react";
+import { createElement, isValidElement } from "react";
 const tabs = [
   {
     name: "Preview",
@@ -119,9 +119,10 @@ export default function ComponentTabRenderer({
                 size={size}
                 // key={render}
               >
-                {typeof component === "function"
-                  ? createElement(component)
-                  : (component ?? <p>An error has occured</p>)}
+                {isValidElement(component)
+                  ? component
+                  : //@ts-ignore
+                    createElement(component)}
               </ComponentWrapper>
             </ResizablePanel>
             <ResizableHandle
@@ -139,9 +140,10 @@ export default function ComponentTabRenderer({
             size={size}
             // key={render}
           >
-            {typeof component === "function"
-              ? createElement(component)
-              : (component ?? <p>An error has occured</p>)}
+            {isValidElement(component)
+              ? component
+              : //@ts-ignore
+                createElement(component)}
           </ComponentWrapper>
         )}
       </Tabs.Content>

apps/website/src/components/floating-dock-navigation/floating-dock.tsx

@@ -1,5 +1,4 @@
-import { SectionsList } from "@cuicui/ui";
-
+import { sectionList } from "@cuicui/ui/lib/section-list";
 import { FloatingDock } from "#/src/components/floating-dock-navigation/floating-docks-component";
 import { ArrowUpRightIcon, GithubIcon } from "lucide-react";
 import { cn } from "#/src/utils/cn";
@@ -8,7 +7,7 @@ import Link from "next/link";
 import { FloatingDockToggleTheme } from "#/src/components/floating-dock-navigation/floating-dock-toggle-theme";
 import { CUICUI_GITHUB_URL } from "#/src/lib/site.const";
 
-const sectionLinks = SectionsList.map((section) => {
+const sectionLinks = sectionList.map((section) => {
   return {
     title: section.name,
     Icon: <section.icon className="size-6" />,

apps/website/src/components/navigation/navigation-menu.tsx

@@ -4,7 +4,7 @@ import {
   GlobalNavItem,
   SectionWrapper,
 } from "#/src/components/navigation/navigation-item";
-import { SectionsList } from "@cuicui/ui";
+import { sectionList } from "@cuicui/ui/lib/section-list";
 import type {
   CategoryType,
   SingleComponentCategoryType,
@@ -55,7 +55,7 @@ export default function NavigationMenu({
 
   return (
     <nav className={cn("mt-5 mb-12 px-1 space-y-2 min-h-full", className)}>
-      {SectionsList.map((section) => {
+      {sectionList.map((section) => {
         if (section.type === "page") {
           return (
             <SectionWrapper

apps/website/src/components/search-menu/search-menu.tsx

@@ -5,7 +5,7 @@ import { SearchIcon } from "lucide-react";
 import { type ComponentProps, useState } from "react";
 import { FirstSectionCommandGroup } from "#/src/components/search-menu/first-section-command-group";
 import { SearchGroupComponentSection } from "#/src/components/search-menu/search-group-multi-component-section";
-import { SectionsList } from "@cuicui/ui";
+import { sectionList } from "@cuicui/ui/lib/section-list";
 import { useKeyPress } from "@cuicui/ui/cuicui/hooks/use-key-press/use-key-press";
 import {
   CommandDialog,
@@ -60,7 +60,7 @@ export function SearchMenu({ ...props }: ComponentProps<"button">) {
 
           <FirstSectionCommandGroup closeSearchMenu={() => setOpen(false)} />
 
-          {SectionsList.map((section) => {
+          {sectionList.map((section) => {
             return (
               <SearchGroupComponentSection
                 closeSearchMenu={() => setOpen(false)}

apps/website/src/utils/get-file-content-as-string.ts

@@ -1,4 +1,5 @@
 "use server";
+import { sectionList } from "@cuicui/ui/lib/section-list";
 import { promises as fs } from "node:fs";
 import path from "node:path";
 
@@ -53,15 +54,13 @@ async function GetFileContentFromPathWithoutExtension(
   }
 }
 
-import { SectionsList } from "@cuicui/ui";
-
 function getComponentPath({
   componentSlug,
   variantName,
 }: { componentSlug: string; variantName: string }) {
   let basePath: null | string = null;
 
-  for (const section of SectionsList) {
+  for (const section of sectionList) {
     if (section.type === "page") {
       continue;
     }

apps/website/src/utils/section-category-components-utils/find-section-by-slug.ts

@@ -1,6 +1,6 @@
-import { SectionsList } from "@cuicui/ui";
+import { sectionList } from "@cuicui/ui/lib/section-list";
 import type { SectionType } from "@cuicui/ui/lib/types/component";
 
 export function findSectionBySlug(slug: string): SectionType | null {
-  return SectionsList.find((section) => section.slug === slug) ?? null;
+  return sectionList.find((section) => section.slug === slug) ?? null;
 }

packages/ui/cuicui/application-ui/dropdown-menu/mac-os-dropdown/component.ts

@@ -2,8 +2,10 @@ import { PreviewMacOSDropdownMenu } from "@/cuicui/application-ui/dropdown-menu/
 import type { ComponentType } from "@/lib/types/component";
 
 export const macOsDropdownComponent: ComponentType = {
-  sizePreview: "sm",
   slug: "mac-os-dropdown",
+  name: "Mac OS Dropdown",
+  description: "Mac OS dropdown menu",
+  sizePreview: "sm",
   variantList: [
     {
       name: "Default",
@@ -12,6 +14,4 @@ export const macOsDropdownComponent: ComponentType = {
       slugComponentFile: "mac-os-dropdown",
     },
   ],
-  name: "Mac OS Dropdown",
-  description: "Mac OS dropdown menu",
 };

packages/ui/cuicui/other/other.section.ts

@@ -1,12 +1,12 @@
 import { RectangleEllipsisIcon } from "lucide-react";
-import type { SectionType } from "@/lib/types/component";
+import type { MultiComponentSectionType } from "@/lib/types/component";
 import { cursorCategory } from "@/cuicui/other/cursors/cursor.category";
 import { mockUpsCategory } from "@/cuicui/other/mock-ups/mock-ups.category";
 import { patternsCategory } from "@/cuicui/other/patterns/patterns.category";
 import { qrCodeCategory } from "@/cuicui/other/qr-code/qr-code.category";
 import { transitionWrappersCategory } from "@/cuicui/other/transition-wrappers/transition-wrappers.category";
 import { creativeEffectCategory } from "@/cuicui/other/creative-effects/category.creative-effet";
-export const otherSection: SectionType = {
+export const otherSection: MultiComponentSectionType = {
   name: "Other",
   slug: "other",
   type: "multiple-component",

packages/ui/cuicui/other/qr-code/bar-code-generator/bar-code-generator.component.tsx packages/ui/cuicui/other/qr-code/bar-code-generator/component.ts

@@ -1,18 +1,17 @@
 import type { ComponentType } from "@/lib/types/component";
-
-import PreviewBarCodeGenerator from "@/cuicui/other/qr-code/bar-code-generator/preview-bar-code-generator";
+import { PreviewBarCodeGenerator } from "@/cuicui/other/qr-code/bar-code-generator/preview-bar-code-generator";
 
 export const BarCodeGeneratorComponent: ComponentType = {
-  name: "Bar Code Generator",
   slug: "bar-code-generator",
+  name: "Bar Code Generator",
   description: "Generate bar codes",
   sizePreview: "sm",
   variantList: [
     {
-      component: <PreviewBarCodeGenerator />,
+      name: "Bar Code Generator",
+      component: PreviewBarCodeGenerator,
       slugComponentFile: "bar-code-generator",
       slugPreviewFile: "preview-bar-code-generator",
-      name: "Bar Code Generator",
     },
   ],
 };

packages/ui/cuicui/other/qr-code/bar-code-generator/preview-bar-code-generator.tsx

@@ -3,7 +3,7 @@ import { useState } from "react";
 import { ModernSimpleInput } from "@/cuicui/common-ui/inputs/modern-simple-input/modern-simple-input";
 import { BarCodeGenerator } from "@/cuicui/other/qr-code/bar-code-generator/bar-code-generator";
 
-export default function PreviewBarCodeGenerator() {
+export const PreviewBarCodeGenerator = () => {
   const [value, setValue] = useState("https://www.modul.day/");
   return (
     <div className="flex w-full flex-col items-center gap-4">
@@ -26,4 +26,4 @@ export default function PreviewBarCodeGenerator() {
       )}
     </div>
   );
-}
+};

packages/ui/cuicui/other/qr-code/qr-code-generator/component.ts

@@ -1,17 +1,16 @@
 import type { ComponentType } from "@/lib/types/component";
 import { QrCodeGenerator } from "@/cuicui/other/qr-code/qr-code-generator/qr-code-generator";
+
 export const QrCodeGeneratorComponent: ComponentType = {
-  sizePreview: "md",
   slug: "qr-code-generator",
+  name: "QR Code Generator",
+  description: "A QR code generator component using qrcode.react",
+  sizePreview: "md",
   variantList: [
     {
       name: "Default",
       component: QrCodeGenerator,
       slugPreviewFile: "qr-code-generator",
     },
   ],
-  name: "QR Code Generator",
-  description: "A QR code generator component using qrcode.react",
 };
-
-export default QrCodeGeneratorComponent;

packages/ui/cuicui/other/qr-code/qr-code.category.tsx packages/ui/cuicui/other/qr-code/qr-code.category.ts

@@ -1,6 +1,6 @@
 import { QrCodeIcon } from "lucide-react";
 import type { CategoryType } from "@/lib/types/component";
-import { BarCodeGeneratorComponent } from "@/cuicui/other/qr-code/bar-code-generator/bar-code-generator.component";
+import { BarCodeGeneratorComponent } from "@/cuicui/other/qr-code/bar-code-generator/component";
 import { QrCodeGeneratorComponent } from "@/cuicui/other/qr-code/qr-code-generator/component";
 
 export const qrCodeCategory: CategoryType = {

packages/ui/index.ts

@@ -1,5 +1,3 @@
-import { SectionsList } from "./lib/sections-list";
 import { AnimatedNumber } from "@/cuicui/other/transition-wrappers/animated-number/animated-number";
-import { categoriesPreviewsList } from "./categories-previews-list";
 
-export { SectionsList, AnimatedNumber, categoriesPreviewsList };
+export { AnimatedNumber };

packages/ui/lib/sections-list.ts packages/ui/lib/section-list.ts

@@ -8,7 +8,7 @@ import { utilsSection } from "@/cuicui/utils/utils.section";
 import type { SectionType } from "./types/component";
 import { marketingUiSection } from "@/cuicui/marketing-ui/section.marketing-ui";
 
-export const SectionsList: SectionType[] = [
+export const sectionList: SectionType[] = [
   commonUiSection,
   applicationUiSection,
   marketingUiSection,

packages/ui/package.json

@@ -39,7 +39,7 @@
     "jsbarcode": "3.11.6",
     "lucide-react": "^0.453.0",
     "next": "14.2.3",
-    "qrcode.react": "4.0.1",
+    "qrcode.react": "4.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "sonner": "1.5.0",