feat: update to Storybook 10 + AI development features

.releaserc.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   branches: ['main'],
   plugins: [
     '@semantic-release/commit-analyzer',

.storybook/main.js

@@ -33,7 +33,8 @@ export default {
       },
     },
     '@storybook/addon-links',
-    '@whitespace/storybook-addon-html',
+    // TODO: Re-enable once https://github.com/whitespace-se/storybook-addon-html/pull/149 is merged
+    // '@whitespace/storybook-addon-html',
     'storybook-addon-rtl',
     '@storybook/addon-a11y',
     '@storybook/addon-webpack5-compiler-babel',
@@ -128,13 +129,19 @@ export default {
     options: {},
   },
 
+  features: {
+    experimentalComponentsManifest: true,
+  },
+
   docs: {
     story: {
       inline: false,
     },
   },
 
   typescript: {
-    reactDocgen: 'react-docgen-typescript',
+    // Use react-docgen for faster builds (handles basic TS types)
+    // Switch to 'react-docgen-typescript' if props tables are missing or incomplete for TS components
+    reactDocgen: 'react-docgen',
   },
 };

.storybook/presets.js

@@ -1 +1 @@
-module.exports = ['@storybook/addon-docs/preact/preset'];
+export default ['@storybook/addon-docs/preact/preset'];

.storybook/preview.js

@@ -8,94 +8,6 @@ import themePreventionWeb from '../stories/assets/scss/style-preventionweb.scss'
 import themeIRP from '../stories/assets/scss/style-irp.scss';
 import themeMCR from '../stories/assets/scss/style-mcr.scss';
 
