NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-12-19 19:51:37 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #891 from NoRedInk/decode-example-links

Browse Source 
sketch for loading JSONs
This commit is contained in:
Brian Hicks 2022-03-29 13:56:14 -05:00 committed by GitHub
commit 3fb7c61d95
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
44 changed files with 298 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
Shakefile.hs
View File

@ -149,13 +149,19 @@ main = do
need elmSources
cmd_ (Cwd "styleguide-app") "elm" "make" "Main.elm" "--output" (".." </> out)
"public/package.json" %> \out -> do
copyFileChanged "elm.json" out
"public/application.json" %> \out -> do
copyFileChanged "styleguide-app/elm.json" out
"public/**/*" %> \out ->
copyFileChanged (replaceDirectory1 out "styleguide-app") out
"log/public.txt" %> \out -> do
styleguideAssets <- getDirectoryFiles ("styleguide-app" </> "assets") ["**/*"]
need
( ["public/index.html", "public/elm.js", "public/bundle.js"]
( ["public/index.html", "public/elm.js", "public/bundle.js", "public/package.json", "public/application.json"]
++ map (("public" </> "assets") </>) styleguideAssets
)
writeFileChanged out "built styleguide app successfully"

2
script/netlify.sh
View File

@ -21,3 +21,5 @@ npx browserify --entry styleguide-app/manifest.js --outfile public/bundle.js
# copy static files
cp -r styleguide-app/assets public/assets
cp styleguide-app/index.html public/index.html
cp styleguide-app/elm.json public/application.json
cp elm.json public/package.json

80
styleguide-app/Debug/Control/View.elm
View File

@ -3,19 +3,19 @@ module Debug.Control.View exposing (codeFromList, codeFromListWithIndentLevel, v
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.ClickableText.V3 as ClickableText
import Nri.Ui.Heading.V2 as Heading
import Nri.Ui.MediaQuery.V1 exposing (mobile)
import Nri.Ui.Text.V6 as Text
import Url.Builder
{-| -}
view :
{ name : String
{ ellieLinkConfig : EllieLink.Config
, name : String
, version : Int
, update : Control a -> msg
, settings : Control a
@ -26,6 +26,9 @@ view config =
let
value =
Control.currentValue config.settings
ellieLink =
EllieLink.view config.ellieLinkConfig
in
div
[ css
@ -37,15 +40,16 @@ view config =
]
[ viewSection "Settings" <|
[ fromUnstyled (Control.view config.update config.settings) ]
, viewExampleCode config (config.toExampleCode value)
, viewExampleCode ellieLink config (config.toExampleCode value)
]
viewExampleCode :
{ component | name : String, version : Int }
(EllieLink.SectionExample -> Html msg)
-> { component | name : String, version : Int }
-> List { sectionName : String, code : String }
-> Html msg
viewExampleCode component values =
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!"
@ -60,10 +64,12 @@ viewExampleCode component values =
]
[ text example.sectionName ]
]
, ClickableText.link ("View " ++ example.sectionName ++ " example on Ellie")
[ ClickableText.linkExternal (generateEllieLink component example)
, ClickableText.small
]
, ellieLink
{ fullModuleName = Example.fullName component
, name = component.name
, sectionName = example.sectionName
, code = example.code
}
, code
[ css
[ display block
@ -78,60 +84,6 @@ viewExampleCode component values =
values
generateEllieLink : { component | name : String, version : Int } -> { sectionName : String, code : String } -> String
generateEllieLink component { sectionName, code } =
Url.Builder.crossOrigin "https://ellie-app.com/a/example/v1"
[]
[ Url.Builder.string "title" (component.name ++ " | " ++ sectionName)
, Url.Builder.string "elmcode" (generateElmExampleModule component code)
, Url.Builder.string "htmlcode" ellieHtmlSetup
, -- At some point, a system of some kind will be required to keep these values
-- in line with the allowed elm json values.
-- I think in most cases, the API to use a noredink-ui component should require _only_ the following
-- packages. Feel free to add packages if it seems necessary!
Url.Builder.string "packages" "elm/core@1.0.5"
, Url.Builder.string "packages" "elm/html@1.0.0"
, Url.Builder.string "packages" "rtfeldman/elm-css@17.0.5"
, Url.Builder.string "packages" "NoRedInk/noredink-ui@15.8.1"
, Url.Builder.string "packages" "pablohirafuji/elm-markdown@2.0.5"
, Url.Builder.string "elmversion" "0.19.1"
]
generateElmExampleModule : { component | name : String, version : Int } -> String -> String
generateElmExampleModule component code =
[ "module Main exposing (main)"
, ""
, "import Css exposing (Style)"
, "import Html as RootHtml"
, "import Html.Styled exposing (..)"
, "import Nri.Ui.Colors.V1 as Colors"
, "import Nri.Ui.UiIcon.V1 as UiIcon"
, "import " ++ Example.fullName component ++ " as " ++ component.name
, ""
, "main : RootHtml.Html msg"
, "main ="
, " " ++ code
, " |> toUnstyled"
]
|> String.join "\n"
|> String.replace "\t" " "
ellieHtmlSetup : String
ellieHtmlSetup =
"""
<html> <head></head>
<body>
<main></main>
<script>
var app = Elm.Main.init({ node: document.querySelector('main') })
</script>
</body>
</html>
"""
viewSection : String -> List (Html msg) -> Html msg
viewSection name children =
section [ css [ flex (int 1) ] ]

104
styleguide-app/EllieLink.elm Normal file
View File

@ -0,0 +1,104 @@
module EllieLink exposing (Config, SectionExample, view)
import Dict exposing (Dict)
import Html.Styled exposing (..)
import Http
import Nri.Ui.ClickableText.V3 as ClickableText
import Url.Builder
type alias Config =
{ packageDependencies : Result Http.Error (Dict String String)
}
type alias SectionExample =
{ name : String
, fullModuleName : String
, sectionName : String
, code : String
}
view : Config -> SectionExample -> Html msg
view config example =
ClickableText.link ("View " ++ example.sectionName ++ " example on Ellie")
[ ClickableText.linkExternal (generateEllieLink config example)
, ClickableText.small
]
generateEllieLink : Config -> SectionExample -> String
generateEllieLink config example =
let
packageDependencies =
config.packageDependencies
|> Result.map Dict.toList
|> Result.withDefault []
|> List.map toPackageDependencyQueryString
toPackageDependencyQueryString ( name, version ) =
Url.Builder.string "packages" (name ++ "@" ++ version)
in
Url.Builder.crossOrigin "https://ellie-app.com/a/example/v1"
[]
([ Url.Builder.string "title" (example.name ++ " | " ++ example.sectionName)
, Url.Builder.string "elmcode" (generateElmExampleModule config example)
, Url.Builder.string "htmlcode" ellieHtmlSetup
, Url.Builder.string "elmversion" "0.19.1"
]
++ packageDependencies
)
generateElmExampleModule : Config -> SectionExample -> String
generateElmExampleModule config example =
let
maybeErrorMessages =
case config.packageDependencies of
Err httpError ->
[ "{- "
, "Something went wrong fetching the package dependencies!"
, "You will need to install the packages by hand for this code to compile."
, ""
, "Error: "
, Debug.toString httpError
, "-}"
]
Ok _ ->
[]
in
[ "module Main exposing (main)"
, ""
, "import Css exposing (Style)"
, "import Html as RootHtml"
, "import Html.Styled exposing (..)"
, "import Nri.Ui.Colors.V1 as Colors"
, "import Nri.Ui.UiIcon.V1 as UiIcon"
, "import " ++ example.fullModuleName ++ " as " ++ example.name
, ""
, ""
]
++ maybeErrorMessages
++ [ "main : RootHtml.Html msg"
, "main ="
, " " ++ example.code
, " |> toUnstyled"
]
|> String.join "\n"
|> String.replace "\t" " "
ellieHtmlSetup : String
ellieHtmlSetup =
"""
<html> <head></head>
<body>
<main></main>
<script>
var app = Elm.Main.init({ node: document.querySelector('main') })
</script>
</body>
</html>
"""

26
styleguide-app/Example.elm
View File

@ -4,6 +4,7 @@ import Accessibility.Styled.Aria as Aria
import Accessibility.Styled.Widget as Widget
import Category exposing (Category)
import Css exposing (..)
import EllieLink
import Html.Styled as Html exposing (Html)
import Html.Styled.Attributes as Attributes
import Html.Styled.Events as Events
@ -25,7 +26,7 @@ type alias Example state msg =
, update : msg -> state -> ( state, Cmd msg )
, subscriptions : state -> Sub msg
, preview : List (Html Never)
, view : state -> List (Html msg)
, view : EllieLink.Config -> state -> List (Html msg)
, categories : List Category
, keyboardSupport : List KeyboardSupport
}
@ -56,7 +57,10 @@ wrapMsg wrapMsg_ unwrapMsg example =
( state, Cmd.none )
, subscriptions = \state -> Sub.map wrapMsg_ (example.subscriptions state)
, preview = example.preview
, view = \state -> List.map (Html.map wrapMsg_) (example.view state)
, view =
\ellieLinkConfig state ->
List.map (Html.map wrapMsg_)
(example.view ellieLinkConfig state)
, categories = example.categories
, keyboardSupport = example.keyboardSupport
}
@ -86,9 +90,9 @@ wrapState wrapState_ unwrapState example =
>> Maybe.withDefault Sub.none
, preview = example.preview
, view =
unwrapState
>> Maybe.map example.view
>> Maybe.withDefault []
\ellieLinkConfig state ->
Maybe.map (example.view ellieLinkConfig) (unwrapState state)
|> Maybe.withDefault []
, categories = example.categories
, keyboardSupport = example.keyboardSupport
}
@ -129,8 +133,8 @@ preview_ navigate example =
]
view : Maybe Route -> Example state msg -> Html msg
view previousRoute example =
view : Maybe Route -> EllieLink.Config -> Example state msg -> Html msg
view previousRoute ellieLinkConfig example =
Container.view
[ Container.pillow
, Container.css
@ -139,13 +143,13 @@ view previousRoute example =
, Css.minHeight (Css.calc (Css.vh 100) Css.minus (Css.px 20))
, Css.boxSizing Css.borderBox
]
, Container.html (view_ previousRoute example)
, Container.html (view_ previousRoute ellieLinkConfig example)
, Container.custom [ Attributes.id (String.replace "." "-" example.name) ]
]
view_ : Maybe Route -> Example state msg -> List (Html msg)
view_ previousRoute example =
view_ : Maybe Route -> EllieLink.Config -> Example state msg -> List (Html msg)
view_ previousRoute ellieLinkConfig example =
let
navMenu items =
Html.nav [ Widget.label "Example" ]
@ -189,7 +193,7 @@ view_ previousRoute example =
]
]
, KeyboardSupport.view example.keyboardSupport
, Html.main_ [] (example.view example.state)
, Html.main_ [] (example.view ellieLinkConfig example.state)
]

