Merge pull request #14 from qDanik/setup/styled_components

Setup dev mode for styled-components, update docs

Author: Daniil Yankouski

README.md

@@ -1,22 +1,58 @@
-<h3 align="center">
-  React Project Template
-</h3>
+<h1 align="center">
+  <p align="center">
+    <img src="./docs/icon.svg" width="180" height="180" alt="Layered Architecture Icon">
+  </p>
+  React Project Boilerplate
+</h1>
 
 <p align="center">
-  Layered Architecture for Enterprise <a href="https://facebook.github.io/react">React</a> Projects
+  Layered Architecture for Enterprise <a href="https://reactjs.org/">React</a>/<a href="https://vuejs.org/">Vue</a> Projects
 </p>
 
 ## Quick Overview
 
-Layered Architecture for developing web/mobile/desktop applications using JavaScript. You can use React/Angular/Vue/Svelte + Typescript for developing.
+Layered Architecture for developing web/mobile/desktop applications using JavaScript. You can use [React](https://reactjs.org/)/[Vue](https://vuejs.org/) + Typescript for developing.
+
+> Of course you can use another framework :)
+
+## Getting started
+
+- Clone repository
+- Run `yarn` to install dependencies
+- Run `yarn build` to build project
 
 ## Docs
 
-  - [Startup](./docs/SCRIPTS.md "Project Startup Documentation")
+  - [Technologies Used](#technologies-used)
+  - [Project Scripts](./docs/SCRIPTS.md "Project Scripts Documentation")
   - [Architecture](./docs/ARCHITECTURE.md "Project Architecture Documentation")
   - [Code Conventions](./docs/CODE_CONVENTIONS.md "Project Code Conventions") *In progress*
   - [Style Guides](./docs/CODE_CONVENTIONS.md "Project Code Conventions") *In progress*
 
+## Technologies Used
+- Core
+  - [TypeScript](http://www.typescriptlang.org/)
+  - [InversifyJS](https://github.com/inversify/InversifyJS)
+  - [MobX](https://mobx.js.org/README.html)
+  - [Axios](https://github.com/axios/axios)
+- Web
+  - [React](https://reactjs.org/)
+  - [React Router](https://reactrouter.com/)
+  - [React Hook Form](https://react-hook-form.com/)
+  - [Styled Components](https://styled-components.com/)
+- Testing
+  - [Jest](https://jestjs.io)
+  - [React Testing Library](https://testing-library.com/docs/react-testing-library/intro)
+- Code Quality
+  - [Prettier](https://prettier.io/)
+  - [ESLint](https://eslint.org/)
+- Bundlers
+  - [ViteJs](https://vitejs.dev/)
+
+## System Requirements
+- [Node.js 14+](https://nodejs.org/en/download/)
+- [yarn](https://yarnpkg.com/en)
+
 ## Contributing
 
 You are welcome to contribute to this project, just open a Pull Request.

configs/.babelrc

@@ -3,12 +3,12 @@
     ["@babel/preset-env", { "targets": { "node": "current" } }],
     "@babel/preset-typescript"
   ],
-  "env": {
-    "test": {
-      "plugins": [
-        ["@babel/plugin-proposal-decorators", { "legacy": true }],
-        ["@babel/plugin-proposal-class-properties", { "loose": true }]
-      ]
-    }
-  }
+  "plugins": [
+    ["babel-plugin-styled-components", {
+      "minify": false,
+      "transpileTemplateLiterals": false
+    }],
+    ["@babel/plugin-proposal-decorators", { "legacy": true }],
+    ["@babel/plugin-proposal-class-properties", { "loose": true }]
+  ]
 }

configs/vite/plugins.ts

@@ -1,8 +1,8 @@
-import reactRefresh from '@vitejs/plugin-react-refresh';
 import importToCDN, { autoComplete } from 'vite-plugin-cdn-import';
 import viteCompression from 'vite-plugin-compression';
 import reactSvgPlugin from 'vite-plugin-react-svg';
 import tsconfigPaths from 'vite-tsconfig-paths';
+import react from '@vitejs/plugin-react'
 
 const BasePlugins = [
   importToCDN({
@@ -26,7 +26,24 @@ const BasePlugins = [
   }),
 ];
 
-export const DevPlugins = [...BasePlugins, reactRefresh()];
+export const DevPlugins = [
+  ...BasePlugins,
+  react({
+    include: '**/*.tsx',
+    exclude: 'node_modules/**',
+    babel: {
+      plugins: [
+        ['babel-plugin-styled-components', {
+          displayName: true,
+          fileName: false,
+        }],
+      ],
+      parserOpts: {
+        plugins: ['decorators-legacy']
+      }
+    }
+  }),
+];
 
 export const BuildPlugins = [
   ...BasePlugins,

docs/SCRIPTS.md

@@ -1,36 +1,35 @@
-# Available Scripts
+# Project Scripts
 
-In the project directory, you can run:
+All available scripts for project.
 
-### `npm install` - install all dependencies;
+ `yarn` - install dependencies;
 
-### `npm start` - run dev server;
+## Running Application
 
-### `npm preview` - run build preview server;
+ `yarn start` - run dev server;
 
-### `npm build` - build your application;
+ `yarn preview` - run build preview server;
 
-### `npm lint` - check project using eslint and tslint;
+ `yarn build` - build your application.
 
-### `npm eslint` - check project using eslint;
+## Running Linters
 
-- --fix - boolean.
-  `Default:` none.
-  `Description:` Will fix all possible eslint issues.
+`yarn lint` - check project using eslint and tslint;
 
-### `npm tslint` - check project using tslint;
+`yarn eslint` - check project using eslint;
 
-### `npm test` - run all project tests;
+- `yarn eslint --fix` - fix all possible eslint issues;
 
-- --updateSnapshot
-  `Description:` Will update every snapshot that fails during this test run.
-- --watch
-  `Description:` Track changes and rerun tests related to changed files.
-- --coverage
-  `Description:` Collect code coverage.
+`yarn tslint` - check project using tslint.
 
-### `npm test:ci` - run all project tests and collect coverage;
+## Running Tests
 
-### `npm test:ci` - run all project tests and collect coverage;
+`yarn test` - run all project tests;
 
-> Note: You can use `yarn` instead of `npm`
+- `yarn test --updateSnapshot` - update every snapshot that fails during this test run;
+
+- `yarn test --watch` - watch for changes and re-run tests;
+
+- `yarn test --coverage` - collect code coverage by tests;
+
+`yarn test:ci` - run all project tests and collect coverage.

docs/icon.svg

@@ -14,6 +14,7 @@
     "build": "yarn vite build",
     "lint": "yarn eslint && yarn tslint",
     "eslint": "eslint \"./src/**/*.ts\" \"./src/**/*.tsx\" --max-warnings 0",
+    "eslint:perf": "set TIMING=1 & yarn eslint",
     "tslint": "yarn tsc --pretty --noEmit",
     "jest": "jest --config ./configs/jest/config.ts",
     "test": "yarn jest --verbose --runInBand",
@@ -53,6 +54,7 @@
     "@types/jest": "27.0.2",
     "@typescript-eslint/eslint-plugin": "4.31.2",
     "@typescript-eslint/parser": "4.31.2",
+    "@vitejs/plugin-react": "^1.0.1",
     "@vitejs/plugin-react-refresh": "1.3.6",
     "eslint": "7.32.0",
     "eslint-config-prettier": "8.3.0",
@@ -70,7 +72,6 @@
     "typescript": "4.4.3",
     "vite": "2.5.10",
     "vite-plugin-cdn-import": "0.3.5",
-    "vite-plugin-compress": "2.1.0",
     "vite-plugin-compression": "0.3.5",
     "vite-plugin-react-svg": "0.2.0",
     "vite-tsconfig-paths": "3.3.14"
@@ -89,6 +90,8 @@
     "extends": "./configs/.babelrc"
   },
   "eslintConfig": {
-    "extends": ["./configs/.eslintrc"]
+    "extends": [
+      "./configs/.eslintrc"
+    ]
   }
 }

package.json

@@ -47,7 +47,7 @@
     semver "^6.3.0"
     source-map "^0.5.0"
 
-"@babel/core@^7.14.8", "@babel/core@^7.7.2":
+"@babel/core@^7.14.8", "@babel/core@^7.15.5", "@babel/core@^7.7.2":
   version "7.15.5"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.15.5.tgz#f8ed9ace730722544609f90c9bb49162dc3bf5b9"
   integrity sha512-pYgXxiwAgQpgM1bNkZsDEq85f0ggXMA5L7c+o3tskGMh2BunCI9QUwB9Z4jpvXUOuMdyGKiGKQiRe11VS6Jzvg==
@@ -916,13 +916,27 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
+"@babel/plugin-transform-react-jsx-development@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.14.5.tgz#1a6c73e2f7ed2c42eebc3d2ad60b0c7494fcb9af"
+  integrity sha512-rdwG/9jC6QybWxVe2UVOa7q6cnTpw8JRRHOxntG/h6g/guAOe6AhtQHJuJh5FwmnXIT1bdm5vC2/5huV8ZOorQ==
+  dependencies:
+    "@babel/plugin-transform-react-jsx" "^7.14.5"
+
 "@babel/plugin-transform-react-jsx-self@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.14.5.tgz#703b5d1edccd342179c2a99ee8c7065c2b4403cc"
   integrity sha512-M/fmDX6n0cfHK/NLTcPmrfVAORKDhK8tyjDhyxlUjYyPYYO8FRWwuxBA3WBx8kWN/uBUuwGa3s/0+hQ9JIN3Tg==
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
+"@babel/plugin-transform-react-jsx-self@^7.14.9":
+  version "7.14.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.14.9.tgz#33041e665453391eb6ee54a2ecf3ba1d46bd30f4"
+  integrity sha512-Fqqu0f8zv9W+RyOnx29BX/RlEsBRANbOf5xs5oxb2aHP4FKbLXxIaVPUiCti56LAR1IixMH4EyaixhUsKqoBHw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
 "@babel/plugin-transform-react-jsx-source@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.14.5.tgz#79f728e60e6dbd31a2b860b0bf6c9765918acf1d"
@@ -941,6 +955,17 @@
     "@babel/plugin-syntax-jsx" "^7.14.5"
     "@babel/types" "^7.14.5"
 
+"@babel/plugin-transform-react-jsx@^7.14.5", "@babel/plugin-transform-react-jsx@^7.14.9":
+  version "7.14.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.14.9.tgz#3314b2163033abac5200a869c4de242cd50a914c"
+  integrity sha512-30PeETvS+AeD1f58i1OVyoDlVYQhap/K20ZrMjLmmzmC2AYR/G43D4sdJAaDAqCD3MYpSWbmrz3kES158QSLjw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.14.5"
+    "@babel/helper-module-imports" "^7.14.5"
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/plugin-syntax-jsx" "^7.14.5"
+    "@babel/types" "^7.14.9"
+
 "@babel/plugin-transform-regenerator@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.14.5.tgz#9676fd5707ed28f522727c5b3c0aa8544440b04f"
@@ -1203,7 +1228,7 @@
     "@babel/helper-validator-identifier" "^7.14.5"
     to-fast-properties "^2.0.0"
 
-"@babel/types@^7.15.4", "@babel/types@^7.15.6":
+"@babel/types@^7.14.9", "@babel/types@^7.15.4", "@babel/types@^7.15.6":
   version "7.15.6"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.15.6.tgz#99abdc48218b2881c058dd0a7ab05b99c9be758f"
   integrity sha512-BPU+7QhqNjmWyDO0/vitH/CuhpV8ZmK1wpKva8nuyNF5MJfuRNWMc+hc14+u9xT93kvykMdncrJT19h74uB1Ig==
@@ -1978,6 +2003,20 @@
     "@rollup/pluginutils" "^4.1.1"
     react-refresh "^0.10.0"
 
+"@vitejs/plugin-react@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@vitejs/plugin-react/-/plugin-react-1.0.1.tgz#3cd13da4abcbbfa7b1b57aeaee6b34ae1bc17821"
+  integrity sha512-BJ4Wq31XtOup5ysVefXGbjIFIGPo47p7T8HxPyOsGFV8AlnodkwHEUaV+kQnj2WOqsupiyEgPahltC93yBf5sg==
+  dependencies:
+    "@babel/core" "^7.15.5"
+    "@babel/plugin-transform-react-jsx" "^7.14.9"
+    "@babel/plugin-transform-react-jsx-development" "^7.14.5"
+    "@babel/plugin-transform-react-jsx-self" "^7.14.9"
+    "@babel/plugin-transform-react-jsx-source" "^7.14.5"
+    "@rollup/pluginutils" "^4.1.1"
+    react-refresh "^0.10.0"
+    resolve "^1.20.0"
+
 abab@^2.0.3, abab@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.5.tgz#c0b678fb32d60fc1219c784d6a826fe385aeb79a"