Adds CartLinePrice and CartCost components to index.ts (#134)

* Add cart checkout docs and rearrange index.ts * Add cartcost component * Add CartLinePrice * format readme
Shopify · Jan 24, 2023 · 6184517 · 6184517
1 parent 5748052
commit 6184517
Show file tree

Hide file tree

Showing 16 changed files with 477 additions and 40 deletions.
diff --git a/.changeset/strong-swans-melt.md b/.changeset/strong-swans-melt.md
@@ -0,0 +1,5 @@
+---
+'@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.
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 # React Storefront Kit
 
-React Storefront Kit is an unopionated and performant library of Shopify-specific commerce components, hooks, and utilities. 
+React Storefront Kit is an unopionated and performant library of Shopify-specific commerce components, hooks, and utilities.
 
 It accelerates the development of Shopify-powered custom storefronts by providing business logic, data processing, and state management on top of the [Storefront API](https://shopify.dev/api/storefront).
 

diff --git a/packages/react/docs/generated/generated_docs_data.json b/packages/react/docs/generated/generated_docs_data.json
@@ -270,6 +270,255 @@
       }
     ]
   },
+  {
+    "name": "CartCheckoutButton",
+    "category": "components",
+    "isVisualComponent": false,
+    "related": [],
+    "description": "The `CartCheckoutButton` component renders a button that redirects to the checkout URL for the cart.\n    Must be a descendent of a `CartProvider` component.\n  ",
+    "type": "component",
+    "defaultExample": {
+      "description": "I am the default example",
+      "codeblock": {
+        "tabs": [
+          {
+            "title": "JavaScript",
+            "code": "import {CartCheckoutButton} from '@shopify/storefront-kit-react';\n\nexport default function ProductCartCheckoutButton() {\n  return <CartCheckoutButton />;\n}\n",
+            "language": "jsx"
+          },
+          {
+            "title": "TypeScript",
+            "code": "import {CartCheckoutButton} from '@shopify/storefront-kit-react';\n\nexport default function ProductCartCheckoutButton() {\n  return <CartCheckoutButton />;\n}\n",
+            "language": "tsx"
+          }
+        ],
+        "title": "Example code"
+      }
+    },
+    "definitions": [
+      {
+        "title": "Props",
+        "description": "",
+        "type": "CartCheckoutButtonProps",
+        "typeDefinitions": {
+          "CartCheckoutButtonProps": {
+            "filePath": "/CartCheckoutButton.tsx",
+            "syntaxKind": "TypeAliasDeclaration",
+            "name": "CartCheckoutButtonProps",
+            "value": "Omit<BaseButtonProps<'button'>, 'onClick'> & ChildrenProps",
+            "description": ""
+          },
+          "BaseButtonProps": {
+            "filePath": "/BaseButton.tsx",
+            "syntaxKind": "TypeAliasDeclaration",
+            "name": "BaseButtonProps",
+            "value": "CustomBaseButtonProps<AsType> & Omit<\n      React.ComponentPropsWithoutRef<AsType>,\n      keyof CustomBaseButtonProps<AsType>\n    >",
+            "description": ""
+          },
+          "CustomBaseButtonProps": {
+            "filePath": "/BaseButton.tsx",
+            "name": "CustomBaseButtonProps",
+            "description": "",
+            "members": [
+              {
+                "filePath": "/BaseButton.tsx",
+                "syntaxKind": "PropertySignature",
+                "name": "as",
+                "value": "AsType",
+                "description": "Provide a React element or component to render as the underlying button. Note: for accessibility compliance, almost always you should use a `button` element, or a component that renders an underlying button.",
+                "isOptional": true
+              },
+              {
+                "filePath": "/BaseButton.tsx",
+                "syntaxKind": "PropertySignature",
+                "name": "children",
+                "value": "ReactNode",
+                "description": "Any ReactNode elements."
+              },
+              {
+                "filePath": "/BaseButton.tsx",
+                "syntaxKind": "PropertySignature",
+                "name": "onClick",
+                "value": "(event?: MouseEvent<HTMLButtonElement, MouseEvent>) => boolean | void",
+                "description": "Click event handler. Default behaviour triggers unless prevented",
+                "isOptional": true
+              },
+              {
+                "filePath": "/BaseButton.tsx",
+                "syntaxKind": "PropertySignature",
+                "name": "defaultOnClick",
+                "value": "(event?: MouseEvent<HTMLButtonElement, MouseEvent>) => boolean | void",
+                "description": "A default onClick behavior",
+                "isOptional": true
+              },
+              {
+                "filePath": "/BaseButton.tsx",
+                "syntaxKind": "PropertySignature",
+                "name": "buttonRef",
+                "value": "Ref<HTMLButtonElement>",
+                "description": "A ref to the underlying button",
+                "isOptional": true
+              }
+            ],
+            "value": "export interface CustomBaseButtonProps<AsType> {\n  /** Provide a React element or component to render as the underlying button. Note: for accessibility compliance, almost always you should use a `button` element, or a component that renders an underlying button. */\n  as?: AsType;\n  /** Any ReactNode elements. */\n  children: ReactNode;\n  /** Click event handler. Default behaviour triggers unless prevented */\n  onClick?: (\n    event?: React.MouseEvent<HTMLButtonElement, MouseEvent>\n  ) => void | boolean;\n  /** A default onClick behavior */\n  defaultOnClick?: (\n    event?: React.MouseEvent<HTMLButtonElement, MouseEvent>\n  ) => void | boolean;\n  /** A ref to the underlying button */\n  buttonRef?: Ref<HTMLButtonElement>;\n}"
+          },
+          "ChildrenProps": {
+            "filePath": "/CartCheckoutButton.tsx",
+            "syntaxKind": "TypeAliasDeclaration",
+            "name": "ChildrenProps",
+            "value": "{\n  /** A `ReactNode` element. */\n  children: ReactNode;\n}",
+            "description": "",
+            "members": [
+              {
+                "filePath": "/CartCheckoutButton.tsx",
+                "syntaxKind": "PropertySignature",
+                "name": "children",
+                "value": "ReactNode",
+                "description": "A `ReactNode` element."
+              }
+            ]
+          }
+        }
+      }
+    ]
+  },
+  {
+    "name": "CartCost",
+    "category": "components",
+    "isVisualComponent": false,
+    "related": [],
+    "description": "\n    The `CartCost` component renders a `Money` component with the cost associated with the `amountType` prop. \n    If no `amountType` prop is specified, then it defaults to `totalAmount`.\n    Depends on `useCart()` and must be a child of `<CartProvider/>`\n  ",
+    "type": "component",
+    "defaultExample": {
+      "description": "I am the default example",
+      "codeblock": {
+        "tabs": [
+          {
+            "title": "JavaScript",
+            "code": "import {CartCost} from '@shopify/storefront-kit-react';\n\nexport default function CartTotals() {\n  return (\n    <>\n      <div>\n        Subtotal: <CartCost amountType=\"subtotal\" />\n      </div>\n      <div>\n        Tax: <CartCost amountType=\"tax\" />\n      </div>\n      <div>\n        Total: <CartCost />\n      </div>\n    </>\n  );\n}\n",
+            "language": "jsx"
+          },
+          {
+            "title": "TypeScript",
+            "code": "import {CartCost} from '@shopify/storefront-kit-react';\n\nexport default function CartTotals() {\n  return (\n    <>\n      <div>\n        Subtotal: <CartCost amountType=\"subtotal\" />\n      </div>\n      <div>\n        Tax: <CartCost amountType=\"tax\" />\n      </div>\n      <div>\n        Total: <CartCost />\n      </div>\n    </>\n  );\n}\n",
+            "language": "tsx"
+          }
+        ],
+        "title": "Example code"
+      }
+    },
+    "definitions": [
+      {
+        "title": "Props",
+        "description": "",
+        "type": "CartCostProps",
+        "typeDefinitions": {
+          "CartCostProps": {
+            "filePath": "/CartCost.tsx",
+            "syntaxKind": "TypeAliasDeclaration",
+            "name": "CartCostProps",
+            "value": "Omit<React.ComponentProps<typeof Money>, 'data'> & CartCostPropsBase",
+            "description": ""
+          },
+          "CartCostPropsBase": {
+            "filePath": "/CartCost.tsx",
+            "name": "CartCostPropsBase",
+            "description": "",
+            "members": [
+              {
+                "filePath": "/CartCost.tsx",
+                "syntaxKind": "PropertySignature",
+                "name": "amountType",
+                "value": "\"total\" | \"subtotal\" | \"tax\" | \"duty\"",
+                "description": "A string type that defines the type of cost needed. Valid values: `total`, `subtotal`, `tax`, or `duty`.",
+                "isOptional": true
+              },
+              {
+                "filePath": "/CartCost.tsx",
+                "syntaxKind": "PropertySignature",
+                "name": "children",
+                "value": "ReactNode",
+                "description": "Any `ReactNode` elements.",
+                "isOptional": true
+              }
+            ],
+            "value": "interface CartCostPropsBase {\n  /** A string type that defines the type of cost needed. Valid values: `total`, `subtotal`, `tax`, or `duty`. */\n  amountType?: 'total' | 'subtotal' | 'tax' | 'duty';\n  /** Any `ReactNode` elements. */\n  children?: React.ReactNode;\n}"
+          }
+        }
+      }
+    ]
+  },
+  {
+    "name": "CartLinePrice",
+    "category": "components",
+    "isVisualComponent": false,
+    "related": [
+      {
+        "name": "Money",
+        "type": "component",
+        "url": "/api/react-storefront-kit/components/money"
+      }
+    ],
+    "description": "\n    The `CartLinePrice` component renders a `Money` component for the cart line merchandise's price or compare at price.\n  ",
+    "type": "component",
+    "defaultExample": {
+      "description": "I am the default example",
+      "codeblock": {
+        "tabs": [
+          {
+            "title": "JavaScript",
+            "code": "import {CartLinePrice} from '@shopify/storefront-kit-react';\n\nexport default function ProductCartLinePrice({cartLine}) {\n  return <CartLinePrice data={cartLine} priceType=\"compareAt\" />;\n}\n",
+            "language": "jsx"
+          },
+          {
+            "title": "TypeScript",
+            "code": "import {CartLinePrice} from '@shopify/storefront-kit-react';\nimport type {CartLine} from '@shopify/storefront-kit-react/storefront-api-types';\n\nexport default function ProductCartLinePrice({cartLine}: {cartLine: CartLine}) {\n  return <CartLinePrice data={cartLine} priceType=\"compareAt\" />;\n}\n",
+            "language": "tsx"
+          }
+        ],
+        "title": "Example code"
+      }
+    },
+    "definitions": [
+      {
+        "title": "Props",
+        "description": "",
+        "type": "CartLinePriceProps",
+        "typeDefinitions": {
+          "CartLinePriceProps": {
+            "filePath": "/CartLinePrice.tsx",
+            "syntaxKind": "TypeAliasDeclaration",
+            "name": "CartLinePriceProps",
+            "value": "Omit<React.ComponentProps<typeof Money>, 'data'> & CartLinePricePropsBase",
+            "description": ""
+          },
+          "CartLinePricePropsBase": {
+            "filePath": "/CartLinePrice.tsx",
+            "name": "CartLinePricePropsBase",
+            "description": "",
+            "members": [
+              {
+                "filePath": "/CartLinePrice.tsx",
+                "syntaxKind": "PropertySignature",
+                "name": "data",
+                "value": "PartialObjectDeep<CartLine, { recurseIntoArrays: true; }>",
+                "description": "A [CartLine object](https://shopify.dev/api/storefront/reference/objects/CartLine)."
+              },
+              {
+                "filePath": "/CartLinePrice.tsx",
+                "syntaxKind": "PropertySignature",
+                "name": "priceType",
+                "value": "\"regular\" | \"compareAt\"",
+                "description": "The type of price. Valid values:`regular` (default) or `compareAt`.",
+                "isOptional": true
+              }
+            ],
+            "value": "interface CartLinePricePropsBase {\n  /** A [CartLine object](https://shopify.dev/api/storefront/reference/objects/CartLine). */\n  data: PartialDeep<CartLine, {recurseIntoArrays: true}>;\n  /** The type of price. Valid values:`regular` (default) or `compareAt`. */\n  priceType?: 'regular' | 'compareAt';\n}"
+          }
+        }
+      }
+    ]
+  },
   {
     "name": "ExternalVideo",
     "category": "components",

diff --git a/packages/react/src/CartCheckoutButton.doc.ts b/packages/react/src/CartCheckoutButton.doc.ts
@@ -0,0 +1,39 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'CartCheckoutButton',
+  category: 'components',
+  isVisualComponent: false,
+  related: [],
+  description: `The \`CartCheckoutButton\` component renders a button that redirects to the checkout URL for the cart.
+    Must be a descendent of a \`CartProvider\` component.
+  `,
+  type: 'component',
+  defaultExample: {
+    description: 'I am the default example',
+    codeblock: {
+      tabs: [
+        {
+          title: 'JavaScript',
+          code: './CartCheckoutButton.example.jsx',
+          language: 'jsx',
+        },
+        {
+          title: 'TypeScript',
+          code: './CartCheckoutButton.example.tsx',
+          language: 'tsx',
+        },
+      ],
+      title: 'Example code',
+    },
+  },
+  definitions: [
+    {
+      title: 'Props',
+      type: 'CartCheckoutButtonProps',
+      description: '',
+    },
+  ],
+};
+
+export default data;
diff --git a/packages/react/src/CartCheckoutButton.example.jsx b/packages/react/src/CartCheckoutButton.example.jsx
@@ -0,0 +1,5 @@
+import {CartCheckoutButton} from '@shopify/storefront-kit-react';
+
+export default function ProductCartCheckoutButton() {
+  return <CartCheckoutButton />;
+}
diff --git a/packages/react/src/CartCheckoutButton.example.tsx b/packages/react/src/CartCheckoutButton.example.tsx
@@ -0,0 +1,5 @@
+import {CartCheckoutButton} from '@shopify/storefront-kit-react';
+
+export default function ProductCartCheckoutButton() {
+  return <CartCheckoutButton />;
+}
diff --git a/packages/react/src/CartCheckoutButton.tsx b/packages/react/src/CartCheckoutButton.tsx
@@ -2,18 +2,18 @@ import {ReactNode, useEffect, useState} from 'react';
 import {useCart} from './CartProvider.js';
 import {BaseButton, BaseButtonProps} from './BaseButton.js';
 
