Merge pull request #72 from Orasund/unstable

Added Item Page
2024-11-22 04:58:49 +03:00 · 2021-06-06 14:35:35 +02:00 · 2021-06-06 14:35:35 +02:00 · a19191735a
commit a19191735a
parent 53a1e248d6 b4916a0072
13 changed files with 684 additions and 263 deletions
--- a/explorer/src/Main.elm
+++ b/explorer/src/Main.elm
@ -2,6 +2,7 @@ module Main exposing (main)

 import Element
 import Page.Button
+import Page.Item
 import Page.PasswordInput
 import Page.Select
 import Page.Snackbar
@ -21,6 +22,7 @@ pages =
        |> UIExplorer.nextPage "Text Input" Page.TextInput.page
        |> UIExplorer.nextPage "Sort Table" Page.SortTable.page
        |> UIExplorer.nextPage "Snackbar" Page.Snackbar.page
+        |> UIExplorer.nextPage "Item" Page.Item.page


 main =
--- a/explorer/src/Page.elm
+++ b/explorer/src/Page.elm
@ -1,10 +1,9 @@
-module Page exposing (create, create2, demo, viewTile)
+module Page exposing (create, demo, viewTile)

 import Element exposing (Element)
 import UIExplorer exposing (Page)
-import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg)
+import UIExplorer.Story exposing (StorySelectorModel, StorySelectorMsg)
 import UIExplorer.Tile as Tile exposing (Context, Group, Position, Tile, TileMsg)
-import Widget.Material as Material exposing (Palette)
 import Widget.Material.Typography as Typography


@ -35,29 +34,6 @@ create config =
        |> Tile.page


-create2 :
-    { title : String
-    , description : String
-    , book1 : Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) ()
-    , book2 : Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) ()
-    , demo : Tile model msg ()
-    }
-    -> Page ( ( ( ( (), () ), ( StorySelectorModel, () ) ), ( StorySelectorModel, () ) ), model ) (TileMsg (TileMsg (TileMsg (TileMsg () msg1) (TileMsg StorySelectorMsg ())) (TileMsg StorySelectorMsg ())) msg) ()
-create2 config =
-    Tile.static []
-        (\_ _ ->
-            [ config.title |> Element.text |> Element.el Typography.h3
-            , config.description |> Element.text |> List.singleton |> Element.paragraph []
-            ]
-                |> Element.column [ Element.spacing 32 ]
-        )
-        |> Tile.first
-        |> Tile.nextGroup config.book1
-        |> Tile.nextGroup config.book2
-        |> Tile.next config.demo
-        |> Tile.page
-
-
 viewTile :
    String
    -> Element msg
