chore: add lint-staged & prettier all (#104)

.editorconfig

@@ -7,11 +7,7 @@ end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true
 
-[package.json,*.yml]
+[*.yaml,*.json,*.yml]
 indent_size = 2
 
-[*.yml]
-indent_size = 2
-
-
 max_line_length = 100

.github/workflows/ci.yml

@@ -2,14 +2,12 @@ name: ci
 
 on:
   push:
-      branches:
-        - master
+    branches:
+      - master
   pull_request:
 
-
 jobs:
   check-all:
-
     runs-on: ubuntu-latest
 
     strategy:
@@ -29,6 +27,7 @@ jobs:
 
       - name: npm ci
         run: npm ci
+
       - name: lint, test, build, then e2e
         run: npm run pre-push
 

.prettierignore

@@ -0,0 +1,5 @@
+.vscode/
+node_modules/
+dist/
+reports/
+package-lock.json

.testcaferc.json

@@ -1,5 +1,5 @@
 {
-    "src": "testcafe/",
-    "browsers": "firefox:headless",
-    "tsConfigPath": "testcafe/tsconfig.json"
-}
+  "src": "testcafe/",
+  "browsers": "firefox:headless",
+  "tsConfigPath": "testcafe/tsconfig.json"
+}

.vscode/settings.json

@@ -1,29 +1,26 @@
 {
-    "eslint.validate": [
-        "javascript",
-        "javascriptreact",
-        "typescript",
-        "typescriptreact"
-    ],
-    "typescript.tsdk": "/home/rodmax/w/react-playground/node_modules/typescript/lib",
-    "cSpell.words": [
-        "browserslist",
-        "devtool",
-        "devtools",
-        "mqpacker"
-    ],
-    "[javascript]": {
-        "editor.formatOnSave": true
-    },
-    "[typescriptreact]": {
-        "editor.formatOnSave": true
-    },
-    "[typescript]": {
-        "editor.formatOnSave": true
-    },
-    "[scss]": {
-        "editor.formatOnSave": true
-    }
-
-
-}
+  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "cSpell.words": ["browserslist", "devtool", "devtools", "mqpacker"],
+  "[javascript]": {
+    "editor.formatOnSave": true
+  },
+  "[typescriptreact]": {
+    "editor.formatOnSave": true
+  },
+  "[typescript]": {
+    "editor.formatOnSave": true
+  },
+  "[scss]": {
+    "editor.formatOnSave": true
+  },
+  "[markdown]": {
+    "editor.formatOnSave": true
+  },
+  "[jsonc]": {
+    "editor.formatOnSave": true
+  },
+  "[json]": {
+    "editor.formatOnSave": true
+  }
+}

README.md

@@ -1,4 +1,5 @@
 # React stack playground
