Setup the project

.eslintrc.json

@@ -0,0 +1,84 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "node": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:storybook/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["react", "@typescript-eslint", "prettier"],
+  "ignorePatterns": [".husky/**", "out/**", "build/**"],
+  "rules": {
+    "@typescript-eslint/no-explicit-any": "warn",
+    "react/jsx-filename-extension": [
+      1,
+      {
+        "extensions": [".ts", ".tsx", ".jsx"]
+      }
+    ],
+    "import/extensions": "off",
+    "react/prop-types": "off",
+    "jsx-a11y/anchor-is-valid": "off",
+    "react/jsx-props-no-spreading": [
+      "error",
+      {
+        "custom": "ignore"
+      }
+    ],
+    "prettier/prettier": [
+      "error",
+      {
+        "endOfLine": "auto"
+      }
+    ],
+    "react/no-unescaped-entities": "off",
+    "import/no-cycle": [
+      0,
+      {
+        "ignoreExternal": true
+      }
+    ],
+    "prefer-const": "off",
+    "no-use-before-define": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "no-useless-escape": "off",
+    "no-underscore-dangle": "off",
+    "react/require-default-props": "off",
+    "react-hooks/exhaustive-deps": "off",
+    "class-methods-use-this": "off",
+    "no-shadow": "off",
+    "import/prefer-default-export": "off",
+    "camelcase": "off",
+    "@typescript-eslint/no-var-requires": "off",
+    "global-require": "off",
+    "radix": "off",
+    "arrow-body-style": "off",
+    "jsx-a11y/no-static-element-interactions": "off",
+    "jsx-a11y/click-events-have-key-events": "off",
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off"
+  },
+  "settings": {
+    "import/resolver": {
+      "babel-module": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      },
+      "node": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"],
+        "paths": ["src"]
+      }
+    }
+  }
+}

.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "trailingComma": "all",
+  "singleQuote": false,
+  "printWidth": 120,
+  "tabWidth": 2
+}

.storybook/main.js

@@ -0,0 +1,19 @@
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "@storybook/preset-create-react-app",
+    "storybook-addon-react-router-v6"
+  ],
+
+  "framework": {
+    name: "@storybook/react-webpack5",
+    options: {}
+  }
+}

.storybook/preview.js

@@ -0,0 +1,51 @@
+import { useMemo } from "react";
+import { CssBaseline, ThemeProvider, createTheme } from "@mui/material";
+
+import { getTheme } from "../src/lib/theme/theme";
+import { mutateFontSizeResponsiveness } from "../src/lib/theme/responsiveTypography";
+
+export const globalTypes = {
+  theme: {
+    name: "Theme",
+    title: "Theme",
+    description: "Theme for your components",
+    defaultValue: "light",
+    toolbar: {
+      icon: "paintbrush",
+      dynamicTitle: true,
+      items: [
+        { value: "light", left: "☀️", title: "Light mode" },
+        { value: "dark", left: "🌙", title: "Dark mode" },
+      ],
+    },
+  },
+};
+
+export const withMuiTheme = (Story, context) => {
+  const { theme: themeKey } = context.globals;
+
+  const theme = useMemo(() => {
+    let theme = createTheme(getTheme(themeKey)) || createTheme(getTheme("light"));
+    theme = mutateFontSizeResponsiveness(theme);
+    return theme;
+  }, [themeKey]);
+
+  return (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <Story />
+    </ThemeProvider>
+  );
+};
+
+export const decorators = [withMuiTheme];
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};