Setting up Storybook

!!! TODO: Update for Storybook 7

Top Toolbar

Control stories with custom toolbar items - YouTube

Localize React with i18next in Storybook - YouTube

Internationalization

Localize React with i18next in Storybook - YouTube

• msw

Embedding an iframe in a Storybook add-on

import React from "react";
import { addons, types } from "@storybook/addons";
import { AddonPanel } from "@storybook/components";

// give a unique name for the panel
const DesignNotesPanel = ({ api }) => {
    const { storyId } = api.getUrlState();
    return (
        <iframe
            src={`../docs/${storyId}`}
            frameBorder="0"
            width="100%"
            height="100%"
        />
    );
};

addons.register(ADDON_ID, (api) => {
    addons.add(PANEL_ID, {
        type: types.PANEL,
        title: "Design Notes",
        render: ({ active, key }) => (
            <AddonPanel active={active} key={key}>
                <DesignNotesPanel api={api} />
            </AddonPanel>
        ),
    });
});

---

Last update: 2023-04-24