@canonical/storybook-addon-relay 0.29.1

package/README.md

@@ -0,0 +1,142 @@
+# @canonical/storybook-addon-relay
+
+Mock Relay environment integration for Storybook. This addon lets React stories that use Relay hooks (`useLazyLoadQuery`, `useFragment`, `usePaginationFragment`, ...) render against a `relay-test-utils` mock environment, so components with GraphQL data requirements work in Storybook without a running GraphQL server.
+
+## Installation
+
+```bash
+bun add -D @canonical/storybook-addon-relay
+```
+
+`react-relay` and `relay-runtime` (18.x) are peer dependencies — your app already has them if it uses Relay.
+
+## Setup
+
+Register the addon in your `.storybook/main.ts`:
+
+```typescript
+const config: StorybookConfig = {
+  addons: [
+    "@canonical/storybook-addon-relay",
+  ],
+};
+
+export default config;
+```
+
+If your Storybook config is built with `@canonical/storybook-config`, pass it through `extraAddons`:
+
+```typescript
+import { createConfig } from "@canonical/storybook-config";
+
+export default createConfig("react", {
+  extraAddons: ["@canonical/storybook-addon-relay"],
+});
+```
+
+Registering the addon does two things:
+
+- its `preview` entry adds the `withRelayEnvironment` decorator globally;
+- its `preset` entry adds `relay-test-utils` (a CJS-only package) to Vite's `optimizeDeps.include`, so its named exports resolve in the browser ESM context.
+
+## Usage in Stories
+
+Declare a `relay` key in your story parameters. The decorator wraps the story in a `RelayEnvironmentProvider` carrying a fresh mock environment, and every GraphQL operation the story issues resolves automatically with data from `MockPayloadGenerator`:
+
+```typescript
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import type { RelayParameters } from "@canonical/storybook-addon-relay";
+import { UserProfile } from "./UserProfile.js";
+
+const meta: Meta<typeof UserProfile> = {
+  title: "Components/UserProfile",
+  component: UserProfile,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  parameters: {
+    relay: {
+      mockResolvers: {
+        User: () => ({
+          name: "Ada Lovelace",
+          email: "ada@example.com",
+        }),
+      },
+    } satisfies RelayParameters,
+  },
+};
+```
+
+Stories without a `relay` parameter pass through unchanged — the decorator is a no-op for them.
+
+### Full payload control
+
+For error states or hand-crafted payloads, provide `generateFunction` — it replaces `MockPayloadGenerator.generate()` entirely:
+
+```typescript
+export const CustomPayload: Story = {
+  parameters: {
+    relay: {
+      generateFunction: (operation, mockResolvers) => ({
+        data: { user: { id: "1", name: "Custom Name" } },
+      }),
+    } satisfies RelayParameters,
+  },
+};
+```
+
+## API
+
+### `parameters.relay: RelayParameters`
+
+| Property | Type | Required | Description |
+|----------|------|----------|-------------|
+| `mockResolvers` | `MockResolvers` | | Mock resolvers passed to `MockPayloadGenerator.generate()`. Keys are GraphQL type names, values are factories returning field values. Fields without a resolver receive deterministic placeholder values |
+| `generateFunction` | `(operation, mockResolvers?) => GraphQLSingularResponse` | | Full override for payload generation. When provided, `MockPayloadGenerator.generate()` is not called |
+
+### `withRelayEnvironment`
+
+The decorator itself, exported from the package root for manual composition (e.g. applying it to a single story file instead of globally). It is registered globally by the addon's `preview` entry, so most consumers never import it.
+
+## How operations resolve
+
+React components issue their Relay requests while rendering — after the decorator has returned — so the decorator queues an operation resolver on the mock environment rather than resolving up front. `relay-test-utils` consumes a queued resolver after a single operation, so the resolver re-arms itself after each one: initial queries, refetches, pagination, and mutations (including those triggered from play functions) all resolve with the same story configuration, no matter how many operations the story issues.
+
+The mock environment is created once per story mount. Re-renders (e.g. changing args via controls) keep the environment and its store; switching stories or pressing the remount toolbar button starts from a fresh environment.
+
+The environment is not exposed to the story context: operations resolve automatically, so stories and play functions do not need to drive the mock network by hand, and the `parameters.relay` contract stays minimal.
+
+## Peer Dependencies
+
+| Package | Version |
+|---------|---------|
+| `react` | ^18.0.0 \|\| ^19.0.0 |
+| `react-dom` | ^18.0.0 \|\| ^19.0.0 |
+| `react-relay` | >=18.0.0 <19.0.0 |
+| `relay-runtime` | >=18.0.0 <19.0.0 |
+| `storybook` | ^10.3.1 |
+
+## Troubleshooting
+
+### `does not provide an export named 'createMockEnvironment'`
+
+`relay-test-utils` and `relay-runtime` are CJS-only. The addon's `preset` adds `relay-test-utils` to `optimizeDeps.include` automatically — make sure the addon is registered in `.storybook/main.ts` (not only imported in `preview.ts`), otherwise the preset does not run.
+
+### A refetch or mutation never resolves
+
+Operations only resolve for stories that declare a `relay` parameter (even an empty object enables the mock environment):
+
+```typescript
+export const Default: Story = {
+  parameters: {
+    relay: {},
+  },
+};
+```
+
+### Deterministic data
+
+`MockPayloadGenerator` generates placeholder values for any field not covered by `mockResolvers`. If a story must render exact values (e.g. for visual regression tests), resolve every displayed field in `mockResolvers`, or use `generateFunction` for full control.

