Merge pull request #123 from commercelayer/update-dependencies

Update all dependencies to the latest

Author: marcomontalbano

CONTRIBUTING.md

@@ -17,6 +17,10 @@ pnpm test
 If you get the error "_Browser was not found at the configured executablePath_", run the following:
 
 ```sh
+node packages/drop-in/node_modules/puppeteer/install.mjs
+
+# or
+
 node node_modules/puppeteer/install.mjs
 ```
 

biome.jsonc

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/2.2.4/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.3.1/schema.json",
   "vcs": {
     "enabled": false,
     "clientKind": "git",

package.json

@@ -33,13 +33,13 @@
   },
   "packageManager": "pnpm@10.4.0",
   "devDependencies": {
-    "@biomejs/biome": "2.2.4",
+    "@biomejs/biome": "2.3.1",
     "concurrently": "^9.2.1",
     "husky": "^9.1.7",
     "lerna": "^9.0.0",
-    "lint-staged": "^16.2.3",
+    "lint-staged": "^16.2.6",
     "replace-in-file": "^8.3.0",
-    "typescript": "^5.9.2"
+    "typescript": "^5.9.3"
   },
   "resolutions": {
     "prismjs": "^1.30.0"

packages/docs/.storybook/preview-head.html

@@ -4,6 +4,7 @@
   }
 
   .sbdocs-h3:first-of-type {
+    /* biome-ignore lint/complexity/noImportantStyles : we need to override the default styles */
     margin: 20px 0 8px !important;
     padding: 0;
   }
@@ -24,6 +25,7 @@
     }
   }
 
+  /* biome-ignore lint/correctness/noUnknownMediaFeatureName : we need to override the default styles */
   @media all and (-ms-high-contrast:none) {
   .link-list {
       display: -ms-grid;
@@ -38,7 +40,6 @@
 
   .link-list > button {
     cursor: pointer;
-    display: block;
     text-align: left;
     padding: 20px 30px 20px 15px;
     border: 1px solid #00000010;
@@ -136,11 +137,7 @@
   .drop-in-js--organization-settings button,
   .drop-in-js--organization-settings input[type="submit"] {
     border: 0;
-    border-radius: 3em;
     cursor: pointer;
-    display: inline-block;
-    overflow: hidden;
-    padding: 8px 16px;
     position: relative;
     text-align: center;
     -webkit-text-decoration: none;
@@ -153,13 +150,8 @@
     transform: translate3d(0,0,0);
     vertical-align: top;
     white-space: nowrap;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
     opacity: 1;
     margin: 0;
-    background: transparent;
     font-size: 12px;
     font-weight: 700;
     line-height: 1;
@@ -202,42 +194,42 @@
 
   /* Weird Storybook issue on firefox */
   [scale="1"] {
-    transform: none !important;
-    transform-origin: initial !important;
-    height: auto !important;
+    transform: none;
+    transform-origin: initial;
+    height: auto;
   }
 </style>
 
 <style>
   ol {
-    list-style: decimal !important;
+    list-style: decimal;
   }
   h2 {
-    margin: 40px 0 8px !important;
+    margin: 40px 0 8px;
   }
   h3 {
-    margin: 20px 0 8px !important;
+    margin: 20px 0 8px;
   }
   a:link, a:link:hover, a:link:active, a:visited {
-    color: #029CFD !important;
+    color: #029CFD;
     text-decoration: underline;
   }
 </style>
 
 <style>
   .language-diff .token.deleted {
-    color: #E57373 !important;
+    color: #E57373;
   }
   .language-diff .token.inserted {
-    color: #AED581 !important;
+    color: #AED581;
   }
 </style>
 
 <!-- used for the demo story -->
 <script src="https://cdn.tailwindcss.com"></script>
 
 <script>
-  (function() {
+          (() => {
     // This hack is to remove the access token from the URL after the user has been redirected back to the docs (only for storybook use-case).
     setTimeout(() => {
       const url = new URL(window.parent.location.href)

packages/docs/package.json

@@ -17,16 +17,16 @@
     "email": "marco.montalbano@commercelayer.io"
   },
   "devDependencies": {
-    "@babel/core": "^7.28.4",
-    "@babel/preset-env": "^7.28.3",
-    "@babel/preset-react": "^7.27.1",
-    "@babel/preset-typescript": "^7.27.1",
-    "@storybook/addon-docs": "^9.1.9",
-    "@storybook/addon-links": "^9.1.9",
-    "@storybook/html-vite": "^9.1.9",
+    "@babel/core": "^7.28.5",
+    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-react": "^7.28.5",
+    "@babel/preset-typescript": "^7.28.5",
+    "@storybook/addon-docs": "^9.1.15",
+    "@storybook/addon-links": "^9.1.15",
+    "@storybook/html-vite": "^9.1.15",
     "@storybook/icons": "^1.6.0",
     "@types/common-tags": "^1.8.4",
-    "@types/node": "^20.19.18",
+    "@types/node": "^20.19.23",
     "@types/react": "^19",
     "@types/react-syntax-highlighter": "^15.5.13",
     "babel-loader": "^10.0.0",
@@ -38,9 +38,9 @@
     "react-syntax-highlighter": "^15.6.6",
     "remark-gfm": "^4.0.1",
     "sass": "^1.93.2",
-    "storybook": "^9.1.9",
-    "typescript": "^5.9.2",
-    "vite": "^7.1.7"
+    "storybook": "^9.1.15",
+    "typescript": "^5.9.3",
+    "vite": "^7.1.12"
   },
   "dependencies": {
     "@commercelayer/drop-in.js": "workspace:^2.19.0",

packages/drop-in/package.json

@@ -45,33 +45,33 @@
     "email": "marco.montalbano@commercelayer.io"
   },
   "dependencies": {
-    "@commercelayer/js-auth": "^7.0.0",
+    "@commercelayer/js-auth": "^7.1.0",
     "@commercelayer/organization-config": "^2.4.0",
-    "@commercelayer/sdk": "^6.47.0",
+    "@commercelayer/sdk": "^7.3.0",
     "@types/lodash-es": "^4.17.12",
     "iframe-resizer": "4.3.11",
     "js-cookie": "^3.0.5",
     "lodash-es": "^4.17.21",
-    "type-fest": "^5.0.1"
+    "type-fest": "^5.1.0"
   },
   "peerDependencies": {
     "@stencil/core": "^4.0.0"
   },
   "devDependencies": {
-    "@stencil/core": "4.37.1",
+    "@stencil/core": "4.38.2",
     "@stencil/sass": "^3.2.2",
     "@types/iframe-resizer": "^4.0.0",
     "@types/jest": "^29.5.14",
     "@types/js-cookie": "^3.0.6",
-    "@types/node": "^20.19.18",
+    "@types/node": "^20.19.23",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
     "lodash": "^4.17.21",
     "nodemon": "^3.1.10",
-    "puppeteer": "24.22.3",
+    "puppeteer": "24.26.1",
     "sass": "^1.93.2",
-    "ts-jest": "^29.4.4",
-    "typescript": "^5.9.2"
+    "ts-jest": "^29.4.5",
+    "typescript": "5.9.3"
   },
   "license": "MIT",
   "engines": {

packages/drop-in/src/apis/commercelayer/client.ts

@@ -1,7 +1,13 @@
 import { makeSalesChannel } from "@commercelayer/js-auth"
 import CommerceLayer, {
-  type CommerceLayerClient,
+  bundles,
   type Customer,
+  customers,
+  line_items,
+  orders,
+  organization,
+  prices,
+  skus,
 } from "@commercelayer/sdk"
 import Cookies from "js-cookie"
 import { memoize } from "lodash-es"
@@ -93,15 +99,23 @@ export const getAccessToken = memoize(
   (clientCredentials) => JSON.stringify(clientCredentials),
 )
 
-export async function createClient(
-  config: Config,
-): Promise<CommerceLayerClient> {
+export async function createClient(config: Config) {
   const token = await getAccessToken(config)
 
-  return CommerceLayer({
+  CommerceLayer({
     accessToken: token.accessToken,
     domain: config.domain,
   })
+
+  return {
+    bundles,
+    customers,
+    line_items,
+    orders,
+    organization,
+    prices,
+    skus,
+  }
 }
 
 export const customerFields = [

packages/drop-in/src/cart.html

@@ -132,7 +132,7 @@
             const addToCart = document.getElementById('vs--add-to-cart')
             const availability = document.getElementById('vs--availability')
 
-            select.addEventListener('change', function (event) {
+            select.addEventListener('change', (event) => {
               const sku = event.currentTarget.value
               title.innerText = sku
               price.code = sku

packages/drop-in/src/components.d.ts

@@ -81,7 +81,7 @@ export namespace Components {
           * Open the minicart and set the opener so that the minicart can be closed by focusing on the opener. (available _only_ when the `cl-cart` component is used as _minicart_).
           * @param opener The opener of the minicart.
          */
-        "openMinicart": (opener: HTMLElement) => Promise<void>;
+        "openMinicart": (opener: Pick<HTMLElement, "focus">) => Promise<void>;
         /**
           * If `true` the minicart automatically opens as soon as an item is added to the shopping cart (available _only_ when the `cl-cart` component is used as _minicart_).
           * @default false

packages/drop-in/src/components/cl-cart-link/cl-cart-link.spec.tsx

@@ -1,4 +1,7 @@
-import type { CommerceLayerClient } from "@commercelayer/sdk"
+import type {
+  orders as sdkOrders,
+  organization as sdkOrganization,
+} from "@commercelayer/sdk"
 import { newSpecPage } from "@stencil/core/testing"
 import { waitFor } from "jest.spec.helpers"
 import * as cart from "@/apis/commercelayer/cart"
@@ -20,7 +23,7 @@ describe("cl-cart-link.spec", () => {
     jest.spyOn(client, "createClient").mockResolvedValue({
       orders,
       organization,
-    } as unknown as CommerceLayerClient)
+    } as unknown as ReturnType<(typeof client)["createClient"]>)
 
     const { root, waitForChanges } = await newSpecPage({
       components: [ClCartLink],
@@ -53,7 +56,7 @@ describe("cl-cart-link.spec", () => {
     jest.spyOn(client, "createClient").mockResolvedValue({
       orders,
       organization,
-    } as unknown as CommerceLayerClient)
+    } as unknown as ReturnType<(typeof client)["createClient"]>)
     jest.spyOn(cart, "getCart").mockResolvedValue({
       type: "orders",
       id: "order-123",
@@ -90,7 +93,7 @@ describe("cl-cart-link.spec", () => {
     jest.spyOn(client, "createClient").mockResolvedValue({
       orders,
       organization,
-    } as unknown as CommerceLayerClient)
+    } as unknown as ReturnType<(typeof client)["createClient"]>)
 
     const { root, waitForChanges } = await newSpecPage({
       components: [ClCartLink],
@@ -129,7 +132,7 @@ describe("cl-cart-link.spec", () => {
 const accessToken =
   "eyJhbGciOiJSUzUxMiIsInR5cCI6IkpXVCIsImtpZCI6IjliN2JiZmVlMzQzZDVkNDQ5ZGFkODhmMjg0MGEyZTM3YzhkZWFlZTg5NjM4MGQ1ODA2YTc4NWVkMWQ1OTc5ZjAifQ.eyJvcmdhbml6YXRpb24iOnsiaWQiOiJPblZOcUZPTUpuIiwic2x1ZyI6ImRyb3AtaW4tanMiLCJlbnRlcnByaXNlIjp0cnVlLCJyZWdpb24iOiJldS13ZXN0LTEifSwiYXBwbGljYXRpb24iOnsiaWQiOiJkTm5XbWl4eEtHIiwiY2xpZW50X2lkIjoia3VTS1BiZUtiVTlMRzlMam5kemllS1dSY2ZpWEZ1RWZPME9ZSFhLSDlKOCIsImtpbmQiOiJzYWxlc19jaGFubmVsIiwicHVibGljIjp0cnVlfSwibWFya2V0Ijp7ImlkIjpbIkJvd2RHaHdYZGoiXSwic3RvY2tfbG9jYXRpb25faWRzIjpbIkRuZ2VwdU5tT2siLCJLR3lPanV5S1hNIl0sImdlb2NvZGVyX2lkIjpudWxsLCJhbGxvd3NfZXh0ZXJuYWxfcHJpY2VzIjpmYWxzZX0sInNjb3BlIjoibWFya2V0OmNvZGU6dXNhIiwiZXhwIjoxNzMwOTEzNjkxLCJ0ZXN0Ijp0cnVlLCJyYW5kIjowLjQ2MjA0OTI5MDY1NTczNTIsImlhdCI6MTczMDkwNjQ5MSwiaXNzIjoiaHR0cHM6Ly9hdXRoLmNvbW1lcmNlbGF5ZXIuaW8ifQ.OJerreNcfS_QKQ691iKyJqgAemIouRTBHfqmy2mlAt4_GnqtqjEFRW_hE9SNW8h80eUnSDMc4ocOSsHL5nqKZQeXkwlycwtYzNMralEM03jgLDIMvRzfFznZNOXNrySSFPQ9zrIHlbyfW3Wxc8hMEz-SvZ7t0cSlrvSqSEoLBAoMQqsBJkiIVYMWlUmgq_d0dznU4U8MJiPvC-rb32lRinLl3M0TGGApnDTijuQALywGbPkNZzMs3rrK8pz1Gf7ZYVgu9aXUCDEVEac99kTLJj2DJdHMNHYjzupoKu8xSutSAShN8MHaM_9ijuJHmlCdgAfQtEKoGOKpGp7JH8Zl7zeYDkmsdVAqvGAIGNBzHnxb7SdPXmPViq_9u5K9Bq1IBr9K1TwcCyjMTFghnJm6CfDQ60AEPB4dxWHSXNTyGCAcrSwDqni7dgcD3G1Asqb5TmlxOtcmC0jXrZE4TQQZqBUFBiWTXiMhFhq8tGE6PlW0fIZzV9xlKPkaLPKO6rGdmiutmofAB8CVz1ZkmyIaHNR4KbIfWZUVQDEOkCPHzy_yXB7LinYlpDtVlJxZ9n_aetuxmJweLT94LQml56kcmXRPJbNH208ermGKpipQkqM6GoknqtEG3ouVgahjVwD2bSqFGPtZyrYgIzhunupkIhEz1dSLDrk0wXJS9GY4W50"
 
-const orders: Partial<CommerceLayerClient["orders"]> = {
+const orders: Partial<typeof sdkOrders> = {
   create: jest.fn().mockResolvedValue({
     type: "orders",
     id: "order-123",
@@ -138,7 +141,7 @@ const orders: Partial<CommerceLayerClient["orders"]> = {
   }),
 }
 
-const organization: Partial<CommerceLayerClient["organization"]> = {
+const organization: Partial<typeof sdkOrganization> = {
   retrieve: jest.fn().mockResolvedValue({
     type: "organizations",
     id: "organization-123",