Working view of a LocalProvider

framework/local/api/operations/get-all-product-paths.ts

@@ -1,3 +1,5 @@
+import data from '../../data.json'
+
 export type GetAllProductPathsResult = {
   products: Array<{ path: string }>
 }
@@ -5,7 +7,7 @@ export type GetAllProductPathsResult = {
 export default function getAllProductPathsOperation() {
   function getAllProductPaths(): Promise<GetAllProductPathsResult> {
     return Promise.resolve({
-      products: [].map((p) => ({ path: `/hello` })),
+      products: data.products.map(({ path }) => ({ path })),
     })
   }
 

framework/local/api/operations/get-all-products.ts

@@ -17,7 +17,6 @@ export default function getAllProductsOperation({
     config?: Partial<LocalConfig>
     preview?: boolean
   } = {}): Promise<{ products: Product[] | any[] }> {
-    console.log(data.products[0])
     return Promise.resolve({
       products: data.products,
     })

framework/local/api/operations/get-product.ts

@@ -1,8 +1,22 @@
+import type { LocalConfig } from '../index'
 import { Product } from '@commerce/types/product'
+import data from '../../data.json'
 
 export default function getProductOperation() {
-  async function getProduct(): Promise<Product | {} | any> {
+  async function getProduct({
-    return {}
+    query = '',
+    variables,
+    config,
+  }: {
+    query?: string
+    variables?: T['variables']
+    config?: Partial<LocalConfig>
+    preview?: boolean
+  } = {}): Promise<Product | {} | any> {
+    return Promise.resolve({
+      product: data.products[0],
+    })
   }
+
   return getProduct
 }

framework/local/data.json

@@ -7,52 +7,235 @@
       "path": "/new-short-sleeve-t-shirt",
       "slug": "new-short-sleeve-t-shirt",
       "price": { "value": 25, "currencyCode": "USD" },
+      "descriptionHtml": "<p><span>Show off your love for Next.js and Vercel with this unique,&nbsp;</span><strong>limited edition</strong><span>&nbsp;t-shirt. This design is part of a limited run, numbered drop at the June 2021 Next.js Conf. It features a unique, handcrafted triangle design. Get it while supplies last – only 200 of these shirts will be made!&nbsp;</span><strong>All proceeds will be donated to charity.</strong></p>",
       "images": [
         {
           "url": "/assets/drop-shirt-0.png",
           "altText": "Shirt",
           "width": 1000,
           "height": 1000
-        }
-      ],
-      "variants": [],
-      "options": []
         },
         {
-      "id": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzU0NDczMjUwMjQ0MjA=",
+          "url": "/assets/drop-shirt-1.png",
-      "name": "New Short Sleeve T-Shirt",
-      "vendor": "Next.js",
-      "path": "/new-short-sleeve-t-shirt",
-      "slug": "new-short-sleeve-t-shirt",
-      "price": { "value": 25, "currencyCode": "USD" },
-      "images": [
-        {
-          "url": "/assets/drop-shirt-0.png",
           "altText": "Shirt",
           "width": 1000,
           "height": 1000
-        }
-      ],
-      "variants": [],
-      "options": []
         },
         {
-      "id": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzU0NDczMjUwMjQ0MjA=",
+          "url": "/assets/drop-shirt-2.png",
-      "name": "New Short Sleeve T-Shirt",
+          "altText": "Shirt",
-      "vendor": "Next.js",
+          "width": 1000,
-      "path": "/new-short-sleeve-t-shirt",
+          "height": 1000
-      "slug": "new-short-sleeve-t-shirt",
+        },
-      "price": { "value": 25, "currencyCode": "USD" },
-      "images": [
         {
-          "url": "/assets/drop-shirt-0.png",
+          "url": "/assets/drop-shirt-3.png",
           "altText": "Shirt",
           "width": 1000,
           "height": 1000
         }
       ],
-      "variants": [],
+      "variants": [
-      "options": []
+        {
+          "id": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzU0NDczMjUwMjQ0MjAss=",
+          "options": [
+            {
+              "__typename": "MultipleChoiceOption",
+              "id": "asd",
+              "displayName": "Size",
+              "values": [
+                {
+                  "label": "XL"
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      "options": [
+        {
+          "id": "option-color",
+          "displayName": "Color",
+          "values": [
+            {
+              "label": "color",
+              "hexColors": ["#222"]
+            }
+          ]
+        },
+        {
+          "id": "option-size",
+          "displayName": "Size",
+          "values": [
+            {
+              "label": "S"
+            },
+            {
+              "label": "M"
+            },
+            {
+              "label": "L"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzU0NDczMjUwMjQ0MjA=",
+      "name": "New Short Sleeve T-Shirt",
+      "vendor": "Next.js",
+      "path": "/new-short-sleeve-t-shirt",
+      "slug": "new-short-sleeve-t-shirt",
+      "price": { "value": 25, "currencyCode": "USD" },
+      "descriptionHtml": "<p><span>Show off your love for Next.js and Vercel with this unique,&nbsp;</span><strong>limited edition</strong><span>&nbsp;t-shirt. This design is part of a limited run, numbered drop at the June 2021 Next.js Conf. It features a unique, handcrafted triangle design. Get it while supplies last – only 200 of these shirts will be made!&nbsp;</span><strong>All proceeds will be donated to charity.</strong></p>",
+      "images": [
+        {
+          "url": "/assets/drop-shirt-0.png",
+          "altText": "Shirt",
+          "width": 1000,
+          "height": 1000
+        },
+        {
+          "url": "/assets/drop-shirt-1.png",
+          "altText": "Shirt",
+          "width": 1000,
+          "height": 1000
+        },
+        {
+          "url": "/assets/drop-shirt-2.png",
+          "altText": "Shirt",
+          "width": 1000,
+          "height": 1000
+        },
+        {
+          "url": "/assets/drop-shirt-3.png",
+          "altText": "Shirt",
+          "width": 1000,
+          "height": 1000
+        }
+      ],
+      "variants": [
+        {
+          "id": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzU0NDczMjUwMjQ0MjAss=",
+          "options": [
+            {
+              "__typename": "MultipleChoiceOption",
+              "id": "asd",
+              "displayName": "Size",
+              "values": [
+                {
+                  "label": "XL"
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      "options": [
+        {
+          "id": "option-color",
+          "displayName": "Color",
+          "values": [
+            {
+              "label": "color",
+              "hexColors": ["#222"]
+            }
+          ]
+        },
+        {
+          "id": "option-size",
+          "displayName": "Size",
+          "values": [
+            {
+              "label": "S"
+            },
+            {
+              "label": "M"
+            },
+            {
+              "label": "L"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzU0NDczMjUwMjQ0MjA=",
+      "name": "New Short Sleeve T-Shirt",
+      "vendor": "Next.js",
+      "path": "/new-short-sleeve-t-shirt",
+      "slug": "new-short-sleeve-t-shirt",
+      "price": { "value": 25, "currencyCode": "USD" },
+      "descriptionHtml": "<p><span>Show off your love for Next.js and Vercel with this unique,&nbsp;</span><strong>limited edition</strong><span>&nbsp;t-shirt. This design is part of a limited run, numbered drop at the June 2021 Next.js Conf. It features a unique, handcrafted triangle design. Get it while supplies last – only 200 of these shirts will be made!&nbsp;</span><strong>All proceeds will be donated to charity.</strong></p>",
+      "images": [
+        {
+          "url": "/assets/drop-shirt-0.png",
+          "altText": "Shirt",
+          "width": 1000,
+          "height": 1000
+        },
+        {
+          "url": "/assets/drop-shirt-1.png",
+          "altText": "Shirt",
+          "width": 1000,
+          "height": 1000
+        },
+        {
+          "url": "/assets/drop-shirt-2.png",
+          "altText": "Shirt",
+          "width": 1000,
+          "height": 1000
+        },
+        {
+          "url": "/assets/drop-shirt-3.png",
+          "altText": "Shirt",
+          "width": 1000,
+          "height": 1000
+        }
+      ],
+      "variants": [
+        {
+          "id": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzU0NDczMjUwMjQ0MjAss=",
+          "options": [
+            {
+              "__typename": "MultipleChoiceOption",
+              "id": "asd",
+              "displayName": "Size",
+              "values": [
+                {
+                  "label": "XL"
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      "options": [
+        {
+          "id": "option-color",
+          "displayName": "Color",
+          "values": [
+            {
+              "label": "color",
+              "hexColors": ["#222"]
+            }
+          ]
+        },
+        {
+          "id": "option-size",
+          "displayName": "Size",
+          "values": [
+            {
+              "label": "S"
+            },
+            {
+              "label": "M"
+            },
+            {
+              "label": "L"
+            }
+          ]
+        }
+      ]
     }
   ]
 }

framework/local/product/use-search.tsx

@@ -8,6 +8,10 @@ export const handler: SWRHook<any> = {
   },
   async fetcher({ input, options, fetch }) {},
   useHook: () => () => {
-    return {}
+    return {
+      data: {
+        products: [],
+      },
+    }
   },
 }