package/dist/esm/constants.js

@@ -0,0 +1,6 @@
+/**
+ * Key under which stories declare their Relay configuration in Storybook
+ * `parameters` (i.e. `parameters.relay`).
+ */
+export const PARAM_KEY = "relay";
+//# sourceMappingURL=constants.js.map

package/dist/esm/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../src/constants.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,OAAO,CAAC"}

package/dist/esm/index.js

@@ -0,0 +1,9 @@
+/**
+ * @canonical/storybook-addon-relay — renders React stories that use Relay
+ * hooks against a `relay-test-utils` mock environment, configured per story
+ * via `parameters.relay` (`mockResolvers`, `generateFunction`).
+ *
+ * @packageDocumentation
+ */
+export * from "./lib/index.js";
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,cAAc,gBAAgB,CAAC"}

package/dist/esm/lib/index.js

@@ -0,0 +1,2 @@
+export { withRelayEnvironment } from "./withRelayEnvironment.js";
+//# sourceMappingURL=index.js.map

package/dist/esm/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/lib/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/esm/lib/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/lib/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/lib/types.ts"],"names":[],"mappings":""}

package/dist/esm/lib/withRelayEnvironment.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+// `react-relay`, `relay-runtime`, and `relay-test-utils` are CJS packages
+// with member-expression exports that Node's `cjs-module-lexer` cannot
+// detect, so these named imports fail under bare Node ESM. That is fine for
+// this package: a Storybook addon is consumed through Storybook + Vite, and
+// the `./preset` `viteFinal` pre-bundles `relay-test-utils` so the names
+// resolve in the preview iframe.
+import { RelayEnvironmentProvider } from "react-relay";
+import { createMockEnvironment, MockPayloadGenerator, } from "relay-test-utils";
+import { PARAM_KEY } from "../constants.js";
+/**
+ * Creates a mock Relay environment whose network resolves every operation
+ * with the payload described by the story's `parameters.relay`.
+ *
+ * React components issue their Relay requests while rendering (e.g.
+ * `useLazyLoadQuery` fetches when the hook runs), which happens only after
+ * the decorator has returned its element tree — so the decorator cannot call
+ * `resolveMostRecentOperation` up front; it must queue a resolver instead.
+ * `relay-test-utils` consumes a queued resolver after a single operation, so
+ * a resolver queued once would only cover the story's first query and leave
+ * refetches, pagination, and mutations (e.g. from play functions) pending
+ * forever. The queued resolver therefore re-arms itself after every
+ * operation, resolving however many operations the story issues.
+ */
+const createStoryEnvironment = (parameters) => {
+    const environment = createMockEnvironment();
+    const { mockResolvers, generateFunction } = parameters;
+    const resolveOperation = (operation) => generateFunction
+        ? generateFunction(operation, mockResolvers)
+        : MockPayloadGenerator.generate(operation, mockResolvers);
+    const armOperationResolver = () => {
+        environment.mock.queueOperationResolver((operation) => {
+            armOperationResolver();
+            return resolveOperation(operation);
+        });
+    };
+    armOperationResolver();
+    return environment;
+};
+/**
+ * Internal wrapper component that owns the mock environment's lifecycle.
+ *
+ * The environment is created lazily on mount and kept for the lifetime of
+ * the mounted story: re-renders (e.g. Storybook controls changing args) keep
+ * the same environment and store, while remounts (story switch, the remount
+ * toolbar button) start from a fresh one. `parameters.relay` is read when the
+ * environment is created; Storybook parameters are static per story.
+ */
+const MockRelayEnvironmentProvider = ({ parameters, children, }) => {
+    const [environment] = useState(() => createStoryEnvironment(parameters));
+    return (_jsx(RelayEnvironmentProvider, { environment: environment, children: children }));
+};
+/**
+ * Storybook decorator that lets React stories using Relay hooks
+ * (`useLazyLoadQuery`, `useFragment`, `usePaginationFragment`, ...) render
+ * against a mock Relay environment.
+ *
+ * Reads `parameters.relay` from the story context. If absent, the story
+ * passes through unchanged. If present, the story is wrapped in a
+ * `RelayEnvironmentProvider` carrying a `relay-test-utils` mock environment
+ * that automatically resolves every operation the story issues, using the
+ * story's `mockResolvers` and/or `generateFunction`.
+ */
+export const withRelayEnvironment = (storyFn, context) => {
+    const relayParameters = context.parameters?.[PARAM_KEY];
+    if (!relayParameters) {
+        return storyFn();
+    }
+    return (_jsx(MockRelayEnvironmentProvider, { parameters: relayParameters, children: storyFn() }));
+};
+//# sourceMappingURL=withRelayEnvironment.js.map

