Hide stories section in storybook?

Question

how are you doing? I'm using Storybook in my Angular application.

What I need is to hide the stories section on the docs preview page. This is because the individual stories are already in the dropdown menu, and I don't want to confuse with additional information. On this page, I only want the documentation to be visible, and that's it.

Image preview

I've been researching, checking the documentation, and even using chat GPT.

But I can't seem to figure out how to remove that section.

    const meta: Meta<BtnComponent> = {
        title: 'Buttons/button',
        component: BtnComponent,
        tags: ['autodocs'],
        parameters: {
            docs: {
              description: {
                component: 'Description...',
              },
            }
        },
        argTypes: {
            type: {
                options: [CTypesButtonOption.PRIMARY, CTypesButtonOption.SECONDARY],
                control: { type: 'select' },
                description: "the type is for only determinate the style to use",
                table: {
                  defaultValue: { summary: 'primary' }
                }
            },
            buttonText: {
              control: 'text',
              description: 'Label for button',
            },      
        },
    
        render: (args: BtnComponent) => ({
          props: {
            ...args,
          },
        }),
    
    };
    
    export default meta;
    type Story = StoryObj<BtnComponent>;
    
    export const primary: Story = {
        args: {
          buttonText: 'Primary',
        },
    };
    
    export const secondary: Story = {
        args: {
          type: CTypesButtonOption.SECONDARY,
          buttonText: 'Secondary',
        },
    };

any idea?

I hope to be able to remove the section from the docs preview page.

Answer 1

You can turn of the autodocs in the storybook config:

module.exports = {
  stories: ['../stories/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
  addons: [
    '@storybook/addon-storysource',
    '@storybook/addon-essentials',
  ],
  framework: {
    name: '@storybook/vue-vite',
    options: {},
  },
  docs: {
    autodocs: false,
  }
};

Or set it on 'tag' which let's you defined on a per story basis: https://storybook.js.org/docs/react/writing-docs/autodocs#configure