[{"name":"UIBook","comment":" A book that tells the story of the UI elements of your Elm application.\n\n\n# Start with a chapter.\n\nYou can create one chapter for each one of your UI elements and split it in sections to showcase all of their possible variants.\n\n    buttonsChapter : UIChapter (Html UIBookMsg)\n    buttonsChapter =\n        chapter \"Buttons\"\n            |> withSections\n                [ ( \"Default\", button [] [] )\n                , ( \"Disabled\", button [ disabled True ] [] )\n                ]\n\nDon't be limited by this pattern though. A chapter and its sections may be used however you want. For instance, it's useful to have a catalog of possible colors or branding guidelines in your documentation. Why not dedicate a chapter to it?\n\n@docs chapter, withSection, withSections, UIChapter\n\n\n# Then, create your book.\n\nYour UIBook is a collection of chapters.\n\n    book : Book\n    book =\n        book \"MyApp\"\n            |> withChapters\n                [ colorsChapter\n                , buttonsChapter\n                , inputsChapter\n                , chartsChapter\n                ]\n\nThis returns a standard `Browser.application`. You can choose to use it just as you would any Elm application – however, this package can also be added as a NPM dependency to be used as zero-config dev server to get things started.\n\nIf you want to use our zero-config dev server, just install `elm-ui-book` as a devDependency then run `npx elm-ui-book {MyBookModule}.elm` and you should see your brand new Book running on your browser.\n\n@docs book, withChapters, UIBook, UIBookMsg\n\n\n# Customize the book's style.\n\nYou can configure your book with a few extra settings to make it more personalized. Want to change the theme color so it's more fitting to your brand? Sure. Want to use your app's logo as the header? Go crazy.\n\n    book \"MyApp\"\n        |> withColor \"#007\"\n        |> withSubtitle \"Design System\"\n        |> withChapters []\n\n**Important**: Please note that you always need to use the `withChapters` functions the final step of your setup.\n\n@docs withColor, withSubtitle, withHeader\n\n\n# Integrate it with elm-css, elm-ui and others.\n\nIf you're building your UI elements with something other than [elm/html](https://package.elm-lang.org/packages/elm/html/latest), no worries. Just specify a renderer function that will transform your custom elements to what Elm's runtime is expecting and everything is going to be just fine. For instance, if you're using `elm-ui`, you would do something like this:\n\n    import Element exposing (layout)\n\n    book \"MyApp\"\n        |> withRenderer (layout [])\n        |> withChapters []\n\n**Important**: Please note that you always need to use the `withChapters` functions the final step of your setup.\n\n@docs withRenderer\n\n\n# Interact with it.\n\nFor now, you can't really create interactive elements inside your UIBook. However, you can showcase their different states and log actions that represent the intent to move between states. Something like this:\n\n    -- Will log \"Clicked!\" after pressing the button\n    button [ onClick <| logAction \"Clicked!\" ] []\n\n    -- Will log \"Input: x\" after pressing the \"x\" key\n    input [ onInput <| logActionWithString \"Input: \" ] []\n\n@docs logAction, logActionWithString, logActionWithInt, logActionWithFloat, logActionMap\n\n","unions":[{"name":"UIBookMsg","comment":" The internal messages used by UIBook.\n","args":[],"cases":[]},{"name":"UIChapter","comment":" Each chapter needs to define their \"type\" of Html. So for plain-html applications this would look like:\n\n    UIChapter (Html UIBookMsg)\n\nBut if you're using something like `elm-ui` this would be:\n\n    UIChapter (Element UIBookMsg)\n\n**Just be sure to use the same type throughout your book.**\n\n","args":["html"],"cases":[]}],"aliases":[{"name":"UIBook","comment":" Defines an UI Docs application.\n","args":[],"type":"Platform.Program () UIBook.Model UIBook.UIBookMsg"}],"values":[{"name":"book","comment":" Kickoff the creation of an UIBook application.\n","type":"String.String -> UIBook.UIBookConfig (Html.Html UIBook.UIBookMsg)"},{"name":"chapter","comment":" Creates a chapter with some title.\n","type":"String.String -> UIBook.UIChapterConfig html"},{"name":"logAction","comment":" Logs an action that takes no inputs. e.g. onClick\n","type":"String.String -> UIBook.UIBookMsg"},{"name":"logActionMap","comment":" Logs an action that takes one generic input that can be transformed into a String.\n\n    eventToString : Event -> String\n    eventToString event =\n        case event of\n            Start ->\n                \"Start\"\n\n            Finish ->\n                \"Finish\"\n\n    myCustomElement {\n        onEvent =\n            logActionMap \"My Custom Element: \" eventToString\n    }\n\n","type":"String.String -> (value -> String.String) -> value -> UIBook.UIBookMsg"},{"name":"logActionWithFloat","comment":" Logs an action that takes one Float input.\n","type":"String.String -> String.String -> UIBook.UIBookMsg"},{"name":"logActionWithInt","comment":" Logs an action that takes one Int input.\n","type":"String.String -> String.String -> UIBook.UIBookMsg"},{"name":"logActionWithString","comment":" Logs an action that takes one string input. e.g. onInput\n","type":"String.String -> String.String -> UIBook.UIBookMsg"},{"name":"withChapters","comment":" List the chapters that should be displayed on your book.\n\n**Should be used as the final step on your setup.**\n\n","type":"List.List (UIBook.UIChapter html) -> UIBook.UIBookConfig html -> UIBook.UIBook"},{"name":"withColor","comment":" Customize your docs to fit your app's theme.\n","type":"String.String -> UIBook.UIBookConfig html -> UIBook.UIBookConfig html"},{"name":"withHeader","comment":" Replace the entire header with a custom one.\n\n    book \"MyApp\"\n        |> withHeader (h1 [ style \"color\" \"crimson\" ] [ text \"My App\" ])\n        |> withChapters []\n\n","type":"Html.Html UIBook.UIBookMsg -> UIBook.UIBookConfig html -> UIBook.UIBookConfig html"},{"name":"withRenderer","comment":" When using a custom HTML library like elm-css or elm-ui, use this to easily turn all your chapters into plain HTML.\n","type":"(html -> Html.Html UIBook.UIBookMsg) -> UIBook.UIBookConfig other -> UIBook.UIBookConfig html"},{"name":"withSection","comment":" Used for chapters with a single section.\n","type":"html -> UIBook.UIChapterConfig html -> UIBook.UIChapter html"},{"name":"withSections","comment":" Used for chapters with multiple sections.\n","type":"List.List ( String.String, html ) -> UIBook.UIChapterConfig html -> UIBook.UIChapter html"},{"name":"withSubtitle","comment":" Replace the default \"UI Docs\" subtitle with a custom one.\n","type":"String.String -> UIBook.UIBookConfig html -> UIBook.UIBookConfig html"}],"binops":[]}]