Add Breadcrumbs and more

NAMESPACE

@@ -3,11 +3,14 @@
 export(AnchorButton)
 export(AnchorButton.shinyInput)
 export(Blockquote)
+export(Breadcrumbs)
 export(Button)
 export(Button.shinyInput)
 export(ButtonGroup)
 export(Callout)
 export(Card)
+export(Checkbox)
+export(Checkbox.shinyInput)
 export(Code)
 export(Collapse)
 export(ControlGroup)
@@ -38,9 +41,15 @@ export(NavbarGroup)
 export(NavbarHeading)
 export(NonIdealState)
 export(OL)
+export(OverflowList)
+export(PanelStack2)
 export(Popover)
 export(Pre)
 export(ProgressBar)
+export(Radio)
+export(RadioGroup)
+export(RadioGroup.shinyInput)
+export(ResizeSensor)
 export(Spinner)
 export(Switch)
 export(Switch.shinyInput)

R/components.R

@@ -47,7 +47,14 @@ input <- function(name, defaultValue) {
   }
 }
 
-# TODO: Breadcrumbs
+#' Breadcrumbs
+#'
+#' Documentation: <https://blueprintjs.com/docs/#core/components/breadcrumbs>
+#'
+#' @example inst/examples/components/Breadcrumbs.R
+#' @inherit template params
+#' @export
+Breadcrumbs <- component("Breadcrumbs")
 
 #' Button
 #'
@@ -106,8 +113,6 @@ Card <- component("Card")
 #' @export
 Collapse <- component("Collapse")
 
-# TODO: Collapsible list
-
 #' Divider
 #'
 #' Documentation: <https://blueprintjs.com/docs/#core/components/divider>
@@ -171,9 +176,7 @@ Blockquote <- component("Blockquote")
 #' @export
 Code <- component("Code")
 
-#' @rdname html_elements
-#' @export
-Label <- component("Label")
+# Label has its own documentation page.
 
 #' @rdname html_elements
 #' @export
@@ -249,9 +252,23 @@ NavbarDivider <- component("NavbarDivider")
 #' @export
 NonIdealState <- component("NonIdealState")
 
-# TODO: Overflow list
+#' Overflow list
+#'
+#' Documentation: <https://blueprintjs.com/docs/#core/components/overflow-list>
+#'
+#' @example inst/examples/components/OverflowList.R
+#' @inherit template params
+#' @export
+OverflowList <- component("OverflowList")
 
-# TODO: Panel stack (v2)
+#' Panel stack (v2)
+#'
+#' Documentation: <https://blueprintjs.com/docs/#core/components/panel-stack2>
+#'
+#' @example inst/examples/components/PanelStack2.R
+#' @inherit template params
+#' @export
+PanelStack2 <- component("PanelStack2")
 
 #' Progress bar
 #'
@@ -262,9 +279,14 @@ NonIdealState <- component("NonIdealState")
 #' @export
 ProgressBar <- component("ProgressBar")
 
-# TODO: Resize sensor
-
-# TODO: Skeleton
+#' Resize sensor
+#'
+#' Documentation: <https://blueprintjs.com/docs/#core/components/resize-sensor>
+#'
+#' @example inst/examples/components/ResizeSensor.R
+#' @inherit template params
+#' @export
+ResizeSensor <- component("ResizeSensor")
 
 #' Spinner
 #'
@@ -337,11 +359,44 @@ FormGroup <- component("FormGroup")
 #' @export
 ControlGroup <- component("ControlGroup")
 
-# TODO: Label
+#' Label
+#'
+#' Documentation: <https://blueprintjs.com/docs/#core/components/label>
+#'
+#' @example inst/examples/components/Label.R
+#' @inherit template params
+#' @export
+Label <- component("Label")
+
+#' Checkbox
+#'
+#' Documentation: <https://blueprintjs.com/docs/#core/components/checkbox>
+#'
+#' @example inst/examples/components/Checkbox.R
+#' @inherit template params
+#' @export
+Checkbox <- component("Checkbox")
+
+#' @rdname Checkbox
+#' @export
+Checkbox.shinyInput <- input("Checkbox", FALSE) # nolint
+
+#' Radio
+#'
+#' Documentation: <https://blueprintjs.com/docs/#core/components/radio>
+#'
+#' @example inst/examples/components/Radio.R
+#' @inherit template params
+#' @export
+Radio <- component("Radio")
 
-# TODO: Checkbox
+#' @rdname Radio
+#' @export
+RadioGroup <- component("RadioGroup")
 
-# TODO: Radio
+#' @rdname Radio
+#' @export
+RadioGroup.shinyInput <- input("RadioGroup", NULL) # nolint
 
 #' HTMLSelect
 #'

inst/examples/components/Breadcrumbs.R

@@ -0,0 +1,13 @@
+library(shiny)
+library(appsilon.blueprint)
+
+items <- list(
+  list(icon = "folder-close", text = "Users"),
+  list(icon = "folder-close", text = "Janet"),
+  list(icon = "document", text = "image.jpg")
+)
+
+if (interactive()) shinyApp(
+  ui = Breadcrumbs(items = items),
+  server = function(input, output) {}
+)

inst/examples/components/Checkbox.R

@@ -0,0 +1,23 @@
+library(shiny)
+library(appsilon.blueprint)
+
+if (interactive()) shinyApp(
+  ui = tagList(
+    Checkbox(
+      onChange = JS("(event) => Shiny.setInputValue('apples', event.target.checked)"),
+      defaultChecked = TRUE,
+      label = "Apples"
+    ),
+    Checkbox.shinyInput(
+      inputId = "bananas",
+      value = TRUE,
+      label = "Bananas"
+    ),
+    textOutput("applesEnabled"),
+    textOutput("bananasEnabled")
+  ),
+  server = function(input, output) {
+    output$applesEnabled <- renderText(paste("Apples:", deparse(input$apples)))
+    output$bananasEnabled <- renderText(paste("Bananas:", deparse(input$bananas)))
+  }
+)

