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',
+ },
+ },
+}