feat: refactor CheckoutLink component, add stories & specs

biome.json

@@ -1,66 +1,57 @@
 {
-  "$schema": "https://biomejs.dev/schemas/2.4.9/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.4.15/schema.json",
   "vcs": {
-    "enabled": false,
+    "enabled": true,
     "clientKind": "git",
-    "useIgnoreFile": false
+    "useIgnoreFile": true
   },
   "files": {
-    "ignoreUnknown": false,
-    "includes": ["**"]
+    "ignoreUnknown": true,
+    "includes": ["**", "!dist", "!coverage", "!*.min.js"]
   },
   "formatter": {
     "enabled": true,
-    "indentStyle": "space"
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineWidth": 100
+  },
+  "assist": {
+    "enabled": true,
+    "actions": {
+      "source": {
+        "organizeImports": "on"
+      }
+    }
   },
-  "assist": { "actions": { "source": { "organizeImports": "on" } } },
   "linter": {
     "enabled": true,
     "rules": {
-      "recommended": true,
-      "correctness": {
-        "useExhaustiveDependencies": "warn",
-        "noUnusedVariables": "warn",
-        "useHookAtTopLevel": "warn",
-        "useParseIntRadix": "warn"
-      },
-      "suspicious": {
-        "noExplicitAny": "warn",
-        "noArrayIndexKey": "warn",
-        "noGlobalIsNan": "warn",
-        "noConfusingVoidType": "warn"
-      },
-      "complexity": {
-        "useLiteralKeys": "warn",
-        "noUselessFragments": "warn",
-        "useOptionalChain": "warn",
-        "noUselessSwitchCase": "warn"
-      },
-      "style": {
-        "noParameterAssign": "warn",
-        "useAsConstAssertion": "error",
-        "useDefaultParameterLast": "warn",
-        "useEnumInitializers": "error",
-        "useSelfClosingElements": "error",
-        "useSingleVarDeclarator": "error",
-        "noUnusedTemplateLiteral": "warn",
-        "useNumberNamespace": "error",
-        "noInferrableTypes": "warn",
-        "noUselessElse": "warn"
-      },
-      "a11y": {
-        "noStaticElementInteractions": "warn",
-        "useKeyWithClickEvents": "warn",
-        "useValidAnchor": "warn",
-        "noSvgWithoutTitle": "warn",
-        "useAltText": "warn"
-      }
+      "recommended": true
     }
   },
   "javascript": {
     "formatter": {
       "quoteStyle": "double",
+      "trailingCommas": "es5",
       "semicolons": "asNeeded"
     }
+  },
+  "json": {
+    "formatter": {
+      "enabled": true,
+      "trailingCommas": "none"
+    },
+    "linter": {
+      "enabled": true
+    }
+  },
+  "css": {
+    "formatter": {
+      "enabled": true,
+      "quoteStyle": "double"
+    },
+    "linter": {
+      "enabled": true
+    }
   }
 }

package.json

@@ -28,23 +28,5 @@
     "lerna": "^9.0.7",
     "typescript": "^6.0.3"
   },
-  "pnpm": {
-    "overrides": {
-      "tar": "^7.5.11",
-      "rollup": ">=4.59.0",
-      "@isaacs/brace-expansion@<=5.0.0": ">=5.0.1",
-      "axios@>=1.0.0 <=1.7.7": ">=1.13.5",
-      "minimatch@<3.1.4": ">=3.1.4",
-      "minimatch@>=5.0.0 <5.1.8": ">=5.1.8",
-      "minimatch@>=9.0.0 <9.0.7": ">=9.0.7",
-      "minimatch@>=10.0.0 <10.2.3": ">=10.2.3",
-      "ajv@>=7.0.0-alpha.0 <8.18.0": "^8.18.0",
-      "esbuild@<=0.24.2": "^0.25.0",
-      "picomatch@<2.3.2": ">=2.3.2",
-      "picomatch@>=4.0.0 <4.0.4": ">=4.0.4",
-      "storybook@>=10.0.0-beta.0 <10.3.6": ">=10.3.6",
-      "@storybook/builder-vite": ">=10.3.6",
-      "valibot@>=1.0.0 <1.3.0": ">=1.3.0"
-    }
-  }
+  "pnpm": {}
 }

packages/docs/public/storybook-preview.css

