Update zod

.lintstagedrc.json

@@ -0,0 +1,3 @@
+{
+  "*.{js,jsx,ts,tsx,json,jsonc}": ["pnpm lint:fix"]
+}

.ncurc.js

@@ -1,21 +1,17 @@
 module.exports = {
-  dep: ['prod', 'dev', 'optional', 'packageManager'],
+  dep: ["prod", "dev", "optional", "packageManager"],
   deep: true,
   upgrade: true,
-  reject: [
-    'pnpm'
-  ],
+  reject: ["pnpm"],
   filterResults: (name, { upgradedVersionSemver }) => {
     if (
-      name === '@types/node' && parseInt(upgradedVersionSemver?.major) >= 22 ||
-      name === 'eslint' && parseInt(upgradedVersionSemver?.major) >= 9 ||
-      name === 'tailwindcss' && parseInt(upgradedVersionSemver?.major) >= 4 ||
-      name === 'zod' && parseInt(upgradedVersionSemver?.major) >= 4 ||
-      name === '@hookform/resolvers' && parseInt(upgradedVersionSemver?.major) >= 4
+      (name === "@types/node" &&
+        parseInt(upgradedVersionSemver?.major) >= 22) ||
+      (name === "tailwindcss" && parseInt(upgradedVersionSemver?.major) >= 4)
     ) {
       return false
     }
 
     return true
-  }
+  },
 }

.vscode/extensions.json

@@ -3,10 +3,10 @@
   // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
   // List of extensions which should be recommended for users of this workspace.
   "recommendations": [
-    "dbaeumer.vscode-eslint",
     "bradlc.vscode-tailwindcss",
-    "unifiedjs.vscode-mdx"
+    "unifiedjs.vscode-mdx",
+    "biomejs.biome"
   ],
   // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
   "unwantedRecommendations": []
-}
+}

.vscode/settings.json

@@ -1,47 +1,14 @@
 {
-  // Enable ESLint
-  "eslint.validate": [
-    "javascript",
-    "javascriptreact",
-    "typescript",
-    "typescriptreact"
-  ],
-  // disable formatOnSave for eslint files
-  "[javascript]": {
-    "editor.formatOnSave": false
-  },
-  "[javascriptreact]": {
-    "editor.formatOnSave": false
-  },
-  "[typescript]": {
-    "editor.formatOnSave": false
-  },
-  "[typescriptreact]": {
-    "editor.formatOnSave": false
-  },
-  // keep it enable for all other files
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "biome.enabled": true,
+  "editor.defaultFormatter": "biomejs.biome",
   "editor.formatOnSave": true,
-  // this ensure ESLint autofix all issue (formatting is done by prettier loaded as eslint rules)
   "editor.codeActionsOnSave": {
-    "source.fixAll": "explicit",
-    "source.organizeImports": "explicit"
-  },
-  // be sure vscode always uses TS version in local project
-  "typescript.tsdk": "node_modules/typescript/lib",
-  // enable auto formatting on json and json with comments
-  "[jsonc]": {
-    "editor.defaultFormatter": "vscode.json-language-features"
+    "quickfix.biome": "explicit",
+    "source.organizeImports.biome": "explicit"
   },
-  "json.format.enable": true,
   "files.associations": {
     "*.css": "tailwindcss", // enforce usage of Tailwind extention to lint css files
-    "*.json": "jsonc" // allow comments on json files
-  },
-  // to have stylelint and tailwind intellisense working properly
-  "css.validate": false,
-  "less.validate": false,
-  "scss.validate": false,
-  "testing.automaticallyOpenPeekView": "never",
-  // Enable experimental IntelliSense support for MDX files
-  "mdx.experimentalLanguageServer": true
+    "*.json": "jsonc"
+  }
 }

biome.jsonc

@@ -0,0 +1,52 @@
+{
+  "$schema": "https://biomejs.dev/schemas/2.1.1/schema.json",
+  "vcs": {
+    "enabled": false,
+    "clientKind": "git",
+    "useIgnoreFile": false
+  },
+  "files": {
+    "ignoreUnknown": false,
+    "includes": [
+      "**",
+      "!**/vendor.css",
+      "!node_modules",
+      "!packages/app-elements/dist",
+      "!packages/docs/dist"
+    ],
+    "maxSize": 1572864
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "formatWithErrors": true
+  },
+  "assist": {
+    "actions": {
+      "source": {
+        "organizeImports": "on"
+      }
+    }
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "correctness": {
+        "useExhaustiveDependencies": "off"
+      },
+      "performance": {
+        "noAccumulatingSpread": "off"
+      },
+      "suspicious": {
+        "noExplicitAny": "off"
+      }
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "semicolons": "asNeeded"
+    }
+  }
+}

lerna.json

@@ -8,4 +8,4 @@
       "preid": "beta"
     }
   }
-}
+}

package.json

@@ -7,8 +7,8 @@
     "build:elements": "pnpm --stream --filter @commercelayer/app-elements build",
     "build:abilities": "pnpm --filter docs build:abilities",
     "build:docs": "pnpm --filter docs build",
-    "lint": "pnpm --stream -r lint",
-    "lint:fix": "pnpm -r lint:fix",
+    "lint": "pnpm biome check",
+    "lint:fix": "pnpm biome check --write",
     "test": "pnpm -r test",
     "test:watch": "pnpm --stream -r test:watch",
     "ts:check": "pnpm --stream -r ts:check",
