Search code examples
reactjsstorybook

Storybook saving values of properties with the same name

enter image description here

If I am at the docs page and then go to another component that has the same name on the properties it will cause the value of the control input of that property to the keep that same value.

What's even odder is that storybook isnt even using that value, the component is still rendered with the "real" value.

This same bug is causing some controls to just be "set object", "set string" etc.

If I go to the canvas page and back, or if click the "reset controls" button it will restore to default and show objects and strings as they should.

Anyone encountered this and figured out a solution?

I am suspecting it has something to do with using Typescript, and some of the documentations being automatically generated somehow, is it possible to turn this off?

Here is some example code of a story:

import Component from "@@/components/Component";
import { Meta, Story } from "@storybook/react";

const meta: Meta = {
  title: "Components/Component",
  component: Component,
};

export default meta;

const Template: Story = (args) => (
  <div style={{ maxWidth: "500px" }}>
    <Component
      header=""
      items={[]}
      {...args}
    />
  </div>
);

export const Story = Template.bind({});

Story.args = {
  header: "Header",
  list: [
    {
      name: "Test 1",
    },
    {
      name: "Test 2",
    },
  ],
};

Story.argTypes = {
  list: {
    description: "List of items",
    table: {
      type: {
        summary: "Array",
      },
    },
  },
};

Solution

  • I figured it out.

    I had several components all under the same title: "XXX/YYY" instead of "XXX/YYY/ComponentName".