docs: add stories for skus components

packages/docs/.storybook/preview.tsx

@@ -28,9 +28,15 @@ const parameters: Parameters = {
         'Components',
         [
           'Prices',
-          ['PricesContainer', '*'],
+          ['PricesContainer'],
           'Skus',
-          ['AvailabilityContainer', '*']
+          [
+            'SkusContainer',
+            'Skus',
+            'SkuField',
+            'AvailabilityContainer',
+            'AvailabilityTemplate'
+          ]
         ]
       ]
     }

packages/docs/stories/_internals/CommerceLayer.tsx

@@ -14,7 +14,7 @@ interface Props {
  */
 function CommerceLayer({ children, ...props }: Props): JSX.Element {
   const { accessToken, endpoint } = useGetToken({
-    userMode: props.accessToken === 'user-access-token'
+    userMode: props.accessToken === 'customer-access-token'
   })
 
   return (

packages/docs/stories/_internals/useGetToken.ts

@@ -65,7 +65,6 @@ export function useGetToken<T extends UseGetTokenOptions>(
       accessToken === '' ||
       isTokenExpired({ accessToken, compareTo: new Date() })
     ) {
-      console.log('initToken')
       void initToken()
     }
   }, [accessToken])

packages/docs/stories/examples/order-list/OrderList.stories.tsx

@@ -43,7 +43,7 @@ export const Default: StoryFn = (args) => {
   ]
 
   return (
-    <CommerceLayer accessToken='user-access-token'>
+    <CommerceLayer accessToken='customer-access-token'>
       <CustomerContainer>
         <OrderList
           type='orders'

packages/docs/stories/examples/skus/Skus.mdx

@@ -0,0 +1,74 @@
+import { Meta, Source, Canvas } from '@storybook/addon-docs';
+import * as Stories from './Skus.stories.tsx'
+
+
+<Meta of={Stories} />
+
+# Skus
+
+This guide will explain how to render a list of skus with prices, availability, and add to cart buttons.
+
+As first thing, it uses both `<OrderStorage>` and `<OrderContainer>` to manage the state of the cart (remember that for us, the cart is a draft order).
+In this way the `<AddToCartButton>` knows to which order it should add the sku.
+
+<Source language='jsx' dark code={`
+<OrderStorage persistKey='my-localStorage-key'>
+  <OrderContainer>
+    // ...rest of the app
+  </OrderContainer>
+</OrderStorage>
+`} />
+
+
+The presentational part of the skus is handled with `<SkusContainer>` and `<Skus>` components.
+<Source language='jsx' dark code={`
+<OrderStorage>
+  <OrderContainer>
+
+    <SkusContainer skus=[...skusToShow]>
+      <Skus>
+        <div>
+          // template used to render each sku
+        </div>
+      </Skus>
+    </SkusContainer>
+
+  </OrderContainer>
+</OrderStorage>
+`} />
+
+
+Inside the `<Skus>` component we load all other components that are needed to render the skus,
+including the `<AvailabilityContainer>`, the `<PricesContainer>` and the `<AddToCartButton>`.
+
+<span title='Notice' type='info'>
+Please note that we don't need to loop though our `skus` array. The content will be rendered for each sku passed to our `SkusContainer`.
+</span>
+
+<Source language='jsx' dark code={`
+<Skus>
+  <SkuField attribute="image_url">
+  <SkuField attribute="name">
+
+  <PricesContainer> // <-- gets current sku_code from <SkusContainer>
+    <Price/>
+  </PricesContainer>
+  
+  <AvailabilityContainer> // <-- gets current sku_code from <SkusContainer>
+    <AvailabilityTemplate/>
+  </AvailabilityContainer>
+  
+  <AddToCardButton /> // <-- gets current sku_code from <SkusContainer> and will add new line_items to the <OrderContainer>
+</Skus>
+`} />
+
+
+To complete the example, we added a final block to the page that rapresent the items added to the cart (using `<LineItemsContainer>`).
+In this way you will be able to see a full interaction between nested contexts (OrderContainer and SkuContainer).
+
+
+### Final example
+
+Here you can see the final example that applies the block explained above, ready to be used in your application.
+
+<Canvas of={Stories.Default} />

packages/docs/stories/examples/skus/Skus.stories.tsx

@@ -0,0 +1,98 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import CommerceLayer from '../../_internals/CommerceLayer'
+import { Skus } from '#components/skus/Skus'
+import { SkusContainer } from '#components/skus/SkusContainer'
+import { SkuField } from '#components/skus/SkuField'
+import { AvailabilityContainer } from '#components/skus/AvailabilityContainer'
+import AvailabilityTemplate from '#components/skus/AvailabilityTemplate'
+import Price from '#components/prices/Price'
+import PricesContainer from '#components/prices/PricesContainer'
+import OrderContainer from '#components/orders/OrderContainer'
+import AddToCartButton from '#components/orders/AddToCartButton'
+import OrderStorage from '#components/orders/OrderStorage'
+import LineItemsContainer from '#components/line_items/LineItemsContainer'
+import Errors from '#components/errors/Errors'
+import LineItemName from '#components/line_items/LineItemName'
+import LineItem from '#components/line_items/LineItem'
+import LineItemQuantity from '#components/line_items/LineItemQuantity'
+import LineItemRemoveLink from '#components/line_items/LineItemRemoveLink'
+import LineItemsEmpty from '#components/line_items/LineItemsEmpty'
+
+const setup: Meta = {
+  title: 'Examples/Skus'
+}
+
+export default setup
+
+export const Default: StoryFn = (args) => {
+  return (
+    <CommerceLayer
+      accessToken='my-access-token'
+      endpoint='https://demo-store.commercelayer.io'
+    >
+      <OrderStorage persistKey='cl-examples-skus-orderId'>
+        <OrderContainer>
+          <SkusContainer
+            skus={['CROPTOPWFFFFFF000000XSXX', 'POLOMXXX000000FFFFFFLXXX']}
+          >
+            <Skus>
+              <div className='flex gap-4 mb-8 pb-8 border-b items-start'>
+                <SkuField attribute='image_url' tagElement='img' width={100} />
+                <div>
+                  <SkuField
+                    attribute='name'
+                    tagElement='h1'
+                    className='block font-bold'
+                  />
+                  <SkuField
+                    attribute='description'
+                    tagElement='p'
+                    className='mb-2'
+                  />
+
+                  <PricesContainer>
+                    <Price compareClassName='line-through ml-2' />
+                  </PricesContainer>
+
+                  <div className='my-2'>
+                    <AddToCartButton className='px-3 py-2 bg-black text-white rounded disabled:opacity-50' />
+                  </div>
+
+                  <AvailabilityContainer>
+                    <AvailabilityTemplate
+                      timeFormat='days'
+                      className='text-sm'
+                      showShippingMethodName
+                    />
+                  </AvailabilityContainer>
+                </div>
+              </div>
+            </Skus>
+          </SkusContainer>
+
+          {/* cart */}
+          <div
+            id='cart-recap'
+            className='p-8 border rounded bg-gray-100 max-w-md'
+          >
+            <LineItemsContainer>
+              <LineItemsEmpty text='Cart is empty' />
+              <LineItem type='skus'>
+                <div className='flex gap-4 items-center mb-2'>
+                  <div className='flex' />
+                  <LineItemName />
+                  <LineItemQuantity>
+                    {({ quantity }) => <span>(&times;{quantity})</span>}
+                  </LineItemQuantity>
+
+                  <LineItemRemoveLink className='ml-auto px-2 text-sm rounded bg-red-500 text-white' />
+                </div>
+              </LineItem>
+              <Errors resource='orders' />
+            </LineItemsContainer>
+          </div>
+        </OrderContainer>
+      </OrderStorage>
+    </CommerceLayer>
+  )
+}

packages/docs/stories/prices/Price.stories.tsx

@@ -12,10 +12,7 @@ export default setup
 
 const Template: StoryFn<typeof Price> = (args) => {
   return (
-    <CommerceLayer
-      accessToken='my-access-token'
-      endpoint='https://demo-store.commercelayer.io'
-    >
+    <CommerceLayer accessToken='my-access-token'>
       <PricesContainer>
         <Price {...args} />
       </PricesContainer>

packages/docs/stories/prices/PricesContainer.stories.tsx

@@ -12,10 +12,7 @@ export default setup
 
 const Template: StoryFn<typeof PricesContainer> = (args) => {
   return (
-    <CommerceLayer
-      accessToken='my-access-token'
-      endpoint='https://demo-store.commercelayer.io'
-    >
+    <CommerceLayer accessToken='my-access-token'>
       <PricesContainer {...args}>
         <Price />
       </PricesContainer>

packages/docs/stories/skus/Availability.stories.tsx → packages/docs/stories/skus/AvailabilityTemplate.stories.tsx

@@ -5,7 +5,7 @@ import { AvailabilityContainer } from '#components/skus/AvailabilityContainer'
 import PricesContainer from '#components/prices/PricesContainer'
 
 const setup: Meta<typeof AvailabilityTemplate> = {
-  title: 'Components/Skus/Availability',
+  title: 'Components/Skus/AvailabilityTemplate',
   component: AvailabilityTemplate,
   argTypes: {
     showShippingMethodName: {
@@ -25,10 +25,7 @@ export default setup
 
 const Template: StoryFn<typeof AvailabilityTemplate> = (args) => {
   return (
-    <CommerceLayer
-      accessToken='my-access-token'
-      endpoint='https://demo-store.commercelayer.io'
-    >
+    <CommerceLayer accessToken='my-access-token'>
       <AvailabilityContainer skuCode='POLOMXXX000000FFFFFFLXXX'>
         <AvailabilityTemplate {...args} />
       </AvailabilityContainer>
@@ -97,9 +94,7 @@ export const ChildrenProps: StoryObj = () => {
                   {childrenProps.min?.hours} hours
                 </p>
                 <p className='font-bold'>The delivery_lead_times object</p>
-                <pre key={childrenProps.id}>
-                  {JSON.stringify(childrenProps, null, 2)}
-                </pre>
+                <pre>{JSON.stringify(childrenProps, null, 2)}</pre>
               </div>
             )
           }}

packages/docs/stories/skus/Skus.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import CommerceLayer from '../_internals/CommerceLayer'
+import { Skus } from '#components/skus/Skus'
+import { SkusContainer } from '#components/skus/SkusContainer'
+import { Code } from 'stories/_internals/Code'
+
+const setup: Meta<typeof Skus> = {
+  title: 'Components/Skus/Skus',
+  component: Skus
+}
+
+export default setup
+
+export const Default: StoryFn<typeof Skus> = () => {
+  return (
+    <CommerceLayer accessToken='my-access-token'>
+      <SkusContainer
+        skus={['POLOMXXX000000FFFFFFLXXX', 'CROPTOPWFFFFFF000000XSXX']}
+      >
+        <Skus>
+          <div>
+            I am <Code>Skus</Code> child
+          </div>
+        </Skus>
+      </SkusContainer>
+    </CommerceLayer>
+  )
+}

packages/docs/stories/skus/SkusContainer.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import CommerceLayer from '../_internals/CommerceLayer'
+import { SkusContainer } from '#components/skus/SkusContainer'
+import { Code } from '../_internals/Code'
+
+const setup: Meta<typeof SkusContainer> = {
+  title: 'Components/Skus/SkusContainer',
+  component: SkusContainer
+}
+
+export default setup
+
+const Template: StoryFn<typeof SkusContainer> = (args) => {
+  return (
+    <CommerceLayer
+      accessToken='my-access-token'
+      endpoint='https://demo-store.commercelayer.io'
+    >
+      <SkusContainer {...args}>
+        <div>
+          I am the skus container, responsible to fetch alls <Code>skus</Code>{' '}
+          details and make them available to the children components.
+        </div>
+      </SkusContainer>
+    </CommerceLayer>
+  )
+}
+
+export const Default = Template.bind({})
+Default.args = {
+  skus: ['POLOMXXX000000FFFFFFLXXX', 'CROPTOPWFFFFFF000000XSXX'],
+  queryParams: {
+    pageSize: 25,
+    pageNumber: 1,
+    fields: ['name', 'description', 'image_url', 'reference'],
+    sort: {
+      name: 'asc'
+    }
+  }
+}