🔥 remove old logic previewCategory from all categories

Author: damien-schneider

apps/website/src/app/api/get-components/get-components.utils.ts

@@ -17,7 +17,6 @@ export function extractCategories(node: FileSystemNode): CategoryType[] {
         ? new Date(node.config.releaseDateCategory)
         : undefined,
       icon: node.config.icon,
-      previewCategory: node.config.previewCategory,
       componentList: [],
     };
 
@@ -123,10 +122,5 @@ export type CategoryType = {
   description: string;
   releaseDateCategory?: Date;
   icon?: string; // Adjusted to string for simplicity
-  previewCategory?: {
-    component?: string; // Adjusted to string for simplicity
-    previewImage?: string;
-    previewScale?: number;
-  };
   componentList: ComponentType[];
 };

packages/internal-cli/templates/category.template.tsx

@@ -10,10 +10,6 @@ export const __CATEGORY_NAME__Category: CategoryType = {
   description: "__CATEGORY_NAME__ components",
   releaseDateCategory: new Date(),
   icon: __CATEGORY_NAME__Icon,
-  previewCategory: {
-    component: <div>Preview of __CATEGORY_NAME__</div>,
-    previewScale: 1,
-  },
   componentList: [
     // Add components here
   ],

packages/ui/cuicui/application-ui/action-menu/action-menu.category.tsx

@@ -8,10 +8,6 @@ export const actionMenuCategory: CategoryType = {
   releaseDateCategory: new Date("2024-07-29"),
   icon: StretchHorizontalIcon,
   comingSoonCategory: true,
-  previewCategory: {
-    component: null,
-    previewScale: 0.75,
-  },
   componentList: null,
   // componentList: [advancedBottomActionMenuComponent],
 };

packages/ui/cuicui/application-ui/alert/alert.category.tsx

@@ -10,10 +10,6 @@ export const alertCategory: CategoryType = {
   description: "Alert components",
   releaseDateCategory: new Date("2024-08-29"),
   icon: AlertCircleIcon,
-  previewCategory: {
-    component: <SimpleAlert />,
-    previewScale: 1,
-  },
   componentList: [
     {
       isIframed: true,

packages/ui/cuicui/application-ui/application-ui.section.ts

@@ -16,6 +16,7 @@ import { themeCategory } from "@/cuicui/application-ui/theme/theme.category";
 import { treeCategory } from "@/cuicui/application-ui/tree/tree.category";
 import { notificationCategory } from "@/cuicui/application-ui/notification/category.notification";
 import { dropdownMenuCategory } from "@/cuicui/application-ui/dropdown-menu/category";
+import { tableOfContentCategory } from "@/cuicui/application-ui/table-of-contents/table-of-contents.category";
 
 export const applicationUiSection: MultiComponentSectionType = {
   type: "multiple-component",
@@ -38,6 +39,7 @@ export const applicationUiSection: MultiComponentSectionType = {
     signatureCategory,
     slidersCategory,
     staticSteppersCategory,
+    tableOfContentCategory,
     themeCategory,
     treeCategory,
   ],

packages/ui/cuicui/application-ui/authentication/authentication.category.tsx

@@ -7,10 +7,6 @@ export const authenticationCategory: CategoryType = {
   description: "Authentication components",
   releaseDateCategory: new Date("2024-08-21"),
   icon: FingerprintIcon,
-  previewCategory: {
-    component: <HalfSidedGlassMorphismAuthentication />,
-    previewScale: 1,
-  },
   componentList: [
     {
       isIframed: true,

packages/ui/cuicui/application-ui/battery/battery.category.tsx

@@ -8,10 +8,6 @@ export const batteryCategory: CategoryType = {
   description: "Battery components",
   releaseDateCategory: new Date("2024-08-21"),
   icon: BatteryChargingIcon,
-  previewCategory: {
-    component: <PreviewBatteryIndicator />,
-    previewScale: 1,
-  },
   componentList: [
     {
       sizePreview: "sm",

packages/ui/cuicui/application-ui/code/code.category.tsx

@@ -1,7 +1,6 @@
 import { Code2Icon } from "lucide-react";
 import type { CategoryType } from "@/lib/types/component";
 import { advancedCodeBlockComponent } from "@/cuicui/application-ui/code/advanced-code-block/advanced-code-block.component";
-import { CodeCardPreview } from "@/cuicui/application-ui/code/code-card/code-card-preview";
 import { codeCardComponent } from "@/cuicui/application-ui/code/code-card/code-card.component";
 import { codeSnippetComponent } from "@/cuicui/application-ui/code/code-snippet/code-snippet.component";
 import { inlineCodeComponent } from "@/cuicui/application-ui/code/inline-code/inline-code.component";
@@ -12,10 +11,6 @@ export const codeCategory: CategoryType = {
   description: "Code components with special interactions",
   releaseDateCategory: new Date("2024-08-20"),
   icon: Code2Icon,
-  previewCategory: {
-    component: <CodeCardPreview />,
-    previewScale: 0.8,
-  },
   componentList: [
     codeSnippetComponent,
     codeCardComponent,

packages/ui/cuicui/application-ui/cookie-banner/category.cookie-banner.tsx

@@ -1,7 +1,6 @@
 import { CookieIcon } from "lucide-react";
 import type { CategoryType } from "@/lib/types/component";
 import { simpleCookieBannerComponent } from "@/cuicui/application-ui/cookie-banner/simple-cookie-banner/component.simple-cookie-banner";
-import PreviewSimpleCookieBanner from "@/cuicui/application-ui/cookie-banner/simple-cookie-banner/preview-simple-cookie-banner";
 
 export const cookieBannerCategory: CategoryType = {
   name: "Cookie Banner",
@@ -10,9 +9,5 @@ export const cookieBannerCategory: CategoryType = {
   releaseDateCategory: new Date("2024-09-26"),
   icon: CookieIcon,
   comingSoonCategory: false,
-  previewCategory: {
-    component: <PreviewSimpleCookieBanner />,
-    previewScale: 0.75,
-  },
   componentList: [simpleCookieBannerComponent],
 };

packages/ui/cuicui/application-ui/dropdown-menu/category.ts

@@ -1,17 +1,12 @@
 import { PanelTopOpenIcon } from "lucide-react";
 import type { CategoryType } from "@/lib/types/component";
 import { macOsDropdownComponent } from "@/cuicui/application-ui/dropdown-menu/mac-os-dropdown/component";
-import { PreviewMacOSDropdownMenu } from "@/cuicui/application-ui/dropdown-menu/mac-os-dropdown/preview.mac-os-dropdown";
 
 export const dropdownMenuCategory: CategoryType = {
   slug: "dropdown-menu",
   name: "Dropdown Menu",
   description: "Dropdown menu components",
   releaseDateCategory: new Date("2024-11-23"),
   icon: PanelTopOpenIcon,
-  previewCategory: {
-    component: PreviewMacOSDropdownMenu,
-    previewScale: 1,
-  },
   componentList: [macOsDropdownComponent],
 };

packages/ui/cuicui/application-ui/kbd/kbd.category.tsx

@@ -9,10 +9,6 @@ export const kbdCategory: CategoryType = {
   description: "Keyboard components with various styles",
   releaseDateCategory: new Date("2024-08-13"),
   icon: CommandIcon,
-  previewCategory: {
-    component: <Modern3dKbdVariant1 />,
-    previewScale: 1,
-  },
   componentList: [
     {
       sizePreview: "xs",

packages/ui/cuicui/application-ui/notification/category.notification.tsx

@@ -1,6 +1,5 @@
 import { BellDotIcon } from "lucide-react";
 import type { CategoryType } from "@/lib/types/component";
-import GrowingSearchVariant1 from "@/cuicui/application-ui/search-bars/growing-search/variant1";
 import { dynamicIslandNotificationComponent } from "@/cuicui/application-ui/notification/dynamic-island-notification/component.dynamic-island-notification";
 
 export const notificationCategory: CategoryType = {
@@ -9,9 +8,5 @@ export const notificationCategory: CategoryType = {
   description: "Notification components",
   releaseDateCategory: new Date("2024-10-14"),
   icon: BellDotIcon,
-  previewCategory: {
-    component: <GrowingSearchVariant1 />,
-    previewScale: 1,
-  },
   componentList: [dynamicIslandNotificationComponent],
 };

packages/ui/cuicui/application-ui/search-bars/search-bars.category.tsx

@@ -8,10 +8,6 @@ export const searchBarsCategory: CategoryType = {
   description: "Search bar components",
   releaseDateCategory: new Date("2024-08-19"),
   icon: SearchIcon,
-  previewCategory: {
-    component: <GrowingSearchVariant1 />,
-    previewScale: 1,
-  },
   componentList: [
     {
       sizePreview: "xs",

packages/ui/cuicui/application-ui/settings/settings.category.tsx

@@ -8,10 +8,6 @@ export const settingsCategory: CategoryType = {
   description: "Settings components with animations",
   releaseDateCategory: new Date("2024-06-30"),
   icon: SettingsIcon,
-  previewCategory: {
-    component: <DynamicSettingsVariant1 />,
-    previewScale: 1.25,
-  },
   componentList: [
     {
       sizePreview: "sm",

packages/ui/cuicui/application-ui/signature/signature.category.tsx

@@ -1,6 +1,5 @@
 import { SignatureIcon } from "lucide-react";
 import type { CategoryType } from "@/lib/types/component";
-import PreviewReactSignature from "@/cuicui/application-ui/signature/react-signature/preview-react-signature";
 import { reactSignatureComponent } from "@/cuicui/application-ui/signature/react-signature/react-signature.component";
 
 export const signatureCategory: CategoryType = {
@@ -9,9 +8,5 @@ export const signatureCategory: CategoryType = {
   description: "Signature components",
   releaseDateCategory: new Date("2024-09-24"),
   icon: SignatureIcon,
-  previewCategory: {
-    component: <PreviewReactSignature />,
-    previewScale: 1,
-  },
   componentList: [reactSignatureComponent],
 };

packages/ui/cuicui/application-ui/sliders/sliders.category.tsx

@@ -10,10 +10,6 @@ export const slidersCategory: CategoryType = {
   description: "Slider components with animations",
   releaseDateCategory: new Date("2024-08-10"),
   icon: SlidersHorizontalIcon,
-  previewCategory: {
-    component: <ElasticSliderVariant1 />,
-    previewScale: 1,
-  },
   componentList: [
     {
       slug: "elastic-slider",

packages/ui/cuicui/application-ui/static-steppers/static-steppers.category.tsx

@@ -8,10 +8,6 @@ export const staticSteppersCategory: CategoryType = {
   description: "Components to display a list of steps",
   releaseDateCategory: new Date("2024-08-01"),
   icon: ListOrderedIcon,
-  previewCategory: {
-    component: <StepWithStickyColorVariant1 />,
-    previewScale: 0.75,
-  },
   componentList: [
     {
       slug: "code",

packages/ui/cuicui/application-ui/table-of-contents/preview.tsx

@@ -1,34 +1,18 @@
-export default function () {
+export default function TableOfContentCategoryPreview() {
   return (
-    <div className="w-fit p-4 bg-neutral-400/15 rounded-xl min-h-32 flex flex-col space-y-4">
-      {/* Header Row */}
-      <div className="flex space-x-2">
-        <div className="w-1/4 h-4 bg-neutral-400/40 rounded" />
-        <div className="w-3/4 h-4 bg-neutral-400/40 rounded" />
-      </div>
-
-      {/* Row 1 */}
-      <div className="flex space-x-2">
-        <div className="w-1/4 h-3 bg-neutral-400/40 rounded" />
-        <div className="w-3/4 h-3 bg-neutral-400/40 rounded" />
-      </div>
-
-      {/* Row 2 */}
-      <div className="flex space-x-2">
-        <div className="w-1/4 h-3 bg-neutral-400/40 rounded" />
-        <div className="w-3/4 h-3 bg-neutral-400/40 rounded" />
-      </div>
-
-      {/* Row 3 */}
-      <div className="flex space-x-2">
-        <div className="w-1/4 h-3 bg-neutral-400/40 rounded" />
-        <div className="w-3/4 h-3 bg-neutral-400/40 rounded" />
-      </div>
-
-      {/* Row 4 */}
-      <div className="flex space-x-2">
-        <div className="w-1/4 h-3 bg-neutral-400/40 rounded" />
-        <div className="w-3/4 h-3 bg-neutral-400/40 rounded" />
+    <div className="w-40 p-4 bg-neutral-400/15 rounded-xl space-y-3">
+      {/* TOC List */}
+      <div className="space-y-2">
+        {/* Level 1 */}
+        <div className="h-3 bg-neutral-400/80 rounded w-3/4" />
+        {/* Level 2 */}
+        <div className="ml-4 h-3 bg-neutral-400/60 rounded w-2/3" />
+        {/* Level 2 */}
+        <div className="ml-4 h-3 bg-neutral-400/60 rounded w-2/5" />
+        {/* Level 1 */}
+        <div className="h-3 bg-neutral-400/80 rounded w-3/4" />
+        {/* Level 2 */}
+        <div className="ml-4 h-3 bg-neutral-400/60 rounded w-1/2" />
       </div>
     </div>
   );

packages/ui/cuicui/application-ui/table-of-contents/table-of-contents.category.tsx

@@ -1,6 +1,5 @@
 import { TableOfContentsIcon } from "lucide-react";
 import type { CategoryType } from "@/lib/types/component";
-import { StepWithStickyColorVariant1 } from "@/cuicui/application-ui/static-steppers/code/variant1";
 import TableOfContentPreview from "@/cuicui/application-ui/table-of-contents/modul-inspired/following-header-preview";
 
 export const tableOfContentCategory: CategoryType = {
@@ -9,10 +8,6 @@ export const tableOfContentCategory: CategoryType = {
   description: "Table of contents components",
   releaseDateCategory: new Date("2024-08-28"),
   icon: TableOfContentsIcon,
-  previewCategory: {
-    component: <StepWithStickyColorVariant1 />,
-    previewScale: 0.75,
-  },
   componentList: [
     {
       slug: "modul-inspired",

packages/ui/cuicui/application-ui/theme/theme.category.tsx

@@ -8,10 +8,6 @@ export const themeCategory: CategoryType = {
   description: "Theme components",
   releaseDateCategory: new Date("2024-08-29"),
   icon: SunMoonIcon,
-  previewCategory: {
-    component: <ThemeSwitcherButton />,
-    previewScale: 1,
-  },
   componentList: [
     {
       slug: "theme-switcher",

packages/ui/cuicui/application-ui/tree/tree.category.tsx

@@ -1,6 +1,5 @@
 import { FolderTreeIcon } from "lucide-react";
 import type { CategoryType } from "@/lib/types/component";
-import { PreviewRecursiveTree } from "@/cuicui/application-ui/tree/recursive-tree/preview-recursive-tree";
 import { recursiveTreeComponent } from "@/cuicui/application-ui/tree/recursive-tree/recursive-tree.component";
 
 export const treeCategory: CategoryType = {
@@ -9,9 +8,5 @@ export const treeCategory: CategoryType = {
   description: "Tree components",
   releaseDateCategory: new Date("2024-09-18"),
   icon: FolderTreeIcon,
-  previewCategory: {
-    component: <PreviewRecursiveTree />,
-    previewScale: 1,
-  },
   componentList: [recursiveTreeComponent],
 };

packages/ui/cuicui/common-ui/badges/badges.category.tsx

@@ -11,10 +11,6 @@ export const badgesCategory: CategoryType = {
   description: "Badges with various styles and purposes",
   releaseDateCategory: new Date("2024-06-29"),
   icon: TagIcon,
-  previewCategory: {
-    component: <ClerkBadgeVariant1 />,
-    previewScale: 3,
-  },
   componentList: [
     {
       sizePreview: "xs",

packages/ui/cuicui/common-ui/blockquotes/blockquotes.category.tsx

@@ -8,10 +8,6 @@ export const blockquotesCategory: CategoryType = {
   description: "Blockquotes with different styles",
   releaseDateCategory: new Date("2024-08-01"),
   icon: QuoteIcon,
-  previewCategory: {
-    component: <ModernSimpleQuoteVariant1 />,
-    previewScale: 0.75,
-  },
   componentList: [
     {
       slug: "modern-simple-quote",

packages/ui/cuicui/common-ui/buttons/buttons.category.tsx

@@ -18,10 +18,6 @@ export const buttonsCategory: CategoryType = {
   description: "Buttons with various animations and styles",
   releaseDateCategory: new Date("2024-08-09"),
   icon: SquareArrowRightIcon,
-  previewCategory: {
-    component: <PreviewShinyRotatingBorderButton />,
-    previewScale: 1.5,
-  },
   componentList: [
     {
       slug: "magnetic-button",

packages/ui/cuicui/common-ui/cards/cards.category.tsx

@@ -11,10 +11,6 @@ export const cardsCategory: CategoryType = {
   description: "Cards with various layouts and effects",
   releaseDateCategory: new Date("2024-08-10"),
   icon: CreditCardIcon,
-  previewCategory: {
-    component: <DynamicSquareBackgroundPreview />,
-    previewScale: 0.5,
-  },
   componentList: [
     {
       slug: "modern-inner-shadow",

packages/ui/cuicui/common-ui/checkboxes/checkboxes.category.tsx

@@ -8,10 +8,6 @@ export const checkboxesCategory: CategoryType = {
   description: "Checkboxes with various styles and interactions",
   releaseDateCategory: new Date("2024-08-31"),
   icon: CheckSquare2Icon,
-  previewCategory: {
-    component: <SimpleCheckboxPreview />,
-    previewScale: 2,
-  },
   componentList: [
     {
       sizePreview: "sm",

packages/ui/cuicui/common-ui/inputs/inputs.category.tsx

@@ -9,10 +9,6 @@ export const inputsCategory: CategoryType = {
   description: "Inputs with various styles and interactions",
   releaseDateCategory: new Date("2024-08-20"),
   icon: TextCursorInputIcon,
-  previewCategory: {
-    component: <FileDropzone />,
-    previewScale: 1,
-  },
   componentList: [
     {
       sizePreview: "sm",