chore: improved lefhooks

riipandi · Sep 5, 2024 · 4acfda6 · 4acfda6
1 parent 0efd67a
commit 4acfda6
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 75 deletions.
diff --git a/app/components/base-ui/button/Button.tsx b/app/components/base-ui/button/Button.tsx
@@ -21,7 +21,7 @@ const button = tv({
   },
 })
 
-interface ButtonProps
+export interface ButtonProps
   extends ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof button> {}
 

diff --git a/app/styles.css b/app/styles.css
@@ -1,36 +1,45 @@
 @font-face {
-  font-family: "Mulish Variable";
-  font-style: normal;
-  font-display: swap;
-  font-weight: 200 1000;
-  src: url(https://cdn.jsdelivr.net/fontsource/fonts/mulish:vf@latest/latin-wght-normal.woff2) format("woff2-variations");
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
-    U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
-    U+FFFD;
+    font-family: "Mulish Variable";
+    font-style: normal;
+    font-display: swap;
+    font-weight: 200 1000;
+    src: url(https://cdn.jsdelivr.net/fontsource/fonts/mulish:vf@latest/latin-wght-normal.woff2)
+        format("woff2-variations");
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
+        U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
+        U+FFFD;
 }
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 @layer base {
-  html,
-  body {
-    @apply size-full min-h-screen antialiased scroll-smooth dark:bg-gray-950;
-  }
+    html,
+    body {
+        @apply size-full min-h-screen antialiased scroll-smooth dark:bg-gray-950;
+    }
 }
 
 @layer utilities {
-  /* Skip link */
-  .skiplink {
-    @apply absolute px-2 py-4 flex w-44 justify-center items-center size-px overflow-hidden text-sm;
-    clip: rect(1px, 1px, 1px, 1px);
-  }
-  .skiplink:focus {
-    @apply rounded-lg text-gray-900 h-auto w-auto no-underline m-1 px-4 py-2;
-    clip: auto;
-  }
-  .skiplink:focus, .skiplink:active { border: none; outline: none; }
-  /* Debug element */
-  .debug { border-width: 1px; border-style: dashed; border-color: #f87171; }
+    /* Skip link */
+    .skiplink {
+        @apply absolute px-2 py-4 flex w-44 justify-center items-center size-px overflow-hidden text-sm;
+        clip: rect(1px, 1px, 1px, 1px);
+    }
+    .skiplink:focus {
+        @apply rounded-lg text-gray-900 h-auto w-auto no-underline m-1 px-4 py-2;
+        clip: auto;
+    }
+    .skiplink:focus,
+    .skiplink:active {
+        border: none;
+        outline: none;
+    }
+    /* Debug element */
+    .debug {
+        border-width: 1px;
+        border-style: dashed;
+        border-color: #f87171;
+    }
 }
diff --git a/lefthook.yml b/lefthook.yml
@@ -8,23 +8,53 @@ skip_output:
   - execution_info # Skips printing `EXECUTE > ...` logging
   - skips          # Skips "skip" printing (i.e. no files matched)
 
-# pre-push:
-#   commands:
-#     npm-audit:
-#       tags: frontend security
-#       run: pnpm audit
-
 pre-commit:
   parallel: true
   commands:
+    format:
+      glob: "*.{js,ts,jsx,tsx,json},package.json"
+      exclude: '(^|/)(tests|stories)\.(ts|tsx)$'
+      run: pnpm exec biome format {all_files} --write
     check:
       glob: "*.{js,ts,jsx,tsx,json},package.json"
       exclude: '(^|/)(tests|stories)\.(ts|tsx)$'
       run: pnpm exec biome check {staged_files} --write
     lint:
+      files: git diff --name-only main
       glob: "*.{js,ts,jsx,tsx,json},package.json"
       exclude: '(^|/)(tests|stories)\.(ts|tsx)$'
       run: pnpm exec biome lint {staged_files} --write
+    typecheck:
+      files: git diff --name-only main
+      glob: "*.{js,ts,jsx,tsx,json},package.json"
+      exclude: '(^|/)(tests|stories)\.(ts|tsx)$'
+      run: pnpm exec tsc -b --extendedDiagnostics
+    test-unit:
+      glob: "*.{js,ts,jsx,tsx,json},package.json"
+      exclude: '(^|/)(tests|stories)\.(ts|tsx)$'
+      run: pnpm run test
+    test-coverage:
+      glob: "*.{js,ts,jsx,tsx,json},package.json"
+      exclude: '(^|/)(tests|stories)\.(ts|tsx)$'
+      run: pnpm run test:coverage
+    # test-e2e:
+    #   glob: "*.{js,ts,jsx,tsx,json},package.json"
+    #   exclude: '(^|/)(tests|stories)\.(ts|tsx)$'
+    #   run: pnpm run e2e-test:chrome
   # scripts:
   #   "hello.js":
   #     runner: node
+
+# pre-push:
+#   commands:
+#     npm-audit:
+#       tags: frontend security
+#       run: pnpm audit
+
+pre-deploy:
+  parallel: true
+  commands:
+    docker-build:
+      run: |
+        pnpm run docker:build
+        pnpm run docker:images
diff --git a/package.json b/package.json
@@ -14,42 +14,43 @@
     "homepage": "https://github.com/riipandi/remix-start#readme",
     "scripts": {
         "build": "remix vite:build",
+        "build:storybook": "VITE_CJS_IGNORE_WARNING=true storybook build -o storybook-static",
+        "dev": "pnpm run --reporter-hide-prefix --color --parallel \"/dev:(?!storybook)/\"",
         "dev:remix": "remix vite:dev",
         "dev:storybook": "storybook dev -p 6006 --no-open",
-        "dev": "pnpm run --reporter-hide-prefix --color --parallel \"/dev:(?!storybook)/\"",
-        "build:storybook": "VITE_CJS_IGNORE_WARNING=true storybook build -o storybook-static",
-        "start": "remix-serve ./build/server/index.js",
         "preview": "node ./server.js",
+        "start": "remix-serve ./build/server/index.js",
+        "generate:key": "openssl rand -base64 500 | tr -dc 'a-zA-Z0-9' | fold -w 40 | head -n 1",
         "docker:build": "docker build -f Dockerfile . -t $npm_package_name:latest -t $npm_package_name:$npm_package_version",
+        "docker:images": "docker image list --filter reference=$npm_package_name:$npm_package_version --filter reference=$npm_package_name:latest",
         "docker:run": "docker run --add-host=localhost:host-gateway --rm -it -p 3000:3000 --env-file .env --name $npm_package_name $npm_package_name:$npm_package_version",
         "docker:shell": "docker run --add-host=localhost:host-gateway --rm -it -p 3000:3000 --env-file .env --entrypoint /bin/bash $npm_package_name:$npm_package_version",
-        "docker:images": "docker image list --filter reference=$npm_package_name:$npm_package_version --filter reference=$npm_package_name:latest",
         "docker:slim": "slim build --target $npm_package_name:$npm_package_version --tag $npm_package_name:$npm_package_version-slim",
-        "generate:key": "openssl rand -base64 500 | tr -dc 'a-zA-Z0-9' | fold -w 40 | head -n 1",
         "e2e-test:chrome": "playwright test --headed --project Chromium",
         "e2e-test:firefox": "playwright test --headed --project Firefox",
-        "e2e-test:safari": "playwright test --headed --project Safari",
+        "e2e-test:install": "playwright install --with-deps",
         "e2e-test:mobile": "playwright test --headed --project 'Mobile Chrome'",
         "e2e-test:report": "playwright show-report playwright-report",
-        "e2e-test:install": "playwright install --with-deps",
+        "e2e-test:safari": "playwright test --headed --project Safari",
         "e2e-test:ui": "playwright test --ui",
-        "preinstall": "npx only-allow pnpm",
-        "prepare": "lefthook install || true",
-        "lint": "biome lint . --write",
         "check": "biome check . --write",
         "format": "biome format . --write",
+        "lint": "biome lint . --write",
         "cleanup": "pnpm run --color \"/cleanup:/\"",
         "cleanup:artifacts": "pnpm dlx rimraf build storybook-static",
-        "cleanup:tests": "pnpm dlx rimraf tests-results playwright-report",
-        "cleanup:packages": "pnpm dlx rimraf pnpm-lock.yaml node_modules",
         "cleanup:docker": "docker compose down --remove-orphans --volumes",
+        "cleanup:packages": "pnpm dlx rimraf pnpm-lock.yaml node_modules",
+        "cleanup:tests": "pnpm dlx rimraf tests-results playwright-report",
         "update-deps": "npm-check-updates --configFileName .ncurc.json",
+        "prepare": "lefthook install || true",
+        "preinstall": "npx only-allow pnpm",
         "pre-dev": "docker compose up --detach --remove-orphans",
-        "test:report": "pnpm dlx http-server tests-results --port 0 -a localhost",
+        "pre-commit": "lefthook run pre-commit --force",
+        "typecheck": "tsc -b --extendedDiagnostics",
         "test:coverage": "vitest run --coverage",
+        "test:report": "pnpm dlx http-server tests-results --port 0 -a localhost",
         "test:ui": "vitest --ui",
-        "test": "vitest --run",
-        "typecheck": "tsc -b"
+        "test": "vitest --run"
     },
     "dependencies": {
         "@remix-run/css-bundle": "^2.11.2",
@@ -86,7 +87,7 @@
         "@storybook/test": "^8.2.9",
         "@storybook/theming": "^8.2.9",
         "@tailwindcss/aspect-ratio": "^0.4.2",
-        "@tailwindcss/forms": "^0.5.8",
+        "@tailwindcss/forms": "^0.5.9",
         "@tailwindcss/typography": "^0.5.15",
         "@testing-library/jest-dom": "^6.5.0",
         "@testing-library/react": "^16.0.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/stories/example/Button.stories.ts b/stories/example/Button.stories.ts
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { fn } from '@storybook/test'
 
-import Button from '#/components/Button'
+import { Button, type ButtonProps } from '#/components/base-ui'
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {
@@ -22,7 +22,7 @@ const meta = {
   // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked.
   // @ref: https://storybook.js.org/docs/essentials/actions#action-args
   args: { onClick: fn() },
-} satisfies Meta<typeof Button>
+} satisfies Meta<ButtonProps>
 
 export default meta
 type Story = StoryObj<typeof meta>

diff --git a/stories/example/Header.tsx b/stories/example/Header.tsx
@@ -1,4 +1,4 @@
-import Button from '#/components/Button'
+import { Button } from '#/components/base-ui'
 
 import './header.css'