feat: add medusa-react (#913)
This commit is contained in:
Zakaria El Asri
@@ -0,0 +1,50 @@
|
||||
import { Meta } from "@storybook/react"
|
||||
import React from "react"
|
||||
import { useGetCart } from "../src"
|
||||
import Layout from "./components/Layout"
|
||||
|
||||
const Cart = ({ showHookData, id }) => {
|
||||
const data = useGetCart(id)
|
||||
return (
|
||||
<Layout showHookData={showHookData} data={data}>
|
||||
<h3>Cart: {id}</h3>
|
||||
<div>
|
||||
{data?.cart?.email} - {data?.cart?.total}
|
||||
</div>
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
|
||||
const meta: Meta = {
|
||||
title: "Carts",
|
||||
argTypes: {
|
||||
showHookData: {
|
||||
name: "Show hook data",
|
||||
description:
|
||||
"Whether or not story should display JSON of data returned from hook",
|
||||
control: {
|
||||
type: "boolean",
|
||||
},
|
||||
defaultValue: true,
|
||||
},
|
||||
},
|
||||
parameters: {
|
||||
controls: { expanded: true },
|
||||
},
|
||||
}
|
||||
|
||||
export default meta
|
||||
|
||||
export const GetOne = (args: { showHookData: boolean; id: string }) => (
|
||||
<Cart {...args} />
|
||||
)
|
||||
|
||||
GetOne.argTypes = {
|
||||
id: {
|
||||
control: {
|
||||
type: "text",
|
||||
},
|
||||
name: "cart id",
|
||||
defaultValue: "cart_...",
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
import { Meta } from "@storybook/react"
|
||||
import React from "react"
|
||||
import { useCollection, useCollections } from "../src"
|
||||
import Layout from "./components/Layout"
|
||||
|
||||
const Collections = ({ showHookData, limit, offset }) => {
|
||||
const data = useCollections({ limit, offset })
|
||||
return (
|
||||
<Layout showHookData={showHookData} data={data}>
|
||||
<h3>Collections</h3>
|
||||
<ul>
|
||||
{data?.collections?.map((Collection) => (
|
||||
<li key={Collection.id}>{Collection.title}</li>
|
||||
))}
|
||||
</ul>
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
|
||||
const Collection = ({ showHookData, id }) => {
|
||||
const data = useCollection(id)
|
||||
return (
|
||||
<Layout showHookData={showHookData} data={data}>
|
||||
<h3>Collection: {id}</h3>
|
||||
<div>
|
||||
{data?.collection?.title} - {data?.collection?.handle}
|
||||
</div>
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
|
||||
const meta: Meta = {
|
||||
title: "Collections",
|
||||
argTypes: {
|
||||
showHookData: {
|
||||
name: "Show hook data",
|
||||
description:
|
||||
"Whether or not story should display JSON of data returned from hook",
|
||||
control: {
|
||||
type: "boolean",
|
||||
},
|
||||
defaultValue: true,
|
||||
},
|
||||
},
|
||||
parameters: {
|
||||
controls: { expanded: true },
|
||||
},
|
||||
}
|
||||
|
||||
export default meta
|
||||
|
||||
export const List = (args: {
|
||||
limit: number
|
||||
offset: number
|
||||
showHookData: boolean
|
||||
}) => <Collections {...args} />
|
||||
|
||||
List.argTypes = {
|
||||
limit: {
|
||||
control: {
|
||||
type: "number",
|
||||
},
|
||||
name: "limit",
|
||||
defaultValue: 5,
|
||||
},
|
||||
offset: {
|
||||
control: {
|
||||
type: "number",
|
||||
},
|
||||
defaultValue: 0,
|
||||
},
|
||||
}
|
||||
|
||||
export const GetOne = (args: { showHookData: boolean; id: string }) => (
|
||||
<Collection {...args} />
|
||||
)
|
||||
|
||||
GetOne.argTypes = {
|
||||
id: {
|
||||
control: {
|
||||
type: "text",
|
||||
},
|
||||
name: "Collection id",
|
||||
defaultValue: "pcol_",
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
import { Meta } from "@storybook/react"
|
||||
import React from "react"
|
||||
import { useMeCustomer, useCustomerOrders } from "../src"
|
||||
import Layout from "./components/Layout"
|
||||
|
||||
const CustomerOrders = ({ showHookData, id }) => {
|
||||
const data = useCustomerOrders(id)
|
||||
return (
|
||||
<Layout showHookData={showHookData} data={data}>
|
||||
<h3>Customer Orders</h3>
|
||||
<ul>
|
||||
{data?.orders?.map((order) => (
|
||||
<li key={order.id}>price: {order.total}</li>
|
||||
))}
|
||||
</ul>
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
|
||||
const Customer = ({ showHookData }) => {
|
||||
const data = useMeCustomer()
|
||||
return (
|
||||
<Layout showHookData={showHookData} data={data}>
|
||||
<h3>Customer: </h3>
|
||||
<div>
|
||||
{data?.customer?.first_name} {data?.customer?.last_name} -{" "}
|
||||
{data?.customer?.email}
|
||||
</div>
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
|
||||
const meta: Meta = {
|
||||
title: "Customers",
|
||||
argTypes: {
|
||||
showHookData: {
|
||||
name: "Show hook data",
|
||||
description:
|
||||
"Whether or not story should display JSON of data returned from hook",
|
||||
control: {
|
||||
type: "boolean",
|
||||
},
|
||||
defaultValue: true,
|
||||
},
|
||||
},
|
||||
parameters: {
|
||||
controls: { expanded: true },
|
||||
},
|
||||
}
|
||||
|
||||
export default meta
|
||||
|
||||
export const ListOrders = (args: { showHookData: boolean; id: string }) => (
|
||||
<CustomerOrders {...args} />
|
||||
)
|
||||
|
||||
ListOrders.argTypes = {
|
||||
id: {
|
||||
control: {
|
||||
type: "text",
|
||||
},
|
||||
name: "customer id",
|
||||
defaultValue: "reg_",
|
||||
},
|
||||
}
|
||||
|
||||
export const GetOne = (args: { showHookData: boolean }) => (
|
||||
<Customer {...args} />
|
||||
)
|
||||
@@ -0,0 +1,76 @@
|
||||
import { Meta } from "@storybook/react"
|
||||
import React from "react"
|
||||
import { useCartOrder, useOrder, useProduct, useProducts } from "../src"
|
||||
import Layout from "./components/Layout"
|
||||
|
||||
const CartOrderComponent = ({ showHookData, cartId }) => {
|
||||
const data = useCartOrder(cartId)
|
||||
return (
|
||||
<Layout showHookData={showHookData} data={data}>
|
||||
<h3>Order from cart with id: {cartId}</h3>
|
||||
<div>
|
||||
{data?.order?.email} - {data?.order?.currency_code}
|
||||
</div>
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
|
||||
const Order = ({ showHookData, id }) => {
|
||||
const data = useOrder(id)
|
||||
return (
|
||||
<Layout showHookData={showHookData} data={data}>
|
||||
<h3>Order: {id}</h3>
|
||||
<div>
|
||||
{data?.order?.email} - {data?.order?.currency_code}
|
||||
</div>
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
|
||||
const meta: Meta = {
|
||||
title: "Orders",
|
||||
argTypes: {
|
||||
showHookData: {
|
||||
name: "Show hook data",
|
||||
description:
|
||||
"Whether or not story should display JSON of data returned from hook",
|
||||
control: {
|
||||
type: "boolean",
|
||||
},
|
||||
defaultValue: true,
|
||||
},
|
||||
},
|
||||
parameters: {
|
||||
controls: { expanded: true },
|
||||
},
|
||||
}
|
||||
|
||||
export default meta
|
||||
|
||||
export const CartOrder = (args: { cartId: string; showHookData: boolean }) => (
|
||||
<CartOrderComponent {...args} />
|
||||
)
|
||||
|
||||
CartOrder.argTypes = {
|
||||
cartId: {
|
||||
control: {
|
||||
type: "text",
|
||||
},
|
||||
name: "cart id",
|
||||
defaultValue: "cart_...",
|
||||
},
|
||||
}
|
||||
|
||||
export const GetOne = (args: { showHookData: boolean; id: string }) => (
|
||||
<Order {...args} />
|
||||
)
|
||||
|
||||
GetOne.argTypes = {
|
||||
id: {
|
||||
control: {
|
||||
type: "text",
|
||||
},
|
||||
name: "order id",
|
||||
defaultValue: "order_...",
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
import { Meta } from "@storybook/react"
|
||||
import React from "react"
|
||||
import { useProduct, useProducts } from "../src"
|
||||
import Layout from "./components/Layout"
|
||||
|
||||
const Products = ({ showHookData, limit, offset }) => {
|
||||
const data = useProducts({ limit, offset })
|
||||
return (
|
||||
<Layout showHookData={showHookData} data={data}>
|
||||
<h3>Products</h3>
|
||||
<ul>
|
||||
{data?.products?.map((product) => (
|
||||
<li key={product.id}>{product.title}</li>
|
||||
))}
|
||||
</ul>
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
|
||||
const Product = ({ showHookData, id }) => {
|
||||
const data = useProduct(id)
|
||||
return (
|
||||
<Layout showHookData={showHookData} data={data}>
|
||||
<h3>Product: {id}</h3>
|
||||
<div>
|
||||
{data?.product?.title} - {data?.product?.handle}
|
||||
</div>
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
|
||||
const meta: Meta = {
|
||||
title: "Products",
|
||||
argTypes: {
|
||||
showHookData: {
|
||||
name: "Show hook data",
|
||||
description:
|
||||
"Whether or not story should display JSON of data returned from hook",
|
||||
control: {
|
||||
type: "boolean",
|
||||
},
|
||||
defaultValue: true,
|
||||
},
|
||||
},
|
||||
parameters: {
|
||||
controls: { expanded: true },
|
||||
},
|
||||
}
|
||||
|
||||
export default meta
|
||||
|
||||
export const List = (args: {
|
||||
limit: number
|
||||
offset: number
|
||||
showHookData: boolean
|
||||
}) => <Products {...args} />
|
||||
|
||||
List.argTypes = {
|
||||
limit: {
|
||||
control: {
|
||||
type: "number",
|
||||
},
|
||||
name: "limit",
|
||||
defaultValue: 5,
|
||||
},
|
||||
offset: {
|
||||
control: {
|
||||
type: "number",
|
||||
},
|
||||
defaultValue: 0,
|
||||
},
|
||||
}
|
||||
|
||||
export const GetOne = (args: { showHookData: boolean; id: string }) => (
|
||||
<Product {...args} />
|
||||
)
|
||||
|
||||
GetOne.argTypes = {
|
||||
id: {
|
||||
control: {
|
||||
type: "text",
|
||||
},
|
||||
name: "product id",
|
||||
defaultValue: "prod_",
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
import { Meta } from "@storybook/react"
|
||||
import React from "react"
|
||||
import { useRegion, useRegions } from "../src"
|
||||
import Layout from "./components/Layout"
|
||||
|
||||
const Regions = ({ showHookData }) => {
|
||||
const data = useRegions()
|
||||
return (
|
||||
<Layout showHookData={showHookData} data={data}>
|
||||
<h3>Regions</h3>
|
||||
<ul>
|
||||
{data?.regions?.map((region) => (
|
||||
<li key={region.id}>{region.name}</li>
|
||||
))}
|
||||
</ul>
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
|
||||
const Region = ({ showHookData, id }) => {
|
||||
const data = useRegion(id)
|
||||
return (
|
||||
<Layout showHookData={showHookData} data={data}>
|
||||
<h3>Region: {id}</h3>
|
||||
<div>
|
||||
{data?.region?.name} - {data?.region?.currency_code}
|
||||
</div>
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
|
||||
const meta: Meta = {
|
||||
title: "Regions",
|
||||
argTypes: {
|
||||
showHookData: {
|
||||
name: "Show hook data",
|
||||
description:
|
||||
"Whether or not story should display JSON of data returned from hook",
|
||||
control: {
|
||||
type: "boolean",
|
||||
},
|
||||
defaultValue: true,
|
||||
},
|
||||
},
|
||||
parameters: {
|
||||
controls: { expanded: true },
|
||||
},
|
||||
}
|
||||
|
||||
export default meta
|
||||
|
||||
export const List = (args: { showHookData: boolean }) => <Regions {...args} />
|
||||
|
||||
export const GetOne = (args: { showHookData: boolean; id: string }) => (
|
||||
<Region {...args} />
|
||||
)
|
||||
|
||||
GetOne.argTypes = {
|
||||
id: {
|
||||
control: {
|
||||
type: "text",
|
||||
},
|
||||
name: "region id",
|
||||
defaultValue: "reg_",
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
import { Meta } from "@storybook/react"
|
||||
import React from "react"
|
||||
import { useReturnReason, useReturnReasons } from "../src"
|
||||
import Layout from "./components/Layout"
|
||||
|
||||
const ReturnReasons = ({ showHookData }) => {
|
||||
const data = useReturnReasons()
|
||||
return (
|
||||
<Layout showHookData={showHookData} data={data}>
|
||||
<h3>Return Reasons</h3>
|
||||
<ul>
|
||||
{data?.return_reasons?.map((rr) => (
|
||||
<li key={rr.id}>
|
||||
{rr.label} - {rr.value}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
|
||||
const ReturnReason = ({ showHookData, id }) => {
|
||||
const data = useReturnReason(id)
|
||||
return (
|
||||
<Layout showHookData={showHookData} data={data}>
|
||||
<h3>Return Reason: {id}</h3>
|
||||
<div>
|
||||
{data?.return_reason?.label} - {data?.return_reason?.value}
|
||||
</div>
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
|
||||
const meta: Meta = {
|
||||
title: "Return Reasons",
|
||||
argTypes: {
|
||||
showHookData: {
|
||||
name: "Show hook data",
|
||||
description:
|
||||
"Whether or not story should display JSON of data returned from hook",
|
||||
control: {
|
||||
type: "boolean",
|
||||
},
|
||||
defaultValue: true,
|
||||
},
|
||||
},
|
||||
parameters: {
|
||||
controls: { expanded: true },
|
||||
},
|
||||
}
|
||||
|
||||
export default meta
|
||||
|
||||
export const List = (args: { showHookData: boolean }) => (
|
||||
<ReturnReasons {...args} />
|
||||
)
|
||||
|
||||
export const GetOne = (args: { showHookData: boolean; id: string }) => (
|
||||
<ReturnReason {...args} />
|
||||
)
|
||||
|
||||
GetOne.argTypes = {
|
||||
id: {
|
||||
control: {
|
||||
type: "text",
|
||||
},
|
||||
name: "return reason id",
|
||||
defaultValue: "rr_...",
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
import { Meta } from "@storybook/react"
|
||||
import React from "react"
|
||||
import { useCartShippingOptions, useShippingOptions } from "../src"
|
||||
import Layout from "./components/Layout"
|
||||
|
||||
const ShippingOptions = ({ showHookData, cartId }) => {
|
||||
const data = useShippingOptions(cartId)
|
||||
return (
|
||||
<Layout showHookData={showHookData} data={data}>
|
||||
<h3>Shipping Options</h3>
|
||||
<ul>
|
||||
{data?.shipping_options?.map((so) => (
|
||||
<li key={so.id}>
|
||||
{so.name} - {so.amount}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
|
||||
const CartShippingOptions = ({ showHookData, cartId }) => {
|
||||
const data = useCartShippingOptions(cartId)
|
||||
return (
|
||||
<Layout showHookData={showHookData} data={data}>
|
||||
<h3>Cart shipping options: {cartId}</h3>
|
||||
<ul>
|
||||
{data?.shipping_options?.map((so) => (
|
||||
<li key={so.id}>
|
||||
{so.name} - {so.amount}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
|
||||
const meta: Meta = {
|
||||
title: "Shipping Options",
|
||||
argTypes: {
|
||||
showHookData: {
|
||||
name: "Show hook data",
|
||||
description:
|
||||
"Whether or not story should display JSON of data returned from hook",
|
||||
control: {
|
||||
type: "boolean",
|
||||
},
|
||||
defaultValue: true,
|
||||
},
|
||||
},
|
||||
parameters: {
|
||||
controls: { expanded: true },
|
||||
},
|
||||
}
|
||||
|
||||
export default meta
|
||||
|
||||
export const List = (args: { showHookData: boolean; cartId: string }) => (
|
||||
<ShippingOptions {...args} />
|
||||
)
|
||||
|
||||
List.argTypes = {
|
||||
cartId: {
|
||||
control: {
|
||||
type: "text",
|
||||
},
|
||||
name: "cart id",
|
||||
defaultValue: "cart_...",
|
||||
},
|
||||
}
|
||||
|
||||
export const GetOne = (args: { showHookData: boolean; cartId: string }) => (
|
||||
<CartShippingOptions {...args} />
|
||||
)
|
||||
|
||||
GetOne.argTypes = {
|
||||
cartId: {
|
||||
control: {
|
||||
type: "text",
|
||||
},
|
||||
name: "cart id",
|
||||
defaultValue: "cart_...",
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
import { Meta } from "@storybook/react"
|
||||
import React from "react"
|
||||
import { useCartSwap } from "../src"
|
||||
import Layout from "./components/Layout"
|
||||
|
||||
const Swap = ({ showHookData, cartId }) => {
|
||||
const data = useCartSwap(cartId)
|
||||
return (
|
||||
<Layout showHookData={showHookData} data={data}>
|
||||
<h3>Cart swap: {cartId}</h3>
|
||||
<div>
|
||||
{data?.swap?.order_id} - {data?.swap?.cart_id}
|
||||
</div>
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
|
||||
const meta: Meta = {
|
||||
title: "Swaps",
|
||||
argTypes: {
|
||||
showHookData: {
|
||||
name: "Show hook data",
|
||||
description:
|
||||
"Whether or not story should display JSON of data returned from hook",
|
||||
control: {
|
||||
type: "boolean",
|
||||
},
|
||||
defaultValue: true,
|
||||
},
|
||||
},
|
||||
parameters: {
|
||||
controls: { expanded: true },
|
||||
},
|
||||
}
|
||||
|
||||
export default meta
|
||||
|
||||
export const GetOne = (args: { showHookData: boolean; cartId: string }) => (
|
||||
<Swap {...args} />
|
||||
)
|
||||
|
||||
GetOne.argTypes = {
|
||||
cartId: {
|
||||
control: {
|
||||
type: "text",
|
||||
},
|
||||
name: "cart id",
|
||||
defaultValue: "cart_...",
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
import React from "react"
|
||||
import ReactJson from "react-json-view"
|
||||
|
||||
const Layout = ({ children, showHookData, data }) => {
|
||||
return (
|
||||
<div style={{ display: "grid", gridTemplateColumns: "50% 50%" }}>
|
||||
<div>{children}</div>
|
||||
<div style={{ overflowX: "auto" }}>
|
||||
<h3>Raw</h3>
|
||||
{showHookData && <ReactJson src={data} collapsed={true} />}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Layout
|
||||
Reference in New Issue
Block a user