diff --git a/FS.FluentUI.sln b/FS.FluentUI.sln index 08fd241..32877d3 100644 --- a/FS.FluentUI.sln +++ b/FS.FluentUI.sln @@ -13,6 +13,8 @@ Project("{F2A71F9B-5D33-465A-A702-920D77279786}") = "TestGrounds", "src\FS.Fluen EndProject Project("{F2A71F9B-5D33-465A-A702-920D77279786}") = "FS.FluentUI.V8toV9", "src\FS.FluentUI.V8toV9\FS.FluentUI.V8toV9.fsproj", "{779E8723-4AAE-4A79-A993-2C0AD0CCB10A}" EndProject +Project("{F2A71F9B-5D33-465A-A702-920D77279786}") = "Docs", "src\Docs\Docs.fsproj", "{9EBA10C7-BB27-4ED2-841E-C34C7E3F2727}" +EndProject Global GlobalSection(SolutionConfigurationPlatforms) = preSolution Debug|Any CPU = Debug|Any CPU @@ -34,6 +36,10 @@ Global {779E8723-4AAE-4A79-A993-2C0AD0CCB10A}.Debug|Any CPU.Build.0 = Debug|Any CPU {779E8723-4AAE-4A79-A993-2C0AD0CCB10A}.Release|Any CPU.ActiveCfg = Release|Any CPU {779E8723-4AAE-4A79-A993-2C0AD0CCB10A}.Release|Any CPU.Build.0 = Release|Any CPU + {9EBA10C7-BB27-4ED2-841E-C34C7E3F2727}.Debug|Any CPU.ActiveCfg = Debug|Any CPU + {9EBA10C7-BB27-4ED2-841E-C34C7E3F2727}.Debug|Any CPU.Build.0 = Debug|Any CPU + {9EBA10C7-BB27-4ED2-841E-C34C7E3F2727}.Release|Any CPU.ActiveCfg = Release|Any CPU + {9EBA10C7-BB27-4ED2-841E-C34C7E3F2727}.Release|Any CPU.Build.0 = Release|Any CPU EndGlobalSection GlobalSection(NestedProjects) = preSolution {6DCB5EE1-8636-46D0-802B-5DE215645909} = {55E5674B-2084-494C-9CC6-E9CF7817605F} diff --git a/src/Docs/App.fs b/src/Docs/App.fs new file mode 100644 index 0000000..75de95e --- /dev/null +++ b/src/Docs/App.fs @@ -0,0 +1,12 @@ +module Docs.App + +open Elmish +open Elmish.React +open Docs.Model +open Docs.Update +open Docs.View + +Program.mkProgram App.init App.update App.view +|> Program.withReactSynchronous "elmish-app" +|> Program.withConsoleTrace +|> Program.run diff --git a/src/Docs/Docs.fsproj b/src/Docs/Docs.fsproj new file mode 100644 index 0000000..b4f4a9b --- /dev/null +++ b/src/Docs/Docs.fsproj @@ -0,0 +1,33 @@ + + + + Exe + net8.0 + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/Docs/Model/App.fs b/src/Docs/Model/App.fs new file mode 100644 index 0000000..c4c56d0 --- /dev/null +++ b/src/Docs/Model/App.fs @@ -0,0 +1,14 @@ +module Docs.Model.App + +open Elmish + +type Model = { + CurrentUrl : string list +} + +[] +type Msg = + | DoNothing + +let init () = + { CurrentUrl = [""] }, Cmd.none diff --git a/src/Docs/README.md b/src/Docs/README.md new file mode 100644 index 0000000..33f20c5 --- /dev/null +++ b/src/Docs/README.md @@ -0,0 +1,5 @@ +# DOCGEN + +Using [Feliz.DaisyUI](https://github.com/dzoukr/Feliz.DaisyUI) and [a Feliz pull request](https://github.com/Freymaurer/Feliz/blob/master/docs/App.fs) docs for reference ontop of my own preferences and understanding. + +Idea is to have pages written in markdown, and then reference components to insert into the renders where appropriate. This way we can have docs written in markdown rather than having to mess with Html. diff --git a/src/Docs/Router.fs b/src/Docs/Router.fs new file mode 100644 index 0000000..b21a73e --- /dev/null +++ b/src/Docs/Router.fs @@ -0,0 +1,274 @@ +module Docs.Router + +open Browser.Types +open Feliz.Router +open Fable.Core.JsInterop + +type Page = + | Install + | FluentProvider + | MakeStyles + | MakeResetStyles + | BundleIcon + | Tokens + | TypographyStyles + | Themes + | MergeClasses + | Button + | CompoundButton + | MenuButton + | SplitButton + | ToggleButton + | Checkbox + | Combobox + | Dropdown + | Field + | Input + | Link + | Radio + | Select + | Slider + | SpinButton + | TextArea + | Switch + | Icon + | SearchBox + | SwatchPicker + | TagPicker + | DatePicker + | Calendar + | TimePicker + | DataGrid + | VirtualizedDataGrid + | Table + | Tree + | FlatTree + | Accordion + | Menu + | TabList + | Card + | Dialog + | Divider + | Popover + | Portal + | Toolbar + | Toast + | Skeleton + | MessageBar + | Drawer + | TeachingPopover + | Carousel + | Avatar + | AvatarGroup + | Badge + | CounterBadge + | PresenceBadge + | Image + | Persona + | ProgressBar + | Spinner + | TagGroup + | InteractionTag + | Text + | Tooltip + | InfoLabel + | InfoButton + | Breadcrumb + | Rating + | Overflow + | UseArrowNavigationGroup + | UseFocusableGroup + | UseFocusFinders + | UseKeyboardNavAttribute + | UseModalAttributes + | UseId + | CreatePresenceComponent + | CreateMotionComponent + | VirtualizerScrollView + | Nav + +[] +module Page = + let defaultPage = Page.Install + + let parseFromUrlSegments = function + | [ "install" ] -> Page.Install + | [ "fluentprovider" ] -> Page.FluentProvider + | [ "makestyles" ] -> Page.MakeStyles + | [ "makeresetstyles" ] -> Page.MakeResetStyles + | [ "bundleicon" ] -> Page.BundleIcon + | [ "tokens" ] -> Page.Tokens + | [ "typographystyles" ] -> Page.TypographyStyles + | [ "themes" ] -> Page.Themes + | [ "mergeclasses" ] -> Page.MergeClasses + | [ "button" ] -> Page.Button + | [ "compoundbutton" ] -> Page.CompoundButton + | [ "menubutton" ] -> Page.MenuButton + | [ "splitbutton" ] -> Page.SplitButton + | [ "togglebutton" ] -> Page.ToggleButton + | [ "checkbox" ] -> Page.Checkbox + | [ "combobox" ] -> Page.Combobox + | [ "dropdown" ] -> Page.Dropdown + | [ "field" ] -> Page.Field + | [ "input" ] -> Page.Input + | [ "link" ] -> Page.Link + | [ "radio" ] -> Page.Radio + | [ "select" ] -> Page.Select + | [ "slider" ] -> Page.Slider + | [ "spinbutton" ] -> Page.SpinButton + | [ "textarea" ] -> Page.TextArea + | [ "switch" ] -> Page.Switch + | [ "icon" ] -> Page.Icon + | [ "searchbox" ] -> Page.SearchBox + | [ "swatchpicker" ] -> Page.SwatchPicker + | [ "tagpicker" ] -> Page.TagPicker + | [ "datepicker" ] -> Page.DatePicker + | [ "calendar" ] -> Page.Calendar + | [ "timepicker" ] -> Page.TimePicker + | [ "datagrid" ] -> Page.DataGrid + | [ "virtualizeddatagrid" ] -> Page.VirtualizedDataGrid + | [ "table" ] -> Page.Table + | [ "tree" ] -> Page.Tree + | [ "flattree" ] -> Page.FlatTree + | [ "accordion" ] -> Page.Accordion + | [ "menu" ] -> Page.Menu + | [ "tablist" ] -> Page.TabList + | [ "card" ] -> Page.Card + | [ "dialog" ] -> Page.Dialog + | [ "divider" ] -> Page.Divider + | [ "popover" ] -> Page.Popover + | [ "portal" ] -> Page.Portal + | [ "toolbar" ] -> Page.Toolbar + | [ "toast" ] -> Page.Toast + | [ "skeleton" ] -> Page.Skeleton + | [ "messagebar" ] -> Page.MessageBar + | [ "drawer" ] -> Page.Drawer + | [ "teachingpopover" ] -> Page.TeachingPopover + | [ "carousel" ] -> Page.Carousel + | [ "avatar" ] -> Page.Avatar + | [ "avatargroup" ] -> Page.AvatarGroup + | [ "badge" ] -> Page.Badge + | [ "counterbadge" ] -> Page.CounterBadge + | [ "presencebadge" ] -> Page.PresenceBadge + | [ "image" ] -> Page.Image + | [ "persona" ] -> Page.Persona + | [ "progressbar" ] -> Page.ProgressBar + | [ "spinner" ] -> Page.Spinner + | [ "taggroup" ] -> Page.TagGroup + | [ "interactiontag" ] -> Page.InteractionTag + | [ "text" ] -> Page.Text + | [ "tooltip" ] -> Page.Tooltip + | [ "infolabel" ] -> Page.InfoLabel + | [ "infobutton" ] -> Page.InfoButton + | [ "breadcrumb" ] -> Page.Breadcrumb + | [ "rating" ] -> Page.Rating + | [ "overflow" ] -> Page.Overflow + | [ "usearrownavigationgroup" ] -> Page.UseArrowNavigationGroup + | [ "usefocusablegroup" ] -> Page.UseFocusableGroup + | [ "usefocusfinders" ] -> Page.UseFocusFinders + | [ "usekeyboardnavattribute" ] -> Page.UseKeyboardNavAttribute + | [ "usemodalattributes" ] -> Page.UseModalAttributes + | [ "useid" ] -> Page.UseId + | [ "createpresencecomponent" ] -> Page.CreatePresenceComponent + | [ "createmotioncomponent" ] -> Page.CreateMotionComponent + | [ "virtualizerscrollview" ] -> Page.VirtualizerScrollView + | [ "nav" ] -> Page.Nav + | _ -> defaultPage + + let noQueryString segments : string list * (string * string) list = segments, [] + + let toUrlSegments = function + | Page.Install -> [ "install" ] |> noQueryString + | Page.FluentProvider -> [ "fluentprovider" ] |> noQueryString + | Page.MakeStyles -> [ "makestyles" ] |> noQueryString + | Page.MakeResetStyles -> [ "makeresetstyles" ] |> noQueryString + | Page.BundleIcon -> [ "bundleicon" ] |> noQueryString + | Page.Tokens -> [ "tokens" ] |> noQueryString + | Page.TypographyStyles -> [ "typographystyles" ] |> noQueryString + | Page.Themes -> [ "themes" ] |> noQueryString + | Page.MergeClasses -> [ "mergeclasses" ] |> noQueryString + | Page.Button -> [ "button" ] |> noQueryString + | Page.CompoundButton -> [ "compoundbutton" ] |> noQueryString + | Page.MenuButton -> [ "menubutton" ] |> noQueryString + | Page.SplitButton -> [ "splitbutton" ] |> noQueryString + | Page.ToggleButton -> [ "togglebutton" ] |> noQueryString + | Page.Checkbox -> [ "checkbox" ] |> noQueryString + | Page.Combobox -> [ "combobox" ] |> noQueryString + | Page.Dropdown -> [ "dropdown" ] |> noQueryString + | Page.Field -> [ "field" ] |> noQueryString + | Page.Input -> [ "input" ] |> noQueryString + | Page.Link -> [ "link" ] |> noQueryString + | Page.Radio -> [ "radio" ] |> noQueryString + | Page.Select -> [ "select" ] |> noQueryString + | Page.Slider -> [ "slider" ] |> noQueryString + | Page.SpinButton -> [ "spinbutton" ] |> noQueryString + | Page.TextArea -> [ "textarea" ] |> noQueryString + | Page.Switch -> [ "switch" ] |> noQueryString + | Page.Icon -> [ "icon" ] |> noQueryString + | Page.SearchBox -> [ "searchbox" ] |> noQueryString + | Page.SwatchPicker -> [ "swatchpicker" ] |> noQueryString + | Page.TagPicker -> [ "tagpicker" ] |> noQueryString + | Page.DatePicker -> [ "datepicker" ] |> noQueryString + | Page.Calendar -> [ "calendar" ] |> noQueryString + | Page.TimePicker -> [ "timepicker" ] |> noQueryString + | Page.DataGrid -> [ "datagrid" ] |> noQueryString + | Page.VirtualizedDataGrid -> [ "virtualizeddatagrid" ] |> noQueryString + | Page.Table -> [ "table" ] |> noQueryString + | Page.Tree -> [ "tree" ] |> noQueryString + | Page.FlatTree -> [ "flattree" ] |> noQueryString + | Page.Accordion -> [ "accordion" ] |> noQueryString + | Page.Menu -> [ "menu" ] |> noQueryString + | Page.TabList -> [ "tablist" ] |> noQueryString + | Page.Card -> [ "card" ] |> noQueryString + | Page.Dialog -> [ "dialog" ] |> noQueryString + | Page.Divider -> [ "divider" ] |> noQueryString + | Page.Popover -> [ "popover" ] |> noQueryString + | Page.Portal -> [ "portal" ] |> noQueryString + | Page.Toolbar -> [ "toolbar" ] |> noQueryString + | Page.Toast -> [ "toast" ] |> noQueryString + | Page.Skeleton -> [ "skeleton" ] |> noQueryString + | Page.MessageBar -> [ "messagebar" ] |> noQueryString + | Page.Drawer -> [ "drawer" ] |> noQueryString + | Page.TeachingPopover -> [ "teachingpopover" ] |> noQueryString + | Page.Carousel -> [ "carousel" ] |> noQueryString + | Page.Avatar -> [ "avatar" ] |> noQueryString + | Page.AvatarGroup -> [ "avatargroup" ] |> noQueryString + | Page.Badge -> [ "badge" ] |> noQueryString + | Page.CounterBadge -> [ "counterbadge" ] |> noQueryString + | Page.PresenceBadge -> [ "presencebadge" ] |> noQueryString + | Page.Image -> [ "image" ] |> noQueryString + | Page.Persona -> [ "persona" ] |> noQueryString + | Page.ProgressBar -> [ "progressbar" ] |> noQueryString + | Page.Spinner -> [ "spinner" ] |> noQueryString + | Page.TagGroup -> [ "taggroup" ] |> noQueryString + | Page.InteractionTag -> [ "interactiontag" ] |> noQueryString + | Page.Text -> [ "text" ] |> noQueryString + | Page.Tooltip -> [ "tooltip" ] |> noQueryString + | Page.InfoLabel -> [ "infolabel" ] |> noQueryString + | Page.InfoButton -> [ "infobutton" ] |> noQueryString + | Page.Breadcrumb -> [ "breadcrumb" ] |> noQueryString + | Page.Rating -> [ "rating" ] |> noQueryString + | Page.Overflow -> [ "overflow" ] |> noQueryString + | Page.UseArrowNavigationGroup -> [ "usearrownavigationgroup" ] |> noQueryString + | Page.UseFocusableGroup -> [ "usefocusablegroup" ] |> noQueryString + | Page.UseFocusFinders -> [ "usefocusfinders" ] |> noQueryString + | Page.UseKeyboardNavAttribute -> [ "usekeyboardnavattribute" ] |> noQueryString + | Page.UseModalAttributes -> [ "usemodalattributes" ] |> noQueryString + | Page.UseId -> [ "useid" ] |> noQueryString + | Page.CreatePresenceComponent -> [ "createpresencecomponent" ] |> noQueryString + | Page.CreateMotionComponent -> [ "createmotioncomponent" ] |> noQueryString + | Page.VirtualizerScrollView -> [ "virtualizerscrollview" ] |> noQueryString + | Page.Nav -> [ "nav" ] |> noQueryString + +[] +module Router = + let goToUrl (e: MouseEvent) = + e.preventDefault() + let href : string = !!e.currentTarget?attributes?href?value + Router.navigate href + + let navigatePage (p:Page) = p |> Page.toUrlSegments |> Router.navigate + +[] +module Cmd = + let navigatePage (p:Page) = p |> Page.toUrlSegments |> Cmd.navigate diff --git a/src/Docs/SharedView.fs b/src/Docs/SharedView.fs new file mode 100644 index 0000000..ee79f2b --- /dev/null +++ b/src/Docs/SharedView.fs @@ -0,0 +1,9 @@ +module Docs.SharedView + +open FS.FluentUI +open Feliz +open Router + +type menuItem + with + static member inline href (p:Page) = Interop.mkProperty "href" (p |> Page.toUrlSegments |> Router.format) diff --git a/src/Docs/Update/App.fs b/src/Docs/Update/App.fs new file mode 100644 index 0000000..2d80b7f --- /dev/null +++ b/src/Docs/Update/App.fs @@ -0,0 +1,8 @@ +module Docs.Update.App + +open Elmish +open Docs.Model + +let update msg model = + match msg with + | App.Msg.DoNothing -> model, Cmd.none diff --git a/src/Docs/View/App.fs b/src/Docs/View/App.fs new file mode 100644 index 0000000..b553130 --- /dev/null +++ b/src/Docs/View/App.fs @@ -0,0 +1,8 @@ +module Docs.View.App + +open Feliz + +let view model dispatch = + Html.div [ + + ]