inst/examples/components/Label.R

@@ -0,0 +1,10 @@
+library(shiny)
+library(appsilon.blueprint)
+
+if (interactive()) shinyApp(
+  ui = Label(
+    "Label",
+    tags$input(class = "bp4-input")
+  ),
+  server = function(input, output) {}
+)

inst/examples/components/OverflowList.R

@@ -0,0 +1,29 @@
+library(shiny)
+library(appsilon.blueprint)
+
+boxStyle <- tags$style("
+  .box {
+    margin: 0.5em;
+    padding: 0.5em;
+    background: silver;
+    font-size: 4em;
+  }
+")
+
+items <- lapply(
+  list("Too", "many", "words", "to", "fit", "on", "your", "screen!"),
+  function(text) div(text, class = "box")
+)
+
+if (interactive()) shinyApp(
+  ui = tagList(
+    boxStyle,
+    OverflowList(
+      items = items,
+      visibleItemRenderer = JS("item => item"),
+      overflowRenderer = JS("items => null"),
+      collapseFrom = "end"
+    )
+  ),
+  server = function(input, output) {}
+)

inst/examples/components/PanelStack2.R

@@ -0,0 +1,55 @@
+library(shiny)
+library(appsilon.blueprint)
+
+customComponents <- tagList(
+  tags$style("
+    .panel-stack {
+      border: 1px solid lightgrey;
+      width: 300px;
+      height: 240px;
+    }
+    .panel {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  "),
+  tags$script(HTML("(() => {
+    const React = jsmodule['react'];
+    const Blueprint = jsmodule['@blueprintjs/core'];
+
+    function createPanel(num) {
+      return {
+        title: `Panel ${num}`,
+        renderPanel: Panel,
+        props: { num },
+      };
+    }
+
+    function Panel({ num, openPanel }) {
+      const button = React.createElement(
+        Blueprint.Button,
+        {
+          onClick: () => openPanel(createPanel(num + 1)),
+          intent: Blueprint.Intent.PRIMARY,
+        },
+        'Open Panel'
+      )
+      return React.createElement('div', { className: 'panel' }, button);
+    }
+
+    window.createPanel = createPanel;
+  })()"))
+)
+
+if (interactive()) shinyApp(
+  ui = tagList(
+    customComponents,
+    PanelStack2(
+      className = "panel-stack",
+      initialPanel = JS("createPanel(1)")
+    )
+  ),
+  server = function(input, output) {}
+)

inst/examples/components/Radio.R

@@ -0,0 +1,34 @@
+library(shiny)
+library(appsilon.blueprint)
+
+if (interactive()) shinyApp(
+  ui = tagList(
+    H3("Favorite animal"),
+    RadioGroup.shinyInput(
+      inputId = "animal",
+      value = "dog",
+      Radio(label = "Cat", value = "cat"),
+      Radio(label = "Dog", value = "dog")
+    ),
+    textOutput("favoriteAnimal"),
+    H3("Favorite fruit"),
+    reactOutput("fruitRadio"),
+    textOutput("favoriteFruit")
+  ),
+  server = function(input, output) {
+    output$favoriteAnimal <- renderText(deparse(input$animal))
+
+    fruit <- reactiveVal()
+    observeEvent(input$fruit, fruit(input$fruit))
+    output$fruitRadio <- renderReact({
+      RadioGroup(
+        onChange = JS("event => Shiny.setInputValue('fruit', event.currentTarget.value)"),
+        selectedValue = fruit(),
+        Radio(label = "Apple", value = "a"),
+        Radio(label = "Banana", value = "b"),
+        Radio(label = "Cherry", value = "c")
+      )
+    })
+    output$favoriteFruit <- renderText(deparse(fruit()))
+  }
+)

inst/examples/components/ResizeSensor.R

@@ -0,0 +1,29 @@
+library(shiny)
+library(appsilon.blueprint)
+
+if (interactive()) shinyApp(
+  ui = tagList(
+    tags$style("
+      .resizable {
+        overflow: auto;
+        resize: both;
+        width: 100px;
+        height: 100px;
+        background: silver;
+      }
+    "),
+    ResizeSensor(
+      onResize = JS("entries => Shiny.setInputValue('resize', entries[0].contentRect)"),
+      div(
+        class = "resizable",
+        textOutput("size")
+      )
+    )
+  ),
+  server = function(input, output) {
+    output$size <- renderText({
+      content <- req(input$resize)
+      paste0(content$width, "x", content$height)
+    })
+  }
+)

js/src/inputs.jsx

@@ -9,6 +9,16 @@ export const EditableText = InputAdapter(Blueprint.EditableText, (value, setValu
   onChange: setValue,
 }));
 
+export const Checkbox = InputAdapter(Blueprint.Checkbox, (value, setValue) => ({
+  checked: value,
+  onChange: (event) => setValue(event.target.checked),
+}));
+
+export const RadioGroup = InputAdapter(Blueprint.RadioGroup, (value, setValue) => ({
+  selectedValue: value,
+  onChange: (event) => setValue(event.currentTarget.value),
+}));
+
 export const HTMLSelect = InputAdapter(Blueprint.HTMLSelect, (value, setValue) => ({
   value,
   onChange: (event) => setValue(event.target.value),