Merge pull request #77 from nimblehq/release/2.2.0

Release 2.2.0

Author: carryall

.github/CODEOWNERS

@@ -1,8 +1,6 @@
-# Team Lead
-* @carryall
-
-# Team Members
-* @bterone @hanam1ni @hoangmirs @malparty @rosle @tyrro
+# Team
+# @carryall is the Team Lead and the others are team members
+* @carryall @bterone @hanam1ni @hoangmirs @malparty @rosle @tyrro
 
 # Engineering Leads
 CODEOWNERS @nimblehq/engineering-leads

.github/workflows/test.yml

@@ -0,0 +1,40 @@
+name: Test
+
+on: push
+
+jobs:
+  test:
+    name: Bootstrap app, run linters and tests with Node ${{ matrix.node }}
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node: [14, 16]
+    steps:
+      - name: Cancel Previous Runs
+        uses: styfle/[email protected]
+        with:
+          access_token: ${{ github.token }}
+
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Setup node and restore cached dependencies
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node }}
+          cache: 'npm'
+
+      - name: Bootstrap React App
+        run: npx create-react-app test-app --template file:./
+
+      - name: Run linters
+        working-directory: ./test-app
+        run: npm run codebase:lint
+
+      - name: Run unit tests
+        working-directory: ./test-app
+        run: npm run test
+
+      - name: Run integration tests
+        working-directory: ./test-app
+        run: npm run cypress

.gitignore

@@ -1 +1,6 @@
+# dependencies
+/node_modules
+
+# misc
 .idea/
+.DS_Store

README.md

@@ -29,10 +29,6 @@ To use this template, add `--template nimble` when creating a new app from the `
 
 ```sh
 npx create-react-app my-app --template nimble
-
-# or
-
-yarn create react-app my-app --template nimble
 ```
 
 For more information about `create-react-app`, please refer to:
@@ -67,10 +63,6 @@ To test the template locally, simply run the template install command with the p
 
 ```sh
 npx create-react-app my-app --template file:{../path/to/your/local/template/repo}
