noredink-ui/styleguide-app/Debug/Control/View.elm
2022-05-24 13:31:50 -07:00

130 lines
4.1 KiB
Elm

module Debug.Control.View exposing (codeFromList, codeFromListWithHardcoded, codeFromListWithIndentLevel, view, withIndentLevel)
import Css exposing (..)
import Css.Media exposing (withMedia)
import Debug.Control as Control exposing (Control)
import EllieLink
import Example
import Html.Styled exposing (..)
import Html.Styled.Attributes exposing (css)
import Nri.Ui.Heading.V2 as Heading
import Nri.Ui.MediaQuery.V1 exposing (mobile)
import Nri.Ui.Text.V6 as Text
{-| -}
view :
{ ellieLinkConfig : EllieLink.Config
, name : String
, version : Int
, update : Control a -> msg
, settings : Control a
, mainType : String
, extraImports : List String
, toExampleCode : a -> List { sectionName : String, code : String }
}
-> Html msg
view config =
let
value =
Control.currentValue config.settings
ellieLink =
EllieLink.view config.ellieLinkConfig
in
div
[ css
[ displayFlex
, Css.flexWrap Css.wrap
, Css.property "gap" "10px"
, withMedia [ mobile ] [ flexDirection column, alignItems stretch ]
]
]
[ viewSection "Settings" <|
[ fromUnstyled (Control.view config.update config.settings) ]
, viewExampleCode ellieLink config (config.toExampleCode value)
]
viewExampleCode :
(EllieLink.SectionExample -> Html msg)
-> { component | name : String, version : Int, mainType : String, extraImports : List String }
-> List { sectionName : String, code : String }
-> Html msg
viewExampleCode ellieLink component values =
viewSection "Code Sample" <|
Text.smallBodyGray
[ Text.plaintext "😎 Configure the \"Settings\" on this page to update the code sample, then paste it into your editor!"
]
:: List.concatMap
(\example ->
[ details
[]
[ summary []
[ Heading.h3
[ Heading.css [ Css.display Css.inline ]
, Heading.style Heading.Small
]
[ text example.sectionName ]
]
, ellieLink
{ fullModuleName = Example.fullName component
, name = component.name
, sectionName = example.sectionName
, mainType = component.mainType
, extraImports = component.extraImports
, code = example.code
}
, code
[ css
[ display block
, whiteSpace preWrap
, Css.marginTop (px 8)
]
]
[ text example.code ]
]
]
)
values
viewSection : String -> List (Html msg) -> Html msg
viewSection name children =
section [ css [ flex (int 1) ] ]
(Heading.h2 [ Heading.style Heading.Subhead ] [ text name ]
:: children
)
codeFromListWithHardcoded : List String -> List ( String, a ) -> String
codeFromListWithHardcoded hardcodes elements =
List.map (\v -> ( v, () )) hardcodes
++ List.map (Tuple.mapSecond (always ())) elements
|> codeFromList
codeFromList : List ( String, a ) -> String
codeFromList =
codeFromListWithIndentLevel 1
codeFromListWithIndentLevel : Int -> List ( String, a ) -> String
codeFromListWithIndentLevel indent list =
let
indents =
withIndentLevel indent
in
"\n"
++ indents
++ "[ "
++ String.join ("\n" ++ indents ++ ", ") (List.map Tuple.first list)
++ "\n"
++ indents
++ "] "
withIndentLevel : Int -> String
withIndentLevel indent =
String.repeat indent " "