chore(Storybook): migrate to version 6

.eslintrc.json

@@ -84,7 +84,9 @@
                 "react/display-name": "off",
                 "react/destructuring-assignment": "off",
                 "react/prop-types": "off",
-                "react/jsx-setDefaultAreaHighlight-newline": "off"
+                "react/jsx-setDefaultAreaHighlight-newline": "off",
+                "import/no-default-export": "off",
+                "no-underscore-dangle": "off"
             }
         }
     ],

.storybook/oneui.theme.js → .storybook/TKTheme.js

@@ -1,11 +1,9 @@
 import { create } from '@storybook/theming';
 import brandImage from './textkernel.svg';
 
-export const OneUITheme = create({
+export default create({
     base: 'light',
-
-    // Branding
     brandTitle: 'Textkernel OneUI',
     brandUrl: 'https://textkernel.com',
-    brandImage
+    brandImage,
 });

.storybook/main.js

@@ -0,0 +1,31 @@
+const path = require('path');
+const { getRules } = require('../scripts/build/webpack.config');
+
+module.exports = {
+    stories: [
+        '../stories/theme/*.@(js|jsx|ts|tsx)',
+        '../stories/atoms/*.@(js|jsx|ts|tsx)',
+        '../stories/molecules/*.@(js|jsx|ts|tsx)',
+        '../stories/organisms/*.@(js|jsx|ts|tsx)',
+        '../stories/packages/*.@(js|jsx|ts|tsx)',
+        '../stories/**/*.@(js|jsx|ts|tsx)',
+    ],
+    addons: [
+        '@storybook/addon-actions',
+        '@storybook/addon-links',
+        '@storybook/addon-essentials',
+        '@storybook/addon-interactions',
+    ],
+    framework: '@storybook/react',
+    webpackFinal: async (config, { configType }) => {
+        const type = configType === 'DEVELOPMENT' ? 'dev' : 'prod';
+        const rules = getRules(type);
+
+        config.resolve.alias['@textkernel/oneui'] = path.resolve(__dirname, '../src');
+        // Make whatever fine-grained changes you need
+        config.module.rules.push(rules.js, rules.scss);
+
+        // Return the altered config
+        return config;
+    },
+};

.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/addons';
+import TKTheme from './TKTheme';
+
+addons.setConfig({
+    theme: TKTheme,
+});

.storybook/preview.js

@@ -0,0 +1,15 @@
+export const parameters = {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+        matchers: {
+            color: /(background|color)$/i,
+            date: /Date$/,
+        },
+    },
+    options: {
+        storySort: {
+            method: 'alphabetical',
+            order: ['Concepts', 'Theme', 'Atoms', 'Molecules', 'Organisms', 'Packages'],
+        },
+    },
+};