@canonical/storybook-addon-msw 0.9.0-experimental.21

package/README.md

@@ -0,0 +1,166 @@
+# Storybook Addon DS Baseline Grid
+
+Displays the baseline grid overlay in the Storybook preview.
+
+## Usage 
+
+### Installation
+
+```bash
+npm install @canonical/storybook-addon-baseline-grid
+```
+
+In your `.storybook/main.js` file, add the following:
+
+```js
+module.exports = {
+  addons: ['@canonical/storybook-addon-baseline-grid'],
+};
+```
+
+Please note that this addon does rely on ESM only and does not have a cjs build at all. This means you need a version of node >= 20 and a modern browser to use it.
+
+## Local Testing Guide
+
+## Prerequisites
+
+1. First, ensure you have the MSW service worker file initialized:
+
+```bash
+# Run this in your addon directory
+npx msw init public/
+```
+
+This creates `public/mockServiceWorker.js` which is necessary for MSW to intercept requests.
+
+## Building and Testing Locally
+
+### 1. Build the Addon
+
+```bash
+# Build the addon
+bun run build
+```
+
+This will compile your TypeScript files to the `dist/` directory.
+
+### 2. Run Storybook with the Addon
+
+```bash
+# Start Storybook
+bun run storybook
+```
+
+Your Storybook should now be running at `http://localhost:6007`.
+
+### 3. Verify the Addon is Working
+
+1. **Check the Toolbar**: You should see a lightning bolt icon in the Storybook toolbar. This toggles MSW on/off globally.
+
+2. **Check the Panel**: When viewing a story with MSW handlers, you should see an "MSW" tab in the addon panel (bottom of the screen). This shows information about active handlers.
+
+3. **Test the Stories**: Navigate to "Addon/MSW Test" in the sidebar. You should see various test scenarios:
+   - **Success Response**: Shows a successful API response
+   - **Error Response**: Demonstrates error handling
+   - **Delayed Response**: Shows loading states with a 2-second delay
+   - **Multiple Handlers**: Tests multiple MSW handlers
+   - **No Handlers**: Shows what happens when no handlers are defined
+   - **Disabled MSW**: Tests the disable functionality
+   - **Dynamic Response**: Interactive example with search functionality
+
+## Troubleshooting
+
+### "Failed to fetch" errors
+
+If you see network errors, check:
+
+1. The MSW service worker is loaded (check DevTools > Application > Service Workers)
+2. The `mockServiceWorker.js` file exists in your `public/` directory
+3. MSW is enabled (lightning bolt icon should be active/blue)
+
+### Handlers not working
+
+1. Check the MSW panel to see if handlers are registered
+2. Ensure the request URLs match exactly (including leading slashes)
+3. Check the browser console for any MSW-related warnings
+
+### TypeScript errors
+
+If you still see TypeScript errors after the fixes:
+
+1. Ensure all dependencies are installed: `bun install`
+2. Try cleaning and rebuilding: `rm -rf dist/ && bun run build`
+3. Restart your TypeScript language server in your editor
+
+## Understanding the Test Stories
+
+Each test story demonstrates a different aspect of the MSW addon:
+
+### Success Response
+This is the simplest case - it intercepts a GET request to `/api/user` and returns a successful JSON response. Use this to verify basic MSW functionality.
+
+### Error Response
+Shows how to simulate API errors. The handler returns a 404 status with an error message. This is useful for testing error states in your components.
+
+### Delayed Response
+Demonstrates async handlers with artificial delays. This is perfect for testing loading states and ensuring your UI handles slow networks gracefully.
+
+### Multiple Handlers
+Shows that you can define multiple handlers for different endpoints. This mimics a real API with multiple routes.
+
+### Dynamic Response
+The most complex example - it shows how MSW can read request parameters and return dynamic responses based on user input. The search functionality demonstrates real-world usage.
+
+## Next Steps
+
+Once you've verified the addon works locally:
+
+1. **Add more test cases**: Create stories that test specific scenarios you need
+2. **Test with your components**: Import your actual components and test them with mocked APIs
+3. **Add to your main project**: Install the addon in your main Storybook project
+4. **Customize the Panel**: Enhance the panel to show more detailed handler information
+
+## Development Tips
+
+### Debugging MSW Handlers
+
+Add console logs to your handlers to debug:
+
+```typescript
+http.get("/api/test", ({ request }) => {
+  console.log("MSW: Intercepted request to", request.url);
+  return HttpResponse.json({ success: true });
+})
+```
+
+### Testing POST/PUT/DELETE
+
+Create interactive stories that trigger different HTTP methods:
+
+```typescript
+http.post("/api/users", async ({ request }) => {
+  const body = await request.json();
+  console.log("MSW: Received POST data:", body);
+  return HttpResponse.json({ id: 1, ...body }, { status: 201 });
+})
+```
+
+### Simulating Network Conditions
+
+Test different scenarios:
+
+```typescript
+// Random failures
+http.get("/api/flaky", () => {
+  if (Math.random() > 0.5) {
+    return HttpResponse.json({ data: "Success!" });
+  }
+  return HttpResponse.error();
+})
+
+// Timeout simulation
+http.get("/api/timeout", async () => {
+  await new Promise(resolve => setTimeout(resolve, 30000));
+  return HttpResponse.json({ data: "Too late!" });
+})
+```