5
styleguide-app/Examples/Accordion.elm
View File

@ -15,6 +15,7 @@ import Browser.Dom as Dom
import Category exposing (Category(..))
import Css exposing (..)
import Css.Global
import EllieLink
import Example exposing (Example)
import Html.Styled.Attributes as Attributes exposing (css, src)
import KeyboardSupport exposing (Key(..))
@ -78,8 +79,8 @@ defaultCaret =
{-| -}
view : State -> List (Html Msg)
view model =
view : EllieLink.Config -> State -> List (Html Msg)
view ellieLinkConfig model =
[ Heading.h3 [] [ Html.text "Accordion.view" ]
, Accordion.view
{ entries =

2
styleguide-app/Examples/AssignmentIcon.elm
View File

@ -48,7 +48,7 @@ example =
, AssignmentIcon.writing
]
, view =
\settings ->
\ellieLinkConfig settings ->
let
viewExampleSection =
IconExamples.view settings

8
styleguide-app/Examples/Balloon.elm
View File

@ -10,6 +10,7 @@ import Category exposing (Category(..))
import Debug.Control as Control exposing (Control)
import Debug.Control.Extra as ControlExtra
import Debug.Control.View as ControlView
import EllieLink
import Example exposing (Example)
import Html.Styled exposing (Html, fromUnstyled, text)
import Nri.Ui.Balloon.V1 as Balloon
@ -134,15 +135,16 @@ update msg state =
)
view : State -> List (Html Msg)
view state =
view : EllieLink.Config -> State -> List (Html Msg)
view ellieLinkConfig state =
let
copy =
Control.currentValue state.copy
in
[ Control.view SetCopy state.copy |> fromUnstyled
, ControlView.view
{ name = moduleName
{ ellieLinkConfig = ellieLinkConfig
, name = moduleName
, version = version
, update = SetAttributes
, settings = state.attributes

10
styleguide-app/Examples/Button.elm
View File

@ -13,6 +13,7 @@ import Css exposing (middle, verticalAlign)
import Debug.Control as Control exposing (Control)
import Debug.Control.Extra as ControlExtra
import Debug.Control.View as ControlView
import EllieLink
import Example exposing (Example)
import Html.Styled exposing (..)
import Html.Styled.Attributes exposing (css)
@ -59,7 +60,7 @@ example =
, Button.icon UiIcon.link
]
]
, view = \state -> [ viewButtonExamples state ]
, view = \ellieLinkConfig state -> [ viewButtonExamples ellieLinkConfig state ]
, categories = [ Buttons ]
, keyboardSupport = []
}
@ -188,14 +189,15 @@ initDebugControls =
)
viewButtonExamples : State -> Html Msg
viewButtonExamples state =
viewButtonExamples : EllieLink.Config -> State -> Html Msg
viewButtonExamples ellieLinkConfig state =
let
model =
Control.currentValue state.debugControlsState
in
[ ControlView.view
{ name = moduleName
{ ellieLinkConfig = ellieLinkConfig
, name = moduleName
, version = version
, update = SetDebugControlsState
, settings = state.debugControlsState

2
styleguide-app/Examples/Checkbox.elm
View File

@ -40,7 +40,7 @@ example =
, subscriptions = \_ -> Sub.none
, preview = []
, view =
\state ->
\ellieLinkConfig state ->
[ viewInteractableCheckbox "styleguide-checkbox-interactable" state
, viewIndeterminateCheckbox "styleguide-checkbox-indeterminate" state
, viewLockedOnInsideCheckbox "styleguide-locked-on-inside-checkbox" state

5
styleguide-app/Examples/ClickableSvg.elm
View File

@ -57,9 +57,10 @@ example =
]
]
, view =
\state ->
\ellieLinkConfig state ->
[ ControlView.view
{ name = moduleName
{ ellieLinkConfig = ellieLinkConfig
, name = moduleName
, version = version
, update = SetControls
, settings = state.settings

10
styleguide-app/Examples/ClickableText.elm
View File

@ -13,6 +13,7 @@ import Css exposing (middle, verticalAlign)
import Debug.Control as Control exposing (Control)
import Debug.Control.Extra as ControlExtra
import Debug.Control.View as ControlView
import EllieLink
import Example exposing (Example)
import Html.Styled exposing (..)
import Html.Styled.Attributes exposing (css)
@ -51,7 +52,7 @@ example =
, ClickableText.custom [ Key.tabbable False ]
]
]
, view = \state -> [ viewExamples state ]
, view = \ellieLinkConfig state -> [ viewExamples ellieLinkConfig state ]
, categories = [ Buttons ]
, keyboardSupport = []
}
@ -126,8 +127,8 @@ update msg state =
-- INTERNAL
viewExamples : State -> Html Msg
viewExamples (State control) =
viewExamples : EllieLink.Config -> State -> Html Msg
viewExamples ellieLinkConfig (State control) =
let
settings =
Control.currentValue control
@ -136,7 +137,8 @@ viewExamples (State control) =
List.map Tuple.second settings.attributes
in
[ ControlView.view
{ name = moduleName
{ ellieLinkConfig = ellieLinkConfig
, name = moduleName
, version = version
, update = SetState
, settings = control

2
styleguide-app/Examples/Colors.elm
View File

@ -49,7 +49,7 @@ example =
]
|> List.map viewPreviewSwatch
, view =
\_ ->
\ellieLinkConfig _ ->
[ [ ( "gray20", Colors.gray20, "Main text" )
, ( "gray45", Colors.gray45, "Secondary text, 0-69 score" )
, ( "gray75", Colors.gray75, "Border of form elements and tabs" )

2
styleguide-app/Examples/Confetti.elm
View File

@ -30,7 +30,7 @@ example =
]
, preview = []
, view =
\state ->
\ellieLinkConfig state ->
[ Button.button "Launch confetti!"
[ Button.onClick LaunchConfetti
, Button.small

5
styleguide-app/Examples/Container.elm
View File

@ -51,13 +51,14 @@ example =
]
]
, view =
\state ->
\ellieLinkConfig state ->
let
attributes =
List.map Tuple.second (Control.currentValue state.control)
in
[ ControlView.view
{ name = moduleName
{ ellieLinkConfig = ellieLinkConfig
, name = moduleName
, version = version
, update = UpdateControl
, settings = state.control

5
styleguide-app/Examples/DisclosureIndicator.elm
View File

@ -45,14 +45,15 @@ example =
, DisclosureIndicator.large [] True
]
, view =
\state ->
\ellieLinkConfig state ->
let
attributes =
Control.currentValue state.settings
in
[ Text.smallBodyGray [ Text.plaintext "The disclosure indicator is only the caret. It is NOT a button -- you must create a button or clickabletext yourself!" ]
, ControlView.view
{ name = moduleName
{ ellieLinkConfig = ellieLinkConfig
, name = moduleName
, version = version
, update = UpdateSettings
, settings = state.settings

2
styleguide-app/Examples/Divider.elm
View File

@ -32,5 +32,5 @@ example =
, update = \_ state -> ( state, Cmd.none )
, subscriptions = \_ -> Sub.none
, preview = [ Divider.view "Dividing Line" ]
, view = \state -> [ Divider.view "Dividing Line" ]
, view = \ellieLinkConfig state -> [ Divider.view "Dividing Line" ]
}

2
styleguide-app/Examples/Fonts.elm
View File

@ -42,7 +42,7 @@ example =
]
|> List.map viewPreview
, view =
\_ ->
\ellieLinkConfig _ ->
[ Heading.h3 [] [ Html.text "baseFont" ]
, Html.p [ css [ Fonts.baseFont ] ]
[ Html.text "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz" ]

5
styleguide-app/Examples/Heading.elm
View File

@ -44,7 +44,7 @@ example =
, Heading.h4 [] [ Html.text "h4" ]
]
, view =
\state ->
\ellieLinkConfig state ->
let
examples =
[ ( "h1", Heading.h1, "This is the main page heading." )
@ -58,7 +58,8 @@ example =
List.map Tuple.second (Control.currentValue state.control)
in
[ ControlView.view
{ name = moduleName
{ ellieLinkConfig = ellieLinkConfig
, name = moduleName
, version = version
, update = UpdateControl
, settings = state.control

2
styleguide-app/Examples/Loading.elm
View File

@ -93,7 +93,7 @@ example =
, subscriptions = subscriptions
, preview = []
, view =
\{ showLoadingFadeIn, showLoading, showSpinners } ->
\ellieLinkConfig { showLoadingFadeIn, showLoading, showSpinners } ->
[ if showLoading then
Loading.page

2
styleguide-app/Examples/Logo.elm
View File

@ -46,7 +46,7 @@ example =
, Logo.googleG
]
, view =
\settings ->
\ellieLinkConfig settings ->
let
viewExampleSection =
IconExamples.viewWithCustomStyles settings

8
styleguide-app/Examples/Menu.elm
View File

@ -13,6 +13,7 @@ import CommonControls
import Debug.Control as Control exposing (Control)
import Debug.Control.Extra as ControlExtra
import Debug.Control.View as ControlView
import EllieLink
import Example exposing (Example)
import KeyboardSupport exposing (Key(..))
import Nri.Ui.ClickableText.V3 as ClickableText
@ -60,8 +61,8 @@ example =
}
view : State -> List (Html Msg)
view state =
view : EllieLink.Config -> State -> List (Html Msg)
view ellieLinkConfig state =
let
menuAttributes =
(Control.currentValue state.settings).menuAttributes
@ -80,7 +81,8 @@ view state =
False
in
[ ControlView.view
{ name = moduleName
{ ellieLinkConfig = ellieLinkConfig
, name = moduleName
, version = version
, update = UpdateControls
, settings = state.settings

5
styleguide-app/Examples/Message.elm
View File

@ -139,7 +139,7 @@ example =
, Message.view [ Message.error, Message.plaintext "Tiny error" ]
]
, view =
\state ->
\ellieLinkConfig state ->
let
attributes =
List.map Tuple.second (Control.currentValue state.control)
@ -152,7 +152,8 @@ example =
text "Nice! The messages were dismissed. 👍"
in
[ ControlView.view
{ name = moduleName
{ ellieLinkConfig = ellieLinkConfig
, name = moduleName
, version = version
, update = UpdateControl
, settings = state.control

2
styleguide-app/Examples/Modal.elm
View File

@ -173,7 +173,7 @@ example =
]
]
, view =
\state ->
\ellieLinkConfig state ->
let
settings =
Control.currentValue state.settings

2
styleguide-app/Examples/Page.elm
View File

@ -84,7 +84,7 @@ example =
]
]
, view =
\model ->
\ellieLinkConfig model ->
let
recoveryText =
Control.currentValue model.recoveryText

2
styleguide-app/Examples/Pennant.elm
View File

@ -40,7 +40,7 @@ example =
, Pennant.disabledPremiumFlag
]
, view =
\settings ->
\ellieLinkConfig settings ->
[ IconExamples.viewSettings settings
, IconExamples.viewWithCustomStyles settings
"Premium Pennants"

5
styleguide-app/Examples/RadioButton.elm
View File

@ -17,6 +17,7 @@ import CommonControls exposing (premiumDisplay)
import Css
import Debug.Control as Control exposing (Control)
import Debug.Control.Extra as ControlExtra
import EllieLink
import Example exposing (Example)
import Html.Styled as Html exposing (..)
import Html.Styled.Attributes exposing (css)
@ -91,8 +92,8 @@ preview =
{-| -}
view : State -> List (Html Msg)
view state =
view : EllieLink.Config -> State -> List (Html Msg)
view ellieLinkConfig state =
let
selectionSettings =
Control.currentValue state.selectionSettings

2
styleguide-app/Examples/SegmentedControl.elm
View File

@ -37,7 +37,7 @@ example =
, subscriptions = \_ -> Sub.none
, preview = []
, view =
\state ->
\ellieLinkConfig state ->
let
options =
Control.currentValue state.optionsControl

2
styleguide-app/Examples/Select.elm
View File

@ -37,7 +37,7 @@ example =
]
]
, view =
\state ->
\ellieLinkConfig state ->
let
label =
Control.currentValue state.label

2
styleguide-app/Examples/Shadows.elm
View File

@ -37,7 +37,7 @@ example =
, subscriptions = \_ -> Sub.none
, preview = List.map (\( _, style, _ ) -> viewPreviewShadow style) allShadows
, view =
\_ ->
\ellieLinkConfig _ ->
[ List.map (\( name, style, usage ) -> ( name, viewShadow ( usage, style ) )) allShadows
|> ViewHelpers.viewExamples
]

8
styleguide-app/Examples/SideNav.elm
View File

@ -13,6 +13,7 @@ import Css
import Debug.Control as Control exposing (Control)
import Debug.Control.Extra as ControlExtra
import Debug.Control.View as ControlView
import EllieLink
import Example exposing (Example)
import Html.Styled.Attributes exposing (css)
import Nri.Ui.Colors.V1 as Colors
@ -75,14 +76,15 @@ viewPreview =
]
view : State -> List (Html Msg)
view state =
view : EllieLink.Config -> State -> List (Html Msg)
view ellieLinkConfig state =
let
settings =
Control.currentValue state.settings
in
[ ControlView.view
{ name = moduleName
{ ellieLinkConfig = ellieLinkConfig
, name = moduleName
, version = version
, update = SetControls
, settings = state.settings

2
styleguide-app/Examples/SortableTable.elm
View File

@ -41,7 +41,7 @@ example =
, subscriptions = \_ -> Sub.none
, preview = []
, view =
\{ sortState } ->
\ellieLinkConfig { sortState } ->
let
config =
{ updateMsg = SetSortState

2
styleguide-app/Examples/Sprite.elm
View File

@ -37,7 +37,7 @@ example =
, subscriptions = \_ -> Sub.none
, preview = IconExamples.preview (List.map Tuple.second sprites)
, view =
\settings ->
\ellieLinkConfig settings ->
[ IconExamples.viewSettings settings
, IconExamples.view settings "Rich Text Formatting" sprites
]

2
styleguide-app/Examples/Svg.elm
View File

@ -31,7 +31,7 @@ example =
, subscriptions = \_ -> Sub.none
, preview = []
, view =
\state ->
\ellieLinkConfig state ->
[ viewSettings state
, viewResults state
]

2
styleguide-app/Examples/Switch.elm
View File

@ -44,7 +44,7 @@ example =
True
]
, view =
\interactiveIsOn ->
\ellieLinkConfig interactiveIsOn ->
[ Heading.h3 [] [ Html.text "Interactive" ]
, Switch.view
[ Switch.onSwitch Switch

2
styleguide-app/Examples/Table.elm
View File

@ -60,7 +60,7 @@ example =
]
]
, view =
\() ->
\ellieLinkConfig () ->
let
columns =
[ Table.string

2
styleguide-app/Examples/Tabs.elm
View File

@ -187,7 +187,7 @@ example =
]
]
, view =
\model ->
\ellieLinkConfig model ->
let
settings =
Control.currentValue model.settings

5
styleguide-app/Examples/Text.elm
View File

@ -46,14 +46,15 @@ example =
, Text.ugMediumBody [ Text.plaintext "ugMediumBody" ]
]
, view =
\state ->
\ellieLinkConfig state ->
let
attributes =
List.map Tuple.second (Control.currentValue state.control)
in
[ Text.caption [ Text.plaintext "NOTE: When using these styles, please read the documentation in the Elm module about \"Understanding spacing\"" ]
, ControlView.view
{ name = moduleName
{ ellieLinkConfig = ellieLinkConfig
, name = moduleName
, version = version
, update = UpdateControl
, settings = state.control

2
styleguide-app/Examples/Text/Writing.elm
View File

@ -33,7 +33,7 @@ example =
, subscriptions = \_ -> Sub.none
, preview = [ TextWriting.footnote [ text "This is a footnote. " ] ]
, view =
\_ ->
\ellieLinkConfig _ ->
let
longerBody =
"""Be on the lookout for a new and improved assignment

2
styleguide-app/Examples/TextArea.elm
View File

@ -44,7 +44,7 @@ example =
, keyboardSupport = []
, preview = []
, view =
\state ->
\ellieLinkConfig state ->
[ Heading.h1 [] [ Html.text "Textarea controls" ]
, Html.div []
[ Checkbox.viewWithLabel

2
styleguide-app/Examples/TextInput.elm
View File

@ -40,7 +40,7 @@ example =
]
]
, view =
\state ->
\ellieLinkConfig state ->
[ Control.view UpdateControl state.control
|> Html.fromUnstyled
, viewExamples <|

14
styleguide-app/Examples/Tooltip.elm
View File

@ -14,6 +14,7 @@ import Css
import Debug.Control as Control exposing (Control)
import Debug.Control.Extra as ControlExtra
import Debug.Control.View as ControlView
import EllieLink
import Example exposing (Example)
import Html.Styled.Attributes exposing (css, href)
import Nri.Ui.ClickableSvg.V2 as ClickableSvg
@ -111,8 +112,8 @@ update msg model =
( { model | staticExampleSettings = settings }, Cmd.none )
view : State -> List (Html Msg)
view model =
view : EllieLink.Config -> State -> List (Html Msg)
view ellieLinkConfig model =
[ Heading.h3 [] [ Html.text "Using the Tooltip module" ]
, Text.mediumBody
[ Text.html
@ -124,7 +125,7 @@ view model =
, viewToggleTip model.openTooltip
]
]
, viewCustomizableExample model.staticExampleSettings
, viewCustomizableExample ellieLinkConfig model.staticExampleSettings
]
@ -276,11 +277,12 @@ controlPadding =
]
viewCustomizableExample : Control (List ( String, Tooltip.Attribute Never )) -> Html Msg
viewCustomizableExample controlSettings =
viewCustomizableExample : EllieLink.Config -> Control (List ( String, Tooltip.Attribute Never )) -> Html Msg
viewCustomizableExample ellieLinkConfig controlSettings =
Html.div []
[ ControlView.view
{ name = moduleName
{ ellieLinkConfig = ellieLinkConfig
, name = moduleName
, version = version
, update = SetControl
, settings = controlSettings

2
styleguide-app/Examples/UiIcon.elm
View File

@ -48,7 +48,7 @@ example =
, UiIcon.equals
]
, view =
\settings ->
\ellieLinkConfig settings ->
let
viewExampleSection =
IconExamples.view settings

73
styleguide-app/Main.elm
View File

@ -11,6 +11,8 @@ import Dict exposing (Dict)
import Example exposing (Example)
import Examples
import Html.Styled.Attributes exposing (..)
import Http
import Json.Decode as Decode
import Nri.Ui.CssVendorPrefix.V1 as VendorPrefixed
import Nri.Ui.Heading.V2 as Heading
import Nri.Ui.MediaQuery.V1 exposing (mobile, notMobile)
@ -41,6 +43,7 @@ type alias Model =
, previousRoute : Maybe Route
, moduleStates : Dict String (Example Examples.State Examples.Msg)
, navigationKey : Key
, elliePackageDependencies : Result Http.Error (Dict String String)
}
@ -52,8 +55,12 @@ init () url key =
Dict.fromList
(List.map (\example -> ( example.name, example )) Examples.all)
, navigationKey = key
, elliePackageDependencies = Ok Dict.empty
}
, Cmd.none
, Cmd.batch
[ loadPackage
, loadApplicationDependencies
]
)
@ -63,6 +70,7 @@ type Msg
| OnUrlChange Url
| ChangeRoute Route
| SkipToMainContent
| LoadedPackages (Result Http.Error (Dict String String))
| NoOp
@ -114,6 +122,40 @@ update action model =
, Task.attempt (\_ -> NoOp) (Browser.Dom.focus "maincontent")
)
LoadedPackages newPackagesResult ->
let
-- Ellie gets really slow to compile if we include all the packages, unfortunately!
-- feel free to adjust the settings here if you need more packages for a particular example.
removedPackages =
[ "avh4/elm-debug-controls"
, "BrianHicks/elm-particle"
, "elm-community/random-extra"
, "elm/browser"
, "elm/http"
, "elm/json"
, "elm/parser"
, "elm/random"
, "elm/regex"
, "elm/svg"
, "elm/url"
, "elm-community/string-extra"
, "Gizra/elm-keyboard-event"
, "pablohirafuji/elm-markdown"
, "rtfeldman/elm-sorter-experiment"
, "tesk9/accessible-html-with-css"
, "tesk9/palette"
, "wernerdegroot/listzipper"
]
in
( { model
| elliePackageDependencies =
List.foldl (\name -> Result.map (Dict.remove name))
(Result.map2 Dict.union model.elliePackageDependencies newPackagesResult)
removedPackages
}
, Cmd.none
)
NoOp ->
( model, Cmd.none )
@ -151,7 +193,9 @@ view_ model =
, margin auto
]
]
[ Example.view model.previousRoute example
[ Example.view model.previousRoute
{ packageDependencies = model.elliePackageDependencies }
example
|> Html.map (UpdateModuleStates example.name)
]
@ -253,3 +297,28 @@ navigation currentRoute =
(SideNav.entry "All" [ SideNav.href Routes.All ]
:: categoryNavLinks
)
loadPackage : Cmd Msg
loadPackage =
Http.get
{ url = "/package.json"
, expect =
Http.expectJson
LoadedPackages
(Decode.map2 Dict.singleton
(Decode.field "name" Decode.string)
(Decode.field "version" Decode.string)
)
}
loadApplicationDependencies : Cmd Msg
loadApplicationDependencies =
Http.get
{ url = "/application.json"
, expect =
Http.expectJson
LoadedPackages
(Decode.at [ "dependencies", "direct" ] (Decode.dict Decode.string))
}