✨ feat(stories): add HostedCart stories in document package

.gitignore

@@ -136,4 +136,7 @@ dist
 .DS_Store
 
 # Storybook
-storybook-static
+storybook-static
+
+# Blog articles
+episode-*

.ncurc.cjs

@@ -1,6 +1,3 @@
 module.exports = {
-  reject: [
-    'pnpm',
-    'iframe-resizer'
-  ]
-}
+  reject: ["pnpm", "iframe-resizer"],
+}

AGENTS.md

@@ -0,0 +1,13 @@
+## Agent skills
+
+### Issue tracker
+
+Issues live in GitHub Issues at `commercelayer/commercelayer-react-components`. See `docs/agents/issue-tracker.md`.
+
+### Triage labels
+
+Default five-role vocabulary (`needs-triage`, `needs-info`, `ready-for-agent`, `ready-for-human`, `wontfix`). See `docs/agents/triage-labels.md`.
+
+### Domain docs
+
+Single-context repo: one `CONTEXT.md` + `docs/adr/` at the root. See `docs/agents/domain.md`.

biome.json

@@ -7,7 +7,13 @@
   },
   "files": {
     "ignoreUnknown": true,
-    "includes": ["**", "!dist", "!coverage", "!*.min.js"]
+    "includes": [
+      "**",
+      "!dist",
+      "!coverage",
+      "!*.min.js",
+      "!**/mocks/resources/orders/customer-orders-full.ts"
+    ]
   },
   "formatter": {
     "enabled": true,

docs/agents/domain.md

@@ -0,0 +1,39 @@
+# Domain Docs
+
+How the engineering skills should consume this repo's domain documentation when exploring the codebase.
+
+## Before exploring, read these
+
+- **`CONTEXT.md`** at the repo root
+- **`docs/adr/`** — read ADRs that touch the area you're about to work in
+
+If any of these files don't exist, **proceed silently**. Don't flag their absence; don't suggest creating them upfront. The producer skill (`/grill-with-docs`) creates them lazily when terms or decisions actually get resolved.
+
+## File structure
+
+Single-context repo:
+
+```
+/
+├── CONTEXT.md
+├── docs/adr/
+│   ├── 0001-*.md
+│   └── ...
+└── packages/
+    ├── core/
+    ├── hooks/
+    ├── react-components/
+    └── document/
+```
+
+## Use the glossary's vocabulary
+
+When your output names a domain concept (in an issue title, a refactor proposal, a hypothesis, a test name), use the term as defined in `CONTEXT.md`. Don't drift to synonyms the glossary explicitly avoids.
+
+If the concept you need isn't in the glossary yet, that's a signal — either you're inventing language the project doesn't use (reconsider) or there's a real gap (note it for `/grill-with-docs`).
+
+## Flag ADR conflicts
+
+If your output contradicts an existing ADR, surface it explicitly rather than silently overriding:
+
+> _Contradicts ADR-0007 (…) — but worth reopening because…_

docs/agents/issue-tracker.md

@@ -0,0 +1,22 @@
+# Issue tracker: GitHub
+
+Issues and PRDs for this repo live as GitHub issues. Use the `gh` CLI for all operations.
+
+## Conventions
+
+- **Create an issue**: `gh issue create --title "..." --body "..."`. Use a heredoc for multi-line bodies.
+- **Read an issue**: `gh issue view <number> --comments`, filtering comments by `jq` and also fetching labels.
+- **List issues**: `gh issue list --state open --json number,title,body,labels,comments --jq '[.[] | {number, title, body, labels: [.labels[].name], comments: [.comments[].body]}]'` with appropriate `--label` and `--state` filters.
+- **Comment on an issue**: `gh issue comment <number> --body "..."`
+- **Apply / remove labels**: `gh issue edit <number> --add-label "..."` / `--remove-label "..."`
+- **Close**: `gh issue close <number> --comment "..."`
+
+Infer the repo from `git remote -v` — `gh` does this automatically when run inside a clone.
+
+## When a skill says "publish to the issue tracker"
+
+Create a GitHub issue.
+
+## When a skill says "fetch the relevant ticket"
+
+Run `gh issue view <number> --comments`.

docs/agents/triage-labels.md

@@ -0,0 +1,15 @@
+# Triage Labels
+
+The skills speak in terms of five canonical triage roles. This file maps those roles to the actual label strings used in this repo's issue tracker.
+
+| Label in mattpocock/skills | Label in our tracker | Meaning                                  |
+| -------------------------- | -------------------- | ---------------------------------------- |
+| `needs-triage`             | `needs-triage`       | Maintainer needs to evaluate this issue  |
+| `needs-info`               | `needs-info`         | Waiting on reporter for more information |
+| `ready-for-agent`          | `ready-for-agent`    | Fully specified, ready for an AFK agent  |
+| `ready-for-human`          | `ready-for-human`    | Requires human implementation            |
+| `wontfix`                  | `wontfix`            | Will not be actioned                     |
+
+When a skill mentions a role (e.g. "apply the AFK-ready triage label"), use the corresponding label string from this table.
+
+Edit the right-hand column to match whatever vocabulary you actually use.

examples/_app.tsx

@@ -1,5 +1,5 @@
-import '../styles/styles.css'
-import { AppProps } from 'next/app'
+import "../styles/styles.css"
+import { AppProps } from "next/app"
 
 function MyApp({ Component, pageProps }: AppProps) {
   return <Component {...pageProps} />

examples/cart.tsx

@@ -1,5 +1,5 @@
-import { useState, useEffect, Fragment } from 'react'
-import { getSalesChannelToken } from '@commercelayer/js-auth'
+import { useState, useEffect, Fragment } from "react"
+import { getSalesChannelToken } from "@commercelayer/js-auth"
 import {
   CommerceLayer,
   OrderContainer,
@@ -31,20 +31,16 @@ import {
   SkusContainer,
   SkuField,
   Skus,
-} from 'packages/react-components/src'
+} from "packages/react-components/src"
 
 const clientId = process.env.NEXT_PUBLIC_CLIENT_ID as string
 const endpoint = process.env.NEXT_PUBLIC_ENDPOINT as string
 const scope = process.env.NEXT_PUBLIC_MARKET_ID as string
 
-const skus = [
-  'BABYONBU000000E63E7412MX',
-  'CANVASAU000000FFFFFF1824',
-  'BABYONBU000000E63E746MXX',
-]
+const skus = ["BABYONBU000000E63E7412MX", "CANVASAU000000FFFFFF1824", "BABYONBU000000E63E746MXX"]
 
 export default function Cart() {
-  const [token, setToken] = useState('')
+  const [token, setToken] = useState("")
   useEffect(() => {
     const getToken = async () => {
       const token = await getSalesChannelToken({
@@ -61,17 +57,13 @@ export default function Cart() {
       <CommerceLayer accessToken={token} endpoint={endpoint}>
         <div className="container mx-auto mt-5 px-5">
           <OrderStorage persistKey="orderUS">
-            <OrderContainer attributes={{ return_url: 'https://test.co' }}>
+            <OrderContainer attributes={{ return_url: "https://test.co" }}>
               <SkusContainer skus={skus}>
                 <ItemContainer>
                   <PricesContainer>
                     <AvailabilityContainer>
                       <Skus>
-                        <SkuField
-                          attribute="image_url"
-                          tagElement="img"
-                          width={100}
-                        />
+                        <SkuField attribute="image_url" tagElement="img" width={100} />
                         <SkuField attribute="code" tagElement="p" />
                         <div className="text-center p-3">
                           <div className="flex flex-row flex-wrap justify-center">
@@ -106,36 +98,18 @@ export default function Cart() {
               <h1 className="text-4xl border-b-2 my-5">Shopping Bag</h1>
               <LineItemsContainer>
                 <p className="text-sm m-2">
-                  Your shopping bag contains{' '}
-                  <LineItemsCount
-                    data-test="items-count"
-                    className="font-bold"
-                  />{' '}
-                  items
+                  Your shopping bag contains{" "}
+                  <LineItemsCount data-test="items-count" className="font-bold" /> items
                 </p>
                 <div className="flex flex-col p-2">
                   <LineItemsEmpty data-test="line-items-empty" />
                   <LineItem>
                     <div className="flex justify-around items-center border-b p-5">
                       <LineItemImage className="p-2" width={80} />
-                      <LineItemName
-                        data-test="line-item-name"
-                        className="p-2"
-                      />
-                      <LineItemQuantity
-                        data-test="line-item-quantity"
-                        max={100}
-                        className="p-2"
-                      />
-                      <Errors
-                        className="text-red-700 p-2"
-                        resource="line_items"
-                        field="quantity"
-                      />
-                      <LineItemAmount
-                        data-test="line-item-total"
-                        className="p-2"
-                      />
+                      <LineItemName data-test="line-item-name" className="p-2" />
+                      <LineItemQuantity data-test="line-item-quantity" max={100} className="p-2" />
+                      <Errors className="text-red-700 p-2" resource="line_items" field="quantity" />
+                      <LineItemAmount data-test="line-item-total" className="p-2" />
                       <LineItemRemoveLink
                         data-test="line-item-remove"
                         className="p-2 bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
@@ -145,20 +119,14 @@ export default function Cart() {
                   <LineItem type="gift_cards">
                     <div className="flex justify-between items-center border-b p-5">
                       <LineItemImage className="p-2" width={40} />
-                      <LineItemName
-                        data-test="line-item-name"
-                        className="p-2"
-                      />
+                      <LineItemName data-test="line-item-name" className="p-2" />
                       <LineItemQuantity
                         data-test="line-item-quantity"
                         max={10}
                         className="p-2"
                         disabled
                       />
-                      <LineItemAmount
-                        data-test="line-item-total"
-                        className="p-2"
-                      />
+                      <LineItemAmount data-test="line-item-total" className="p-2" />
                       <LineItemRemoveLink
                         data-test="line-item-remove"
                         className="p-2 bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
@@ -168,19 +136,9 @@ export default function Cart() {
                   <LineItem type="bundles">
                     <div className="flex justify-between items-center border-b p-5">
                       <LineItemImage className="p-2" width={40} />
-                      <LineItemName
-                        data-test="line-item-name"
-                        className="p-2"
-                      />
-                      <LineItemQuantity
-                        data-test="line-item-quantity"
-                        max={10}
-                        className="p-2"
-                      />
-                      <LineItemAmount
-                        data-test="line-item-total"
-                        className="p-2"
-                      />
+                      <LineItemName data-test="line-item-name" className="p-2" />
+                      <LineItemQuantity data-test="line-item-quantity" max={10} className="p-2" />
+                      <LineItemAmount data-test="line-item-total" className="p-2" />
                       <LineItemRemoveLink
                         data-test="line-item-remove"
                         className="p-2 bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
@@ -190,19 +148,9 @@ export default function Cart() {
                   <LineItem type="adjustments">
                     <div className="flex justify-between items-center border-b p-5">
                       <LineItemImage className="p-2" width={40} />
-                      <LineItemName
-                        data-test="line-item-name"
-                        className="p-2"
-                      />
-                      <LineItemQuantity
-                        data-test="line-item-quantity"
-                        max={10}
-                        className="p-2"
-                      />
-                      <LineItemAmount
-                        data-test="line-item-total"
-                        className="p-2"
-                      />
+                      <LineItemName data-test="line-item-name" className="p-2" />
+                      <LineItemQuantity data-test="line-item-quantity" max={10} className="p-2" />
+                      <LineItemAmount data-test="line-item-total" className="p-2" />
                       <LineItemRemoveLink
                         data-test="line-item-remove"
                         className="p-2 bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"