diff --git a/packages/website/docs/a11y.mdx b/packages/website/docs/a11y.mdx index d7b53280..b7bc53ea 100644 --- a/packages/website/docs/a11y.mdx +++ b/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, + }, + }, +}; +``` + A11y addon diff --git a/packages/website/docs/addons.md b/packages/website/docs/addons.md index ed3583c0..6fab0847 100644 --- a/packages/website/docs/addons.md +++ b/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) diff --git a/packages/website/docs/config.md b/packages/website/docs/config.md index 394a1e2b..32c7ce99 100644 --- a/packages/website/docs/config.md +++ b/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, diff --git a/packages/website/docs/msw.mdx b/packages/website/docs/msw.mdx new file mode 100644 index 00000000..a32e7cb6 --- /dev/null +++ b/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 ( + <> +

Posts

+ + + ); +}; + +// handlers for this story only +// Mocked.msw = []; +``` + +You can also use MSW to mock GraphQL requests. Check their [documentation](https://mswjs.io/docs/). diff --git a/packages/website/sidebars.js b/packages/website/sidebars.js index f266af93..6eddcf9d 100644 --- a/packages/website/sidebars.js +++ b/packages/website/sidebars.js @@ -30,6 +30,7 @@ module.exports = { "background", "controls", "links", + "msw", "source", "width", ],