--- a/explorer/src/Page/Item.elm
+++ b/explorer/src/Page/Item.elm
@ -0,0 +1,656 @@
+module Page.Item exposing (page)
+
+{-| This is an example Page. If you want to add your own pages, simple copy and modify this one.
+-}
+
+import Browser
+import Element exposing (Element)
+import Element.Background as Background
+import Material.Icons as MaterialIcons
+import Material.Icons.Types exposing (Coloring(..))
+import Page
+import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg)
+import UIExplorer.Tile as Tile exposing (Context, Tile, TileMsg)
+import Widget exposing (ButtonStyle, ColumnStyle, HeaderStyle, InsetItemStyle, ItemStyle)
+import Widget.Customize as Customize
+import Widget.Icon as Icon
+import Widget.Material as Material
+import Widget.Material.Color as MaterialColor
+import Widget.Material.Typography as Typography
+
+
+{-| The title of this page
+-}
+title : String
+title =
+    "Item"
+
+
+{-| The description. I've taken this description directly from the [Material-UI-Specification](https://material.io/components/buttons)
+-}
+description : String
+description =
+    "Items can be composed into lists."
+
+
+{-| List of view functions. Essentially, anything that takes a Button as input.
+-}
+viewDividerFunctions =
+    let
+        viewButton listStyle style { palette } () =
+            [ Widget.divider (style palette)
+            , Widget.fullBleedItem (Material.fullBleedItem palette)
+                { text = "Placeholder"
+                , onPress = Nothing
+                , icon = always Element.none
+                }
+            , Widget.divider (style palette)
+            , Widget.fullBleedItem (Material.fullBleedItem palette)
+                { text = "Placeholder"
+                , onPress = Nothing
+                , icon = always Element.none
+                }
+            , Widget.divider (style palette)
+            ]
+                |> Widget.itemList (listStyle palette)
+                --Don't forget to change the title
+                |> Page.viewTile "Widget.divider"
+    in
+    [ viewButton ]
+        |> List.foldl Story.addTile
+            Story.initStaticTiles
+
+
+{-| Let's you play around with the options.
+Note that the order of these stories must follow the order of the arguments from the view functions.
+-}
+dividerBook : Tile.Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) ()
+dividerBook =
+    Story.book (Just "Options")
+        viewDividerFunctions
+        --Adding a option for different styles.
+        |> Story.addStory
+            (Story.optionListStory "Column Style"
+                ( "CardColumn", Material.cardColumn )
+                [ ( "sideSheet", Material.sideSheet )
+                , ( "bottomSheet", Material.bottomSheet )
+                , ( "Column", always Material.column )
+                ]
+            )
+        |> Story.addStory
+            (Story.optionListStory "Style"
+                ( "FullBleedDivider", Material.fullBleedDivider )
+                [ ( "MiddleDivider", Material.middleDivider )
+                , ( "InsetDivider", Material.insetDivider )
+                ]
+            )
+        |> Story.build
+
+
+{-| List of view functions. Essentially, anything that takes a Button as input.
+-}
+viewHeaderFunctions =
+    let
+        viewButton listStyle style text { palette } () =
+            [ text |> Widget.headerItem (style palette)
+            , Widget.fullBleedItem (Material.fullBleedItem palette)
+                { text = "Placeholder"
+                , onPress = Nothing
+                , icon = always Element.none
+                }
+            , text |> Widget.headerItem (style palette)
+            , Widget.fullBleedItem (Material.fullBleedItem palette)
+                { text = "Placeholder"
+                , onPress = Nothing
+                , icon = always Element.none
+                }
+            , text |> Widget.headerItem (style palette)
+            ]
+                |> Widget.itemList (listStyle palette)
+                --Don't forget to change the title
+                |> Page.viewTile "Widget.divider"
+    in
+    [ viewButton ]
+        |> List.foldl Story.addTile
+            Story.initStaticTiles
+
+
+{-| Let's you play around with the options.
+Note that the order of these stories must follow the order of the arguments from the view functions.
+-}
+headerBook : Tile.Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) ()
+headerBook =
+    Story.book (Just "Options")
+        viewHeaderFunctions
+        --Adding a option for different styles.
+        |> Story.addStory
+            (Story.optionListStory "Column Style"
+                ( "CardColumn", Material.cardColumn )
+                [ ( "sideSheet", Material.sideSheet )
+                , ( "bottomSheet", Material.bottomSheet )
+                , ( "Column", always Material.column )
+                ]
+            )
+        |> Story.addStory
+            (Story.optionListStory "Style"
+                ( "FullBleedHeader", Material.fullBleedHeader )
+                [ ( "InsetHeader", Material.insetHeader )
+                ]
+            )
+        |> Story.addStory
+            (Story.textStory "Text"
+                "Header"
+            )
+        |> Story.build
+
+
+viewFullBleedItemFunctions =
+    let
+        viewFullBleedItem listStyle style text onPress icon { palette } () =
+            [ Widget.fullBleedItem (style palette)
+                { text = text
+                , onPress = onPress
+                , icon = icon
+                }
+            , Widget.fullBleedItem (style palette)
+                { text = text
+                , onPress = onPress
+                , icon = icon
+                }
+            , Widget.fullBleedItem (style palette)
+                { text = text
+                , onPress = onPress
+                , icon = icon
+                }
+            ]
+                |> Widget.itemList (listStyle palette)
+                --Don't forget to change the title
+                |> Page.viewTile "Widget.fullBleedItem"
+    in
+    [ viewFullBleedItem ]
+        |> List.foldl Story.addTile
+            Story.initStaticTiles
+
+
+fullBleedItemBook : Tile.Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) ()
+fullBleedItemBook =
+    Story.book (Just "Options")
+        viewFullBleedItemFunctions
+        --Adding a option for different styles.
+        |> Story.addStory
+            (Story.optionListStory "Column Style"
+                ( "CardColumn", Material.cardColumn )
+                [ ( "sideSheet", Material.sideSheet )
+                , ( "bottomSheet", Material.bottomSheet )
+                , ( "Column", always Material.column )
+                ]
+            )
+        |> Story.addStory
+            (Story.optionListStory "Style"
+                ( "FullBleedItem", Material.fullBleedItem )
+                []
+            )
+        |> Story.addStory
+            (Story.textStory "Text"
+                "Item text"
+            )
+        |> Story.addStory
+            (Story.boolStory "With event handler"
+                ( Just (), Nothing )
+                True
+            )
+        |> Story.addStory
+            (Story.boolStory "With Icon"
+                ( MaterialIcons.done
+                    |> Icon.elmMaterialIcons Color
+                , always Element.none
+                )
+                True
+            )
+        |> Story.build
+
+
+viewInsetItemFunctions =
+    let
+        viewFullBleedItem listStyle style text onPress icon content { palette } () =
+            [ Widget.insetItem (style palette)
+                { text = text
+                , onPress = onPress
+                , icon = icon
+                , content = content
+                }
+            , Widget.insetItem (style palette)
+                { text = text
+                , onPress = onPress
+                , icon = icon
+                , content = content
+                }
+            , Widget.insetItem (style palette)
+                { text = text
+                , onPress = onPress
+                , icon = icon
+                , content = content
+                }
+            ]
+                |> Widget.itemList (listStyle palette)
+                --Don't forget to change the title
+                |> Page.viewTile "Widget.insetItem"
+    in
+    [ viewFullBleedItem ]
+        |> List.foldl Story.addTile
+            Story.initStaticTiles
+
+
+insetItemBook : Tile.Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) ()
+insetItemBook =
+    Story.book (Just "Options")
+        viewInsetItemFunctions
+        --Adding a option for different styles.
+        |> Story.addStory
+            (Story.optionListStory "Column Style"
+                ( "CardColumn", Material.cardColumn )
+                [ ( "sideSheet", Material.sideSheet )
+                , ( "bottomSheet", Material.bottomSheet )
+                , ( "Column", always Material.column )
+                ]
+            )
+        |> Story.addStory
+            (Story.optionListStory "Style"
+                ( "InsetItem", Material.insetItem )
+                []
+            )
+        |> Story.addStory
+            (Story.textStory "Text"
+                "Item text"
+            )
+        |> Story.addStory
+            (Story.boolStory "With event handler"
+                ( Just (), Nothing )
+                True
+            )
+        |> Story.addStory
+            (Story.boolStory "With Icon"
+                ( MaterialIcons.done
+                    |> Icon.elmMaterialIcons Color
+                , always Element.none
+                )
+                True
+            )
+        |> Story.addStory
+            (Story.boolStory "With Content"
+                ( MaterialIcons.done
+                    |> Icon.elmMaterialIcons Color
+                , always Element.none
+                )
+                True
+            )
+        |> Story.build
+
+
+viewMultiLineItemFunctions =
+    let
+        viewMultiLineItem listStyle style titleText text onPress icon content { palette } () =
+            [ Widget.multiLineItem (style palette)
+                { title = titleText
+                , text = text
+                , onPress = onPress
+                , icon = icon
+                , content = content
+                }
+            , Widget.multiLineItem (style palette)
+                { title = titleText
+                , text = text
+                , onPress = onPress
+                , icon = icon
+                , content = content
+                }
+            , Widget.multiLineItem (style palette)
+                { title = titleText
+                , text = text
+                , onPress = onPress
+                , icon = icon
+                , content = content
+                }
+            ]
+                |> Widget.itemList (listStyle palette)
+                --Don't forget to change the title
+                |> Page.viewTile "Widget.multiLineItem"
+    in
+    [ viewMultiLineItem ]
+        |> List.foldl Story.addTile
+            Story.initStaticTiles
+
+
+multiLineItemBook : Tile.Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) ()
+multiLineItemBook =
+    Story.book (Just "Options")
+        viewMultiLineItemFunctions
+        --Adding a option for different styles.
+        |> Story.addStory
+            (Story.optionListStory "Column Style"
+                ( "CardColumn", Material.cardColumn )
+                [ ( "sideSheet", Material.sideSheet )
+                , ( "bottomSheet", Material.bottomSheet )
+                , ( "Column", always Material.column )
+                ]
+            )
+        |> Story.addStory
+            (Story.optionListStory "Style"
+                ( "InsetItem", Material.multiLineItem )
+                []
+            )
+        |> Story.addStory
+            (Story.textStory "Title"
+                "Title"
+            )
+        |> Story.addStory
+            (Story.textStory "Text"
+                "This text may span over multiple lines. But more then three should be avoided."
+            )
+        |> Story.addStory
+            (Story.boolStory "With event handler"
+                ( Just (), Nothing )
+                True
+            )
+        |> Story.addStory
+            (Story.boolStory "With Icon"
+                ( MaterialIcons.done
+                    |> Icon.elmMaterialIcons Color
+                , always Element.none
+                )
+                True
+            )
+        |> Story.addStory
+            (Story.boolStory "With Content"
+                ( MaterialIcons.done
+                    |> Icon.elmMaterialIcons Color
+                , always Element.none
+                )
+                True
+            )
+        |> Story.build
+
+
+viewMExpansionItemFunctions =
+    let
+        viewMultiLineItem listStyle style icon text isExpanded { palette } () =
+            [ Widget.expansionItem (style palette)
+                { icon = icon
+                , text = text
+                , onToggle = always ()
+                , content =
+                    [ Widget.fullBleedItem (Material.fullBleedItem palette)
+                        { text = "Placeholder"
+                        , onPress = Nothing
+                        , icon = always Element.none
+                        }
+                    ]
+                , isExpanded = isExpanded
+                }
+            , Widget.expansionItem (style palette)
+                { icon = icon
+                , text = text
+                , onToggle = always ()
+                , content =
+                    [ Widget.fullBleedItem (Material.fullBleedItem palette)
+                        { text = "Placeholder"
+                        , onPress = Nothing
+                        , icon = always Element.none
+                        }
+                    ]
+                , isExpanded = isExpanded
+                }
+            , Widget.expansionItem (style palette)
+                { icon = icon
+                , text = text
+                , onToggle = always ()
+                , content =
+                    [ Widget.fullBleedItem (Material.fullBleedItem palette)
+                        { text = "Placeholder"
+                        , onPress = Nothing
+                        , icon = always Element.none
+                        }
+                    ]
+                , isExpanded = isExpanded
+                }
+            ]
+                |> List.concat
+                |> Widget.itemList (listStyle palette)
+                --Don't forget to change the title
+                |> Page.viewTile "Widget.multiLineItem"
+    in
+    [ viewMultiLineItem ]
+        |> List.foldl Story.addTile
+            Story.initStaticTiles
+
+
+expansionItemBook : Tile.Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) ()
+expansionItemBook =
+    Story.book (Just "Options")
+        viewMExpansionItemFunctions
+        --Adding a option for different styles.
+        |> Story.addStory
+            (Story.optionListStory "Column Style"
+                ( "CardColumn", Material.cardColumn )
+                [ ( "sideSheet", Material.sideSheet )
+                , ( "bottomSheet", Material.bottomSheet )
+                , ( "Column", always Material.column )
+                ]
+            )
+        |> Story.addStory
+            (Story.optionListStory "Style"
+                ( "InsetItem", Material.expansionItem )
+                []
+            )
+        |> Story.addStory
+            (Story.boolStory "With Icon"
+                ( MaterialIcons.done
+                    |> Icon.elmMaterialIcons Color
+                , always Element.none
+                )
+                True
+            )
+        |> Story.addStory
+            (Story.textStory "Text"
+                "Item text"
+            )
+        |> Story.addStory
+            (Story.boolStory "is Expanded"
+                ( True, False )
+                True
+            )
+        |> Story.build
+
+
+viewSelectItemFunctions =
+    let
+        viewMultiLineItem listStyle style selected options onSelect { palette } () =
+            [ Widget.selectItem (style palette)
+                { selected = selected
+                , options = options
+                , onSelect = onSelect
+                }
+            ]
+                |> List.concat
+                |> Widget.itemList (listStyle palette)
+                --Don't forget to change the title
+                |> Page.viewTile "Widget.multiLineItem"
+    in
+    [ viewMultiLineItem ]
+        |> List.foldl Story.addTile
+            Story.initStaticTiles
+
+
+selectItemBook : Tile.Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) ()
+selectItemBook =
+    Story.book (Just "Options")
+        viewSelectItemFunctions
+        --Adding a option for different styles.
+        |> Story.addStory
+            (Story.optionListStory "Column Style"
+                ( "CardColumn", Material.cardColumn )
+                [ ( "sideSheet", Material.sideSheet )
+                , ( "bottomSheet", Material.bottomSheet )
+                , ( "Column", always Material.column )
+                ]
+            )
+        |> Story.addStory
+            (Story.optionListStory "Style"
+                ( "InsetItem", Material.selectItem )
+                []
+            )
+        |> Story.addStory
+            (Story.optionListStory "Selected"
+                ( "Third", Just 2 )
+                [ ( "Second", Just 1 )
+                , ( "First", Just 0 )
+                , ( "Nothing or Invalid", Nothing )
+                ]
+            )
+        --Change the Icon
+        |> Story.addStory
+            (Story.optionListStory "Options"
+                ( "3 Option"
+                , [ { icon = always Element.none, text = "Submit" }
+                  , { icon = MaterialIcons.done |> Icon.elmMaterialIcons Color, text = "" }
+                  , { icon = MaterialIcons.done |> Icon.elmMaterialIcons Color, text = "Submit" }
+                  ]
+                )
+                [ ( "2 Option"
+                  , [ { icon = always Element.none, text = "Submit" }
+                    , { icon = MaterialIcons.done |> Icon.elmMaterialIcons Color, text = "" }
+                    ]
+                  )
+                , ( "1 Option", [ { icon = always Element.none, text = "Submit" } ] )
+                ]
+            )
+        --Should an event be triggered when pressing the button?
+        |> Story.addStory
+            (Story.boolStory "With event handler"
+                ( always <| Just (), always Nothing )
+                True
+            )
+        |> Story.build
+
+
+
+{- This next section is essentially just a normal Elm program. -}
+--------------------------------------------------------------------------------
+-- Interactive Demonstration
+--------------------------------------------------------------------------------
+
+
+type Model
+    = IsEnabled Bool
+
+
+type Msg
+    = ToggleModal Bool
+
+
+init : ( Model, Cmd Msg )
+init =
+    ( IsEnabled True
+    , Cmd.none
+    )
+
+
+update : Msg -> Model -> ( Model, Cmd Msg )
+update msg _ =
+    case msg of
+        ToggleModal bool ->
+            ( IsEnabled bool
+            , Cmd.none
+            )
+
+
+subscriptions : Model -> Sub Msg
+subscriptions _ =
+    Sub.none
+
+
+{-| You can remove the msgMapper. But by doing so, make sure to also change `msg` to `Msg` in the line below.
+-}
+view : Context -> Model -> Element Msg
+view { palette } (IsEnabled isEnabled) =
+    Widget.button (Material.containedButton palette)
+        { text = "Show Sheet"
+        , icon = MaterialIcons.visibility |> Icon.elmMaterialIcons Color
+        , onPress = ToggleModal True |> Just
+        }
+        |> Element.el
+            ([ Element.height <| Element.minimum 200 <| Element.fill
+             , Element.width <| Element.minimum 400 <| Element.fill
+             ]
+                ++ (if isEnabled then
+                        { content =
+                            [ "Menu"
+                                |> Element.text
+                                |> Element.el Typography.h6
+                                |> Widget.asItem
+                            , Widget.insetItem (Material.insetItem palette)
+                                { onPress = Just <| ToggleModal False
+                                , icon =
+                                    MaterialIcons.change_history
+                                        |> Icon.elmMaterialIcons Color
+                                , text = "Home"
+                                , content =
+                                    \_ ->
+                                        Element.none
+                                }
+                            , Widget.insetItem (Material.insetItem palette)
+                                { onPress = Just <| ToggleModal False
+                                , icon =
+                                    MaterialIcons.change_history
+                                        |> Icon.elmMaterialIcons Color
+                                , text = "About"
+                                , content =
+                                    \_ ->
+                                        Element.none
+                                }
+                            ]
+                                |> Widget.itemList (Material.sideSheet palette)
+                        , onDismiss = Just <| ToggleModal False
+                        }
+                            |> List.singleton
+                            |> Widget.singleModal
+
+                    else
+                        []
+                   )
+            )
+
+
+
+--------------------------------------------------------------------------------
+-- DO NOT MODIFY ANYTHING AFTER THIS LINE
+--------------------------------------------------------------------------------
+
+
+demo : Tile Model Msg ()
+demo =
+    { init = always init
+    , update = update
+    , view = Page.demo view
+    , subscriptions = subscriptions
+    }
+
+
+page =
+    Tile.static []
+        (\_ _ ->
+            [ title |> Element.text |> Element.el Typography.h3
+            , description |> Element.text |> List.singleton |> Element.paragraph []
+            ]
+                |> Element.column [ Element.spacing 32 ]
+        )
+        |> Tile.first
+        |> Tile.nextGroup dividerBook
+        |> Tile.nextGroup headerBook
+        |> Tile.nextGroup fullBleedItemBook
+        |> Tile.nextGroup insetItemBook
+        |> Tile.nextGroup multiLineItemBook
+        |> Tile.nextGroup expansionItemBook
+        |> Tile.nextGroup selectItemBook
+        |> Tile.next demo
+        |> Tile.page
--- a/explorer/src/Page/PasswordInput.elm
+++ b/explorer/src/Page/PasswordInput.elm
@ -8,10 +8,6 @@ import UIExplorer.Story as Story
 import UIExplorer.Tile exposing (Context, Tile)
 import Widget
 import Widget.Material as Material
