resolves theopenconversationkit#126: Update to Storybook 7 (theopenconversationkit#129)

* resolve theopenconversationkit#126: migrate to Storybook 7

* Add story for Loader component

* Add theme configuration to storybook toolbar

Author: Fabilin

.babelrc.json

@@ -0,0 +1,18 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100,
+          "safari": 15,
+          "firefox": 91
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}

.eslintrc.js

@@ -16,6 +16,7 @@ module.exports = {
     'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react
     'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
     'prettier/@typescript-eslint', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
+    'plugin:storybook/recommended',
     'plugin:prettier/recommended', // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
   ],
 

.storybook/addons.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import {ThemeProvider} from "@emotion/react";
+import {createTheme} from "../../src";
+
+export const palettes = {
+    default: {},
+    alternative: {
+        text: {
+            user: '#fad390',
+            bot: '#f8c291',
+            card: '#6a89cc',
+            input: '#82ccdd',
+        },
+        background: {
+            user: '#e58e26',
+            bot: '#b71540',
+            card: '#0c2461',
+            input: '#0a3d62',
+            inputDisabled: '#079992',
+        },
+    }
+}
+
+export const sizings = {
+    default: {},
+    alternative: {
+        loaderSize: '20px',
+        borderRadius: '4em',
+        conversation: {
+            width: '400px',
+        },
+    }
+}
+
+export const typographies = {
+    default: {},
+    alternative: {
+        fontFamily: 'cursive',
+        fontSize: '1em',
+    }
+}
+
+const ThemeDecorator = (Story: () => JSX.Element, context: any) => {
+    const theme = createTheme({
+        palette: palettes[context.globals.palette],
+        sizing: sizings[context.globals.sizing],
+        typography: typographies[context.globals.typography]
+    });
+    return (
+        <ThemeProvider theme={theme}>
+            <Story/>
+        </ThemeProvider>
+    );
+};
+
+export default ThemeDecorator;

.storybook/config.js

@@ -2,10 +2,10 @@ import React from 'react';
 
 import TockProvider from '../../src/TockContext';
 
-const TockContextDecorator = story => (
-  <TockProvider>
-    {story()}
-  </TockProvider>
+const TockContextDecorator = (Story: () => JSX.Element) => (
+    <TockProvider>
+        <Story/>
+    </TockProvider>
 );
 
 export default TockContextDecorator;

.storybook/decorators/ThemeDecorator.tsx

@@ -0,0 +1,25 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+
+  docs: {
+    autodocs: true,
+  },
+
+  core: {
+    builder: '@storybook/builder-webpack5'
+  }
+};
+export default config;

…ybook/decorators/tockContextDecorator.js …book/decorators/TockContextDecorator.tsx.storybook/decorators/tockContextDecorator.js renamed to .storybook/decorators/TockContextDecorator.tsx .storybook/decorators/tockContextDecorator.js renamed to .storybook/decorators/TockContextDecorator.tsx

@@ -0,0 +1,47 @@
+import type { Preview } from '@storybook/react';
+import ThemeDecorator, {palettes, sizings, typographies} from './decorators/ThemeDecorator'
+import TockContextDecorator from "./decorators/TockContextDecorator";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+  decorators: [
+    ThemeDecorator,
+    TockContextDecorator,
+  ],
+  globalTypes: {
+    palette: {
+      description: 'Global color palette for components',
+      defaultValue: 'default',
+      toolbar: {
+        title: 'Palette',
+        items: [...Object.keys(palettes)]
+      }
+    },
+    sizing: {
+      description: 'Global sizing for components',
+      defaultValue: 'default',
+      toolbar: {
+        title: 'Sizing',
+        items: [...Object.keys(sizings)]
+      }
+    },
+    typography: {
+      description: 'Global typography for components',
+      defaultValue: 'default',
+      toolbar: {
+        title: 'Typography',
+        items: [...Object.keys(typographies)]
+      }
+    },
+  }
+};
+
+export default preview;

.storybook/decorators/themeDecorator.js

@@ -1,11 +1,6 @@
 module.exports = ({ config }) => {
   config.module.rules.push({
     test: /\.(ts|tsx)$/,
-    use: [
-      {
-        loader: require.resolve('awesome-typescript-loader'),
-      },
-    ],
   });
   config.resolve.extensions.push('.ts', '.tsx');
   return config;