package/dist/esm/lib/withRelayEnvironment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"withRelayEnvironment.js","sourceRoot":"","sources":["../../../src/lib/withRelayEnvironment.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqC,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpE,0EAA0E;AAC1E,uEAAuE;AACvE,4EAA4E;AAC5E,4EAA4E;AAC5E,yEAAyE;AACzE,iCAAiC;AACjC,OAAO,EAAE,wBAAwB,EAAE,MAAM,aAAa,CAAC;AAKvD,OAAO,EACL,qBAAqB,EAErB,oBAAoB,GACrB,MAAM,kBAAkB,CAAC;AAM1B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C;;;;;;;;;;;;;GAaG;AACH,MAAM,sBAAsB,GAAG,CAC7B,UAA2B,EACV,EAAE;IACnB,MAAM,WAAW,GAAG,qBAAqB,EAAE,CAAC;IAC5C,MAAM,EAAE,aAAa,EAAE,gBAAgB,EAAE,GAAG,UAAU,CAAC;IAEvD,MAAM,gBAAgB,GAAG,CACvB,SAA8B,EACL,EAAE,CAC3B,gBAAgB;QACd,CAAC,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC;QAC5C,CAAC,CAAC,oBAAoB,CAAC,QAAQ,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;IAE9D,MAAM,oBAAoB,GAAG,GAAS,EAAE;QACtC,WAAW,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC,SAAS,EAAE,EAAE;YACpD,oBAAoB,EAAE,CAAC;YACvB,OAAO,gBAAgB,CAAC,SAAS,CAAC,CAAC;QACrC,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IACF,oBAAoB,EAAE,CAAC;IAEvB,OAAO,WAAW,CAAC;AACrB,CAAC,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,4BAA4B,GAAG,CAAC,EACpC,UAAU,EACV,QAAQ,GAIT,EAAgB,EAAE;IACjB,MAAM,CAAC,WAAW,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,sBAAsB,CAAC,UAAU,CAAC,CAAC,CAAC;IAEzE,OAAO,CACL,KAAC,wBAAwB,IAAC,WAAW,EAAE,WAAW,YAC/C,QAAQ,GACgB,CAC5B,CAAC;AACJ,CAAC,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAClC,OAAgC,EAChC,OAA+B,EACM,EAAE;IACvC,MAAM,eAAe,GAAG,OAAO,CAAC,UAAU,EAAE,CAAC,SAAS,CAEzC,CAAC;IAEd,IAAI,CAAC,eAAe,EAAE,CAAC;QACrB,OAAO,OAAO,EAAE,CAAC;IACnB,CAAC;IAED,OAAO,CACL,KAAC,4BAA4B,IAAC,UAAU,EAAE,eAAe,YACtD,OAAO,EAAe,GACM,CACO,CAAC;AAC3C,CAAC,CAAC"}