-// Configure Storybook
-export const parameters = {
-  actions: {
-    argTypes: {
-      onClick: { action: 'clicked' },
-      onChange: { action: 'changed' },
-    },
-  },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-  designToken: {
-    defaultTab: 'Colors',
-    disable: true,
-  },
-  html: {
-    prettier: {
-      tabWidth: 2,
-      useTabs: false,
-      removeComments: true,
-      htmlWhitespaceSensitivity: 'css',
-      printWidth: 80,
-      semi: true,
-      singleQuote: true,
-      trailingComma: 'es5',
-    },
-  },
-  docs: {
-    source: {
-      format: 'dedent',
-    },
-  },
-  viewport: {
-    viewports: INITIAL_VIEWPORTS,
-  },
-  options: {
-    storySort: {
-      method: 'alphabetical',
-      order: [
-        'Introduction',
-        'Getting started',
-        ['Intro', 'How to use our design system?', 'Browser support'],
-        'Design decisions',
-        'Components',
-        'Utilities',
-      ],
-      includeName: true,
-    },
-  },
-};
-
-/* Implementing locale for language switcher */
-export const globalTypes = {
-  locale: {
-    name: 'Locale',
-    description: 'locale',
-    defaultValue: 'en',
-    toolbar: {
-      icon: 'globe',
-      items: [
-        { value: 'english', title: 'English' },
-        { value: 'arabic', title: 'Arabic' },
-        { value: 'burmese', title: 'Burmese' },
-        { value: 'japanese', title: 'Japanese' },
-      ],
-    },
-  },
-  theme: {
-    name: 'Theme',
-    description: 'Global theme for components',
-    defaultValue: 'Global UNDRR Theme',
-    toolbar: {
-      icon: 'paintbrush',
-      items: [
-        { value: 'Global UNDRR Theme', title: 'Global UNDRR Theme' },
-        { value: 'PreventionWeb Theme', title: 'PreventionWeb Theme' },
-        { value: 'IRP Theme', title: 'IRP Theme' },
-        { value: 'MCR2030 Theme', title: 'MCR2030 Theme' },
-      ],
-      showName: true,
-      dynamicTitle: true,
-    },
-  },
-};
-
 // Function to get current language code
 const getLangCode = (Story, context) => {
   let activeLang = context.initialGlobals.locale;
@@ -203,12 +115,97 @@ const themeDecorator = (Story, context) => {
   return <Story {...context} />;
 };
 
-// Apply decorators
-export const decorators = [
-  getLangCode,
-  sbFrameReset,
-  setDirection,
-  themeDecorator,
-];
+/** @type { import('storybook').Preview } */
+const preview = {
+  parameters: {
+    actions: {
+      argTypes: {
+        onClick: { action: 'clicked' },
+        onChange: { action: 'changed' },
+      },
+    },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    designToken: {
+      defaultTab: 'Colors',
+      disable: true,
+    },
+    html: {
+      prettier: {
+        tabWidth: 2,
+        useTabs: false,
+        removeComments: true,
+        htmlWhitespaceSensitivity: 'css',
+        printWidth: 80,
+        semi: true,
+        singleQuote: true,
+        trailingComma: 'es5',
+      },
+    },
+    docs: {
+      source: {
+        format: 'dedent',
+      },
+    },
+    viewport: {
+      viewports: INITIAL_VIEWPORTS,
+    },
+    options: {
+      storySort: {
+        method: 'alphabetical',
+        order: [
+          'Introduction',
+          'Getting started',
+          ['Intro', 'How to use our design system?', 'Browser support'],
+          'Design decisions',
+          'Components',
+          'Utilities',
+        ],
+        includeName: true,
+      },
+    },
+  },
+
+  globalTypes: {
+    locale: {
+      name: 'Locale',
+      description: 'locale',
+      defaultValue: 'en',
+      toolbar: {
+        icon: 'globe',
+        items: [
+          { value: 'english', title: 'English' },
+          { value: 'arabic', title: 'Arabic' },
+          { value: 'burmese', title: 'Burmese' },
+          { value: 'japanese', title: 'Japanese' },
+        ],
+      },
+    },
+    theme: {
+      name: 'Theme',
+      description: 'Global theme for components',
+      defaultValue: 'Global UNDRR Theme',
+      toolbar: {
+        icon: 'paintbrush',
+        items: [
+          { value: 'Global UNDRR Theme', title: 'Global UNDRR Theme' },
+          { value: 'PreventionWeb Theme', title: 'PreventionWeb Theme' },
+          { value: 'IRP Theme', title: 'IRP Theme' },
+          { value: 'MCR2030 Theme', title: 'MCR2030 Theme' },
+        ],
+        showName: true,
+        dynamicTitle: true,
+      },
+    },
+  },
+
+  decorators: [getLangCode, sbFrameReset, setDirection, themeDecorator],
+
+  tags: ['autodocs'],
+};
 
-export const tags = ['autodocs'];
+export default preview;

babel.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   presets: [
     [
       '@babel/preset-env',

jest.config.js

@@ -47,4 +47,4 @@ const config = {
   transformIgnorePatterns: ['node_modules/(?!core-js)'],
 };
 
-module.exports = config;
+export default config;

jest.setup.js

@@ -1,2 +1,2 @@
 // Add any global setup for Jest tests here
-require('@testing-library/jest-dom');
+import '@testing-library/jest-dom';

package.json

@@ -63,22 +63,21 @@
     "@eslint/js": "9.39.2",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-a11y": "9.1.16",
+    "@storybook/addon-a11y": "10.1.11",
     "@storybook/addon-actions": "9.0.8",
-    "@storybook/addon-docs": "^9.1.16",
-    "@storybook/addon-links": "9.1.16",
-    "@storybook/addon-themes": "^9.1.16",
+    "@storybook/addon-docs": "^10.1.11",
+    "@storybook/addon-links": "10.1.11",
+    "@storybook/addon-themes": "^10.1.11",
     "@storybook/addon-webpack5-compiler-babel": "4.0.0",
-    "@storybook/blocks": "9.0.0-alpha.17",
-    "@storybook/cli": "9.1.16",
-    "@storybook/react": "10.1.4",
-    "@storybook/react-webpack5": "9.1.16",
+    "@storybook/cli": "10.1.11",
+    "@storybook/react": "10.1.11",
+    "@storybook/react-webpack5": "10.1.11",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "16.3.1",
-    "@typescript-eslint/eslint-plugin": "^8.49.0",
-    "@typescript-eslint/parser": "^8.49.0",
+    "@typescript-eslint/eslint-plugin": "^8.51.0",
+    "@typescript-eslint/parser": "^8.51.0",
     "@whitespace/storybook-addon-html": "8.0.2",
-    "@wordpress/babel-preset-default": "8.36.0",
+    "@wordpress/babel-preset-default": "8.37.0",
     "alter-css-url-loader": "1.1.3",
     "autoprefixer": "10.4.23",
     "babel-jest": "30.2.0",
@@ -102,10 +101,10 @@
     "eslint-plugin-react": "7.37.5",
     "eslint-plugin-react-hooks": "7.0.1",
     "eslint-plugin-spellcheck": "0.0.20",
-    "eslint-plugin-storybook": "9.1.16",
+    "eslint-plugin-storybook": "10.1.11",
     "extract-loader": "5.1.0",
     "glob": "13.0.0",
-    "globals": "16.5.0",
+    "globals": "17.0.0",
     "html-entities": "2.6.0",
     "jest": "30.2.0",
     "jest-environment-jsdom": "30.2.0",
@@ -127,20 +126,20 @@
     "sass": "1.97.1",
     "sass-loader": "16.0.6",
     "semantic-release": "^25.0.2",
-    "storybook": "9.1.17",
+    "storybook": "10.1.11",
     "storybook-addon-rtl": "3.0.1",
     "storybook-design-token": "^5.0.0",
     "style-loader": "4.0.0",
     "stylelint": "16.26.1",
     "stylelint-config-recommended-scss": "16.0.2",
     "stylelint-config-standard-scss": "16.0.0",
     "stylelint-prettier": "5.0.3",
-    "stylelint-scss": "6.13.0",
+    "stylelint-scss": "6.14.0",
     "svg-spritemap-webpack-plugin": "5.1.0",
     "svgo": "4.0.0",
     "svgo-loader": "4.0.0",
     "typescript": "^5.9.3",
-    "webpack": "5.103.0",
+    "webpack": "5.104.1",
     "webpack-cli": "6.0.1",
     "webpack-fix-style-only-entries": "0.6.1"
   },

stories/Atom/BaseTypography/BaseTypography.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story, Source, Anchor } from '@storybook/blocks';
+import { Canvas, Meta, Story, Source, Anchor } from '@storybook/addon-docs/blocks';
 import * as BaseTypographyStories from './BaseTypography.stories';
 
 import { Heading } from './../Typography/Heading/Heading';

stories/Atom/Colors/color.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas } from '@storybook/blocks';
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
 import { DesignTokenDocBlock } from 'storybook-design-token';
 
 <Meta