-
-# or
-
-yarn create react-app my-app --template file:{../path/to/your/local/template/repo}
 ```
 
 ## License

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "cra-template-nimble",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "keywords": [
     "react",
     "create-react-app",

package.json

@@ -2,67 +2,68 @@
   "package": {
     "dependencies": {
       "@cypress/code-coverage": "3.9.12",
-      "@nimblehq/eslint-config-nimble": "2.2.1",
+      "@nimblehq/eslint-config-nimble-react": "^1.0.0",
+      "@nimblehq/stylelint-config-nimble": "^1.0.0",
       "@testing-library/cypress": "8.0.2",
-      "@testing-library/jest-dom": "5.11.4",
-      "@testing-library/react": "12.1.4",
-      "@testing-library/user-event": "13.5.0",
+      "@testing-library/jest-dom": "5.16.4",
+      "@testing-library/react": "13.1.1",
+      "@testing-library/user-event": "14.1.1",
       "@types/jest": "27.4.1",
       "@types/node": "17.0.21",
       "@types/react": "17.0.40",
       "@types/react-dom": "17.0.13",
-      "@typescript-eslint/eslint-plugin": "5.15.0",
-      "@typescript-eslint/parser": "5.15.0",
       "axios": "0.21.1",
       "cypress": "9.5.2",
       "cypress-react-selector": "2.3.16",
       "eslint": "8.11.0",
-      "eslint-config-prettier": "8.5.0",
-      "eslint-import-resolver-typescript": "2.5.0",
-      "eslint-plugin-cypress": "2.12.1",
-      "eslint-plugin-import": "2.25.4",
-      "eslint-plugin-jest": "26.1.1",
-      "eslint-plugin-jsx-a11y": "6.5.1",
-      "eslint-plugin-prettier": "4.0.0",
-      "eslint-plugin-react": "7.29.4",
-      "eslint-plugin-react-hooks": "4.3.0",
       "i18next": "21.6.14",
       "i18next-browser-languagedetector": "6.1.3",
       "i18next-http-backend": "1.4.0",
-      "node-sass": "7.0.1",
       "prettier": "2.6.0",
       "react-i18next": "11.16.1",
+      "react-router-dom": "6.3.0",
+      "sass": "1.49.11",
       "stylelint": "14.6.0",
-      "stylelint-config-property-sort-order-smacss": "9.0.0",
-      "stylelint-config-sass-guidelines": "9.0.1",
-      "stylelint-order": "5.0.0",
-      "stylelint-scss": "4.2.0",
       "typescript": "4.6.2",
       "web-vitals": "2.1.4"
     },
     "scripts": {
       "start": "react-scripts -r @cypress/instrument-cra start",
-      "test:coverage": "react-scripts test --coverage --watchAll=false && yarn cypress:run && node ./scripts/coverage-merge.js && nyc report",
+      "test:coverage": "react-scripts test --coverage --watchAll=false && npm run cypress:run && node ./scripts/coverage-merge.js && nyc report",
+      "test:merge-coverage": "node ./scripts/coverage-merge.js",
       "lint": "eslint ./src ./cypress --ext .ts,.tsx",
       "lint:fix": "eslint ./src ./cypress --ext .ts,.tsx --fix",
       "stylelint": "stylelint '**/*.scss'",
       "stylelint:fix": "stylelint '**/*.scss' --fix",
-      "codebase:lint": "yarn lint && yarn stylelint",
-      "codebase:fix": "yarn lint:fix && yarn stylelint:fix",
+      "codebase:lint": "npm run lint && npm run stylelint",
+      "codebase:fix": "npm run lint:fix && npm run stylelint:fix",
+      "cypress": "start-server-and-test start 3000 cypress:run",
       "cypress:run": "cypress run",
       "cypress:open": "cypress open"
     },
     "jest": {
-      "collectCoverageFrom": ["src/**/*.{js,jsx,ts,tsx}", "!src/**/*.d.ts"],
-      "coverageReporters": ["json"]
+      "collectCoverageFrom": [
+        "src/**/*.{js,jsx,ts,tsx}",
+        "!src/**/*.d.ts"
+      ],
+      "coverageReporters": [
+        "json"
+      ]
     },
     "nyc": {
       "report-dir": "coverage/cypress",
-      "exclude": ["src/reportWebVitals.ts"],
+      "exclude": [
+        "src/reportWebVitals.ts"
+      ],
       "excludeAfterRemap": true
     },
     "devDependencies": {
-      "@cypress/instrument-cra": "1.4.0"
+      "@cypress/instrument-cra": "1.4.0",
+      "danger": "10.9.0",
+      "danger-plugin-code-coverage": "1.1.9",
+      "danger-plugin-istanbul-coverage": "1.6.2",
+      "danger-plugin-jest-codecov": "0.0.8",
+      "start-server-and-test": "1.14.0"
     }
   }
 }

template.json

@@ -1,94 +1,3 @@
 module.exports = {
-  env: {
-    es6: true,
-    browser: true,
-    node: true,
-    jest: true,
-  },
-  extends: [
-    '@nimblehq/eslint-config-nimble',
-    'plugin:react/recommended',
-    'plugin:react-hooks/recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:jsx-a11y/recommended',
-    'plugin:import/errors',
-    'plugin:prettier/recommended',
-  ],
-  overrides: [
-    {
-      files: 'src/tests/**/*.test.ts',
-      extends: ['plugin:jest/recommended', 'plugin:jest/style'],
-    },
-    {
-      files: 'cypress/**/*.ts',
-      extends: ['plugin:cypress/recommended'],
-    },
-  ],
-  parser: '@typescript-eslint/parser',
-  parserOptions: {
-    ecmaVersion: 6,
-    sourceType: 'module',
-    ecmaFeatures: {
-      jsx: true,
-    },
-  },
-  rules: {
-    'react-hooks/rules-of-hooks': 'error',
-    'react-hooks/exhaustive-deps': 'warn',
-    'react/jsx-filename-extension': [2, { extensions: ['.tsx'] }],
-    'import/order': [
-      'error',
-      {
-        groups: ['builtin', 'external', 'internal'],
-        pathGroups: [
-          {
-            pattern: 'react*',
-            group: 'external',
-            position: 'before',
-          },
-          {
-            pattern: 'css/*|*.scss|*.svg|.png',
-            group: 'internal',
-            position: 'after',
-          },
-        ],
-        pathGroupsExcludedImportTypes: ['react'],
-        'newlines-between': 'always',
-        alphabetize: {
-          order: 'asc',
-          caseInsensitive: true,
-        },
-      },
-    ],
-    'import/extensions': [
-      'error',
-      'never',
-      {
-        scss: 'always',
-        svg: 'always',
-        png: 'always',
-        json: 'always',
-        spec: 'always',
-      },
-    ],
-    'no-use-before-define': 'off',
-    'no-unused-vars': 'off',
-    'no-shadow': 'off',
-    '@typescript-eslint/no-shadow': 'error',
-    '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
-    '@typescript-eslint/no-use-before-define': ['error'],
-    'prettier/prettier': ['error'],
-  },
-  settings: {
-    react: {
-      version: 'detect',
-    },
-    'import/resolver': {
-      typescript: {},
-      node: {
-        extensions: ['.js', '.jsx', '.ts', '.tsx'],
-        moduleDirectory: ['node_modules', 'src/'],
-      },
-    },
-  },
-}
+  extends: ['@nimblehq/eslint-config-nimble-react'],
+};

template/.eslintrc.js

@@ -0,0 +1,40 @@
+name: Deploy to Netlify
+
+on:
+  push:
+    branches: ['main', 'master']
+  workflow_dispatch:
+    inputs:
+      deploy-msg:
+        description: 'Deploy Message (visible in Netlify)'
+        required: true
+
+jobs:
+  deploy:
+    name: Build and Deploy to Netlify
+    runs-on: ubuntu-18.04
+    steps:
+      - name: Cancel Previous Runs
+        uses: styfle/[email protected]
+        with:
+          access_token: ${{ github.token }}
+
+      - uses: actions/checkout@v2
+
+      - name: Install modules
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+
+      - name: Deploy to Netlify
+        uses: nwtgck/[email protected]
+        with:
+          publish-dir: './build'
+          deploy-message: "Deploy from GitHub Actions: ${{ github.event.inputs.deploy-msg }}"
+          production-deploy: true
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
+        timeout-minutes: 1

template/.github/workflows/deploy.yml

@@ -0,0 +1,32 @@
+name: Deploy Preview to Netlify
+
+on: [pull_request, workflow_dispatch]
+
+jobs:
+  deploy-preview:
+    name: Build and Deploy preview on Netlify
+    runs-on: ubuntu-18.04
+    steps:
+      - name: Cancel Previous Runs
+        uses: styfle/[email protected]
+        with:
+          access_token: ${{ github.token }}
+
+      - uses: actions/checkout@v2
+
+      - name: Install modules
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+
+      - name: Deploy to Netlify
+        uses: nwtgck/[email protected]
+        with:
+          publish-dir: './build'
+          deploy-message: '#${{ github.event.pull_request.number }} - ${{ github.event.pull_request.title }}'
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
+        timeout-minutes: 1