feat: use lefthook to replace husky and lint-staged

.husky/_/pre-commit

@@ -0,0 +1,57 @@
+#!/bin/sh
+
+if [ "$LEFTHOOK_VERBOSE" = "1" -o "$LEFTHOOK_VERBOSE" = "true" ]; then
+  set -x
+fi
+
+if [ "$LEFTHOOK" = "0" ]; then
+  exit 0
+fi
+
+call_lefthook()
+{
+  if test -n "$LEFTHOOK_BIN"
+  then
+    "$LEFTHOOK_BIN" "$@"
+  elif lefthook -h >/dev/null 2>&1
+  then
+    lefthook "$@"
+  else
+    dir="$(git rev-parse --show-toplevel)"
+    osArch=$(uname | tr '[:upper:]' '[:lower:]')
+    cpuArch=$(uname -m | sed 's/aarch64/arm64/;s/x86_64/x64/')
+    if test -f "$dir/node_modules/lefthook-${osArch}-${cpuArch}/bin/lefthook"
+    then
+      "$dir/node_modules/lefthook-${osArch}-${cpuArch}/bin/lefthook" "$@"
+    elif test -f "$dir/node_modules/@evilmartians/lefthook/bin/lefthook-${osArch}-${cpuArch}/lefthook"
+    then
+      "$dir/node_modules/@evilmartians/lefthook/bin/lefthook-${osArch}-${cpuArch}/lefthook" "$@"
+    elif test -f "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook"
+    then
+      "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook" "$@"
+    elif test -f "$dir/node_modules/lefthook/bin/index.js"
+    then
+      "$dir/node_modules/lefthook/bin/index.js" "$@"
+
+    elif bundle exec lefthook -h >/dev/null 2>&1
+    then
+      bundle exec lefthook "$@"
+    elif yarn lefthook -h >/dev/null 2>&1
+    then
+      yarn lefthook "$@"
+    elif pnpm lefthook -h >/dev/null 2>&1
+    then
+      pnpm lefthook "$@"
+    elif swift package plugin lefthook >/dev/null 2>&1
+    then
+      swift package --disable-sandbox plugin lefthook "$@"
+    elif command -v mint >/dev/null 2>&1
+    then
+      mint run csjones/lefthook-plugin "$@"
+    else
+      echo "Can't find lefthook in PATH"
+    fi
+  fi
+}
+
+call_lefthook run "pre-commit" "$@"

.husky/_/prepare-commit-msg

@@ -0,0 +1,57 @@
+#!/bin/sh
+
+if [ "$LEFTHOOK_VERBOSE" = "1" -o "$LEFTHOOK_VERBOSE" = "true" ]; then
+  set -x
+fi
+
+if [ "$LEFTHOOK" = "0" ]; then
+  exit 0
+fi
+
+call_lefthook()
+{
+  if test -n "$LEFTHOOK_BIN"
+  then
+    "$LEFTHOOK_BIN" "$@"
+  elif lefthook -h >/dev/null 2>&1
+  then
+    lefthook "$@"
+  else
+    dir="$(git rev-parse --show-toplevel)"
+    osArch=$(uname | tr '[:upper:]' '[:lower:]')
+    cpuArch=$(uname -m | sed 's/aarch64/arm64/;s/x86_64/x64/')
+    if test -f "$dir/node_modules/lefthook-${osArch}-${cpuArch}/bin/lefthook"
+    then
+      "$dir/node_modules/lefthook-${osArch}-${cpuArch}/bin/lefthook" "$@"
+    elif test -f "$dir/node_modules/@evilmartians/lefthook/bin/lefthook-${osArch}-${cpuArch}/lefthook"
+    then
+      "$dir/node_modules/@evilmartians/lefthook/bin/lefthook-${osArch}-${cpuArch}/lefthook" "$@"
+    elif test -f "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook"
+    then
+      "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook" "$@"
+    elif test -f "$dir/node_modules/lefthook/bin/index.js"
+    then
+      "$dir/node_modules/lefthook/bin/index.js" "$@"
+
+    elif bundle exec lefthook -h >/dev/null 2>&1
+    then
+      bundle exec lefthook "$@"
+    elif yarn lefthook -h >/dev/null 2>&1
+    then
+      yarn lefthook "$@"
+    elif pnpm lefthook -h >/dev/null 2>&1
+    then
+      pnpm lefthook "$@"
+    elif swift package plugin lefthook >/dev/null 2>&1
+    then
+      swift package --disable-sandbox plugin lefthook "$@"
+    elif command -v mint >/dev/null 2>&1
+    then
+      mint run csjones/lefthook-plugin "$@"
+    else
+      echo "Can't find lefthook in PATH"
+    fi
+  fi
+}
+
+call_lefthook run "prepare-commit-msg" "$@"

