Story index: Warn on storyName in CSF3 exports

[joshwooding]

Issue: #17548

What I did

Updated CSFFile parsing to check for storyName in CSF3 objects.

How to test

• Is this testable with Jest or Chromatic screenshots?
• Does this need a new example in the kitchen sink apps?
• Does this need an update to the documentation?

If your answer is yes to any of these, please make sure to include it in your PR.

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 084043e. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

---

✅ Successfully ran 1 target

• nx run-many --target=prepare --all --parallel=2 --max-parallel=15 -- --optimized

---

Sent with 💌 from NxCloud.

[IanVS]

I tested this out in my own app, and it worked great.

[shilman]

Hi @joshwooding thanks for the fix! Code & test both look good. 👍

However, I'd like to discuss the change before merging.

The reason storyName is not supported is because the annotation has been renamed to name in CSF.

It would have been called name in the first place, except that in CSF2 the following errors in in JS due to name being a reserved property:

export const Foo = (args) => { ... };
Foo.name = 'FooBar'; // error

You can see that the CSF parser supports storyName for CSF2 here:

storybook/lib/csf-tools/src/CsfFile.test.ts

Lines 141 to 157 in 3bba2d7

	it('storyName annotation', () => {
	expect(
	parse(
	dedent`
	export default { title: 'foo/bar' };
	export const A = () => {};
	A.storyName = 'Some story';
	`
	)
	).toMatchInlineSnapshot(`
	meta:
	title: foo/bar
	stories:
	- id: foo-bar--a
	name: Some story
	`);
	});

And you can also see that the codemod from CSF2 to CSF3 updates it here:

storybook/lib/codemod/src/transforms/__tests__/csf-2-to-3.test.ts

Lines 34 to 56 in 3bba2d7

	it('should move annotations into story objects', () => {
	expect(
	jsTransform(dedent`
	export default { title: 'Cat' };
	export const A = () => <Cat />;
	A.storyName = 'foo';
	A.parameters = { bar: 2 };
	A.play = () => {};
	`)
	).toMatchInlineSnapshot(`
	export default {
	title: 'Cat',
	};
	export const A = {
	render: () => <Cat />,
	name: 'foo',
	parameters: {
	bar: 2,
	},
	play: () => {},
	};
	`);
	});

In the interest of keeping CSF3, I'd rather detect storyName and throw an informative error asking the user to rename it to name.

What do you think? I don't feel too strongly about this.

[IanVS]

For my own use case, I have a mix of CSF2 and (mostly) CSF3, and I have a helper component which needs to be able to read the name of the story. I am using storyName because I figured out that the name wasn't what I thought it was (in CSF2), and it turned out to be the name of the function, which was minimized in production. If CSF3 does not support storyName, I think I can still make it work, by checking whether the story is a function or an object, and using either storyName or name accordingly. I didn't realize this was a change, it would be great to have some information about this kind of breaking-ish change in https://github.com/storybookjs/storybook/blob/next/MIGRATION.md, and maybe some CSF3-specific docs as well (maybe they exist and I haven't found them).

It would also be great if we could somehow find some folks who are willing to help step in and triage issues like #17548, which it sounds like could have been closed out a long time ago by saying to use name instead of storyName.

[IanVS]

Oh also, I'm not sure why, but I have this type definition, which also made me think that storyName was fine to use:

export declare type StoryAnnotations<TFramework extends AnyFramework = AnyFramework, TArgs = Args> = BaseAnnotations<TFramework, TArgs> & {
    name?: StoryName;
    storyName?: StoryName;
    play?: PlayFunction<TFramework, TArgs>;
    story?: Omit<StoryAnnotations<TFramework, TArgs>, 'story'>;
};

StoryAnnotations is what is used by StoryObj, which I thought was CSF3. This is in @storybook/csf@0.0.2--canary.4566f4d.1, which I'm not sure what that actually corresponds to, or if it's the latest, or if something needs to be updated.

[shilman]

@jonniebigodes has a PR in progress with CSF3 docs. Getting people upgraded smoothly will be a focus of SB7 when CSF3 will become the recommended syntax.

As for the CSF types, that looks like an incorrect type. I'll see if I can get it worked out with @tmeasday and clean up the versions. Re: triage, I will try to get back on it as we grow the dev team. I was doing triage every day for the past few years, but at some point late last year I got overwhelmed and haven't been able to get back on top of it since then.

[shilman]

LGTM. Thanks for your patience on this 🙏