Merge pull request #22 from davidG999/refactor

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;
-}
+}