package/dist/esm/components/Panel.js

@@ -0,0 +1,37 @@
+import React, { memo } from "react";
+import { AddonPanel, SyntaxHighlighter } from "storybook/internal/components";
+import { useParameter, useStorybookState, } from "storybook/internal/manager-api";
+import { PARAM_KEY } from "../constants.js";
+export const Panel = memo(function MswPanel({ api, active }) {
+    const state = useStorybookState();
+    const parameter = useParameter(PARAM_KEY);
+    if (!active || !parameter?.handlers) {
+        return null;
+    }
+    // Extract handler information for display
+    // MSW handlers have an info property that contains request, resolver, and options
+    const handlerInfo = parameter.handlers.map((handler, index) => {
+        // The handler info structure in MSW v2 is different
+        // We'll extract what we can from the handler
+        const info = handler.info;
+        // Try to extract meaningful information
+        // In MSW v2, handlers have a request property that might contain the predicate
+        return {
+            index,
+            // We'll use a generic description since MSW doesn't expose method/path directly
+            type: info?.header ? "HTTP Handler" : "Unknown Handler",
+            // You could potentially inspect the handler's toString() or other properties
+            description: `Handler ${index + 1}`,
+        };
+    });
+    return (React.createElement(AddonPanel, { active: active },
+        React.createElement("div", { style: { padding: "1rem" } },
+            React.createElement("h3", null, "Active MSW Handlers"),
+            React.createElement("p", { style: { marginBottom: "1rem", opacity: 0.7 } },
+                parameter.handlers.length,
+                " handler",
+                parameter.handlers.length !== 1 ? "s" : "",
+                " registered"),
+            React.createElement(SyntaxHighlighter, { language: "json" }, JSON.stringify(handlerInfo, null, 2)))));
+});
+//# sourceMappingURL=Panel.js.map

package/dist/esm/components/Panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.js","sourceRoot":"","sources":["../../../src/components/Panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,OAAO,EAEL,YAAY,EACZ,iBAAiB,GAClB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAQ5C,MAAM,CAAC,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,QAAQ,CAAC,EAAE,GAAG,EAAE,MAAM,EAAc;IACrE,MAAM,KAAK,GAAG,iBAAiB,EAAE,CAAC;IAClC,MAAM,SAAS,GAAG,YAAY,CAAe,SAAS,CAAC,CAAC;IAExD,IAAI,CAAC,MAAM,IAAI,CAAC,SAAS,EAAE,QAAQ,EAAE,CAAC;QACpC,OAAO,IAAI,CAAC;IACd,CAAC;IAED,0CAA0C;IAC1C,kFAAkF;IAClF,MAAM,WAAW,GAAG,SAAS,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE;QAC5D,oDAAoD;QACpD,6CAA6C;QAC7C,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;QAE1B,wCAAwC;QACxC,+EAA+E;QAC/E,OAAO;YACL,KAAK;YACL,gFAAgF;YAChF,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,iBAAiB;YACvD,6EAA6E;YAC7E,WAAW,EAAE,WAAW,KAAK,GAAG,CAAC,EAAE;SACpC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,oBAAC,UAAU,IAAC,MAAM,EAAE,MAAM;QACxB,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;YAC7B,sDAA4B;YAC5B,2BAAG,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE;gBAC7C,SAAS,CAAC,QAAQ,CAAC,MAAM;;gBACzB,SAAS,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;8BACzC;YACJ,oBAAC,iBAAiB,IAAC,QAAQ,EAAC,MAAM,IAC/B,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC,CAAC,CACnB,CAChB,CACK,CACd,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/esm/components/Tool.js

