Storybook

Partas.Solid.Storybook is a thin binding to Storybook, through Kachurun's solid-storybook plugin.

It will not get much more work: stories are moving to the plugin's own [<PartasStorybook>] attribute, described in Storybook support.

Installation

This package has no Femto helpers. Set up Storybook before you add it.

Create a solid-storybook project

npx create-solid-storybook [path/project]

cd [path/project]

npm install

npm run storybook

If that works, set up your Fable project in the same directory.

Running Fable and Storybook

Compile into the stories/ directory, so styling and imports resolve as Storybook expects. Storybook only picks up files ending .stories.jsx, so the other compiled files do not get in the way.

fable watch -c Release -o stories -e .jsx --run storybook dev -p 6006

Making a story

See Storybook's Component Story Format.

Create a source file in the stories/ directory with a .stories suffix:

Button.stories.fs

Define the component meta, and make it the default export.

[<SolidComponent>] is required for !@ to render correctly:

[<SolidComponent>]
[<ExportDefault>]
let private meta: Meta<Button> = Meta.make [
    Meta.component' !@Button
    Meta.args [
        Args.make "children" "Button"
        Args.make "variant" Button.Variant.Default
        Args.make "size" Button.Size.Default
    ]
    Meta.parameters [
        Parameters.layout StorybookLayout.Centered
    ]
    Meta.argTypes [
        ArgTypes.make "variant" <| ArgType(
            control = Control(
                ``type`` = ControlType.Select,
                labels = createObj [
                    !!Button.Variant.Default ==> nameof Button.Variant.Default
                    // ...
                ]
            ),
            table = ArgType.Table(
                category = "variants",
                defaultValue = ArgType.Table.Value(summary = nameof Button.Variant.Default)
            ),
            options = [| Button.Variant.Default; Button.Variant.Secondary |]
        )
    ]
]

// A trick to get completion for attributes and args
[<Global>]
let btn = Button()

let Default = meta.make [
    Story.args [
        Args.make (nameof btn.variant) Button.Variant.Default
    ]
    Story.render (fun props -> div() { Button().spread props })
    // ^-- when you use render, spread the props into
    // the tested component
]

Example

To see Partas.Solid and Storybook together, build the storybook in the Partas.Solid.UI repository.

Edit this page