Feat/storybook v6 v2

.eslintrc.js

@@ -19,6 +19,7 @@ module.exports = {
     'prettier',
     'prettier/react',
     'prettier/@typescript-eslint',
+    'plugin:storybook/recommended',
   ],
   globals: {
     Atomics: 'readonly',

.storybook/addons.js

@@ -1,3 +1,2 @@
 // import '@storybook/addon-actions/register';
 // import '@storybook/addon-knobs/register';
-import 'storybook-readme/register';

.storybook/main.js

@@ -0,0 +1,31 @@
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+
+module.exports = {
+  stories: ['../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-a11y',
+  ],
+  webpackFinal: async (config, { configType }) => {
+    config.resolve.plugins = [new TsconfigPathsPlugin()];
+
+    config.module.rules = config.module.rules.map((rule) => {
+      if (rule.test && rule.test.toString().includes('svg')) {
+        const test = rule.test.toString().replace('svg|', '').replace(/\//g, '');
+        return { ...rule, test: new RegExp(test) };
+      } else {
+        return rule;
+      }
+    });
+
+    config.module.rules.push({
+      test: /\.svg$/,
+      loader: require.resolve('svg-sprite-loader'),
+    });
+
+    return config;
+  },
+  framework: '@storybook/react',
+};

.storybook/preview.js

@@ -0,0 +1,11 @@
+import '!style-loader!css-loader!./styles.css';
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};

.storybook/styles.css

@@ -0,0 +1,68 @@
+@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;800&display=swap');
+
+* {
+  box-sizing: border-box;
+  font-family: 'Nunito Sans', sans-serif;
+  -moz-osx-font-smoothing: auto;
+  -webkit-font-smoothing: antialiased;
+  margin: 0;
+  padding: 0;
+}
+
+#root {
+  padding: 15px 30px;
+}
+
+svg [fill]:not([fill='none']):not([fill^='url(']),
+symbol [fill]:not([fill='none']):not([fill^='url(']) {
+  fill: currentColor !important;
+}
+svg [stroke]:not([stroke='none']):not([stroke^='url(']),
+symbol [stroke]:not([stroke='none']):not([stroke^='url(']) {
+  stroke: currentColor !important;
+}
+
+ul {
+  list-style: none;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+}
+
+input {
+  outline: none;
+}
+
+button {
+  outline: none;
+}
+
+.mb-1 {
+  margin-bottom: 1rem !important;
+}
+
+.mr-1 {
+  margin-right: 1px !important;
+}
+
+.ml-1 {
+  margin-left: 1px !important;
+}
+
+.mt-1 {
+  margin-top: 1rem !important;
+}
+
+.justify-around {
+  justify-content: space-around;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}

babel.config.js