@@ -20,19 +20,19 @@ span[type]::before {
 span[type] > p {
   margin: 0;
 }
-span[type='info'] {
+span[type="info"] {
   border-color: #3b82f6;
   background-color: #dbebfe;
 }
-span[type='warning'] {
+span[type="warning"] {
   border-color: #f97317;
   background-color: #ffedd5;
 }
-span[type='success'] {
+span[type="success"] {
   border-color: #22c55f;
   background-color: #ddfce7;
 }
-span[type='danger'] {
+span[type="danger"] {
   border-color: #ef4544;
   background-color: #fee2e3;
 }

packages/docs/stories/orders/CheckoutLink.stories.tsx

@@ -1,31 +1,85 @@
-import type { Meta, StoryFn } from '@storybook/react'
+import type { Meta, StoryFn, StoryObj } from '@storybook/react'
 import CommerceLayer from '../_internals/CommerceLayer'
-import OrderContainer from '#components/orders/OrderContainer'
+import Order from '#components/orders/Order'
 import CheckoutLink from '#components/orders/CheckoutLink'
 import { OrderStorage } from '../_internals/OrderStorage'
 
 const setup: Meta<typeof CheckoutLink> = {
   title: 'Components/Orders/CheckoutLink',
-  component: CheckoutLink
+  component: CheckoutLink,
 }
 
 export default setup
 
 const Template: StoryFn<typeof CheckoutLink> = (args) => {
   return (
     <CommerceLayer accessToken='my-access-token'>
-      <OrderStorage persistKey='cl-examples1-cartId'>
-        <OrderContainer>
+      <OrderStorage persistKey='cl-examples-checkoutLink'>
+        <Order>
           <CheckoutLink {...args} />
-        </OrderContainer>
+        </Order>
       </OrderStorage>
     </CommerceLayer>
   )
 }
 
+/**
+ * By default, `CheckoutLink` redirects the customer to the hosted mfe-checkout application,
+ * building the URL from the access token and order id.
+ */
 export const Default = Template.bind({})
 Default.args = {
   label: 'Go to checkout',
-  target: '_blank',
-  className: 'underline hover:text-blue-500'
+  className: 'text-blue-600 underline hover:text-blue-800',
 }
+Default.parameters = {
+  docs: {
+    canvas: {
+      sourceState: 'shown',
+    },
+  },
+}
+
+/**
+ * When `hostedCheckout` is set to `false`, the component uses the `checkout_url` attribute
+ * found in the order object instead of the hosted micro-frontend URL.
+ * Useful when you have a custom checkout flow configured on the order.
+ */
+export const WithOrderCheckoutUrl = Template.bind({})
+WithOrderCheckoutUrl.args = {
+  label: 'Checkout via order URL',
+  hostedCheckout: false,
+  className: 'text-blue-600 underline hover:text-blue-800',
+}
+
+/**
+ * You can use the `children` render prop to fully customise the checkout trigger element.
+ * The children function receives `href`, `handleClick`, `orderId`, and `accessToken` among other props.
+ */
+export const ChildrenProps: StoryObj = () => {
+  return (
+    <CheckoutLink>
+      {({ href, handleClick }) => (
+        <a
+          href={href}
+          onClick={handleClick}
+          className='inline-flex items-center gap-2 rounded bg-black px-4 py-2 text-sm text-white hover:bg-gray-800'
+        >
+          Proceed to checkout →
+        </a>
+      )}
+    </CheckoutLink>
+  )
+}
+ChildrenProps.decorators = [
+  (Story) => (
+    <CommerceLayer accessToken='my-access-token'>
+      <OrderStorage persistKey='cl-examples-checkoutLink'>
+        <Order>
+          <Story />
+        </Order>
+      </OrderStorage>
+    </CommerceLayer>
+  ),
+]
+ChildrenProps.args = {}

packages/document/.storybook/main.ts

@@ -42,6 +42,7 @@ const storybookConfig: StorybookConfig = {
     "../src/stories/**/*.stories.@(js|jsx|ts|tsx)",
   ],
   addons: [
+    "@storybook/addon-mcp",
     "@storybook/addon-links",
     {
       name: "@storybook/addon-docs",

packages/document/.storybook/manager-head.html

@@ -1,3 +1,3 @@
 <meta name="description" content="Official React Components for Commerce Layer applications." key="desc" />
 <link rel="icon" type="image/png" href="https://data.commercelayer.app/assets/images/favicons/favicon-32x32.png" />
-<link rel="stylesheet" href="https://data.commercelayer.app/assets/css/storybook-manager.css" />
+<link rel="stylesheet" href="./storybook-manager.css" />

packages/document/.storybook/manager.ts

@@ -0,0 +1,6 @@
+import { addons } from 'storybook/manager-api'
+import commercelayerTheme from './commercelayer.theme'
+
+addons.setConfig({
+  theme: commercelayerTheme
+})

packages/document/.storybook/preview.tsx

@@ -29,13 +29,10 @@ export const parameters: Parameters = {
     storySort: {
       order: [
         'Getting Started',
-        'Orders',
-        ['Order', 'AddToCartButton'],
-        'Prices',
-        ['Price'],
+        'Components',
+        ['Availability', 'Price', 'Order'],
         'Skus',
         ['Sku'],
-        'Availability',
         'Examples',
         ['Listing Page', 'Shopping Cart', 'Checkout Page', 'My Account'],
         'Hooks'