Merge remote-tracking branch 'origin/main' into fix/APP-4280

Author: cgero-eth

.changeset/green-clubs-check.md

@@ -0,0 +1,5 @@
+---
+'@aragon/gov-ui-kit': minor
+---
+
+Update Storybook to v9

.changeset/slimy-taxis-press.md

@@ -0,0 +1,5 @@
+---
+'@aragon/gov-ui-kit': minor
+---
+
+Update minor and patch NPM dependencies

.storybook/components/docsPage/docsPage.tsx

@@ -1,4 +1,4 @@
-import { Controls, Description, Primary, Stories, Subtitle, Title } from '@storybook/blocks';
+import { Controls, Description, Primary, Stories, Subtitle, Title } from '@storybook/addon-docs/blocks';
 import { StyleBlock } from '../styleBlock';
 
 export const DocsPage: React.FC = () => {

.storybook/components/styleBlock/styleBlock.tsx

@@ -1,4 +1,4 @@
-import { Subheading, useOf } from '@storybook/blocks';
+import { Subheading, useOf } from '@storybook/addon-docs/blocks';
 
 export interface ICustomisationDoc {
     /**

.storybook/main.ts

@@ -1,40 +1,15 @@
-import type { StorybookConfig } from '@storybook/react-webpack5';
-import type { RuleSetRule } from 'webpack';
+import type { StorybookConfig } from '@storybook/react-vite';
+import type { RollupOptions } from 'rollup';
+import { mergeConfig } from 'vite';
+import { nodePolyfills } from 'vite-plugin-node-polyfills';
+import { viteStaticCopy } from 'vite-plugin-static-copy';
+import svgr from 'vite-plugin-svgr';
 
 const config: StorybookConfig = {
     stories: ['../docs/**/*.@(md|mdx)', '../src/**/*.stories.@(js|jsx|ts|tsx)', '../src/**/*.@(md|mdx)'],
 
-    addons: [
-        '@storybook/addon-links',
-        '@storybook/addon-essentials',
-        {
-            name: '@storybook/addon-styling-webpack',
-            options: {
-                rules: [
-                    // Replaces existing CSS rules to support PostCSS
-                    {
-                        test: /\.css$/,
-                        use: [
-                            'style-loader',
-                            {
-                                loader: 'css-loader',
-                                options: { importLoaders: 1 },
-                            },
-                            {
-                                // Gets options from `postcss.config.js`
-                                loader: 'postcss-loader',
-                                options: { implementation: require.resolve('postcss') },
-                            },
-                        ],
-                    },
-                ],
-            },
-        },
-        '@storybook/addon-webpack5-compiler-babel',
-    ],
-
     framework: {
-        name: '@storybook/react-webpack5',
+        name: '@storybook/react-vite',
         options: {},
     },
 
@@ -43,41 +18,32 @@ const config: StorybookConfig = {
         reactDocgen: 'react-docgen-typescript',
     },
 
-    webpackFinal: (webpackConfig) => {
-        // Remove any svg loader already set and use @svgr/webpack to load svgs on Storybook
-        const svgWebpackRule = webpackConfig.module?.rules?.find((rule) => {
-            if (rule != null && typeof rule !== 'string' && (rule as RuleSetRule).test instanceof RegExp) {
-                const testRegExp = (rule as RuleSetRule).test as RegExp;
-                return testRegExp.test('.svg');
-            }
-
-            return undefined;
-        });
-
-        if (typeof svgWebpackRule !== 'string') {
-            (svgWebpackRule as RuleSetRule).exclude = /\.svg$/;
-        }
-
-        webpackConfig.module?.rules?.push({
-            test: /\.svg$/,
-            use: ['@svgr/webpack'],
-        });
-
-        // Retrieve and update css rule to support raw imports of CSS files using "?raw"
-        const cssRule = webpackConfig.module?.rules?.find((rule) => {
-            if (rule != null && typeof rule !== 'string' && (rule as RuleSetRule).test instanceof RegExp) {
-                const testRegExp = (rule as RuleSetRule).test as RegExp;
-                return testRegExp.test('.css');
-            }
-
-            return undefined;
-        });
+    addons: ['@storybook/addon-docs'],
+
+    viteFinal: (viteConfig) => {
+        // Add polyfills for path, url and source-map-js node modules and plugin for importing svg files
+        const plugins = [
+            nodePolyfills({ include: ['path', 'url'] }),
+            svgr({ include: '**/*.svg' }),
+            viteStaticCopy({ targets: [{ src: './src/theme/fonts/*.ttf', dest: './fonts' }] }),
+        ];
+        const resolve = { alias: { 'source-map-js': 'source-map' } };
+
+        const rollupOptions: RollupOptions = {
+            // Externalize font assets (see https://github.com/storybookjs/storybook/pull/27110)
+            external: [/.*\.ttf/],
+            // Silence "use client" directive and "/* PURE */" comment warnings during Storybook build
+            onwarn: (warning, warn) => {
+                if (['MODULE_LEVEL_DIRECTIVE', 'INVALID_ANNOTATION'].includes(warning.code ?? '')) {
+                    return;
+                }
+                warn(warning);
+            },
+        };
 
-        if (cssRule) {
-            (cssRule as RuleSetRule).resourceQuery = { not: [/raw/] };
-        }
+        const finalConfigs = mergeConfig(viteConfig, { plugins, resolve, build: { rollupOptions } });
 
-        return webpackConfig;
+        return finalConfigs;
     },
 };
 

.storybook/manager.ts

@@ -1,4 +1,4 @@
-import { addons } from '@storybook/manager-api';
+import { addons } from 'storybook/manager-api';
 import aragonGukTheme from './theme';
 
 addons.setConfig({

.storybook/preview.tsx

@@ -1,4 +1,4 @@
-import type { Preview } from '@storybook/react';
+import type { Preview } from '@storybook/react-vite';
 import '../index.css';
 import { GukModulesProvider } from '../src/modules';
 import { DocsPage } from './components';
@@ -52,6 +52,14 @@ const preview: Preview = {
     ],
 
     tags: ['autodocs'],
+
+    // Needed to fix warning on HMR reload (see https://github.com/storybookjs/storybook-addon-pseudo-states/issues/59)
+    globalTypes: {
+        measureEnabled: {},
+        backgrounds: {},
+        outline: {},
+        viewport: {},
+    },
 };
 
 export default preview;

.storybook/theme.ts

@@ -1,4 +1,4 @@
-import { create } from '@storybook/theming';
+import { create } from 'storybook/theming';
 
 export default create({
     base: 'light',

docs/changelog.mdx

@@ -1,5 +1,5 @@
 import Changelog from '../CHANGELOG.md?raw';
-import { Meta, Markdown } from '@storybook/blocks';
+import { Meta, Markdown } from '@storybook/addon-docs/blocks';
 
 <Meta title="Docs/Changelog" />
 

docs/codingGuidelines/libraryDependencies.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 
 <Meta title="Docs/Coding Guidelines/Library Dependencies" />