feat: groundwork for new elasticpath provider

packages/react-shopper-hooks/package.json

@@ -21,6 +21,7 @@
     }
   },
   "devDependencies": {
+    "@tanstack/react-query": "^5.0.5",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "@vitejs/plugin-react": "^2.2.0",
@@ -29,12 +30,14 @@
     "typescript": "^4.8.4",
     "vite": "^3.2.3",
     "vite-plugin-dts": "^1.7.0",
-    "vitest": "^0.31.1"
+    "vitest": "^0.31.1",
+    "@moltin/sdk": "^25.0.2"
   },
   "peerDependencies": {
     "@moltin/sdk": "^25.0.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "@tanstack/react-query": "^5.0.5",
+    "react": "^16.8 || ^17.0 || ^18.0",
+    "react-dom": "^16.8 || ^17.0 || ^18.0"
   },
   "publishConfig": {
     "access": "public"

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

@@ -0,0 +1,66 @@
+import { gateway, Moltin as ElasticPath } from "@moltin/sdk"
+import {
+  QueryClientProvider,
+  QueryClientProviderProps,
+} from "@tanstack/react-query"
+import React, { ReactElement } from "react"
+
+interface ElasticPathContextState {
+  client: ElasticPath
+}
+
+const ElasticPathContext = React.createContext<ElasticPathContextState | null>(
+  null,
+)
+
+export const useElasticPath = () => {
+  const context = React.useContext(ElasticPathContext)
+  if (!context) {
+    throw new Error("useElasticPath must be used within a ElasticPathProvider")
+  }
+  return context
+}
+
+export type ElasticPathProviderProps = {
+  queryClientProviderProps: QueryClientProviderProps
+  children: React.ReactNode
+}
+
+export type ElasticPathProviderPropsWithClient = ElasticPathProviderProps & {
+  clientId: string
+  host?: string
+}
+
+export type ElasticPathProviderPropsCustom = ElasticPathProviderProps & {
+  client: ElasticPath
+}
+
+export function ElasticPathProvider(
+  props: ElasticPathProviderPropsWithClient,
+): ReactElement
+export function ElasticPathProvider(
+  props: ElasticPathProviderPropsCustom,
+): ReactElement
+export function ElasticPathProvider(
+  props: ElasticPathProviderPropsWithClient | ElasticPathProviderPropsCustom,
+): ReactElement {
+  const client: ElasticPath =
+    "client" in props
+      ? props.client
+      : gateway({
+          client_id: props.clientId,
+          host: props.host,
+        })
+
+  return (
+    <QueryClientProvider {...props.queryClientProviderProps}>
+      <ElasticPathContext.Provider
+        value={{
+          client,
+        }}
+      >
+        {props.children}
+      </ElasticPathContext.Provider>
+    </QueryClientProvider>
+  )
+}

packages/react-shopper-hooks/src/context/index.ts

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