@@ -0,0 +1,28 @@
+import { LightningIcon } from "@storybook/icons";
+import React, { memo, useCallback } from "react";
+import { IconButton } from "storybook/internal/components";
+import { useGlobals } from "storybook/internal/manager-api";
+import { KEY, TOOL_ID } from "../constants.js";
+export const Tool = memo(function MyAddonSelector({ api }) {
+    const [globals, updateGlobals, storyGlobals] = useGlobals();
+    const isLocked = KEY in storyGlobals;
+    const isActive = !!globals[KEY];
+    const toggle = useCallback(() => {
+        updateGlobals({
+            [KEY]: !isActive,
+        });
+    }, [isActive, updateGlobals]);
+    // TODO: can be used to add keyboard shortcut
+    // useEffect(() => {
+    //   api.setAddonShortcut(ADDON_ID, {
+    //     label: "Toggle Baseline Grid",
+    //     defaultShortcut: ["O"],
+    //     actionName: "baseline",
+    //     showInMenu: false,
+    //     action: toggle,
+    //   });
+    // }, [toggle, api]);
+    return (React.createElement(IconButton, { key: TOOL_ID, active: isActive, disabled: isLocked, title: isActive ? "MSW Active" : "MSW Inactive", onClick: toggle },
+        React.createElement(LightningIcon, null)));
+});
+//# sourceMappingURL=Tool.js.map

package/dist/esm/components/Tool.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tool.js","sourceRoot":"","sources":["../../../src/components/Tool.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,WAAW,EAAa,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAY,UAAU,EAAE,MAAM,gCAAgC,CAAC;AACtE,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAE/C,MAAM,CAAC,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,eAAe,CAAC,EAAE,GAAG,EAAgB;IACrE,MAAM,CAAC,OAAO,EAAE,aAAa,EAAE,YAAY,CAAC,GAAG,UAAU,EAAE,CAAC;IAE5D,MAAM,QAAQ,GAAG,GAAG,IAAI,YAAY,CAAC;IACrC,MAAM,QAAQ,GAAG,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;IAEhC,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;QAC9B,aAAa,CAAC;YACZ,CAAC,GAAG,CAAC,EAAE,CAAC,QAAQ;SACjB,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC;IAE9B,6CAA6C;IAC7C,oBAAoB;IACpB,qCAAqC;IACrC,qCAAqC;IACrC,8BAA8B;IAC9B,8BAA8B;IAC9B,yBAAyB;IACzB,sBAAsB;IACtB,QAAQ;IACR,qBAAqB;IAErB,OAAO,CACL,oBAAC,UAAU,IACT,GAAG,EAAE,OAAO,EACZ,MAAM,EAAE,QAAQ,EAChB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,EAC/C,OAAO,EAAE,MAAM;QAEf,oBAAC,aAAa,OAAG,CACN,CACd,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/esm/constants.js

@@ -0,0 +1,6 @@
+export const ADDON_ID = "ds-msw-addon";
+export const TOOL_ID = `${ADDON_ID}/tool`;
+export const PANEL_ID = `${ADDON_ID}/panel`;
+export const PARAM_KEY = "msw";
+export const KEY = `${ADDON_ID}`;
+//# 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,MAAM,CAAC,MAAM,QAAQ,GAAG,cAAc,CAAC;AACvC,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,QAAQ,OAAO,CAAC;AAC1C,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,QAAQ,QAAQ,CAAC;AAC5C,MAAM,CAAC,MAAM,SAAS,GAAG,KAAK,CAAC;AAC/B,MAAM,CAAC,MAAM,GAAG,GAAG,GAAG,QAAQ,EAAE,CAAC"}

package/dist/esm/index.js

@@ -0,0 +1,3 @@
+// make it work with --isolatedModules
+export { http, HttpResponse } from "msw";
+//# 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,sCAAsC;AACtC,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,KAAK,CAAC"}

package/dist/esm/manager.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { addons, types } from "storybook/internal/manager-api";
+import { Panel } from "./components/Panel.js";
+import { Tool } from "./components/Tool.js";
+import { ADDON_ID, PANEL_ID, TOOL_ID } from "./constants.js";
+// Register the addon
+addons.register(ADDON_ID, (api) => {
+    // Register a tool in the toolbar
+    addons.add(TOOL_ID, {
+        type: types.TOOL,
+        title: "Toggle MSW",
+        match: ({ viewMode, tabId }) => !!viewMode?.match(/^(story|docs)$/),
+        render: () => React.createElement(Tool, { api: api }),
+    });
+    // Register a panel to show active handlers
+    addons.add(PANEL_ID, {
+        type: types.PANEL,
+        title: "MSW",
+        match: ({ viewMode }) => viewMode === "story",
+        render: ({ active }) => React.createElement(Panel, { api: api, active: active }),
+    });
+});
+//# sourceMappingURL=manager.js.map

