Historias Avanzadas

Las historias avanzadas deben de ser proporcionadas en forma de tabla y se montan internamente por UI Labs. Estas permiten a UI Labs tener más control e información sobre cómo se renderizan tus historias.

Este tipo de historias también te permiten añadir Controles para editar las propiedades de tu historia en tiempo real.

Soporte para Flipbook

Para agregar soporte de Flipbook y facilitar la migración, UI Labs utiliza un formato bastante similar al de flipbook.

Esto tiene algunas diferencias clave:

No se puede proporcionar una biblioteca (React / Roact / Fusion) globalmente en un Storybook, solo individualmente en cada historia. Esta limitación podría solucionarse en el futuro.
En UI Labs el nombre de la historia no puede aqui, por lo que siempre se utilizará el nombre del script.
Esto se debe a que UI Labs necesitaría realizar una operación de Hot-Reload en cada historia y actualizar los cambios. Esto puede ser muy costoso e innecesario.

Cómo Crear una Historia Avanzada

Todas las historias avanzadas comparten una estructura base.

Indice	Tipo	Descripción
name Ignorado	`string`	Siempre se utilizará el nombre del módulo. Se incluye aquí por compatibilidad con Flipbook.
summary Opcional	`string`	Resumen de la historia, puede contener Rich Text. Se mostrará en la vista previa de la historia
controls Opcional	`{ string: Control }`	Tabla de controles que se utilizarán en tu historia
story Obligatorio	`(...args: any) => any`	La función encargada de renderizar tu historia. La implementación variará

Observemos un ejemplo:

LuauRoblox-TS

lua

local story = {
   summary = "Esto es un resumen",
   controls = nil, -- Aprenderemos sobre los controles más adelante
   story = function()
      ...
   end
}

return story

const story = {
   summary: "Esto es un resumen",
   controls: undefined, // Aprenderemos sobre los controles más adelante
   story: () => {
      ...
   },
}

export = story