-type PropsWeControl = 'onClick';
+type ChildrenProps = {
+  /** A `ReactNode` element. */
+  children: ReactNode;
+};
+type CartCheckoutButtonProps = Omit<BaseButtonProps<'button'>, 'onClick'> &
+  ChildrenProps;
 
 /**
  * The `CartCheckoutButton` component renders a button that redirects to the checkout URL for the cart.
  * It must be a descendent of a `CartProvider` component.
  */
-export function CartCheckoutButton(
-  props: Omit<BaseButtonProps<'button'>, PropsWeControl> & {
-    /** A `ReactNode` element. */
-    children: ReactNode;
-  }
-) {
+export function CartCheckoutButton(props: CartCheckoutButtonProps) {
   const [requestedCheckout, setRequestedCheckout] = useState(false);
   const {status, checkoutUrl} = useCart();
   const {children, ...passthroughProps} = props;

diff --git a/packages/react/src/CartCost.doc.ts b/packages/react/src/CartCost.doc.ts
@@ -0,0 +1,41 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'CartCost',
+  category: 'components',
+  isVisualComponent: false,
+  related: [],
+  description: `
+    The \`CartCost\` component renders a \`Money\` component with the cost associated with the \`amountType\` prop. 
+    If no \`amountType\` prop is specified, then it defaults to \`totalAmount\`.
+    Depends on \`useCart()\` and must be a child of \`<CartProvider/>\`
+  `,
+  type: 'component',
+  defaultExample: {
+    description: 'I am the default example',
+    codeblock: {
+      tabs: [
+        {
+          title: 'JavaScript',
+          code: './CartCost.example.jsx',
+          language: 'jsx',
+        },
+        {
+          title: 'TypeScript',
+          code: './CartCost.example.tsx',
+          language: 'tsx',
+        },
+      ],
+      title: 'Example code',
+    },
+  },
+  definitions: [
+    {
+      title: 'Props',
+      type: 'CartCostProps',
+      description: '',
+    },
+  ],
+};
+
+export default data;