Examples converted to Shiny modules

inst/examples/components/FileInput.R

@@ -1,26 +1,33 @@
 library(shiny)
 library(appsilon.blueprint)
 
-library(shiny)
-library(appsilon.blueprint)
+setInput <- function(inputId, accessor = NULL) {
+  JS(paste0("x => Shiny.setInputValue('", inputId, "', x", accessor, ")"))
+}
 
-if (interactive()) shinyApp(
-  ui = tagList(
+ui <- function(id) {
+  ns <- NS(id)
+  tagList(
     H4("Uncontrolled"),
     FileInput(
-      onChange = JS("event => Shiny.setInputValue('uncontrolledFileInput', event.target.value)"),
+      onChange = setInput(ns("uncontrolledFileInput"), ".target.value"),
       text = "Please, choose a file...",
     ),
-    textOutput("uncontrolledFileinputOutput"),
+    textOutput(ns("uncontrolledFileinputOutput")),
     H4("Controlled"),
     FileInput.shinyInput(
-      inputId = "controlledFileInput",
+      inputId = ns("controlledFileInput"),
       value = "Please, choose a file..."
     ),
-    textOutput("controlledFileinputOutput")
-  ),
-  server = function(input, output) {
+    textOutput(ns("controlledFileinputOutput"))
+  )
+}
+
+server <- function(id) {
+  moduleServer(id, function(input, output, session) {
     output$uncontrolledFileinputOutput <- renderText(input$uncontrolledFileInput)
     output$controlledFileinputOutput <- renderText(input$controlledFileInput)
-  }
-)
+  })
+}
+
+if (interactive()) shinyApp(ui("app"), function(input, output) server("app"))

inst/examples/components/MultiSlider.R

@@ -1,9 +1,14 @@
 library(shiny)
 library(appsilon.blueprint)
 