package/dist/esm/preset.js

@@ -0,0 +1,20 @@
+/**
+ * Storybook addon preset — configures Vite so that `relay-test-utils`
+ * (a CJS-only package) is pre-bundled, allowing its named exports
+ * (`createMockEnvironment`, `MockPayloadGenerator`) to work in
+ * the browser ESM context.
+ *
+ * @note Named `viteFinal` per Storybook preset API convention — not a
+ * verb-first function name by design.
+ */
+export const viteFinal = (config) => {
+    const optimizeDeps = (config.optimizeDeps ?? {});
+    const include = (optimizeDeps.include ?? []);
+    if (!include.includes("relay-test-utils")) {
+        include.push("relay-test-utils");
+    }
+    optimizeDeps.include = include;
+    config.optimizeDeps = optimizeDeps;
+    return config;
+};
+//# sourceMappingURL=preset.js.map

package/dist/esm/preset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"preset.js","sourceRoot":"","sources":["../../src/preset.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CACvB,MAA+B,EACN,EAAE;IAC3B,MAAM,YAAY,GAAG,CAAC,MAAM,CAAC,YAAY,IAAI,EAAE,CAA4B,CAAC;IAC5E,MAAM,OAAO,GAAG,CAAC,YAAY,CAAC,OAAO,IAAI,EAAE,CAAa,CAAC;IAEzD,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAC,EAAE,CAAC;QAC1C,OAAO,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;IACnC,CAAC;IAED,YAAY,CAAC,OAAO,GAAG,OAAO,CAAC;IAC/B,MAAM,CAAC,YAAY,GAAG,YAAY,CAAC;IAEnC,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC"}

package/dist/esm/preview.js

@@ -0,0 +1,11 @@
+import { withRelayEnvironment } from "./lib/withRelayEnvironment.js";
+/**
+ * Storybook preview annotations — registers the `withRelayEnvironment`
+ * decorator globally, so adding this addon to the Storybook config is the
+ * only setup consumers need.
+ */
+const preview = {
+    decorators: [withRelayEnvironment],
+};
+export default preview;
+//# sourceMappingURL=preview.js.map

package/dist/esm/preview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview.js","sourceRoot":"","sources":["../../src/preview.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAErE;;;;GAIG;AACH,MAAM,OAAO,GAAiC;IAC5C,UAAU,EAAE,CAAC,oBAAoB,CAAC;CACnC,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/types/constants.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Key under which stories declare their Relay configuration in Storybook
+ * `parameters` (i.e. `parameters.relay`).
+ */
+export declare const PARAM_KEY = "relay";
+//# sourceMappingURL=constants.d.ts.map

package/dist/types/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/constants.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,SAAS,UAAU,CAAC"}

package/dist/types/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @canonical/storybook-addon-relay — renders React stories that use Relay
+ * hooks against a `relay-test-utils` mock environment, configured per story
+ * via `parameters.relay` (`mockResolvers`, `generateFunction`).
+ *
+ * @packageDocumentation
+ */
+export * from "./lib/index.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,cAAc,gBAAgB,CAAC"}

package/dist/types/lib/index.d.ts

