Display multiple examples in dashboard

inst/examples/DetailsList3.R

@@ -8,7 +8,7 @@ CustomComponents <- tags$script(HTML("(function() {
   const React = jsmodule['react'];
   const Fluent = jsmodule['@fluentui/react'];
   const Shiny = jsmodule['@/shiny'];
-  const CustomComponents = jsmodule['CustomComponents'] = {};
+  const CustomComponents = jsmodule['CustomComponents'] ??= {};
 
   function useSelection(inputId) {
     const selection = React.useRef(new Fluent.Selection({

inst/examples/TextField2.R

@@ -7,7 +7,7 @@ library(shiny.fluent)
 CustomComponents <- tags$script(HTML("(function() {
   const { InputAdapter } = jsmodule['@/shiny.react'];
   const { TextField } = jsmodule['@fluentui/react'];
-  const CustomComponents = jsmodule['CustomComponents'] = {};
+  const CustomComponents = jsmodule['CustomComponents'] ??= {};
 
   CustomComponents.UpperCaseTextField = InputAdapter(TextField, (value, setValue) => ({
     value: value.toUpperCase(),

inst/examples/dashboard/app.R

@@ -64,13 +64,10 @@ sass(
 
 server <- function(input, output, session) {
   router_server()
-  example_servers <- unlist(map(examples_routes, "server"))
-  lapply(
-    examples,
-    function(item, modules = example_servers) {
-      modules[[item]](item)
-    }
-  )
+  examples_routes %>%
+    map("server") %>%
+    flatten() %>%
+    iwalk(function(server, id) server(id))
 }
 
 shinyApp(ui, server)

inst/examples/dashboard/examples.R

@@ -92,35 +92,52 @@ readExample <- function(path) {
   list(code = code, ui = module$ui, server = module$server)
 }
 
-makeExamplePage <- function(name, ui, code) {
+makeText <- function(text) {
+  strsplit(text, "\\n\\n")[[1]] %>%
+    map(Text) %>%
+    Stack(tokens = list(childrenGap = 10))
+}
+
+makeExamplePage <- function(name, example) {
   help <- getHelpList(name)
   makePage(
     name,
     "Fluent UI component",
     div(
-      makeCard("Description", Text(nowrap = FALSE, help$description)),
+      makeCard("Description", makeText(help$description)),
       makeCard("Usage", pre(help$usage)),
-      makeCard("Live example", div(style = "padding: 20px", ui)),
-      makeCard("Live example code", pre(code))
+      imap(example, makeLiveExamplePage)
     )
   )
 }
 
+makeLiveExamplePage <- function(example, id) {
+  tagList(
+    makeCard("Live example", div(style = "padding: 20px", example$ui(id))),
+    makeCard("Live example code", pre(example$code))
+  )
+}
+
 makeExampleRoute <- function(name) {
-  path <- system.file(file.path("examples", paste0(name, ".R")), package = "shiny.fluent")
-  example <- readExample(path)
-  example_server <- list()
-  example_server[[name]] <- example$server
-  return(
-    list(
-      server = example_server,
-      router = route(
-        path = name,
-        ui = makeExamplePage(
-          name = name,
-          ui = example$ui(name),
-          code = example$code
-        )
+  examples_files <- list.files(
+    system.file("examples", package = "shiny.fluent"),
+    full.names = TRUE
+  )
+  # Match on component names with optional digits at the end
+  pattern <- paste0("^", name, "([0-9]+)?.R")
+  path <- examples_files[grepl(pattern, basename(examples_files))]
+  examples_names  <- tools::file_path_sans_ext(basename(path))
+  example <- path %>%
+    map(readExample) %>%
+    set_names(examples_names)
+
+  list(
+    server = map(example, "server"),
+    router = route(
+      path = name,
+      ui = makeExamplePage(
+        name = name,
+        example = example
       )
     )
   )

inst/examples/dashboard/utils.R

@@ -10,10 +10,9 @@ makePage <- function (title, subtitle, contents) {
 }
 
 makeCard <- function(title, content) {
-  div(class = "card ms-depth-8",
-      Stack(
-        tokens = list(childrenGap = 5),
-        Text(variant = "large", title, block = TRUE),
-        content
-      ))
+  div(
+    class = "card ms-depth-8",
+    Text(variant = "large", title, block = TRUE),
+    content
+  )
 }