added eslint prettier editorconfig

.babelrc

@@ -6,6 +6,14 @@
     ],
     "plugins": [
       "@babel/plugin-proposal-object-rest-spread",
-      "@babel/plugin-proposal-class-properties"
+      "@babel/plugin-proposal-class-properties",
+      [
+        "babel-plugin-styled-components",
+        {
+          "ssr": true,
+          "displayName": true,
+          "preprocess": false
+        }
+      ]
     ]
   }

.editorconfig

@@ -0,0 +1,14 @@
+# editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc.js

@@ -0,0 +1,86 @@
+const fs = require('fs');
+const path = require('path');
+
+const prettierOptions = JSON.parse(
+  fs.readFileSync(path.resolve(__dirname, '.prettierrc'), 'utf8'),
+);
+
+module.exports = {
+  parser: 'babel-eslint',
+  extends: ['airbnb', 'prettier', 'prettier/react'],
+  plugins: ['prettier', 'react', 'react-hooks', 'jsx-a11y'],
+  env: {
+    jest: true,
+    browser: true,
+    node: true,
+    es6: true,
+  },
+  parserOptions: {
+    ecmaVersion: 6,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  rules: {
+    'prettier/prettier': ['error', prettierOptions],
+    'arrow-body-style': [2, 'as-needed'],
+    'class-methods-use-this': 0,
+    'import/imports-first': 0,
+    'import/newline-after-import': 0,
+    'import/no-dynamic-require': 0,
+    'import/no-extraneous-dependencies': 0,
+    'import/no-named-as-default': 0,
+    'import/no-unresolved': 2,
+    'import/no-webpack-loader-syntax': 0,
+    'import/prefer-default-export': 0,
+    indent: [
+      2,
+      2,
+      {
+        SwitchCase: 1,
+      },
+    ],
+    'jsx-a11y/aria-props': 2,
+    'jsx-a11y/heading-has-content': 0,
+    'jsx-a11y/label-has-associated-control': [
+      2,
+      {
+        // NOTE: If this error triggers, either disable it or add
+        // your custom components, labels and attributes via these options
+        // See https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/label-has-associated-control.md
+        controlComponents: ['Input'],
+      },
+    ],
+    'jsx-a11y/label-has-for': 0,
+    'jsx-a11y/mouse-events-have-key-events': 2,
+    'jsx-a11y/role-has-required-aria-props': 2,
+    'jsx-a11y/role-supports-aria-props': 2,
+    'max-len': 0,
+    'newline-per-chained-call': 0,
+    'no-confusing-arrow': 0,
+    'no-console': 1,
+    'no-unused-vars': 2,
+    'no-use-before-define': 0,
+    'prefer-template': 2,
+    'react/destructuring-assignment': 0,
+    'react-hooks/rules-of-hooks': 'error',
+    'react/jsx-closing-tag-location': 0,
+    'react/forbid-prop-types': 0,
+    'react/jsx-first-prop-new-line': [2, 'multiline'],
+    'react/jsx-filename-extension': 0,
+    'react/jsx-no-target-blank': 0,
+    'react/jsx-uses-vars': 2,
+    'react/require-default-props': 0,
+    'react/require-extension': 0,
+    'react/self-closing-comp': 0,
+    'react/sort-comp': 0,
+  },
+  settings: {
+    'import/resolver': {
+      webpack: {
+        config: './internals/webpack/webpack.prod.babel.js',
+      },
+    },
+  },
+};

.prettierignore

@@ -0,0 +1,7 @@
+build/
+node_modules/
+internals/generators/
+internals/scripts/
+package-lock.json
+yarn.lock
+package.json

.prettierrc

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

package.json

@@ -14,7 +14,8 @@
   "license": "ISC",
   "dependencies": {
     "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "react-dom": "^16.13.1",
+    "styled-components": "^5.1.1"
   },
   "devDependencies": {
     "@babel/core": "^7.10.5",
@@ -30,11 +31,24 @@
     "@types/node": "^14.0.24",
     "@types/react": "^16.9.43",
     "@types/react-dom": "^16.9.8",
+    "@types/styled-components": "^5.1.1",
     "babel-loader": "^8.1.0",
     "babel-plugin-react-require": "^3.1.3",
+    "babel-plugin-styled-components": "^1.10.7",
+    "circular-dependency-plugin": "^5.2.0",
     "clean-webpack-plugin": "^3.0.0",
     "cross-env": "^7.0.2",
     "css-loader": "^3.6.0",
+    "eslint": "^7.5.0",
+    "eslint-config-airbnb": "^18.2.0",
+    "eslint-config-airbnb-base": "^14.2.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-import-resolver-webpack": "^0.12.2",
+    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-jsx-a11y": "^6.3.1",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-react": "^7.20.3",
+    "eslint-plugin-react-hooks": "^4.0.8",
     "fork-ts-checker-webpack-plugin": "^5.0.9",
     "html-loader": "^1.1.0",
     "html-webpack-plugin": "^4.3.0",

src/App/index.scss

@@ -1,5 +1,7 @@
-h1 {
-    font-family: "Helvetica Neue";
-    font-weight: bold;
-    font-size: 30px;
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@900&display=swap');
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: 'Inter', sans-serif;
 }

src/App/index.tsx

@@ -1,21 +1,35 @@
-import React from "react";
-import "./index.scss";
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+import './index.scss';
 
-const App = () => {
-  const [number, setNumber] = React.useState(1);
-  const [text, setText] = React.useState("sometext");
-  const add = () => {
-    setText('asdas');
-    setNumber(number + 1);
-  };
+const shimmer = keyframes`
+  0%{background-position:0% 50%}
+  50%{background-position:100% 50%}
+  100%{background-position:0% 50%}
+`;
+
+const H1 = styled.span`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: block;
+  margin: 0;
+  font-size: 7rem;
+  line-height: 1;
+  text-align: center;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-image: linear-gradient(90deg, #ff4d4d, #f9cb28 20%, #00dfd8 60%, #007cf0);
+  background-size: 400% 400%;
+  animation: ${shimmer} 5s ease infinite;
+`;
 
+const App = () => {
   return (
     <div>
-      <h1> Welcome to React Typescript Webpack template ! </h1>
-      {number}
-      {/* {text} */}
-      <br/>
-      <button onClick={add}>Add</button>
+      <H1>React. Typescript. Webpack. </H1>
     </div>
   );
 };

webpack.config.js

@@ -1,35 +1,34 @@
-const webpack = require("webpack");
-const path = require("path");
-const { CleanWebpackPlugin } = require("clean-webpack-plugin");
-const HtmlWebpackPlugin = require("html-webpack-plugin");
-const ReactRefreshPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
-const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
+const webpack = require('webpack');
+const path = require('path');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const CircularDependencyPlugin = require('circular-dependency-plugin');
 
 module.exports = {
-  mode: "development",
+  mode: 'development',
   entry: {
-    main: path.resolve(__dirname, "./src/index.tsx"),
+    main: path.resolve(__dirname, './src/index.tsx'),
   },
   output: {
-    path: path.resolve(__dirname, "public"),
-    publicPath: "/",
-    filename: "[name].js",
-    chunkFilename: "[name].chunk.js",
+    filename: '[name].js',
+    chunkFilename: '[name].chunk.js',
   },
-  devtool: "eval",
+  devtool: 'eval',
   module: {
     rules: [
       {
         test: /\.(tsx?)$/,
         use: [
           {
-            loader: "babel-loader",
+            loader: 'babel-loader',
             options: {
-              plugins: ["react-refresh/babel"],
+              plugins: ['react-refresh/babel'],
             },
           },
           {
-            loader: "ts-loader",
+            loader: 'ts-loader',
             options: {
               // disable type checker - we will use it in fork plugin
               transpileOnly: true,
@@ -40,44 +39,45 @@ module.exports = {
       },
       {
         test: /\.(scss|css)$/,
-        use: ["style-loader", "css-loader", "sass-loader"],
+        use: ['style-loader', 'css-loader', 'sass-loader'],
         exclude: /node_modules/,
       },
       {
         test: /\.html$/,
-        use: "html-loader",
+        use: 'html-loader',
         exclude: /node_modules/,
       },
     ],
   },
   plugins: [
-    new ForkTsCheckerWebpackPlugin({
-      logger: { infrastructure: "silent", issues: "console" },
+    new ReactRefreshPlugin({
+      overlay: false,
     }),
-    new CleanWebpackPlugin(),
     new webpack.DefinePlugin({
-      "process.env": {
-        NODE_ENV: JSON.stringify("development"),
+      'process.env': {
+        NODE_ENV: JSON.stringify('development'),
       },
     }),
-    new ReactRefreshPlugin({
-      overlay: false,
+    new HtmlWebpackPlugin({ template: './index.html', inject: true }),
+    new CircularDependencyPlugin({
+      exclude: /a\.js|node_modules/, // exclude node_modules
+      failOnError: false, // show a warning when there is a circular dependency
+    }),
+    new ForkTsCheckerWebpackPlugin({
+      logger: { infrastructure: 'silent', issues: 'console' },
     }),
-    new webpack.optimize.OccurrenceOrderPlugin(true),
-    new HtmlWebpackPlugin({ template: "./index.html", inject: true }),
   ],
   resolve: {
-    extensions: [".tsx", ".ts", ".js", ".jsx"],
+    extensions: ['.tsx', '.ts', '.js', '.jsx'],
   },
   optimization: {
     splitChunks: {
       // include all types of chunks
-      chunks: "all",
+      chunks: 'all',
     },
   },
   devServer: {
-    hot: true,
     historyApiFallback: true,
-    contentBase: "./",
+    contentBase: './',
   },
 };