@storybook/addons#addons JavaScript 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: register.js    From virtuoso-design-system with MIT License 6 votes vote down vote up 
addons.register(ADDON_ID, () => {
  addons.add(PANEL_ID, {
    title: "Abstract",
    type: types.PANEL,
    render: ({ active, key }) => (
      <AddonPanel active={active} key={key}>
        <Panel />
      </AddonPanel>
    ),
    paramKey: PARAM_KEY
  });
});
Example #2
Source File: register.js    From rainbow-modules with MIT License 6 votes vote down vote up 
addons.register(ADDON_ID, (api) => {
    addons.add(ADDON_ID, {
        title: 'View on Github',
        type: types.TOOLEXTRA,
        match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
        render: () => {
            const params = api.getCurrentParameter('viewOnGithub');
            if (params && params.fileName) {
                return <GithubLink fileName={params.fileName} />;
            }
            return null;
        },
    });
});
Example #3
Source File: manager.js    From polaris with Apache License 2.0 6 votes vote down vote up 
addons.setConfig({
  isFullscreen: false,
  showPanel: true,
  theme: create({
    base: 'light',

    brandTitle: 'Polaris StoryBook'
  })
});
Example #4
Source File: manager.js    From react-storybook-jest-lerna with MIT License 5 votes vote down vote up 
addons.setConfig({
  theme: theme
});
Example #5
Source File: manager.js    From react-table-library with MIT License 5 votes vote down vote up 
addons.setConfig({
  theme: create({
    brandTitle: 'React Table Library',
    brandUrl: 'https://github.com/table-library/react-table-library',
  }),
  showPanel: false,
});
Example #6
Source File: manager.js    From blade with MIT License 5 votes vote down vote up 
addons.setConfig({
  panelPosition: 'bottom',
  theme,
});
Example #7
Source File: manager.js    From blade with MIT License 5 votes vote down vote up 
addons.setConfig({
  theme,
});
Example #8
Source File: manager.js    From blade with MIT License 5 votes vote down vote up 
addons.register(ADDON_ID, () => {
  addons.add(TOOL_ID, {
    type: types.TOOL,
    title: 'Toggle Visibility Of Internal Components',
    match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
    render: InternalStoryAddon,
  });
});
Example #9
Source File: manager.js    From rainbow-modules with MIT License 5 votes vote down vote up 
addons.setConfig({
    theme: managerTheme,
});
Example #10
Source File: addons.js    From monday-ui-react-core with MIT License 5 votes vote down vote up 
addons.setConfig({
  theme
});
Example #11
Source File: manager.js    From material-ui-color with MIT License 5 votes vote down vote up 
addons.setConfig({
  theme: muiccTheme,
  isToolshown: true,
});
Example #12
Source File: manager.js    From realworld with MIT License 5 votes vote down vote up 
addons.setConfig({
  sidebar: {
    renderLabel: ({ name }) => startCase(name),
  },
});
Example #13
Source File: manager.js    From kube-design with MIT License 5 votes vote down vote up 
addons.setConfig({ theme });
Example #14
Source File: manager.js    From dnd-builder with MIT License 5 votes vote down vote up 
addons.setConfig({
  // panelPosition: 'bottom',
  theme,
});
Example #15
Source File: manager.js    From jasper with MIT License 5 votes vote down vote up 
addons.setConfig({
  theme: theme,
});
Example #16
Source File: manager.js    From vue-paycard with MIT License 5 votes vote down vote up 
addons.setConfig({ theme })
Example #17
Source File: manager.js    From denali-ember with MIT License 5 votes vote down vote up 
addons.setConfig({
  theme: DenaliTheme,
});
Example #18
Source File: manager.js    From components with MIT License 5 votes vote down vote up 
addons.setConfig({ theme });
Example #19
Source File: manager.js    From neu_ui with MIT License 5 votes vote down vote up 
addons.setConfig({
  theme: theme,
});
Example #20
Source File: manager.js    From covid-trials-dashboard with MIT License 5 votes vote down vote up 
addons.setConfig({
  theme: themes.dark,
});
Example #21
Source File: manager.js    From svelte-chartjs with MIT License 5 votes vote down vote up 
addons.setConfig({
  theme,
  panelPosition: 'right',
});
Example #22
Source File: manager.js    From proof-of-humanity-web with MIT License 5 votes vote down vote up 
addons.setConfig({
  theme: create({
    base: "dark",
    brandImage: "/kleros-logo-full-white.png",
    brandTitle: "Kleros Components",
    brandUrl: "https://kleros.io",
  }),
});
Example #23
Source File: manager.js    From HUI with MIT License 5 votes vote down vote up 
addons.setConfig({
  theme: yourTheme,
});
Example #24
Source File: manager.js    From storybook-documentation-primitives with MIT License 5 votes vote down vote up 
addons.setConfig({
  previewTabs: {
    canvas: {
      hidden: true,
    },
    'storybook/docs/panel': 'MDX',
  },
});
Example #25
Source File: manager.js    From codeursenseine.com with MIT License 5 votes vote down vote up 
addons.setConfig({
  theme: CES,
});
Example #26
Source File: config.js    From website with Apache License 2.0 5 votes vote down vote up 
addons.setConfig({
  theme: theme,
})
Example #27
Source File: addons.js    From website with Apache License 2.0 5 votes vote down vote up 
addons.setConfig({
  theme: theme,
  showPanel: false,
})