feat: implement StackBlitz utility for opening demos with proper dependencies and templates

Author: tanerengiiin

apps/showcase/assets/menu/submenu/menu-tailwind.data.ts

@@ -28,17 +28,41 @@ export const tailwindMenu = [
                 name: 'ColorPicker',
                 href: '/docs/tailwind/components/colorpicker'
             },
+            {
+                name: 'InputOtp',
+                href: '/docs/tailwind/components/inputotp'
+            },
             {
                 name: 'InputText',
                 href: '/docs/tailwind/components/inputtext'
             },
+            {
+                name: 'Label',
+                href: '/docs/tailwind/components/label'
+            },
             {
                 name: 'RadioButton',
                 href: '/docs/tailwind/components/radiobutton'
             },
+            {
+                name: 'Slider',
+                href: '/docs/tailwind/components/slider'
+            },
             {
                 name: 'Switch',
                 href: '/docs/tailwind/components/switch'
+            },
+            {
+                name: 'Textarea',
+                href: '/docs/tailwind/components/textarea'
+            },
+            {
+                name: 'ToggleButton',
+                href: '/docs/tailwind/components/togglebutton'
+            },
+            {
+                name: 'ToggleButtonGroup',
+                href: '/docs/tailwind/components/togglebuttongroup'
             }
         ]
     },
@@ -48,10 +72,37 @@ export const tailwindMenu = [
             {
                 name: 'Button',
                 href: '/docs/tailwind/components/button'
+            }
+        ]
+    },
+    {
+        name: 'Data',
+        children: [
+            {
+                name: 'Paginator',
+                href: '/docs/tailwind/components/paginator'
+            }
+        ]
+    },
+    {
+        name: 'Panel',
+        children: [
+            {
+                name: 'Accordion',
+                href: '/docs/tailwind/components/accordion'
             },
             {
-                name: 'SpeedDial',
-                href: '/docs/tailwind/components/speeddial'
+                name: 'Divider',
+                href: '/docs/tailwind/components/divider'
+            }
+        ]
+    },
+    {
+        name: 'Overlay',
+        children: [
+            {
+                name: 'Dialog',
+                href: '/docs/tailwind/components/dialog'
             }
         ]
     },
@@ -70,6 +121,10 @@ export const tailwindMenu = [
             {
                 name: 'Avatar',
                 href: '/docs/tailwind/components/avatar'
+            },
+            {
+                name: 'Badge',
+                href: '/docs/tailwind/components/badge'
             }
         ]
     }

apps/showcase/public/r/accordion.json

