feat: storybook and msw for new shopper hooks

packages/react-shopper-hooks/.storybook/elasticpath-context.tsx

@@ -0,0 +1,26 @@
+import { QueryClient } from "@tanstack/react-query"
+import React from "react"
+import { ElasticPathProvider, ElasticPathProviderProps } from "../src"
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      staleTime: Infinity,
+      retry: 1,
+    },
+  },
+})
+
+export default function DefaultElasticPathProvider(
+  props: Omit<ElasticPathProviderProps, "queryClientProviderProps">,
+) {
+  return (
+    <ElasticPathProvider
+      {...props}
+      clientId="123"
+      host="shopper-mock.com"
+      queryClientProviderProps={{ client: queryClient }}
+    />
+  )
+}

packages/react-shopper-hooks/.storybook/main.ts

@@ -0,0 +1,33 @@
+import type { StorybookConfig } from "@storybook/react-vite"
+
+import { join, dirname } from "path"
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, "package.json")))
+}
+const config: StorybookConfig = {
+  stories: [
+    "../stories/**/*.mdx",
+    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+  ],
+  addons: [
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@storybook/addon-interactions"),
+  ],
+  framework: {
+    name: getAbsolutePath("@storybook/react-vite"),
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+  typescript: {
+    check: true,
+  },
+}
+export default config

packages/react-shopper-hooks/.storybook/preview.tsx

@@ -0,0 +1,33 @@
+import type { Preview } from "@storybook/react"
+import DefaultElasticPathProvider from "./elasticpath-context"
+import React from "react"
+import { initialize, mswDecorator, mswLoader } from "msw-storybook-addon"
+import { shopperHandlers } from "../mocks/handlers"
+
+initialize()
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    msw: {
+      handlers: [...shopperHandlers],
+    },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+  loaders: [mswLoader],
+  decorators: [
+    mswDecorator,
+    (Story) => (
+      <DefaultElasticPathProvider>
+        <Story />
+      </DefaultElasticPathProvider>
+    ),
+  ],
+}
+
+export default preview

packages/react-shopper-hooks/mocks/data/fixtures.json

@@ -0,0 +1,68 @@
+{
+  "resources": {
+    "cart": {
+      "data": {
+        "id": "655357c4-99b8-466b-96d4-28fc36b3e25c",
+        "name": "Cart",
+        "description": "",
+        "type": "cart",
+        "discount_settings": {
+          "custom_discounts_enabled": false
+        },
+        "links": {
+          "self": "https://api.moltin.com/v2/carts/655357c4-99b8-466b-96d4-28fc36b3e25c"
+        },
+        "meta": {
+          "display_price": {
+            "with_tax": {
+              "amount": 1600,
+              "currency": "USD",
+              "formatted": "$16.00"
+            },
+            "without_tax": {
+              "amount": 1600,
+              "currency": "USD",
+              "formatted": "$16.00"
+            },
+            "tax": {
+              "amount": 0,
+              "currency": "USD",
+              "formatted": "$0.00"
+            },
+            "discount": {
+              "amount": 0,
+              "currency": "USD",
+              "formatted": "$0.00"
+            },
+            "without_discount": {
+              "amount": 1600,
+              "currency": "USD",
+              "formatted": "$16.00"
+            },
+            "shipping": {
+              "amount": 0,
+              "currency": "USD",
+              "formatted": "$0.00"
+            }
+          },
+          "timestamps": {
+            "created_at": "2023-10-26T10:51:27Z",
+            "updated_at": "2023-10-26T11:01:16Z",
+            "expires_at": "2023-11-02T11:01:16Z"
+          }
+        },
+        "relationships": {
+          "items": {
+            "data": [
+              {
+                "type": "cart_item",
+                "id": "2eda9f25-903e-4c22-8c42-0c04fbdf94ef"
+              }
+            ]
+          },
+          "customers": {}
+        }
+      }
+    }
+  }
+}

packages/react-shopper-hooks/mocks/data/index.ts

@@ -0,0 +1,27 @@
+import data from "./fixtures.json"
+
+const resources = data["resources"]
+
+type Resources = typeof resources
+
+type ResourcesWithKey<Entity extends string, T> = {
+  [K in keyof T]: { [_ in Entity]: K } & T[K]
+}
+
+type KeyedResources = ResourcesWithKey<"entity", Resources>
+
+export const fixtures = {
+  get<Entity extends keyof Resources>(
+    entity: Entity,
+  ): Omit<KeyedResources[Entity], "entity"> {
+    return resources[entity as string]
+  },
+  list<Entity extends keyof Resources>(
+    entity: Entity,
+    number = 2,
+  ): Omit<KeyedResources[Entity], "entity">[] {
+    return Array(number)
+      .fill(null)
+      .map((_) => fixtures.get(entity))
+  },
+} as const

packages/react-shopper-hooks/mocks/handlers/index.ts

@@ -0,0 +1 @@
+export * from "./shopper"

packages/react-shopper-hooks/mocks/handlers/shopper.ts

@@ -0,0 +1,21 @@
+import { rest } from "msw"
+import { fixtures } from "../data"
+// import { fixtures } from "../data"
+
+export const shopperHandlers = [
+  rest.post("https://shopper-mock.com/oauth/access_token", (req, res, ctx) => {
+    return res(
+      ctx.status(200),
+      ctx.json({
+        identifier: "implicit",
+        token_type: "Bearer",
+        expires_in: 3600,
+        expires: 9999999999,
+        access_token: "mock-access-token-123",
+      }),
+    )
+  }),
+  rest.get("https://shopper-mock.com/v2/carts/:cartId", (req, res, ctx) => {
+    return res(ctx.status(200), ctx.json(fixtures.get("cart")))
+  }),
+]

packages/react-shopper-hooks/mocks/server.ts

@@ -0,0 +1,4 @@
+import { setupServer } from "msw/node"
+import { shopperHandlers } from "./handlers"
+
+export const server = setupServer(...shopperHandlers)

packages/react-shopper-hooks/package.json

@@ -12,7 +12,9 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "test": "vitest --run"
+    "test": "vitest --run",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "exports": {
     ".": {
@@ -21,17 +23,29 @@
     }
   },
   "devDependencies": {
+    "@moltin/sdk": "^25.0.2",
+    "@storybook/addon-essentials": "^7.5.1",
+    "@storybook/addon-interactions": "^7.5.1",
+    "@storybook/addon-links": "^7.5.1",
+    "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/blocks": "^7.5.1",
+    "@storybook/react": "^7.5.1",
+    "@storybook/react-vite": "^7.5.1",
+    "@storybook/testing-library": "^0.2.2",
     "@tanstack/react-query": "^5.0.5",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "@vitejs/plugin-react": "^2.2.0",
+    "msw": "^0.31.0",
+    "msw-storybook-addon": "1.9.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-json-view": "^1.21.3",
+    "storybook": "^7.5.1",
     "typescript": "^4.8.4",
     "vite": "^3.2.3",
     "vite-plugin-dts": "^1.7.0",
-    "vitest": "^0.31.1",
-    "@moltin/sdk": "^25.0.2"
+    "vitest": "^0.31.1"
   },
   "peerDependencies": {
     "@moltin/sdk": "^25.0.2",
@@ -45,5 +59,8 @@
   "dependencies": {
     "@elasticpath/shopper-common": "^0.1.1",
     "rxjs": "7.5.7"
+  },
+  "msw": {
+    "workerDirectory": "public"
   }
-}
+}