deps: update all dependencies to the latest major

.husky/pre-commit

@@ -1,6 +1,3 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 npm run ts:check
 npm run lint -- --fix
 npm run coverage

.ncurc.cjs

@@ -0,0 +1,17 @@
+module.exports = {
+  reject: [
+    'pnpm',
+    'iframe-resizer',
+    'iframe-resizer-react'
+  ],
+  filterResults: (name, { upgradedVersionSemver }) => {
+    if (
+      name === '@types/node' && parseInt(upgradedVersionSemver?.major) >= 22 ||
+      name === 'eslint' && parseInt(upgradedVersionSemver?.major) >= 9
+    ) {
+      return false
+    }
+
+    return true
+  }
+}

package.json

@@ -13,7 +13,7 @@
     "dep:upgrade:major": "npx --workspaces npm-check-updates -u",
     "dep:upgrade:minor": "npm run dep:upgrade:major -- --target minor",
     "ls-engines": "npx ls-engines",
-    "prepare": "husky install"
+    "prepare": "husky"
   },
   "workspaces": [
     "packages/*"
@@ -24,7 +24,7 @@
     "lerna": "^8.1.2"
   },
   "engines": {
-    "node": ">= 18.17",
+    "node": ">= 20",
     "npm": ">= 9.6"
   }
 }

packages/setup/package.json

@@ -12,7 +12,7 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@commercelayer/js-auth": "^4.2.1",
-    "@commercelayer/sdk": "^5.33.1"
+    "@commercelayer/js-auth": "^6.5.0",
+    "@commercelayer/sdk": "6.13.0"
   }
 }

packages/setup/scripts/utils/application.ts

@@ -1,4 +1,4 @@
-import { core } from '@commercelayer/js-auth'
+import { authenticate } from '@commercelayer/js-auth'
 import CommerceLayer from '@commercelayer/sdk'
 import { execSync } from 'child_process'
 
@@ -34,8 +34,7 @@ export const createCommerceLayerClient = async (application: Application) => {
     throw new Error('You should switch to an Integration type')
   }
 