.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["biomejs.biome"],
+  "unwantedRecommendations": []
+}

.vscode/settings.json

@@ -3,5 +3,6 @@
     "source.organizeImports.biome": "explicit",
     "quickfix.biome": "explicit"
   },
-  "i18n-ally.localesPaths": ["messages", "src/i18n", "src/components/language"]
+  "i18n-ally.localesPaths": ["messages", "src/i18n", "src/components/language"],
+  "i18n-ally.keystyle": "nested"
 }

biome.json

@@ -2,7 +2,7 @@
   "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
   "files": {
     "ignoreUnknown": false,
-    "ignore": ["src/components/ui/*.tsx"]
+    "ignore": ["src/components/ui/*.tsx", "node_modules", ".next"]
   },
   "vcs": {
     "enabled": false,
@@ -19,7 +19,8 @@
       },
       "style": {},
       "a11y": {
-        "useSemanticElements": "off"
+        "useSemanticElements": "off",
+        "useKeyWithClickEvents": "off"
       },
       "correctness": {
         "noUnusedImports": "error"

lefthook.yml

@@ -0,0 +1,5 @@
+pre-commit:
+  commands:
+    check:
+      glob: "*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc}"
+      run: npx @biomejs/biome check --no-errors-on-unmatched --files-ignore-unknown=true --colors=off {staged_files}

package.json

@@ -10,11 +10,11 @@
     "typecheck": "tsc --noEmit",
     "build": "next build",
     "start": "next start",
-    "preview": "next build && next start",
-    "prepare": "husky"
+    "preview": "next build && next start"
   },
   "dependencies": {
-    "@radix-ui/react-popover": "^1.1.2",
+    "@radix-ui/react-select": "^2.1.4",
+    "@radix-ui/react-slot": "^1.1.1",
     "@t3-oss/env-nextjs": "^0.11.1",
     "@tanstack/react-query": "^5.62.7",
     "@trpc/client": "^11.0.0-rc.446",
@@ -23,6 +23,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "geist": "^1.3.0",
+    "lefthook": "^1.9.3",
     "lucide-react": "^0.468.0",
     "next": "^15.1.0",
     "next-intl": "^3.26.1",
@@ -41,15 +42,8 @@
     "@types/node": "^20.14.10",
     "@types/react": "^19.0.1",
     "@types/react-dom": "^19.0.0",
-    "husky": "^9.1.7",
-    "lint-staged": "^15.2.10",
     "postcss": "^8.4.39",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.5.3"
-  },
-  "lint-staged": {
-    "*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc}": [
-      "biome check --write --no-errors-on-unmatched ./src"
-    ]
   }
 }

src/app/[locale]/page.tsx

