v.0.3.5 - New previews & Dropdown Menu Category (#59)

* 🚧 started an intern cli to easily create new component or categories

* 🐛 update component rendering logic with createElement

* ✨ add Mac OS dropdown menu component and update related configurations

* 🔥 remove old preview images logic

* ✨ add new category previews

* 📝 add previews & dropdown changelogs

* 📝 update last changelog date, modify tsconfig exclude list, and add avatars preview to categories

Author: damien-schneider

apps/website/public/preview-images/dark-application-ui-action-menu.png

@@ -55,10 +55,7 @@ export default function Page({ params }: Readonly<Props>) {
                 description={category.description}
                 title={category.name}
               >
-                <MainMenuCardContent
-                  sectionSlug={section.slug}
-                  category={category}
-                />
+                <MainMenuCardContent category={category} />
               </MainMenusGradientCard>
             </Link>
           );

apps/website/public/preview-images/dark-application-ui-alert.png

@@ -1,40 +1,48 @@
-import Image from "next/image";
 import type {
   CategoryType,
   SingleComponentCategoryType,
 } from "@cuicui/ui/lib/types/component";
+import { categoriesPreviewsList } from "@/categories-previews-list";
+import { createElement } from "react";
+import { HourglassIcon } from "lucide-react";
 
 export const MainMenuCardContent = ({
   category,
-  sectionSlug,
 }: {
   category: CategoryType | SingleComponentCategoryType;
-  sectionSlug: string;
 }) => {
   if (category?.comingSoonCategory) {
     return (
-      <p className="-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-1/2 font-semibold text-2xl text-neutral-800 dark:text-neutral-300">
-        Coming Soon
+      <p className="size-full grid place-content-center">
+        <div className="w-fit p-4 bg-neutral-400/15 rounded-xl gap-2 flex items-center justify-center text-neutral-400">
+          {/* Hourglass Icon */}
+          <HourglassIcon className="size-6 " />
+          <p className="text-2xl font-semibold">Coming Soon</p>
+        </div>
       </p>
     );
   }
 
+  const Component = getCategoryPreviewComponent(category.slug);
+
+  if (Component) {
+    return (
+      <div className="flex items-center justify-center size-full gap-2 py-4 px-12">
+        {createElement(Component, { category })}
+      </div>
+    );
+  }
+
   return (
-    <>
-      <Image
-        alt={`${category.name} preview`}
-        className="h-48 w-full object-cover hidden dark:block"
-        height={400}
-        src={`/preview-images/dark-${sectionSlug}-${category.slug}.png`}
-        width={600}
-      />
-      <Image
-        alt={`${category.name} preview`}
-        className="h-48 w-full object-cover dark:hidden"
-        height={400}
-        src={`/preview-images/light-${sectionSlug}-${category.slug}.png`}
-        width={600}
-      />
-    </>
+    <div className="flex items-center justify-center size-full gap-2 py-4 px-12">
+      <p>Preview is missing</p>
+    </div>
   );
 };
+
+const getCategoryPreviewComponent = (slug: string) => {
+  const Component = Object.keys(categoriesPreviewsList).find(
+    (key) => key === slug,
+  ) as keyof typeof categoriesPreviewsList;
+  return Component ? categoriesPreviewsList[Component] : null;
+};

apps/website/public/preview-images/dark-application-ui-authentication.png

@@ -1,6 +1,23 @@
-import Modern3dKbdVariant1 from "@/cuicui/application-ui/kbd/modern-3d-kbd/variant1";
-import React from "react";
+"use client";
 
-export default function Page() {
-  return <Modern3dKbdVariant1 />;
+export default function MacOSDropdownMenu() {
+  return (
+    <div
+      style={{
+        backgroundImage:
+          "url('https://static1.squarespace.com/static/5e949a92e17d55230cd1d44f/t/6667b379b716e7212d986a57/1718072191450/Seq3x2.png?format=1500w')",
+
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+        backgroundRepeat: "no-repeat",
+      }}
+      className="w-full h-dvh p-10"
+    >
+      <div className="rounded-[6px] min-w-32 text-sm p-1 text-white bg-[rgba(30,30,31,0.5)] backdrop-blur-xl shadow-[0px_20px_30px_0px_rgba(0,0,0,0.25),0px_0px_15px_0px_rgba(0,0,0,0.1),inset_0px_0px_0px_1px_rgba(255,255,255,0.075),0px_0px_0px_1px_rgba(0,0,0,0.5)] w-fit">
+        <p className="truncate cursor-pointer whitespace-nowrap py-0.5 text-white/90 px-1.5 hover:bg-blue-600 rounded-[4px]">
+          Refresh
+        </p>
+      </div>
+    </div>
+  );
 }

apps/website/public/preview-images/dark-application-ui-battery.png

@@ -1,6 +1,7 @@
 import { SectionsList } from "@cuicui/ui/lib/sections-list";
 import type { Metadata } from "next";
 import { notFound } from "next/navigation";
+import { createElement } from "react";
 
 export const metadata: Metadata = {
   referrer: "no-referrer",
@@ -52,7 +53,7 @@ export default function PagePreview({
   return (
     <div className="grid place-content-center w-full min-h-screen">
       {typeof variantFound.component === "function"
-        ? variantFound.component()
+        ? createElement(variantFound.component)
         : variantFound.component}
     </div>
   );

apps/website/public/preview-images/dark-application-ui-code.png

@@ -2,6 +2,7 @@ import { findCorrespondingComponent } from "#/src/app/preview/[section]/[categor
 import { SectionsList } from "@cuicui/ui/lib/sections-list";
 import type { Metadata } from "next";
 import { notFound } from "next/navigation";
+import { createElement } from "react";
 
 export const metadata: Metadata = {
   referrer: "no-referrer",
@@ -55,7 +56,7 @@ export default function PagePreview({
   return (
     <div className="grid place-content-center w-full h-screen overflow-auto">
       {typeof variantFound.component === "function"
-        ? variantFound.component()
+        ? createElement(variantFound.component)
         : variantFound.component}
     </div>
   );

apps/website/public/preview-images/dark-application-ui-cookie-banner.png

@@ -1,2 +1,2 @@
 // This file is generated by the generate-latest-changelog-date script
-export const lastChangelogDate = new Date("2024-11-21T23:00:00.000Z");
+export const lastChangelogDate = new Date("2024-11-23T23:00:00.000Z");

apps/website/public/preview-images/dark-application-ui-kbd.png

@@ -21,6 +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";
 const tabs = [
   {
     name: "Preview",
@@ -93,7 +94,7 @@ export default function ComponentTabRenderer({
           }
         })}
       </Tabs.List>
-      <Tabs.Content value="preview" asChild>
+      <Tabs.Content value="preview" asChild={true}>
         {isResizable ? (
           <ResizablePanelGroup
             className={cn(
@@ -119,7 +120,7 @@ export default function ComponentTabRenderer({
                 // key={render}
               >
                 {typeof component === "function"
-                  ? component()
+                  ? createElement(component)
                   : (component ?? <p>An error has occured</p>)}
               </ComponentWrapper>
             </ResizablePanel>
@@ -139,7 +140,7 @@ export default function ComponentTabRenderer({
             // key={render}
           >
             {typeof component === "function"
-              ? component()
+              ? createElement(component)
               : (component ?? <p>An error has occured</p>)}
           </ComponentWrapper>
         )}

apps/website/public/preview-images/dark-application-ui-search-bars.png

@@ -25,6 +25,6 @@
     "strict": true,
     "target": "es5"
   },
-  "exclude": ["node_modules"],
+  "exclude": ["node_modules, .next"],
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"]
 }

apps/website/public/preview-images/dark-application-ui-settings.png

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_style = tab
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.yml]
+indent_style = space
+indent_size = 2

apps/website/public/preview-images/dark-application-ui-signature.png

@@ -0,0 +1 @@
+* text=auto eol=lf

apps/website/public/preview-images/dark-application-ui-sliders.png

@@ -0,0 +1,2 @@
+node_modules
+dist