@@ -35,6 +35,7 @@
     "packages/*"
   ],
   "devDependencies": {
+    "@biomejs/biome": "2.1.1",
     "husky": "^9.1.7",
     "lerna": "^8.2.3",
     "lint-staged": "^16.1.2"

packages/app-elements/.lintstagedrc.json

@@ -1,7 +1,7 @@
 {
   "*.{js,jsx,ts,tsx}": [
     "bash -c \"tsc -p ./tsconfig.json --noEmit\"",
-    "pnpm lint:fix",
     "bash -c \"pnpm test\""
-  ]
+  ],
+  "*.{js,jsx,ts,tsx,json,jsonc}": ["pnpm lint:fix"]
 }

packages/app-elements/package.json

@@ -30,8 +30,7 @@
     "build": "tsc && vite build && pnpm build:css-vendor && pnpm build:tailwind-cfg",
     "build:tailwind-cfg": "cp ./tailwind.config.cjs ./dist/tailwind.config.js",
     "build:css-vendor": "pnpm exec tailwindcss -i ./src/styles/vendor.css -o ./dist/vendor.css --minify",
-    "lint": "eslint src --ext .ts,.tsx",
-    "lint:fix": "eslint src --ext .ts,.tsx --fix",
+    "lint:fix": "pnpm biome check --write",
     "test": "vitest run",
     "test:watch": "vitest",
     "ts:check": "tsc --noEmit",
@@ -68,11 +67,10 @@
     "swr": "^2.3.4",
     "ts-invariant": "^0.10.3",
     "type-fest": "^4.41.0",
-    "zod": "^3.25.76"
+    "zod": "^4.0.5"
   },
   "devDependencies": {
-    "@commercelayer/eslint-config-ts-react": "^2.2.0",
-    "@hookform/resolvers": "^3.10.0",
+    "@hookform/resolvers": "^5.1.1",
     "@phosphor-icons/react": "v2.1.10",
     "@tailwindcss/forms": "^0.5.10",
     "@testing-library/jest-dom": "^6.6.3",
@@ -86,7 +84,6 @@
     "cross-fetch": "^4.1.0",
     "date-fns": "^4.1.0",
     "date-fns-tz": "^3.2.0",
-    "eslint": "^8.57.1",
     "jsdom": "^26.1.0",
     "msw": "^2.10.4",
     "postcss": "^8.5.6",

packages/app-elements/postcss.config.cjs

@@ -1,6 +1,6 @@
 module.exports = {
   plugins: {
     tailwindcss: {},
-    autoprefixer: {}
-  }
+    autoprefixer: {},
+  },
 }

packages/app-elements/react-testing-library.config.js

@@ -1 +1 @@
-import '@testing-library/jest-dom'
+import "@testing-library/jest-dom"

packages/app-elements/src/dictionaries/customers.ts

@@ -1,44 +1,44 @@
-import type { Customer } from '@commercelayer/sdk'
-import { t } from 'i18next'
-import type { DisplayStatus } from './types'
+import type { Customer } from "@commercelayer/sdk"
+import { t } from "i18next"
+import type { DisplayStatus } from "./types"
 
 export interface CustomerDisplayStatus extends DisplayStatus {}
 
 export function getCustomerDisplayStatus(
-  customerObj: Customer
+  customerObj: Customer,
 ): CustomerDisplayStatus {
   switch (customerObj.status) {
-    case 'prospect':
+    case "prospect":
       return {
-        label: t('resources.customers.attributes.status.prospect'),
-        icon: 'chatCircle',
-        color: 'orange',
-        task: t('resources.customers.attributes.status.prospect')
+        label: t("resources.customers.attributes.status.prospect"),
+        icon: "chatCircle",
+        color: "orange",
+        task: t("resources.customers.attributes.status.prospect"),
       }
 
-    case 'acquired':
+    case "acquired":
       return {
-        label: t('resources.customers.attributes.status.acquired'),
-        icon: 'check',
-        color: 'orange',
-        task: t('resources.customers.attributes.status.acquired')
+        label: t("resources.customers.attributes.status.acquired"),
+        icon: "check",
+        color: "orange",
+        task: t("resources.customers.attributes.status.acquired"),
       }
 
-    case 'repeat':
+    case "repeat":
       return {
-        label: t('resources.customers.attributes.status.repeat'),
-        icon: 'arrowUpRight',
-        color: 'orange',
-        task: t('resources.customers.attributes.status.repeat')
+        label: t("resources.customers.attributes.status.repeat"),
+        icon: "arrowUpRight",
+        color: "orange",
+        task: t("resources.customers.attributes.status.repeat"),
       }
   }
 }
 
-export function getCustomerStatusName(status: Customer['status']): string {
+export function getCustomerStatusName(status: Customer["status"]): string {
   const dictionary: Record<typeof status, string> = {
-    prospect: t('resources.customers.attributes.status.prospect'),
-    acquired: t('resources.customers.attributes.status.acquired'),
-    repeat: t('resources.customers.attributes.status.repeat')
+    prospect: t("resources.customers.attributes.status.prospect"),
+    acquired: t("resources.customers.attributes.status.acquired"),
+    repeat: t("resources.customers.attributes.status.repeat"),
   }
 
   return dictionary[status]