package/dist/esm/manager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"manager.js","sourceRoot":"","sources":["../../src/manager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAE7D,qBAAqB;AACrB,MAAM,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE;IAChC,iCAAiC;IACjC,MAAM,CAAC,GAAG,CAAC,OAAO,EAAE;QAClB,IAAI,EAAE,KAAK,CAAC,IAAI;QAChB,KAAK,EAAE,YAAY;QACnB,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC;QACnE,MAAM,EAAE,GAAG,EAAE,CAAC,oBAAC,IAAI,IAAC,GAAG,EAAE,GAAG,GAAI;KACjC,CAAC,CAAC;IAEH,2CAA2C;IAC3C,MAAM,CAAC,GAAG,CAAC,QAAQ,EAAE;QACnB,IAAI,EAAE,KAAK,CAAC,KAAK;QACjB,KAAK,EAAE,KAAK;QACZ,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ,KAAK,OAAO;QAC7C,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,oBAAC,KAAK,IAAC,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,GAAI;KAC5D,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/esm/preset.js

@@ -0,0 +1,16 @@
+// This entry is a node-specific file, contrary to the other files in this folder which are made to be loaded in the browser.
+// You can use presets to augment the Storybook configuration
+// You rarely want to do this in addons,
+// so often you want to delete this file and remove the reference to it in package.json#exports and package.json#bunder.nodeEntries
+// Read more about presets at https://storybook.js.org/docs/addons/writing-presets
+// biome-ignore lint: untouched boilerplate
+export const viteFinal = async (config) => {
+    console.log("This addon is augmenting the Vite config");
+    return config;
+};
+// biome-ignore lint: untouched boilerplate
+export const webpack = async (config) => {
+    console.log("This addon is augmenting the Webpack config");
+    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,6HAA6H;AAE7H,6DAA6D;AAC7D,wCAAwC;AACxC,mIAAmI;AACnI,kFAAkF;AAElF,2CAA2C;AAC3C,MAAM,CAAC,MAAM,SAAS,GAAG,KAAK,EAAE,MAAW,EAAE,EAAE;IAC7C,OAAO,CAAC,GAAG,CAAC,0CAA0C,CAAC,CAAC;IACxD,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAEF,2CAA2C;AAC3C,MAAM,CAAC,MAAM,OAAO,GAAG,KAAK,EAAE,MAAW,EAAE,EAAE;IAC3C,OAAO,CAAC,GAAG,CAAC,6CAA6C,CAAC,CAAC;IAC3D,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC"}

package/dist/esm/preview.js

@@ -0,0 +1,14 @@
+import { KEY } from "./constants.js";
+import { withMSW } from "./withMSW.js";
+/**
+ * Note: if you want to use JSX in this file, rename it to `preview.tsx`
+ * and update the entry prop in tsup.config.ts to use "src/preview.tsx",
+ */
+const preview = {
+    decorators: [withMSW],
+    initialGlobals: {
+        [KEY]: true,
+    },
+};
+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":"AAYA,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC;;;GAGG;AAEH,MAAM,OAAO,GAAiC;IAC5C,UAAU,EAAE,CAAC,OAAO,CAAC;IACrB,cAAc,EAAE;QACd,CAAC,GAAG,CAAC,EAAE,IAAI;KACZ;CACF,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/esm/types.js

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

package/dist/esm/types.js.map

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

package/dist/esm/withMSW.js

@@ -0,0 +1,64 @@
+import { setupWorker } from "msw/browser";
+// src/withMSW.ts
+import React from "react";
+import { useEffect, useGlobals, useParameter, useState, } from "storybook/internal/preview-api";
+import { KEY, PARAM_KEY } from "./constants.js";
+// Singleton worker instance
+let worker = null;
+let workerPromise = null;
+const initializeWorker = async () => {
+    if (!worker) {
+        worker = setupWorker();
+        await worker.start({
+            serviceWorker: { url: "/mockServiceWorker.js" },
+            onUnhandledRequest: "bypass",
+        });
+        console.log("Worker initialized and started");
+        workerPromise = Promise.resolve(worker);
+    }
+    return workerPromise;
+};
+export const withMSW = (StoryFn) => {
+    const [isWorkerReady, setIsWorkerReady] = useState(false);
+    const [globals] = useGlobals();
+    const mswGlobals = globals[KEY];
+    const mswParameter = useParameter(PARAM_KEY);
+    const isEnabled = mswGlobals?.enabled ?? true;
+    const isDisabled = mswParameter?.disable ?? false;
+    const handlers = mswParameter?.handlers ?? [];
+    useEffect(() => {
+        console.log("useEffect running", { isEnabled, isDisabled, handlers });
+        if (!isEnabled || isDisabled) {
+            setIsWorkerReady(true); // Skip MSW setup and render immediately
+            return;
+        }
+        const setupHandlers = async () => {
+            console.log("Setting up handlers");
+            const activeWorker = await initializeWorker();
+            if (activeWorker && handlers.length > 0) {
+                activeWorker.resetHandlers();
+                activeWorker.use(...handlers);
+                console.log("Handlers applied", handlers);
+            }
+            else if (activeWorker) {
+                activeWorker.resetHandlers();
+                console.log("Handlers reset");
+            }
+            setIsWorkerReady(true); // Signal that setup is complete
+        };
+        setupHandlers();
+        return () => {
+            if (worker) {
+                worker.resetHandlers();
+                console.log("Cleanup: handlers reset");
+            }
+        };
+    }, [isEnabled, isDisabled, handlers]);
+    // Delay rendering until the worker is ready
+    if (!isWorkerReady) {
+        console.log("Waiting for MSW worker...");
+        return React.createElement("div", {}, "Loading MSW...");
+    }
+    return StoryFn();
+};
+//# sourceMappingURL=withMSW.js.map

package/dist/esm/withMSW.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"withMSW.js","sourceRoot":"","sources":["../../src/withMSW.ts"],"names":[],"mappings":"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"}

package/dist/types/components/Panel.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { type API } from "storybook/internal/manager-api";
+interface PanelProps {
+    api: API;
+    active?: boolean;
+}
+export declare const Panel: React.NamedExoticComponent<PanelProps>;
+export {};
+//# sourceMappingURL=Panel.d.ts.map

package/dist/types/components/Panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/components/Panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAEpC,OAAO,EACL,KAAK,GAAG,EAGT,MAAM,gCAAgC,CAAC;AAIxC,UAAU,UAAU;IAClB,GAAG,EAAE,GAAG,CAAC;IACT,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,KAAK,wCAwChB,CAAC"}

package/dist/types/components/Tool.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { type API } from "storybook/internal/manager-api";
+export declare const Tool: React.NamedExoticComponent<{
+    api: API;
+}>;
+//# sourceMappingURL=Tool.d.ts.map

package/dist/types/components/Tool.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tool.d.ts","sourceRoot":"","sources":["../../../src/components/Tool.tsx"],"names":[],"mappings":"AACA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAE5D,OAAO,EAAE,KAAK,GAAG,EAAc,MAAM,gCAAgC,CAAC;AAGtE,eAAO,MAAM,IAAI;SAAiD,GAAG;EAkCnE,CAAC"}

package/dist/types/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const ADDON_ID = "ds-msw-addon";
+export declare const TOOL_ID = "ds-msw-addon/tool";
+export declare const PANEL_ID = "ds-msw-addon/panel";
+export declare const PARAM_KEY = "msw";
+export declare const KEY = "ds-msw-addon";
+//# 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,eAAO,MAAM,QAAQ,iBAAiB,CAAC;AACvC,eAAO,MAAM,OAAO,sBAAqB,CAAC;AAC1C,eAAO,MAAM,QAAQ,uBAAsB,CAAC;AAC5C,eAAO,MAAM,SAAS,QAAQ,CAAC;AAC/B,eAAO,MAAM,GAAG,iBAAgB,CAAC"}

package/dist/types/index.d.ts

@@ -0,0 +1,3 @@
+export { http, HttpResponse } from "msw";
+export type { MswParameter } from "./types.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":"AACA,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,KAAK,CAAC;AACzC,YAAY,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC"}

