storybook-addon-docs-tabs

A Storybook addon that adds tabs to the Docs Addon.

Note: This addon is a little bit hacky. The storybook api does not support something like this at all. But you can still use this addon because it is still using mdx and its "normal" api.

Getting started

1. Install

1npm install --save-dev storybook-addon-docs-tabs
2# yarn add -D storybook-addon-docs-tabs

2. Add new Container to .storybook/preview.js

1import { DocsContainer } from "@storybook/addon-docs/blocks";
2import { TabContainer } from "storybook-addon-docs-tabs";
3
4export const parameters = {
5  docs: {
6    container: ({ children, context }) => (
7      <DocsContainer context={context}>
8        <TabContainer context={context}>{children}</TabContainer>
9      </DocsContainer>
10    ),
11  },
12};

2. Hide Tab Stories from the sidebar in .storybook/manager-head.html

1<style>
2  [id^="hidden"],
3  [data-parent-id^="hidden"] {
4    display: none !important;
5  }
6</style>

3. Add jsx in .storybook/tsconfig.json

Optional: If you havent configured jsx

1{
2  "extends": "../tsconfig.app.json",
3  "compilerOptions": {
4    "jsx": "react"
5  }
6}

4. Add react preset in .storybook/.babelrc

Optional: If you havent configured jsx

1{
2  "presets": [["@babel/react", { "runtime": "automatic" }]]
3}

Usage in story

Set id of story

Unfortunately this is necessary because of the limited Storybook api. Any unique string can be used as id.

Prefix the stories title with hidden/ to hide it in the sidebar.

1import { Meta } from "@storybook/addon-docs";
2
3<Meta
4  id="simple-button-implementation"
5  title="hidden/SimpleButtonImplementation"
6  component={TestComponent}
7/>

Import Tabs

1import { Meta } from "@storybook/addon-docs";
2import * as DesignTab from "./design-tab.stories.mdx";
3import * as ImplementationTab from "./implementation-tab.stories.mdx";
4
5<Meta
6  title="Example/Tab Example"
7  parameters={{
8    tabs: [
9      { label: "Design", mdx: DesignTab },
10      { label: "Implementation", mdx: ImplementationTab },
11    ],
12  }}
13/>

Add Header CTA and Footer

You can extend the TabContainer with a custom call to action and a custom footer which is displayed on every page.

property	input type	description
footerElement	JSX.Element	Displays your component on every page bottom
additionalHeaderElement	JSX.Element	Displays your component inside the header next to the title

Example

1{container: ({ children, context }) => (
2  <DocsContainer context={context}>
3    <TabContainer
4      context={context}
5      footerElement={<Footer />}
6      additionalHeaderElement={<Header />}
7    >
8      {children}
9    </TabContainer>
10  </DocsContainer>
11)},