WIP

AmazeeLabs · Nov 27, 2023 · 91d7081 · 91d7081
1 parent 80c3a73
commit 91d7081
Show file tree

Hide file tree

Showing 9 changed files with 195 additions and 575 deletions.
diff --git a/packages/schema/src/index.ts b/packages/schema/src/index.ts
@@ -7,7 +7,11 @@ import {
 } from './generated/index.js';
 import { createOperator } from './operators.js';
 
-export { registerOperator, drupalOperator } from './operators.js';
+export {
+  registerOperator,
+  drupalOperator,
+  clearRegistry,
+} from './operators.js';
 
 export * from './generated/index.js';
 export * from '@amazeelabs/scalars';
@@ -23,5 +27,6 @@ export function useOperation<TOperation extends AnyOperationId>(
       suspense: false,
     },
   );
+  console.log(result.data);
   return result.data;
 }
diff --git a/packages/ui/.storybook/preview.tsx b/packages/ui/.storybook/preview.tsx
@@ -2,13 +2,9 @@ import '../tailwind.css';
 
 import { Decorator } from '@storybook/react';
 import { IntlProvider } from '../src/utils/intl';
-import {
-  LocationProvider,
-  drupalOperator,
-  registerOperator,
-} from '@custom/schema';
+import { LocationProvider } from '@custom/schema';
 import React from 'react';
