As a user, I want to create new story files and trigger the generation from the manager UI. In this feature request, we want to implement the backend side to provide a server channel listener, which creates a new story file and emits an event to notify about the success/failure of the operation. ```tsx // Just a rough example of the structure of the serverChannel API implementation. // It is intended as an indication and not as a given. interface Data { // The filepath of the component for which the Story should be generated for filepath: string; // The name of the exported component componentExportName: string; // is default export default: boolean } export const experimental_serverChannel = async (channel: Channel, options: Options) => { channel.on(CREATE_STORYFILE, async (data: Data) => { // Create a new Story file // Send an event via server channel to the browser to notify about the success/failure of the operation }); return channel; }; ``` ## Requirements - In TypeScript projects, we want to create the following skeleton: ```tsx //If default export import $$ComponentName$$ from ''; //If named export // import { $$ComponentName$$ } from ''; import type { Meta, StoryObj } from '@storybook/'; const meta = { component: $$ComponentName$$ } satisfies Meta export default meta; type Story = StoryObj; export const Default: Story = {} ``` - In JavaScript projects, we want to create the following skeleton: ```js //If default export import $$ComponentName$$ from ''; //If named export // import { $$ComponentName$$ } from ''; const meta = { component: $$ComponentName$$ } export default meta; export const Default = {} ``` - If a story file already exists, we have to consider two things: If the existing story file already defines stories for the exported component for which we want to create a new story file, we will throw an error. If there is an existing story file, but the stories are written for another exported component, we create another file, following a naming schema like this: `/..stories.`. If a story file doesn't exist, we create one by applying the following naming schema: `/.stories.` ## Abstract - Prototype: https://github.com/storybookjs/storybook/pull/26402 ```[tasklist] ### Possible further encapsulated increments - [x] Provide a helper function to create the skeleton for a new Storyfile (JavaScript and TypeScript) ```

[Project SfC]: Create a server channel API to create new story files triggered by the manager UI #26658

Company

Community

Support

Connect