-    exposing
-        ( darkPalette
-        , defaultPalette
-        )


 {-| The title of this page
--- a/explorer/src/Page/Select.elm
+++ b/explorer/src/Page/Select.elm
@ -4,20 +4,14 @@ module Page.Select exposing (page)
 -}

 import Element exposing (Element)
-import Element.Background as Background
-import Element.Font
-import Material.Icons as MaterialIcons exposing (offline_bolt)
+import Material.Icons as MaterialIcons
 import Material.Icons.Types exposing (Coloring(..))
 import Page
-import UIExplorer
 import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg)
-import UIExplorer.Tile as Tile exposing (Context, Position, Tile, TileMsg)
-import Widget exposing (ButtonStyle)
-import Widget.Customize as Customize
-import Widget.Icon as Icon exposing (Icon)
-import Widget.Material as Material exposing (Palette)
-import Widget.Material.Color as MaterialColor
-import Widget.Material.Typography as Typography
+import UIExplorer.Tile as Tile exposing (Context, TileMsg)
+import Widget
+import Widget.Icon as Icon
+import Widget.Material as Material


 {-| The title of this page
@ -51,7 +45,6 @@ viewFunctions =
                --Don't forget to change the title
                |> Page.viewTile "Widget.buttonRow "

-        
        viewTogggleRow style selected options onSelect { palette } () =
            Widget.select
                { selected = selected
@ -64,7 +57,7 @@ viewFunctions =
                    }
                --Don't forget to change the title
                |> Page.viewTile "Widget.toggleRow"
-        
+
        viewWrappedRow style selected options onSelect { palette } () =
            Widget.select
                { selected = selected
@ -110,7 +103,7 @@ book =
                [ ( "Outlined", Material.outlinedButton )
                , ( "Text", Material.textButton )
                , ( "Chip", Material.chip )
-                , ( "IconButton", Material.iconButton)
+                , ( "IconButton", Material.iconButton )
                , ( "Toggle", Material.toggleButton )
                ]
            )
--- a/explorer/src/Page/Snackbar.elm
+++ b/explorer/src/Page/Snackbar.elm
@ -3,22 +3,15 @@ module Page.Snackbar exposing (page)
 {-| This is an example Page. If you want to add your own pages, simple copy and modify this one.
 -}

-import Browser
 import Element exposing (Element)
-import Element.Background as Background
-import Material.Icons as MaterialIcons
 import Material.Icons.Types exposing (Coloring(..))
 import Page
 import Time
 import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg)
 import UIExplorer.Tile as Tile exposing (Context, Tile, TileMsg)
