Move components docs to Storybook

.babelrc

@@ -1,39 +1,67 @@
 {
+  "sourceType": "unambiguous",
   "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "shippedProposals": true,
+        "loose": true
+      }
+    ],
     "@babel/preset-react",
-    "@babel/env"
+    "@babel/preset-typescript"
   ],
   "plugins": [
-    "@babel/plugin-syntax-dynamic-import",
-    "@babel/plugin-syntax-import-meta",
-    "@babel/plugin-proposal-class-properties",
-    "@babel/plugin-proposal-json-strings",
+    "@babel/plugin-transform-shorthand-properties",
+    "@babel/plugin-transform-block-scoping",
     [
       "@babel/plugin-proposal-decorators",
       {
         "legacy": true
       }
     ],
-    "@babel/plugin-proposal-function-sent",
-    "@babel/plugin-proposal-export-namespace-from",
-    "@babel/plugin-proposal-numeric-separator",
-    "@babel/plugin-proposal-throw-expressions",
+    [
+      "@babel/plugin-proposal-class-properties",
+      {
+        "loose": true
+      }
+    ],
+    [
+      "@babel/plugin-proposal-private-methods",
+      {
+        "loose": true
+      }
+    ],
     "@babel/plugin-proposal-export-default-from",
-    "@babel/plugin-proposal-logical-assignment-operators",
-    "@babel/plugin-proposal-optional-chaining",
+    "@babel/plugin-syntax-dynamic-import",
     [
-      "@babel/plugin-proposal-pipeline-operator",
+      "@babel/plugin-proposal-object-rest-spread",
       {
-        "proposal": "minimal"
+        "loose": true,
+        "useBuiltIns": true
       }
     ],
+    "@babel/plugin-transform-classes",
+    "@babel/plugin-transform-arrow-functions",
+    "@babel/plugin-transform-parameters",
+    "@babel/plugin-transform-destructuring",
+    "@babel/plugin-transform-spread",
+    "@babel/plugin-transform-for-of",
+    "babel-plugin-macros",
+    "@babel/plugin-proposal-optional-chaining",
     "@babel/plugin-proposal-nullish-coalescing-operator",
-    "@babel/plugin-proposal-do-expressions",
-    "@babel/plugin-proposal-function-bind",
+    [
+      "babel-plugin-polyfill-corejs3",
+      {
+        "method": "usage-global",
+        "absoluteImports": "core-js",
+        "version": "3.18.3"
+      }
+    ],
     ["@babel/plugin-transform-runtime",
       {
         "regenerator": true
       }
     ]
   ]
-}
+}

.eslintrc.json

@@ -0,0 +1,24 @@
+{
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended",
+        "plugin:storybook/recommended",
+        "plugin:prettier/recommended"
+    ],
+    "parser": "@babel/eslint-parser",
+    "plugins": ["@babel", "testing-library"],
+    "env": {
+        "jest": true,
+        "browser": true
+    },
+    "settings": {
+        "react": {
+            "version": "detect"
+        }
+    },
+    "rules": {
+        "react/jsx-key": "off",
+        "react/jsx-curly-spacing": [2, "never", { "allowMultiline": true }],
+        "prettier/prettier": ["error", {}, { "usePrettierrc": true }]
+    }
+}

.gitignore

@@ -1,5 +1,6 @@
 node_modules
 package-lock.json
+.DS_Store
 lib
 dist
 .idea

.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  "bracketSameLine": false,
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+}

.storybook/main.js

@@ -0,0 +1,46 @@
+const path = require('path')
+
+module.exports = {
+    stories: [
+        '../src/**/*.stories.mdx',
+        '../src/**/*.stories.@(js|jsx|ts|tsx)'
+    ],
+    addons: [
+        '@storybook/addon-links',
+        '@storybook/addon-essentials',
+        '@storybook/addon-interactions',
+        '@storybook/addon-a11y',
+        '@storybook/preset-scss',
+        {
+            /**
+             * Fix Storybook issue with PostCSS@8
+             * @see https://github.com/storybookjs/storybook/issues/12668#issuecomment-773958085
+             */
+            name: '@storybook/addon-postcss',
+            options: {
+                postcssLoaderOptions: {
+                    implementation: require('postcss'),
+                },
+            },
+        },
+    ],
+    framework: '@storybook/react',
+    core: {
+        builder: 'webpack5',
+    },
+    webpackFinal: (config, { configType }) => {
+        /**
+         * Add support for alias-imports
+         * @see https://github.com/storybookjs/storybook/issues/11989#issuecomment-715524391
+         */
+        config.resolve.alias = {
+            ...config.resolve?.alias,
+            '@': [
+                path.resolve(__dirname, '../src/'),
+                path.resolve(__dirname, '../')
+            ],
+        }
+
+        return config;
+    },
+}

.storybook/preview.js

@@ -0,0 +1,18 @@
+import '../src/styles/scss/index.scss';
+
+export const parameters = {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+        matchers: {
+            color: /(background|color|fill)$/i,
+            date: /Date$/,
+        },
+    },
+    options: {
+        storySort: {
+            method: 'alphabetical',
+            order: ['Home', 'Components', 'Services', 'Templates', '*', 'WIP'],
+            locales: 'en-US',
+        },
+    },
+}