Bulletproof

Basic API to create and organize static stories.

Tell a story

type alias Story =

Story Reason Renderer

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

story : String -> view -> Story 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 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 Option -> List (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 =

Program

Specific Bulletproof program to return as main.

program : (String -> 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.

owanturist/elm-bulletproof/1.0.1

Bulletproof

Tell a story

Render a component into a story

Run a programm

Modules