just copied the started (not all the files)

.editorconfig

@@ -0,0 +1,11 @@
+root = true
+
+[*.{js,jsx,ts,tsx,css,scss,html,md,json}]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+charset = utf-8
+
+[Makefile]
+indent_style = tab

.eslintrc.js

@@ -0,0 +1,193 @@
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: 'module',
+    project: './tsconfig.json',
+  },
+  ignorePatterns: ['/*.*'],
+  extends: [
+    'airbnb-typescript',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:@typescript-eslint/recommended-requiring-type-checking',
+    'plugin:eslint-comments/recommended',
+    'plugin:jest/recommended',
+    'plugin:promise/recommended',
+    'plugin:unicorn/recommended',
+    'prettier',
+    'plugin:storybook/recommended',
+  ],
+  plugins: [
+    '@typescript-eslint',
+    'eslint-comments',
+    'simple-import-sort',
+    'import',
+    'jest',
+    'jsx-a11y',
+    'promise',
+    'react',
+    'react-hooks',
+    'unicorn',
+    'prettier',
+  ],
+  env: {
+    node: true,
+    browser: true,
+    jest: true,
+  },
+  settings: {
+    react: {
+      pragma: 'React',
+      version: 'detect',
+    },
+  },
+  rules: {
+    'prettier/prettier': 'error',
+    // Too restrictive, writing ugly code to defend against a very unlikely scenario: https://eslint.org/docs/rules/no-prototype-builtins
+    'no-prototype-builtins': 'off',
+    // https://stackoverflow.com/a/64024916/286387
+    'no-use-before-define': 'off',
+    // Allow for..of syntax
+    'no-restricted-syntax': [
+      'error',
+      'ForInStatement',
+      'LabeledStatement',
+      'WithStatement',
+    ],
+    // https://basarat.gitbooks.io/typescript/docs/tips/defaultIsBad.html
+    'import/prefer-default-export': 'off',
+    'import/no-default-export': 'off',
+    // It's not accurate in the monorepo style
+    'import/no-extraneous-dependencies': 'off',
+    // TODO set off only for TS and JS modules
+    'import/extensions': 'off',
+    'import/first': 'error',
+    'import/newline-after-import': 'error',
+    'import/no-duplicates': 'error',
+    'simple-import-sort/imports': 'error',
+    'simple-import-sort/exports': 'error',
+    // Too restrictive: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/destructuring-assignment.md
+    'react/destructuring-assignment': 'off',
+    'react/prop-types': 'off',
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'warn',
+    // No jsx extension: https://github.com/facebook/create-react-app/issues/87#issuecomment-234627904
+    'react/jsx-filename-extension': 'off',
+    'react/require-default-props': 'off',
+    'react/jsx-props-no-spreading': 'off',
+    'react/jsx-uses-react': 'off',
+    'react/react-in-jsx-scope': 'off',
+
+    // Allow most functions to rely on type inference. If the function is exported, then `@typescript-eslint/explicit-module-boundary-types` will ensure it's typed.
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/no-use-before-define': [
+      'error',
+      {
+        functions: false,
+        classes: true,
+        variables: true,
+        typedefs: true,
+      },
+    ],
+    // Some variable names are defined in the backend (can't change this).
+    // Also sometimes the following var names are necessary TYPE__TYPE_NAME
+    '@typescript-eslint/naming-convention': [
+      'error',
+      {
+        selector: 'variable',
+        format: null, // disable rule
+      },
+      {
+        selector: 'function',
+        format: ['camelCase'],
+      },
+      {
+        selector: 'typeLike',
+        format: ['PascalCase'],
+      },
+    ],
+    // Common abbreviations are known and readable
+    'unicorn/prevent-abbreviations': 'off',
+    // Airbnb prefers forEach
+    'unicorn/no-array-for-each': 'off',
+    'unicorn/filename-case': 'off',
+    // Sometimes need to return null, because undefined is invalid JSX Element
+    'unicorn/no-null': 'off',
+    'unicorn/prefer-optional-catch-binding': 'off',
+    'unicorn/catch-error-name': 'off',
+    // Difficult to write redux slices with it
+    'unicorn/consistent-destructuring': 'off',
+    // Difficult to write redux slices with it
+    'unicorn/consistent-function-scoping': 'off',
+    'unicorn/prefer-node-protocol': 'off',
+    'unicorn/expiring-todo-comments': 'off',
+    // Enable some rules for async JS
+    'no-promise-executor-return': 'error',
+    'require-atomic-updates': 'error',
+    'max-nested-callbacks': 'error',
+    'no-return-await': 'error',
+  },
+  overrides: [
+    {
+      files: [
+        '**/*.test.js',
+        '**/*.test.jsx',
+        '**/*.test.tsx',
+        '**/*.spec.js',
+        '**/*.spec.jsx',
+        '**/*.spec.tsx',
+      ],
+      env: {
+        jest: true,
+      },
+    },
+    {
+      files: ['*.js'],
+      rules: {
+        // Allow `require()`
+        '@typescript-eslint/no-var-requires': 'off',
+      },
+    },
+    /////////////////////////////////////////////
+    // Integration test may have no any expect()
+    {
+      files: ['*.spec.tsx', 'spec.tsx'],
+      rules: {
+        'jest/expect-expect': 'off',
+      },
+    },
+    /////////////////////////////////////////////
+    // override "simple-import-sort" config
+    {
+      files: ['*.js', '*.jsx', '*.ts', '*.tsx'],
+      rules: {
+        'simple-import-sort/imports': [
+          'error',
+          {
+            groups: [
+              // Packages `react` related packages come first.
+              ['^react', '^@?\\w'],
+              // Internal packages.
+              [
+                '^src(/.*|$)',
+                // Parent imports. Put `..` last.
+                '^\\.\\.(?!/?$)',
+                '^\\.\\./?$',
+                // Other relative imports. Put same-folder imports and `.` last.
+                '^\\./(?=.*/)(?!/?$)',
+                '^\\.(?!/?$)',
+                '^\\./?$',
+                // Images
+                '^(IMAGES)(/.*|$)',
+              ],
+              // Side effect imports.
+              ['^\\u0000'],
+              // Style imports.
+              ['^.+\\.?(css)$'],
+            ],
+          },
+        ],
+      },
+    },
+  ],
+};

