Add mutation demo to Storybook (#113)

.storybook/main.ts

@@ -1,6 +1,7 @@
 import type { StorybookConfig } from "@storybook/react-vite";
 import relay from "vite-plugin-relay";
 import graphqlLoader from "vite-plugin-graphql-loader";
+import svgr from "vite-plugin-svgr";
 
 const config: StorybookConfig = {
   stories: ["./**/*.mdx", "./**/*.stories.@(js|jsx|mjs|ts|tsx)"],
@@ -16,7 +17,7 @@ const config: StorybookConfig = {
     options: {},
   },
   async viteFinal(config, options) {
-    config.plugins?.push(relay, graphqlLoader());
+    config.plugins?.push(relay, graphqlLoader(), svgr());
     config.css = {
       postcss: {
         plugins: [

.storybook/preview-head.html

@@ -0,0 +1,6 @@
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=VT323&display=swap"
+  rel="stylesheet"
+/>

.storybook/stories/ApolloClient.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Meta, Source } from "@storybook/blocks";
-import * as ApolloStories from "./ApolloClient.stories.ts";
+import * as ApolloStories from "./ApolloClient.stories.tsx";
 
 <Meta of={ApolloStories} />
 

.storybook/stories/ApolloClient.stories.tsx

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { within, expect, waitFor } from "@storybook/test";
+import {
+  ApolloApp as ApolloEcommerceApp,
+  ApolloAppWithDefer as AppWithDefer,
+} from "./components/apollo-client/EcommerceExample.js";
+import { ApolloApp as ApolloWNBAApp } from "./components/apollo-client/WNBAExample.js";
+import { ecommerceHandler } from "../../src/__tests__/mocks/handlers.js";
+import { createHandler } from "../../src/handlers.js";
+import wnbaTypeDefs from "../stories/schemas/wnba.graphql";
+
+const meta = {
+  title: "Example/Apollo Client",
+  component: ApolloEcommerceApp,
+  parameters: {
+    layout: "centered",
+    msw: {
+      handlers: {
+        graphql: ecommerceHandler,
+      },
+    },
+  },
+} satisfies Meta<typeof ApolloEcommerceApp>;
+
+export default meta;
+
+export const EcommerceApp: StoryObj<typeof ApolloEcommerceApp> = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(
+      canvas.getByRole("heading", { name: /loading/i }),
+    ).toHaveTextContent("Loading...");
+    await waitFor(
+      () =>
+        expect(
+          canvas.getByRole("heading", { name: /customers/i }),
+        ).toHaveTextContent("Customers also purchased"),
+      { timeout: 2000 },
+    );
+    await waitFor(
+      () => expect(canvas.getByText(/beanie/i)).toBeInTheDocument(),
+      { timeout: 2000 },
+    );
+  },
+};
+
+export const EcommerceAppWithDefer = () => <AppWithDefer />;
+
+export const WNBAApp = () => <ApolloWNBAApp />;
+
+const teams = [
+  {
+    id: "1",
+    name: "New York Liberty",
+  },
+  {
+    id: "2",
+    name: "Las Vegas Aces",
+  },
+];
+
+WNBAApp.parameters = {
+  msw: {
+    handlers: {
+      graphql: createHandler({
+        typeDefs: wnbaTypeDefs,
+        resolvers: {
+          Mutation: {
+            setCurrentTeam: (_p, { team }) => teams.find((t) => t.id === team),
+          },
+          Query: {
+            team: () => ({
+              id: "1",
+              name: "New York Liberty",
+            }),
+            teams: () => teams,
+          },
+        },
+      }),
+    },
+  },
+};

.storybook/stories/Relay.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Meta, Source } from "@storybook/blocks";
-import * as RelayStories from "./Relay.stories.ts";
+import * as RelayStories from "./Relay.stories.tsx";
 
 <Meta of={RelayStories} />
 

.storybook/stories/Relay.stories.ts → .storybook/stories/Relay.stories.tsx

@@ -4,7 +4,7 @@ import {
   RelayApp,
   RelayAppWithDefer as AppWithDefer,
 } from "./components/relay/RelayComponent.js";
-import { graphQLHandler } from "../../src/__tests__/mocks/handlers.js";
+import { ecommerceHandler } from "../../src/__tests__/mocks/handlers.js";
 
 export default {
   title: "Example/Relay",
@@ -13,15 +13,13 @@ export default {
     layout: "centered",
     msw: {
       handlers: {
-        graphql: graphQLHandler,
+        graphql: ecommerceHandler,
       },
     },
   },
 } satisfies Meta<typeof RelayApp>;
 
-export { AppWithDefer };
-
-export const App: StoryObj<typeof RelayApp> = {
+export const EcommerceApp: StoryObj<typeof RelayApp> = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     await expect(
@@ -40,3 +38,5 @@ export const App: StoryObj<typeof RelayApp> = {
     );
   },
 };
+
+export const EcommerceAppWithDefer = () => <AppWithDefer />;

.storybook/stories/components/TeamLogo.tsx

@@ -0,0 +1,34 @@
+import Atlanta from "./logos/AtlantaDream.svg?react";
+import Chicago from "./logos/ChicagoSky.svg?react";
+import Connecticut from "./logos/ConnecticutSun.svg?react";
+import Dallas from "./logos/DallasWings.svg?react";
+import Indiana from "./logos/IndianaFever.svg?react";
+import LasVegas from "./logos/LasVegasAces.svg?react";
+import LosAngeles from "./logos/LosAngelesSparks.svg?react";
+import Minnesota from "./logos/MinnesotaLynx.svg?react";
+import NewYork from "./logos/NewYorkLiberty.svg?react";
+import Phoenix from "./logos/PhoenixMercury.svg?react";
+import Seattle from "./logos/SeattleStorm.svg?react";
+import Washington from "./logos/WashingtonMystics.svg?react";
+
+// indexed by team ID
+const logos = [
+  ,
+  NewYork,
+  LasVegas,
+  LosAngeles,
+  Atlanta,
+  Chicago,
+  Connecticut,
+  Indiana,
+  Washington,
+  Dallas,
+  Minnesota,
+  Phoenix,
+  Seattle,
+];
+
+export function TeamLogo({ team }: { team: string }) {
+  const Logo = logos[parseInt(team)] || (() => "Error: no logo found");
+  return <Logo className="h-40 w-40 m-0" />;
+}