Refactor

.eslintignore

@@ -0,0 +1,22 @@
+# dependencies
+node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+.idea/
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.eslintrc.json

@@ -0,0 +1,48 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": ["airbnb", "prettier", "plugin:import/typescript"],
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module",
+    "parser": "@typescript-eslint/parser"
+  },
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint", "prettier"],
+  "rules": {
+    "semi": ["error", "always"],
+    "prettier/prettier": ["error", { "endOfLine": "auto" }],
+    "react/react-in-jsx-scope": "off",
+    "react/jsx-filename-extension": [
+      "warn",
+      { "extensions": [".js", ".jsx", ".ts", ".tsx"] }
+    ],
+    "import/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        "js": "never",
+        "jsx": "never",
+        "ts": "never",
+        "tsx": "never"
+      }
+    ],
+    "react/function-component-definition": [
+      "error",
+      {
+        "namedComponents": "arrow-function",
+        "unnamedComponents": "arrow-function"
+      }
+    ],
+    "no-undef": "off",
+    "no-param-reassign": "off",
+    "no-unused-vars": "off",
+    "no-nested-ternary": "off",
+    "radix": "off",
+    "consistent-return": "off",
+    "react/prop-types": "off",
+    "react/jsx-props-no-spreading": "off"
+  }
+}

.prettierignore

@@ -0,0 +1,22 @@
+# dependencies
+node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+.idea/
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.prettierrc.json

@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "useTabs": false,
+  "jsxBracketSameLine": true
+}

commitlint.config.js

@@ -1 +1 @@
-module.exports = { extends: ['@commitlint/config-conventional'] }
+module.exports = { extends: ["@commitlint/config-conventional"] };

config/build/buildDevServer.ts

@@ -1,8 +1,9 @@
 import type { Configuration as DevServerConfiguration } from "webpack-dev-server";
-import { BuildOptions } from '../../types/config';
 
-export function buildDevServer(options: BuildOptions): DevServerConfiguration {
-  const { paths } = options
+import { BuildOptions } from "../types/types";
+
+const buildDevServer = (options: BuildOptions): DevServerConfiguration => {
+  const { paths } = options;
 
   return {
     port: options.port,
@@ -11,6 +12,8 @@ export function buildDevServer(options: BuildOptions): DevServerConfiguration {
     historyApiFallback: true,
     static: {
       directory: paths.output,
-    }
-  }
-}
+    },
+  };
+};
+
+export default buildDevServer;

config/build/buildLoaders.ts

@@ -1,43 +1,41 @@
-import webpack from 'webpack';
+import webpack from "webpack";
 import MiniCssExtractPlugin from "mini-css-extract-plugin";
-import { BuildOptions } from '../../types/config';
 
-export function buildLoaders({ isDev }: BuildOptions): webpack.RuleSetRule[] {
+import { BuildOptions } from "../types/types";
+
+const buildLoaders = ({ isDev }: BuildOptions): webpack.RuleSetRule[] => {
   const typescriptLoader = {
     test: /\.tsx?$/,
-    use: 'ts-loader',
+    use: "ts-loader",
     exclude: /node_modules/,
   };
 
   const styleLoader = {
     test: /\.css$/,
-    use: [
-      isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
-      'css-loader',
-    ],
+    use: [isDev ? "style-loader" : MiniCssExtractPlugin.loader, "css-loader"],
   };
 
   const svgLoader = {
     test: /\.svg$/,
-    use: '@svgr/webpack',
+    use: "@svgr/webpack",
   };
 
   const graphicsLoader = {
     test: /\.(png|jpe?g|gif)$/i,
     use: {
-      loader: 'file-loader',
+      loader: "file-loader",
       options: {
-        outputPath: 'assets',
+        outputPath: "assets",
       },
     },
   };
 
   const fontsLoader = {
     test: /\.(ttf)$/i,
     use: {
-      loader: 'file-loader',
+      loader: "file-loader",
       options: {
-        outputPath: 'fonts',
+        outputPath: "fonts",
       },
     },
   };
@@ -46,12 +44,12 @@ export function buildLoaders({ isDev }: BuildOptions): webpack.RuleSetRule[] {
     test: /\.m?js$/,
     exclude: /node_modules/,
     use: {
-      loader: 'babel-loader',
+      loader: "babel-loader",
       options: {
-        presets: [
-          ['@babel/preset-env', { targets: 'defaults' }],
-        ],
-        plugins: [isDev && require.resolve('react-refresh/babel')].filter(Boolean),
+        presets: [["@babel/preset-env", { targets: "defaults" }]],
+        plugins: [isDev && require.resolve("react-refresh/babel")].filter(
+          Boolean
+        ),
       },
     },
   };
@@ -64,4 +62,6 @@ export function buildLoaders({ isDev }: BuildOptions): webpack.RuleSetRule[] {
     styleLoader,
     babelLoader,
   ];
-}
+};
+
+export default buildLoaders;

