Merge pull request #57 from nimblehq/release/2.1.0

Release 2.1.0

.github/CODEOWNERS

@@ -1,3 +1,8 @@
-# These developers will be requested for review when someone opens a pull request.
-# Uncomment the line below and mention the reviewers with their github handles
-# *       @webchapter
+# Team Lead
+* @carryall
+
+# Team Members
+* @bterone @hanam1ni @hoangmirs @malparty @rosle @tyrro
+
+# Engineering Leads
+CODEOWNERS @nimblehq/engineering-leads

.github/ISSUE_TEMPLATE/bug_template.md

@@ -7,14 +7,14 @@ labels: "type : bug"
 
 ## Issue
 
-Describe the issue you are facing. Show us the implementation: screenshots, gif, etc.
- 
+Describe the issue you are facing. Show us the implementation: screenshots, GIF, etc.
+
 ## Expected
 
-Describe what should be the correct behaviour.
- 
+Describe what should be the correct behavior.
+
 ## Steps to reproduce
 
 1. 
 2. 
-3. 
+3. 

.github/ISSUE_TEMPLATE/chore_template.md

@@ -0,0 +1,14 @@
+---
+name: "Chore"
+about: "Open a chore issue for a minor update."
+title: "Update "
+labels: "type : chore"
+---
+
+## Why
+
+Describe the details of the update and why it's needed.
+
+## Who Benefits?
+
+Describe who will be the beneficiaries e.g. everyone, specific chapters, clients...

.github/ISSUE_TEMPLATE/feature_template.md

@@ -7,8 +7,8 @@ labels: "type : feature"
 
 ## Why
 
-Describe the big picture of the feature and why it's needed. 
- 
+Describe the big picture of the feature and why it's needed.
+
 ## Who Benefits?
 
 Describe who will be the beneficiaries e.g. everyone, specific chapters, clients...

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,11 +1,13 @@
-## What happened 
+https://github.com/nimblehq/react-templates/issues/?
+
+## What happened 👀
 
 Describe the big picture of your changes here to communicate to the team why we should accept this pull request.
 
-## Insight
+## Insight 📝
 
-Describe in details how to test the changes. Referenced documentation are welcome as well.
+Describe in detail how to test the changes. Referenced documentation is welcome as well.
 
-## Proof Of Work 💪
+## Proof Of Work 📹
 
-Show us the implementation: screenshots, gif, etc. P.S. Maximum details possible
+Show us the implementation: screenshots, GIF, etc. P.S. Maximum details possible

.github/PULL_REQUEST_TEMPLATE/release_template.md

@@ -0,0 +1,13 @@
+https://github.com/nimblehq/react-templates/milestone/{ID}?closed=1
+
+## Features
+
+Provide the Pull Request IDs in the section for each type (feature, chore, and bug), e.g.
+
+- #1234
+
+## Chores
+- Same structure as in ## Feature
+
+## Bugs
+- Same structure as in ## Feature

.nvmrc

@@ -0,0 +1 @@
+16.14.2

.tool-versions

@@ -0,0 +1 @@
+nodejs 16.14.2

README.md

@@ -9,15 +9,23 @@
 
 ---
 