package/dist/types/manager.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=manager.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"manager.d.ts","sourceRoot":"","sources":["../../src/manager.tsx"],"names":[],"mappings":""}

package/dist/types/preset.d.ts

@@ -0,0 +1,3 @@
+export declare const viteFinal: (config: any) => Promise<any>;
+export declare const webpack: (config: any) => Promise<any>;
+//# 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":"AAQA,eAAO,MAAM,SAAS,GAAU,QAAQ,GAAG,iBAG1C,CAAC;AAGF,eAAO,MAAM,OAAO,GAAU,QAAQ,GAAG,iBAGxC,CAAC"}

package/dist/types/preview.d.ts

@@ -0,0 +1,18 @@
+/**
+ * A decorator is a way to wrap a story in extra “rendering” functionality. Many addons define decorators
+ * in order to augment stories:
+ * - with extra rendering
+ * - gather details about how a story is rendered
+ *
+ * When writing stories, decorators are typically used to wrap stories with extra markup or context mocking.
+ *
+ * https://storybook.js.org/docs/react/writing-stories/decorators
+ */
+import type { ProjectAnnotations, Renderer } from "storybook/internal/types";
+/**
+ * Note: if you want to use JSX in this file, rename it to `preview.tsx`
+ * and update the entry prop in tsup.config.ts to use "src/preview.tsx",
+ */
+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;;;;;;;;;GASG;AACH,OAAO,KAAK,EAAE,kBAAkB,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAK7E;;;GAGG;AAEH,QAAA,MAAM,OAAO,EAAE,kBAAkB,CAAC,QAAQ,CAKzC,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/types/types.d.ts