-import { initialize, mswLoader } from 'msw-storybook-addon';
+import { clearRegistry, registerOperator } from '@custom/schema';
 
 // Every story is wrapped in an IntlProvider by default.
 const IntlDecorator: Decorator = (Story) => (
@@ -17,7 +13,13 @@ const IntlDecorator: Decorator = (Story) => (
   </IntlProvider>
 );
 
-registerOperator(drupalOperator('/graphql'));
+const OperatorDecorator: Decorator = (Story, ctx) => {
+  clearRegistry();
+  ctx.parameters.operators?.forEach(([id, impl]) =>
+    registerOperator((_, vars) => impl(vars), id),
+  );
+  return <Story />;
+};
 
 const LocationDecorator: Decorator = (Story, ctx) => {
   return (
@@ -31,10 +33,4 @@ export const parameters = {
   chromatic: { viewports: [320, 840, 1440] },
 };
 
-initialize({
-  onUnhandledRequest: 'bypass',
-});
-
-export const loaders = [mswLoader];
-
-export const decorators = [LocationDecorator, IntlDecorator];
+export const decorators = [LocationDecorator, IntlDecorator, OperatorDecorator];
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -91,8 +91,6 @@
     "eslint-plugin-storybook": "^0.6.12",
     "eslint-plugin-tailwindcss": "^3.13.0",
     "happy-dom": "^9.20.3",
-    "msw": "^1.2.2",
-    "msw-storybook-addon": "^1.8.0",
     "nyc": "^15.1.0",
     "postcss": "^8.4.24",
     "postcss-cli": "^10.1.0",
@@ -107,11 +105,8 @@
     "tailwindcss": "^3.3.2",
     "typescript": "^5.1.6",
     "vite": "^4.4.9",
+    "vite-imagetools": "^5.0.8",
     "vite-plugin-turbosnap": "^1.0.2",
-    "vitest": "^0.34.2",
-    "vite-imagetools": "^5.0.8"
-  },
-  "msw": {
-    "workerDirectory": "static/stories"
+    "vitest": "^0.34.2"
   }
 }
diff --git a/packages/ui/src/components/Organisms/ContentHub.stories.ts b/packages/ui/src/components/Organisms/ContentHub.stories.ts
@@ -6,7 +6,6 @@ import {
 import Landscape from '@stories/landscape.jpg?as=metadata';
 import Portrait from '@stories/portrait.jpg?as=metadata';
 import { Meta, StoryObj } from '@storybook/react';
-import { rest } from 'msw';
 
 import { image } from '../../helpers/image';
 import { ContentHub } from './ContentHub';
@@ -17,21 +16,9 @@ export default {
 
 export const Empty = {
   parameters: {
-    msw: {
-      handlers: {
-        contentHub: [
-          rest.get('/graphql', (req, res, ctx) => {
-            const result: ContentHubQuery = {
-              contentHub: {
-                total: 0,
-                items: [],
-              },
-            };
-            return res(ctx.json({ data: result }));
-          }),
-        ],
-      },
-    },
+    operators: [
+      [ContentHubQuery, () => ({ contentHub: { total: 0, items: [] } })],
+    ],
   },
 } satisfies StoryObj<typeof ContentHub>;
 
@@ -40,46 +27,41 @@ export const WithResults = {
     pageSize: 6,
   },
   parameters: {
-    msw: {
-      handlers: {
-        contentHub: [
-          rest.get('/graphql', (req, res, ctx) => {
-            const items = [...Array(82).keys()].map(
-              (i) =>
-                ({
-                  path: `/item/${i + 1}` as Url,
-                  title: `${i % 3 === 2 ? 'Article' : 'Story'} #${i + 1}`,
-                  teaserImage:
-                    i % 3 === 1
-                      ? undefined
-                      : {
-                          alt: `Image for item #${i + 1}`,
-                          source: image(i % 2 === 0 ? Landscape : Portrait, {
-                            width: 400,
-                            height: 300,
-                          }),
-                        },
-                } satisfies ContentHubResultItemFragment),
-            );
-            const vars = JSON.parse(
-              req.url.searchParams.get('variables') || '{}',
-            );
-            const filtered = items.filter(
-              (item) => !vars.query || item.title.includes(vars.query),
-            );
-            const result: ContentHubQuery = {
-              contentHub: {
-                total: filtered.length,
-                items: filtered.slice(
-                  vars.pagination.offset,
-                  vars.pagination.offset + vars.pagination.limit,
-                ),
-              },
-            };
-            return res(ctx.json({ data: result }));
-          }),
-        ],
-      },
-    },
+    operators: [
+      [
+        ContentHubQuery,
+        (vars) => {
+          const items = [...Array(82).keys()].map(
+            (i) =>
+              ({
+                path: `/item/${i + 1}` as Url,
+                title: `${i % 3 === 2 ? 'Article' : 'Story'} #${i + 1}`,
+                teaserImage:
+                  i % 3 === 1
+                    ? undefined
+                    : {
+                        alt: `Image for item #${i + 1}`,
+                        source: image(i % 2 === 0 ? Landscape : Portrait, {
+                          width: 400,
+                          height: 300,
+                        }),
+                      },
+              } satisfies ContentHubResultItemFragment),
+          );
+          const filtered = items.filter(
+            (item) => !vars.query || item.title.includes(vars.query),
+          );
+          return {
+            contentHub: {
+              total: filtered.length,
+              items: filtered.slice(
+                vars.pagination.offset,
+                vars.pagination.offset + vars.pagination.limit,
+              ),
+            },
+          };
+        },
+      ],
+    ],
   },
 } satisfies StoryObj<typeof ContentHub>;
diff --git a/packages/ui/src/types.d.ts → packages/ui/src/helpers/image-loader.d.ts b/packages/ui/src/types.d.ts → packages/ui/src/helpers/image-loader.d.ts
@@ -4,11 +4,3 @@ declare module '*as=metadata' {
   const content: Parameters<typeof buildResponsiveImage>[1];
   export default content;
 }
-
-interface ImportMetaEnv {
-  readonly VITE_CLOUDINARY_CLOUDNAME?: string;
-}
-
-interface ImportMeta {
-  readonly env: ImportMetaEnv;
-}
diff --git a/packages/ui/src/helpers/parameters.d.ts b/packages/ui/src/helpers/parameters.d.ts
@@ -0,0 +1,23 @@
+import type {
+  AnyOperationId,
+  LocationProvider,
+  OperationResult,
+  OperationVariables,
+} from '@custom/schema';
+import { ComponentProps } from 'react';
+
+type OperationMock<TOperation extends AnyOperationId> = (
+  vars: OperationVariables<TOperation>,
+) => OperationResult<TOperation> | Promise<OperationResult<TOperation>>;
+
+type OperationMockTuple<TOperation extends AnyOperationId> = [
+  TOperation,
+  OperationMock<TOperation>,
+];
+
+declare module '@storybook/types' {
+  interface Parameters {
+    operators?: Array<OperationMockTuple>;
+    location?: ComponentProps<typeof LocationProvider>['currentLocation'];
+  }
+}
diff --git a/packages/ui/static/stories/.gitignore b/packages/ui/static/stories/.gitignore