Add docs for MSW (#514)

packages/website/docs/a11y.mdx

@@ -10,4 +10,17 @@ Ladle is accessible. If you want to build accessible component, the wrapping env
 
 Ladle also includes an a11y testing through [axe-core](https://github.com/dequelabs/axe-core), so you can fix any a11y violations in your components.
 
+You have to enable it in your `.ladle/config.mjs`:
+
+```js
+/** @type {import('@ladle/react').UserConfig} */
+export default {
+  addons: {
+    a11y: {
+      enabled: true,
+    },
+  },
+};
+```
+
 <Image img={imgA11y} alt="A11y addon" />

packages/website/docs/addons.md

@@ -10,6 +10,7 @@ Ladle currently does not support third-party addons, but it might in the future.
 - [Controls](./controls) (only if `args` or `argTypes` are defined)
 - Dark theme
 - [Links](./links)
+- [MSW](./msw) (API mocking)
 - Preview mode
 - Right-to-left
 - [Story source code](./source)

packages/website/docs/config.md

@@ -231,7 +231,7 @@ You can enable or disable all Ladle addons (the buttons in the left bottom corne
 export default {
   addons: {
     a11y: {
-      enabled: true,
+      enabled: false,
     },
     action: {
       enabled: false,
@@ -248,6 +248,9 @@ export default {
       enabled: true,
       defaultState: "full",
     },
+    msw: {
+      enabled: false,
+    },
     rtl: {
       enabled: true,
       defaultState: false,

packages/website/docs/msw.mdx

@@ -0,0 +1,68 @@
+---
+id: msw
+title: MSW
+---
+
+Ladle has a build-in support for [MSW](https://mswjs.io/). It allows API mocking by intercepting requests on the network level.
+
+You just have to enable it in your `.ladle/config.mjs`:
+
+```js
+/** @type {import('@ladle/react').UserConfig} */
+export default {
+  addons: {
+    msw: {
+      enabled: true,
+    },
+  },
+};
+```
+
+Ladle automatically sets up the MSW service worker for you - copying it over into the public folder. Ladle also re-exports MSW library so you don't have to install it yourself.
+
+## Usage
+
+```tsx
+import type { Story } from "@ladle/react";
+import { msw } from "@ladle/react";
+import { useEffect, useState } from "react";
+
+const FETCH_URL = "/api-url.json";
+
+// Set default handlers for all stories
+export default {
+  msw: [
+    msw.rest.get(FETCH_URL, (_, res, ctx) => {
+      return res(ctx.json([{ id: 1, title: "msw post default" }]));
+    }),
+  ],
+};
+
+export const Mocked: Story = () => {
+  const [posts, setPosts] = useState([]);
+  useEffect(() => {
+    try {
+      const data = await fetch(FETCH_URL);
+      const json = await data.json();
+      setPosts(json);
+    } catch (e) {
+      console.error(e);
+    }
+  }, []);
+  return (
+    <>
+      <h1>Posts</h1>
+      <ul>
+        {posts.map((post: { id: number; title: string }) => (
+          <li key={post.id}>{post.title}</li>
+        ))}
+      </ul>
+    </>
+  );
+};
+
+// handlers for this story only
+// Mocked.msw = [];
+```
+
+You can also use MSW to mock GraphQL requests. Check their [documentation](https://mswjs.io/docs/).

packages/website/sidebars.js

@@ -30,6 +30,7 @@ module.exports = {
         "background",
         "controls",
         "links",
+        "msw",
         "source",
         "width",
       ],