Adding docs for cartlineprovider (#141)

.changeset/strong-swans-melt.md

@@ -2,4 +2,9 @@
 '@shopify/storefront-kit-react': patch
 ---
 
-Added the `<CartCost/>` and `<CartLinePrice/>` components, which have been a part of this package for awhile but weren't actually able to be used/imported.
+Added the following components and hooks, which have been a part of this package for awhile but weren't actually able to be used/imported.
+
+- `<CartCost />`
+- `<CartLinePrice />`
+- `<CartLineProvider />`
+- `useCartLine()`

packages/react/docs/generated/generated_docs_data.json

@@ -519,6 +519,70 @@
       }
     ]
   },
+  {
+    "name": "CartLineProvider",
+    "category": "components",
+    "isVisualComponent": false,
+    "related": [
+      {
+        "name": "useCartLine",
+        "type": "hooks",
+        "url": "/api/react-storefront-kit/hooks/useCartLine"
+      }
+    ],
+    "description": "\n    The `CartLineProvider` component creates a context for using a cart line.\n  ",
+    "type": "component",
+    "defaultExample": {
+      "description": "I am the default example",
+      "codeblock": {
+        "tabs": [
+          {
+            "title": "JavaScript",
+            "code": "import {CartLineProvider, useCartLine} from '@shopify/storefront-kit-react';\n\nexport function CartWrapper({cart}) {\n  const firstCartLine = cart.lines.nodes[0];\n  return (\n    <CartLineProvider line={firstCartLine}>\n      <CartLineQuantity />\n    </CartLineProvider>\n  );\n}\n\nfunction CartLineQuantity() {\n  const cartLine = useCartLine();\n\n  return <div>{cartLine.quantity}</div>;\n}\n",
+            "language": "jsx"
+          },
+          {
+            "title": "TypeScript",
+            "code": "import {CartLineProvider, useCartLine} from '@shopify/storefront-kit-react';\nimport type {Cart} from '@shopify/storefront-kit-react/storefront-api-types';\n\nexport function CartWrapper({cart}: {cart: Cart}) {\n  const firstCartLine = cart.lines.nodes[0];\n  return (\n    <CartLineProvider line={firstCartLine}>\n      <CartLineQuantity />\n    </CartLineProvider>\n  );\n}\n\nfunction CartLineQuantity() {\n  const cartLine = useCartLine();\n\n  return <div>{cartLine.quantity}</div>;\n}\n",
+            "language": "tsx"
+          }
+        ],
+        "title": "Example code"
+      }
+    },
+    "definitions": [
+      {
+        "title": "Props",
+        "description": "",
+        "type": "CartLineProviderProps",
+        "typeDefinitions": {
+          "CartLineProviderProps": {
+            "filePath": "/CartLineProvider.tsx",
+            "syntaxKind": "TypeAliasDeclaration",
+            "name": "CartLineProviderProps",
+            "value": "{\n  /** Any `ReactNode` elements. */\n  children: ReactNode;\n  /** A cart line object. */\n  line: CartLine;\n}",
+            "description": "",
+            "members": [
+              {
+                "filePath": "/CartLineProvider.tsx",
+                "syntaxKind": "PropertySignature",
+                "name": "children",
+                "value": "ReactNode",
+                "description": "Any `ReactNode` elements."
+              },
+              {
+                "filePath": "/CartLineProvider.tsx",
+                "syntaxKind": "PropertySignature",
+                "name": "line",
+                "value": "CartLine",
+                "description": "A cart line object."
+              }
+            ]
+          }
+        }
+      }
+    ]
+  },
   {
     "name": "ExternalVideo",
     "category": "components",
@@ -4723,5 +4787,38 @@
     "related": [],
     "description": "",
     "type": "hook"
+  },
+  {
+    "name": "useCartLine",
+    "category": "hooks",
+    "isVisualComponent": false,
+    "related": [
+      {
+        "name": "CartLineProvider",
+        "type": "component",
+        "url": "/api/react-storefront-kit/components/CartLineProvider"
+      }
+    ],
+    "description": "\n    The `useCartLine` hook provides access to the cart line object. It must be a descendent of a `CartProvider` component.\n  ",
+    "type": "component",
+    "defaultExample": {
+      "description": "I am the default example",
+      "codeblock": {
+        "tabs": [
+          {
+            "title": "JavaScript",
+            "code": "import {CartLineProvider, useCartLine} from '@shopify/storefront-kit-react';\n\nexport function CartWrapper({cart}) {\n  const firstCartLine = cart.lines.nodes[0];\n  return (\n    <CartLineProvider line={firstCartLine}>\n      <CartLineQuantity />\n    </CartLineProvider>\n  );\n}\n\nfunction CartLineQuantity() {\n  const cartLine = useCartLine();\n\n  return <div>{cartLine.quantity}</div>;\n}\n",
+            "language": "jsx"
+          },
+          {
+            "title": "TypeScript",
+            "code": "import {CartLineProvider, useCartLine} from '@shopify/storefront-kit-react';\nimport type {Cart} from '@shopify/storefront-kit-react/storefront-api-types';\n\nexport function CartWrapper({cart}: {cart: Cart}) {\n  const firstCartLine = cart.lines.nodes[0];\n  return (\n    <CartLineProvider line={firstCartLine}>\n      <CartLineQuantity />\n    </CartLineProvider>\n  );\n}\n\nfunction CartLineQuantity() {\n  const cartLine = useCartLine();\n\n  return <div>{cartLine.quantity}</div>;\n}\n",
+            "language": "tsx"
+          }
+        ],
+        "title": "Example code"
+      }
+    },
+    "definitions": []
   }
 ]

