Merge pull request #1340 from undp/issue-1327-upgrade-to-storybook-8-…

…and-csf3

#1327 upgrade to storybook 8 and csf3

.babelrc.json

@@ -8,7 +8,12 @@
         "loose": true
       }
     ],
-    "@babel/preset-typescript"
+    [
+      "@babel/preset-typescript",
+      {
+        "runtime": "automatic"
+      }
+    ]
   ],
   "plugins": [
     "@babel/plugin-transform-shorthand-properties",

.storybook/main.js

@@ -1,57 +1,58 @@
-const path = require("path");
+const path = require('path');
+
 module.exports = {
   staticDirs: ['../stories/assets'],
-  stories: [
-    "../stories/**/*.stories.mdx"
-  ],
+  stories: ['../stories/**/*.stories.@(js|jsx|ts|tsx)', '../stories/**/*.mdx'],
   addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-actions",
-    "@storybook/addon-docs",
-    "@storybook/addon-essentials",
-    "@whitespace/storybook-addon-html",
-    "storybook-addon-rtl",
-    "@storybook/addon-a11y"
+    '@storybook/addon-links',
+    {
+      name: '@storybook/addon-essentials',
+      options: {
+        actions: false, // 👈 disable the actions addon
+      },
+    },
+    'storybook-addon-rtl',
+    '@storybook/blocks',
+    '@storybook/addon-a11y',
+    '@storybook/react-webpack5',
+    // '@chromatic-com/storybook',
+    '@storybook/addon-webpack5-compiler-babel'
   ],
   features: {
-    storyStoreV7: true,
     buildStoriesJson: true,
-    legacyMdx1: true,
     babelModeV7: true
   },
   webpackFinal: async config => {
-    // remove hash from the static file names
-    // find the existing rule and override the name property
-    // config.module.rules.forEach(function(rule, index) {
-    //   if (String(rule.test).search('svg') > 0) {
-    //     if (typeof config.module.rules[index].options == 'undefined') {
-    //       config.module.rules[index].options = {};
-    //     }
-    //     config.module.rules[index].options.name = 'static/media/[name].[ext]';
-    //   }
-    // });
     config.resolve.alias = {
       ...config.resolve.alias,
-      icons: path.resolve(__dirname, "../stories/assets/icons")
+      icons: path.resolve(__dirname, '../stories/assets/icons')
     };
-    // add SCSS support for CSS Modules
+
     config.module.rules.push({
       test: /\.scss$/,
-      exclude: /node_modules/,
       use: ['style-loader', 'css-loader', 'sass-loader'],
       include: path.resolve(__dirname, '../')
     });
+
+    config.module.rules.push({
+      test: /\.(js|jsx)$/,
+      use: {
+        loader: 'babel-loader',
+        options: {
+          presets: ['@babel/preset-env', ['@babel/preset-react', { "runtime": "automatic" }]]
+        }
+      }
+    });
+
     return config;
   },
   framework: {
-    name: "@storybook/react-webpack5",
+    name: '@storybook/react-webpack5',
     options: {}
   },
-  env: config => ({
-    ...config,
-    CHROMATIC_VIEWPORTS: [375, 768, 1380, 1920]
-  }),
-  docs: {
-    autodocs: true
-  }
+  // env: config => ({
+  //   ...config,
+  //   CHROMATIC_VIEWPORTS: [375, 768, 1380, 1920]
+  // }),
+  docs: {},
 };

.storybook/manager.js

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

.storybook/modes.js

@@ -0,0 +1,7 @@
+export const allModes = {
+  small: { viewport: "small" },
+  medium: { viewport: "medium" },
+  large: { viewport: "large" },
+  xlarge: { viewport: "xlarge" },
+  hd: { viewport: "hd" },
+};

.storybook/preview.js

@@ -1,17 +1,25 @@
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
-import { initializeRTL } from 'storybook-addon-rtl';
-import renderToHTML from './renderToHTML'
+// import * as RTLAddon from 'storybook-addon-rtl';
+import renderToHTML from './renderToHTML';
+
 
 // include base styling globally
 import '!style-loader!css-loader!sass-loader!../stories/assets/scss/base-minimal.scss';
 import '!style-loader!css-loader!sass-loader!../docs/css/components/documentation.min.css';
 
