Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: react query shopper hooks #120

Closed
wants to merge 5 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 26 additions & 0 deletions packages/react-shopper-hooks/.storybook/elasticpath-context.tsx
Original file line number Diff line number Diff line change
@@ -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 }}
/>
)
}
33 changes: 33 additions & 0 deletions packages/react-shopper-hooks/.storybook/main.ts
Original file line number Diff line number Diff line change
@@ -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
33 changes: 33 additions & 0 deletions packages/react-shopper-hooks/.storybook/preview.tsx
Original file line number Diff line number Diff line change
@@ -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
147 changes: 147 additions & 0 deletions packages/react-shopper-hooks/mocks/data/fixtures.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,147 @@
{
"resources": {
"cart": {
"data": [
{
"id": "2eda9f25-903e-4c22-8c42-0c04fbdf94ef",
"type": "cart_item",
"product_id": "ec02203d-34a3-43d6-8530-c98ebce55e67",
"name": "Simple T-Shirt - Blue",
"description": "The simple t-shirt is a light, breathable, and easy to wear t-shirt. It is made of a soft cotton blend and has a ribbed crew neck. The simple t-shirt is perfect for layering or wearing alone. It can be worn with any bottoms and can be easily dressed up or down...",
"sku": "TSHIRT-01BlueSMLong",
"slug": "simple-t-shirtBlueSMLong",
"image": {
"mime_type": "image/jpeg",
"file_name": "womens-tshirts.jpeg",
"href": "https://files-eu.epusercontent.com/856eeae6-45ea-453f-ab75-e53e84bf3c61/1fa7be8b-bdcf-43a0-8748-33e549d2c03e.jpeg"
},
"quantity": 1,
"manage_stock": false,
"unit_price": {
"amount": 1600,
"currency": "USD",
"includes_tax": false
},
"value": {
"amount": 1600,
"currency": "USD",
"includes_tax": false
},
"links": {
"product": "https://api.moltin.com/v2/products/ec02203d-34a3-43d6-8530-c98ebce55e67"
},
"meta": {
"display_price": {
"with_tax": {
"unit": {
"amount": 1600,
"currency": "USD",
"formatted": "$16.00"
},
"value": {
"amount": 1600,
"currency": "USD",
"formatted": "$16.00"
}
},
"without_tax": {
"unit": {
"amount": 1600,
"currency": "USD",
"formatted": "$16.00"
},
"value": {
"amount": 1600,
"currency": "USD",
"formatted": "$16.00"
}
},
"tax": {
"unit": {
"amount": 0,
"currency": "USD",
"formatted": "$0.00"
},
"value": {
"amount": 0,
"currency": "USD",
"formatted": "$0.00"
}
},
"discount": {
"unit": {
"amount": 0,
"currency": "USD",
"formatted": "$0.00"
},
"value": {
"amount": 0,
"currency": "USD",
"formatted": "$0.00"
}
},
"without_discount": {
"unit": {
"amount": 1600,
"currency": "USD",
"formatted": "$16.00"
},
"value": {
"amount": 1600,
"currency": "USD",
"formatted": "$16.00"
}
}
},
"timestamps": {
"created_at": "2023-10-26T11:01:16Z",
"updated_at": "2023-10-26T11:01:16Z"
}
},
"catalog_id": "e4c2d061-3712-408d-bc2c-cfebd0bd104f",
"catalog_source": "pim"
}
],
"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"
}
},
"included": {}
}
}
}
27 changes: 27 additions & 0 deletions packages/react-shopper-hooks/mocks/data/index.ts
Original file line number Diff line number Diff line change
@@ -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
1 change: 1 addition & 0 deletions packages/react-shopper-hooks/mocks/handlers/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from "./shopper"
23 changes: 23 additions & 0 deletions packages/react-shopper-hooks/mocks/handlers/shopper.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { rest } from "msw"
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/items",
(req, res, ctx) => {
return res(ctx.status(200), ctx.json(fixtures.get("cart")))
},
),
]
4 changes: 4 additions & 0 deletions packages/react-shopper-hooks/mocks/server.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import { setupServer } from "msw/node"
import { shopperHandlers } from "./handlers"

export const server = setupServer(...shopperHandlers)
28 changes: 24 additions & 4 deletions packages/react-shopper-hooks/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
".": {
Expand All @@ -21,26 +23,44 @@
}
},
"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.33",
"@types/react-dom": "^18.2.14",
"@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"
},
"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"
},
"dependencies": {
"@elasticpath/shopper-common": "^0.1.3",
"rxjs": "7.5.7"
},
"msw": {
"workerDirectory": "public"
}
}
}
Loading
Loading