chore: use lint-staged

Author: cschroeter

Diff for: .eslintrc

@@ -4,7 +4,7 @@
     "node": true
   },
   "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint", "react-hooks"],
+  "plugins": ["@typescript-eslint"],
   "extends": [
     "eslint:recommended",
     "plugin:react/recommended",

Diff for: .husky/_/husky.sh

@@ -0,0 +1,31 @@
+#!/bin/sh
+if [ -z "$husky_skip_init" ]; then
+  debug () {
+    if [ "$HUSKY_DEBUG" = "1" ]; then
+      echo "husky (debug) - $1"
+    fi
+  }
+
+  readonly hook_name="$(basename "$0")"
+  debug "starting $hook_name..."
+
+  if [ "$HUSKY" = "0" ]; then
+    debug "HUSKY env variable is set to 0, skipping hook"
+    exit 0
+  fi
+
+  if [ -f ~/.huskyrc ]; then
+    debug "sourcing ~/.huskyrc"
+    . ~/.huskyrc
+  fi
+
+  export readonly husky_skip_init=1
+  sh -e "$0" "$@"
+  exitCode="$?"
+
+  if [ $exitCode != 0 ]; then
+    echo "husky - $hook_name hook exited with code $exitCode (error)"
+  fi
+
+  exit $exitCode
+fi

Diff for: .husky/commit-msg

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-yarn pretty-quick --staged
+yarn lint-staged 

Diff for: .husky/pre-commit

@@ -7,9 +7,11 @@
     "packages/*"
   ],
   "scripts": {
+    "prepare": "husky install",
     "build": "lerna run build",
     "storybook": "start-storybook -p 6006",
     "test": "lerna run test",
+    "lint": "lerna run lint",
     "ui": "yarn workspace @template/ui",
     "website": "yarn workspace @template/website"
   },
@@ -19,17 +21,16 @@
     "@commitlint/config-conventional": "14.1.0",
     "@storybook/addon-essentials": "6.3.12",
     "@storybook/react": "6.3.12",
-    "@typescript-eslint/eslint-plugin": "5.3.1",
-    "@typescript-eslint/parser": "5.3.1",
+    "@typescript-eslint/eslint-plugin": "5.4.0",
+    "@typescript-eslint/parser": "5.4.0",
     "babel-loader": "8.2.3",
-    "concurrently": "6.3.0",
+    "concurrently": "6.4.0",
     "eslint": "8.2.0",
-    "eslint-plugin-react": "7.26.1",
-    "eslint-plugin-react-hooks": "4.2.0",
+    "eslint-plugin-react": "7.27.0",
     "husky": "7.0.4",
     "lerna": "4.0.0",
+    "lint-staged": "12.0.2",
     "prettier": "2.4.1",
-    "pretty-quick": "3.1.1",
     "typescript": "4.4.4"
   },
   "commitlint": {
@@ -41,5 +42,12 @@
     "node": "16.13.0",
     "yarn": "1.22.17"
   },
-  "dependencies": {}
+  "lint-staged": {
+    "**/*.{js,jsx,ts,tsx}": [
+      "eslint --fix"
+    ],
+    "**/*.{js,jsx,ts,tsx,json,html}": [
+      "prettier --write"
+    ]
+  }
 }

Diff for: package.json

@@ -3,7 +3,7 @@ import { build } from 'esbuild'
 const ExcludeExternalPackagesPlugin = {
   name: 'ExcludeExternalPackagesPlugin',
   setup(build) {
-    const filter = /^[^.\/]|^\.[^.\/]|^\.\.[^\/]/
+    const filter = /^[^./]|^\.[^./]|^\.\.[^/]/
     build.onResolve({ filter }, (args) => ({ path: args.path, external: true }))
   },
 }

Diff for: packages/ui/esbuild.js

@@ -22,6 +22,7 @@
   "scripts": {
     "prebuild": "rimraf dist",
     "build": "node ./esbuild.js",
+    "lint": "eslint --fix --ext .ts,.tsx ./src",
     "types": "tsc --emitDeclarationOnly",
     "test": "jest"
   },
@@ -36,9 +37,9 @@
     "@testing-library/react-hooks": "7.0.2",
     "@testing-library/user-event": "13.5.0",
     "@types/jest": "27.0.2",
-    "@types/react": "17.0.34",
+    "@types/react": "17.0.35",
     "@types/react-dom": "17.0.11",
-    "esbuild": "0.13.12",
+    "esbuild": "0.13.14",
     "jest": "27.3.1"
   },
   "jest": {

Diff for: packages/ui/package.json

@@ -0,0 +1,12 @@
+import React, { useState } from 'react'
+import { Button } from './Button'
+
+export default {
+  title: 'My Button Story',
+}
+
+export const Demo = () => {
+  const [state, setstate] = useState(0)
+
+  return <Button onClick={() => setstate(state + 1)}>{state.toString()}</Button>
+}

Diff for: packages/ui/src/Button.stories.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
 
 interface ButtonProps {
-  label: string
+  children: React.ReactNode
+  onClick?: () => void
 }
 
 export const Button = (props: ButtonProps) => {
-  return <button style={{ background: 'blue' }}>{props.label}</button>
+  return <button style={{ background: 'blue' }} {...props} />
 }

Diff for: packages/ui/src/Button.tsx

@@ -5,20 +5,19 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
+    "start": "next start"
   },
   "dependencies": {
     "@template/ui": "1.0.0",
-    "next": "12.0.3",
+    "next": "12.0.4",
     "react": "17.0.2",
     "react-dom": "17.0.2"
   },
   "devDependencies": {
-    "@types/node": "16.11.6",
-    "@types/react": "17.0.34",
+    "@types/node": "16.11.7",
+    "@types/react": "17.0.35",
     "eslint": "8.2.0",
-    "eslint-config-next": "12.0.3",
+    "eslint-config-next": "12.0.4",
     "typescript": "4.4.4"
   }
 }

Diff for: packages/website/package.json

@@ -1,11 +1,13 @@
-import type { NextPage } from 'next'
 import { Button } from '@template/ui'
+import type { NextPage } from 'next'
+import React from 'react'
 
 const Home: NextPage = () => {
   return (
     <div>
       <h1>Hello World</h1>
-      <Button label="Hello World" />
+
+      <Button>Hello World</Button>
     </div>
   )
 }