[Project SfC]: Create a server channel API to edit the args of a story or to create a new story

[valentinpalkovic]

As a user, I want to change arguments of a base story and either

• override the args of the selected story or
• create a new story with all set args

The goal is to create a server channel API to communicate with the backend to either edit an existing story or create a new story in an existing story file.

Scenarios

1. Scenario: Editing an existing story

// 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 id of the request. It might be simply the story Title
  id: string;
  // The path of the Story
  importPath: string;
  // The updated 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;
}

export const experimental_serverChannel = async (channel: Channel, options: Options) => {
  channel.on(EDIT_STORY, async (data: Data) => {
    // Save the new set of arguments into the existing Story
    // Send an event via server channel to the browser to notify about the success/failure of the operation
  });
  
  return channel;
};

Requirements

• If editing the story is successful, a "success" event should be emitted
• If editing the story fails, an "error" event should be emitted
• Editing the story file shouldn't change indentation or formatting (we could use recast eventually?!)
• Sanitizing the arguments. Make sure malicious code cannot be saved
• Make sure different variants of argument mutation are considered and documented

2. Scenario: Saving a new story in an existing story file

// 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 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;
}

export const experimental_serverChannel = async (channel: Channel, options: Options) => {
  channel.on(SAVE_STORY, async (data: Data) => {
    // Create a new Story
    // Send an event via server channel to the browser to notify about the success/failure of the operation
  });
  
  return channel;
};

Requirements

• If saving the new story is successful, a "success" event should be emitted
• If saving the new story fails, an "error" event should be emitted
• The new story should be saved at the end of the file
• Transform the name for the new Story to be a valid variable name (no empty space, ...)
• All "settings" of the base story should be copied to the new one (parameters, play, decorators, argTypes, loaders, render, tags) - We don't want to extend the base story in the new one. Instead, the new story should be independent.
• The new story should be typed if the base story was typed as well (consider both, type assignment while variable declaration export const StoryName: Type = {...} and type casting export const StoryName = {...} as Type
• Saving the story file shouldn't change indentation or formatting (we could use recast eventually?!)
• Sanitizing the arguments. Make sure malicious code cannot be saved

Abstract

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

Tasks

Beta Give feedback

1. 1. Scenario: Editing an existing story
2. 2. Scenario: Saving a new story in an existing story file