[Bug] Story name can conflict with imports

[mpeg]

In the loader at:

addon-svelte-csf/src/parser/svelte-stories-loader.ts

Line 51 in b0010e5

.map(([id]) => `export const ${id} = __storiesMetaData.stories[${JSON.stringify(id)}]`)

There's some generated code that exports each story by their name. This conflicts with imports so for example you can't have something like this (modified from the example code):

<script>
  import { Meta, Story, Template  } from '@storybook/addon-svelte-csf';
  import Button from './Button.svelte';
</script>

<Meta title="Button" component={Button} />

<Template let:args>
  <Button {...args}/>
</Template>

<Story name="Button" args={{ rounded: true}} />

Since it will try to declare Button again.

I believe this could be as simple as adding a prefix to the generated export name, such as "Story" and that seems to work locally but I am not familiar enough with the code and whether this would break something else to send a pull request for it.

[j3rem1e]

You can add an 'id' attribute to a Story component to override the generated story id.

Id are used in MDX docs and in the URL. I'm not sure if it's a good idea to add a magic prefix here..

[mpeg]

Agreed that the magic prefix could be confusing for complex use cases where you want to use the resulting export.

I think the current behaviour is also a bit unexpected as it does not match how other formats work, though I guess as long as the story id prop is documented on the final version it would be fine as a workaround.

Thanks for the quick response on this

[jankalfus]

This is indeed pretty unfortunate. It took me quite a while to figure out what's going on. It's pretty common to have components like PrimaryButton, SecondaryButton etc. I'd like to have a story with the same name for each one, and group them together as a "Button"/"Buttons" component. So basically, the following structure:

Button
|-- PrimaryButton
|-- SecondaryButton

The walkaround seems to be to use the name of the component in the Meta title, and call the Story something arbitrary, like "Default". That works, but looks peculiar IMHO:

PrimaryButton
|-- Default
SecondaryButton
|-- Default

[j3rem1e]

@jankalfus you just have to specify explicitly your story id

<Story id="default" name="PrimaryButton">..</Story>

[jankalfus]

That doesn't seem to work, unfortunately. If I use the following code, the story doesn't appear:

<script>
  import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
  import PrimaryButton from "../components/PrimaryButton.svelte";
</script>

<Meta
  title="Example/PrimaryButton"
  component={PrimaryButton}
  argTypes={{
    disabled: { control: "boolean" },
    label: { control: "text" },
  }}
/>

<Template let:args>
  <PrimaryButton {...args} />
</Template>

<Story
  id="default"
  name="PrimaryButton"
  args={{ label: "text", disabled: false }}
/>

On the other hand, this one:

<script>
  import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
  import PrimaryButton from "../components/PrimaryButton.svelte";
</script>

<Meta
  title="Example/PrimaryButton"
  component={PrimaryButton}
  argTypes={{
    disabled: { control: "boolean" },
    label: { control: "text" },
  }}
/>

<Template let:args>
  <PrimaryButton {...args} />
</Template>

<Story name="Default" args={{ label: "text", disabled: false }} />

does work:

[j3rem1e]

In csf the stories are named exports. You can't export "default", it's already used. You have to choose another id

[shilman]

You can set the display name to default in CSF using the storyName annotation.

Also to achieve the nav you want, check out single-story hoisting

https://storybook.js.org/docs/react/writing-stories/naming-components-and-hierarchy/