wip

.eslintrc.js

@@ -11,10 +11,10 @@ module.exports = {
                 },
                 'newlines-between': 'always',
                 groups: [['builtin', 'external'], 'internal', 'parent', 'sibling', 'index'],
-                warnOnUnassignedImports: true,
+                // warnOnUnassignedImports: true,
                 pathGroups: [
                     {
-                        pattern: '*.s?css$',
+                        pattern: '.scss',
                         group: 'index',
                     },
                 ],

demo/.babelrc.json

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

demo/.storybook/global.css

@@ -0,0 +1,3 @@
+.sb-show-main.sb-main-centered #storybook-root {
+    padding: 0;
+}

demo/.storybook/main.ts

@@ -0,0 +1,45 @@
+import {join, dirname} from 'path';
+
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+const config = {
+    stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+    addons: [
+        '@storybook/addon-links',
+        '@storybook/addon-essentials',
+        {
+            name: '@storybook/addon-styling',
+            options: {
+                sass: {
+                    implementation: require("sass"),
+                },
+            }
+        },
+        '@storybook/addon-onboarding',
+        '@storybook/addon-interactions',
+
+    ],
+    framework: {
+        name: '@storybook/react-webpack5',
+        options: {},
+    },
+    docs: {
+        autodocs: 'tag',
+    },
+    async webpackFinal(config, { configType }) {
+        config.resolve = config.resolve || {};
+        config.resolve.alias = {
+            ...(config.resolve.alias || {}),
+            'react': dirname(require.resolve('react')),
+            'react-dom': dirname(require.resolve('react-dom')),
+        };
+        config.module.rules.push({
+            test: /\.svg$/,
+            type: 'javascript/auto',
+            use: ['@svgr/webpack'],
+        });
+
+        return config;
+    }
+};
+
+export default config;

demo/.storybook/preview.ts

@@ -0,0 +1,18 @@
+/** @type { import('@storybook/react').Preview } */
+import { Preview } from '@storybook/react';
+
+import './global.css';
+
+const preview: Preview = {
+    parameters: {
+        actions: {argTypesRegex: '^on[A-Z].*'},
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/,
+            },
+        },
+    },
+};
+
+export default preview;