.gitignore

@@ -0,0 +1,23 @@
+/.idea
+
+# 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.json

@@ -0,0 +1,6 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "bracketSpacing": false,
+  "arrowParens": "avoid"
+}

README.md

@@ -0,0 +1,41 @@
+# React.js Typescript application starter
+
+Usage: create fast prototypes, solve test tasks.
+
+## Features:
+* You can write Typescript or Javascript code with the latest JS features.
+* Babel is used for Typescript transpilation. Typescript compiler is used for the type checking only.
+* ESLint for linting Typescript and Javascript code.
+* Auto code formatting with Prettier.
+* Fully controllable build process with Webpack. There are the development, production configs. The common part is in the common config.
+* Webpack dev server with hot reloading
+* Production optimized build
+* Client-side routing
+* Material UI toolkit
+* ApiService for working with a backend. Axios is used.
+* Login and Main page skeletons.
+* Jest configured. Tests can be written in Typescript.
+
+## Quick start
+
+First install dependencies:
+
+```sh
+npm install
+```
+
+To run in the development mode with hot module reloading:
+
+```sh
+npm start
+```
+
+That command opens `http://localhost:4000` page in your browser.
+
+
+To create a production build:
+
+```sh
+npm run build
+```
+See "build" folder for results.

jest.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  preset: 'ts-jest/presets/js-with-ts',
+  // TODO replace when adding the integration testing
+  // testEnvironment: 'jsdom',
+  testEnvironment: 'node',
+  moduleDirectories: ['src', 'node_modules'],
+  rootDir: './',
+  moduleNameMapper: {
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/src/__mocks__/fileMock.ts',
+    '\\.(css|scss)$': 'identity-obj-proxy',
+    'src/(.*)': '<rootDir>/src/$1',
+  },
+//  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+};

package.json

@@ -0,0 +1,83 @@
+{
+  "name": "my-app",
+  "version": "0.0.1",
+  "scripts": {
+    "start": "webpack serve --config webpack.dev.config.ts",
+    "build": "webpack --config webpack.prod.config.ts",
+    "test": "jest --runInBand",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "@emotion/react": "11.11.1",
+    "@emotion/styled": "11.11.0",
+    "@mui/icons-material": "5.14.3",
+    "@mui/material": "5.14.3",
+    "axios": "1.4.0",
+    "clsx": "1.2.1",
+    "formik": "2.4.3",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-router-dom": "6.14.2",
+    "yup": "0.32.11"
+  },
+  "devDependencies": {
+    "@babel/core": "7.22.9",
+    "@babel/plugin-transform-runtime": "7.22.9",
+    "@babel/preset-env": "7.22.9",
+    "@babel/preset-react": "7.22.5",
+    "@babel/preset-typescript": "7.22.5",
+    "@babel/runtime": "7.22.6",
+    "@storybook/addon-essentials": "7.2.1",
+    "@storybook/addon-interactions": "7.2.1",
+    "@storybook/addon-links": "7.2.1",
+    "@storybook/addon-onboarding": "1.0.8",
+    "@storybook/addon-styling": "1.3.5",
+    "@storybook/blocks": "7.2.1",
+    "@storybook/react": "7.2.1",
+    "@storybook/react-webpack5": "7.2.1",
+    "@storybook/testing-library": "0.2.0",
+    "@types/jest": "29.5.3",
+    "@types/react": "18.2.18",
+    "@types/react-dom": "18.2.7",
+    "@types/react-router-dom": "5.3.3",
+    "@types/webpack": "5.28.1",
+    "@typescript-eslint/eslint-plugin": "5.48.0",
+    "@typescript-eslint/parser": "5.48.0",
+    "babel-loader": "9.1.3",
+    "css-loader": "6.8.1",
+    "eslint": "8.46.0",
+    "eslint-config-airbnb-typescript": "17.1.0",
+    "eslint-config-prettier": "8.6.0",
+    "eslint-plugin-eslint-comments": "3.2.0",
+    "eslint-plugin-import": "2.28.0",
+    "eslint-plugin-jest": "27.2.3",
+    "eslint-plugin-jsx-a11y": "6.7.1",
+    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-promise": "6.1.1",
+    "eslint-plugin-react": "7.33.1",
+    "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-simple-import-sort": "10.0.0",
+    "eslint-plugin-storybook": "0.6.13",
+    "eslint-plugin-unicorn": "45.0.2",
+    "eslint-webpack-plugin": "3.2.0",
+    "fork-ts-checker-webpack-plugin": "7.2.14",
+    "html-webpack-plugin": "5.5.3",
+    "jest": "29.6.2",
+    "mini-css-extract-plugin": "2.7.6",
+    "prettier": "2.8.1",
+    "storybook": "7.2.1",
+    "style-loader": "3.3.3",
+    "ts-jest": "29.1.1",
+    "ts-node": "10.9.1",
+    "typescript": "4.9.4",
+    "webpack": "5.88.2",
+    "webpack-cli": "5.1.4",
+    "webpack-dev-server": "4.15.1",
+    "webpack-merge": "5.9.0"
+  },
+  "engines": {
+    "npm": ">=8.19.2 <9.0.0",
+    "node": ">=18.12.1 <19.0.0"
+  }
+}