feat: update storybook

.storybook/main.js

@@ -1,23 +1,22 @@
 module.exports = {
-  core: {
-    builder: 'webpack5',
-  },
   stories: [
-    '../storybook/**/*.stories.mdx',
-    '../src/govie/components/**/*.stories.mdx',
+    '../storybook/**/*.mdx',
     '../src/govie/components/**/*.stories.@(js|jsx|ts|tsx)',
     '../src/govie/templates/**/*.stories.@(js|jsx|ts|tsx)',
     '../src/govie/patterns/**/*.stories.@(js|jsx|ts|tsx)',
   ],
   addons: [
+    // '@etchteam/storybook-addon-css-variables-theme',
+    '@storybook/addon-onboarding',
     '@storybook/addon-links',
     '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
     '@storybook/addon-interactions',
-    '@storybook/addon-docs',
-    // '@etchteam/storybook-addon-css-variables-theme',
-    '@storybook/addon-a11y',
   ],
-  framework: '@storybook/html',
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
   staticDirs: [
     {
       from: '../storybook/dist',
@@ -29,6 +28,6 @@ module.exports = {
     },
   ],
   docs: {
-    docsPage: 'automatic',
+    autodocs: true,
   },
 };

.storybook/preview.js → .storybook/preview.jsx

@@ -4,23 +4,34 @@ import React from 'react';
 import { DocsContainer } from '@storybook/addon-docs';
 // import cssVariablesTheme from '@etchteam/storybook-addon-css-variables-theme'
 
-import hseTheme from '!!style-loader?injectType=lazyStyleTag!css-loader!./assets/themes/hse.css';
-import agsTheme from '!!style-loader?injectType=lazyStyleTag!css-loader!./assets/themes/ags.css';
-import defaultTheme from '!!style-loader?injectType=lazyStyleTag!css-loader!../storybook/dist/@ogcio/ogcio-ds.min.css';
-let selectedTheme;
+// import hseTheme from '!!style-loader?injectType=lazyStyleTag!css-loader!./assets/themes/hse.css';
+// import agsTheme from '!!style-loader?injectType=lazyStyleTag!css-loader!./assets/themes/ags.css';
+// import defaultTheme from '!!style-loader?injectType=lazyStyleTag!css-loader!../storybook/dist/@ogcio/ogcio-ds.min.css';
+// let selectedTheme;
 
 // export const decorators = [cssVariablesTheme]
 
-export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
-  cssVariables: {
-    files: {
-      'HSE theme': hseTheme,
-      'AGS theme': agsTheme,
-      'OGCIO theme': defaultTheme,
-    },
-    defaultTheme: 'OGCIO theme',
+export const decorators = [
+  (Story, context) => {
+    const storyResult = Story(context);
+    if (typeof storyResult === 'string') {
+      return <div dangerouslySetInnerHTML={{ __html: storyResult }} />;
+    }
+
+    return storyResult;
   },
+];
+
+export const parameters = {
+  // actions: { argTypesRegex: '^on[A-Z].*' },
+  // cssVariables: {
+  //   files: {
+  //     'HSE theme': hseTheme,
+  //     'AGS theme': agsTheme,
+  //     'OGCIO theme': defaultTheme,
+  //   },
+  //   defaultTheme: 'OGCIO theme',
+  // },
   controls: {
     matchers: {
       color: /(background|color)$/i,
@@ -32,13 +43,14 @@ export const parameters = {
     source: { format: false },
     container: ({ children, context }) => {
       let newContext;
-      cssVariablesTheme((c) => (newContext = c), context);
+      // cssVariablesTheme((c) => (newContext = c), context);
+      //    <DocsContainer context={newContext}>
 
       return (
-        <DocsContainer context={newContext}>
+        <DocsContainer context={context}>
           {context.name !== 'Page' && (
             <div
-              className="govie-body"
+              // className="govie-body"
               style={{
                 position: 'absolute',
                 top: 0,
@@ -118,18 +130,18 @@ export const parameters = {
           {children}
         </th>
       ),
-      code: ({ children, ...args }) => (
-        <code
-          className="govie-!-font-size-19"
-          style={{
-            background: '#f9f9f8',
-            border: '1px solid #bfc1c3',
-          }}
-          {...args}
-        >
-          {children}
-        </code>
-      ),
+      // code: ({ children, ...args }) => (
+      //   <code
+      //     className="govie-!-font-size-19"
+      //     style={{
+      //       background: '#f9f9f8',
+      //       border: '1px solid #bfc1c3',
+      //     }}
+      //     {...args}
+      //   >
+      //     {children}
+      //   </code>
+      // ),
     },
   },
   options: {
@@ -172,11 +184,11 @@ export const parameters = {
 /// Change logo according to the selected theme
 ///
 
-document.addEventListener('storybookcssvariables:theme:change', (event) => {
-  // set theme selectedTheme variable to the current select theme
-  selectedTheme = event?.detail?.theme;
-  loadLogo();
-});
+// document.addEventListener('storybookcssvariables:theme:change', (event) => {
+//   // set theme selectedTheme variable to the current select theme
+//   selectedTheme = event?.detail?.theme;
+//   loadLogo();
+// });
 
 window.addEventListener('DOMContentLoaded', (event) => {
   // reload the logo when the DOM finish loading because
@@ -190,15 +202,15 @@ const loadLogo = () => {
 
   if (logo) {
     // to avoid errors when the iframe has not completed loading yet
-    if (selectedTheme === 'AGS theme') {
-      logo.src = './themes/ags.png';
-      logo.style = 'width: 166px;';
-    } else if (selectedTheme === 'HSE theme') {
-      logo.src = './themes/hse.png';
-      logo.style = 'width: 52px;';
-    } else {
-      logo.src = './@ogcio/assets/images/logo-full.png';
-      logo.style = 'width: 116px;';
-    }
+    // if (selectedTheme === 'AGS theme') {
+    //   logo.src = './themes/ags.png';
+    //   logo.style = 'width: 166px;';
+    // } else if (selectedTheme === 'HSE theme') {
+    //   logo.src = './themes/hse.png';
+    //   logo.style = 'width: 52px;';
+    // } else {
+    //   logo.src = './@ogcio/assets/images/logo-full.png';
+    //   logo.style = 'width: 116px;';
+    // }
   }
 };