-  const integrationToken = await core.authentication('client_credentials', {
-    slug: application.slug,
+  const integrationToken = await authenticate('client_credentials', {
     scope: 'market:all',
     clientId: application.clientId,
     clientSecret: application.clientSecret,

packages/types/package.json

@@ -8,13 +8,13 @@
     "dist"
   ],
   "dependencies": {
-    "@types/lodash": "^4.14.202",
+    "@types/lodash": "^4.17.7",
     "lodash": "^4.17.21",
     "uvu": "^0.5.6",
-    "zod": "^3.22.4"
+    "zod": "^3.23.8"
   },
   "devDependencies": {
-    "typescript": "^5.3.3"
+    "typescript": "^5.6.2"
   },
   "scripts": {
     "ts:check": "tsc --noEmit",

packages/website/config/general.config.js

@@ -2,7 +2,7 @@
 
 /** @type { import('@commercelayer/demo-store-types').GeneralConfig } */
 const generalConfig = {
-  productSlugRegExp: /^.*\/(?<productCode>[A-Z0-9\-\_]+)$/
+  productSlugRegExp: /^.*\/([A-Z0-9\-\_]+)$/
 }
 
 module.exports = generalConfig

packages/website/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

packages/website/npm-sync-organization.js

@@ -1,6 +1,6 @@
 // @ts-check
 
-const { core } = require('@commercelayer/js-auth')
+const { authenticate } = require('@commercelayer/js-auth')
 const CommerceLayer = require('@commercelayer/sdk').default
 const { writeFileSync, existsSync, readFileSync } = require('fs')
 const { resolve } = require('path')
@@ -23,9 +23,8 @@ if (!isSupportedUrl(envs.NEXT_PUBLIC_JSON_DATA_FOLDER) && NEXT_PUBLIC_CL_CLIENT_
 
   const [, organization, domain] = NEXT_PUBLIC_CL_ENDPOINT.match(/^https?:\/\/(.*).(commercelayer.(co|io))$/) || []
 
-  core.authentication('client_credentials', {
+  authenticate('client_credentials', {
     clientId: NEXT_PUBLIC_CL_CLIENT_ID,
-    slug: organization,
     scope: `market:all`
   })
     .then(auth => {

packages/website/package.json

@@ -13,53 +13,53 @@
     "local:start": "npm start",
     "local:serve": "npx serve out",
     "lint": "next lint",
-    "ts:check": "tsc --noEmit && npm run test:data",
+    "ts:check": "next lint && npm run test:data",
     "test:data": "node data/runTestData.js",
     "test": "jest --testPathIgnorePatterns ./data",
     "coverage": "jest --coverage",
     "lighthouse": "npx -p @lhci/cli lhci autorun"
   },
   "dependencies": {
     "@commercelayer/demo-store-types": "^3.0.0",
-    "@commercelayer/js-auth": "^4.2.1",
-    "@commercelayer/react-components": "4.11.0",
-    "@commercelayer/sdk": "^5.33.1",
+    "@commercelayer/js-auth": "^6.5.0",
+    "@commercelayer/react-components": "4.15.10",
+    "@commercelayer/sdk": "6.13.0",
     "@svgr/webpack": "^8.1.0",
-    "@types/lodash": "^4.14.202",
+    "@types/lodash": "^4.17.7",
     "fuse.js": "^7.0.0",
-    "iframe-resizer-react": "^1.1.0",
-    "immer": "^10.0.3",
+    "iframe-resizer-react": "^1.1.1",
+    "immer": "^10.1.1",
     "lodash": "^4.17.21",
-    "next": "^14.1.1",
+    "next": "^14.2.13",
     "next-localization": "^0.12.0",
     "next-pwa": "^5.6.0",
     "react": "^18",
     "react-dom": "^18",
     "react-remark": "^2.1.0",
-    "swiper": "^11.0.7",
-    "use-immer": "^0.9.0"
+    "swiper": "^11.1.14",
+    "use-immer": "^0.10.0"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14",
-    "@types/jest": "^29.5.12",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16",
+    "@types/jest": "^29.5.13",
     "@types/next-pwa": "^5.6.9",
     "@types/node": "^20",
     "@types/react": "^18",
-    "autoprefixer": "^10.4.18",
-    "dotenv-cli": "^7.3.0",
-    "eslint": "8.57.0",
-    "eslint-config-next": "14.1.1",
+    "autoprefixer": "^10.4.20",
+    "dotenv-cli": "^7.4.2",
+    "eslint": "8.57.1",
+    "eslint-config-next": "14.2.13",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "next-sitemap": "^4.2.3",
-    "postcss": "^8.4.35",
-    "sass": "^1.71.1",
-    "tailwindcss": "^3.4.1",
-    "ts-jest": "^29.1.2",
-    "typescript": "5.3.3"
+    "postcss": "^8.4.47",
+    "sass": "^1.79.3",
+    "tailwindcss": "^3.4.12",
+    "ts-jest": "^29.2.5",
+    "typescript": "5.6.2"
   },
   "engines": {
-    "node": ">= 18.17"
+    "node": ">= 20"
   }
 }

packages/website/src/components/Accordion.test.tsx

@@ -1,5 +1,4 @@
-import { render, fireEvent } from '@testing-library/react'
-import { act } from 'react-dom/test-utils'
+import { act, fireEvent, render } from '@testing-library/react'
 import { Accordion } from './Accordion'
 
 beforeEach(() => {

packages/website/src/components/Auth.test.tsx

@@ -5,12 +5,18 @@ import { act, render, screen } from '@testing-library/react'
 import { createLocale, createOrganization, createRouter } from 'jest.helpers'
 import { useContext } from 'react'
 import { Auth } from './Auth'
-import type { TReturn } from '@commercelayer/js-auth/lib/esm/types'
 
-const useRouter = jest.spyOn(require('next/router'), 'useRouter')
-const authentication = jest.spyOn(require('@commercelayer/js-auth').core, 'authentication')
+import * as JsAuth from '@commercelayer/js-auth'
+
+jest.mock('@commercelayer/js-auth', () => {
+  return {
+    __esModule: true,
+    ...jest.requireActual('@commercelayer/js-auth')
+  };
+});
 
-type AuthReturnType = Pick<NonNullable<Awaited<TReturn<'password'>>>, 'tokenType' | 'accessToken' | 'expires' | 'refreshToken'>
+const useRouter = jest.spyOn(require('next/router'), 'useRouter')
+const authentication = jest.spyOn(JsAuth, 'authenticate')
 
 beforeEach(() => {
   useRouter.mockReset()
@@ -38,14 +44,17 @@ test('should match the snapshot', async () => {
 
   useRouter.mockImplementation(() => createRouter('/'))
 
-  const authReturn: AuthReturnType = {
+  authentication.mockResolvedValue({
     tokenType: 'bearer',
     accessToken: 'accessToken-1234',
     expires: new Date(0),
-    refreshToken: 'refreshToken-1234'
-  }
-
-  authentication.mockResolvedValue(authReturn)
+    refreshToken: 'refreshToken-1234',
+    createdAt: 0,
+    expiresIn: 0,
+    ownerId: '',
+    ownerType: 'customer',
+    scope: '',
+  })
 
   let container
   await act(async () => {
@@ -61,14 +70,17 @@ test('should fetch accessToken and set it properly when "locale" is set', async
 
   useRouter.mockImplementation(() => createRouter('/'))
 
-  const authReturn: AuthReturnType = {
+  authentication.mockResolvedValue({
     tokenType: 'bearer',
     accessToken: 'accessToken-1234',
     expires: new Date(0),
-    refreshToken: 'refreshToken-1234'
-  }
-
-  authentication.mockResolvedValue(authReturn)
+    refreshToken: 'refreshToken-1234',
+    createdAt: 0,
+    expiresIn: 0,
+    ownerId: '',
+    ownerType: 'customer',
+    scope: '',
+  })
 
   await act(async () => {
     render(
@@ -80,7 +92,6 @@ test('should fetch accessToken and set it properly when "locale" is set', async
 
   expect(authentication).toHaveBeenCalledWith('client_credentials', {
     clientId: 'client-1234',
-    slug: 'demo-store',
     scope: 'market:123456789'
   })
 

packages/website/src/components/Auth.tsx

@@ -3,8 +3,8 @@ import { useSettingsContext } from '#contexts/SettingsContext'
 import type { ShoppableLocale } from '#i18n/locale'
 import { NEXT_PUBLIC_BASE_PATH } from '#utils/envs'
 import { getPersistKey } from '#utils/order'
-import { core } from '@commercelayer/js-auth'
-import type { TOptions, TReturn } from '@commercelayer/js-auth/lib/esm/types'
+import { authenticate } from '@commercelayer/js-auth'
+import type { AuthenticateOptions, AuthenticateReturn } from '@commercelayer/js-auth'
 import { CommerceLayer, LineItemsContainer, OrderContainer, OrderStorage } from '@commercelayer/react-components'
 import type { DefaultChildrenType } from '@commercelayer/react-components/lib/esm/typings/globals'
 import { useRouter } from 'next/router'
@@ -17,9 +17,8 @@ type Auth = {
   tokenType: string
 }
 
-const getClientCredentials = (clientId: string, slug: string, market: number): TOptions<'client_credentials'> => ({
+const getClientCredentials = (clientId: string, market: number): AuthenticateOptions<'client_credentials'> => ({
   clientId,
-  slug,
   scope: `market:${market}`
 })
 
@@ -28,7 +27,7 @@ const getAuth = (market: number): Auth | null => {
   return JSON.parse(localStorage.getItem(storeKey) || 'null')
 }
 
-const storeAuth = (market: number, authReturn: Awaited<TReturn<'client_credentials' | 'password'>>): Auth | null => {
+const storeAuth = (market: number, authReturn: Awaited<AuthenticateReturn<'client_credentials' | 'password'>>): Auth | null => {
   if (!authReturn) {
     return null
   }
@@ -89,10 +88,7 @@ export const Auth: React.FC<Props> = ({ children, locale }) => {
     if (authIsValid) {
       setAuth(storedAuth)
     } else {
-      const { hostname } = new URL(endpoint)
-      const [, organization] = hostname.match(/^(.*).(commercelayer.(co|io))$/) || []
-
-      core.authentication('client_credentials', getClientCredentials(clientId, organization, market))
+      authenticate('client_credentials', getClientCredentials(clientId, market))
         .then(authReturn => {
           if (isMounted) {
             setAuth(storeAuth(market, authReturn))

packages/website/src/components/InputRange.test.tsx

@@ -1,5 +1,4 @@
-import { fireEvent, render } from '@testing-library/react'
-import { act } from 'react-dom/test-utils'
+import { act, fireEvent, render } from '@testing-library/react'
 import { InputRange } from './InputRange'
 
 

packages/website/src/contexts/SettingsContext.tsx

@@ -27,7 +27,7 @@ export const serverSideSettings = memoize(
       settingsContext: {
         organization: {
           ...await getRawDataOrganization(),
-          slug: process.env.NEXT_PUBLIC_CL_ENDPOINT?.match(/^https?:\/\/(?<slug>[\w-]+)/)?.groups?.slug || null
+          slug: process.env.NEXT_PUBLIC_CL_ENDPOINT?.match(/^https?:\/\/([\w-]+)/)?.[1] || null
         },
         locale: await getLocale(localeCode),
       }

packages/website/src/pages/[locale]/product/[...slug].dataFetching.tsx

@@ -46,7 +46,7 @@ export const getStaticProps: GetStaticProps<Props, Query> = async ({ params }) =
   const localeCodes = await getLocaleCodes()
 
   const productSlug = slug.join('/')
-  const productCode = productSlug.match(productSlugRegExp)?.groups?.productCode
+  const productCode = productSlug.match(productSlugRegExp)?.[1]
 
   if (!productCode) {
     throw new Error(`"productSlugRegExp" is not properly configured. Cannot apply RegExp "${productSlugRegExp}" to the given product slug "${productSlug}"`)

packages/website/tsconfig.json

@@ -38,8 +38,9 @@
     "additional.d.ts",
     "next-env.d.ts",
     "**/*.ts",
-    "**/*.tsx"
-, "data/index.test.js"  ],
+    "**/*.tsx",
+    "data/index.test.js"
+  ],
   "exclude": [
     "node_modules"
   ]