packages/react/src/CartLineProvider.doc.ts

@@ -0,0 +1,45 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'CartLineProvider',
+  category: 'components',
+  isVisualComponent: false,
+  related: [
+    {
+      name: 'useCartLine',
+      type: 'hooks',
+      url: '/api/react-storefront-kit/hooks/useCartLine',
+    },
+  ],
+  description: `
+    The \`CartLineProvider\` component creates a context for using a cart line.
+  `,
+  type: 'component',
+  defaultExample: {
+    description: 'I am the default example',
+    codeblock: {
+      tabs: [
+        {
+          title: 'JavaScript',
+          code: './CartLineProvider.example.jsx',
+          language: 'jsx',
+        },
+        {
+          title: 'TypeScript',
+          code: './CartLineProvider.example.tsx',
+          language: 'tsx',
+        },
+      ],
+      title: 'Example code',
+    },
+  },
+  definitions: [
+    {
+      title: 'Props',
+      type: 'CartLineProviderProps',
+      description: '',
+    },
+  ],
+};
+
+export default data;

packages/react/src/CartLineProvider.example.jsx

@@ -0,0 +1,16 @@
+import {CartLineProvider, useCartLine} from '@shopify/storefront-kit-react';
+
+export function CartWrapper({cart}) {
+  const firstCartLine = cart.lines.nodes[0];
+  return (
+    <CartLineProvider line={firstCartLine}>
+      <CartLineQuantity />
+    </CartLineProvider>
+  );
+}
+
+function CartLineQuantity() {
+  const cartLine = useCartLine();
+
+  return <div>{cartLine.quantity}</div>;
+}

packages/react/src/CartLineProvider.example.tsx

@@ -0,0 +1,17 @@
+import {CartLineProvider, useCartLine} from '@shopify/storefront-kit-react';
+import type {Cart} from '@shopify/storefront-kit-react/storefront-api-types';
+
+export function CartWrapper({cart}: {cart: Cart}) {
+  const firstCartLine = cart.lines.nodes[0];
+  return (
+    <CartLineProvider line={firstCartLine}>
+      <CartLineQuantity />
+    </CartLineProvider>
+  );
+}
+
+function CartLineQuantity() {
+  const cartLine = useCartLine();
+
+  return <div>{cartLine.quantity}</div>;
+}

packages/react/src/CartLineProvider.tsx

@@ -16,18 +16,17 @@ export function useCartLine() {
   return context;
 }
 
-/**
- * The `CartLineProvider` component creates a context for using a cart line.
- */
-export function CartLineProvider({
-  children,
-  line,
-}: {
+type CartLineProviderProps = {
   /** Any `ReactNode` elements. */
   children: ReactNode;
   /** A cart line object. */
   line: CartLine;
-}) {
+};
+
+/**
+ * The `CartLineProvider` component creates a context for using a cart line.
+ */
+export function CartLineProvider({children, line}: CartLineProviderProps) {
   return (
     <CartLineContext.Provider value={line}>{children}</CartLineContext.Provider>
   );

packages/react/src/index.ts

@@ -27,6 +27,7 @@ export type {
 export {CartCheckoutButton} from './CartCheckoutButton.js';
 export {CartCost} from './CartCost.js';
 export {CartLinePrice} from './CartLinePrice.js';
+export {CartLineProvider, useCartLine} from './CartLineProvider.js';
 export {CartProvider, useCart} from './CartProvider.js';
 export {storefrontApiCustomScalars} from './codegen.helpers.js';
 export {getShopifyCookies} from './cookies-utils.js';

packages/react/src/useCartLine.doc.ts

@@ -0,0 +1,39 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'useCartLine',
+  category: 'hooks',
+  isVisualComponent: false,
+  related: [
+    {
+      name: 'CartLineProvider',
+      type: 'component',
+      url: '/api/react-storefront-kit/components/CartLineProvider',
+    },
+  ],
+  description: `
+    The \`useCartLine\` hook provides access to the cart line object. It must be a descendent of a \`CartProvider\` component.
+  `,
+  type: 'component',
+  defaultExample: {
+    description: 'I am the default example',
+    codeblock: {
+      tabs: [
+        {
+          title: 'JavaScript',
+          code: './CartLineProvider.example.jsx',
+          language: 'jsx',
+        },
+        {
+          title: 'TypeScript',
+          code: './CartLineProvider.example.tsx',
+          language: 'tsx',
+        },
+      ],
+      title: 'Example code',
+    },
+  },
+  definitions: [],
+};
+
+export default data;