@storybook/addons#addons TypeScript Examples

The following examples show how to use @storybook/addons#addons. 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: manager.ts From storefront with MIT License

6 votes

addons.setConfig({
  theme: create({
    base: theme.palette.mode,

    colorPrimary: theme.palette.common.white,
    colorSecondary: theme.palette.primary.main,

    appBg: '#060409',
    appContentBg: '#060409',
    appBorderColor: '#131215',

    textColor: '#aeaeae',

    barBg: '#131215',

    inputBg: '#060409',
    inputBorder: 'rgba(255, 255, 255, 0.23)',
    inputTextColor: '#aeaeae',
    inputBorderRadius: 0,

    brandTitle: 'Art With Aliens',
    brandImage: '/logo.svg',
  }),
});

Example #2

Source File: register.tsx From storybook-addon-apollo-client with MIT License

6 votes

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

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: manager.ts From alauda-ui with MIT License

5 votes

addons.setConfig({
  panelPosition: 'right',
  theme: create({
    base: 'light',
    brandTitle: 'Alauda UI',
  }),
});

Example #5

Source File: preview.ts From alauda-ui with MIT License

5 votes

channel = addons.getChannel()

Example #6

Source File: manager.ts From plug-react with MIT License

5 votes

addons.setConfig({
    theme: theme,
});

Example #7

Source File: register.ts From storybook-addon-next-router with MIT License

5 votes

addons.register(ADDON_ID, () => {
  return;
});

Example #8

Source File: register.tsx From storybook-zeplin with MIT License

5 votes

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");
});

Example #9

Source File: config.tsx From natds-rn with ISC License

5 votes

addons.setConfig({
  theme: activeTheme,
});