-// initialise RTL
-initializeRTL();
+// Log the contents of RTLAddon for debugging
+
+// console.log(RTLAddon);
+
+// if (RTLAddon && typeof RTLAddon.default === 'function') {
+//   RTLAddon.default(); // Use the default export if it is a function
+// } else {
+//   console.error('RTL initialization method not found.');
+// }
 
 // Configure Storybook
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
+  // actions: { disable: true },
   controls: {
     matchers: {
       color: /(background|color)$/i,
@@ -26,7 +34,14 @@ export const parameters = {
     },
   },
   viewport: {
-    viewports: INITIAL_VIEWPORTS,
+    // viewports: INITIAL_VIEWPORTS,
+    viewports: {
+      small: { name: "Small", styles: { width: "375px", height: "812px" } },
+      medium: { name: "Medium", styles: { width: "768px", height: "900px" } },
+      large: { name: "Large", styles: { width: "1380px", height: "768px" } },
+      xlarge: { name: "XLarge", styles: { width: "1600px", height: "900px" } },
+      hd: { name: "HD", styles: { width: "1920px", height: "1080px" } },
+    },
   },
   docs: {
     source: {
@@ -37,18 +52,17 @@ export const parameters = {
   options: {
     storySort: {
       method: 'alphabetical',
-      order: ['Getting started',['Intro','How to use our design system?','Browser support'],'Foundation','Components', 'Patterns', 'Utilities','Templates' ],
+      order: ['Getting started', ['Intro', 'How to use our design system?', 'Browser support'], 'Foundation', 'Components', 'Patterns', 'Utilities', 'Templates'],
       includeName: true
     },
   },
-  chromatic: {
-    pauseAnimationAtEnd: true,
-    delay: 1500
-  },
+  // chromatic: {
+  //   pauseAnimationAtEnd: true,
+  //   delay: 1500
+  // },
 }
 
 /* Implementing locale for language switcher */
-// Note: Languages added to items array need to be added to the getLangCode() function below.
 export const globalTypes = {
   locale: {
     title: 'Locale',
@@ -84,42 +98,29 @@ export const globalTypes = {
   }
 };
 
-/**
- * Function to get current language code.
- *
- * @param {*} Story renders Stories in iFrame.
- * @param {*} context Current context for Addons.
- * @returns Current Language Code.
- */
 const getLangCode = (Story, context) => {
   let activeLang = context.globals.locale;
 
-  // trigger onload event
-  // UI has some animation element which trigger on load.
   let delay = 10;
-  setTimeout(function() {
+  setTimeout(function () {
     const evt = new Event('load');
     window.dispatchEvent(evt);
   }, delay);
 
-  // Set window object for iframe.
-  window.UNDP.langCode = (window.UNDP) ? activeLang : window.UNDP= { langCode : activeLang };
+  window.UNDP.langCode = (window.UNDP) ? activeLang : window.UNDP = { langCode: activeLang };
 
-  // Language Array to map language alpha code.
   const langArr = {
-    'english' : 'en',
+    'english': 'en',
     'arabic': 'ar',
     'burmese': 'my',
     'japanese': 'ja',
     'ukrainian': 'uk'
   };
 
-  // Check if language exists.
   if (typeof langArr[activeLang] == 'undefined') {
     activeLang = 'english';
   }
 
-  // Set HTML lang attribute for iframe.
   const htmlElem = document.querySelector('html');
   htmlElem.setAttribute('lang', langArr[activeLang]);
 
@@ -129,16 +130,11 @@ const getLangCode = (Story, context) => {
 }
 
 const sbFrameReset = (Story, context) => {
-  // Get Storybook Iframe's body element.
   const iframeBody = document.querySelector('body');
-  // Get Storybook sidebar items in an array.
   const sidebarItem = parent.document.querySelectorAll('.sidebar-item');
-  // Add click event listner on each sidebar item.
   sidebarItem.forEach(function (item, i) {
     item.addEventListener('click', function (e) {
-      // Classes to remove.
       const classNames = ['sdgmodal-open', 'color-blue'];
-      // Check if above classes exist in `body` element and remove them.
       if (classNames.some(className => iframeBody.classList.contains(className))) {
         iframeBody.classList.remove(...classNames);
       }
@@ -150,21 +146,16 @@ const sbFrameReset = (Story, context) => {
 }
 
 const setDirection = (Story, options) => {
-  // Set default direction.
   let direction = 'ltr';
-  // LTR-RTL Toggle button.
   const input = parent.document.querySelector('[aria-controls="rtl-status"]');
-  // Callback function for LTR-RTL Toggle.
   const checkRTL = (elem) => {
     if (elem.checked) {
       direction = 'rtl';
     }
   }
-  // Change direction on LTR-RTL Toggle.
   if (input && input.checked) {
     input.addEventListener('change', checkRTL(input), false);
   }
-  // Set window object for iframe.
   if (typeof window.UNDP === 'undefined') {
     window.UNDP = {};
   }
@@ -175,27 +166,17 @@ const setDirection = (Story, options) => {
   )
 }
 
-/**
- * Function to set a global "accent-COLOR" class to the body.
- *
- * @param {*} Story renders Stories in iFrame.
- * @param {*} context Current context for Addons.
- * @returns Story with accent color processed.
- */
 const setAccentClass = (Story, context) => {
   let accent = context.globals.accent;
   const bodyElem = document.querySelector('body');
 
-  // Remove any prexisting accent-COLOR items so we can apply the most recent
-  // global selection.
   bodyElem.classList.forEach((item) => {
     if (item.startsWith('accent-')) {
       bodyElem.classList.remove(item);
     }
   });
 
   if (Boolean(accent)) {
-    // Set accent class on body tag (the most parent of parents).
     bodyElem.classList.add(`accent-${accent}`);
   }
 
@@ -204,5 +185,5 @@ const setAccentClass = (Story, context) => {
   )
 }
 
-// Trigger callback in Storybook Addons.
 export const decorators = [getLangCode, sbFrameReset, setDirection, setAccentClass];
+export const tags = ['autodocs', 'autodocs'];

chromatic.config.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://www.chromatic.com/config-file.schema.json",
+  "projectId": "UNDP Design System",
+  "exitOnceUploaded": true,
+  "skip": "dependabot/**"
+}