Bulletproof.Knob

Whant to add some dynamics to your stories?

Primitives

bool : String -> Bool -> Story (Bool -> a) -> Story a

Knob of a Bool value.

storyButton : Bulletproof.Story
storyButton =
    Bulletproof.story "Button"
        (\bool ->
            button
                [ disabled bool ]
                [ text "Sign In" ]
                |> Bulletproof.fromHtml
        )
        |> Bulletproof.Knob.bool "disabled" True

string : String -> String -> Story (String -> a) -> Story a

Knob of a String value.

storyButton : Bulletproof.Story
storyButton =
    Bulletproof.story "Button"
        (\title ->
            button
                []
                [ text title ]
                |> Bulletproof.fromHtml
        )
        |> Bulletproof.Knob.string "Title" "Sign In"

type Property num

Specific property to configurate numeric knobs.

min : number -> Property number

Set minimum value for numeric knobs.

Note: Default for int and float ranges is 0

storyInput : Bulletproof.Story
storyInput =
    Bulletproof.story "Input"
        (\int float ->
            input
                [ size int
                , style "width" (pct float)
                ]
                []
                |> Bulletproof.fromHtml
        )
        |> Bulletproof.Knob.int "Size"
            200
            [ Bulletproof.Knob.min 100
            ]
        |> Bulletproof.Knob.float "Width"
            0.5
            [ Bulletproof.Knob.min 0.25
            ]

max : number -> Property number

Set maximum value for numeric knobs.

Note: Defaults for int and float ranges are 100 and 1 respectively.

storyInput : Bulletproof.Story
storyInput =
    Bulletproof.story "Input"
        (\int float ->
            input
                [ size int
                , style "width" (pct float)
                ]
                []
                |> Bulletproof.fromHtml
        )
        |> Bulletproof.Knob.int "Size"
            200
            [ Bulletproof.Knob.max 1000
            ]
        |> Bulletproof.Knob.float "Width"
            0.5
            [ Bulletproof.Knob.max 0.75
            ]

step : number -> Property number

Set step for numeric knobs.

Note: Defaults for int and float ranges are 1 and 0.01 respectively.

storyInput : Bulletproof.Story
storyInput =
    Bulletproof.story "Input"
        (\int float ->
            input
                [ size int
                , style "width" (pct float)
                ]
                []
                |> Bulletproof.fromHtml
        )
        |> Bulletproof.Knob.int "Size"
            200
            [ Bulletproof.Knob.step 100
            ]
        |> Bulletproof.Knob.float "Width"
            0.5
            [ Bulletproof.Knob.step 0.1
            ]

range : Property num

Represent numeric knob as range but not input.

storyInput : Bulletproof.Story
storyInput =
    Bulletproof.story "Input"
        (\int float ->
            input
                [ size int
                , style "width" (pct float)
                ]
                []
                |> Bulletproof.fromHtml
        )
        |> Bulletproof.Knob.int "Size"
            10
            [ Bulletproof.Knob.range
            ]
        |> Bulletproof.Knob.float "Width"
            0.5
            [ Bulletproof.Knob.range
            ]

int : String -> Int -> List (Property Int) -> Story (Int -> a) -> Story a

Knob of a Int value.

storyInput : Bulletproof.Story
storyInput =
    Bulletproof.story "Input"
        (\int ->
            input
                [ size int
                ]
                []
                |> Bulletproof.fromHtml
        )
        |> Bulletproof.Knob.int "Size" 10 []

float : String -> Float -> List (Property Float) -> Story (Float -> a) -> Story a

Knob of a Float value.

storyInput : Bulletproof.Story
storyInput =
    Bulletproof.story "Input"
        (\float ->
            input
                [ style "width" (pct float)
                ]
                []
                |> Bulletproof.fromHtml
        )
        |> Bulletproof.Knob.float "Width" 0.5 []

Customs

radio : String -> List ( String, option ) -> Story (option -> a) -> Story a

Knob of a custom value represented as radio group. The first option is selected by default.

storyInput : Bulletproof.Story
storyInput =
    Bulletproof.story "Input"
        (\inputType ->
            input
                [ type_ (Maybe.withDefault "text" inputType)
                ]
                []
                |> Bulletproof.fromHtml
        )
        |> Bulletproof.Knob.radio "Type"
            [ ( "none", Nothing )
            , ( "email", Just "email" )
            , ( "password", Just "password" )
            ]

select : String -> List ( String, option ) -> Story (option -> a) -> Story a

Knob of a custom value represented as select element. The first option is selected by default.

storyInput : Bulletproof.Story
storyInput =
    Bulletproof.story "Input"
        (\inputType ->
            input
                [ type_ (Maybe.withDefault "text" inputType)
                ]
                []
                |> Bulletproof.fromHtml
        )
        |> Bulletproof.Knob.select "Type"
            [ ( "none", Nothing )
            , ( "email", Just "email" )
            , ( "password", Just "password" )
            ]

Composites

type alias Color =

{ hex : String

, red : Int

, green : Int

, blue : Int

, r : Int

, g : Int

, b : Int

}

Simple shape contains both hex and rgb components.

color : String -> String -> Story (Color -> a) -> Story a

Knob of a Color value.

storyButton : Bulletproof.Story
storyButton =
    Bulletproof.story "Button"
        (\bgcolor ->
            button
                [ style "background" bgcolor.hex ]
                [ text "Sign In" ]
                |> Bulletproof.fromHtml
        )
        |> Bulletproof.Knob.color "Background" "#444"

type alias Date =

{ posix : Posix

, year : Int

, month : Int

, day : Int

}

Simple shape contains year, month, day and Time.Posix values.

date : String -> String -> Story (Date -> a) -> Story a

Knob of a Date value.

storyToday : Bulletproof.Story
storyToday =
    Bulletproof.story "Today"
        (\date ->
            div
                []
                [ text "Today is: "
                , text (String.fromInt date.day ++ " / ")
                , text (String.fromInt date.month ++ " / ")
                , text (String.fromInt date.year)
                ]
                |> Bulletproof.fromHtml
        )
        |> Bulletproof.Knob.date "Date" "31-12-1999"

type alias Time =

{ hours : Int

, minutes : Int

}

Simple shape contains hours and minutes

time : String -> String -> Story (Time -> a) -> Story a

Knob of a Time value.

storyNow : Bulletproof.Story
storyNow =
    Bulletproof.story "Now"
        (\time ->
            div
                []
                [ text ("Minutes: " ++ String.fromInt time.minutes)
                , text " | "
                , text ("Hours: " String.fromInt time.hours)
                ]
                |> Bulletproof.fromHtml
        )
        |> Bulletproof.Knob.time "Time" "14:01"

type alias File =

File

Alias for Elm File representation.

files : String -> Story (List File -> a) -> Story a

Knob of a List File value.

storyCountFiles : Bulletproof.Story
storyCountFiles =
    Bulletproof.story "Count Files"
        (\files ->
            text (String.fromInt (List.length files) ++ " files are ready to upload")
                |> Bulletproof.fromHtml
        )
        |> Bulletproof.Knob.files "Files"

owanturist/elm-bulletproof/1.0.1

Bulletproof.Knob

Primitives

Customs

Composites

Modules