Search code examples
storybook

Storybook: How to force Storybook to NOT create a folder for my component

For all my other components, Storybook shows the story directly (there is no subfolder). But in my component called "IconButton", it creates a subfolder and then shows the actual file. How can I make it not show a folder?

All my other files look like this

import React from "react";
import { ComponentMeta, ComponentStory } from "@storybook/react";

import { IconButton } from "./IconButton";
import { IconButtonDemo } from "./IconButton.demo";

export default {
    title: "Atoms/IconButton",
    component: IconButton,
} as ComponentMeta<typeof IconButton>;

const IconButtonComponentStory: ComponentStory<typeof IconButton> = () => <IconButtonDemo />;

export const _IconButton = IconButtonComponentStory.bind({});

enter image description here

Solution

  • This is happpening because story names are start cased automatically. So the name IconButton that you intent to give as name for your story becomes Icon Button when rendered.

    The solution is to set a Story name manuly and make it match the Component name.

    _IconButton.storyName = "IconButton";

    should fix your problem;