+
 > [ We can’t be silent! #SavePandaDoc](https://savebelarusit.org/en/)
 
 <img src="src/assets/playground-logo.png">
@@ -10,84 +11,92 @@
 [![Technical Debt](https://sonarcloud.io/api/project_badges/measure?project=rodmax_react-playground&metric=sqale_index)](https://sonarcloud.io/dashboard?id=rodmax_react-playground)
 
 ## Goals
-- build production ready SPA stater kit(with more strong and quality oriented defaults with compared to CRA)
-- not to lose the readability of architecture and clean code
-- deep dive into React ecosystem
+
+-   build production ready SPA stater kit(with more strong and quality oriented defaults with compared to CRA)
+-   not to lose the readability of architecture and clean code
+-   deep dive into React ecosystem
 
 ## Current status
+
 Teh Project is at an early stage. It is actively developing...
 
 ### Achieved goals
-- project fully automated (CI with build/unit/e2e/test/analyzing code coverage and code quality)
+
+-   project fully automated (CI with build/unit/e2e/test/analyzing code coverage and code quality)
 
 ### Next step
+
 Current focus - app architecture.<br>
 I have a clear understanding of how the app should be designed <br>
 and i am now implementing this ideas
 
-
 ## TODO list
 
 ### Key technologies
-- [x] TypeScript
-- [x] UI library: React
-- [x] bundler: Webpack
-- [x] Sass + PostCSS(autoprefixer and friends)
+
+-   [x] TypeScript
+-   [x] UI library: React
+-   [x] bundler: Webpack
+-   [x] Sass + PostCSS(autoprefixer and friends)
 
 ### Quality
-- [x] CI: base on [github actions](https://github.com/rodmax/react-playground/actions)
-- [x] [CI: code coverage](https://codecov.io/gh/rodmax/react-playground)
-- [x] [CI:  sonar cloud analyzer](https://sonarcloud.io/dashboard?id=rodmax_react-playground)
-- [x] E2E testing: [testcafe](https://devexpress.github.io/testcafe/)
-    - [ ] snapshots of failed tests as artifacts
-- [x] unit & international testing:
-    - [x] [jest](https://jestjs.io/)
-    - [x] [testing-library](https://testing-library.com/)
-        - [ ] attempt to find approach to reuse testing code like angular harnesses do
-- [x] Hyper strong TypeScript config
-- [x] EsLint
-    - [ ] review all set of existing rules and involve them
-    - [ ] add HOOKS related eslint rules
-    - [ ] add REACT related eslint rules
-- [x] Stylelint
-- [ ] integrate audit(LightHouse or other) to CI
-- [ ] Review tools of [minimizing for production](https://webpack.js.org/plugins/mini-css-extract-plugin/#minimizing-for-production)
-- [ ] Investigate & involve(if appreciable) dependency visualization tool, [like this](https://arkit.pro/svg/UDfDp34EW20C0C2zh-YeWrym37waaQe4sf82-dqTdI-vq3fv7r80MavQoKbGJ6s_t8In--2Vj8kYFKbFFAWq1jZuvcAL7PSL9_AS-WmGMEDtlbU28LS0)
+
+-   [x] CI: base on [github actions](https://github.com/rodmax/react-playground/actions)
+-   [x] [CI: code coverage](https://codecov.io/gh/rodmax/react-playground)
+-   [x] [CI: sonar cloud analyzer](https://sonarcloud.io/dashboard?id=rodmax_react-playground)
+-   [x] E2E testing: [testcafe](https://devexpress.github.io/testcafe/)
+    -   [ ] snapshots of failed tests as artifacts
+-   [x] unit & international testing:
+    -   [x] [jest](https://jestjs.io/)
+    -   [x] [testing-library](https://testing-library.com/)
+        -   [ ] attempt to find approach to reuse testing code like angular harnesses do
+-   [x] Hyper strong TypeScript config
+-   [x] EsLint
+    -   [ ] review all set of existing rules and involve them
+    -   [ ] add HOOKS related eslint rules
+    -   [ ] add REACT related eslint rules
+-   [x] Stylelint
+-   [ ] integrate audit(LightHouse or other) to CI
+-   [ ] Review tools of [minimizing for production](https://webpack.js.org/plugins/mini-css-extract-plugin/#minimizing-for-production)
+-   [ ] Investigate & involve(if appreciable) dependency visualization tool, [like this](https://arkit.pro/svg/UDfDp34EW20C0C2zh-YeWrym37waaQe4sf82-dqTdI-vq3fv7r80MavQoKbGJ6s_t8In--2Vj8kYFKbFFAWq1jZuvcAL7PSL9_AS-WmGMEDtlbU28LS0)
 
 ### Build/Deploy
-- [x] add [tslib](https://www.npmjs.com/package/tslib)
-- [ ] CI: deploy to github pages via github actions
+
+-   [x] add [tslib](https://www.npmjs.com/package/tslib)
+-   [ ] CI: deploy to github pages via github actions
 
 ### App/Architecture
-- [x] Follow [redux architecture StyleGuide](https://redux.js.org/style-guide/style-guide) rules whenever it is reasonably possible
-- [ ] localization
-- [ ] form handling(ui/server validation, form state)
-- [ ] folder structure: description and rules
-- Store
-    - [x] Redux (fully type safe at first and with reduced boilerplate at second)
-    - [ ] try [immer](https://immerjs.github.io/immer/docs/introduction) (looks nice and recommended by redux team)
-- [x] Effects/async flow: RxJs(rxjs/observable)
-- [x] Router: router5
-- [ ] auth logic (route guards/permissions for individual features)
-- API client
-    - [x] Proof of concent using RxJs builtin clients(fetch/xhr)
-    - [ ] API client factory(rxjs based)
-        - [ ] File uploading
-        - [ ] Catch unhandled API errors on App level
-- React related:
-    - [x] [React.StrictMode](https://reactjs.org/docs/strict-mode.html)
-    - [ ] try suspense
+
+-   [x] Follow [redux architecture StyleGuide](https://redux.js.org/style-guide/style-guide) rules whenever it is reasonably possible
+-   [ ] localization
+-   [ ] form handling(ui/server validation, form state)
+-   [ ] folder structure: description and rules
+-   Store
+    -   [x] Redux (fully type safe at first and with reduced boilerplate at second)
+    -   [ ] try [immer](https://immerjs.github.io/immer/docs/introduction) (looks nice and recommended by redux team)
+-   [x] Effects/async flow: RxJs(rxjs/observable)
+-   [x] Router: router5
+-   [ ] auth logic (route guards/permissions for individual features)
+-   API client
+    -   [x] Proof of concent using RxJs builtin clients(fetch/xhr)
+    -   [ ] API client factory(rxjs based)
+        -   [ ] File uploading
+        -   [ ] Catch unhandled API errors on App level
+-   React related:
+    -   [x] [React.StrictMode](https://reactjs.org/docs/strict-mode.html)
+    -   [ ] try suspense
 
 ### Development experience
-- [x] Prettier for formatting(integration with VSCode)
-    - [ ] Apply prettier to all files(md,js,json,yaml)
-- [ ] Setup solution tsconfig.json (split base/app/spec/testcafe tsconfigs)
-- [ ] HMR for CSS
-- [ ] commit format & commit-based changelog generation
+
+-   [x] Prettier for formatting(integration with VSCode)
+    -   [x] Apply prettier to all files(md,js,json,yaml)
+-   [ ] Setup solution tsconfig.json (split base/app/spec/testcafe tsconfigs)
+-   [ ] HMR for CSS
+-   [ ] commit format & commit-based changelog generation
 
 ### Web technologies:
-- [ ] Web workers
-- [ ] WebAssembly
-- [ ] Service Worker
-- [ ] SSR
 
+-   [ ] Web workers
+-   [ ] WebAssembly
+-   [ ] Service Worker
+-   [ ] SSR

devtools/env.js

@@ -1,6 +1,6 @@
 const path = require('path')
 
-// NOTE: TS server cant infer type if module.exports = {} wrapped in parens
+// NOTE: TS server can't infer type if module.exports = {} wrapped in parens
 // so we ignore prettier here
 // prettier-ignore
 const env = module.exports = {}