2022-03-24 02:05:50 +03:00
|
|
|
module Example exposing (Example, fullName, preview, view, wrapMsg, wrapState)
|
2020-03-31 23:20:03 +03:00
|
|
|
|
2022-03-25 23:55:26 +03:00
|
|
|
import Accessibility.Styled.Aria as Aria
|
2022-03-29 00:52:25 +03:00
|
|
|
import Accessibility.Styled.Widget as Widget
|
2020-03-31 23:20:03 +03:00
|
|
|
import Category exposing (Category)
|
2020-03-31 23:33:05 +03:00
|
|
|
import Css exposing (..)
|
2022-03-29 20:19:32 +03:00
|
|
|
import EllieLink
|
2020-03-31 23:20:03 +03:00
|
|
|
import Html.Styled as Html exposing (Html)
|
2020-03-31 23:33:05 +03:00
|
|
|
import Html.Styled.Attributes as Attributes
|
2021-11-05 21:13:28 +03:00
|
|
|
import Html.Styled.Events as Events
|
2020-10-16 17:24:38 +03:00
|
|
|
import Html.Styled.Lazy as Lazy
|
2020-06-20 00:45:32 +03:00
|
|
|
import KeyboardSupport exposing (KeyboardSupport)
|
2021-11-06 01:16:54 +03:00
|
|
|
import Nri.Ui.ClickableSvg.V2 as ClickableSvg
|
2021-11-05 20:42:52 +03:00
|
|
|
import Nri.Ui.ClickableText.V3 as ClickableText
|
2022-03-15 21:06:13 +03:00
|
|
|
import Nri.Ui.Colors.V1 as Colors
|
2021-11-05 20:35:58 +03:00
|
|
|
import Nri.Ui.Container.V2 as Container
|
2021-11-05 20:42:52 +03:00
|
|
|
import Nri.Ui.Heading.V2 as Heading
|
2021-11-06 01:16:54 +03:00
|
|
|
import Nri.Ui.UiIcon.V1 as UiIcon
|
2020-03-31 23:20:03 +03:00
|
|
|
|
|
|
|
|
|
|
|
type alias Example state msg =
|
|
|
|
{ name : String
|
2020-09-09 21:43:10 +03:00
|
|
|
, version : Int
|
2020-03-31 23:20:03 +03:00
|
|
|
, state : state
|
|
|
|
, update : msg -> state -> ( state, Cmd msg )
|
|
|
|
, subscriptions : state -> Sub msg
|
2021-11-05 21:19:08 +03:00
|
|
|
, preview : List (Html Never)
|
2022-03-29 20:19:32 +03:00
|
|
|
, view : EllieLink.Config -> state -> List (Html msg)
|
2020-03-31 23:20:03 +03:00
|
|
|
, categories : List Category
|
2020-06-20 00:45:32 +03:00
|
|
|
, keyboardSupport : List KeyboardSupport
|
2020-03-31 23:20:03 +03:00
|
|
|
}
|
2020-03-31 23:33:05 +03:00
|
|
|
|
|
|
|
|
2022-03-24 02:05:50 +03:00
|
|
|
fullName : { example | version : Int, name : String } -> String
|
2021-11-05 20:35:58 +03:00
|
|
|
fullName example =
|
|
|
|
"Nri.Ui." ++ example.name ++ ".V" ++ String.fromInt example.version
|
|
|
|
|
|
|
|
|
2020-04-01 02:30:18 +03:00
|
|
|
wrapMsg :
|
|
|
|
(msg -> msg2)
|
|
|
|
-> (msg2 -> Maybe msg)
|
2020-04-01 00:39:34 +03:00
|
|
|
-> Example state msg
|
2020-04-01 02:30:18 +03:00
|
|
|
-> Example state msg2
|
|
|
|
wrapMsg wrapMsg_ unwrapMsg example =
|
2020-04-01 00:39:34 +03:00
|
|
|
{ name = example.name
|
2020-09-09 21:43:10 +03:00
|
|
|
, version = example.version
|
2020-04-01 02:30:18 +03:00
|
|
|
, state = example.state
|
2020-04-01 00:39:34 +03:00
|
|
|
, update =
|
2020-04-01 02:30:18 +03:00
|
|
|
\msg2 state ->
|
|
|
|
case unwrapMsg msg2 of
|
|
|
|
Just msg ->
|
2020-04-01 00:39:34 +03:00
|
|
|
example.update msg state
|
2020-04-01 02:30:18 +03:00
|
|
|
|> Tuple.mapSecond (Cmd.map wrapMsg_)
|
2020-04-01 01:16:10 +03:00
|
|
|
|
|
|
|
Nothing ->
|
2020-04-01 02:30:18 +03:00
|
|
|
( state, Cmd.none )
|
|
|
|
, subscriptions = \state -> Sub.map wrapMsg_ (example.subscriptions state)
|
2021-11-05 21:48:09 +03:00
|
|
|
, preview = example.preview
|
2022-03-29 20:19:32 +03:00
|
|
|
, view =
|
|
|
|
\ellieLinkConfig state ->
|
|
|
|
List.map (Html.map wrapMsg_)
|
|
|
|
(example.view ellieLinkConfig state)
|
2020-04-01 02:30:18 +03:00
|
|
|
, categories = example.categories
|
2020-06-20 00:45:32 +03:00
|
|
|
, keyboardSupport = example.keyboardSupport
|
2020-04-01 02:30:18 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
wrapState :
|
|
|
|
(state -> state2)
|
|
|
|
-> (state2 -> Maybe state)
|
|
|
|
-> Example state msg
|
|
|
|
-> Example state2 msg
|
|
|
|
wrapState wrapState_ unwrapState example =
|
|
|
|
{ name = example.name
|
2020-09-09 21:43:10 +03:00
|
|
|
, version = example.version
|
2020-04-01 02:30:18 +03:00
|
|
|
, state = wrapState_ example.state
|
|
|
|
, update =
|
|
|
|
\msg state2 ->
|
2020-04-01 01:16:10 +03:00
|
|
|
case unwrapState state2 of
|
|
|
|
Just state ->
|
2020-04-01 02:30:18 +03:00
|
|
|
example.update msg state
|
|
|
|
|> Tuple.mapFirst wrapState_
|
2020-04-01 01:16:10 +03:00
|
|
|
|
2020-04-01 00:39:34 +03:00
|
|
|
Nothing ->
|
2020-04-01 02:30:18 +03:00
|
|
|
( state2, Cmd.none )
|
|
|
|
, subscriptions =
|
|
|
|
unwrapState
|
|
|
|
>> Maybe.map example.subscriptions
|
|
|
|
>> Maybe.withDefault Sub.none
|
2021-11-05 21:48:09 +03:00
|
|
|
, preview = example.preview
|
2020-04-01 02:30:18 +03:00
|
|
|
, view =
|
2022-03-29 20:19:32 +03:00
|
|
|
\ellieLinkConfig state ->
|
|
|
|
Maybe.map (example.view ellieLinkConfig) (unwrapState state)
|
|
|
|
|> Maybe.withDefault []
|
2020-04-01 00:39:34 +03:00
|
|
|
, categories = example.categories
|
2020-06-20 00:45:32 +03:00
|
|
|
, keyboardSupport = example.keyboardSupport
|
2020-04-01 00:39:34 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
|
2022-05-20 23:47:40 +03:00
|
|
|
preview :
|
|
|
|
{ navigate : Example state msg -> msg2
|
|
|
|
, exampleHref : Example state msg -> String
|
|
|
|
}
|
|
|
|
-> Example state msg
|
|
|
|
-> Html msg2
|
|
|
|
preview navConfig =
|
|
|
|
Lazy.lazy (preview_ navConfig)
|
2021-11-05 20:35:58 +03:00
|
|
|
|
|
|
|
|
2022-05-20 23:47:40 +03:00
|
|
|
preview_ :
|
|
|
|
{ navigate : Example state msg -> msg2
|
|
|
|
, exampleHref : Example state msg -> String
|
|
|
|
}
|
|
|
|
-> Example state msg
|
|
|
|
-> Html msg2
|
|
|
|
preview_ { navigate, exampleHref } example =
|
2021-11-05 20:35:58 +03:00
|
|
|
Container.view
|
2021-11-05 21:05:08 +03:00
|
|
|
[ Container.gray
|
|
|
|
, Container.css
|
|
|
|
[ Css.flexBasis (Css.px 150)
|
|
|
|
, Css.hover
|
|
|
|
[ Css.backgroundColor Colors.glacier
|
|
|
|
, Css.cursor Css.pointer
|
|
|
|
]
|
|
|
|
]
|
2022-05-20 22:48:54 +03:00
|
|
|
, Container.custom [ Events.onClick (navigate example) ]
|
2021-11-05 21:05:08 +03:00
|
|
|
, Container.html
|
2021-11-05 21:19:08 +03:00
|
|
|
(ClickableText.link example.name
|
2021-11-05 21:05:08 +03:00
|
|
|
[ ClickableText.href (exampleHref example)
|
2021-11-05 21:59:39 +03:00
|
|
|
, ClickableText.css [ Css.marginBottom (Css.px 10) ]
|
2022-01-22 03:49:18 +03:00
|
|
|
, ClickableText.nriDescription "doodad-link"
|
2021-11-05 21:05:08 +03:00
|
|
|
]
|
2021-11-05 22:04:46 +03:00
|
|
|
:: [ Html.div
|
|
|
|
[ Attributes.css
|
|
|
|
[ Css.displayFlex
|
|
|
|
, Css.flexDirection Css.column
|
|
|
|
]
|
2022-03-30 20:47:05 +03:00
|
|
|
, Widget.hidden True
|
2021-11-05 22:04:46 +03:00
|
|
|
]
|
|
|
|
(List.map (Html.map never) example.preview)
|
|
|
|
]
|
2021-11-05 21:19:08 +03:00
|
|
|
)
|
2021-11-05 20:35:58 +03:00
|
|
|
]
|
|
|
|
|
|
|
|
|
2022-05-20 22:48:54 +03:00
|
|
|
view : EllieLink.Config -> Example state msg -> Html msg
|
|
|
|
view ellieLinkConfig example =
|
|
|
|
Html.div [ Attributes.id (String.replace "." "-" example.name) ]
|
|
|
|
(view_ ellieLinkConfig example)
|
2020-10-16 17:24:38 +03:00
|
|
|
|
|
|
|
|
2022-05-20 22:48:54 +03:00
|
|
|
view_ : EllieLink.Config -> Example state msg -> List (Html msg)
|
|
|
|
view_ ellieLinkConfig example =
|
2022-03-25 23:55:26 +03:00
|
|
|
let
|
|
|
|
navMenu items =
|
2022-05-20 22:48:54 +03:00
|
|
|
Html.nav [ Widget.label (fullName example) ]
|
2022-03-25 23:55:26 +03:00
|
|
|
[ Html.ul
|
|
|
|
[ Attributes.css
|
|
|
|
[ margin zero
|
|
|
|
, padding zero
|
|
|
|
, displayFlex
|
|
|
|
, alignItems center
|
|
|
|
, justifyContent flexStart
|
|
|
|
, flexWrap Css.wrap
|
|
|
|
]
|
|
|
|
]
|
|
|
|
(List.map
|
|
|
|
(\i ->
|
|
|
|
Html.li
|
|
|
|
[ Attributes.css
|
|
|
|
[ Css.listStyle Css.none ]
|
|
|
|
]
|
|
|
|
[ i ]
|
|
|
|
)
|
|
|
|
items
|
|
|
|
)
|
2020-03-31 23:33:05 +03:00
|
|
|
]
|
2022-03-25 23:55:26 +03:00
|
|
|
in
|
2022-03-25 23:41:02 +03:00
|
|
|
[ Html.header
|
|
|
|
[ Attributes.css
|
2022-03-25 23:55:26 +03:00
|
|
|
[ Css.paddingBottom (Css.px 10)
|
2022-03-25 23:41:02 +03:00
|
|
|
, Css.marginBottom (Css.px 20)
|
2022-03-25 23:55:26 +03:00
|
|
|
, Css.borderBottom3 (Css.px 1) Css.solid Colors.gray92
|
2020-03-31 23:33:05 +03:00
|
|
|
]
|
2022-03-25 23:41:02 +03:00
|
|
|
]
|
2022-05-20 22:48:54 +03:00
|
|
|
[ navMenu [ docsLink example, srcLink example ]
|
2022-03-25 23:41:02 +03:00
|
|
|
]
|
|
|
|
, KeyboardSupport.view example.keyboardSupport
|
2022-03-29 20:41:37 +03:00
|
|
|
, Html.main_ [] (example.view ellieLinkConfig example.state)
|
2022-03-25 23:41:02 +03:00
|
|
|
]
|
|
|
|
|
|
|
|
|
2021-11-05 20:42:52 +03:00
|
|
|
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
|
|
|
|
]
|
|
|
|
|
|
|
|
|
|
|
|
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) ]
|
2020-03-31 23:33:05 +03:00
|
|
|
]
|