owanturist / elm-bulletproof / Bulletproof

Basic API to create and organize static stories.

Tell a story


type alias Story =
Story Error.Reason Renderer

Bulletproof is made of stories. Stories helps you to organize UI components and describe different states.

story : String -> view -> Story Error.Reason view

Story represents a component according inputs. To dynamically change the inputs please take a look into knobs.

staticStory : Bulletproof.Story
staticStory =
    Bulletproof.story "Simple static story"
        (button
            []
            [ text "Funny Button" ]
            |> Bulletproof.fromHtml
        )

folder : String -> List Story -> Story

Folder organizes your stories. A folder might includes stories, todos, labels and other folders

someFolder : Bulletproof.Story
someFolder =
    Bulletproof.folder "Button"
        [ Bulletproof.story "default"
            (button
                []
                [ text "Button Label" ]
            )
            |> Bulletproof.fromHtml

        --
        , Bulletproof.story "disabled"
            (button
                [ disabled True ]
                [ text "Button Label" ]
            )
            |> Bulletproof.fromHtml
        ]

todo : String -> Story

Each todo is a story which has not started yet... Helps to remember components' states you want to make as a story.

newComponent : Bulletproof.Story
newComponent =
    Bulletproof.folder "New component even without a name"
        [ Bulletproof.todo "disabled"
        , Bulletproof.todo "loading"
        , Bulletproof.todo "failed"
        ]

label : String -> Story

Labels helps to visually split stories by blocks. Does not affect on story path.

Render a component into a story


type alias Renderer =
Renderer

Specific custom type incapsulates work with generic messages of components.

fromHtml : Html msg -> Renderer

Allows your Html component to be rendered in Bulletproof.

fromElmCss : Html.Styled.Html msg -> Renderer

Allows your Html.Styled component to be rendered in Bulletproof.

Note: In case of elm-css compatibility issues please convert Html.Styled to plain Html and use fromHtml then.

fromElmUI : List Element.Option -> List (Element.Attribute msg) -> Element msg -> Renderer

Allows your Element component to be rendered in Bulletproof.

Note: In case of elm-ui compatibility issues please convert Element to plain Html and use fromHtml then.

Run a programm


type alias Program =
Main.Program

Specific Bulletproof program to return as main.

program : (String -> Platform.Cmd.Cmd msg) -> List Story -> Program

Program to represent your stories.

Note: To run a program you have to pass port to work with localStorage. I'm sorry you have to do so but it's not forever.