-import Widget exposing (ButtonStyle, ColumnStyle)
-import Widget.Customize as Customize
-import Widget.Icon as Icon
+import Widget
 import Widget.Material as Material
-import Widget.Material.Color as MaterialColor
-import Widget.Material.Typography as Typography
-import Widget.Snackbar as Snackbar exposing (Snackbar, SnackbarStyle)
+import Widget.Snackbar as Snackbar exposing (Snackbar)


 {-| The title of this page
--- a/explorer/src/Page/SortTable.elm
+++ b/explorer/src/Page/SortTable.elm
@ -3,20 +3,13 @@ module Page.SortTable exposing (page)
 {-| This is an example Page. If you want to add your own pages, simple copy and modify this one.
 -}

-import Browser
 import Element exposing (Element)
-import Element.Background as Background
-import Material.Icons as MaterialIcons
 import Material.Icons.Types exposing (Coloring(..))
 import Page
 import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg)
 import UIExplorer.Tile as Tile exposing (Context, Tile, TileMsg)
-import Widget exposing (SortTableStyle)
-import Widget.Customize as Customize
-import Widget.Icon as Icon
+import Widget
 import Widget.Material as Material
-import Widget.Material.Color as MaterialColor
-import Widget.Material.Typography as Typography


 {-| The title of this page
--- a/explorer/src/Page/Switch.elm
+++ b/explorer/src/Page/Switch.elm
@ -4,23 +4,12 @@ module Page.Switch exposing (page)
 -}

 import Element exposing (Element)
