feature(storybook): Storybook usability upgrades [C9S-140] (#2482)

.storybook/main.ts

@@ -1,15 +1,21 @@
-import path from 'path';
+// This file has been automatically migrated to valid ESM format by Storybook.
+import { fileURLToPath } from 'node:url';
+import { createRequire } from 'node:module';
+import path, { dirname } from 'path';
 
 import { StorybookConfig } from '@storybook/react-webpack5';
 
 import { Configuration } from 'webpack';
 import postcss from 'postcss';
 
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const require = createRequire(import.meta.url);
+
 const config: StorybookConfig = {
   stories: ['../app/**/*.stories.@(ts|tsx)'],
   addons: [
     '@storybook/addon-links',
-    '@storybook/addon-essentials',
     '@storybook/addon-webpack5-compiler-swc',
     '@chromatic-com/storybook',
     {
@@ -44,6 +50,7 @@ const config: StorybookConfig = {
         ],
       },
     },
+    '@storybook/addon-docs',
   ],
   webpackFinal: (config) => {
     const rules = config?.module?.rules || [];
@@ -96,12 +103,7 @@ const config: StorybookConfig = {
   },
   staticDirs: ['./public'],
   typescript: {
-    reactDocgen: 'react-docgen-typescript',
+    reactDocgen: 'react-docgen',
-    reactDocgenTypescriptOptions: {
-      compilerOptions: {
-        outDir: path.resolve(__dirname, '..', 'dist/public'),
-      },
-    },
   },
   framework: {
     name: '@storybook/react-webpack5',

.storybook/preview.tsx

@@ -1,9 +1,10 @@
+import { useEffect } from 'react';
 import '../app/assets/css';
 import { pushStateLocationPlugin, UIRouter } from '@uirouter/react';
 import { initialize as initMSW, mswLoader } from 'msw-storybook-addon';
 import { handlers } from '../app/setup-tests/server-handlers';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { Preview } from '@storybook/react';
+import { Preview } from '@storybook/react-webpack5';
 
 initMSW(
   {
@@ -26,13 +27,43 @@ const testQueryClient = new QueryClient({
 });
 
 const preview: Preview = {
-  decorators: (Story) => (
+  globalTypes: {
-    <QueryClientProvider client={testQueryClient}>
+    theme: {
-      <UIRouter plugins={[pushStateLocationPlugin]}>
+      description: 'Portainer color theme',
-        <Story />
+      toolbar: {
-      </UIRouter>
+        title: 'Theme',
-    </QueryClientProvider>
+        icon: 'paintbrush',
-  ),
+        items: [
+          { value: 'light', title: 'Light', icon: 'sun' },
+          { value: 'dark', title: 'Dark', icon: 'moon' },
+          { value: 'highcontrast', title: 'High Contrast', icon: 'eye' },
+        ],
+        dynamicTitle: true,
+      },
+    },
+  },
+  initialGlobals: {
+    theme: 'light',
+  },
+  decorators: (Story, context) => {
+    const theme = context.globals.theme;
+
+    useEffect(() => {
+      if (theme === 'light') {
+        document.documentElement.removeAttribute('theme');
+      } else {
+        document.documentElement.setAttribute('theme', theme);
+      }
+    }, [theme]);
+
+    return (
+      <QueryClientProvider client={testQueryClient}>
+        <UIRouter plugins={[pushStateLocationPlugin]}>
+          <Story />
+        </UIRouter>
+      </QueryClientProvider>
+    );
+  },
   loaders: [mswLoader],
   parameters: {
     options: {

.storybook/public/mockServiceWorker.js

@@ -1,8 +1,6 @@
 /* eslint-disable */
 /* tslint:disable */
 
-import { v4 as uuidv4 } from 'uuid';
-
 /**
  * Mock Service Worker.
  * @see https://github.com/mswjs/msw
@@ -111,7 +109,7 @@ addEventListener('fetch', function (event) {
     return;
   }
 
-  const requestId = uuidv4();
+  const requestId = crypto.randomUUID();
   event.respondWith(handleRequest(event, requestId, requestInterceptedAt));
 });
 

app/react/components/Alert/Alert.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react-webpack5';
 
 import { Alert } from './Alert';
 

app/react/components/BEFeatureIndicator/BEFeatureIndicator.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-webpack5';
 
 import { Edition, FeatureId } from '@/react/portainer/feature-flags/enums';
 import { init as initFeatureService } from '@/react/portainer/feature-flags/feature-flags.service';

app/react/components/Badge/Badge.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-webpack5';
 
 import { Badge, BadgeType, Props } from './Badge';
 

app/react/components/BadgeIcon/BadgeIcon.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-webpack5';
 
 import { BadgeIcon, BadgeSize, Props } from './BadgeIcon';
 

app/react/components/Blocklist/BlocklistItem.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import { localizeDate } from '@/react/common/date-utils';
 

app/react/components/BoxSelector/BoxSelector.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-webpack5';
 import { useState } from 'react';
 import { Anchor, Briefcase } from 'lucide-react';
 
@@ -10,7 +10,7 @@ import { BoxSelector } from './BoxSelector';
 import { BoxSelectorOption } from './types';
 
 const meta: Meta = {
-  title: 'BoxSelector',
+  title: 'Components/BoxSelector',
   component: BoxSelector,
 };
 

app/react/components/BoxSelector/BoxSelectorItem.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-webpack5';
 import { ReactNode } from 'react';
 import { Briefcase } from 'lucide-react';
 
@@ -12,7 +12,7 @@ import { BoxSelectorItem } from './BoxSelectorItem';
 import { BoxSelectorOption } from './types';
 
 const meta: Meta = {
-  title: 'BoxSelector/Item',
+  title: 'Components/BoxSelector/Item',
   args: {
     selected: false,
     description: 'description',

app/react/components/Card/Card.stories.tsx

@@ -1,11 +1,11 @@
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react-webpack5';
 import { PropsWithChildren } from 'react';
 
 import { Card, Props } from './Card';
 
 export default {
   component: Card,
-  title: 'Components/Card/Card',
+  title: 'Components/Card',
 } as Meta;
 
 function Template({

app/react/components/Code/Code.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react-webpack5';
 
 import { Code } from './Code';
 

app/react/components/DashboardItem/DashboardItem.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react-webpack5';
 import { List } from 'lucide-react';
 
 import { Link } from '@@/Link';

app/react/components/DetailsTable/DetailsTable.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react-webpack5';
 
 import { DetailsTable } from './DetailsTable';
 import { DetailsRow } from './DetailsRow';

app/react/components/DropdownMenu/DropdownMenu.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-webpack5';
 import { useState } from 'react';
 import { Server, Cloud } from 'lucide-react';
 

app/react/components/ExpandableMessageByLines.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import { ExpandableMessageByLines } from './ExpandableMessageByLines';
 

app/react/components/GroupSortTable/GroupSortTableHeader.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-webpack5';
 import { useState } from 'react';
 import { Server, Cloud } from 'lucide-react';
 

app/react/components/HeaderLayout/HeaderLayout.stories.tsx

@@ -1,10 +1,10 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Layers, AlertCircle, Database } from 'lucide-react';
 
 import { HeaderLayout } from './HeaderLayout';
 
 const meta: Meta<typeof HeaderLayout> = {
-  title: 'Design System/HeaderLayout',
+  title: 'Components/HeaderLayout',
   component: HeaderLayout,
   tags: ['autodocs'],
 };

app/react/components/InlineLoader/InlineLoader.stories.tsx

@@ -1,4 +1,4 @@
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react-webpack5';
 import { PropsWithChildren } from 'react';
 
 import { InlineLoader, Props } from './InlineLoader';

app/react/components/InsightsBox/InsightsBox.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react-webpack5';
 
 import { InsightsBox, Props } from './InsightsBox';
 

app/react/components/NavTabs/NavTabs.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react-webpack5';
 import { useState } from 'react';
 
 import { NavTabs, type Option } from './NavTabs';

app/react/components/PageHeader/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-webpack5';
 import { UIRouter, pushStateLocationPlugin } from '@uirouter/react';
 
 import { Breadcrumbs } from './Breadcrumbs';

app/react/components/PageHeader/HeaderContainer.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react-webpack5';
 import { useMemo } from 'react';
 
 import { UserContext } from '@/react/hooks/useUser';

app/react/components/PageHeader/PageHeader.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react-webpack5';
 import { useMemo } from 'react';
 
 import { UserContext } from '@/react/hooks/useUser';

app/react/components/PageHeader/PageTitle.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react-webpack5';
 
 import { PageTitle } from './PageTitle';
 

app/react/components/SortableList/SortableList.stories.tsx

@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-webpack5';
 
 import { DropdownOption } from '../DropdownMenu/DropdownMenu';
 

app/react/components/StatusBadge.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Check } from 'lucide-react';
 
 import { StatusBadge } from './StatusBadge';

app/react/components/StatusSummaryBar/FilterBarActiveIndicator.stories.tsx

@@ -0,0 +1,51 @@
+import { useState } from 'react';
+import { Meta } from '@storybook/react-webpack5';
+
+import { FilterBarActiveIndicator } from './FilterBarActiveIndicator';
+
+export default {
+  component: FilterBarActiveIndicator,
+  title: 'Design System/StatusSummaryBar/FilterBarActiveIndicator',
+} as Meta;
+
+export function Example() {
+  const [activeFilter, setActiveFilter] = useState<string | null>('Running');
+
+  if (!activeFilter) {
+    return (
+      <div className="flex flex-col gap-3">
+        <p className="text-sm text-[var(--text-muted-color)]">
+          Filter cleared. Pick one to bring the indicator back.
+        </p>
+        <div className="flex gap-2">
+          {['Running', 'Stopped', 'Outdated'].map((label) => (
+            <button
+              key={label}
+              type="button"
+              className="rounded-md border border-solid border-gray-4 bg-transparent px-3 py-1 text-sm"
+              onClick={() => setActiveFilter(label)}
+            >
+              {label}
+            </button>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <FilterBarActiveIndicator
+      label={activeFilter}
+      onClear={() => setActiveFilter(null)}
+    />
+  );
+}
+
+export function LongLabel() {
+  return (
+    <FilterBarActiveIndicator
+      label="Outdated agents in production environments"
+      onClear={() => {}}
+    />
+  );
+}

app/react/components/StatusSummaryBar/FilterBarButton.stories.tsx

@@ -0,0 +1,44 @@
+import { useState } from 'react';
+import { Meta } from '@storybook/react-webpack5';
+
+import { FilterBarButton, Color } from './FilterBarButton';
+
+export default {
+  component: FilterBarButton,
+  title: 'Design System/StatusSummaryBar/FilterBarButton',
+} as Meta;
+
+export function Example() {
+  const [selected, setSelected] = useState('');
+
+  const buttons: Array<{
+    label: string;
+    count: number;
+    color?: Color;
+  }> = [
+    { label: 'Total', count: 18 },
+    { label: 'Running', count: 12, color: 'success' },
+    { label: 'Stopped', count: 4, color: 'error' },
+    { label: 'Outdated', count: 2, color: 'warning' },
+    { label: 'Hidden', count: 0, color: 'gray' },
+  ];
+
+  return (
+    <div className="flex items-center gap-1">
+      {buttons.map((btn) => (
+        <FilterBarButton
+          key={btn.label}
+          name="status-filter"
+          label={btn.label}
+          count={btn.count}
+          color={btn.color}
+          isSelected={selected === btn.label}
+          onClick={() =>
+            setSelected((prev) => (prev === btn.label ? '' : btn.label))
+          }
+          data-cy={`filter-${btn.label.toLowerCase()}`}
+        />
+      ))}
+    </div>
+  );
+}

app/react/components/StatusSummaryBar/StatusSummaryBar.stories.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-webpack5';
 
 import { StatusSummaryBar, StatusSegment } from './StatusSummaryBar';
 

app/react/components/Stepper/Stepper.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { useState } from 'react';
 
 import { Button } from '@@/buttons';

app/react/components/StickyFooter/StickyFooter.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import { Button } from '@@/buttons';
 

app/react/components/TagSelector/TagSelector.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-webpack5';
 import { useState } from 'react';
 
 import { TagId } from '@/portainer/tags/types';

app/react/components/TeamsSelector/TeamsSelector.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-webpack5';
 import { useState } from 'react';
 
 import { TeamsSelector } from './TeamsSelector';

app/react/components/Terminal/Terminal.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-webpack5';
 import { ws } from 'msw';
 import { useState } from 'react';
 

app/react/components/Tip/TextTip/TextTip.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react-webpack5';
 import { PropsWithChildren } from 'react';
 
 import { TextTip } from './TextTip';

app/react/components/Tip/Tooltip/Tooltip.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react-webpack5';
 
 import { Tooltip, Props } from './Tooltip';
 

app/react/components/UsersSelector/UsersSelector.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-webpack5';
 import { useState } from 'react';
 
 import { UsersSelector } from './UsersSelector';

app/react/components/ViewLoading/ViewLoading.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react-webpack5';
 
 import { ViewLoading } from './ViewLoading';
 

app/react/components/Widget/Widget.stories.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import type { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react-webpack5';
 import { User } from 'lucide-react';
 
 import { Widget } from './Widget';

app/react/components/Widget/WidgetTabs.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react-webpack5';
 import { Box, Settings, Users } from 'lucide-react';
 import {
   ReactStateDeclaration,

app/react/components/buttons/AddButton.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react-webpack5';
 
 import { AddButton } from './AddButton';
 

app/react/components/buttons/Button.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react-webpack5';
 import { PropsWithChildren } from 'react';
 import { Download } from 'lucide-react';
 

app/react/components/buttons/ButtonGroup.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react-webpack5';
 import { PropsWithChildren } from 'react';
 import { Play, RefreshCw, Square, Trash2 } from 'lucide-react';
 

app/react/components/buttons/CopyButton/CopyButton.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react-webpack5';
 import { PropsWithChildren } from 'react';
 
 import { CopyButton, Props } from './CopyButton';

app/react/components/buttons/LoadingButton.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-webpack5';
 import { Download } from 'lucide-react';
 
 import { LoadingButton } from './LoadingButton';

app/react/components/buttons/MenuButton.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { PropsWithChildren } from 'react';
 import { Plus, Edit, Download, Settings } from 'lucide-react';
 

app/react/components/datatables/Datatable.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react-webpack5';
 import { Clock } from 'lucide-react';
 import { createColumnHelper, TableOptions } from '@tanstack/react-table';
 

app/react/components/datatables/editable/EditableDatatable.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react-webpack5';
 import { Clock } from 'lucide-react';
 import { createColumnHelper, TableOptions } from '@tanstack/react-table';
 

app/react/components/form-components/ButtonSelector/ButtonSelector.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-webpack5';
 import { useState } from 'react';
 
 import { ButtonSelector, Option } from './ButtonSelector';

app/react/components/form-components/ColorPicker/ColorPicker.stories.tsx

@@ -1,11 +1,11 @@
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-webpack5';
 import { useState } from 'react';
 
 import { ColorPicker } from './ColorPicker';
 
 export default {
   component: ColorPicker,
-  title: 'Components/Form/ColorPicker',
+  title: 'Components/Forms/ColorPicker',
 } as Meta;
 
 export function Default() {

app/react/components/form-components/FileUpload/FileUploadField.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-webpack5';
 import { useState } from 'react';
 
 import { FileUploadField } from './FileUploadField';

app/react/components/form-components/FileUpload/FileUploadForm.stories.tsx

@@ -1,11 +1,11 @@
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-webpack5';
 import { useState } from 'react';
 
 import { FileUploadForm } from './FileUploadForm';
 
 export default {
   component: FileUploadForm,
-  title: 'Components/Form/FileUploadForm',
+  title: 'Components/Forms/FileUploadForm',
 } as Meta;
 
 interface Args {

app/react/components/form-components/FormControl/FormControl.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-webpack5';
 import { useState } from 'react';
 
 import { Input, Select } from '../Input';
@@ -6,7 +6,7 @@ import { Input, Select } from '../Input';
 import { FormControl } from './FormControl';
 
 export default {
-  title: 'Components/Form/Control',
+  title: 'Components/Forms/Control',
 } as Meta;
 
 interface TextFieldProps {

app/react/components/form-components/FormSection/FormSection.stories.tsx

@@ -1,10 +1,10 @@
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react-webpack5';
 
 import { FormSection } from './FormSection';
 
 export default {
   component: FormSection,
-  title: 'Components/Form/FormSection',
+  title: 'Components/Forms/FormSection',
 } as Meta;
 
 interface Args {

app/react/components/form-components/FormSectionTitle/FormSectionTitle.stories.tsx

@@ -1,11 +1,11 @@
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react-webpack5';
 import { PropsWithChildren } from 'react';
 
 import { FormSectionTitle } from './FormSectionTitle';
 
 export default {
   component: FormSectionTitle,
-  title: 'Components/Form/FormSectionTitle',
+  title: 'Components/Forms/FormSectionTitle',
 } as Meta;
 
 function Template({

app/react/components/form-components/Input/Input.stories.tsx

@@ -1,10 +1,10 @@
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react-webpack5';
 import { useState } from 'react';
 
 import { Input } from './Input';
 
 export default {
-  title: 'Components/Form/Input',
+  title: 'Components/Forms/Input',
   args: {
     disabled: false,
   },

app/react/components/form-components/Input/InputLabeled.stories.tsx

@@ -1,11 +1,11 @@
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-webpack5';
 import { useState } from 'react';
 
 import { InputLabeled } from './InputLabeled';
 
 export default {
   component: InputLabeled,
-  title: 'Components/Form/InputLabeled',
+  title: 'Components/Forms/InputLabeled',
 } as Meta;
 
 export { TextInput, NumberInput };

app/react/components/form-components/Input/Select.stories.tsx

@@ -1,10 +1,10 @@
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react-webpack5';
 import { useState } from 'react';
 
 import { Select } from './Select';
 
 export default {
-  title: 'Components/Form/Select',
+  title: 'Components/Forms/Select',
   args: {
     disabled: false,
   },

app/react/components/form-components/InputGroup/InputGroup.stories.tsx

@@ -1,11 +1,11 @@
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-webpack5';
 import { useState } from 'react';
 
 import { InputGroup } from '.';
 
 export default {
   component: InputGroup,
-  title: 'Components/Form/InputGroup',
+  title: 'Components/Forms/InputGroup',
 } as Meta;
 
 export { BasicExample, Addons, Sizing };

app/react/components/form-components/InputList/InputList.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-webpack5';
 import { useState } from 'react';
 
 import { Input, Select } from '../Input';
@@ -7,7 +7,7 @@ import { InputList } from './InputList';
 import { DefaultType } from './types';
 
 const meta: Meta = {
-  title: 'Components/Form/InputList',
+  title: 'Components/Forms/InputList',
   component: InputList,
 };
 

app/react/components/form-components/Slider/Slider.stories.tsx

@@ -1,11 +1,11 @@
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react-webpack5';
 import { useEffect, useState } from 'react';
 
 import { Slider, Props } from './Slider';
 
 export default {
   component: Slider,
-  title: 'Components/Form/Slider',
+  title: 'Components/Forms/Slider',
 } as Meta;
 
 function Template({

app/react/components/form-components/SwitchField/Switch.stories.tsx

@@ -1,10 +1,10 @@
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react-webpack5';
 import { useState } from 'react';
 
 import { Switch } from './Switch';
 
 export default {
-  title: 'Components/Form/SwitchField/Switch',
+  title: 'Components/Forms/SwitchField/Switch',
 } as Meta;
 
 export function Example() {

app/react/components/form-components/SwitchField/SwitchField.stories.tsx

@@ -1,10 +1,10 @@
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react-webpack5';
 import { useState } from 'react';
 
 import { SwitchField } from './SwitchField';
 
 export default {
-  title: 'Components/Form/SwitchField',
+  title: 'Components/Forms/SwitchField',
 } as Meta;
 
 export function Example() {

app/react/docker/services/ItemView/ServiceWidget.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import { withUserProvider } from '@/react/test-utils/withUserProvider';
 
@@ -7,6 +7,7 @@ import { ServiceWidget } from './ServiceWidget';
 const Wrapped = withUserProvider(ServiceWidget);
 
 const meta: Meta<typeof ServiceWidget> = {
+  title: 'Components/Services/ServiceWidget',
   component: ServiceWidget,
   render: (args) => <Wrapped {...args} />,
   args: {

app/react/edge/edge-stacks/ListView/EdgeStacksDatatable/DeploymentCounter.stories.tsx

@@ -1,11 +1,11 @@
-import { StoryObj, Meta } from '@storybook/react';
+import { StoryObj, Meta } from '@storybook/react-webpack5';
 
 import { StatusType } from '../../types';
 
 import { DeploymentCounter } from './DeploymentCounter';
 
 const meta: Meta<typeof DeploymentCounter> = {
-  title: 'Edge/DeploymentCounter',
+  title: 'Components/Edge/DeploymentCounter',
   component: DeploymentCounter,
 };
 export default meta;

app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EnvironmentItem.stories.tsx

@@ -1,4 +1,4 @@
-import { StoryFn } from '@storybook/react';
+import { StoryFn } from '@storybook/react-webpack5';
 
 import {
   Environment,
@@ -11,7 +11,7 @@ import { EnvironmentItem } from './EnvironmentItem';
 
 export default {
   component: EnvironmentItem,
-  title: 'Home/EnvironmentList/EnvironmentItem',
+  title: 'Components/Home/EnvironmentList/EnvironmentItem',
 };
 
 interface Args {

app/react/portainer/access-control/AccessControlForm/AccessControlForm.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react-webpack5';
 import { useState } from 'react';
 
 import { UserViewModel } from '@/portainer/models/user';

app/react/portainer/custom-templates/components/CustomTemplatesVariablesDefinitionField/CustomTemplatesVariablesDefinitionField.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-webpack5';
 import { useState } from 'react';
 
 import {
@@ -7,7 +7,7 @@ import {
 } from './CustomTemplatesVariablesDefinitionField';
 
 export default {
-  title: 'Custom Templates/Variables Definition Field',
+  title: 'Components/Custom Templates/Variables Definition Field',
   component: CustomTemplatesVariablesDefinitionField,
   args: {},
 } as Meta<typeof CustomTemplatesVariablesDefinitionField>;

app/react/portainer/custom-templates/components/CustomTemplatesVariablesField/CustomTemplatesVariablesField.stories.tsx

@@ -8,7 +8,7 @@ import {
 } from './CustomTemplatesVariablesField';
 
 export default {
-  title: 'Custom Templates/Variables Field',
+  title: 'Components/Custom Templates/Variables Field',
   component: CustomTemplatesVariablesField,
 };
 

app/react/portainer/gitops/GitForm.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-webpack5';
 import { Form, Formik } from 'formik';
 import { http, HttpResponse } from 'msw';
 
@@ -10,7 +10,7 @@ import { DeployMethod, GitFormModel } from './types';
 
 export default {
   component: GitForm,
-  title: 'Forms/GitForm',
+  title: 'Components/Forms/GitForm',
   parameters: {
     msw: {
       handlers: [

app/react/portainer/registries/CreateView/RegistryFormDockerhub/RegistryFormDockerhub.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import { withTestQueryProvider } from '@/react/test-utils/withTestQuery';
 
@@ -9,7 +9,7 @@ import {
 
 const meta: Meta<typeof RegistryFormDockerhub> = {
   component: withTestQueryProvider(RegistryFormDockerhub),
-  title: 'Components/Form/RegistryFormDockerhub',
+  title: 'Components/Forms/RegistryFormDockerhub',
   argTypes: {
     isLoading: { control: 'boolean' },
     submitLabel: { control: 'text' },

app/react/portainer/users/teams/ItemView/TeamAssociationSelector/TeamAssociationSelector.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-webpack5';
 import { useMemo, useState } from 'react';
 
 import { createMockUsers } from '@/react-tools/test-mocks';
@@ -11,7 +11,7 @@ import { TeamMembership, TeamRole } from '../../types';
 import { TeamAssociationSelector } from './TeamAssociationSelector';
 
 const meta: Meta = {
-  title: 'teams/TeamAssociationSelector',
+  title: 'Components/Teams/TeamAssociationSelector',
   component: TeamAssociationSelector,
 };
 

app/react/portainer/users/teams/ItemView/TeamAssociationSelector/TeamMembersList/TeamMembersList.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-webpack5';
 import { useMemo, useState } from 'react';
 
 import { UserContext } from '@/react/hooks/useUser';
@@ -10,7 +10,7 @@ import { TeamRole } from '@/react/portainer/users/teams/types';
 import { TeamMembersList } from './TeamMembersList';
 
 const meta: Meta = {
-  title: 'Teams/TeamAssociationSelector/TeamMembersList',
+  title: 'Components/Teams/TeamAssociationSelector/TeamMembersList',
   component: TeamMembersList,
 };
 

app/react/portainer/users/teams/ItemView/TeamAssociationSelector/UsersList/UsersList.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-webpack5';
 import { useMemo } from 'react';
 
 import { createMockUsers } from '@/react-tools/test-mocks';
@@ -9,7 +9,7 @@ import { UserViewModel } from '@/portainer/models/user';
 import { UsersList } from './UsersList';
 
 const meta: Meta = {
-  title: 'Teams/TeamAssociationSelector/UsersList',
+  title: 'Components/Teams/TeamAssociationSelector/UsersList',
   component: UsersList,
 };
 

app/react/portainer/users/teams/ListView/CreateTeamForm/CreateTeamForm.stories.tsx

@@ -1,10 +1,10 @@
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-webpack5';
 
 import { CreateTeamForm } from './CreateTeamForm';
 import { mockExampleData } from './CreateTeamForm.mocks';
 
 const meta: Meta = {
-  title: 'teams/CreateTeamForm',
+  title: 'Components/Teams/CreateTeamForm',
   component: CreateTeamForm,
 };
 

app/react/sidebar/SidebarItem/SidebarItem.stories.tsx

@@ -1,10 +1,10 @@
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react-webpack5';
 import { Clock, type LucideIcon } from 'lucide-react';
 
 import { SidebarItem } from '.';
 
 const meta: Meta = {
-  title: 'Sidebar/SidebarItem',
+  title: 'Components/Sidebar/SidebarItem',
   component: SidebarItem,
 };
 export default meta;

package.json

@@ -145,19 +145,16 @@
     "@babel/preset-env": "^7.22.20",
     "@babel/preset-react": "^7.22.15",
     "@babel/preset-typescript": "^7.23.0",
-    "@chromatic-com/storybook": "^3.2.7",
+    "@chromatic-com/storybook": "^5.1.2",
     "@eslint-community/eslint-plugin-eslint-comments": "^4.7.1",
     "@eslint/compat": "^2.0.0",
     "@eslint/eslintrc": "^3.3.3",
     "@eslint/js": "^9.39.2",
     "@simbathesailor/use-what-changed": "^2.0.0",
-    "@storybook/addon-actions": "8.6.15",
+    "@storybook/addon-links": "10.3.5",
-    "@storybook/addon-essentials": "8.6.15",
+    "@storybook/addon-styling-webpack": "^3.0.2",
-    "@storybook/addon-links": "8.6.15",
+    "@storybook/addon-webpack5-compiler-swc": "^4.0.3",
-    "@storybook/addon-styling-webpack": "^3.0.0",
+    "@storybook/react-webpack5": "10.3.5",
-    "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
-    "@storybook/react": "8.6.15",
-    "@storybook/react-webpack5": "8.6.15",
     "@svgr/webpack": "^8.1.0",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^6.9.1",
@@ -208,7 +205,7 @@
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-regex": "^1.10.0",
-    "eslint-plugin-storybook": "^9",
+    "eslint-plugin-storybook": "10.3.5",
     "html-loader": "^5.1.0",
     "html-webpack-plugin": "^5.5.3",
     "husky": "^8.0.0",
@@ -217,7 +214,7 @@
     "lodash-webpack-plugin": "^0.11.6",
     "mini-css-extract-plugin": "^2.7.6",
     "msw": "^2.12.10",
-    "msw-storybook-addon": "^2.0.6",
+    "msw-storybook-addon": "^2.0.7",
     "ngtemplate-loader": "^2.1.0",
     "postcss": "^8.5.6",
     "postcss-loader": "^7.3.3",
@@ -226,7 +223,7 @@
     "react-docgen-typescript-plugin": "^1.0.5",
     "source-map-loader": "^4.0.1",
     "speed-measure-webpack-plugin": "^1.5.0",
-    "storybook": "8.6.15",
+    "storybook": "10.3.5",
     "storybook-css-modules-preset": "^1.1.1",
     "style-loader": "^3.3.3",
     "swagger2openapi": "^7.0.8",
@@ -241,7 +238,8 @@
     "webpack-bundle-analyzer": "^5.2.0",
     "webpack-cli": "^6.0.1",
     "webpack-dev-server": "^5.2.3",
-    "webpack-merge": "^6.0.1"
+    "webpack-merge": "^6.0.1",
+    "@storybook/addon-docs": "10.3.5"
   },
   "pnpm": {
     "overrides": {