@@ -0,0 +1,9 @@
+import type { RequestHandler } from "msw";
+export interface MswParameter {
+    handlers?: RequestHandler[];
+    disable?: boolean;
+}
+export interface MswGlobals {
+    enabled: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAE1C,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;IAE5B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,OAAO,CAAC;CAElB"}

package/dist/types/withMSW.d.ts

@@ -0,0 +1,3 @@
+import type { Renderer, PartialStoryFn as StoryFunction } from "storybook/internal/types";
+export declare const withMSW: (StoryFn: StoryFunction<Renderer>) => any;
+//# sourceMappingURL=withMSW.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"withMSW.d.ts","sourceRoot":"","sources":["../../src/withMSW.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EACV,QAAQ,EACR,cAAc,IAAI,aAAa,EAChC,MAAM,0BAA0B,CAAC;AAqBlC,eAAO,MAAM,OAAO,GAAI,SAAS,aAAa,CAAC,QAAQ,CAAC,QA+CvD,CAAC"}

package/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "@canonical/storybook-addon-msw",
+  "version": "0.9.0-experimental.21",
+  "type": "module",
+  "files": ["dist"],
+  "types": "dist/types/index.d.ts",
+  "author": {
+    "email": "webteam@canonical.com",
+    "name": "Canonical Webteam"
+  },
+  "description": "Enhances stories with back-end testing",
+  "keywords": ["storybook-addons", "storybook-addons"],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/canonical/ds25"
+  },
+  "bugs": {
+    "url": "https://github.com/canonical/ds25/issues"
+  },
+  "license": "LGPL-3.0",
+  "exports": {
+    ".": "./dist/esm/index.js",
+    "./preview": "./dist/esm/preview.js",
+    "./preset": "./dist/esm/preset.js",
+    "./manager": "./dist/esm/manager.js",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "bun run build:package",
+    "build:package": "bun run build:package:tsc",
+    "build:package:tsc": "tsc -p tsconfig.build.json",
+    "storybook": "storybook dev -p 6007 --no-open --host 0.0.0.0",
+    "check": "bun run check:biome && bun run check:ts",
+    "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"
+  },
+  "dependencies": {
+    "@canonical/styles-debug": "^0.9.0-experimental.19",
+    "@storybook/icons": "^1.2.10"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^1.9.4",
+    "@canonical/biome-config": "^0.9.0-experimental.12",
+    "@canonical/typescript-config-react": "^0.9.0-experimental.21",
+    "@types/node": "^24.0.0",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@vitejs/plugin-react": "^4.5.2",
+    "msw": "^2.10.2",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "storybook": "^9.0.8",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.5"
+  },
+  "peerDependencies": {
+    "storybook": "^9.0.8"
+  },
+  "storybook": {
+    "displayName": "DS Baseline Grid",
+    "supportedFrameworks": [
+      "react",
+      "vue",
+      "angular",
+      "web-components",
+      "ember",
+      "html",
+      "svelte",
+      "preact",
+      "react-native"
+    ],
+    "icon": "https://user-images.githubusercontent.com/321738/63501763-88dbf600-c4cc-11e9-96cd-94adadc2fd72.png"
+  },
+  "msw": {
+    "workerDirectory": ["public"]
+  }
+}