fix(deps): storybook v9 (#1476)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Chores**
* Upgraded Storybook and related dependencies to the latest major
version.
  * Updated Storybook configuration and removed deprecated addons.
  * Added Storybook linting plugin to the development environment.
* Added deployment scripts and configuration for Storybook to Cloudflare
Workers.
* Introduced GitHub Actions workflow for automated Storybook deployment
to staging and production environments.
* Enhanced environment variable loading to suppress output in production
and non-development environments.

* **Refactor**
* Updated all Storybook stories to use the new Storybook package imports
and consistent single-quote formatting.
* Improved ESLint configuration formatting and included recommended
Storybook linting rules.

* **Style**
* Standardized import statements and string quotes across all Storybook
story files for consistency.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

.github/workflows/deploy-storybook.yml

@@ -0,0 +1,76 @@
+name: Deploy Storybook to Cloudflare Workers
+permissions:
+  contents: read
+  pull-requests: write
+  issues: write
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - 'unraid-ui/**'
+  pull_request:
+    paths:
+      - 'unraid-ui/**'
+  workflow_dispatch:
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    name: Deploy Storybook
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+        with:
+          run_install: false
+
+      - name: Cache APT Packages
+        uses: awalsh128/cache-apt-pkgs-action@v1.4.3
+        with:
+          packages: bash procps python3 libvirt-dev jq zstd git build-essential libvirt-daemon-system
+          version: 1.0
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build Storybook
+        run: |
+          cd unraid-ui
+          pnpm build-storybook
+
+      - name: Deploy to Cloudflare Workers (Staging)
+        id: deploy_staging
+        if: github.event_name == 'pull_request'
+        uses: cloudflare/wrangler-action@v3
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_DEPLOY_TOKEN }}
+          command: deploy --env staging
+          workingDirectory: unraid-ui
+
+      - name: Deploy to Cloudflare Workers (Production)
+        if: github.ref == 'refs/heads/main' && github.event_name == 'push'
+        uses: cloudflare/wrangler-action@v3
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_DEPLOY_TOKEN }}
+          command: deploy
+          workingDirectory: unraid-ui
+
+      - name: Comment PR with deployment URL
+        if: github.event_name == 'pull_request'
+        uses: actions/github-script@v7
+        with:
+          script: |
+            github.rest.issues.createComment({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              body: `🚀 Storybook has been deployed to staging: ${{ steps.deploy_staging.outputs['deployment-url'] }}`
+            }) 

api/src/dotenv.ts

@@ -9,6 +9,8 @@ const env =
               override: true,
           })
         : config({
+              debug: false,
+              quiet: true,
               path: '/usr/local/unraid-api/.env',
               encoding: 'utf-8',
           });

unraid-ui/.storybook/main.ts

