Merge pull request #182 from thoughtindustries/CLM-7570-convert-story…

…book-to-storybook-3

Upgrade Story Component Format

.babelrc.json

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

.eslintrc.json

@@ -10,7 +10,8 @@
     "plugin:react/recommended",
     "plugin:react-hooks/recommended",
     "plugin:@typescript-eslint/recommended",
-    "plugin:prettier/recommended"
+    "plugin:prettier/recommended",
+    "plugin:storybook/recommended"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
@@ -20,12 +21,27 @@
     "ecmaVersion": 12,
     "sourceType": "module"
   },
-  "plugins": ["react", "@typescript-eslint"],
+  "plugins": [
+    "react",
+    "@typescript-eslint"
+  ],
   "rules": {
-    "react/jsx-curly-brace-presence": ["error", { "props": "never" }],
+    "react/jsx-curly-brace-presence": [
+      "error",
+      {
+        "props": "never"
+      }
+    ],
     "@typescript-eslint/no-var-requires": 0,
-    "@typescript-eslint/no-explicit-any": ["off"],
-    "@typescript-eslint/ban-ts-comment": ["error", {"ts-ignore":"allow-with-description"}]
+    "@typescript-eslint/no-explicit-any": [
+      "off"
+    ],
+    "@typescript-eslint/ban-ts-comment": [
+      "error",
+      {
+        "ts-ignore": "allow-with-description"
+      }
+    ]
   },
   "settings": {
     "react": {

.storybook/main.ts

@@ -0,0 +1,16 @@
+import type { StorybookConfig } from '@storybook/types';
+const config: StorybookConfig = {
+  stories: ['../packages/'],
+  staticDirs: ['./public'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-controls',
+    'storybook-addon-apollo-client',
+    '@storybook/addon-toolbars'
+  ],
+  framework: '@storybook/react-vite',
+  docs: {
+    autodocs: true
+  }
+};
+export default config;

.storybook/manager-head.html

@@ -0,0 +1 @@
+<link rel="favicon" href="/favicon.ico">

.storybook/manager.ts

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

.storybook/preview.tsx

@@ -0,0 +1,55 @@
+import React, { Suspense, useEffect } from 'react';
+import { I18nextProvider } from 'react-i18next';
+import './style.css';
+import { MockedProvider } from '@apollo/client/testing';
+import { i18n } from '../i18n/i18n';
+import { cookieDecorator } from 'storybook-addon-cookie';
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/
+    }
+  },
+  apolloClient: {
+    MockedProvider
+  },
+  i18n,
+  locale: 'en'
+};
+
+const withI18next = (Story, context) => {
+  const { locale } = context.globals;
+
+  useEffect(() => {
+    i18n.changeLanguage(locale);
+  }, [locale]);
+  return (
+    <Suspense fallback={<div>loading translations...</div>}>
+      <I18nextProvider i18n={i18n}>
+        <Story />
+      </I18nextProvider>
+    </Suspense>
+  );
+};
+
+export const globalTypes = {
+  locale: {
+    name: 'Locale',
+    description: 'Internationalization locale',
+    defaultValue: 'en',
+    toolbar: {
+      icon: 'globe',
+      items: [{ value: 'en', right: '🇺🇸', title: 'English' }]
+    }
+  },
+  ['addon-apolloClient/queries']: {
+    name: 'Apollo client addon queries',
+    description: 'Apollo client addon queries',
+    defaultValue: []
+  }
+};
+
+export const decorators = [cookieDecorator, withI18next];

.storybook/theme.ts

@@ -0,0 +1,8 @@
+import { create } from '@storybook/theming';
+
+export default create({
+  base: 'light',
+  brandTitle: 'Thought Industries',
+  brandUrl: 'https://developer.thoughtindustries.com/',
+  brandTarget: '_self'
+});