@storybook/addons#types TypeScript Examples

The following examples show how to use @storybook/addons#types. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: index.tsx    From devtools-ds with MIT License 6 votes vote down vote up 
/** Register addons with storybook */
export function register() {
  addons.register(ADDON_ID, () => {
    // Tools show up in the top panel

    addons.add(THEME_SELECT_TOOL_ID, {
      title: "Theme Selection",
      type: types.TOOL,
      paramKey: PARAMETER_NAME,
      render: () => <ThemeTool />,
    });
  });
}
Example #2
Source File: register.tsx    From storybook-addon-apollo-client with MIT License 6 votes vote down vote up 
addons.register(ADDON_ID, (api) => {
  addons.add(ADDON_ID, {
    paramKey: PARAM_KEY,
    render({ active = false, key }: RenderOptions) {
      return (
        <AddonPanel key={key} active={active}>
          {!active || !api.getCurrentStoryData() ? null : <ApolloClientPanel />}
        </AddonPanel>
      );
    },
    title: getTitle,
    type: types.PANEL,
  });
});
Example #3
Source File: register.tsx    From storybook-addon-preview with MIT License 6 votes vote down vote up 
addons.register("naver/storyboook-addon-preview", () => {
    addons.add("naver/storyboook-addon-preview/panel", {
        title: "Code Preview",
        type: types.PANEL,
        paramKey: "preview",
        render: ({ active, key }) => (
            <AddonPanel active={active} key={key} >
                <PreviewPanel />
            </AddonPanel>
        ),
    });
});
Example #4
Source File: register.tsx    From storybook-zeplin with MIT License 5 votes vote down vote up 
addons.register(ADDON_ID, async api => {
    const render = ({ active, key }) => {
        const zeplinLink = useParameter(PARAM_KEY, null);

        return (
            <AddonPanel active={active} key={key}>
                <MainPanel zeplinLink={zeplinLink} />
            </AddonPanel>
        );
    }

    addons.add(PANEL_ID, {
        type: types.PANEL,
        title: TITLE,
        paramKey: PARAM_KEY,
        render,
    });

    const globalContextPromise = getGlobalContext(
        window,
        {
            web: ZEPLIN_WEB_BASE,
            app: ZEPLIN_APP_BASE
        },
        Infinity // We will get client API from window object eventually, No need to timeout.
    );

    if (lt(api.getCurrentVersion().version, "5.0.0")) {
        messenger.postError(
            "ready",
            {
                message: "version is less than 5.0.0",
                extra: api.getCurrentVersion()
            }
        );
        return;
    }

    messenger.respondOnMessage("stories", async () => getStories(await globalContextPromise));
    messenger.respondOnMessage("story-detail", async (data) => getStoryDetail(data.payload?.id, await globalContextPromise));

    messenger.postMessage("ready");
});