Basic API to create and organize static stories.
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.
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 convertHtml.Styled
to plainHtml
and usefromHtml
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 convertElement
to plainHtml
and usefromHtml
then.
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.