Addon-docs: Multiple Tab

[tounsoo]

Is your feature request related to a problem? Please describe.
For design system documentation, we have a lot of content per component that is hard to be viewed in a single page format. In a high level, our doc is made up of 3 parts: Component Documentation, Component Guidelines, Pattern Guidelines(optional).

Describe the solution you'd like
With the newest addon/doc that supports MDX, it would be perfect if I can make multiple tabs of mdx with custom title - each tab with its mdx.

Describe alternatives you've considered
Without adding a new feature, alternate solution can be to create 3 stories for each component with each MDX attached.

Are you able to assist bring the feature to reality?
yes and no, I'm a designer who can use but not create code in efficient manner. But I would definitely want to contribute with whatever I can.

[patricklafrance]

A good example of that: https://microsoft.github.io/fluent-ui-react/components/accordion/definition

@domyen

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[just-andy]

We have a similar request for this feature and trying to look through the addon guides and existing docs block to see how this could be put into practice.

[domyen]

This seems possible via MDX (5.3) if you code up your own tab component. iirc I saw an implementation for this somewhere.

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[adeelibr]

This seems possible via MDX (5.3) if you code up your own tab component. iirc I saw an implementation for this somewhere.

Can you kindly share the implementation details if possible

[LucasLeandro1204]

I'm waiting for this one too!

[AndreasLoukakis]

I'm using storybook/angular and wanted to implement something similar so I was looking around for other examples. I have a setup that works in a similar way and might be helpful to share, although I'm pretty much sure it's not the best way to do it.

In my docs tab, I need to have let's say Overview - API - Examples - Changelog tabs.
I created a separate .mdx for each tab (which is much easier to work on) and on the story mdx, I used @reach/tabs (some other react tab components didn't work well for me) to setup the content. So my main story looks something like this:

import MyTabMDX from './somefile.mdx'

<Tabs >
      <TabList>
        <Tab>My tab</Tab>
      </TabList>
      <TabPanels>
        <TabPanel>
          <MyTabMDX />
        </TabPanel>
      </TabPanels>
</Tabs>

<Meta title="Tabs" decorators={...} />
<Story name="SimpleTabs">...</Story>

Have in mind you obviously can't use mdx syntax if you write the content inline in-between the TabPanel tags, but external mdx works great.

[shilman]

Nice one @AndreasLoukakis !!!

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[andywd7]

I know this is closed but I would like o know how to do this in Vue using Storybook 6? Both the tabs and importing nested mdx files as content.

[cliedelt]

@AndreasLoukakis did u get it working with canvas+stories in the mdx file?

I get an error...

[AndreasLoukakis]

Yes, it was and still is working but many updates on many libraries happened since then. Is there something in specific that would help you figure it out? what's the error?

[cliedelt]

I have a simple Story:

import { Story, Meta, ArgsTable, Preview, Canvas } from "@storybook/addon-docs";
import Rest from "./1-Rest.stories.mdx";

<Meta title="Components/Neues Template"

<Rest />

And the 1-Rest.stories.mdx with an angular story:

import { Story, Meta, ArgsTable, Preview, Canvas } from "@storybook/addon-docs";
import { moduleMetadata } from "@storybook/angular";
import { TabsComponent } from "../../../projects/ui-components-library/src/lib/modules/tabs/tabs/tabs.component.ts";

<Meta
    title="Components/Neues Template 2"
    decorators={[
        moduleMetadata({
            declarations: [TabsComponent],
        }),
    ]}
    parameters={{ test: "TEST" }}
/>

<Canvas>
    <Story
        id="components-neues-template-2--tabs"
        name="Tabs"
        args={{
            listOfTabs: ["tab1", "tab2", "..."],
            active: "tab1",
        }}
        parameters={{
            docs: { source: { code: `<libri-tabs></libri-tabs>` } },
            options: {
                showPanel: true,
            },
        }}
        height="75px"
    >
        {(args, { argTypes }) => ({
            component: TabsComponent,
            props: args,
        })}
    </Story>
</Canvas>

I get the following error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. The Element seems to be a storybook element definition?

When I rename the 1-Rest.stories.mdx to 1-Rest.mdx I get a different error. I think its because storybook adds a wrapper to mdx files. See here #9598 (comment)

@AndreasLoukakis : Do you use Stories in the mdx file? Do you use another react component to render the mdx file?

[AndreasLoukakis]

My bad, seems we have moved to a different format for the stories template since then so I can't confirm. But we did use an external React lib @reach/tabs for the tabs at the time, some others had some issues but can't remember exactly.

[sir-captainmorgan21]

@AndreasLoukakis is this still working with up to date packages? Did you have to set up any presets or anything to use the react components?

[cliedelt]

I gave up and wrote an addon... https://github.com/cliedelt/storybook-addon-docs-tabs

[sir-captainmorgan21]

@cliedelt I am using your addon. Works well. Thanks!

[sir-captainmorgan21]

@shilman could possibly use your help with @cliedelt 's tabs add-on. He is being forced to use iframes to display the tab content which is causing some overflow issues. We were wondering if you could provide any guidance with using an imported mdx stories file as a component in another mdx file. @cliedelt can provide more info too if needed.

[elpddev]

Could this be opened? Its a desired feature for us.

[vinodkola1337]

I would like to have this feature.

[Michael2109]

A lot of component libraries tend to split their pages into examples, properties, and styling.

How do we do this in Storybook 7?

I can't see how this is done using <x>.mdx files as it doesn't look like a component can be directly loaded into it.