@@ -2,7 +2,6 @@ module.exports = {
   plugins: [
     '@babel/plugin-syntax-dynamic-import',
     '@babel/plugin-syntax-import-meta',
-    '@babel/plugin-proposal-class-properties',
     '@babel/plugin-proposal-json-strings',
     [
       'module-resolver',

declaration.d.ts

@@ -1,2 +1,3 @@
 declare module '*.scss';
 declare module '*.svg';
+declare module '*.md';

package.json

@@ -42,15 +42,14 @@
     "styled-components": ">= 5"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.0",
+    "@babel/core": "^7.19.6",
     "@babel/helper-string-parser": "^7.18.10",
-    "@babel/plugin-proposal-class-properties": "7.14.5",
     "@babel/plugin-proposal-json-strings": "7.14.5",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
     "@babel/plugin-syntax-import-meta": "7.10.4",
     "@babel/plugin-transform-react-constant-elements": "^7.14.5",
     "@babel/plugin-transform-react-inline-elements": "^7.14.5",
-    "@babel/preset-env": "^7.15.0",
+    "@babel/preset-env": "^7.18.10",
     "@babel/preset-react": "^7.14.5",
     "@babel/preset-typescript": "^7.15.0",
     "@commitlint/cli": "^13.1.0",
@@ -62,11 +61,16 @@
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.0.4",
     "@rollup/plugin-replace": "^3.0.0",
-    "@storybook/addon-actions": "^5.3.18",
-    "@storybook/addon-knobs": "^5.3.18",
-    "@storybook/addon-notes": "^5.3.18",
-    "@storybook/react": "^5.3.18",
-    "@storybook/storybook-deployer": "^2.8.10",
+    "@storybook/addon-a11y": "^6.5.15",
+    "@storybook/addon-actions": "^6.5.15",
+    "@storybook/addon-essentials": "^6.5.15",
+    "@storybook/addon-interactions": "^6.5.15",
+    "@storybook/addon-links": "^6.5.15",
+    "@storybook/builder-webpack4": "^6.5.15",
+    "@storybook/manager-webpack4": "^6.5.15",
+    "@storybook/react": "^6.5.15",
+    "@storybook/storybook-deployer": "^2.8.16",
+    "@storybook/testing-library": "^0.0.13",
     "@types/classnames": "^2.2.10",
     "@types/react": "^17.0.19",
     "@types/react-dom": "^17.0.9",
@@ -97,20 +101,18 @@
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-react": "^7.19.0",
     "eslint-plugin-react-hooks": "^4.0.2",
+    "eslint-plugin-storybook": "^0.6.10",
     "eslint-plugin-typescript-sort-keys": "^2.1.0",
     "file-loader": "^6.0.0",
     "html-loader": "^1.1.0",
     "husky": "^7.0.1",
     "lint-staged": "^11.1.2",
-    "markdown-loader": "^5.1.0",
     "mini-css-extract-plugin": "^0.9.0",
     "namor": "^2.0.2",
-    "optimize-css-assets-webpack-plugin": "^5.0.3",
     "polished": "^3.5.2",
     "postcss-loader": "^3.0.0",
     "prettier": "^2.0.4",
     "react": "^17.0.2",
-    "react-docgen-typescript-loader": "^3.4.0",
     "react-dom": "^17.0.2",
     "react-hot-loader": "^4.12.20",
     "react-router-dom": "^5.2.0",
@@ -124,24 +126,20 @@
     "rollup-plugin-typescript2": "^0.30.0",
     "sass": "^1.49.7",
     "sass-loader": "^8.0.2",
-    "storybook-readme": "^5.0.8",
     "style-loader": "^1.1.3",
     "styled-components": "^5.3.6",
     "stylelint": "^13.5.0",
     "stylelint-config-idiomatic-order": "^8.1.0",
     "stylelint-config-standard": "^20.0.0",
     "stylelint-order": "^4.0.0",
-    "svg-sprite-loader": "^5.0.0",
+    "svg-sprite-loader": "^6.0.11",
     "svgo": "^1.3.0",
     "svgo-loader": "^2.2.1",
     "terser-webpack-plugin": "^3.0.1",
     "ts-loader": "^7.0.4",
+    "tsconfig-paths-webpack-plugin": "^4.0.0",
     "ttypescript": "^1.5.13",
-    "typescript": "^4.5.5",
-    "webpack": "^4.42.1",
-    "webpack-bundle-analyzer": "^3.7.0",
-    "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.10.3"
+    "typescript": "^4.5.5"
   },
   "dependencies": {
     "@popperjs/core": "^2.11.0",
@@ -156,6 +154,7 @@
     "react-focus-lock": "^2.5.2",
     "react-popper": "^2.2.5",
     "react-text-mask": "^5.4.3",
+    "resize-observer-polyfill": "^1.5.1",
     "text-mask-addons": "^3.8.0"
   },
   "packageManager": "yarn@3.2.4"

rollup.config.js

@@ -42,6 +42,9 @@ export default {
       clean: true,
       // tsconfig: './tsconfig.json',
       typescript: ttypescript,
+      tsconfigOverride: {
+        exclude: ['node_modules', 'lib', 'stories'],
+      },
     }),
     css({
       output: path.join(paths.outputPath, 'styles.css'),

src/components/accordion/primary/index.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { Icon, Text } from 'components';
 import AnimatedHeight from 'react-animate-height';
 import cx from 'classnames';
+
 import { useAccordion } from 'components/accordion/useAccordion';
 import { useTheme } from 'utils/hooks';
 import { idGenerator } from 'utils/helpers';

src/components/accordion/secondary/index.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { Icon, Text } from 'components';
 import AnimatedHeight from 'react-animate-height';
 import cx from 'classnames';
+
 import { useAccordion } from 'components/accordion/useAccordion';
 import { useTheme } from 'utils/hooks';
 import { idGenerator } from 'utils/helpers';

src/components/avatar-group/index.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import cx from 'classnames';
+
 import { Avatar, AvatarProps } from '../../index';
 import { StyledAvatarGroup } from './style';
 

src/components/button-icon/index.tsx

@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom';
 import { useTheme } from 'utils/hooks';
 
 import cx from 'classnames';
+
 import { StyledButtonIcon } from './style';
 
 export interface ButtonIconProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {

src/components/button/button.tsx

@@ -1,4 +1,5 @@
 import cx from 'classnames';
+
 import { Icon, Text } from 'components';
 import * as React from 'react';
 import { Link } from 'react-router-dom';

src/components/checkbox/checkbox.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import cx from 'classnames';
+
 import { Icon } from 'components/icon';
 import { Text } from 'components/text';
 import { useTheme } from 'utils/hooks';

src/components/chip/index.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import cx from 'classnames';
+
 import { Text } from 'components/text';
 import { Icon, icons, IconType } from 'components/icon';
 import { useTheme } from 'utils/hooks';

src/components/dropzone/index.tsx

@@ -1,4 +1,5 @@
 import cx from 'classnames';
+
 import { Icon, Loader, Text, icons, IconType } from 'components';
 import * as React from 'react';
 import { DropzoneOptions, useDropzone } from 'react-dropzone';

src/components/form/date-input/index.tsx

@@ -1,4 +1,5 @@
 import cx from 'classnames';
+
 import { Text, TextInput } from 'components';
 
 import * as React from 'react';

src/components/form/day-picker/index.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import cx from 'classnames';
+
 import 'react-day-picker/dist/style.css';
 import { PrimaryButton, TextInput } from 'components';
 import MaskedInput from 'react-text-mask';

src/components/form/stepper/index.tsx

@@ -1,4 +1,5 @@
 import cx from 'classnames';
+
 import { Icon, Text } from 'components';
 import * as React from 'react';
 import { useTheme } from 'utils/hooks';

src/components/form/text-area/index.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import cx from 'classnames';
+
 import { Text } from 'components';
 import { useTheme } from 'utils/hooks';
 import { useCombinedRefs } from 'utils/hooks/combinedrefs';