Remove rebass, update components and stories

.babelrc

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

.eslintrc.json

@@ -12,29 +12,21 @@
     "plugin:prettier/recommended",
     "plugin:react/jsx-runtime"
   ],
-  "plugins": [
-    "@typescript-eslint", "react", "prettier"
-  ],
+  "plugins": ["@typescript-eslint", "react", "prettier"],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaFeatures": {
       "experimentalObjectRestSpread": true,
       "jsx": true
     },
-    "ecmaVersion": 2018,
+    "ecmaVersion": "latest",
     "sourceType": "module",
     "project": "./tsconfig.json"
   },
   "ignorePatterns": ["*.svg", "*.ttf", "*.woff", "*.eot", "*.md"],
   "rules": {
-    "quotes": [
-      "error",
-      "single"
-    ],
-    "semi": [
-      "error",
-      "never"
-    ],
+    "quotes": ["error", "single"],
+    "semi": ["error", "never"],
     "prettier/prettier": [
       "error",
       {
@@ -43,28 +35,36 @@
         "arrowParens": "always"
       }
     ],
-    "react/prop-types": ["warn"],
+    "react/prop-types": ["off"],
     "no-undef": "off",
     "no-unused-vars": "off",
     "@typescript-eslint/no-unused-vars": "off",
     "no-console": "warn",
     "import/no-unresolved": 0,
-    "react/jsx-filename-extension": [1, {
-      "extensions": [
-        ".ts",
-        ".tsx"
-      ]
-    }],
-    "import/extensions": ["error", "never", {"svg": "always", "ts": "always", "tsx": "always", "json": "always"}],
+    "react/jsx-filename-extension": [
+      1,
+      {
+        "extensions": [".ts", ".tsx"]
+      }
+    ],
+    "import/extensions": [
+      "error",
+      "never",
+      { "svg": "always", "ts": "always", "tsx": "always", "json": "always" }
+    ],
     "no-use-before-define": ["error", { "variables": false }],
-    "@typescript-eslint/no-use-before-define": ["error", { "variables": false }],
+    "@typescript-eslint/no-use-before-define": [
+      "error",
+      { "variables": false }
+    ],
     "no-empty-function": "warn",
     "@typescript-eslint/no-empty-function": ["warn"],
     "dot-notation": "warn",
     "react/jsx-props-no-spreading": "off",
     "import/no-extraneous-dependencies": "off",
     "react/no-array-index-key": "off",
     "react/function-component-definition": "off",
-    "react/default-props-match-prop-types": "off"
+    "react/default-props-match-prop-types": "off",
+    "react/require-default-props": [0]
   }
 }

.storybook/main.ts

@@ -0,0 +1,35 @@
+import type { StorybookConfig } from '@storybook/react-webpack5'
+const config: StorybookConfig = {
+  stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-styling',
+    '@storybook/addon-interactions',
+    '@storybook/addon-mdx-gfm',
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  // webpackFinal: async (config) => {
+  //   const assetRule = config.module.rules.find(({ test }) => test.test('.svg'))
+
+  //   const assetLoader = {
+  //     loader: assetRule.loader,
+  //     options: assetRule.options || assetRule.query,
+  //   }
+
+  //   // Merge our rule with existing assetLoader rules
+  //   config.module.rules.unshift({
+  //     test: /\.svg$/,
+  //     use: ['@svgr/webpack', assetLoader],
+  //   })
+
+  //   return config
+  // },
+}
+export default config

.storybook/preview.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import type { Preview } from '@storybook/react'
+import { ThemeProvider } from 'styled-components'
+import theme from '../src/theme/theme'
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={theme}>
+        {/* <link
+          rel="preload"
+          href="../fonts/FiraSans-Regular.woff"
+          as="font"
+          type="font/woff2"
+        /> */}
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+}
+
+export default preview

icons/tsconfig.json

@@ -6,7 +6,7 @@
     "jsx": "react",
     "module": "ESNext",
     "declaration": true,
-    "declarationDir": "src/types/icons",
+    "declarationDir": "types",
     "sourceMap": true,
     "outDir": "dist",
     "moduleResolution": "node",
@@ -15,12 +15,6 @@
     "forceConsistentCasingInFileNames": true,
     "allowJs": true
   },
-  "include": [
-    "../src/components/icons",
-    "../src/types/svg.d.ts"
-  ],
-  "exclude": [
-    "../dist",
-    "../node_modules",
-  ],
-}
+  "include": ["../src/components/icons", "../src/types/svg.d.ts"],
+  "exclude": ["../dist", "../node_modules"]
+}