mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-12-30 09:07:55 +03:00
234 lines
7.1 KiB
Elm
234 lines
7.1 KiB
Elm
module Example exposing (Example, preview, view, wrapMsg, wrapState)
|
|
|
|
import Category exposing (Category)
|
|
import Css exposing (..)
|
|
import Css.Global exposing (a, descendants)
|
|
import Html.Styled as Html exposing (Html)
|
|
import Html.Styled.Attributes as Attributes
|
|
import Html.Styled.Events as Events
|
|
import Html.Styled.Lazy as Lazy
|
|
import KeyboardSupport exposing (KeyboardSupport)
|
|
import Nri.Ui.ClickableSvg.V2 as ClickableSvg
|
|
import Nri.Ui.ClickableText.V3 as ClickableText
|
|
import Nri.Ui.Colors.V1 as Colors exposing (..)
|
|
import Nri.Ui.Container.V2 as Container
|
|
import Nri.Ui.Fonts.V1 as Fonts
|
|
import Nri.Ui.Heading.V2 as Heading
|
|
import Nri.Ui.Html.Attributes.V2 as AttributeExtras exposing (targetBlank)
|
|
import Nri.Ui.UiIcon.V1 as UiIcon
|
|
import Routes exposing (Route)
|
|
|
|
|
|
type alias Example state msg =
|
|
{ name : String
|
|
, version : Int
|
|
, state : state
|
|
, update : msg -> state -> ( state, Cmd msg )
|
|
, subscriptions : state -> Sub msg
|
|
, preview : List (Html Never)
|
|
, view : state -> List (Html msg)
|
|
, categories : List Category
|
|
, keyboardSupport : List KeyboardSupport
|
|
}
|
|
|
|
|
|
fullName : Example state msg -> String
|
|
fullName example =
|
|
"Nri.Ui." ++ example.name ++ ".V" ++ String.fromInt example.version
|
|
|
|
|
|
wrapMsg :
|
|
(msg -> msg2)
|
|
-> (msg2 -> Maybe msg)
|
|
-> Example state msg
|
|
-> Example state msg2
|
|
wrapMsg wrapMsg_ unwrapMsg example =
|
|
{ name = example.name
|
|
, version = example.version
|
|
, state = example.state
|
|
, update =
|
|
\msg2 state ->
|
|
case unwrapMsg msg2 of
|
|
Just msg ->
|
|
example.update msg state
|
|
|> Tuple.mapSecond (Cmd.map wrapMsg_)
|
|
|
|
Nothing ->
|
|
( state, Cmd.none )
|
|
, subscriptions = \state -> Sub.map wrapMsg_ (example.subscriptions state)
|
|
, preview = example.preview
|
|
, view = \state -> List.map (Html.map wrapMsg_) (example.view state)
|
|
, categories = example.categories
|
|
, keyboardSupport = example.keyboardSupport
|
|
}
|
|
|
|
|
|
wrapState :
|
|
(state -> state2)
|
|
-> (state2 -> Maybe state)
|
|
-> Example state msg
|
|
-> Example state2 msg
|
|
wrapState wrapState_ unwrapState example =
|
|
{ name = example.name
|
|
, version = example.version
|
|
, state = wrapState_ example.state
|
|
, update =
|
|
\msg state2 ->
|
|
case unwrapState state2 of
|
|
Just state ->
|
|
example.update msg state
|
|
|> Tuple.mapFirst wrapState_
|
|
|
|
Nothing ->
|
|
( state2, Cmd.none )
|
|
, subscriptions =
|
|
unwrapState
|
|
>> Maybe.map example.subscriptions
|
|
>> Maybe.withDefault Sub.none
|
|
, preview = example.preview
|
|
, view =
|
|
unwrapState
|
|
>> Maybe.map example.view
|
|
>> Maybe.withDefault []
|
|
, categories = example.categories
|
|
, keyboardSupport = example.keyboardSupport
|
|
}
|
|
|
|
|
|
preview : (Route -> msg2) -> Example state msg -> Html msg2
|
|
preview navigate =
|
|
Lazy.lazy (preview_ navigate)
|
|
|
|
|
|
preview_ : (Route -> msg2) -> Example state msg -> Html msg2
|
|
preview_ navigate example =
|
|
Container.view
|
|
[ Container.gray
|
|
, Container.css
|
|
[ Css.flexBasis (Css.px 150)
|
|
, Css.hover
|
|
[ Css.backgroundColor Colors.glacier
|
|
, Css.cursor Css.pointer
|
|
]
|
|
]
|
|
, Container.custom [ Events.onClick (navigate (Routes.Doodad example.name)) ]
|
|
, Container.html
|
|
(ClickableText.link example.name
|
|
[ ClickableText.href (exampleHref example)
|
|
, ClickableText.css [ Css.marginBottom (Css.px 10) ]
|
|
]
|
|
:: [ Html.div
|
|
[ Attributes.css
|
|
[ Css.displayFlex
|
|
, Css.flexDirection Css.column
|
|
]
|
|
]
|
|
(List.map (Html.map never) example.preview)
|
|
]
|
|
)
|
|
]
|
|
|
|
|
|
view : Maybe Route -> Example state msg -> Html msg
|
|
view previousRoute example =
|
|
Container.view
|
|
[ Container.pillow
|
|
, Container.css
|
|
[ Css.position Css.relative
|
|
, Css.margin (Css.px 10)
|
|
, Css.minHeight (Css.calc (Css.vh 100) Css.minus (Css.px 20))
|
|
, Css.boxSizing Css.borderBox
|
|
]
|
|
, Container.html
|
|
[ Lazy.lazy view_ example
|
|
, ClickableSvg.link ("Close " ++ example.name ++ " example")
|
|
UiIcon.x
|
|
[ ClickableSvg.href
|
|
(Maybe.withDefault Routes.All previousRoute
|
|
|> Routes.toString
|
|
)
|
|
, ClickableSvg.small
|
|
, ClickableSvg.css
|
|
[ Css.position Css.absolute
|
|
, Css.top (Css.px 15)
|
|
, Css.right (Css.px 15)
|
|
]
|
|
]
|
|
]
|
|
]
|
|
|
|
|
|
view_ : Example state msg -> Html msg
|
|
view_ example =
|
|
Html.div
|
|
[ -- this class makes the axe accessibility checking output easier to parse
|
|
String.replace "." "-" example.name
|
|
|> (++) "module-example__"
|
|
|> Attributes.class
|
|
, Attributes.id (String.replace "." "-" example.name)
|
|
]
|
|
[ Html.div
|
|
[ Attributes.css
|
|
[ displayFlex
|
|
, alignItems center
|
|
, justifyContent flexStart
|
|
, flexWrap Css.wrap
|
|
, Fonts.baseFont
|
|
, descendants [ Css.Global.a [ textDecoration none ] ]
|
|
]
|
|
]
|
|
[ exampleLink example
|
|
, docsLink example
|
|
, srcLink example
|
|
]
|
|
, KeyboardSupport.view example.keyboardSupport
|
|
, Html.div [] (example.view example.state)
|
|
]
|
|
|
|
|
|
exampleHref : Example state msg -> String
|
|
exampleHref example =
|
|
Routes.toString (Routes.Doodad example.name)
|
|
|
|
|
|
exampleLink : Example state msg -> Html msg
|
|
exampleLink example =
|
|
Heading.h2 []
|
|
[ ClickableText.link (fullName example)
|
|
[ ClickableText.href (exampleHref example)
|
|
, ClickableText.large
|
|
, ClickableText.custom
|
|
[ -- this data attribute is used to name the Percy screenshots
|
|
String.replace "." "-" example.name
|
|
|> Attributes.attribute "data-percy-name"
|
|
]
|
|
]
|
|
]
|
|
|
|
|
|
docsLink : Example state msg -> Html msg
|
|
docsLink example =
|
|
let
|
|
link =
|
|
"https://package.elm-lang.org/packages/NoRedInk/noredink-ui/latest/"
|
|
++ String.replace "." "-" (fullName example)
|
|
in
|
|
ClickableText.link "Docs"
|
|
[ ClickableText.linkExternal link
|
|
, ClickableText.css [ Css.marginLeft (Css.px 20) ]
|
|
]
|
|
|
|
|
|
srcLink : Example state msg -> Html msg
|
|
srcLink example =
|
|
let
|
|
link =
|
|
String.replace "." "/" (fullName example)
|
|
++ ".elm"
|
|
|> (++) "https://github.com/NoRedInk/noredink-ui/blob/master/src/"
|
|
in
|
|
ClickableText.link "Source"
|
|
[ ClickableText.linkExternal link
|
|
, ClickableText.css [ Css.marginLeft (Css.px 20) ]
|
|
]
|