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

[valentinpalkovic]

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.

// 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:

//If default export
import $$ComponentName$$ from '<path-to-component>';
//If named export
// import { $$ComponentName$$ } from '<path-to-component>';
import type { Meta, StoryObj } from '@storybook/<your-framework>';

const meta = {
  component: $$ComponentName$$
} satisfies Meta<typeof $$ComponentName$$>

export default meta;

type Story = StoryObj<typeof meta>;

export const Default: Story = {}

• In JavaScript projects, we want to create the following skeleton:

//If default export
import $$ComponentName$$ from '<path-to-component>';
//If named export
// import { $$ComponentName$$ } from '<path-to-component>';
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: <path-to-component-folder>/<filename-without-extension>.<name-of-the-exported-component>.stories.<file-extension-of-the-component>. If a story file doesn't exist, we create one by applying the following naming schema: <path-to-component-folder>/<filename-without-extension>.stories.<file-extension-of-the-component>

Abstract

• Prototype: Controls: Add save from controls prototype #26402

Possible further encapsulated increments

Beta Give feedback

1. Provide a helper function to create the skeleton for a new Storyfile (JavaScript and TypeScript)