Merge pull request #3 from rodmax/starter

Renew dev tools for project

.editorconfig

@@ -0,0 +1,14 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+
+[package.json,*.yml]
+indent_size = 2
+
+
+max_line_length = 100

.eslintignore

@@ -1,5 +1,2 @@
-# to lint .eslintrc.js
-!.*.js
-
-node_modules/
 docs/
+node_modules/

.eslintrc.js

@@ -1,109 +1,20 @@
-/*
- * Eslint config file
- * Configuration guide http://eslint.org/docs/user-guide/configuring
- * Rules list http://eslint.org/docs/rules/
-**/
-/* eslint-disable no-unused-vars */
-const OFF = 0;
-const WARN = 1;
-const ERR = 2;
-/* eslint-enable no-unused-vars */
+// @ts-check
+const WARN = 1
+const ERR = 2
 
 module.exports = {
-    root: true, // prevent search .eslintrc in parent dirs
-    extends: [
-        'eslint:recommended',
-        'plugin:react/recommended',
-        './.eslintrc-react.js'
-    ],
+    parser: '@typescript-eslint/parser',
+    plugins: ['@typescript-eslint', 'react'],
     parserOptions: {
-        ecmaVersion: 6,
-        sourceType: 'module', // your code is in ECMAScript modules
-        ecmaFeatures: {
-            jsx: true
-        }
-    },
-    env: {
-        es6: true,
-        commonjs: true,
-        node: true,
-        browser: true
+        sourceType: 'module',
     },
     rules: {
-        indent: ['error', 4, {
-            SwitchCase: 1,
-            MemberExpression: 'off'
-        }],
-        'linebreak-style': [ERR, 'unix'],
-        'eol-last': [ERR],
-        'no-trailing-spaces': [ERR],
-        'no-mixed-spaces-and-tabs': [ERR],
-        'no-multiple-empty-lines': [ERR, {max: 2, maxBOF: 0, maxEOF: 1}],
-        'max-len': [ERR, 120, 4],
-        camelcase: [ERR],
-        'no-console': [ERR], // allow for dev scripts
-        'new-cap': [ERR, {
-            newIsCap: true,
-            capIsNew: true,
-            capIsNewExceptions: [
-                '$.Deferred',
-                // jasmine-given
-                'Given',
-                'When',
-                'Then',
-                'And'
-            ]}],
-        'new-parens': [ERR],
-        'one-var': [ERR, 'never'],
-        'object-curly-spacing': [ERR, 'never'],
-        'array-bracket-spacing': [ERR, 'never'],
-        'key-spacing': [ERR],
-        quotes: [ERR, 'single'],
-        semi: [ERR, 'always'],
-        'no-extra-semi': [ERR],
-        'semi-spacing': [ERR],
-        'comma-style': [ERR, 'last'],
-        'no-spaced-func': [ERR],
-        'space-before-function-paren': [ERR, {anonymous: 'always', named: 'never'}],
-        'keyword-spacing': [ERR, {before: true, after: true}],
-        'space-in-parens': [ERR, 'never'],
-        'no-multi-spaces': [ERR],
-        'operator-linebreak': [ERR, 'after'],
-        curly: [ERR],
-        'brace-style': [ERR],
-        'space-before-blocks': [ERR, 'always'],
-        'no-cond-assign': [ERR],
-        yoda: [ERR, 'never'],
-        'no-duplicate-case': [ERR],
-        'no-inner-declarations': [ERR, 'both'],
-        'no-unreachable': [ERR],
-        'no-redeclare': [ERR, {builtinGlobals: true}],
-        'no-with': [ERR],
-        eqeqeq: [ERR],
-        'no-unneeded-ternary': [ERR],
-        'space-unary-ops': [ERR, {words: true, nonwords: false}],
-        'no-eval': [ERR],
-        'no-throw-literal': [ERR],
-        'valid-typeof': [ERR],
-        'no-implicit-coercion': [ERR, {boolean: true, number: true, string: true}],
-        'no-multi-str': [ERR],
-        'spaced-comment': [ERR, 'always'],
+        'no-console': WARN,
+        'no-unused-vars': WARN,
+        'no-unused-expressions': ERR,
 
-        'array-callback-return': [ERR],
-        'block-scoped-var': [ERR],
-        complexity: [WARN, 20],
-        'newline-per-chained-call': [ERR, {ignoreChainWithDepth: 3}],
-        'no-lonely-if': [ERR],
-        'arrow-parens': [ERR, 'as-needed'],
-        'arrow-spacing': [ERR],
-        'no-confusing-arrow': [ERR],
-        'no-duplicate-imports': [ERR],
-        'no-useless-computed-key': [ERR],
-        'template-curly-spacing': [ERR],
-        'no-shadow': [ERR, {builtinGlobals: true, hoist: 'functions', allow: [
-            'require',
-            'root', // It is exactly the same as global, root is deprecated since Node.js v6
-        ]}],
-        'quote-props': [ERR, 'as-needed']
-    }
-};
+        // Below two rules needed to prevent https://stackoverflow.com/a/46809082
+        'react/jsx-uses-react': ERR,
+        'react/jsx-uses-vars': ERR,
+    },
+}

.github/workflows/nodejs.yml

@@ -1,26 +1,25 @@
-name: Node CI
+name: ci
 
 on: [push]
 
 jobs:
-  build:
+  check-all:
 
     runs-on: ubuntu-latest
 
     strategy:
       matrix:
-        node-version: [8.x, 10.x, 12.x]
+        node-version: [12.x]
 
     steps:
-    - uses: actions/checkout@v1
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
-      with:
-        node-version: ${{ matrix.node-version }}
-    - name: npm install, build, and test
-      run: |
-        npm ci
-        npm run build --if-present
-        npm test
-      env:
-        CI: true
+      - uses: actions/checkout@v1
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: npm ci
+        run: npm ci
+      - name: npm run pre-push
+        run: npm run pre-push
+      - name: npm run testcafe:prod
+        run: npm run testcafe:prod

.nvmrc

@@ -1 +1 @@
-8
+10

.prettierrc.js

@@ -0,0 +1,12 @@
+module.exports = {
+    trailingComma: 'es5',
+    tabWidth: 4,
+    semi: false,
+    singleQuote: true,
+    printWidth: 100,
+    quoteProps: 'as-needed',
+    jsxSingleQuote: true,
+    bracketSpacing: true,
+    jsxBracketSameLine: false,
+    arrowParens: 'avoid',
+}

.testcaferc.json

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

.vscode/settings.json

@@ -0,0 +1,31 @@
+{
+    "eslint.validate": [
+        "javascript",
+        "javascriptreact",
+        {
+            "language": "typescript",
+            "autoFix": true
+        },
+        {
+            "language": "typescriptreact",
+            "autoFix": true
+        }
+    ],
+    "typescript.tsdk": "node_modules/typescript/lib",
+    "cSpell.words": [
+        "browserslist",
+        "devtool",
+        "mqpacker"
+    ],
+    "[javascript]": {
+        "editor.formatOnSave": true
+    },
+    "[typescriptreact]": {
+        "editor.formatOnSave": true
+    },
+    "[scss]": {
+        "editor.formatOnSave": true
+    }
+
+
+}

README.md

@@ -1,31 +1,22 @@
 # React stack playground
 
-[![Build Status](https://travis-ci.org/rodmax/react-playground.svg?branch=master)](https://travis-ci.org/rodmax/react-playground)
-[![Dependency Status](https://david-dm.org/rodmax/react-playground.svg)](https://david-dm.org/rodmax/react-playground)
-[![devDependency Status](https://david-dm.org/rodmax/badges/react-playground/dev-status.svg)](https://david-dm.org/rodmax/react-playground#info=devDependencies)
+[![Actions Status](https://github.com/rodmax/react-playground/workflows/ci/badge.svg)](https://github.com/rodmax/react-playground/actions)
 
-The main purpose of this project is to study web applications development  based on react stack
 
+The main purpose of this project is to study web applications development based on react stack
 
 ## TODO list
-- [x] MVP based on react and redux
-- [ ] play with react/redux DevTools
-- [ ] routing
-- [ ] play with some mainstream react third party
-    - [ ] react forms
-    - [x] something to help working with REST
-    - [x] redux-saga
-    - [ ] mobx
-    - [ ] redux-actions
-    - [ ] redux-thunk middleware
-- [ ] localization
-- [ ] refactoring involving best practice
-    - [x] Involve airbnb react eslint config
-- [ ] tests
-- [x] TypeScript with React
-- [x] Use PostCSS to manage CSS
 
-
-## Credit
-- [A Simple Naming Convention for Action Creators in Redux.js](https://decembersoft.com/posts/a-simple-naming-convention-for-action-creators-in-redux-js/)
-- [Airbnb React/JSX Style Guide](https://github.com/airbnb/javascript/tree/master/react)
+- [x] Build: webpack based
+    - [x] JavaScript: TypeScript
+    - [x] CSS: Sass + PostCSS(autoprefixer and friends)
+- [ ] Quality:
+    - [x] E2E testing: testcafe
+    - [x] unit & international testing: jest + testing-library
+    - [x] Hyper strong TypeScript config
+    - [x] EsLint
+    - [x] Prettier for formatting
+- [ ] App:
+    - [ ] localization
+    - [ ] Store: Redux + Redux Starter Kit(?) + RxJs(rxjs/observable)
+    - [ ] Router: router5

devtools/env.js

@@ -1,8 +1,18 @@
-const path = require('path');
-const env = module.exports = {};
+const path = require('path')
 
-env.rootDir = path.join(__dirname, '..');
-env.buildDir = path.join(env.rootDir, 'docs'); // we use docs to able publish on gh-pages
-env.srcDir = path.join(env.rootDir, 'src');
+// NOTE: TS server cant infer type if module.exports = {} wrapped in parens
+// so we ignore prettier here
+// prettier-ignore
+const env = module.exports = {}
 
-env.devServerPort = 3000;
+env.rootDir = path.join(__dirname, '..')
+env.buildDir = path.join(env.rootDir, 'docs') // we use docs to able publish on gh-pages
+env.srcDir = path.join(env.rootDir, 'src')
+
+env.devServerPort = 3000
+env.staticServerPort = 5000 // Used to e2e tests of prod application build
+
+/**
+ * @type { 'dev' | 'prod' }
+ */
+env.e2eMode = process.env.E2E_MODE === 'prod' ? 'prod' : 'dev'

devtools/serve.js

@@ -0,0 +1,17 @@
+#!/usr/bin/env node
+const env = require('./env')
+const handler = require('serve-handler')
+const http = require('http')
+
+const server = http.createServer((request, response) => {
+    // You pass two more arguments for config and middleware
+    // More details here: https://github.com/zeit/serve-handler#options
+    return handler(request, response, {
+        public: env.buildDir,
+    })
+})
+
+server.listen(env.staticServerPort, () => {
+    // eslint-disable-next-line no-console
+    console.log(`Running at http://localhost:${env.staticServerPort}`)
+})