@@ -3,7 +3,7 @@
   "name": "accordion",
   "type": "registry:ui",
   "dependencies": [
-    "@primeicons/react"
+    "@primeicons/react@^8.0.0-alpha.7"
   ],
   "registryDependencies": [
     "https://v11.primereact.org/public/r/utils.json"
@@ -12,7 +12,7 @@
     {
       "path": "components/ui/accordion.tsx",
       "type": "registry:ui",
-      "content": "'use client';\nimport { cn } from '@/lib/utils';\nimport { ChevronDown, ChevronUp } from '@primeicons/react';\nimport { AccordionContentProps, AccordionPanelProps, AccordionRootProps, AccordionTriggerProps } from '@primereact/types/shared/accordion';\nimport { Accordion as PRAccordion } from 'primereact/accordion';\nimport * as React from 'react';\n\nfunction Accordion({ className, ...props }: AccordionRootProps) {\n    return <PRAccordion.Root className={cn('', className)} motionProps={{ hideStrategy: 'none' }} {...props} />;\n}\n\nfunction AccordionPanel({ className, ...props }: AccordionPanelProps) {\n    return <PRAccordion.Panel className={cn('flex flex-col border-b border-surface-200 dark:border-surface-700', className)} {...props} />;\n}\n\nfunction AccordionTrigger({ className, children, ...props }: AccordionTriggerProps) {\n    return (\n        <PRAccordion.Header>\n            <PRAccordion.Trigger\n                className={cn(\n                    `cursor-pointer disabled:pointer-events-none disabled:opacity-60 flex items-center justify-between p-4 font-semibold w-full\n        bg-surface-0 dark:bg-surface-900\n        text-surface-500 dark:text-surface-400 text-sm\n        hover:text-surface-700 dark:hover:text-surface-0\n        data-content-open:text-surface-700 dark:data-content-open:text-surface-0\n        transition-colors duration-200\n        focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-primary`,\n                    className\n                )}\n                {...props}\n            >\n                {children}\n                <PRAccordion.Indicator match=\"open\">\n                    <ChevronUp />\n                </PRAccordion.Indicator>\n\n                <PRAccordion.Indicator match=\"closed\">\n                    <ChevronDown />\n                </PRAccordion.Indicator>\n            </PRAccordion.Trigger>\n        </PRAccordion.Header>\n    );\n}\n\nfunction AccordionContent({ className, children, ...props }: AccordionContentProps) {\n    return (\n        <PRAccordion.Content className={cn('bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0 text-sm h-(--height) transition-[height] duration-200 ease-out overflow-hidden', className)} {...props}>\n            <div className=\"px-4 pb-4\">{children}</div>\n        </PRAccordion.Content>\n    );\n}\n\nexport { Accordion, AccordionContent, AccordionPanel, AccordionTrigger };\n"
+      "content": "'use client';\nimport { cn } from '@/lib/utils';\nimport { ChevronDown, ChevronUp } from '@primeicons/react';\nimport { AccordionContentProps, AccordionPanelProps, AccordionRootProps, AccordionTriggerProps } from '@primereact/types/shared/accordion';\nimport { Accordion as PRAccordion } from 'primereact/accordion';\nimport * as React from 'react';\n\nfunction Accordion({ className, ...props }: AccordionRootProps) {\n    return <PRAccordion.Root className={cn('', className)} motionProps={{ hideStrategy: 'none' }} {...props} />;\n}\n\nfunction AccordionPanel({ className, ...props }: AccordionPanelProps) {\n    return <PRAccordion.Panel className={cn('flex flex-col border-b border-surface-200 dark:border-surface-700', className)} {...props} />;\n}\n\nfunction AccordionTrigger({ className, children, ...props }: AccordionTriggerProps) {\n    return (\n        <PRAccordion.Header>\n            <PRAccordion.Trigger\n                className={cn(\n                    `cursor-pointer disabled:pointer-events-none disabled:opacity-60 flex items-center justify-between p-4 font-semibold w-full\n        bg-surface-0 dark:bg-surface-900\n        text-surface-500 dark:text-surface-400 text-sm\n        hover:text-surface-700 dark:hover:text-surface-0\n        data-content-open:text-surface-700 dark:data-content-open:text-surface-0\n        transition-colors duration-200\n        focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-primary`,\n                    className\n                )}\n                {...props}\n            >\n                {children}\n                <PRAccordion.Indicator match=\"open\">\n                    <ChevronUp />\n                </PRAccordion.Indicator>\n\n                <PRAccordion.Indicator match=\"closed\">\n                    <ChevronDown />\n                </PRAccordion.Indicator>\n            </PRAccordion.Trigger>\n        </PRAccordion.Header>\n    );\n}\n\nfunction AccordionContent({ className, children, ...props }: AccordionContentProps) {\n    return (\n        <PRAccordion.Content className={cn('bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0 text-sm h-(--accordion-content-height) transition-[height] duration-200 ease-out overflow-hidden', className)} {...props}>\n            <div className=\"px-4 pb-4\">{children}</div>\n        </PRAccordion.Content>\n    );\n}\n\nexport { Accordion, AccordionContent, AccordionPanel, AccordionTrigger };\n"
     }
   ]
 }

apps/showcase/public/r/checkbox.json