-import Element.Background as Background
-import Material.Icons as MaterialIcons
 import Material.Icons.Types exposing (Coloring(..))
 import Page
 import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg)
 import UIExplorer.Tile as Tile exposing (Context, Tile, TileMsg)
 import Widget
-import Widget.Customize as Customize
-import Widget.Icon as Icon
 import Widget.Material as Material
-    exposing
-        ( containedButton
-        , outlinedButton
-        , textButton
-        )
-import Widget.Material.Color as MaterialColor
-import Widget.Material.Typography as Typography


 {-| The title of this page
--- a/explorer/src/Page/Tab.elm
+++ b/explorer/src/Page/Tab.elm
@ -3,20 +3,15 @@ module Page.Tab exposing (page)
 {-| This is an example Page. If you want to add your own pages, simple copy and modify this one.
 -}

-import Browser
 import Element exposing (Element)
-import Element.Background as Background
 import Material.Icons as MaterialIcons
 import Material.Icons.Types exposing (Coloring(..))
 import Page
 import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg)
 import UIExplorer.Tile as Tile exposing (Context, Tile, TileMsg)
-import Widget exposing (TabStyle)
-import Widget.Customize as Customize
+import Widget
 import Widget.Icon as Icon
 import Widget.Material as Material
-import Widget.Material.Color as MaterialColor
-import Widget.Material.Typography as Typography


 {-| The title of this page
--- a/explorer/src/Page/TextInput.elm
+++ b/explorer/src/Page/TextInput.elm
@ -9,12 +9,8 @@ import Set exposing (Set)
 import UIExplorer.Story as Story
 import UIExplorer.Tile exposing (Context, Tile)
 import Widget
-import Widget.Icon as Icon exposing (Icon)
+import Widget.Icon as Icon
 import Widget.Material as Material
-    exposing
-        ( darkPalette
-        , defaultPalette
-        )


 {-| The title of this page
--- a/explorer/src/UIExplorer.elm
+++ b/explorer/src/UIExplorer.elm
@ -36,14 +36,12 @@ import Browser.Events
 import Browser.Navigation
 import Element exposing (Element)
 import Element.Background
-import Element.Border
 import Element.Font
 import Element.Input
 import Element.Lazy
 import Element.Region
 import Html exposing (Html)
 import Html.Attributes
-import Html.Events
 import Json.Decode as Decode
 import Pixels exposing (Pixels)
 import Quantity exposing (Quantity)
@ -356,7 +354,7 @@ pageSizeOptionWidth pageSizeOption =
 {-| -}
 type Model pageModel flags
    = FlagsParsed (SuccessModel pageModel flags)
-    | FlagsDidNotParse { errorMessage : String }
+    | FlagsDidNotParse String


 type alias SuccessModel pageModel flags =
@ -469,7 +467,7 @@ init config (PageBuilder pages) flagsJson url key =
            )

        Err error ->
-            ( FlagsDidNotParse { errorMessage = Decode.errorToString error }, Cmd.none )
+            ( FlagsDidNotParse (Decode.errorToString error), Cmd.none )


 expandPage : List String -> Set String -> Set String
@ -636,7 +634,7 @@ view config pages model =
        FlagsParsed successModel ->
            viewSuccess config pages successModel

-        FlagsDidNotParse { errorMessage } ->
+        FlagsDidNotParse errorMessage ->
            { title = "Error"
            , body =
                [ Element.layoutWith { options = config.layoutOptions }
@ -829,7 +827,7 @@ viewSidebar pages config model =
                { text = "Dark Theme"
                , onPress = Just <| ChangeDarkTheme <| not <| model.darkThemeEnabled
                , icon =
-                    \{} ->
+                    \_ ->
                        Widget.switch (Material.switch palette)
                            { description = "Toggle Theme"
                            , onPress = Just <| ChangeDarkTheme <| not <| model.darkThemeEnabled
@ -1078,7 +1076,7 @@ colorBlindOptionView dark isExpanded selectedColorBlindOption =
 optionGroupView : Bool -> Bool -> a -> List a -> (a -> String) -> (a -> msg) -> msg -> List (Item msg)
 optionGroupView dark isExpanded selectedItem items itemToString onPress toggleExpand =
    let
-        selectedColor =
+        _ =
            if dark then
                darkerGray

@ -1251,19 +1249,6 @@ contentSize model =
        }


-minimizeSidebarButton : Element (Msg pageMsg)
-minimizeSidebarButton =
-    Element.Input.button
-        [ Element.alignRight
-        , Element.paddingXY 20 0
-        , Element.height Element.fill
-        , Element.Font.size 20
-        ]
-        { onPress = Just PressedToggleSidebar
-        , label = Element.text "❮"
-        }
-
-
 lightBlue : Element.Color
 lightBlue =
    Element.rgb255 176 208 225
@ -1279,16 +1264,6 @@ gray =
    Element.rgb255 206 215 225


-mediumDarkGray : Element.Color
-mediumDarkGray =
-    Element.rgb255 90 100 105
-
-
-darkGray : Element.Color
-darkGray =
-    Element.rgb255 60 70 80
-
-
 darkerGray : Element.Color
 darkerGray =
    Element.rgb255 20 30 40
@ -1298,57 +1273,11 @@ black =
    Element.rgb 0 0 0


-mix : Float -> Element.Color -> Element.Color -> Element.Color
-mix mixRatio color0 color1 =
-    let
-        a =
-            Element.toRgb color0
-
-        b =
-            Element.toRgb color1
-
-        mix_ getter =
-            getter a * mixRatio + getter b * (1 - mixRatio)
-    in
-    Element.rgb (mix_ .red) (mix_ .green) (mix_ .blue)
-
-
-type ArrowKey
-    = ArrowUp
-    | ArrowDown
-
-
-onKey : (ArrowKey -> msg) -> Element.Attribute msg
-onKey msg =
-    Element.htmlAttribute
-        (Html.Events.custom "keyup"
-            (Decode.field "key" Decode.string
-                |> Decode.andThen
-                    (\key ->
-                        case key of
-                            "ArrowUp" ->
-                                Decode.succeed { message = msg ArrowUp, stopPropagation = True, preventDefault = True }
-
-                            "ArrowDown" ->
-                                Decode.succeed { message = msg ArrowDown, stopPropagation = True, preventDefault = True }
-
-                            _ ->
-                                Decode.fail "Not the up or down arrow key."
-                    )
-            )
-        )
-
-
 pageGroupToString : List String -> String
 pageGroupToString =
    uiUrl []


-isGroupExpanded : Set String -> List String -> Bool
-isGroupExpanded expandedGroups pageGroup =
-    Set.member (pageGroupToString pageGroup) expandedGroups
-
-
 type Either
    = TempLeaf String
    | Group { pageId : String, pageGroupHead : String, pageGroup : List String }
@ -1402,21 +1331,6 @@ buildTree items =
    helper items


-mouseOverButtonColor buttonDepth =
-    mix (0.92 ^ toFloat buttonDepth) gray black
-
-
-pageSelectedButtonColor dark buttonDepth =
-    mix (0.92 ^ toFloat buttonDepth)
-        (if dark then
-            mediumDarkGray
-
-         else
-            lightBlue
-        )
-        black
-
-
 viewSidebarLinksHelper :
    Bool
    -> { a | relativeUrlPath : List String }
@ -1447,23 +1361,6 @@ viewSidebarLinksHelper dark config page expandedGroups path trees =
            )


-expanderArrow : Bool -> Element msg
-expanderArrow isExpanded =
-    (if isExpanded then
-        "▾"
-
-     else
-        "▸"
-    )
-        |> Element.text
-        |> Element.el
-            [ Element.width <| Element.px 10
-            , Element.Font.size 12
-            , Element.moveUp 1
-            , Element.moveLeft 1
-            ]
-
-
 {-| Group equal elements together using a custom equality function. Elements will be
 grouped in the same order as they appear in the original list. The same applies to
 elements within each group.
@ -1493,66 +1390,6 @@ gatherWith testFn list =
    helper list []


-pageButton :
-    Bool
-    -> { a | relativeUrlPath : List String }
-    -> List String
-    -> { b | previous : Maybe (List String), next : Maybe (List String), current : List String }
-    -> Element (Msg pageMsg)
-pageButton dark config selectedPage pageIds =
-    let
-        depth =
-            List.length pageIds.current - 1
-    in
-    Element.el
-        [ Element.width Element.fill ]
-        (Element.link
-            [ Element.paddingEach { left = 16, right = 8, top = 8, bottom = 8 }
-            , Element.width Element.fill
-            , onKey
-                (\arrowKey ->
-                    case ( arrowKey, pageIds.previous, pageIds.next ) of
-                        ( ArrowUp, Just previous, _ ) ->
-                            PressedChangePageHotkey previous
-
-                        ( ArrowDown, _, Just next ) ->
-                            PressedChangePageHotkey next
-
-                        _ ->
-                            NoOp
-                )
-            , Element.htmlAttribute <| Html.Attributes.id <| pageGroupToString pageIds.current
-            , if pageIds.current == selectedPage then
-                Element.Background.color (pageSelectedButtonColor dark depth)
-
-              else
-                Element.mouseOver [ mouseOverButtonColor depth |> Element.Background.color ]
-            , focusAttributes dark
-            ]
-            { url = uiUrl config.relativeUrlPath pageIds.current
-            , label =
-                pageIds.current
-                    |> List.reverse
-                    |> List.head
-                    |> Maybe.withDefault ""
-                    |> Element.text
-                    |> List.singleton
-                    |> Element.paragraph []
-            }
-        )
-
-
-focusAttributes dark =
-    Element.focused
-        [ Element.Background.color <|
-            if dark then
-                mediumDarkGray
-
-            else
-                lightBlue
-        ]
-
-
 viewSidebarLinks :
    Bool
    -> PageBuilder pageModel pageMsg flags
--- a/explorer/src/UIExplorer/Story.elm
+++ b/explorer/src/UIExplorer/Story.elm
@ -1,8 +1,7 @@
 module UIExplorer.Story exposing (..)

-import Dict exposing (Dict)
-import Element exposing (Attribute, Element)
-import Element.Input as Input exposing (Label, Option, labelAbove, option, radio)
+import Element exposing (Element)
+import Element.Input as Input
 import SelectList exposing (SelectList)
 import UIExplorer.Tile as Tile exposing (Context)
 import Widget
@ -262,7 +261,7 @@ storySetValue value model =
                            | value = enforceRange state.min state.max intValue
                        }

-        TextStoryModel storyLabel oldValue ->
+        TextStoryModel storyLabel _ ->
            TextStoryModel storyLabel value

        OptionListStoryModel storyLabel select ->
@ -369,7 +368,7 @@ storyView context model =
                            options
                                |> SelectList.toList
                                |> List.indexedMap (\i opt -> ( i, opt ))
-                                |> List.filter (\( i, opt ) -> selected == i)
+                                |> List.filter (\( i, _ ) -> selected == i)
                                |> List.head
                                |> Maybe.map (Tuple.second >> StorySelect label)
                  }
@ -399,7 +398,7 @@ storyView context model =


 storyTile : Maybe String -> List StoryInfo -> (List String -> a) -> Tile.Group StorySelectorModel StorySelectorMsg flags
-storyTile title stories storiesToValue =
+storyTile title stories _ =
    { init =
        \_ ->
            ( stories
@ -435,7 +434,7 @@ build builder =
        |> Tile.linkGroup
            { init = builder.tilelist.init
            , update =
-                \msg ( selectorModel, model ) ->
+                \msg ( _, model ) ->
                    builder.tilelist.update msg model
            , subscriptions = Tuple.second >> builder.tilelist.subscriptions
            , views =
--- a/explorer/src/UIExplorer/Tile.elm
+++ b/explorer/src/UIExplorer/Tile.elm
@ -1,17 +1,13 @@
 module UIExplorer.Tile exposing (..)

-import Dict exposing (Dict)
 import Element exposing (Attribute, Element)
 import Element.Background as Background
 import Element.Font as Font
 import Markdown
-import SelectList exposing (SelectList)
 import UIExplorer exposing (Page, PageSize)
-import Widget exposing (Item)
-import Widget.Customize as Customize
+import Widget
 import Widget.Material as Material exposing (Palette)
 import Widget.Material.Color as MaterialColor
-import Widget.Material.Typography as Typography


 type Position