Update dependencies to latest

.circleci/config.yml

@@ -21,6 +21,9 @@ jobs:
     steps:
       - checkout
       - <<: *setup
+      - run:
+          name: Audit
+          command: pnpm audit --audit-level high && pnpm audit || exit 0
       - run:
           name: Test 
           command: pnpm test

.ncurc.json

@@ -0,0 +1,9 @@
+{
+  "reject": [
+    "jwt-decode",
+    "@commercelayer/js-auth",
+    "@types/async-retry",
+    "stylelint",
+    "stylelint-config-standard"
+  ]
+}

.vscode/extensions.json

@@ -3,11 +3,8 @@
   // 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",
-    "ZixuanChen.vitest-explorer",
-    "ms-playwright.playwright"
+    "dbaeumer.vscode-eslint"
   ],
   // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
   "unwantedRecommendations": []
-}
+}

.vscode/settings.json

@@ -6,38 +6,12 @@
     "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
-  "editor.formatOnSave": true,
-  // this ensure ESLint autofix all issue (formatting is done by prettier loaded as eslint rules)
-  "editor.codeActionsOnSave": {
-    "source.fixAll": true,
-  },
   // 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"
-  },
-  "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,
-}
+  // format on save
+  // "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll": "explicit",
+    "source.organizeImports": "explicit"
+  }
+}

package.json

@@ -32,7 +32,11 @@
     "packages/*"
   ],
   "devDependencies": {
-    "lerna": "^6.1.0"
+    "lerna": "^6.1.0",
+    "npm-check-updates": "^16.14.6"
   },
-  "packageManager": "pnpm@8.0.0"
+  "packageManager": "pnpm@8.0.0",
+  "resolutions": {
+    "@babel/traverse": "^7.23.2"
+  }
 }

packages/app/package.json

@@ -22,64 +22,63 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "lint": "eslint src",
-    "lint:fix": "eslint src --fix",
+    "lint": "eslint src --ext .ts,.tsx",
+    "lint:fix": "eslint src --ext .ts,.tsx --fix",
     "test": "pnpm run lint && vitest run",
     "test:watch": "vitest",
     "prepare": "touch ./public/config.local.js"
   },
   "dependencies": {
-    "@commercelayer/eslint-config-ts-react": "^0.1.4",
+    "@commercelayer/eslint-config-ts-react": "^1.3.0",
     "@commercelayer/js-auth": "4.2.0",
     "@commercelayer/react-utils": "1.0.0-beta.3",
-    "@commercelayer/sdk": "4.40.0",
-    "@headlessui/react": "^1.7.17",
-    "@hookform/resolvers": "^2.9.11",
+    "@commercelayer/sdk": "5.31.1",
+    "@headlessui/react": "^1.7.18",
+    "@hookform/resolvers": "^3.3.4",
     "@phosphor-icons/react": "v2.1.3",
     "@tailwindcss/forms": "^0.5.7",
-    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^13.4.0",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
     "@types/async-retry": "1.4.3",
     "@types/iframe-resizer": "^3.5.13",
     "@types/lodash": "^4.14.202",
-    "@types/node": "18.19.4",
-    "@types/react": "^18.2.46",
-    "@types/react-dom": "^18.2.18",
+    "@types/node": "20.11.17",
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19",
     "@types/react-helmet": "^6.1.11",
-    "@types/testing-library__jest-dom": "^5.14.5",
+    "@types/testing-library__jest-dom": "^5.14.9",
     "@types/yup": "^0.32.0",
-    "@vitejs/plugin-react": "^3.0.0",
+    "@vitejs/plugin-react": "^4.2.1",
     "async-retry": "1.3.3",
-    "autoprefixer": "^10.4.16",
+    "autoprefixer": "^10.4.17",
     "classnames": "^2.5.1",
     "eslint": "^8.56.0",
-    "i18next": "^21.10.0",
-    "jsdom": "^20.0.3",
+    "i18next": "^23.8.2",
+    "jsdom": "^24.0.0",
     "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",
-    "msw": "^0.49.3",
+    "msw": "^2.1.7",
     "only-allow": "^1.2.1",
-    "postcss": "^8.4.32",
+    "postcss": "^8.4.35",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-helmet-async": "^1.3.0",
-    "react-hook-form": "^7.49.2",
-    "react-i18next": "^12.3.1",
-    "tailwindcss": "^3.4.0",
-    "type-fest": "^3.13.1",
-    "typescript": "4.9.5",
-    "vite": "^4.0.4",
-    "vite-tsconfig-paths": "^4.2.3",
-    "vitest": "^0.26.3",
-    "wouter": "^2.12.1",
+    "react-helmet-async": "^2.0.4",
+    "react-hook-form": "^7.50.1",
+    "react-i18next": "^14.0.5",
+    "tailwindcss": "^3.4.1",
+    "type-fest": "^4.10.2",
+    "typescript": "5.3.3",
+    "vite": "^5.1.1",
+    "vite-tsconfig-paths": "^4.3.1",
+    "vitest": "^1.2.2",
+    "wouter": "^3.0.0",
     "yup": "^1.3.3",
     "zod": "3.22.4"
   },
   "devDependencies": {
-    "dotenv": "^16.3.1",
+    "dotenv": "^16.4.1",
     "eslint-plugin-tailwind": "^0.2.1",
-    "npm-check-updates": "^16.14.12",
-    "prettier": "^2.8.8",
+    "prettier": "^3.2.5",
     "stylelint": "^14.16.1",
     "stylelint-config-standard": "^28.0.0",
     "stylelint-prettier": "^2.0.0"
@@ -92,4 +91,4 @@
     "workerDirectory": "public"
   },
   "packageManager": "pnpm@8.0.0"