@@ -3,20 +3,21 @@ import type { StorybookConfig } from '@storybook/vue3-vite';
 
 const config: StorybookConfig = {
   stories: ['../stories/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
+  addons: ['@storybook/addon-links', '@storybook/addon-docs'],
+
   framework: {
     name: '@storybook/vue3-vite',
     options: {
       docgen: 'vue-component-meta',
     },
   },
+
   core: {
     builder: '@storybook/builder-vite',
   },
-  docs: {
-    autodocs: 'tag',
-  },
+
   staticDirs: ['./static'],
+
   async viteFinal(config) {
     return {
       ...config,

unraid-ui/.storybook/preview.ts

@@ -1,4 +1,4 @@
-import type { Preview } from '@storybook/vue3';
+import type { Preview } from '@storybook/vue3-vite';
 import { registerAllComponents } from '../src/register';
 import '@/styles/index.css';
 
@@ -32,4 +32,4 @@ const preview: Preview = {
   ],
 };
 
-export default preview;
+export default preview;

unraid-ui/eslint.config.ts

@@ -1,3 +1,6 @@
+// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+import storybook from "eslint-plugin-storybook";
+
 import eslint from '@eslint/js';
 // @ts-expect-error No Declaration For This Plugin
 import importPlugin from 'eslint-plugin-import';
@@ -87,70 +90,61 @@ const commonGlobals = {
   CustomEvent: 'readonly',
 };
 
-export default [
-  // Base config from recommended configs
-  eslint.configs.recommended,
-  ...tseslint.configs.recommended,
-  
-  // TypeScript Files (.ts)
-  {
-    files: ['**/*.ts'],
-    languageOptions: {
+export default [// Base config from recommended configs
+eslint.configs.recommended, ...tseslint.configs.recommended, // TypeScript Files (.ts)
+{
+  files: ['**/*.ts'],
+  languageOptions: {
+    parser: tseslint.parser,
+    parserOptions: {
+      ...commonLanguageOptions,
+      ecmaFeatures: {
+        jsx: true,
+      },
+    },
+    globals: {
+      ...commonGlobals
+    },
+  },
+  plugins: {
+    'no-relative-import-paths': noRelativeImportPaths,
+    prettier: prettier,
+    import: importPlugin,
+  },
+  rules: {
+    ...commonRules,
+  },
+}, // Vue Files (.vue)
+{
+  files: ['**/*.vue'],
+  languageOptions: {
+    parser: vueEslintParser,
+    parserOptions: {
+      ...commonLanguageOptions,
       parser: tseslint.parser,
-      parserOptions: {
-        ...commonLanguageOptions,
-        ecmaFeatures: {
-          jsx: true,
-        },
-      },
-      globals: {
-        ...commonGlobals
+      ecmaFeatures: {
+        jsx: true,
       },
     },
-    plugins: {
-      'no-relative-import-paths': noRelativeImportPaths,
-      prettier: prettier,
-      import: importPlugin,
-    },
-    rules: {
-      ...commonRules,
+    globals: {
+      ...commonGlobals
     },
   },
-  
-  // Vue Files (.vue)
-  {
-    files: ['**/*.vue'],
-    languageOptions: {
-      parser: vueEslintParser,
-      parserOptions: {
-        ...commonLanguageOptions,
-        parser: tseslint.parser,
-        ecmaFeatures: {
-          jsx: true,
-        },
-      },
-      globals: {
-        ...commonGlobals
-      },
-    },
-    plugins: {
-      'no-relative-import-paths': noRelativeImportPaths,
-      prettier: prettier,
-      import: importPlugin,
-      vue: vuePlugin,
-    },
-    rules: {
-      ...commonRules,
-      ...vueRules,
-    },
+  plugins: {
+    'no-relative-import-paths': noRelativeImportPaths,
+    prettier: prettier,
+    import: importPlugin,
+    vue: vuePlugin,
   },
-  
-  // Ignores
-  {
-    ignores: [
-      'src/graphql/generated/client/**/*',
-      'src/global.d.ts',
-      'eslint.config.ts',
-    ],
+  rules: {
+    ...commonRules,
+    ...vueRules,
   },
-];
+}, // Ignores
+{
+  ignores: [
+    'src/graphql/generated/client/**/*',
+    'src/global.d.ts',
+    'eslint.config.ts',
+  ],
+}, ...storybook.configs["flat/recommended"]];

unraid-ui/package.json

@@ -38,7 +38,10 @@
     "storybook": "storybook dev -p 6006",
     "storybook:css": "node scripts/build-style.mjs",
     "prebuild-storybook": "pnpm storybook:css",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "// Cloudflare Workers Deployment": "",
+    "deploy:storybook": "pnpm build-storybook && wrangler deploy",
+    "deploy:storybook:staging": "pnpm build-storybook && wrangler deploy --env staging"
   },
   "peerDependencies": {
     "tailwindcss": "3.4.17",
@@ -57,20 +60,18 @@
     "dompurify": "3.2.6",
     "kebab-case": "2.0.2",
     "lucide-vue-next": "0.519.0",
-    "shadcn-vue": "2.2.0",
     "marked": "16.0.0",
     "reka-ui": "2.3.1",
+    "shadcn-vue": "2.2.0",
     "tailwind-merge": "2.6.0",
     "vue-sonner": "1.3.0"
   },
   "devDependencies": {
     "@ianvs/prettier-plugin-sort-imports": "4.4.2",
-    "@storybook/addon-essentials": "8.6.14",
-    "@storybook/addon-interactions": "8.6.14",
-    "@storybook/addon-links": "8.6.14",
-    "@storybook/builder-vite": "8.6.14",
-    "@storybook/vue3": "8.6.14",
-    "@storybook/vue3-vite": "8.6.14",
+    "@storybook/addon-docs": "9.0.16",
+    "@storybook/addon-links": "9.0.16",
+    "@storybook/builder-vite": "9.0.16",
+    "@storybook/vue3-vite": "9.0.16",
     "@tailwindcss/typography": "0.5.16",
     "@testing-library/vue": "8.1.0",
     "@types/jsdom": "21.1.7",
@@ -91,14 +92,16 @@
     "eslint-plugin-import": "2.31.0",
     "eslint-plugin-no-relative-import-paths": "1.6.1",
     "eslint-plugin-prettier": "5.5.0",
+    "eslint-plugin-storybook": "9.0.16",
     "eslint-plugin-vue": "10.2.0",
     "happy-dom": "18.0.0",
+    "jiti": "^2.4.2",
     "postcss": "8.5.6",
     "postcss-import": "16.1.1",
     "prettier": "3.5.3",
     "prettier-plugin-tailwindcss": "0.6.13",
     "rimraf": "6.0.1",
-    "storybook": "8.6.14",
+    "storybook": "9.0.16",
     "tailwind-rem-to-rem": "github:unraid/tailwind-rem-to-rem",
     "tailwindcss": "3.4.17",
     "tailwindcss-animate": "1.0.7",
@@ -109,7 +112,8 @@
     "vite-plugin-vue-devtools": "7.7.7",
     "vitest": "3.2.4",
     "vue": "3.5.17",
-    "vue-tsc": "3.0.1"
+    "vue-tsc": "3.0.1",
+    "wrangler": "^3.87.0"
   },
   "optionalDependencies": {
     "@rollup/rollup-linux-x64-gnu": "4.44.0"

unraid-ui/stories/components/brand/BrandButton.stories.ts

@@ -1,8 +1,8 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
-import BrandButton from "../../../src/components/brand/BrandButton.vue";
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { BrandButton } from '../../../src/components/brand/index.js';
 
 const meta = {
-  title: "Components/Brand",
+  title: 'Components/Brand',
   component: BrandButton,
 } satisfies Meta<typeof BrandButton>;
 
@@ -12,10 +12,10 @@ type Story = StoryObj<typeof meta>;
 
 export const Button: Story = {
   args: {
-    variant: "fill",
-    size: "14px",
-    padding: "default",
-    text: "Click me",
+    variant: 'fill',
+    size: '14px',
+    padding: 'default',
+    text: 'Click me',
   },
   render: (args) => ({
     components: { BrandButton },
@@ -32,4 +32,4 @@ export const Button: Story = {
       />
     `,
   }),
-}; 
+};

unraid-ui/stories/components/brand/BrandLoading.stories.ts

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import BrandLoadingCe from '../../../src/components/brand/BrandLoading.ce.vue';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { BrandLoading as BrandLoadingCe } from '../../../src/components/brand/index.js';
 
 const meta = {
   title: 'Components/Brand',

unraid-ui/stories/components/brand/BrandLogo.stories.ts

@@ -1,8 +1,8 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
-import BrandLogo from "../../../src/components/brand/BrandLogo.vue";
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { BrandLogo } from '../../../src/components/brand/index.js';
 
 const meta = {
-  title: "Components/Brand",
+  title: 'Components/Brand',
   component: BrandLogo,
   argTypes: {
     gradientStart: { control: 'color' },
@@ -33,4 +33,4 @@ export const Logo: Story = {
       </div>
     `,
   }),
-}; 
+};

unraid-ui/stories/components/brand/BrandLogoConnect.stories.ts

@@ -1,8 +1,8 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
-import BrandLogoConnect from "../../../src/components/brand/BrandLogoConnect.vue";
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { BrandLogoConnect } from '../../../src/components/brand/index.js';
 
 const meta = {
-  title: "Components/Brand",
+  title: 'Components/Brand',
   component: BrandLogoConnect,
   argTypes: {
     gradientStart: { control: 'color' },
@@ -33,4 +33,4 @@ export const LogoConnect: Story = {
       </div>
     `,
   }),
-}; 
+};

unraid-ui/stories/components/common/Accordion.stories.ts

@@ -1,6 +1,10 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { Accordion } from '../../../src/components/common/accordion';
-import { AccordionContent, AccordionItem, AccordionTrigger } from '../../../src/components/ui/accordion';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { Accordion } from '../../../src/components/common/accordion/index.js';
+import {
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '../../../src/components/ui/accordion/index.js';
 
 const meta = {
   title: 'Components/Common/Accordion',

unraid-ui/stories/components/common/Badge.stories.ts

@@ -1,8 +1,8 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
-import BadgeComponent from "../../../src/components/common/badge/Badge.vue";
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { Badge as BadgeComponent } from '../../../src/components/common/badge/index.js';
 
 const meta = {
-  title: "Components/Common",
+  title: 'Components/Common',
   component: BadgeComponent,
 } satisfies Meta<typeof BadgeComponent>;
 
@@ -12,10 +12,10 @@ type Story = StoryObj<typeof meta>;
 
 export const Badge: Story = {
   args: {
-    variant: "gray",
-    size: "md",
-    default: "Badge",
-    class: ""
+    variant: 'gray',
+    size: 'md',
+    default: 'Badge',
+    class: '',
   },
   render: (args) => ({
     components: { BadgeComponent },
@@ -32,4 +32,4 @@ export const Badge: Story = {
       </BadgeComponent>
     `,
   }),
-}; 
+};

unraid-ui/stories/components/common/Button.stories.ts

@@ -1,8 +1,8 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
-import ButtonComponent from "../../../src/components/common/button/Button.vue";
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { Button as ButtonComponent } from '../../../src/components/common/button/index.js';
 
 const meta = {
-  title: "Components/Common",
+  title: 'Components/Common',
   component: ButtonComponent,
 } satisfies Meta<typeof ButtonComponent>;
 
@@ -12,9 +12,9 @@ type Story = StoryObj<typeof meta>;
 
 export const Button: Story = {
   args: {
-    variant: "primary",
-    size: "md",
-    default: "Click me",
+    variant: 'primary',
+    size: 'md',
+    default: 'Click me',
   },
   render: (args) => ({
     components: { ButtonComponent },

unraid-ui/stories/components/common/Dialog.stories.ts

@@ -1,7 +1,7 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
 import { ref } from 'vue';
-import Button from '../../../src/components/common/button/Button.vue';
-import DialogComponent from '../../../src/components/common/dialog/Dialog.vue';
+import { Button } from '../../../src/components/common/button/index.js';
+import { Dialog as DialogComponent } from '../../../src/components/common/dialog/index.js';
 
 const meta = {
   title: 'Components/Common/Dialog',

unraid-ui/stories/components/common/DropdownMenu.stories.ts

@@ -1,5 +1,5 @@
-import { DropdownMenu } from '@/components/common/dropdown-menu';
-import type { Meta, StoryObj } from '@storybook/vue3';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { DropdownMenu } from '../../../src/components/common/dropdown-menu/index.js';
 
 const meta = {
   title: 'Components/Common/DropdownMenu',

unraid-ui/stories/components/common/Loading.stories.ts

@@ -1,7 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import Bar from '../../../src/components/common/loading/Bar.vue';
-import Error from '../../../src/components/common/loading/Error.vue';
-import Spinner from '../../../src/components/common/loading/Spinner.vue';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { Bar, Error, Spinner } from '../../../src/components/common/loading/index.js';
 
 const meta = {
   title: 'Components/Common/Loading',

unraid-ui/stories/components/common/Popover.stories.ts

@@ -1,6 +1,10 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { Button } from '../../../src/components/common/button';
-import { Popover, PopoverContent, PopoverTrigger } from '../../../src/components/common/popover';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { Button } from '../../../src/components/common/button/index.js';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '../../../src/components/common/popover/index.js';
 
 const meta = {
   title: 'Components/Common/Popover',

unraid-ui/stories/components/common/ScrollArea.stories.ts

@@ -1,9 +1,8 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
-import ScrollArea from "../../../src/components/common/scroll-area/ScrollArea.vue";
-import ScrollBar from "../../../src/components/common/scroll-area/ScrollBar.vue";
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { ScrollArea, ScrollBar } from '../../../src/components/common/scroll-area/index.js';
 
 const meta = {
-  title: "Components/Common/ScrollArea",
+  title: 'Components/Common/ScrollArea',
   component: ScrollArea,
   subcomponents: { ScrollBar },
 } satisfies Meta<typeof ScrollArea>;
@@ -14,16 +13,18 @@ type Story = StoryObj<typeof meta>;
 
 export const Vertical: Story = {
   args: {
-    class: "rounded-md border",
+    class: 'rounded-md border',
     style: {
-      height: "200px",
-      width: "350px",
+      height: '200px',
+      width: '350px',
     },
   },
   render: (args) => ({
     components: { ScrollArea, ScrollBar },
     setup() {
-      const items = Array(30).fill(0).map((_, i) => `Content ${i + 1}`);
+      const items = Array(30)
+        .fill(0)
+        .map((_, i) => `Content ${i + 1}`);
       return { args, items };
     },
     template: `
@@ -43,10 +44,10 @@ export const Vertical: Story = {
 
 export const Horizontal: Story = {
   args: {
-    class: "rounded-md border",
+    class: 'rounded-md border',
     style: {
-      height: "80px",
-      width: "350px",
+      height: '80px',
+      width: '350px',
     },
   },
   render: (args) => ({
@@ -60,7 +61,7 @@ export const Horizontal: Story = {
           ${Array(50)
             .fill(0)
             .map((_, i) => `<div class="flex-shrink-0 mr-2">Content ${i + 1}</div>`)
-            .join("")}
+            .join('')}
         </div>
         <ScrollBar orientation="horizontal" />
       </ScrollArea>

unraid-ui/stories/components/common/Sheet.stories.ts

@@ -1,13 +1,15 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import Button from '../../../src/components/common/button/Button.vue';
-import SheetComponent from '../../../src/components/common/sheet/Sheet.vue';
-import SheetContent from '../../../src/components/common/sheet/SheetContent.vue';
-import SheetDescription from '../../../src/components/common/sheet/SheetDescription.vue';
-import SheetFooter from '../../../src/components/common/sheet/SheetFooter.vue';
-import SheetHeader from '../../../src/components/common/sheet/SheetHeader.vue';
-import SheetTitle from '../../../src/components/common/sheet/SheetTitle.vue';
-import SheetTrigger from '../../../src/components/common/sheet/SheetTrigger.vue';
-import { Select } from '../../../src/components/form/select';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { Button } from '../../../src/components/common/button/index.js';
+import {
+  Sheet as SheetComponent,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '../../../src/components/common/sheet/index.js';
+import { Select } from '../../../src/components/form/select/index.js';
 
 const meta = {
   title: 'Components/Common',

unraid-ui/stories/components/common/Stepper.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
 import {
   Stepper as StepperComponent,
   StepperDescription,
@@ -7,7 +7,7 @@ import {
   StepperSeparator,
   StepperTitle,
   StepperTrigger,
-} from '../../../src/components/common/stepper';
+} from '../../../src/components/common/stepper/index.js';
 
 const meta = {
   title: 'Components/Common',

unraid-ui/stories/components/common/Tabs.stories.ts

@@ -1,8 +1,13 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
-import { Tabs as TabsComponent, TabsList, TabsTrigger, TabsContent } from "../../../src/components/common/tabs";
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import {
+  Tabs as TabsComponent,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '../../../src/components/common/tabs/index.js';
 
 const meta = {
-  title: "Components/Common",
+  title: 'Components/Common',
   component: TabsComponent,
 } satisfies Meta<typeof TabsComponent>;
 
@@ -12,7 +17,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Tabs: Story = {
   args: {
-    defaultValue: "tab1",
+    defaultValue: 'tab1',
   },
   render: (args) => ({
     components: { TabsComponent, TabsList, TabsTrigger, TabsContent },

unraid-ui/stories/components/common/Tooltip.stories.ts

@@ -1,11 +1,11 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { Button } from '../../../src/components/common/button';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { Button } from '../../../src/components/common/button/index.js';
 import {
   Tooltip as TooltipComponent,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from '../../../src/components/common/tooltip';
+} from '../../../src/components/common/tooltip/index.js';
 
 const meta = {
   title: 'Components/Common',

unraid-ui/stories/components/form/Combobox.stories.ts

@@ -1,14 +1,14 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
 import {
-  Combobox as ComboboxComponent,
   ComboboxAnchor,
+  Combobox as ComboboxComponent,
   ComboboxEmpty,
   ComboboxGroup,
   ComboboxInput,
   ComboboxItem,
   ComboboxList,
   ComboboxTrigger,
-} from '../../../src/components/form/combobox';
+} from '../../../src/components/form/combobox/index.js';
 
 const meta = {
   title: 'Components/Form/Combobox',
@@ -90,4 +90,4 @@ export const Grouped: Story = {
       </div>
     `,
   }),
-}; 
+};

unraid-ui/stories/components/form/Input.stories.ts

@@ -1,8 +1,8 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
-import { Input as InputComponent } from "../../../src/components/form/input";
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { Input as InputComponent } from '../../../src/components/form/input/index.js';
 
 const meta = {
-  title: "Components/Form/Input",
+  title: 'Components/Form/Input',
   component: InputComponent,
 } satisfies Meta<typeof InputComponent>;
 
@@ -21,4 +21,3 @@ export const Input: Story = {
     `,
   }),
 };
- 

unraid-ui/stories/components/form/Label.stories.ts

@@ -1,8 +1,8 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
-import { Label as LabelComponent } from "../../../src/components/form/label";
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { Label as LabelComponent } from '../../../src/components/form/label/index.js';
 
 const meta = {
-  title: "Components/Form",
+  title: 'Components/Form',
   component: LabelComponent,
 } satisfies Meta<typeof LabelComponent>;
 

unraid-ui/stories/components/form/Lightswitch.stories.ts

@@ -1,8 +1,8 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
-import { Lightswitch as LightswitchComponent } from "../../../src/components/form/lightswitch";
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { Lightswitch as LightswitchComponent } from '../../../src/components/form/lightswitch/index.js';
 
 const meta = {
-  title: "Components/Form/Lightswitch",
+  title: 'Components/Form/Lightswitch',
   component: LightswitchComponent,
 } satisfies Meta<typeof LightswitchComponent>;
 
@@ -12,7 +12,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Lightswitch: Story = {
   args: {
-    label: "Enable notifications",
+    label: 'Enable notifications',
   },
   render: (args) => ({
     components: { LightswitchComponent },

unraid-ui/stories/components/form/Select.stories.ts

@@ -1,6 +1,6 @@
-import { Select } from '@/components/form/select';
-import type { Meta, StoryObj } from '@storybook/vue3';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
 import { ref } from 'vue';
+import { Select } from '../../../src/components/form/select/index.js';
 
 const meta = {
   title: 'Components/Form/Select',

unraid-ui/stories/components/form/Switch.stories.ts

@@ -1,9 +1,9 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
-import { Switch as SwitchComponent } from "../../../src/components/form/switch";
-import { Label } from "../../../src/components/form/label";
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { Label } from '../../../src/components/form/label/index.js';
+import { Switch as SwitchComponent } from '../../../src/components/form/switch/index.js';
 
 const meta = {
-  title: "Components/Form",
+  title: 'Components/Form',
   component: SwitchComponent,
 } satisfies Meta<typeof SwitchComponent>;
 

unraid-ui/stories/components/layout/CardWrapper.stories.ts

@@ -1,8 +1,8 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
-import { CardWrapper as CardWrapperComponent } from "../../../src/components/layout";
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { CardWrapper as CardWrapperComponent } from '../../../src/components/layout/index.js';
 
 const meta = {
-  title: "Components/Layout/CardWrapper",
+  title: 'Components/Layout/CardWrapper',
   component: CardWrapperComponent,
 } satisfies Meta<typeof CardWrapperComponent>;
 
@@ -59,4 +59,4 @@ export const Warning: Story = {
       </CardWrapperComponent>
     `,
   }),
-}; 
+};

unraid-ui/stories/components/layout/PageContainer.stories.ts

@@ -1,9 +1,11 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
-import { PageContainer as PageContainerComponent } from "../../../src/components/layout";
-import { CardWrapper } from "../../../src/components/layout";
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import {
+  CardWrapper,
+  PageContainer as PageContainerComponent,
+} from '../../../src/components/layout/index.js';
 
 const meta = {
-  title: "Components/Layout/PageContainer",
+  title: 'Components/Layout/PageContainer',
   component: PageContainerComponent,
 } satisfies Meta<typeof PageContainerComponent>;
 
@@ -54,4 +56,4 @@ export const CustomMaxWidth: Story = {
       </div>
     `,
   }),
-}; 
+};

unraid-ui/wrangler.toml

@@ -0,0 +1,25 @@
+name = "unraid-ui-storybook"
+compatibility_date = "2024-12-30"
+compatibility_flags = ["nodejs_compat"]
+
+[env.production]
+name = "unraid-ui-storybook"
+
+[env.staging]
+name = "unraid-ui-storybook-staging"
+
+# Static Assets configuration for Storybook
+[assets]
+directory = "./storybook-static"
+
+# Custom domain configuration (update with your domain)
+# routes = [
+#   { pattern = "storybook.yourdomain.com", custom_domain = true }
+# ]
+
+# Environment variables (if needed)
+[vars]
+ENVIRONMENT = "production"
+
+[env.staging.vars]
+ENVIRONMENT = "staging"