@@ -9,14 +9,12 @@ export default function Home() {
 
   return (
     <HydrateClient>
-      <div className='flex h-screen items-center justify-center'>
-        <div className='flex flex-col items-center gap-6'>
-          <StoreDemo />
+      <div className='flex h-screen flex-col items-center justify-center gap-8'>
+        <StoreDemo />
+        <div className='flex w-full items-center justify-center gap-4'>
           {t('hello')}
-          <div className='flex items-center gap-4'>
-            <ThemeToggle />
-            <LanguageToggle />
-          </div>
+          <LanguageToggle />
+          <ThemeToggle />
         </div>
       </div>
     </HydrateClient>

src/components/language/toggle.tsx

@@ -1,23 +1,29 @@
 'use client'
 
-import { Check, Languages } from 'lucide-react'
 import { useLocale } from 'next-intl'
-import { useRouter } from 'next/navigation'
+import { useState } from 'react'
 import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '~/components/ui/popover'
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '~/components/ui/select'
 import { setUserLocale } from '~/i18n/locale'
-import { localeMap, routing } from '~/i18n/routing'
+import { localeMap, useRouter } from '~/i18n/routing'
+import { cn } from '~/lib/utils'
 
-export function LanguageToggle() {
-  const router = useRouter()
-  const currentLocale = useLocale()
+interface LanguageToggleProps {
+  className?: string
+}
 
-  const { locales } = routing
+export function LanguageToggle({ className }: LanguageToggleProps) {
+  const currentLocale = useLocale()
+  const router = useRouter()
+  const [selectedLocale, setSelectedLocale] = useState(currentLocale)
 
   const handleLocaleChange = (locale: string) => {
+    setSelectedLocale(locale)
     setUserLocale(locale)
       .then(() => {
         router.refresh()
@@ -28,34 +34,32 @@ export function LanguageToggle() {
   }
 
   return (
-    <Popover>
-      <PopoverTrigger>
-        <Languages
-          size={22}
-          strokeWidth={1.6}
-        />
-      </PopoverTrigger>
-      <PopoverContent className='flex w-[150px] flex-col gap-2 px-0 py-2'>
-        {locales.map((locale) => (
-          <button
-            type='button'
-            key={locale}
-            onClick={() => handleLocaleChange(locale)}
-            className='flex w-full cursor-pointer items-center gap-2 px-4 py-2 text-left text-sm transition-colors hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 active:bg-gray-200 dark:active:bg-gray-700 dark:hover:bg-gray-800'
+    <div className={cn(className)}>
+      <Select
+        value={selectedLocale}
+        onValueChange={handleLocaleChange}
+      >
+        <SelectTrigger className='w-[140px] border-none bg-transparent shadow-none focus:ring-0 focus:ring-offset-0 focus-visible:border-none focus-visible:ring-0'>
+          <span className='text-xl'>
+            {selectedLocale === 'en' ? '🇺🇸' : '🇨🇳'}
+          </span>
+          <SelectValue placeholder={localeMap[selectedLocale]} />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem
+            value='en'
+            className='cursor-pointer'
+          >
+            English
+          </SelectItem>
+          <SelectItem
+            value='zh'
+            className='cursor-pointer'
           >
-            <span className='size-5 flex-shrink-0 scale-125'>
-              {locale === 'zh' ? '🇨🇳' : '🇬🇧'}
-            </span>
-            <span className='flex-grow font-medium'>{localeMap[locale]}</span>
-            {locale === currentLocale && (
-              <Check
-                className='size-5'
-                strokeWidth={2}
-              />
-            )}
-          </button>
-        ))}
-      </PopoverContent>
-    </Popover>
+            简体中文
+          </SelectItem>
+        </SelectContent>
+      </Select>
+    </div>
   )
 }

src/components/store-demo.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { Button } from '~/components/ui/button'
 import { useIsClient } from '~/hooks/use-client'
 import { useBearStore } from '~/store/bear'
 
@@ -10,19 +11,13 @@ export function StoreDemo() {
   const isClient = useIsClient()
 
   if (!isClient) {
-    return <div className='h-5' />
+    return null
   }
 
   return (
     <div className='flex h-5 items-center gap-4'>
       <div>{bears}</div>
-      <button
-        type='button'
-        onClick={addABear}
-        className='rounded-md bg-blue-500 px-3 py-1 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2'
-      >
-        Add a Bear
-      </button>
+      <Button onClick={addABear}>Add a Bear</Button>
     </div>
   )
 }

src/components/theme/toggle.tsx

@@ -12,15 +12,9 @@ export function ThemeToggle() {
   }
 
   return (
-    <button
-      type='button'
+    <div
       onClick={toggleTheme}
-      aria-label={
-        resolvedTheme === 'light'
-          ? 'Switch to dark mode'
-          : 'Switch to light mode'
-      }
-      className='flex items-center rounded-md p-2 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:hover:bg-gray-800'
+      className='cursor-pointer'
     >
       <Sun
         className='dark:hidden'
@@ -30,6 +24,6 @@ export function ThemeToggle() {
         className='hidden dark:block'
         size={22}
       />
-    </button>
+    </div>
   )
 }