-}
+}

packages/app/src/components/EmbeddedCapabilities.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useLayoutEffect } from 'react'
+import { type FC, useEffect, useLayoutEffect } from 'react'
 import { Helmet } from 'react-helmet-async'
 
 import { isEmbedded } from '#utils/isEmbedded'

packages/app/src/components/PageHead.tsx

@@ -1,5 +1,5 @@
-import { Settings } from 'App'
-import { FC } from 'react'
+import { type Settings } from 'App'
+import { type FC } from 'react'
 import { Helmet } from 'react-helmet-async'
 import { useTranslation } from 'react-i18next'
 

packages/app/src/components/SkeletonTemplate.tsx

@@ -1,16 +1,16 @@
+import { useDelayShow } from '#hooks/useDelayShow'
 import { isFunctionComponent } from '#utils/children'
 import cn from 'classnames'
 import {
   Children,
   cloneElement,
+  isValidElement,
   type FC,
   type FunctionComponent,
-  isValidElement,
   type ReactNode,
   type ReactPortal
 } from 'react'
 import { type Simplify } from 'type-fest'
-import { useDelayShow } from '#hooks/useDelayShow'
 
 type ReactNodeNoPortal = Exclude<ReactNode, ReactPortal>
 
@@ -59,7 +59,11 @@ function childRecursiveMap(
     if (child.props.children != null) {
       return fn(
         cloneElement(child, {
-          children: childrenRecursiveMap(child.props.children, options, fn)
+          children: childrenRecursiveMap(
+            child.props.children as JSX.Element,
+            options,
+            fn
+          )
         })
       )
     }
@@ -143,19 +147,21 @@ const SkeletonTemplate: SkeletonTemplateComponent<
           }
 
           const props = Object.fromEntries(
-            Object.entries(child.props).map(([key, value]) => {
-              if (key !== 'children' && isValidElement(value)) {
-                const newValue = (
-                  <SkeletonTemplate delayMs={0} isLoading>
-                    {value}
-                  </SkeletonTemplate>
-                )
-
-                return [key, newValue]
+            Object.entries(child.props as Record<string, unknown>).map(
+              ([key, value]) => {
+                if (key !== 'children' && isValidElement(value)) {
+                  const newValue = (
+                    <SkeletonTemplate delayMs={0} isLoading>
+                      {value}
+                    </SkeletonTemplate>
+                  )
+
+                  return [key, newValue]
+                }
+
+                return [key, value]
               }
-
-              return [key, value]
-            })
+            )
           )
 
           if (child.type === 'input' || child.type === 'button') {

packages/app/src/components/atoms/A.tsx

@@ -1,4 +1,4 @@
-import { AnchorHTMLAttributes, forwardRef } from 'react'
+import { forwardRef, type AnchorHTMLAttributes } from 'react'
 
 export const A = forwardRef<
   HTMLAnchorElement,

packages/app/src/components/atoms/Button.tsx

@@ -1,4 +1,4 @@
-import { ButtonHTMLAttributes, forwardRef } from 'react'
+import { forwardRef, type ButtonHTMLAttributes } from 'react'
 
 export const Button = forwardRef<
   HTMLButtonElement,

packages/app/src/components/atoms/Input.tsx

@@ -1,5 +1,5 @@
 import cn from 'classnames'
-import { InputHTMLAttributes } from 'react'
+import { type InputHTMLAttributes } from 'react'
 import { useFormContext } from 'react-hook-form'
 
 import { InputLabel } from '#components/atoms/InputLabel'

packages/app/src/components/atoms/InputLabel.tsx

@@ -1,4 +1,4 @@
-import { HTMLAttributes, forwardRef } from 'react'
+import { forwardRef, type HTMLAttributes } from 'react'
 
 interface Props extends HTMLAttributes<HTMLDivElement> {
   label?: string

packages/app/src/components/atoms/InputValidationError.tsx

@@ -1,5 +1,5 @@
-import { HTMLAttributes, forwardRef } from 'react'
 import { WarningCircle } from '@phosphor-icons/react'
+import { forwardRef, type HTMLAttributes } from 'react'
 
 interface Props extends HTMLAttributes<HTMLDivElement> {
   errorMessage?: string

packages/app/src/main.tsx

@@ -1,9 +1,10 @@
+import '#styles/globals.css'
+import '#utils/i18n'
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
-import '#utils/i18n'
-import '#styles/globals.css'
 
+// eslint-disable-next-line @typescript-eslint/non-nullable-type-assertion-style
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <App />

packages/app/src/providers/provider.tsx

@@ -2,11 +2,11 @@ import { createContext, useContext, useEffect, useReducer } from 'react'
 
 import { PageErrorLayout } from '#components/layouts/PageErrorLayout'
 
-import type { ChildrenElement } from 'App'
 import type {
   IdentityProviderState,
   IdentityProviderValue
 } from '#providers/types'
+import type { ChildrenElement } from 'App'
 
 import { reducer } from '#providers/reducer'
 
@@ -91,7 +91,7 @@ export function IdentityProvider({
     )
   }
 
-  if (state.settings === undefined || !state.settings?.isValid) {
+  if (!state.settings?.isValid) {
     return <PageErrorLayout statusCode={500} message='Application error.' />
   }
 

packages/app/src/utils/children.ts

@@ -1,8 +1,8 @@
-import { isValidElement, type ReactNode } from 'react'
+import { isValidElement, type ReactElement, type ReactNode } from 'react'
 
 export function isFunctionComponent(
-  child: any
-): child is { type: React.FunctionComponent<any> } {
+  child: ReactNode
+): child is ReactElement<any, React.FunctionComponent<any>> {
   return (
     isValidElement(child) &&
     typeof child.type === 'function' &&

packages/app/tsconfig.json

@@ -56,6 +56,7 @@
     "global.d.ts",
     "src",
     "*.config.ts",
+    "*.config.mts",
     "*.config.js",
     "*.config.cjs",
     ".eslintrc.cjs",

packages/app/tsconfig.node.json

@@ -6,6 +6,6 @@
     "allowSyntheticDefaultImports": true
   },
   "include": [
-    "vite.config.ts"
+    "vite.config.mts"
   ]
 }