Screencast Storybook

Products.js

import { http } from "../../service/api";
import { Card } from "./Card";
import { Header, Spinner } from "../../components";
import { useQuery } from "react-query";

export default function Products() {
  const { isLoading, isError, data } = useQuery(
    "todos",
    () => http.get("/products").then(({ data }) => data.products) // http contains baseURL with `/api`
  );

  if (isLoading) return <Spinner message="Loading Products" variant="orange" />;
  if (isError) return <p>Error</p>;

  return (
    <>
      <Header>Products</Header>
      <div className="mt-6 grid grid-cols-1 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-4 xl:gap-x-8">
        {data.map((product) => (
          <Card product={product} key={product.id} />
        ))}
      </div>
    </>
  );
}

Products.stories.js

import { QueryClient, QueryClientProvider } from "react-query";
import Products from "./Products";
import { rest } from "msw";

const client = new QueryClient({
  defaultOptions: {
    queries: {
      retry: false,
    },
  },
});

export default {
  title: "Containers/Products",
  component: Products,
};

const Template = (args) => {
  return (
    <QueryClientProvider client={client}>
      <div className="container mx-auto">
        <Products {...args} />
      </div>
    </QueryClientProvider>
  );
};

export const Default = Template.bind({});
Default.parameters = {
  msw: [
    rest.get("/api/products", (req, res, ctx) => {
      return res(
        ctx.json({
          products: [
            {
              productDetails: "http://reyna.org",
              imageUrl: "http://placeimg.com/640/480/cats",
              price: 5861,
              name: "Eloise Romaguera",
              id: "1",
            },
            {
              productDetails: "http://dakota.net",
              imageUrl: "http://placeimg.com/640/480/animals",
              price: 5664,
              name: "Mike Frami III",
              id: "2",
            },
            {
              productDetails: "https://ambrose.org",
              imageUrl: "http://placeimg.com/640/480/people",
              price: 6328,
              name: "Sheryl Carter",
              id: "3",
            },
          ],
        })
      );
    }),
  ],
};

storybook_preview.js

import "../src/index.css";
import { addDecorator } from "@storybook/react";
import { initializeWorker, mswDecorator } from "msw-storybook-addon";

initializeWorker();
addDecorator(mswDecorator);

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};