UI Labs

Appearance

Advanced Stories ​

Advanced Stories are table stories that get mounted internally by UI Labs. They allow UI Labs to have more control and info over how your stories are rendered.

These stories also allows you to add Controls to edit properties of your story in real-time.

Flipbook support

In order to support Flipbook Stories and make migration easier, UI Labs uses a very similar format flipbook uses.

This has some key differences:

  • The story library (React / Roact / Fusion) cant be provided in a storybook, only in the story itself. This limitation can be solved in the future.
  • The story name cant be provided here, therefore, the module name will be always used.
    This is because UI Labs would need to perform a Hot-Reload operation on every single story and update changes acordingly. This can be very expensive and unnecessary.

Creating an Advanced Story ​

All advanced stories share a base format table structure.

KeyTypeDescription
name   IgnoredstringModule name will be always used.
Included here for Flipbook compatibility
summary   Optionalstring Summary of the story, this allows Rich Text.
Will be shown in the story preview
controls   Optional{ string: Control }Table of control objects to be used in your story
story   Required(...args: any) => any Function that will render your story.
The implementation will vary

Let's see an example:

lua
local story = {
   summary = "This is a summary",
   controls = nil, -- We'll learn about controls later
   story = function()
      ...
   end
}

return story
ts
const story = {
   summary: "This is a summary",
   controls: undefined, // We'll learn about controls later
   story: () => {
      ...
   },
}

export = story

Story Types ​

You will need to add additional keys depending on the story type you are using.

UI Labs currently supports 3 different types of advanced stories: