separate build and lint ci

.github/workflows/ci.yaml

@@ -7,7 +7,7 @@ on:
     branches: [main]
 
 jobs:
-  build:
+  lint:
     runs-on: ubuntu-latest
 
     steps:
@@ -39,14 +39,41 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
-      - name: Lint and Format Check
+      - name: Lint, format and typecheck
+        run: |
+          pnpm run check
+
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 9
+
+      - name: Get pnpm store directory
+        shell: bash
         run: |
-          pnpm run lint & \
-          pnpm run format:check & \
-          wait
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - name: Setup pnpm cache
+        uses: actions/cache@v3
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
 
-      - name: Type check
-        run: pnpm run typecheck
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
 
       - name: Build
         run: pnpm run build

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "build": "next build",
-    "check": "next lint && tsc --noEmit && pnpm run format:check",
+    "check": "concurrently --names \"lint,typecheck,format\" --prefix-colors \"yellow,blue,green\" \"next lint\" \"tsc --noEmit\" \"pnpm run format:check\"",
     "dev": "next dev --turbo",
     "lint": "next lint",
     "lint:fix": "next lint --fix",
@@ -28,6 +28,7 @@
     "@types/react-dom": "npm:[email protected]",
     "@typescript-eslint/eslint-plugin": "^8.13.0",
     "@typescript-eslint/parser": "^8.13.0",
+    "concurrently": "^9.1.0",
     "eslint": "^8",
     "eslint-config-next": "15.0.0-rc.1",
     "prettier": "^3.3.3",

src/app/(tools)/rounded-border/rounded-tool.tsx

@@ -192,7 +192,7 @@ export function RoundedTool() {
   const [radius, setRadius] = useLocalStorage<Radius>("roundedTool_radius", 2);
   const [background, setBackground] = useLocalStorage<BackgroundOption>(
     "roundedTool_background",
-    "transparent"
+    "transparent",
   );
 
   if (!imageMetadata)

src/hooks/use-local-storage.ts

@@ -6,7 +6,7 @@ export function useLocalStorage<T>(key: string, initialValue: T) {
 
     try {
       const item = window.localStorage.getItem(key);
-      return item ? JSON.parse(item) : initialValue;
+      return item ? (JSON.parse(item) as T) : initialValue;
     } catch (error) {
       console.warn(`Error reading localStorage key "${key}":`, error);
       return initialValue;