-Our templates offer a rich boilerplate to jump start React-based application development for [Create React App](https://github.com/facebook/create-react-app).
+<p align="center">
+  <a href="https://www.npmjs.com/package/cra-template-nimble"><img src="https://badgen.net/npm/v/cra-template-nimble" /></a>
+  <a href="https://www.npmjs.com/package/cra-template-nimble"><img src="https://badgen.net/npm/dy/cra-template-nimble" /></a>
+</p>
+
+Our template offers a rich boilerplate to jump-start React-based application development with [Create React App](https://github.com/facebook/create-react-app).
+
+## Getting Started
 
-## Get Started
+### Prerequisites
 
-### Use the template
+[![node-version-image](https://img.shields.io/badge/node-16.14.2-brightgreen.svg)](https://nodejs.org/download/release/v16.14.2/)
 
-To use this template, add `--template nimble` when creating a new app.
+### Usage
+
+To use this template, add `--template nimble` when creating a new app from the `create-react-app` command.
 
-For example:
 
 ```sh
 npx create-react-app my-app --template nimble
@@ -27,9 +35,9 @@ npx create-react-app my-app --template nimble
 yarn create react-app my-app --template nimble
 ```
 
-For more information, please refer to:
+For more information about `create-react-app`, please refer to:
 
-- [Getting Started](https://create-react-app.dev/docs/getting-started) – How to create a new app.
+- [Getting Started](https://create-react-app.dev/docs/getting-started) — How to create a new app.
 - [User Guide](https://create-react-app.dev) – How to develop apps bootstrapped with Create React App.
 
 ## Template structure
@@ -50,22 +58,33 @@ For more information, please refer to:
 └── template.json
 ```
 
-We use `Typescript` by default for our React applications. Along with the standard files from a `create-react-app` 
-project, the folder structure in the `src` folder is created as per the
-[React Conevention](https://nimblehq.co/compass/development/code-conventions/react/#project-structure).
+`Typescript` is used by default for our React applications.
+With the standard files from a non-ejected `create-react-app` project, this template adds a folder structure in `/src` that follows our [React Convention](https://nimblehq.co/compass/development/code-conventions/javascript/react/#project-structure).
+
+## How to contribute
+
+To test the template locally, simply run the template install command with the path of your local `react-template` repository, prefixed by `file:`:
+
+```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
 
-This project is Copyright (c) 2014 and onwards. It is free software,
-and may be redistributed under the terms specified in the [LICENSE] file.
+This project is Copyright (c) 2014 and onwards.
+It is free software and may be redistributed under the terms specified in the [LICENSE] file.
 
 [LICENSE]: /LICENSE
 
 ## About
 
 ![Nimble](https://assets.nimblehq.co/logo/dark/logo-dark-text-160.png)
 
-This project is maintained and funded by Nimble.
+This project is maintained and funded by [Nimble](https://nimblehq.co).
 
 We love open source and do our part in sharing our work with the community!
 See [our other projects][community] or [hire our team][hire] to help build your product.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cra-template-nimble",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "keywords": [
     "react",
     "create-react-app",
@@ -15,7 +15,7 @@
   },
   "license": "MIT",
   "engines": {
-    "node": ">=10"
+    "node": "^14.18.2 || ^16 || ^17"
   },
   "bugs": {
     "url": "https://github.com/nimblehq/react-templates/issues"

template.json

@@ -1,40 +1,48 @@
 {
   "package": {
     "dependencies": {
+      "@cypress/code-coverage": "3.9.12",
+      "@nimblehq/eslint-config-nimble": "2.2.1",
+      "@testing-library/cypress": "8.0.2",
       "@testing-library/jest-dom": "5.11.4",
-      "@testing-library/react": "11.1.0",
-      "@testing-library/user-event": "12.1.10",
-      "@testing-library/cypress": "7.0.4",
-      "@types/node": "12.0.0",
-      "@types/react": "17.0.0",
-      "@types/react-dom": "17.0.0",
-      "@types/jest": "26.0.15",
-      "typescript": "4.1.2",
-      "web-vitals": "1.0.1",
+      "@testing-library/react": "12.1.4",
+      "@testing-library/user-event": "13.5.0",
+      "@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": "7.4.0",
-      "cypress-react-selector": "2.3.6",
-      "eslint": "7.25.0",
-      "prettier": "2.2.1",
-      "@nimbl3/eslint-config-nimbl3": "2.1.1",
-      "eslint-plugin-prettier": "3.4.0",
-      "eslint-config-prettier": "8.3.0",
-      "eslint-plugin-cypress": "2.11.2",
-      "eslint-plugin-import": "2.22.1",
-      "eslint-plugin-jsx-a11y": "6.4.1",
-      "eslint-plugin-react": "7.23.2",
-      "eslint-plugin-react-hooks": "4.2.0",
-      "eslint-plugin-jest": "24.3.6",
-      "@typescript-eslint/eslint-plugin": "4.22.1",
-      "@typescript-eslint/parser": "4.22.1",
-      "node-sass": "4.14.1",
-      "stylelint": "13.13.1",
-      "stylelint-config-sass-guidelines": "8.0.0",
-      "stylelint-scss": "3.19.0",
-      "stylelint-order": "4.1.0",
-      "stylelint-config-property-sort-order-smacss": "7.1.0"
+      "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",
+      "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",
       "lint": "eslint ./src ./cypress --ext .ts,.tsx",
       "lint:fix": "eslint ./src ./cypress --ext .ts,.tsx --fix",
       "stylelint": "stylelint '**/*.scss'",
@@ -43,6 +51,18 @@
       "codebase:fix": "yarn lint:fix && yarn stylelint:fix",
       "cypress:run": "cypress run",
       "cypress:open": "cypress open"
+    },
+    "jest": {
+      "collectCoverageFrom": ["src/**/*.{js,jsx,ts,tsx}", "!src/**/*.d.ts"],
+      "coverageReporters": ["json"]
+    },
+    "nyc": {
+      "report-dir": "coverage/cypress",
+      "exclude": ["src/reportWebVitals.ts"],
+      "excludeAfterRemap": true
+    },
+    "devDependencies": {
+      "@cypress/instrument-cra": "1.4.0"
     }
   }
 }