Merge pull request #1960 from dxc-technology/Mil4n0r/storybook8_migration

Updated storybook version to 8.0

Author: GomezIvann

.github/workflows/chromatic.yml

@@ -22,10 +22,10 @@ jobs:
       - name: Install lib dependencies
         run: cd lib && npm install
 
-      - name: Install Node.js 16.x
+      - name: Install Node.js 18.x
         uses: actions/setup-node@v1
         with:
-          node-version: 16.x
+          node-version: 18.x
           registry-url: https://registry.npmjs.org/
 
       - name: Publish to Chromatic

lib/.storybook/main.ts

@@ -8,10 +8,14 @@ const config: StorybookConfig = {
     "@storybook/addon-interactions",
     "storybook-addon-pseudo-states",
     "@storybook/addon-a11y",
+    "@chromatic-com/storybook",
   ],
   framework: {
     name: "@storybook/react-vite",
     options: {},
   },
+  typescript: {
+    reactDocgen: "react-docgen-typescript",
+  },
 };
 export default config;

lib/.storybook/preview.tsx

@@ -6,7 +6,6 @@ import { disabledRules } from "../test/accessibility/rules/common/disabledRules"
 
 const preview: Preview = {
   parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" },
     controls: {
       matchers: {
         color: /(background|color)$/i,

lib/.storybook/test-runner.ts

@@ -9,38 +9,46 @@ const a11yConfig: TestRunnerConfig = {
   async preVisit(page, context) {
     await injectAxe(page);
 
-    // Get the entire context of a story, including parameters, args, argTypes, etc.
-    const storyContext = await getStoryContext(page, context);
-    // Apply viewport handle support
-    const viewPortParams: ViewportParameters = storyContext.parameters?.viewport;
-    const defaultViewport = viewPortParams?.defaultViewport;
-    const viewport = defaultViewport && viewPortParams.viewports[defaultViewport].styles;
-    const parsedViewportSizes: ViewportStyles = viewport
-      ? Object.entries(viewport).reduce(
-          (acc, [screen, size]) => ({
-            ...acc,
-            [screen]: parseInt(size),
-          }),
-          {} as ViewportStyles
-        )
-      : DEFAULT_VIEWPORT_SIZE;
+    try {
+      // Get the entire context of a story, including parameters, args, argTypes, etc.
+      const storyContext = await getStoryContext(page, context);
+      // Apply viewport handle support
+      const viewPortParams: ViewportParameters = storyContext.parameters?.viewport;
+      const defaultViewport = viewPortParams?.defaultViewport;
+      const viewport = defaultViewport && viewPortParams?.viewports[defaultViewport]?.styles;
+      const parsedViewportSizes: ViewportStyles = viewport
+        ? Object.entries(viewport).reduce(
+            (acc, [screen, size]) => ({
+              ...acc,
+              [screen]: parseInt(size),
+            }),
+            {} as ViewportStyles
+          )
+        : DEFAULT_VIEWPORT_SIZE;
 
-    if (parsedViewportSizes && Object.keys(parsedViewportSizes)?.length !== 0) {
-      page.setViewportSize(parsedViewportSizes);
+      if (parsedViewportSizes && Object.keys(parsedViewportSizes)?.length !== 0) {
+        page.setViewportSize(parsedViewportSizes);
+      }
+    } catch (err) {
+      console.error("Problem when loading the Story Context");
     }
   },
   async postVisit(page, context) {
-    // Get the entire context of a story, including parameters, args, argTypes, etc.
-    const storyContext = await getStoryContext(page, context);
-    // Do not run a11y tests on disabled stories.
-    if (storyContext.parameters?.a11y?.disable) {
-      return;
-    }
+    try {
+      // Get the entire context of a story, including parameters, args, argTypes, etc.
+      const storyContext = await getStoryContext(page, context);
+      // Do not run a11y tests on disabled stories.
+      if (storyContext.parameters?.a11y?.disable) {
+        return;
+      }
 
-    // Apply story-level a11y rules
-    await configureAxe(page, {
-      rules: storyContext.parameters?.a11y?.config?.rules,
-    });
+      // Apply story-level a11y rules
+      await configureAxe(page, {
+        rules: storyContext?.parameters?.a11y?.config?.rules,
+      });
+    } catch (err) {
+      console.error("Problem when loading the Story Context");
+    }
 
     await checkA11y(page, "#storybook-root", {
       detailedReport: true,

lib/chromatic.config.json

@@ -0,0 +1,5 @@
+{
+  "projectId": "Project:61ce39ca365cb1003a29c6c6",
+  "storybookBaseDir": "lib",
+  "zip": true
+}