config/build/buildPlugins.ts

@@ -1,29 +1,33 @@
 import webpack from "webpack";
-import HtmlWebpackPlugin from 'html-webpack-plugin';
-import MiniCssExtractPlugin from 'mini-css-extract-plugin';
-import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
+import HtmlWebpackPlugin from "html-webpack-plugin";
+import MiniCssExtractPlugin from "mini-css-extract-plugin";
+import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin";
 
-import { BuildOptions } from "../../types/config";
+import { BuildOptions } from "../types/types";
 
-export function buildPlugins(options: BuildOptions): webpack.WebpackPluginInstance[] {
-  const { paths } = options
+const buildPlugins = (
+  options: BuildOptions
+): webpack.WebpackPluginInstance[] => {
+  const { paths } = options;
 
   const plugins = [
     new MiniCssExtractPlugin({
-      filename: 'css/[name].[contenthash:8].css',
-      chunkFilename: 'css/[name].[contenthash:8].css',
+      filename: "css/[name].[contenthash:8].css",
+      chunkFilename: "css/[name].[contenthash:8].css",
     }),
     new webpack.ProgressPlugin(),
     new HtmlWebpackPlugin({
       template: paths.html,
-      favicon: "./src/shared/assets/icons/logo.svg"
+      favicon: "./src/shared/assets/icons/logo.svg",
     }),
-  ]
+  ];
 
   if (options.isDev) {
-    plugins.push(new webpack.HotModuleReplacementPlugin())
-    plugins.push(new ReactRefreshWebpackPlugin())
+    plugins.push(new webpack.HotModuleReplacementPlugin());
+    plugins.push(new ReactRefreshWebpackPlugin());
   }
 
   return plugins;
-}
+};
+
+export default buildPlugins;

config/build/buildResolve.ts

@@ -1,7 +1,7 @@
-import webpack from 'webpack';
+import webpack from "webpack";
 
-export function buildResolve(): webpack.ResolveOptions {
-  return {
-    extensions: ['.tsx', '.ts', '.js'],
-  }
-}
+const buildResolve = (): webpack.ResolveOptions => ({
+  extensions: [".tsx", ".ts", ".js"],
+});
+
+export default buildResolve;

config/build/buildWebpackConfig.ts

@@ -1,29 +1,31 @@
-import webpack from 'webpack';
+import webpack from "webpack";
 
-import { BuildOptions } from '../../types/config';
+import buildLoaders from "./buildLoaders";
+import buildResolve from "./buildResolve";
+import buildPlugins from "./buildPlugins";
+import buildDevServer from "./buildDevServer";
 
-import { buildLoaders } from './buildLoaders';
-import { buildResolve } from './buildResolve';
-import { buildPlugins } from './buildPlugins';
-import { buildDevServer } from './buildDevServer';
+import { BuildOptions } from "../types/types";
 
-export function buildWebpacConfig(options: BuildOptions): webpack.Configuration {
-  const { paths, mode, isDev } = options
+const buildWebpacConfig = (options: BuildOptions): webpack.Configuration => {
+  const { paths, mode, isDev } = options;
 
   return {
     mode,
     entry: paths.entry,
     devServer: isDev ? buildDevServer(options) : undefined,
     output: {
-      filename: '[name].[contenthash].js',
+      filename: "[name].[contenthash].js",
       path: paths.output,
-      publicPath: '/',
+      publicPath: "/",
       clean: true,
     },
     module: {
-      rules: buildLoaders(options)
+      rules: buildLoaders(options),
     },
     resolve: buildResolve(),
     plugins: buildPlugins(options),
-  }
-}
+  };
+};
+
+export default buildWebpacConfig;

types/config.ts → config/types/types.ts

@@ -1,4 +1,4 @@
-export type BuildMode = 'development' | 'production'
+export type BuildMode = "development" | "production";
 
 export interface BuildPaths {
   entry: string;
@@ -16,4 +16,4 @@ export interface BuildOptions {
 export interface BuildEnv {
   mode?: BuildMode;
   port?: number;
-}
+}