Add support for MSW and API mocking

[tajo]

Docs will follow.

Get started

.ladle/config.mjs:

export default {
  addons: {
    msw: {
      enabled: true,
    },
  },
};

Note: Ladle automatically creates public/mockServiceProvider.js (in your public folder) and keeps it up to date.

Usage

import { useEffect, useState } from "react";
import type { Story } from "@ladle/react";
import { msw } from "@ladle/react";


const fetchData = async (url: string, setData: (data: any) => void) => {
  try {
    const data = await fetch(url);
    const json = await data.json();
    setData(json);
  } catch (e) {
    console.error(e);
  }
};


const FETCH_URL = "/todos.json";

export const Mocked: Story = () => {
  const [todos, setTodos] = useState([]);
  useEffect(() => {
    fetchData(FETCH_URL, setTodos);
  }, []);
  return (
    <>
      <h1>Todos</h1>
      <ul>
        {todos.map((todo: { id: number; title: string }) => (
          <li key={todo.id}>{todo.title}</li>
        ))}
      </ul>
    </>
  );
};

Mocked.msw = [
  msw.rest.get(FETCH_URL, (_, res, ctx) => {
    return res(ctx.json([{ id: 1, title: "msw todo" }]));
  }),
];

You can also define msw for all stories through

export default {
  msw: []
}

Story-level msw replaces export default msw.

We re-export the whole msw package so you can import it through @ladle/react (no need to install your own msw dep)

import { msw } from "@ladle/react";

[changeset-bot]

🦋 Changeset detected

Latest commit: e152bc9

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 13 packages

Name	Type
@ladle/react	Minor
example	Patch
test-addons	Patch
test-babel	Patch
test-config	Patch
test-config-ts	Patch
test-css	Patch
test-decorators	Patch
test-playwright	Patch
test-programmatic	Patch
test-provider	Patch
test-baseweb	Patch
test-msw	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Pages

Latest commit:	e152bc9
Status:	✅  Deploy successful!
Preview URL:	https://00fe3602.ladle.pages.dev
Branch Preview URL:	https://msw.ladle.pages.dev

View logs