Style lint added, other minor edits

.eslintignore

@@ -1,2 +1 @@
 /node_modules
-/.docz

.eslintrc.json

@@ -1,3 +1,3 @@
 {
-    "extends": "@pod-point/eslint-config-podpoint-base"
+    "extends": "@pod-point/eslint-config-podpoint-react"
 }

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "css.validate": false
+}

README.md

@@ -33,3 +33,8 @@ To build the TailwindCSS config or styles
 ```
 yarn run tailwind:build
 ```
+
+### Linters and IDE setup
+We use [Pod Point's React ESLint package](https://github.com/Pod-Point/eslint-config-podpoint-react) for React projects.
+For CSS pattern consistency, we use a third party package called ```stylelint```. This is required as we are using Tailwind's ```@apply``` method in the custom CSS files.
+To see how to set this up in VS Code, please refer to [this article.](https://www.meidev.co/blog/visual-studio-code-css-linting-with-tailwind/)

package.json

@@ -20,8 +20,8 @@
   "scripts": {
     "tailwind:watch": "postcss src/styles/styles.css -o src/styles/output.css -w",
     "tailwind:build": "postcss src/styles/styles.css -o src/styles/output.css",
-    "start": "react-scripts start & watch:tailwind",
-    "build": "react-scripts build && build:tailwind",
+    "start": "react-scripts start",
+    "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "docz:dev": "docz dev",
@@ -44,12 +44,17 @@
   },
   "devDependencies": {
     "@pod-point/eslint-config-podpoint-base": "pod-point/eslint-config-podpoint-base",
+    "@pod-point/eslint-config-podpoint-react": "pod-point/eslint-config-podpoint-react",
+    "babel-eslint": "^10.0.3",
     "docz": "^1.2.0",
     "docz-theme-default": "^1.2.0",
-    "eslint": "^6.2.1",
-    "eslint-config-airbnb-base": "^14.0.0",
+    "eslint": "^6.3.0",
+    "eslint-config-airbnb": "^18.0.1",
     "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-react": "^7.14.3",
     "postcss-cli": "^6.1.3",
-    "react-hot-loader": "^4.12.11"
+    "react-hot-loader": "^4.12.11",
+    "stylelint-config-recommended": "^2.2.0"
   }
 }

src/__docz__/index.mdx

@@ -42,6 +42,11 @@ To build the TailwindCSS config or styles
 yarn run build:tailwind
 ```
 
+### Linters and IDE setup
+We use [Pod Point's React ESLint package](https://github.com/Pod-Point/eslint-config-podpoint-react) for React projects.
+For CSS pattern consistency, we use a third party package called ```stylelint```. This is required as we are using Tailwind's ```@apply``` method in the custom CSS files.
+To see how to set this up in VS Code, please refer to [this article.](https://www.meidev.co/blog/visual-studio-code-css-linting-with-tailwind/)
+
 
 ## Building components
 - Add a new component by creating either a new folder or ```.tsx``` file under a current folder in ```src > components```.

src/interfaces/partials/Header.tsx

@@ -1,5 +1,5 @@
 export default interface HeaderProps {
-    projectName: string,
+    projectName?: string,
     userName: {
         firstName: string,
         lastName: string,

src/partials/Header.tsx

@@ -17,7 +17,7 @@ const Header: FunctionComponent<HeaderProps> = ({
                 </div>
                 <div className="py-2 flex-1 self-center">
                     <Button
-                        type="primary"
+                        kind="primary"
                         title="Add RFID Cards"
                         small
                         onClick={ false }

stylelint.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+    extends: ['stylelint-config-recommended'],
+    rules: {
+        'at-rule-no-unknown': [true, {
+            ignoreAtRules: [
+                'tailwind',
+                'apply',
+                'variants',
+                'responsive',
+                'screen',
+            ],
+        }],
+        'declaration-block-trailing-semicolon': null,
+        'no-descending-specificity': null,
+    },
+};

yarn.lock

@@ -1189,6 +1189,10 @@
   version "0.1.10"
   resolved "https://codeload.github.com/pod-point/eslint-config-podpoint-base/tar.gz/f31394734d500f7cf12c5ea2ef261f83c0eb919b"
 
+"@pod-point/eslint-config-podpoint-react@pod-point/eslint-config-podpoint-react":
+  version "0.1.4"
+  resolved "https://codeload.github.com/pod-point/eslint-config-podpoint-react/tar.gz/f7032d26598b66f59b89057419d91a46787e1820"
+
 "@reach/router@^1.2.1":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@reach/router/-/router-1.2.1.tgz#34ae3541a5ac44fa7796e5506a5d7274a162be4e"
@@ -2122,6 +2126,17 @@ [email protected]:
     eslint-scope "3.7.1"
     eslint-visitor-keys "^1.0.0"
 
+babel-eslint@^10.0.3:
+  version "10.0.3"
+  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-10.0.3.tgz#81a2c669be0f205e19462fed2482d33e4687a88a"
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@babel/parser" "^7.0.0"
+    "@babel/traverse" "^7.0.0"
+    "@babel/types" "^7.0.0"
+    eslint-visitor-keys "^1.0.0"
+    resolve "^1.12.0"
+
 babel-extract-comments@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/babel-extract-comments/-/babel-extract-comments-1.0.0.tgz#0a2aedf81417ed391b85e18b4614e693a0351a21"
@@ -4495,6 +4510,14 @@ eslint-config-airbnb-base@^14.0.0:
     object.assign "^4.1.0"
     object.entries "^1.1.0"
 
+eslint-config-airbnb@^18.0.1:
+  version "18.0.1"
+  resolved "https://registry.yarnpkg.com/eslint-config-airbnb/-/eslint-config-airbnb-18.0.1.tgz#a3a74cc29b46413b6096965025381df8fb908559"
+  dependencies:
+    eslint-config-airbnb-base "^14.0.0"
+    object.assign "^4.1.0"
+    object.entries "^1.1.0"
+
 eslint-config-react-app@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-5.0.1.tgz#5f3d666ba3ee3cb384eb943e260e868f6c72251b"
@@ -4547,7 +4570,7 @@ [email protected], eslint-plugin-import@^2.18.2:
     read-pkg-up "^2.0.0"
     resolve "^1.11.0"
 
-[email protected]:
+[email protected], eslint-plugin-jsx-a11y@^6.2.3:
   version "6.2.3"
   resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.2.3.tgz#b872a09d5de51af70a97db1eea7dc933043708aa"
   dependencies:
@@ -4565,7 +4588,7 @@ eslint-plugin-react-hooks@^1.6.1:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.7.0.tgz#6210b6d5a37205f0b92858f895a4e827020a7d04"
 
-[email protected]:
+[email protected], eslint-plugin-react@^7.14.3:
   version "7.14.3"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.14.3.tgz#911030dd7e98ba49e1b2208599571846a66bdf13"
   dependencies:
@@ -4610,7 +4633,7 @@ eslint-visitor-keys@^1.0.0, eslint-visitor-keys@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz#e2a82cea84ff246ad6fb57f9bde5b46621459ec2"
 
-eslint@^6.1.0, eslint@^6.2.1:
+eslint@^6.1.0, eslint@^6.3.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/eslint/-/eslint-6.3.0.tgz#1f1a902f67bfd4c354e7288b81e40654d927eb6a"
   dependencies:
@@ -10710,7 +10733,7 @@ [email protected]:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
 
-[email protected], resolve@^1.1.7, resolve@^1.10.0, resolve@^1.10.1, resolve@^1.11.0, resolve@^1.3.2, resolve@^1.5.0, resolve@^1.6.0, resolve@^1.7.1, resolve@^1.8.1:
+[email protected], resolve@^1.1.7, resolve@^1.10.0, resolve@^1.10.1, resolve@^1.11.0, resolve@^1.12.0, resolve@^1.3.2, resolve@^1.5.0, resolve@^1.6.0, resolve@^1.7.1, resolve@^1.8.1:
   version "1.12.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.12.0.tgz#3fc644a35c84a48554609ff26ec52b66fa577df6"
   dependencies:
@@ -11591,6 +11614,10 @@ stylehacks@^4.0.0:
     postcss "^7.0.0"
     postcss-selector-parser "^3.0.0"
 
+stylelint-config-recommended@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/stylelint-config-recommended/-/stylelint-config-recommended-2.2.0.tgz#46ab139db4a0e7151fd5f94af155512886c96d3f"
+
 stylis-rule-sheet@^0.0.10:
   version "0.0.10"
   resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430"