@@ -3,8 +3,7 @@
   "name": "checkbox",
   "type": "registry:ui",
   "dependencies": [
-    "@primeicons/react/check",
-    "@primeicons/react/minus",
+    "@primeicons/react@^8.0.0-alpha.7",
     "class-variance-authority"
   ],
   "registryDependencies": [
@@ -14,7 +13,7 @@
     {
       "path": "components/ui/checkbox.tsx",
       "type": "registry:ui",
-      "content": "'use client';\nimport { cn } from '@/lib/utils';\nimport { Check } from '@primeicons/react/check';\nimport { Minus } from '@primeicons/react/minus';\nimport { CheckboxRootProps } from '@primereact/types/shared/checkbox';\nimport { cva } from 'class-variance-authority';\nimport { Checkbox as PRCheckbox } from 'primereact/checkbox';\nimport * as React from 'react';\n\nconst checkboxVariants = cva(\n    `\n        relative inline-flex items-center justify-center select-none align-bottom\n        rounded-sm border border-surface-300 dark:border-surface-700\n        text-surface-700 dark:text-surface-0\n        has-[input:hover]:border-surface-400 dark:has-[input:hover]:border-surface-600\n        data-checked:border-primary data-checked:bg-primary data-checked:text-primary-contrast\n        has-[input:hover]:data-checked:bg-primary-emphasis has-[input:hover]:data-checked:border-primary-emphasis\n        has-[input:focus-visible]:outline-1 has-[input:focus-visible]:outline-offset-2 has-[input:focus-visible]:outline-primary has-[input:focus-visible]:outline\n        data-invalid:border-red-400 dark:data-invalid:border-red-300\n        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)] transition-colors duration-200\n        data-disabled:pointer-events-none data-disabled:bg-surface-200 dark:data-disabled:bg-surface-700 data-disabled:border-surface-300 dark:data-disabled:border-surface-600 data-disabled:text-surface-700 dark:data-disabled:text-surface-400\n    `,\n    {\n        variants: {\n            variant: {\n                outlined: 'bg-surface-0 dark:bg-surface-950',\n                filled: 'bg-surface-50 dark:bg-surface-800'\n            },\n            size: {\n                small: 'size-3.5 **:data-[scope=checkboxindicator]:size-2.5!',\n                normal: 'size-4.5 **:data-[scope=checkboxindicator]:size-3.5!',\n                large: 'size-5 **:data-[scope=checkboxindicator]:size-4!'\n            }\n        },\n        defaultVariants: {\n            size: 'normal',\n            variant: 'outlined'\n        }\n    }\n);\n\nfunction Checkbox({ variant = 'outlined', size = 'normal', className, ...props }: CheckboxRootProps) {\n    return (\n        <PRCheckbox.Root\n            variant={variant}\n            size={size}\n            className={cn(checkboxVariants({ size, variant, className }))}\n            inputClassName=\"peer cursor-pointer disabled:cursor-default appearance-none\n        absolute start-0 top-0 w-full h-full m-0 p-0 opacity-0 z-10\n        border border-transparent rounded-xs\"\n            {...props}\n        >\n            <PRCheckbox.Indicator className=\"data-checked:block! hidden!\" as={Check} />\n            <PRCheckbox.Indicator className=\"data-indeterminate:data-unchecked:block! hidden!\" as={Minus} />\n        </PRCheckbox.Root>\n    );\n}\n\nexport { Checkbox };\n"
+      "content": "'use client';\nimport { cn } from '@/lib/utils';\nimport { Check, Minus } from '@primeicons/react';\nimport { CheckboxRootProps } from '@primereact/types/shared/checkbox';\nimport { cva } from 'class-variance-authority';\nimport { Checkbox as PRCheckbox } from 'primereact/checkbox';\nimport * as React from 'react';\n\nconst checkboxVariants = cva(\n    `\n        relative inline-flex items-center justify-center select-none align-bottom\n        rounded-sm border border-surface-300 dark:border-surface-700\n        text-surface-700 dark:text-surface-0\n        has-[input:hover]:border-surface-400 dark:has-[input:hover]:border-surface-600\n        data-checked:border-primary data-checked:bg-primary data-checked:text-primary-contrast\n        has-[input:hover]:data-checked:bg-primary-emphasis has-[input:hover]:data-checked:border-primary-emphasis\n        has-[input:focus-visible]:outline-1 has-[input:focus-visible]:outline-offset-2 has-[input:focus-visible]:outline-primary has-[input:focus-visible]:outline\n        data-invalid:border-red-400 dark:data-invalid:border-red-300\n        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)] transition-colors duration-200\n        data-disabled:pointer-events-none data-disabled:bg-surface-200 dark:data-disabled:bg-surface-700 data-disabled:border-surface-300 dark:data-disabled:border-surface-600 data-disabled:text-surface-700 dark:data-disabled:text-surface-400\n    `,\n    {\n        variants: {\n            variant: {\n                outlined: 'bg-surface-0 dark:bg-surface-950',\n                filled: 'bg-surface-50 dark:bg-surface-800'\n            },\n            size: {\n                small: 'size-3.5 **:data-[scope=checkboxindicator]:size-2.5!',\n                normal: 'size-4.5 **:data-[scope=checkboxindicator]:size-3.5!',\n                large: 'size-5 **:data-[scope=checkboxindicator]:size-4!'\n            }\n        },\n        defaultVariants: {\n            size: 'normal',\n            variant: 'outlined'\n        }\n    }\n);\n\nfunction Checkbox({ variant = 'outlined', size = 'normal', className, ...props }: CheckboxRootProps) {\n    return (\n        <PRCheckbox.Root\n            variant={variant}\n            size={size}\n            className={cn(checkboxVariants({ size, variant, className }))}\n            inputClassName=\"peer cursor-pointer disabled:cursor-default appearance-none\n        absolute start-0 top-0 w-full h-full m-0 p-0 opacity-0 z-10\n        border border-transparent rounded-xs\"\n            {...props}\n        >\n            <PRCheckbox.Indicator className=\"data-checked:block! hidden!\" as={Check} />\n            <PRCheckbox.Indicator className=\"data-indeterminate:data-unchecked:block! hidden!\" as={Minus} />\n        </PRCheckbox.Root>\n    );\n}\n\nexport { Checkbox };\n"
     }
   ]
 }

apps/showcase/public/r/index.json

@@ -4,7 +4,8 @@
   "dependencies": [
     "primereact@11.0.0-alpha.10",
     "@primeuix/utils",
-    "@primereact/types"
+    "@primereact/types",
+    "tailwindcss-primeui"
   ],
   "registryDependencies": [
     "https://v11.primereact.org/public/r/utils.json"