documentation.json

[{"name":"UIExplorer","comment":"\n\n\n# Anatomy of the UI Explorer\n\n  - The Explorer is devided into a list of [UICategory](#UICategory) (ex: Buttons, Icons)\n  - Each Category contains some [UI](#UI) items (ex: the Buttons Category can contain ToggleButton, ButtonWithImage, SubmitButton etc...)\n  - Each [UI](#UI) item defines states (ex: Loaded, Disabled etc..) that we usually call [stories](https://storybook.js.org/basics/writing-stories/)\n\n\n# How to explore my UI ?\n\n@docs explore\n@docs exploreWithCategories\n@docs defaultConfig\n\n\n# Types\n\n@docs UI\n@docs UICategory\n@docs Model\n@docs Msg\n@docs UIExplorerProgram\n\n\n# Advanced\n\nElm UI Explorer can be extended with Plugins.\nThe package comes with core plugins and you can obviously create your own.\nTheses plugins allow to customize the appearance of the UI Explorer.\nFunctions listed below are related to that.\n\n@docs Config\n@docs CustomHeader\n@docs ViewEnhancer\n@docs MenuViewEnhancer\n@docs getCurrentSelectedStory\n\n\n# Helpers\n\n@docs category\n@docs storiesOf\n@docs createCategories\n\n","unions":[{"name":"Msg","comment":" Messages of the UI Explorer.\nYou should not interact with this Type unless you are trying to achieve more [advanced stuff](#Config) such as Plugin Creation.\n","args":["a"],"cases":[["ExternalMsg",["a"]],["SelectStory",["String.String"]],["UrlChange",["Url.Url"]],["LinkClicked",["Browser.UrlRequest"]],["NoOp",[]]]},{"name":"UI","comment":" A UI represents a view and lists a set of stories.\nFor Example : A Button with following stories (Loading, Disabled)\n","args":["a","b","c"],"cases":[]},{"name":"UICategory","comment":" Represents a family of related views.\nFor example using [Atomic Design](http://bradfrost.com/blog/post/atomic-web-design/), we can have the following categories : Atoms, Molecules etc..\n","args":["a","b","c"],"cases":[]}],"aliases":[{"name":"Config","comment":" Configuration Type used to extend the UI Explorer appearance and behaviour.\n","args":["a","b","c"],"type":"{ customModel : a, customHeader : Maybe.Maybe UIExplorer.CustomHeader, update : b -> UIExplorer.Model a b c -> UIExplorer.Model a b c, viewEnhancer : UIExplorer.ViewEnhancer a b c, menuViewEnhancer : UIExplorer.MenuViewEnhancer a b c }"},{"name":"CustomHeader","comment":" Use this type to customize the appearance of the header\n\n        config =\n            { defaultConfig\n                | customHeader =\n                    Just\n                        { title = \"This is my Design System\"\n                        , logoUrl = \"/some-fancy-logo.png\"\n                        , titleColor = Just \"#FF6E00\"\n                        , bgColor = Just \"#FFFFFF\"\n                        }\n            }\n\n","args":[],"type":"{ title : String.String, logoUrl : String.String, titleColor : Maybe.Maybe String.String, bgColor : Maybe.Maybe String.String }"},{"name":"MenuViewEnhancer","comment":" Gives a chance to Plugins to add features to the stories selection menu.\nFor example, the Menu Visibility Plugin allows to hide/show the menu :\n\n    menuViewEnhancer =\n        \\model menuView ->\n            getCurrentSelectedStory model\n                |> Maybe.map\n                    (\\( _, _, option ) ->\n                        if option.hasMenu then\n                            menuView\n\n                        else\n                            Html.text \"\"\n                    )\n                |> Maybe.withDefault (Html.text \"\")\n\nThen in your stories :\n\n    storiesOf\n        \"About\"\n        [ ( \"HideMenu\", _ -> myView { hasMenu = False } ),\n        ( \"ShowMenu\", _ -> myView { hasMenu = True } )\n        ]\n\n","args":["a","b","c"],"type":"UIExplorer.Model a b c -> Html.Html (UIExplorer.Msg b) -> Html.Html (UIExplorer.Msg b)"},{"name":"Model","comment":" Model of the UI Explorer.\nYou should not interact with this Type unless you are trying to achieve more [advanced stuff](#Config) such as Plugin Creation.\n","args":["a","b","c"],"type":"{ categories : List.List (UIExplorer.UICategory a b c), selectedUIId : Maybe.Maybe String.String, selectedStoryId : Maybe.Maybe String.String, selectedCategory : Maybe.Maybe String.String, url : Url.Url, key : Browser.Navigation.Key, customModel : a }"},{"name":"UIExplorerProgram","comment":" The Elm Program created by the UI Explorer.\n\nThe three argument should only be changed when using Plugins.\nDefault values are sufficent most of the time.\n\n  - a : Custom Model entry that can be used to store data related to Plugins\n  - b : Message Type emitted by the UIExporer main view\n  - c : Data related to Plugins and used by your Stories\n\n","args":["a","b","c"],"type":"Platform.Program () (UIExplorer.Model a b c) (UIExplorer.Msg b)"},{"name":"ViewEnhancer","comment":" Gives a chance to Plugins to add features to the main view canvas.\nFor example, the Notes plugin allows to add markdown notes for each stories:\n\n    main : UIExplorerProgram {} () PluginOption\n    main =\n        explore\n            { defaultConfig | viewEnhancer = ExplorerNotesPlugin.viewEnhancer }\n            [ storiesOf\n                \"Button\"\n                [ ( \"Primary\", \\_ -> Button.view \"Submit\" defaultButtonConfig (), {notes: \"This is the primary style :-)\"} )\n                , ( \"Secondary\", \\_ -> Button.view \"Submit\" { defaultButtonConfig | appearance = Secondary } (), {notes: \"This is the secondary style\"} )\n            ]\n\n","args":["a","b","c"],"type":"UIExplorer.Model a b c -> Html.Html (UIExplorer.Msg b) -> Html.Html (UIExplorer.Msg b)"}],"values":[{"name":"category","comment":" Adds a UI Category to a list of categories.\nConvenient for running a UI Explorer devided into categories\n\n       createCategories\n            |> category \"A Great Category\"\n                [ storiesOf\n                    \"GreatUI\"\n                    [ ( \"SomeState\", \\_ -> GreatUI.view , {} ) ]\n                ]\n\n","type":"String.String -> List.List (UIExplorer.UI a b c) -> List.List (UIExplorer.UICategory a b c) -> List.List (UIExplorer.UICategory a b c)"},{"name":"createCategories","comment":" Creates an empty list of UI Categories\n","type":"List.List (UIExplorer.UICategory a b c)"},{"name":"defaultConfig","comment":" Sensible default configuration to initialize the explorer.\n","type":"UIExplorer.Config {} b c"},{"name":"explore","comment":" Launches a UI Explorer Applicaton given a list of [UI](#UI).\nThis is the simplest way to initialize the UI Explorer app.\n\nHere we have an example of a Button that we want to explore:\n\n    import UIExplorer exposing (UIExplorerProgram, defaultConfig, explore, storiesOf)\n\n    button : String -> String -> Html.Html msg\n    button label bgColor =\n        Html.button\n            [ style \"background-color\" bgColor ]\n            [ Html.text label ]\n\n    main : UIExplorerProgram {} () {}\n    main =\n        explore\n            defaultConfig\n            [ storiesOf\n                \"Button\"\n                [ ( \"SignIn\", \\_ -> button \"Sign In\" \"pink\", {} )\n                , ( \"SignOut\", \\_ -> button \"Sign Out\" \"cyan\", {} )\n                , ( \"Loading\", \\_ -> button \"Loading please wait...\" \"white\", {} )\n                ]\n            ]\n\n","type":"UIExplorer.Config a b c -> List.List (UIExplorer.UI a b c) -> UIExplorer.UIExplorerProgram a b c"},{"name":"exploreWithCategories","comment":" Explore with Categories\n\nLaunches a UI Explorer Applicaton given a list of [UI Categories](#UICategory).\nThis is a more advanced way to initialize the UI Explorer app. It can be usefull if you want\nto organize your UI by family.\n\n    main : UIExplorerProgram {} () {}\n    main =\n        exploreWithCategories\n            defaultConfig\n            (createCategories\n                |> category \"Getting Started\"\n                    [ storiesOf\n                        \"About\"\n                        [ ( \"About\", \\_ -> Docs.toMarkdown Docs.about, { hasMenu = False } ) ]\n                    ]\n                |> category\n                    \"Guidelines\"\n                    [ storiesOf\n                        \"Principles\"\n                        [ ( \"Principles\", \\_ -> Docs.toMarkdown Docs.principles, { hasMenu = False } ) ]\n                    ]\n                |> category\n                    \"Styles\"\n                    [ storiesOf\n                        \"Colors\"\n                        [ ( \"Brand\", \\_ -> ColorGuide.viewBrandColors, { hasMenu = True } )\n                        , ( \"Neutral\", \\_ -> ColorGuide.viewNeutralColors, { hasMenu = True } )\n                        ]\n                    , storiesOf\n                        \"Typography\"\n                        [ ( \"Typography\", \\_ -> TypographyGuide.view, { hasMenu = False } )\n                        ]\n                    ]\n            )\n            defaultConfig\n\n","type":"UIExplorer.Config a b c -> List.List (UIExplorer.UICategory a b c) -> UIExplorer.UIExplorerProgram a b c"},{"name":"getCurrentSelectedStory","comment":" Get the Current Selected Story.\nUsefull to retrieve the current selected story. It can be used with MenuViewEnhancer or ViewEnhancer to hide/display contextual content.\n","type":"UIExplorer.Model a b c -> Maybe.Maybe (UIExplorer.Story a b c)"},{"name":"storiesOf","comment":" Create a UI given an ID and stories\n\n    storiesOf\n        \"GreatUI\"\n        [ ( \"Default\", \\_ -> GreatUI.view, {} )\n        , ( \"Loading\", \\_ -> GreatUI.viewLoading, {} )\n        , ( \"Failure\", \\_ -> GreatUI.viewFailure, {} )\n        ]\n\n","type":"String.String -> UIExplorer.Stories a b c -> UIExplorer.UI a b c"}],"binops":[]}]