Update docs and cleanup references (#127)

CONTRIBUTING.md

@@ -39,6 +39,19 @@ If you need a helper function that is shared between the tests and stories files
 - The function can't go into the test file, because when the story file imports it, it will also import Vitest and cause things to break
 - The function can't go into the story file, because when you export it, it shows up as a story in the storybook/ladle navigation
 
+## Writing Docs
+
+Documentation lives in the `*.doc.ts` files, and uses a Shopify library called `@shopify/generate-docs` to pull the TypeScript type info from the source code and generate the output for the Shopify website into the `docs/` folder.
+
+After adding or updating docs, you'll need to:
+
+1. `cd` into `packages/react` folder
+1. Run `yarn build-docs`
+
+Which will update the generated output, and then will be picked up by the Shopify website on a regular cadence.
+
+Docs can (and should, when possible) include two examples; one in plain JavaScript and one in TypeScript, using the format `{name}.example.(t|j)sx`.
+
 ## Package Exports Notes:
 
 - Until ESLint can resolve package.exports, we added `storefront-kit` to `.eslintrc.js`->`node/no-missing-import.allowModules`

apps/nextjs/pages/collection.tsx

@@ -87,7 +87,7 @@ export default function Collection({
 
       <footer className={styles.footer}>
         <a
-          href="https://vercel.com?utm_source=hydrogen-react-monorepo"
+          href="https://vercel.com?utm_source=storefront-kit-monorepo"
           target="_blank"
           rel="noopener noreferrer"
         >

apps/nextjs/pages/product.tsx

@@ -121,7 +121,7 @@ export default function Product({
 
       <footer className={styles.footer}>
         <a
-          href="https://vercel.com?utm_source=hydrogen-react-monorepo"
+          href="https://vercel.com?utm_source=storefront-kit-monorepo"
           target="_blank"
           rel="noopener noreferrer"
         >

apps/nextjs/pages/search.tsx

@@ -79,7 +79,7 @@ export default function Search({
 
       <footer className={styles.footer}>
         <a
-          href="https://vercel.com?utm_source=hydrogen-react-monorepo"
+          href="https://vercel.com?utm_source=storefront-kit-monorepo"
           target="_blank"
           rel="noopener noreferrer"
         >

packages/react/CHANGELOG.md

@@ -1,4 +1,4 @@
-# @shopify/hydrogen-react
+# @shopify/storefront-kit-react
 
 ## 2023.1.3
 

packages/react/README.md

@@ -187,7 +187,7 @@ Improve your development experience by using Storefront Kit's generated Types an
 Storefront Kit ships with generated TypeScript types that match the Storefront API and its objects. Import them from the `/storefront-api-types` package path:
 
 ```ts
-import type {Product} from '@shopify/hydrogen-react/storefront-api-types';
+import type {Product} from '@shopify/storefront-kit-react/storefront-api-types';
 
 const product: Product = {};
 ```

packages/react/docs/generated/generated_static_pages.json

@@ -38,17 +38,17 @@
           "tabs": [
             {
               "title": "Primitive Component",
-              "code": "import {createStorefrontClient} from '@shopify/hydrogen-react';\n\nexport const storefrontClient = createStorefrontClient({});\n",
+              "code": "import {createStorefrontClient} from '@shopify/storefront-kit-react';\n\nexport const storefrontClient = createStorefrontClient({});\n",
               "language": "javascript"
             },
             {
               "title": "Hook Example",
-              "code": "import {createStorefrontClient} from '@shopify/hydrogen-react';\n\nexport const storefrontClient = createStorefrontClient({});\n",
+              "code": "import {createStorefrontClient} from '@shopify/storefront-kit-react';\n\nexport const storefrontClient = createStorefrontClient({});\n",
               "language": "javascript"
             },
             {
               "title": "Utility Function Example",
-              "code": "import {createStorefrontClient} from '@shopify/hydrogen-react';\n\nexport const storefrontClient = createStorefrontClient({});\n",
+              "code": "import {createStorefrontClient} from '@shopify/storefront-kit-react';\n\nexport const storefrontClient = createStorefrontClient({});\n",
               "language": "javascript"
             }
           ]

packages/react/docs/staticPages/homepage.example.tsx

@@ -1,3 +1,3 @@
-import {createStorefrontClient} from '@shopify/hydrogen-react';
+import {createStorefrontClient} from '@shopify/storefront-kit-react';
 
 export const storefrontClient = createStorefrontClient({});

packages/react/src/ExternalVideo.doc.ts

@@ -3,7 +3,7 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
 const data: ReferenceEntityTemplateSchema = {
   name: 'ExternalVideo',
   category: 'components',
-  isVisualComponent: true,
+  isVisualComponent: false,
   // put a name in for 'image', and it will look in the docs/screenshots/ folder automatically.
   // image: "",
   related: [

packages/react/src/ExternalVideo.example.jsx

@@ -1,4 +1,4 @@
-import {ExternalVideo} from '@shopify/hydrogen-react';
+import {ExternalVideo} from '@shopify/storefront-kit-react';
 
 export default function MyProductVideo({products}) {
   const firstMediaElement = products.nodes[0].media.nodes[0];

packages/react/src/ExternalVideo.example.tsx

@@ -1,5 +1,5 @@
-import {ExternalVideo} from '@shopify/hydrogen-react';
-import type {ProductConnection} from '@shopify/hydrogen-react/storefront-api-types';
+import {ExternalVideo} from '@shopify/storefront-kit-react';
+import type {ProductConnection} from '@shopify/storefront-kit-react/storefront-api-types';
 
 export default function MyProductVideo({
   products,

packages/react/src/Image.doc.ts

@@ -3,7 +3,7 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
 const data: ReferenceEntityTemplateSchema = {
   name: 'Image',
   category: 'components',
-  isVisualComponent: true,
+  isVisualComponent: false,
   related: [
     {
       name: 'MediaFile',

packages/react/src/Image.example.jsx

@@ -1,4 +1,4 @@
-import {Image} from '@shopify/hydrogen-react';
+import {Image} from '@shopify/storefront-kit-react';
 
 export default function ProductImage({product}) {
   const image = product.featuredImage;

packages/react/src/Image.example.tsx

@@ -1,5 +1,5 @@
-import {Image} from '@shopify/hydrogen-react';
-import type {Product} from '@shopify/hydrogen-react/storefront-api-types';
+import {Image} from '@shopify/storefront-kit-react';
+import type {Product} from '@shopify/storefront-kit-react/storefront-api-types';
 
 export default function ProductImage({product}: {product: Product}) {
   const image = product.featuredImage;

packages/react/src/MediaFile.doc.ts

@@ -3,7 +3,7 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
 const data: ReferenceEntityTemplateSchema = {
   name: 'MediaFile',
   category: 'components',
-  isVisualComponent: true,
+  isVisualComponent: false,
   related: [
     {
       name: 'Image',

packages/react/src/MediaFile.example.jsx

@@ -1,4 +1,4 @@
-import {MediaFile} from '@shopify/hydrogen-react';
+import {MediaFile} from '@shopify/storefront-kit-react';
 
 export function ProductsMediaFiles({products}) {
   return (

packages/react/src/MediaFile.example.tsx

@@ -1,5 +1,5 @@
-import {MediaFile} from '@shopify/hydrogen-react';
-import type {ProductConnection} from '@shopify/hydrogen-react/storefront-api-types';
+import {MediaFile} from '@shopify/storefront-kit-react';
+import type {ProductConnection} from '@shopify/storefront-kit-react/storefront-api-types';
 
 export function ProductsMediaFiles({products}: {products: ProductConnection}) {
   return (

packages/react/src/ModelViewer.doc.ts

@@ -3,7 +3,7 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
 const data: ReferenceEntityTemplateSchema = {
   name: 'ModelViewer',
   category: 'components',
-  isVisualComponent: true,
+  isVisualComponent: false,
   related: [
     {
       name: 'MediaFile',

packages/react/src/ModelViewer.example.jsx

@@ -1,4 +1,4 @@
-import {ModelViewer} from '@shopify/hydrogen-react';
+import {ModelViewer} from '@shopify/storefront-kit-react';
 
 export default function MyProductModel({products}) {
   const firstMediaElement = products.nodes[0].media.nodes[0];

packages/react/src/ModelViewer.example.tsx

@@ -1,5 +1,5 @@
-import {ModelViewer} from '@shopify/hydrogen-react';
-import type {ProductConnection} from '@shopify/hydrogen-react/storefront-api-types';
+import {ModelViewer} from '@shopify/storefront-kit-react';
+import type {ProductConnection} from '@shopify/storefront-kit-react/storefront-api-types';
 
 export default function MyProductModel({
   products,

packages/react/src/Money.doc.ts

@@ -3,7 +3,7 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
 const data: ReferenceEntityTemplateSchema = {
   name: 'money',
   category: 'components',
-  isVisualComponent: true,
+  isVisualComponent: false,
   related: [
     {
       name: 'useMoney',

packages/react/src/Money.example.jsx

@@ -1,4 +1,4 @@
-import {Money} from '@shopify/hydrogen-react';
+import {Money} from '@shopify/storefront-kit-react';
 
 export default function ProductMoney({product}) {
   const price = product.variants.nodes[0].price;

packages/react/src/Money.example.tsx

@@ -1,5 +1,5 @@
-import {Money} from '@shopify/hydrogen-react';
-import type {Product} from '@shopify/hydrogen-react/storefront-api-types';
+import {Money} from '@shopify/storefront-kit-react';
+import type {Product} from '@shopify/storefront-kit-react/storefront-api-types';
 
 export default function ProductMoney({product}: {product: Product}) {
   const price = product.variants.nodes[0].price;

packages/react/src/ProductPrice.doc.ts

@@ -3,7 +3,7 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
 const data: ReferenceEntityTemplateSchema = {
   name: 'ProductPrice',
   category: 'components',
-  isVisualComponent: true,
+  isVisualComponent: false,
   related: [
     {
       name: 'ProductProvider',

packages/react/src/ProductPrice.example.jsx

@@ -1,4 +1,4 @@
-import {ProductPrice} from '@shopify/hydrogen-react';
+import {ProductPrice} from '@shopify/storefront-kit-react';
 
 export function ProductPricing({product}) {
   return <ProductPrice data={product} priceType="compareAt" valueType="max" />;

packages/react/src/ProductPrice.example.tsx

@@ -1,5 +1,5 @@
-import {ProductPrice} from '@shopify/hydrogen-react';
-import type {Product} from '@shopify/hydrogen-react/storefront-api-types';
+import {ProductPrice} from '@shopify/storefront-kit-react';
+import type {Product} from '@shopify/storefront-kit-react/storefront-api-types';
 
 export function ProductPricing({product}: {product: Product}) {
   return <ProductPrice data={product} priceType="compareAt" valueType="max" />;

packages/react/src/ProductProvider.doc.ts

@@ -3,7 +3,7 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
 const data: ReferenceEntityTemplateSchema = {
   name: 'ProductProvider',
   category: 'components',
-  isVisualComponent: true,
+  isVisualComponent: false,
   related: [
     {
       name: 'useProductOptions',

packages/react/src/ProductProvider.example.jsx

@@ -1,4 +1,4 @@
-import {ProductProvider} from '@shopify/hydrogen-react';
+import {ProductProvider} from '@shopify/storefront-kit-react';
 
 export function Product({product}) {
   return (

packages/react/src/ProductProvider.example.tsx

@@ -1,5 +1,5 @@
-import {ProductProvider} from '@shopify/hydrogen-react';
-import type {Product} from '@shopify/hydrogen-react/storefront-api-types';
+import {ProductProvider} from '@shopify/storefront-kit-react';
+import type {Product} from '@shopify/storefront-kit-react/storefront-api-types';
 
 export function Product({product}: {product: Product}) {
   return (

packages/react/src/ShopPayButton.doc.ts

@@ -3,7 +3,7 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
 const data: ReferenceEntityTemplateSchema = {
   name: 'ShopPayButton',
   category: 'components',
-  isVisualComponent: true,
+  isVisualComponent: false,
   related: [
     {
       name: 'CartShopPayButton',

packages/react/src/ShopPayButton.example.jsx

@@ -1,4 +1,4 @@
-import {ShopPayButton} from '@shopify/hydrogen-react';
+import {ShopPayButton} from '@shopify/storefront-kit-react';
 
 export function AddVariantQuantity1({variantId}) {
   return <ShopPayButton variantIds={[variantId]} />;

packages/react/src/ShopPayButton.example.tsx

@@ -1,4 +1,4 @@
-import {ShopPayButton} from '@shopify/hydrogen-react';
+import {ShopPayButton} from '@shopify/storefront-kit-react';
 
 export function AddVariantQuantity1({variantId}: {variantId: string}) {
   return <ShopPayButton variantIds={[variantId]} />;

packages/react/src/ShopifyProvider.doc.ts

@@ -3,7 +3,7 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
 const data: ReferenceEntityTemplateSchema = {
   name: 'ShopifyProvider',
   category: 'components',
-  isVisualComponent: true,
+  isVisualComponent: false,
   related: [],
   /* Ren note: In this topic, the related items are pages to /custom-storefronts/hydrogen, so they don't have a type. */
 

packages/react/src/ShopifyProvider.example.jsx

@@ -1,4 +1,4 @@
-import {ShopifyProvider} from '@shopify/hydrogen-react';
+import {ShopifyProvider} from '@shopify/storefront-kit-react';
 
 export default function App() {
   return (

packages/react/src/ShopifyProvider.example.tsx

@@ -1,4 +1,4 @@
-import {ShopifyProvider} from '@shopify/hydrogen-react';
+import {ShopifyProvider} from '@shopify/storefront-kit-react';
 
 export default function App() {
   return (

packages/react/src/Video.doc.ts

@@ -3,7 +3,7 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
 const data: ReferenceEntityTemplateSchema = {
   name: 'video',
   category: 'components',
-  isVisualComponent: true,
+  isVisualComponent: false,
   related: [
     {
       name: 'MediaFile',

packages/react/src/Video.example.jsx

@@ -1,4 +1,4 @@
-import {Video} from '@shopify/hydrogen-react';
+import {Video} from '@shopify/storefront-kit-react';
 
 export default function MyProductVideo({products}) {
   const firstMediaElement = products.edges[0].node.media.edges[0].node;

packages/react/src/Video.example.tsx

@@ -1,5 +1,5 @@
-import {Video} from '@shopify/hydrogen-react';
-import type {ProductConnection} from '@shopify/hydrogen-react/storefront-api-types';
+import {Video} from '@shopify/storefront-kit-react';
+import type {ProductConnection} from '@shopify/storefront-kit-react/storefront-api-types';
 
 export default function MyProductVideo({
   products,

packages/react/src/analytics.ts

@@ -30,7 +30,7 @@ import {
  * import {
  *   sendShopifyAnalytics,
  *   AnalyticsEventName,
- * } from '@shopify/hydrogen-react';
+ * } from '@shopify/storefront-kit-react';
  *
  * sendShopifyAnalytics({
  *   eventName: AnalyticsEventName.PAGE_VIEW,

packages/react/src/useCartActions.doc.ts

@@ -3,7 +3,7 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
 const data: ReferenceEntityTemplateSchema = {
   name: 'cart',
   category: 'hooks',
-  isVisualComponent: true,
+  isVisualComponent: false,
   related: [],
   description: '',
   type: 'hook',

packages/react/src/useShopifyCookies.tsx

@@ -13,7 +13,7 @@ const shortTermLength = 60 * 30; // 30 mins
  * @param domain - The domain scope of the cookie
  * @example
  * ```tsx
- * import {useShopifyCookies} from '@shopify/hydrogen-react';
+ * import {useShopifyCookies} from '@shopify/storefront-kit-react';
  *
  * useShopifyCookies(true, 'my-shop.com')
  * ```

packages/react/tsconfig.examples.json

@@ -6,8 +6,8 @@
     "jsx": "react-jsx",
     "baseUrl": "src",
     "paths": {
-      "@shopify/hydrogen-react": ["index.ts"],
-      "@shopify/hydrogen-react/storefront-api-types": [
+      "@shopify/storefront-kit-react": ["index.ts"],
+      "@shopify/storefront-kit-react/storefront-api-types": [
         "storefront-api-types.d.ts"
       ]
     }