-if (interactive()) shinyApp(
-  ui = reactOutput("multiSliderOutput"),
-  server = function(input, output) {
+ui <- function(id) {
+  ns <- NS(id)
+  reactOutput(ns("multiSliderOutput"))
+}
+
+server <- function(id) {
+  moduleServer(id, function(input, output, session) {
+    ns <- session$ns
 
     thresholds <- reactiveValues(
       dangerStart = 3,
@@ -23,7 +28,7 @@ if (interactive()) shinyApp(
     output$multiSliderOutput <- renderReact({
       MultiSlider(
         defaultTrackIntent = "success",
-        onChange = setInput("mutliSliderInput"),
+        onChange = setInput(ns("mutliSliderInput")),
         stepSize = 1,
         min = 0,
         max = 20,
@@ -53,5 +58,7 @@ if (interactive()) shinyApp(
         )
       )
     })
-  }
-)
+  })
+}
+
+if (interactive()) shinyApp(ui("app"), function(input, output) server("app"))

inst/examples/components/NumericInput.R

@@ -1,23 +1,29 @@
 library(shiny)
 library(appsilon.blueprint)
 
-if (interactive()) shinyApp(
-  ui = tagList(
+ui <- function(id) {
+  ns <- NS(id)
+  tagList(
     H4("Uncontrolled"),
     NumericInput(
-      onValueChange = setInput("uncontrolledNumericInput"),
+      onValueChange = setInput(ns("uncontrolledNumericInput")),
       intent = "primary"
     ),
-    textOutput("uncontrolledNumericInputOutput"),
+    textOutput(ns("uncontrolledNumericInputOutput")),
     H4("Controlled"),
     NumericInput.shinyInput(
-      inputId = "controlledNumericInput",
+      inputId = ns("controlledNumericInput"),
       intent = "primary"
     ),
-    textOutput("controlledNumericInputOutput")
-  ),
-  server = function(input, output) {
+    textOutput(ns("controlledNumericInputOutput"))
+  )
+}
+
+server <- function(id) {
+  moduleServer(id, function(input, output, session) {
     output$uncontrolledNumericInputOutput <- renderText(input$uncontrolledNumericInput)
     output$controlledNumericInputOutput <- renderText(input$controlledNumericInput)
-  }
-)
+  })
+}
+
+if (interactive()) shinyApp(ui("app"), function(input, output) server("app"))

inst/examples/components/RangeSlider.R

@@ -1,31 +1,25 @@
 library(shiny)
 library(appsilon.blueprint)
 
-if (interactive()) shinyApp(
-  ui = tagList(
-    H4("Uncontrolled"),
-    # The uncontrolled slider value change works correctly but the component is not reactive
-    RangeSlider(
-      min = 0,
-      max = 10,
-      value = c(2, 4),
-      stepSize = 0.1,
-      labelStepSize = 10,
-      onChange = setInput("uncontrolledRangeSlider")
-    ),
-    textOutput("uncontrolledRangeSliderOutput"),
-    H4("Controlled"),
+ui <- function(id) {
+  ns <- NS(id)
+  tagList(
+    # RangeSlider must be controlled
     RangeSlider.shinyInput(
-      inputId = "controlledRangeSlider",
+      inputId = ns("controlledRangeSlider"),
       min = 0,
       max = 10,
       stepSize = 0.1,
       labelStepSize = 10
     ),
-    textOutput("controlledRangeSliderOutput")
-  ),
-  server = function(input, output) {
-    output$uncontrolledRangeSliderOutput <- renderText(input$uncontrolledRangeSlider)
+    textOutput(ns("controlledRangeSliderOutput"))
+  )
+}
+server <- function(id) {
+  moduleServer(id, function(input, output, session) {
     output$controlledRangeSliderOutput <- renderText(input$controlledRangeSlider)
-  }
-)
+  })
+}
+
+
+if (interactive()) shinyApp(ui("app"), function(input, output) server("app"))

inst/examples/components/Slider.R

@@ -1,31 +1,25 @@
 library(shiny)
 library(appsilon.blueprint)
 
-if (interactive()) shinyApp(
-  ui = tagList(
-    H4("Uncontrolled"),
-    # The uncontrolled slider value change works correctly but the component is not reactive
-    Slider(
-      min = 0,
-      max = 10,
-      value = 5,
-      stepSize = 0.1,
-      labelStepSize = 10,
-      onChange = setInput("uncontrolledSlider")
-    ),
-    textOutput("uncontrolledSliderOutput"),
-    H4("Controlled"),
+ui <- function(id) {
+  ns <- NS(id)
+  tagList(
+    # Slider must be controlled
     Slider.shinyInput(
-      inputId = "controlledSlider",
+      inputId = ns("controlledSlider"),
       min = 0,
       max = 10,
       stepSize = 0.1,
       labelStepSize = 10
     ),
-    textOutput("controlledSliderOutput")
-  ),
-  server = function(input, output) {
-    output$uncontrolledSliderOutput <- renderText(input$uncontrolledSlider)
+    textOutput(ns("controlledSliderOutput"))
+  )
+}
+
+server <- function(id) {
+  moduleServer(id, function(input, output, session) {
     output$controlledSliderOutput <- renderText(input$controlledSlider)
-  }
-)
+  })
+}
+
+if (interactive()) shinyApp(ui("app"), function(input, output) server("app"))

inst/examples/components/TagInput.R

@@ -1,16 +1,23 @@
 library(shiny)
 library(appsilon.blueprint)
 
-if (interactive()) shinyApp(
+
+ui <- function(id) {
+  ns <- NS(id)
   # TagInput must be controlled
-  ui = tagList(
+  tagList(
     TagInput.shinyInput(
-      inputId = "controlledTagInput",
+      inputId = ns("controlledTagInput"),
       value = c("one", "two", "three")
     ),
-    textOutput("controlledTagInputOutput")
-  ),
-  server = function(input, output) {
+    textOutput(ns("controlledTagInputOutput"))
+  )
+}
+
+server <- function(id) {
+  moduleServer(id, function(input, output, session) {
     output$controlledTagInputOutput <- renderText(input$controlledTagInput)
-  }
-)
+  })
+}
+
+if (interactive()) shinyApp(ui("app"), function(input, output) server("app"))

inst/examples/showcase/app.R

@@ -41,16 +41,18 @@ sections <- list(
     item("Checkbox", "Checkbox"),
     item("Radio", "Radio"),
     item("HTML select", "HTMLSelect"),
-    # TODO: Slider
+    item("Slider", "Slider"),
+    item("Range-slider", "RangeSlider"),
+    item("Multi-slider", "MultiSlider"),
     item("Switch", "Switch")
   ),
   section(
     "FORM INPUTS",
-    # TODO: File input
-    # TODO: Numeric input
+    item("File input", "FileInput"),
+    item("Numeric input", "NumericInput"),
     item("Input group", "InputGroup"),
-    item("Text area", "TextArea")
-    # TODO: Tag input
+    item("Text area", "TextArea"),
+    item("Tag input", "TagInput")
   ),
   section(
     "OVERLAYS",