[Project SfC]: Create a toolbar to save arguments for existing or new stories

[valentinpalkovic]

Given the scenario where a user updates the args of a story in the control panel; the user wants to:

• edit an existing story
• create a new story (in an existing story file)

Design (WIP)

CleanShot.2024-03-27.at.12.05.57.mp4

Requirements

• As soon as arguments get updated, a toolbar should pop up to ask the user whether the changes should be saved
  • either to a new story
  • or to the existing one
• The toolbar only pops up in dev mode
• If the user wants to update an existing story, a EDIT_STORY server channel event should be emitted with the following payload:

interface Data {
  // The id of the request. It might be simply the story Title
  id: string;
  // The path of the Story
  importPath: string;
  // The whole list of set args
  args: Record<string, any>;
  // The exported name of the Story -> This information doesn't exist in the index.json yet.
  name: string;
}

• If the user wants to create a new story, a SAVE_STORY server channel event should be emitted with the following payload:

interface Data {
  // The id of the request. It might be simply the story Title
  id: string;
  // The path of the Story
  importPath: string;
  // The whole list of set args
  args: Record<string, any>;
  // The new name of the Story
  name: string;
  // The exported name of the base Story -> This information doesn't exist in the index.json yet.
  baseStoryName: string;
}

• If creating a new story is successful, the user should be redirected to the new story
• Ensure that the tooltip does not overlay controls and that all controls are accessible.
• Look closely at how controls are populated in an Angular-based Storybook (Input/Output) and test the feature there in particular.
• The toolbar should be implemented in the controls addon
• The input field for the label should be validated. We shouldn't allow names for existing exports. Second, we should only allow valid names for component exports like FooBar.

Out of scope

Depends on

Beta Give feedback

1. [Project SfC]: Create a server channel API to edit the args of a story or to create a new story #26657
   0 of 2
   feature request +1