stories/Atom/Icons/Icons.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas } from '@storybook/blocks';
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
 import { Icons } from './Icons';
 import data from './Icons.json';
 import * as IconsStories from './Icons.stories';

stories/Atom/Images/AuthorImage/AuthorImages.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas } from '@storybook/blocks';
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
 import { Authorimg } from './AuthorImages';
 import user from '../../../assets/images/author.png';
 import * as AuthorImagesStories from './AuthorImages.stories';

stories/Atom/Images/ImageCaptionCredit/ImageCaptionCredit.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, Source } from '@storybook/blocks';
+import { Meta, Story, Canvas, Source } from '@storybook/addon-docs/blocks';
 import { Images } from './ImageCaptionCredit';
 import sample_imagelg from '../../../assets/images/sample_image-lg.jpg';
 import sample_imagemd from '../../../assets/images/sample_image-md.jpg';

stories/Atom/Layout/Breakpoint/Breakpoint.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Source } from '@storybook/blocks';
+import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import { DesignTokenDocBlock } from 'storybook-design-token';
 
 <Meta

stories/Atom/Layout/Container/Container.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story, Source } from '@storybook/blocks';
+import { Canvas, Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import { Container } from './Container';
 import * as ContainerStories from './Container.stories';
 

stories/Atom/Layout/Grid/Grid.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story, Source } from '@storybook/blocks';
+import { Canvas, Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import { Grid } from './Grid';
 import * as GridStories from './Grid.stories';
 

stories/Atom/Layout/Spacing/Spacing.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas } from '@storybook/blocks';
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
 import { DesignTokenDocBlock } from 'storybook-design-token';
 
 <Meta

stories/Atom/Layout/Widths/Widths.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Source } from '@storybook/blocks';
+import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
 import { DesignTokenDocBlock } from 'storybook-design-token';
 
 <Meta

stories/Atom/Logo/Logo.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, Anchor } from '@storybook/blocks';
+import { Meta, Story, Canvas, Anchor } from '@storybook/addon-docs/blocks';
 import { Logo } from './Logo';
 import * as LogoStories from './Logo.stories';
 

stories/Atom/Navigation/ProgressBarNavigation/ProgressBarNavigation.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas } from '@storybook/blocks';
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
 import { ProgressBarNavigation } from './ProgressBarNavigation';
 import * as ProgressBarNavigationStories from './ProgressBarNavigation.stories';