updated storybook to v7 + tailwind refactor + fixes

.babelrc.json

@@ -0,0 +1,20 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    "babel-plugin-twin",
+    "babel-plugin-macros",
+    "babel-plugin-styled-components"
+  ]
+}

.eslintrc.js

@@ -1,28 +1,35 @@
 module.exports = {
   env: {
     browser: true,
-    es2021: true,
+    es2021: true
   },
   extends: [
     'eslint:recommended',
     'plugin:react/recommended',
     'plugin:@typescript-eslint/recommended',
-    'eslint-config-prettier',
+    'plugin:prettier/recommended',
+    'plugin:storybook/recommended'
   ],
   settings: {
     react: {
-      version: 'detect',
-    },
+      version: 'detect'
+    }
   },
   overrides: [],
   parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaVersion: 'latest',
-    sourceType: 'module',
+    sourceType: 'module'
   },
-  plugins: ['react', '@typescript-eslint'],
+  plugins: [
+    'react',
+    '@typescript-eslint',
+    'prettier'
+  ],
   rules: {
     '@typescript-eslint/no-explicit-any': 0,
     '@typescript-eslint/no-inferrable-types': 0,
-  },
-}
+    "prettier/prettier": "error",
+    "react/no-unknown-property": ['error', { ignore: ['css', 'tw'] }]
+  }
+};

.npmrc

@@ -1,2 +1,3 @@
 @fortawesome:registry=https://npm.fontawesome.com/
-//npm.fontawesome.com/:_authToken=${FONTAWESOME_NPM_AUTH_TOKEN}
+//npm.fontawesome.com/:_authToken=66232F27-0793-43EE-9BB9-70C725D838D5
+legacy-peer-deps=true

.storybook/main.js

@@ -7,12 +7,14 @@ module.exports = {
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
-    "storybook-addon-designs",
     "storybook-dark-mode",
-    "@react-theming/storybook-addon"
+    "@storybook/addon-mdx-gfm"
   ],
-  "framework": "@storybook/react",
-  "core": {
-    "builder": "@storybook/builder-webpack5"
+  "framework": {
+    name: "@storybook/react-webpack5",
+    options: {}
+  },
+  docs: {
+    autodocs: true
   }
-}
+};

.storybook/preview.js

@@ -1,11 +1,9 @@
 
-import { addDecorator, addParameters } from "@storybook/react";
 import { ThemeProvider } from 'styled-components';
 import { themes as theming } from '@storybook/theming';
-import { withThemes } from '@react-theming/storybook-addon';
 
-import { themes, themeList } from '../src/themes';
-import { GlobalStyle } from '../src/styles';
+import { themes } from '../src/themes';
+import { GlobalStyles } from '../src/styles';
 import logoDark from '../assets/img/aleph-dark.svg';
 import logoLight from '../assets/img/aleph-light.svg';
 
@@ -56,22 +54,7 @@ export const args = {
   color: 'white'
 };
 
-const onThemeSwitch = context => {
-  const { theme } = context;
-  const background = theme.color.background
-
-  return {
-    parameters: {
-      backgrounds: {
-        default: background,
-      },
-      // Pass backgrounds: null to disable background switching at all
-    }
-  }
-};
-
-
-addParameters({
+export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {
     matchers: {
@@ -83,7 +66,7 @@ addParameters({
   darkMode: {
     current: 'dark',
     // Override the default dark theme
-    dark: { 
+    dark: {
       ...theming.dark,
       ...getThemeColors(themes.alephDark)
     },
@@ -98,16 +81,39 @@ addParameters({
     inlineStories: false,
     // https://github.com/storybookjs/storybook/issues/8112#issuecomment-1292728430
     iframeHeight: 500,
-    theme: { 
+    theme: {
       ...theming.dark,
       ...getThemeColors(themes.alephDark)
     },
   }
-})
+}
+
+export const globalTypes = {
+  theme: {
+    name: 'Theme',
+    description: 'Platform Theme',
+    defaultValue: 'dark',
+    toolbar: {
+      icon: 'paintbrush',
+      items: [
+        { value: 'dark', title: 'Dark' },
+        { value: 'light', title: 'Light' },
+      ],
+    },
+  },
+}
+
+// const publicThemes = themeList.filter(t => t.name.indexOf('aleph') === -1)
 
-const publicThemes = themeList.filter(t => t.name.indexOf('aleph') === -1)
-const themingDecorator = withThemes(ThemeProvider, publicThemes, { onThemeSwitch });
-const globalCssDecorator = (story) => <><GlobalStyle />{story()}</>
+const themingDecorator = (Story, context) => (
+  <>
+    <ThemeProvider theme={themes[context.globals.theme]}>
+      <GlobalStyles />
+      <Story />
+    </ThemeProvider>
+  </>
+)
 
-addDecorator(globalCssDecorator);
-addDecorator(themingDecorator);
+export const decorators = [
+  themingDecorator
+]