@@ -0,0 +1,3 @@
+export type { RelayParameters } from "./types.js";
+export { withRelayEnvironment } from "./withRelayEnvironment.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/types/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/types/lib/types.d.ts

@@ -0,0 +1,31 @@
+import type { GraphQLSingularResponse, OperationDescriptor } from "relay-runtime";
+import type { MockResolvers } from "relay-test-utils";
+/**
+ * Shape of the `relay` key in a story's Storybook `parameters`.
+ *
+ * When present, the `withRelayEnvironment` decorator wraps the story in a
+ * mock Relay environment and resolves every GraphQL operation the story
+ * issues (initial queries, refetches, pagination, mutations) with the
+ * configuration declared here. When absent, the decorator is a no-op.
+ *
+ * The created mock environment is deliberately not exposed back to the story
+ * context: operations resolve automatically through the queued resolver, so
+ * stories and play functions have no need to drive the mock network by hand.
+ * Keeping the environment private keeps the `parameters.relay` contract to
+ * the two options below.
+ */
+export interface RelayParameters<TResolvers extends MockResolvers = MockResolvers> {
+    /**
+     * Mock resolvers passed to `MockPayloadGenerator.generate()`. Keys are
+     * GraphQL type names, values are factories returning field values for that
+     * type. Fields without a resolver receive deterministic placeholder values.
+     */
+    mockResolvers?: TResolvers;
+    /**
+     * Full override for payload generation. When provided, it is called instead
+     * of `MockPayloadGenerator.generate()` for every operation the story
+     * issues, receiving the operation and the configured `mockResolvers`.
+     */
+    generateFunction?: (operation: OperationDescriptor, mockResolvers?: TResolvers | null) => GraphQLSingularResponse;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types/lib/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,uBAAuB,EACvB,mBAAmB,EACpB,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtD;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,eAAe,CAC9B,UAAU,SAAS,aAAa,GAAG,aAAa;IAEhD;;;;OAIG;IACH,aAAa,CAAC,EAAE,UAAU,CAAC;IAE3B;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CACjB,SAAS,EAAE,mBAAmB,EAC9B,aAAa,CAAC,EAAE,UAAU,GAAG,IAAI,KAC9B,uBAAuB,CAAC;CAC9B"}

package/dist/types/lib/withRelayEnvironment.d.ts

@@ -0,0 +1,14 @@
+import type { Renderer, StoryContext, PartialStoryFn as StoryFunction } from "storybook/internal/types";
+/**
+ * Storybook decorator that lets React stories using Relay hooks
+ * (`useLazyLoadQuery`, `useFragment`, `usePaginationFragment`, ...) render
+ * against a mock Relay environment.
+ *
+ * Reads `parameters.relay` from the story context. If absent, the story
+ * passes through unchanged. If present, the story is wrapped in a
+ * `RelayEnvironmentProvider` carrying a `relay-test-utils` mock environment
+ * that automatically resolves every operation the story issues, using the
+ * story's `mockResolvers` and/or `generateFunction`.
+ */
+export declare const withRelayEnvironment: (storyFn: StoryFunction<Renderer>, context: StoryContext<Renderer>) => ReturnType<StoryFunction<Renderer>>;
+//# sourceMappingURL=withRelayEnvironment.d.ts.map

package/dist/types/lib/withRelayEnvironment.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"withRelayEnvironment.d.ts","sourceRoot":"","sources":["../../../src/lib/withRelayEnvironment.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EACV,QAAQ,EACR,YAAY,EACZ,cAAc,IAAI,aAAa,EAChC,MAAM,0BAA0B,CAAC;AAmElC;;;;;;;;;;GAUG;AACH,eAAO,MAAM,oBAAoB,GAC/B,SAAS,aAAa,CAAC,QAAQ,CAAC,EAChC,SAAS,YAAY,CAAC,QAAQ,CAAC,KAC9B,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAcpC,CAAC"}

package/dist/types/preset.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Storybook addon preset — configures Vite so that `relay-test-utils`
+ * (a CJS-only package) is pre-bundled, allowing its named exports
+ * (`createMockEnvironment`, `MockPayloadGenerator`) to work in
+ * the browser ESM context.
+ *
+ * @note Named `viteFinal` per Storybook preset API convention — not a
+ * verb-first function name by design.
+ */
+export declare const viteFinal: (config: Record<string, unknown>) => Record<string, unknown>;
+//# sourceMappingURL=preset.d.ts.map

package/dist/types/preset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preset.d.ts","sourceRoot":"","sources":["../../src/preset.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,eAAO,MAAM,SAAS,GACpB,QAAQ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAC9B,MAAM,CAAC,MAAM,EAAE,OAAO,CAYxB,CAAC"}

package/dist/types/preview.d.ts

@@ -0,0 +1,9 @@
+import type { ProjectAnnotations, Renderer } from "storybook/internal/types";
+/**
+ * Storybook preview annotations — registers the `withRelayEnvironment`
+ * decorator globally, so adding this addon to the Storybook config is the
+ * only setup consumers need.
+ */
+declare const preview: ProjectAnnotations<Renderer>;
+export default preview;
+//# sourceMappingURL=preview.d.ts.map

package/dist/types/preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview.d.ts","sourceRoot":"","sources":["../../src/preview.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAG7E;;;;GAIG;AACH,QAAA,MAAM,OAAO,EAAE,kBAAkB,CAAC,QAAQ,CAEzC,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/package.json

@@ -0,0 +1,103 @@
+{
+  "name": "@canonical/storybook-addon-relay",
+  "version": "0.29.1",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "author": {
+    "email": "webteam@canonical.com",
+    "name": "Canonical Webteam"
+  },
+  "description": "Renders React stories that use Relay hooks against a mock Relay environment",
+  "keywords": [
+    "storybook-addons",
+    "relay",
+    "react-relay",
+    "graphql"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/canonical/pragma"
+  },
+  "bugs": {
+    "url": "https://github.com/canonical/pragma/issues"
+  },
+  "license": "LGPL-3.0",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "default": "./dist/esm/index.js"
+    },
+    "./preview": {
+      "types": "./dist/types/preview.d.ts",
+      "default": "./dist/esm/preview.js"
+    },
+    "./preset": {
+      "types": "./dist/types/preset.d.ts",
+      "default": "./dist/esm/preset.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "bun run build:package",
+    "build:all": "bun run build:package",
+    "build:package": "bun run build:package:tsc",
+    "build:package:tsc": "tsc -p tsconfig.build.json",
+    "check": "bun run check:biome && bun run check:ts && bun run check:webarchitect",
+    "check:fix": "bun run check:biome:fix && bun run check:ts",
+    "check:biome": "biome check",
+    "check:biome:fix": "biome check --write",
+    "check:ts": "tsc --noEmit",
+    "check:webarchitect": "webarchitect library",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
+  },
+  "dependencies": {
+    "relay-test-utils": "^18.2.0"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.4.9",
+    "@canonical/biome-config": "^0.29.0",
+    "@canonical/typescript-config-react": "^0.29.0",
+    "@canonical/webarchitect": "^0.29.0",
+    "@testing-library/react": "^16.3.2",
+    "@types/node": "^24.12.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@types/react-relay": "^18.2.1",
+    "@types/relay-runtime": "^19.0.3",
+    "@types/relay-test-utils": "^18.0.0",
+    "@vitejs/plugin-react": "^6.0.0",
+    "@vitest/coverage-v8": "^4.0.18",
+    "jsdom": "^28.1.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-relay": "^18.2.0",
+    "relay-runtime": "^18.2.0",
+    "storybook": "^10.3.1",
+    "typescript": "^5.9.3",
+    "vite": "^8.0.1",
+    "vitest": "^4.0.18"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "react-relay": ">=18.0.0 <19.0.0",
+    "relay-runtime": ">=18.0.0 <19.0.0",
+    "storybook": "^10.3.1"
+  },
+  "storybook": {
+    "displayName": "Relay",
+    "supportedFrameworks": [
+      "react"
+    ],
+    "icon": "https://relay.dev/img/relay.svg"
+  }
+}