refactor(eslint): change all eslint config

client/.eslintrc.js

@@ -0,0 +1,63 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+    jest: true,
+  },
+  extends: [
+    "plugin:react/recommended",
+    "plugin:storybook/recommended",
+  ],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: "latest",
+    sourceType: "module",
+  },
+  plugins: ["react", "@typescript-eslint", "react-hooks", "import"],
+  rules: {
+    "import/no-default-export": "warn",
+    "react/jsx-indent": [2, 2],
+    "react/jsx-indent-props": [2, 2],
+    indent: [2, 2],
+    "react/jsx-filename-extension": [
+      2,
+      {
+        extensions: [".js", ".jsx", ".tsx"],
+      },
+    ],
+    "import/no-unresolved": "off",
+    "import/prefer-default-export": "off",
+    "no-unused-vars": "warn",
+    "react/require-default-props": "off",
+    "react/react-in-jsx-scope": "off",
+    "react/jsx-props-no-spreading": "warn",
+    "react/function-component-definition": "off",
+    "no-shadow": "off",
+    "import/extensions": "off",
+    "import/no-extraneous-dependencies": "off",
+    "no-underscore-dangle": "off",
+    "max-len": [
+      "error",
+      {
+        ignoreComments: true,
+        code: 100,
+      },
+    ],
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "error",
+  },
+  globals: {
+    __IS_DEV__: true,
+  },
+  overrides: [
+    {
+      files: ["**/src/**/*.{test,stories}.{ts,tsx}"],
+      rules: {
+        "max-len": "off",
+      },
+    },
+  ],
+};

client/.prettierrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-  printWidth: 100,
+  printWidth: 90,
   trailingComma: 'all',
   bracketSpacing: true,
   jsxBracketSameLine: false,
@@ -11,4 +11,4 @@ module.exports = {
   tabWidth: 2,
   useTabs: false,
   arrowParens: 'always',
-};
+}

client/config/build/buildDevServer.ts

@@ -2,10 +2,10 @@ import { Configuration as DevServerConfiguration } from 'webpack-dev-server'
 import { BuildOptions } from './types/config'
 
 export function buildDevServer(options: BuildOptions): DevServerConfiguration {
-    return {
-        port: options.port,
-        open: true,
-        historyApiFallback: true,
-        hot: true,
-    }
+  return {
+    port: options.port,
+    open: true,
+    historyApiFallback: true,
+    hot: true,
+  }
 }

client/config/build/buildLoaders.ts

@@ -3,38 +3,38 @@ import { buildCssLoader } from "./loaders/buildCssLoader";
 import { BuildOptions } from "./types/config";
 
 export function buildLoaders(optionsBuild: BuildOptions): webpack.RuleSetRule[] {
-    const babelLoader = {
-        test: /\.(js|ts|jsx|tsx)$/,
-        exclude: /node_modules/,
-        use: {
-            loader: "babel-loader",
-            options: {
-                presets: ["@babel/preset-env"],
-            },
-        },
-    };
+  const babelLoader = {
+    test: /\.(js|ts|jsx|tsx)$/,
+    exclude: /node_modules/,
+    use: {
+      loader: "babel-loader",
+      options: {
+        presets: ["@babel/preset-env"],
+      },
+    },
+  };
 
-    const svgLoader = {
-        test: /\.svg$/,
-        use: ["@svgr/webpack"],
-    };
+  const svgLoader = {
+    test: /\.svg$/,
+    use: ["@svgr/webpack"],
+  };
 
-    const fileLoader = {
-        test: /\.(png|jpe?g|gif|woff2|woff)$/i,
-        use: [
-            {
-                loader: "file-loader",
-            },
-        ],
-    };
+  const fileLoader = {
+    test: /\.(png|jpe?g|gif|woff2|woff)$/i,
+    use: [
+      {
+        loader: "file-loader",
+      },
+    ],
+  };
 
-    const typescriptLoader = {
-        test: /\.tsx?$/,
-        use: "ts-loader",
-        exclude: /node_modules/,
-    };
+  const typescriptLoader = {
+    test: /\.tsx?$/,
+    use: "ts-loader",
+    exclude: /node_modules/,
+  };
 
-    const cssLoaders = buildCssLoader(optionsBuild.isDev);
+  const cssLoaders = buildCssLoader(optionsBuild.isDev);
 
-    return [fileLoader, svgLoader, babelLoader, typescriptLoader, cssLoaders];
+  return [fileLoader, svgLoader, babelLoader, typescriptLoader, cssLoaders];
 }

client/config/build/buildPlugins.ts

@@ -7,33 +7,33 @@ import { BundleAnalyzerPlugin } from "webpack-bundle-analyzer"
 import { BuildOptions } from "./types/config"
 
 export function buildPlugins({
-    paths,
-    isDev,
+  paths,
+  isDev,
 }: BuildOptions): webpack.WebpackPluginInstance[] {
-    const plugins = [
-        new Dotenv(),
-        new HTMLWebpackPlugin({
-            template: paths.html,
-        }),
-        new webpack.ProgressPlugin(),
-        new MiniCssExtractPlugin({
-            chunkFilename: "[name].css",
-            filename: "css/[name].[contenthash:8].css",
-        }),
-        new webpack.DefinePlugin({
-            __IS_DEV__: JSON.stringify(isDev),
-        }),
-    ];
+  const plugins = [
+    new Dotenv(),
+    new HTMLWebpackPlugin({
+      template: paths.html,
+    }),
+    new webpack.ProgressPlugin(),
+    new MiniCssExtractPlugin({
+      chunkFilename: "[name].css",
+      filename: "css/[name].[contenthash:8].css",
+    }),
+    new webpack.DefinePlugin({
+      __IS_DEV__: JSON.stringify(isDev),
+    }),
+  ];
 
-    if (isDev) {
-        plugins.push(new webpack.HotModuleReplacementPlugin());
-        plugins.push(
-            new BundleAnalyzerPlugin({
-                openAnalyzer: false,
-            })
-        );
-        plugins.push(new ReactRefreshWebpackPlugin());
-    }
+  if (isDev) {
+    plugins.push(new webpack.HotModuleReplacementPlugin());
+    plugins.push(
+      new BundleAnalyzerPlugin({
+        openAnalyzer: false,
+      })
+    );
+    plugins.push(new ReactRefreshWebpackPlugin());
+  }
 
-    return plugins;
+  return plugins;
 }

client/config/build/buildResolvers.ts

@@ -2,11 +2,11 @@ import { ResolveOptions } from 'webpack'
 import { BuildOptions } from './types/config'
 
 export function buildResolvers(options: BuildOptions): ResolveOptions {
-    return {
-        extensions: ['.tsx', '.ts', '.js', '.jsx'],
-        preferAbsolute: true,
-        modules: [options.paths.src, 'node_modules'],
-        mainFiles: ['index'],
-        alias: {},
-    }
+  return {
+    extensions: ['.tsx', '.ts', '.js', '.jsx'],
+    preferAbsolute: true,
+    modules: [options.paths.src, 'node_modules'],
+    mainFiles: ['index'],
+    alias: {},
+  }
 }