├── .Rbuildignore ├── .github ├── PULL_REQUEST_TEMPLATE.md └── workflows │ ├── ci.yml │ └── pkgdown.yml ├── .gitignore ├── .lintr ├── DESCRIPTION ├── NAMESPACE ├── NEWS.md ├── R ├── addBlueprintPrefix.R ├── blueprintDependency.R ├── components.R ├── handlers.R ├── reexports.R ├── runExample.R └── toaster.R ├── README.md ├── inst ├── examples │ ├── Alert.R │ ├── Breadcrumbs.R │ ├── Button.R │ ├── ButtonGroup.R │ ├── Callout.R │ ├── Card.R │ ├── Checkbox.R │ ├── Collapse.R │ ├── ControlGroup.R │ ├── Dialog.R │ ├── Divider.R │ ├── Drawer.R │ ├── EditableText.R │ ├── FileInput.R │ ├── FormGroup.R │ ├── HTMLSelect.R │ ├── HTMLTable.R │ ├── Icon.R │ ├── InputGroup.R │ ├── Label.R │ ├── Menu.R │ ├── MultiSelect.R │ ├── MultiSlider.R │ ├── MultistepDialog.R │ ├── Navbar.R │ ├── NonIdealState.R │ ├── NumericInput.R │ ├── OverflowList.R │ ├── Overlay.R │ ├── PanelStack.R │ ├── Popover.R │ ├── ProgressBar.R │ ├── Radio.R │ ├── RangeSlider.R │ ├── ResizeSensor.R │ ├── Select.R │ ├── Slider.R │ ├── Spinner.R │ ├── Suggest.R │ ├── Switch.R │ ├── Tabs.R │ ├── Tag.R │ ├── TagInput.R │ ├── Text.R │ ├── TextArea.R │ ├── Toast.R │ ├── Tree.R │ ├── htmlElements.R │ ├── mbazaDashboard │ │ ├── .gitignore │ │ ├── app.R │ │ ├── home.R │ │ ├── navbar.R │ │ ├── sidebar.R │ │ ├── style.scss │ │ └── www │ │ │ └── appsilon-logo.png │ └── showcase │ │ ├── app.R │ │ ├── manifest.json │ │ └── static │ │ ├── css │ │ ├── mono-blue.min.css │ │ └── styles.css │ │ └── js │ │ ├── highlight.v11.7.0.min.js │ │ └── highlight_all.js └── www │ ├── 231.blueprint.min.js │ ├── 672.blueprint.min.js │ ├── 783.blueprint.min.js │ ├── 824.blueprint.min.js │ ├── 860.blueprint.min.js │ ├── blueprint.js │ ├── blueprint.js.LICENSE.txt │ ├── blueprint.min.js │ └── blueprint.min.js.LICENSE.txt ├── js ├── .eslintrc.js ├── .gitignore ├── cypress.config.js ├── cypress │ ├── .gitignore │ └── e2e │ │ └── showcase.cy.js ├── package.json ├── src │ ├── PanelStack.module.css │ ├── index.js │ ├── inputs.js │ ├── multiSlider.js │ ├── multiselect.js │ ├── panelStack.js │ ├── resizeSensor.js │ ├── select.js │ ├── suggest.js │ ├── toaster.js │ ├── tree.js │ └── utils │ │ ├── add-blueprint-prefix.js │ │ └── highlight-text.js ├── webpack.config.js └── yarn.lock ├── man ├── Alert.Rd ├── Breadcrumbs.Rd ├── Button.Rd ├── ButtonGroup.Rd ├── Callout.Rd ├── Card.Rd ├── Checkbox.Rd ├── Collapse.Rd ├── ControlGroup.Rd ├── Dialog.Rd ├── Divider.Rd ├── Drawer.Rd ├── EditableText.Rd ├── FileInput.Rd ├── FormGroup.Rd ├── HTMLSelect.Rd ├── HTMLTable.Rd ├── Icon.Rd ├── InputGroup.Rd ├── Label.Rd ├── Menu.Rd ├── MultiSelect.Rd ├── MultiSlider.Rd ├── MultistepDialog.Rd ├── Navbar.Rd ├── NonIdealState.Rd ├── NumericInput.Rd ├── OverflowList.Rd ├── Overlay.Rd ├── PanelStack.Rd ├── Popover.Rd ├── ProgressBar.Rd ├── Radio.Rd ├── RangeSlider.Rd ├── ResizeSensor.Rd ├── Select.Rd ├── Slider.Rd ├── Spinner.Rd ├── Suggest.Rd ├── Switch.Rd ├── Tabs.Rd ├── Tag.Rd ├── TagInput.Rd ├── Text.Rd ├── TextArea.Rd ├── Toaster.Rd ├── Tree.Rd ├── component.Rd ├── figures │ └── shiny-blueprint.png ├── htmlElements.Rd ├── reexports.Rd └── runExample.Rd ├── pkgdown ├── _pkgdown.yml ├── extra.css └── favicon │ ├── apple-touch-icon-120x120.png │ ├── apple-touch-icon-152x152.png │ ├── apple-touch-icon-180x180.png │ ├── apple-touch-icon-60x60.png │ ├── apple-touch-icon-76x76.png │ ├── apple-touch-icon.png │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ └── favicon.ico ├── reinstall.sh ├── renovate.json ├── shiny.blueprint.Rproj └── vignettes └── shiny-react.Rmd /.Rbuildignore: -------------------------------------------------------------------------------- 1 | ^\.github$ 2 | ^\.lintr$ 3 | ^js$ 4 | ^reinstall.sh$ 5 | ^renovate.json 6 | ^_pkgdown\.yml$ 7 | ^docs$ 8 | ^pkgdown$ 9 | ^.*\.Rproj$ 10 | ^\.Rproj\.user$ 11 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ### Changes 2 | Closes # 3 | 4 | ### How to test 5 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | on: push 3 | jobs: 4 | main: 5 | name: Check, lint & test 6 | runs-on: ubuntu-latest 7 | timeout-minutes: 30 8 | steps: 9 | - name: Checkout repository 10 | uses: actions/checkout@v4 11 | 12 | - name: Install R 13 | uses: r-lib/actions/setup-r@v2 14 | with: 15 | r-version: '4.3.2' 16 | use-public-rspm: true 17 | 18 | - name: Install R package dependencies 19 | uses: r-lib/actions/setup-r-dependencies@v2 20 | with: 21 | extra-packages: local::. # Necessary to avoid object usage linter errors. 22 | 23 | - name: R CMD check 24 | if: always() 25 | uses: r-lib/actions/check-r-package@v2 26 | with: 27 | error-on: '"note"' 28 | 29 | - name: Lint 30 | if: always() 31 | shell: Rscript {0} 32 | run: lintr::lint_package() 33 | env: 34 | LINTR_ERROR_ON_LINT: true 35 | 36 | - name: E2E test 37 | if: always() 38 | uses: cypress-io/github-action@v6 39 | with: 40 | working-directory: js 41 | start: yarn run-showcase 42 | 43 | - name: Test coverage 44 | shell: Rscript {0} 45 | run: covr::codecov() 46 | -------------------------------------------------------------------------------- /.github/workflows/pkgdown.yml: -------------------------------------------------------------------------------- 1 | name: pkgdown 2 | on: 3 | push: 4 | branches: [main] 5 | workflow_dispatch: 6 | permissions: 7 | contents: write 8 | jobs: 9 | main: 10 | name: Build and publish website 11 | runs-on: ubuntu-latest 12 | timeout-minutes: 30 13 | steps: 14 | - name: Checkout repository 15 | uses: actions/checkout@v3 16 | 17 | - name: Install pandoc 18 | uses: r-lib/actions/setup-pandoc@v2 19 | 20 | - name: Install R 21 | uses: r-lib/actions/setup-r@v2 22 | with: 23 | use-public-rspm: true 24 | 25 | - name: Install R package dependencies 26 | uses: r-lib/actions/setup-r-dependencies@v2 27 | with: 28 | extra-packages: any::pkgdown, local::. 29 | 30 | - name: Configure git 31 | run: | 32 | git config user.name "$GITHUB_ACTOR" 33 | git config user.email "$GITHUB_ACTOR@users.noreply.github.com" 34 | 35 | - name: Deploy to branch 36 | env: 37 | GITHUB_PAT: ${{ secrets.GITHUB_TOKEN }} 38 | shell: Rscript {0} 39 | run: pkgdown::deploy_to_branch(branch = "bot/github-pages") 40 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .Rproj.user 3 | docs 4 | -------------------------------------------------------------------------------- /.lintr: -------------------------------------------------------------------------------- 1 | linters: 2 | lintr::linters_with_defaults( 3 | brace_linter = lintr::brace_linter(allow_single_line = TRUE), 4 | line_length_linter = lintr::line_length_linter(100), 5 | object_name_linter = lintr::object_name_linter(c("camelCase", "CamelCase")) 6 | ) 7 | -------------------------------------------------------------------------------- /DESCRIPTION: -------------------------------------------------------------------------------- 1 | Package: shiny.blueprint 2 | Title: Palantir's 'Blueprint' for 'Shiny' Apps 3 | Version: 0.3.0 4 | Authors@R: 5 | c( 6 | person("Jakub", "Sobolewski", role = c("aut", "cre"), email = "opensource+jakub.sobolewski@appsilon.com"), 7 | person("Kamil", "Żyła", role = "aut", email = "kamil@appsilon.com"), 8 | person("Filip", "Akkad", role = "aut", email = "filip.akkad@filpro.io"), 9 | person("Filip", "Stachura", role = "aut", email = "filip@appsilon.com"), 10 | person("Paweł", "Chabros", role = "aut", email = "pawel.chabros@yahoo.pl"), 11 | person("Appsilon Sp. z o.o.", role = "cph", email = "opensource@appsilon.com") 12 | ) 13 | Description: 14 | Easily use 'Blueprint', the popular 'React' library from Palantir, in your 'Shiny' app. 15 | 'Blueprint' provides a rich set of UI components for creating visually appealing applications 16 | and is optimized for building complex, data-dense web interfaces. 17 | This package provides most components from the underlying library, 18 | as well as special wrappers for some components 19 | to make it easy to use them in 'R' without writing 'JavaScript' code. 20 | License: LGPL-3 21 | Encoding: UTF-8 22 | LazyData: true 23 | Roxygen: list(markdown = TRUE) 24 | RoxygenNote: 7.3.1 25 | VignetteBuilder: knitr 26 | Imports: 27 | checkmate, 28 | htmltools, 29 | shiny, 30 | shiny.react (>= 0.4.0), 31 | utils 32 | Suggests: 33 | covr, 34 | knitr, 35 | lintr (>= 3.0.0), 36 | purrr, 37 | rcmdcheck, 38 | rmarkdown, 39 | shiny.router 40 | -------------------------------------------------------------------------------- /NAMESPACE: -------------------------------------------------------------------------------- 1 | # Generated by roxygen2: do not edit by hand 2 | 3 | export(Alert) 4 | export(AnchorButton) 5 | export(AnchorButton.shinyInput) 6 | export(Blockquote) 7 | export(Breadcrumbs) 8 | export(Button) 9 | export(Button.shinyInput) 10 | export(ButtonGroup) 11 | export(Callout) 12 | export(Card) 13 | export(Checkbox) 14 | export(Checkbox.shinyInput) 15 | export(Code) 16 | export(Collapse) 17 | export(ControlGroup) 18 | export(Dialog) 19 | export(DialogStep) 20 | export(Divider) 21 | export(Drawer) 22 | export(EditableText) 23 | export(EditableText.shinyInput) 24 | export(FileInput) 25 | export(FileInput.shinyInput) 26 | export(FormGroup) 27 | export(H1) 28 | export(H2) 29 | export(H3) 30 | export(H4) 31 | export(H5) 32 | export(H6) 33 | export(HTMLSelect) 34 | export(HTMLSelect.shinyInput) 35 | export(HTMLTable) 36 | export(Icon) 37 | export(InputGroup) 38 | export(InputGroup.shinyInput) 39 | export(JS) 40 | export(Label) 41 | export(Menu) 42 | export(MenuDivider) 43 | export(MenuItem) 44 | export(MultiSelect) 45 | export(MultiSelect.shinyInput) 46 | export(MultiSlider) 47 | export(MultiSlider.shinyInput) 48 | export(MultiSliderHandle) 49 | export(MultistepDialog) 50 | export(Navbar) 51 | export(NavbarDivider) 52 | export(NavbarGroup) 53 | export(NavbarHeading) 54 | export(NonIdealState) 55 | export(NumericInput) 56 | export(NumericInput.shinyInput) 57 | export(OL) 58 | export(OverflowList) 59 | export(Overlay) 60 | export(PanelStack) 61 | export(PanelStack.shinyWrapper) 62 | export(Popover) 63 | export(Pre) 64 | export(ProgressBar) 65 | export(Radio) 66 | export(RadioGroup) 67 | export(RadioGroup.shinyInput) 68 | export(RangeSlider) 69 | export(RangeSlider.shinyInput) 70 | export(ResizeSensor) 71 | export(ResizeSensor.shinyInput) 72 | export(Select) 73 | export(Select.shinyInput) 74 | export(Slider) 75 | export(Slider.shinyInput) 76 | export(Spinner) 77 | export(Suggest) 78 | export(Suggest.shinyInput) 79 | export(Switch) 80 | export(Switch.shinyInput) 81 | export(Tab) 82 | export(Tabs) 83 | export(TabsExpander) 84 | export(Tag) 85 | export(TagInput) 86 | export(TagInput.shinyInput) 87 | export(Text) 88 | export(TextArea) 89 | export(TextArea.shinyInput) 90 | export(Toaster) 91 | export(Tree) 92 | export(Tree.shinyInput) 93 | export(UL) 94 | export(closePanel) 95 | export(openPanel) 96 | export(reactOutput) 97 | export(renderReact) 98 | export(runExample) 99 | export(setInput) 100 | export(triggerEvent) 101 | importFrom(shiny.react,JS) 102 | importFrom(shiny.react,reactOutput) 103 | importFrom(shiny.react,renderReact) 104 | importFrom(shiny.react,setInput) 105 | importFrom(shiny.react,triggerEvent) 106 | -------------------------------------------------------------------------------- /NEWS.md: -------------------------------------------------------------------------------- 1 | # shiny.blueprint 0.3.0 2 | 3 | 1. Upgraded `@blueprintjs/core` to 5.10.2. 4 | 2. Upgraded `shiny.react` dependency to 0.4.0 that uses React 18.3. 5 | 6 | # shiny.blueprint 0.2.0 7 | 8 | 1. `.shinyInput` wrappers added for the following components: 9 | 10 | - `Select` 11 | - `MultiSelect` 12 | - `Suggest` 13 | - `MultiSlider` 14 | 15 | # shiny.blueprint 0.1.0 16 | 17 | Initial (internal) release. 18 | -------------------------------------------------------------------------------- /R/addBlueprintPrefix.R: -------------------------------------------------------------------------------- 1 | addBlueprintPrefix <- function(txt) { 2 | paste0("shiny.blueprint-", txt) 3 | } 4 | -------------------------------------------------------------------------------- /R/blueprintDependency.R: -------------------------------------------------------------------------------- 1 | blueprintDependency <- function() { 2 | htmltools::htmlDependency( 3 | name = "blueprint", 4 | version = "0.1.0", 5 | package = "shiny.blueprint", 6 | src = "www", 7 | script = "blueprint.min.js" 8 | ) 9 | } 10 | -------------------------------------------------------------------------------- /R/handlers.R: -------------------------------------------------------------------------------- 1 | handlersObject <- function(ns) { 2 | paste0("window.jsmodule['@/shiny.blueprint'].panelStackHandlers['", ns, "']") 3 | } 4 | 5 | #' @rdname PanelStack 6 | #' @param panelId Id of the panel to be closed 7 | #' @export 8 | openPanel <- function(panelId, ns = "ps") { 9 | JS(paste0( 10 | "() => ", handlersObject(ns), ".openPanel('", panelId, "')" 11 | )) 12 | } 13 | 14 | #' @rdname PanelStack 15 | #' @export 16 | closePanel <- function(ns = "ps") { 17 | JS("() => ", handlersObject(ns), ".closePanel()") 18 | } 19 | -------------------------------------------------------------------------------- /R/reexports.R: -------------------------------------------------------------------------------- 1 | #' @importFrom shiny.react JS 2 | #' @export 3 | shiny.react::JS 4 | 5 | #' @importFrom shiny.react reactOutput 6 | #' @export 7 | shiny.react::reactOutput 8 | 9 | #' @importFrom shiny.react renderReact 10 | #' @export 11 | shiny.react::renderReact 12 | 13 | #' @importFrom shiny.react setInput 14 | #' @export 15 | shiny.react::setInput 16 | 17 | #' @importFrom shiny.react triggerEvent 18 | #' @export 19 | shiny.react::triggerEvent 20 | -------------------------------------------------------------------------------- /R/runExample.R: -------------------------------------------------------------------------------- 1 | #' Run example 2 | #' 3 | #' Launch a Shiny example app or list the available examples. 4 | #' Use `shiny.blueprint::runExample("showcase")` to run a showcase app with all the components. 5 | #' 6 | #' @param example The name of the example to run, or `NULL` to retrieve the list of examples. 7 | #' @param ... Additional arguments to pass to `shiny::runApp()`. 8 | #' @return This function normally does not return; 9 | #' interrupt R to stop the application (usually by pressing Ctrl+C or Esc). 10 | #' 11 | #' @export 12 | runExample <- function(example = NULL, ...) { 13 | examples <- system.file("examples", package = utils::packageName(), mustWork = TRUE) 14 | if (is.null(example)) { 15 | sub("\\.R$", "", list.files(examples)) 16 | } else { 17 | path <- file.path(examples, example) 18 | if (!grepl("\\.R$", path) && !file.exists(path)) { 19 | path <- paste0(path, ".R") 20 | } 21 | shiny::runApp(path, ...) 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /R/toaster.R: -------------------------------------------------------------------------------- 1 | createIdIncrementationFunction <- function(initialId = 1, incrementBy = 1) { 2 | currentId <- initialId 3 | function() { 4 | on.exit({ 5 | currentId <<- currentId + incrementBy 6 | }) 7 | currentId 8 | } 9 | } 10 | 11 | incrementToasterId <- createIdIncrementationFunction() 12 | 13 | #' Toaster 14 | #' 15 | #' @description 16 | #' Documentation: 17 | #' 18 | #' @export 19 | Toaster <- R6::R6Class( 20 | classname = "Toaster", 21 | cloneable = FALSE, 22 | public = list( 23 | #' @param toasterId Unique number - needed to use more than one toaster 24 | #' @param session Shiny session object 25 | #' @param ... Parameters passed to `Toaster` component 26 | #' @return A new `Toaster` instance. 27 | initialize = function( 28 | toasterId = incrementToasterId(), 29 | session = shiny::getDefaultReactiveDomain(), 30 | ... 31 | ) { 32 | private$toasterId <- addBlueprintPrefix(toasterId) 33 | private$session <- session 34 | private$registerToaster(...) 35 | }, 36 | 37 | #' @description Shows a new toast to the user, or updates an existing toast 38 | #' corresponding to the provided key 39 | #' @param ... Parameters passed to `Toaster` component 40 | #' @param key A key of toast to be shown/dismissed 41 | #' @return Nothing. This method is called for side effects. 42 | show = function(..., key = NULL) { 43 | props <- list(...) 44 | private$session$sendCustomMessage( 45 | private$callName("show"), 46 | list( 47 | key = key, 48 | props = props 49 | ) 50 | ) 51 | }, 52 | 53 | #' @description Dismiss all toasts instantly 54 | #' @return Nothing. This method is called for side effects. 55 | clear = function() { 56 | private$session$sendCustomMessage( 57 | private$callName("clear"), 58 | list() 59 | ) 60 | }, 61 | 62 | #' @description Dismiss the given toast instantly 63 | #' @param key A key of toast to be shown/dismissed 64 | #' @return Nothing. This method is called for side effects. 65 | dismiss = function(key) { 66 | private$session$sendCustomMessage( 67 | private$callName("dismiss"), 68 | list(key = key) 69 | ) 70 | } 71 | ), 72 | private = list( 73 | toasterId = NULL, 74 | session = NULL, 75 | callName = function(prefix) { 76 | addBlueprintPrefix(paste0(prefix, private$toasterId)) 77 | }, 78 | registerToaster = function(...) { 79 | private$session$sendCustomMessage( 80 | addBlueprintPrefix("createToaster"), 81 | list(toasterId = private$toasterId, ...) 82 | ) 83 | } 84 | ) 85 | ) 86 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # shiny.blueprint shiny.blueprint logo 2 | 3 | > _Palantir's Blueprint for Shiny Apps_ 4 | 5 | 6 | [![CRAN](https://www.r-pkg.org/badges/version/shiny.blueprint)](https://cran.r-project.org/package=shiny.blueprint) 7 | [![CI](https://github.com/Appsilon/shiny.blueprint/actions/workflows/ci.yml/badge.svg)](https://github.com/Appsilon/shiny.blueprint/actions/workflows/ci.yml) 8 | [![downloads monthly](https://cranlogs.r-pkg.org/badges/shiny.blueprint)](https://CRAN.R-project.org/package=shiny.blueprint) 9 | [![downloads total](https://cranlogs.r-pkg.org/badges/grand-total/shiny.blueprint)](https://CRAN.R-project.org/package=shiny.blueprint) 10 | [![License: LGPL-3.0](https://img.shields.io/badge/License-LGPL--3.0-blue.svg)](https://opensource.org/license/lgpl-3-0) 11 | 12 | 13 | ## Why `shiny.blueprint`? 14 | 15 | We believe that a great UI plays a huge role in the success of application projects. shiny.blueprint gives your apps: 16 | 17 | - a beautiful, professional look; 18 | - a rich set of components easily usable in Shiny; 19 | - fast speed of development that Shiny is famous for. 20 | 21 | To see `shiny.blueprint` in action check out 22 | the [Blueprint Showcase](https://connect.appsilon.com/shiny-blueprint-showcase/) app 23 | with all the available components and R usage examples. 24 | 25 | ## Installation 26 | 27 | Stable version: 28 | ```r 29 | install.packages("shiny.blueprint", dependencies = TRUE) 30 | ``` 31 | 32 | Development version: 33 | ```r 34 | remotes::install_github("Appsilon/shiny.blueprint", dependencies = TRUE) 35 | ``` 36 | 37 | With `dependencies = TRUE` the suggested packages (required to run some examples) 38 | will be installed in addition to mandatory dependencies. 39 | 40 | ## Quick start 41 | 42 | Here's how to create a basic `shiny.blueprint` app: 43 | 44 | ```r 45 | library(shiny) 46 | library(shiny.blueprint) 47 | 48 | shinyApp( 49 | ui = tagList( 50 | Switch.shinyInput( 51 | inputId = "animate", 52 | value = TRUE, 53 | label = "Animate" 54 | ), 55 | reactOutput("progress") 56 | ), 57 | server = function(input, output) { 58 | output$progress <- renderReact({ 59 | ProgressBar(animate = input$animate) 60 | }) 61 | } 62 | ) 63 | ``` 64 | 65 | The majority of Blueprint components are available in `shiny.blueprint`. 66 | Start typing `shiny.blueprint::` in RStudio to see all available components. 67 | Visit the [Blueprint docs](https://blueprintjs.com/docs/) 68 | to see what arguments (props) can be passed to the components. 69 | 70 | ## Examples 71 | 72 | All components have usage examples in R. 73 | Type `?shiny.blueprint::ComponentName` to see the code 74 | or `shiny.blueprint::runExample("ExampleName")` to launch it. 75 | Run this function without arguments to see a list of all available examples. 76 | 77 | A showcase application with all components 78 | can be launched with `shiny.blueprint::runExample("showcase")` 79 | or by visiting [this link](https://connect.appsilon.com/shiny-blueprint-showcase/). 80 | 81 | ## Appsilon 82 | 83 | 84 | 85 | Appsilon is a **Posit (formerly RStudio) Full Service Certified Partner**.
86 | Learn more at [appsilon.com](https://www.appsilon.com/). 87 | 88 | Get in touch [opensource@appsilon.com](mailto:opensource@appsilon.com) 89 | 90 | Explore the [Rhinoverse](https://rhinoverse.dev) - a family of R packages built around [Rhino](https://appsilon.github.io/rhino/)! 91 | 92 | We are hiring! 93 | -------------------------------------------------------------------------------- /inst/examples/Alert.R: -------------------------------------------------------------------------------- 1 | library(shiny.blueprint) 2 | library(shiny) 3 | 4 | ui <- function(id) { 5 | ns <- NS(id) 6 | tagList( 7 | Button.shinyInput( 8 | inputId = ns("showAlert"), 9 | "Show alert" 10 | ), 11 | reactOutput(ns("alert")) 12 | ) 13 | } 14 | 15 | server <- function(id) { 16 | moduleServer(id, function(input, output, session) { 17 | ns <- session$ns 18 | 19 | isOpen <- reactiveVal(FALSE) 20 | observeEvent(input$showAlert, isOpen(TRUE)) 21 | observeEvent(input$closeAlert, isOpen(FALSE)) 22 | 23 | output$alert <- renderReact({ 24 | Alert( 25 | usePortal = FALSE, 26 | confirmButtonText = "Got it", 27 | isOpen = isOpen(), 28 | onClose = triggerEvent(ns("closeAlert")), 29 | p("Hello, it's me, your alert") 30 | ) 31 | }) 32 | }) 33 | } 34 | 35 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 36 | -------------------------------------------------------------------------------- /inst/examples/Breadcrumbs.R: -------------------------------------------------------------------------------- 1 | library(shiny.blueprint) 2 | library(shiny) 3 | 4 | items <- list( 5 | list(href = "/", icon = "folder-close", text = "Users"), 6 | list(href = "/", icon = "folder-close", text = "Janet"), 7 | list(icon = "document", text = "image.jpg") 8 | ) 9 | 10 | ui <- function(id) { 11 | Breadcrumbs(items = items) 12 | } 13 | 14 | server <- function(id) { 15 | moduleServer(id, function(input, output, session) {}) 16 | } 17 | 18 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 19 | -------------------------------------------------------------------------------- /inst/examples/Button.R: -------------------------------------------------------------------------------- 1 | library(shiny.blueprint) 2 | library(shiny) 3 | 4 | ui <- function(id) { 5 | ns <- NS(id) 6 | tagList( 7 | textOutput(ns("clicks")), 8 | Button( 9 | onClick = triggerEvent(ns("click1")), 10 | icon = "refresh", 11 | "Refresh" 12 | ), 13 | Button.shinyInput( 14 | inputId = ns("click2"), 15 | rightIcon = "share", 16 | "Export" 17 | ), 18 | AnchorButton( 19 | onClick = triggerEvent(ns("click3")), 20 | intent = "primary", 21 | "OK" 22 | ), 23 | AnchorButton.shinyInput( 24 | inputId = ns("click4"), 25 | intent = "success", 26 | "Next" 27 | ) 28 | ) 29 | } 30 | 31 | server <- function(id) { 32 | moduleServer(id, function(input, output, session) { 33 | clicks <- reactiveVal(0) 34 | output$clicks <- renderText(paste("Clicks:", clicks())) 35 | observeEvent(input$click1, clicks(clicks() + 1)) 36 | observeEvent(input$click2, clicks(clicks() + 1)) 37 | observeEvent(input$click3, clicks(clicks() + 1)) 38 | observeEvent(input$click4, clicks(clicks() + 1)) 39 | }) 40 | } 41 | 42 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 43 | -------------------------------------------------------------------------------- /inst/examples/ButtonGroup.R: -------------------------------------------------------------------------------- 1 | library(shiny.blueprint) 2 | library(shiny) 3 | 4 | ui <- function(id) { 5 | ButtonGroup( 6 | Button(icon = "database", "Queries"), 7 | Button(icon = "function", "Functions"), 8 | AnchorButton(rightIcon = "caret-down", "Options") 9 | ) 10 | } 11 | 12 | server <- function(id) { 13 | moduleServer(id, function(input, output, session) {}) 14 | } 15 | 16 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 17 | -------------------------------------------------------------------------------- /inst/examples/Callout.R: -------------------------------------------------------------------------------- 1 | library(shiny.blueprint) 2 | library(shiny) 3 | 4 | ui <- function(id) { 5 | Callout( 6 | title = "Visually important content", 7 | "The component is a simple wrapper around the CSS API", 8 | " that provides props for modifiers and optional title element.", 9 | " Any additional HTML props will be spread to the rendered ", Code("div"), " element." 10 | ) 11 | } 12 | 13 | server <- function(id) { 14 | moduleServer(id, function(input, output, session) {}) 15 | } 16 | 17 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 18 | -------------------------------------------------------------------------------- /inst/examples/Card.R: -------------------------------------------------------------------------------- 1 | library(shiny.blueprint) 2 | library(shiny) 3 | 4 | ui <- function(id) { 5 | Card( 6 | interactive = TRUE, 7 | H5(tags$a(href = "#", "Analytical applications")), 8 | tags$p( 9 | "User interfaces that enable people to interact smoothly with data,", 10 | " ask better questions, and make better decisions." 11 | ), 12 | Button(text = "Explore products") 13 | ) 14 | } 15 | 16 | server <- function(id) { 17 | moduleServer(id, function(input, output, session) {}) 18 | } 19 | 20 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 21 | -------------------------------------------------------------------------------- /inst/examples/Checkbox.R: -------------------------------------------------------------------------------- 1 | library(shiny.blueprint) 2 | library(shiny) 3 | 4 | setInput <- function(inputId, accessor = NULL) { 5 | JS(paste0("x => Shiny.setInputValue('", inputId, "', x", accessor, ")")) 6 | } 7 | 8 | ui <- function(id) { 9 | ns <- NS(id) 10 | tagList( 11 | Checkbox( 12 | onChange = setInput(ns("apples"), ".target.checked"), 13 | defaultChecked = TRUE, 14 | label = "Apples" 15 | ), 16 | Checkbox.shinyInput( 17 | inputId = ns("bananas"), 18 | value = TRUE, 19 | label = "Bananas" 20 | ), 21 | textOutput(ns("applesEnabled")), 22 | textOutput(ns("bananasEnabled")) 23 | ) 24 | } 25 | 26 | server <- function(id) { 27 | moduleServer(id, function(input, output, session) { 28 | output$applesEnabled <- renderText(paste("Apples:", deparse(input$apples))) 29 | output$bananasEnabled <- renderText(paste("Bananas:", deparse(input$bananas))) 30 | }) 31 | } 32 | 33 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 34 | -------------------------------------------------------------------------------- /inst/examples/Collapse.R: -------------------------------------------------------------------------------- 1 | library(shiny.blueprint) 2 | library(shiny) 3 | 4 | logs <- Pre( 5 | "[11:53:30] Finished 'typescript-bundle-blueprint' after 769 ms\n", 6 | "[11:53:30] Starting 'typescript-typings-blueprint'...\n", 7 | "[11:53:30] Finished 'typescript-typings-blueprint' after 198 ms\n", 8 | "[11:53:30] write ./blueprint.css\n", 9 | "[11:53:30] Finished 'sass-compile-blueprint' after 2.84 s\n" 10 | ) 11 | 12 | ui <- function(id) { 13 | ns <- NS(id) 14 | tagList( 15 | Button.shinyInput(ns("toggle"), "Toggle logs"), 16 | reactOutput(ns("ui")) 17 | ) 18 | } 19 | 20 | server <- function(id) { 21 | moduleServer(id, function(input, output, session) { 22 | show <- reactiveVal(FALSE) 23 | observeEvent(input$toggle, show(!show())) 24 | output$ui <- renderReact({ 25 | Collapse(isOpen = show(), logs) 26 | }) 27 | }) 28 | } 29 | 30 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 31 | -------------------------------------------------------------------------------- /inst/examples/ControlGroup.R: -------------------------------------------------------------------------------- 1 | library(shiny.blueprint) 2 | library(shiny) 3 | 4 | ui <- function(id) { 5 | ControlGroup( 6 | HTMLSelect(options = rownames(mtcars)), 7 | InputGroup(placeholder = "Find car..."), 8 | Button(icon = "arrow-right"), 9 | ) 10 | } 11 | 12 | server <- function(id) { 13 | moduleServer(id, function(input, output, session) {}) 14 | } 15 | 16 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 17 | -------------------------------------------------------------------------------- /inst/examples/Dialog.R: -------------------------------------------------------------------------------- 1 | library(shiny.blueprint) 2 | library(shiny) 3 | 4 | ui <- function(id) { 5 | ns <- NS(id) 6 | tagList( 7 | Button.shinyInput( 8 | inputId = ns("showDialog"), 9 | "Show dialog" 10 | ), 11 | reactOutput(ns("dialog")) 12 | ) 13 | } 14 | 15 | server <- function(id) { 16 | moduleServer(id, function(input, output, session) { 17 | ns <- session$ns 18 | 19 | isOpen <- reactiveVal(FALSE) 20 | observeEvent(input$showDialog, isOpen(TRUE)) 21 | observeEvent(input$closeDialog, isOpen(FALSE)) 22 | 23 | output$dialog <- renderReact({ 24 | Dialog( 25 | usePortal = FALSE, 26 | isOpen = isOpen(), 27 | onClose = triggerEvent(ns("closeDialog")), 28 | div( 29 | className = "bp5-dialog-body", 30 | H5("Analytical applications"), 31 | tags$p( 32 | "User interfaces that enable people to interact smoothly with data,", 33 | " ask better questions, and make better decisions." 34 | ), 35 | Button.shinyInput( 36 | inputId = ns("closeDialog"), 37 | "Close" 38 | ) 39 | ) 40 | ) 41 | }) 42 | }) 43 | } 44 | 45 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 46 | -------------------------------------------------------------------------------- /inst/examples/Divider.R: -------------------------------------------------------------------------------- 1 | library(shiny.blueprint) 2 | library(shiny) 3 | 4 | ui <- function(id) { 5 | ButtonGroup( 6 | minimal = TRUE, 7 | Button(text = "File"), 8 | Button(text = "Edit"), 9 | Divider(), 10 | Button(text = "Create"), 11 | Button(text = "Delete"), 12 | Divider(), 13 | Button(icon = "add"), 14 | Button(icon = "remove") 15 | ) 16 | } 17 | 18 | server <- function(id) { 19 | moduleServer(id, function(input, output, session) {}) 20 | } 21 | 22 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 23 | -------------------------------------------------------------------------------- /inst/examples/Drawer.R: -------------------------------------------------------------------------------- 1 | library(shiny.blueprint) 2 | library(shiny) 3 | 4 | ui <- function(id) { 5 | ns <- NS(id) 6 | tagList( 7 | Button.shinyInput(ns("hello"), "Say Hello", intent = "primary"), 8 | reactOutput(ns("ui")) 9 | ) 10 | } 11 | 12 | server <- function(id) { 13 | moduleServer(id, function(input, output, session) { 14 | ns <- session$ns 15 | 16 | isOpen <- reactiveVal(FALSE) 17 | observeEvent(input$hello, isOpen(!isOpen())) 18 | observeEvent(input$dismissDrawer, isOpen(FALSE)) 19 | 20 | output$ui <- renderReact({ 21 | Drawer( 22 | isOpen = isOpen(), 23 | onClose = triggerEvent(ns("dismissDrawer")), 24 | usePortal = FALSE, 25 | title = "Hello", 26 | icon = "info-sign", 27 | div( 28 | class = "bp5-dialog-body", 29 | p("Lorem Ipsum is simply dummy text of the printing and typesetting industry.") 30 | ) 31 | ) 32 | }) 33 | }) 34 | } 35 | 36 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 37 | -------------------------------------------------------------------------------- /inst/examples/EditableText.R: -------------------------------------------------------------------------------- 1 | library(shiny.blueprint) 2 | library(shiny) 3 | 4 | ui <- function(id) { 5 | ns <- NS(id) 6 | tagList( 7 | H2(EditableText(onChange = setInput(ns("header")))), 8 | EditableText.shinyInput( 9 | inputId = ns("body"), 10 | multiline = TRUE, 11 | minLines = 3, maxLines = 12 12 | ), 13 | textOutput(ns("headerValue")), 14 | textOutput(ns("bodyValue")) 15 | ) 16 | } 17 | 18 | server <- function(id) { 19 | moduleServer(id, function(input, output, session) { 20 | output$headerValue <- renderText(paste("Header:", deparse(input$header))) 21 | output$bodyValue <- renderText(paste("Body:", deparse(input$body))) 22 | }) 23 | } 24 | 25 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 26 | -------------------------------------------------------------------------------- /inst/examples/FileInput.R: -------------------------------------------------------------------------------- 1 | library(shiny) 2 | library(shiny.blueprint) 3 | 4 | setInput <- function(inputId, accessor = NULL) { 5 | JS(paste0("x => Shiny.setInputValue('", inputId, "', x", accessor, ")")) 6 | } 7 | 8 | ui <- function(id) { 9 | ns <- NS(id) 10 | tagList( 11 | FileInput( 12 | onChange = setInput(ns("value1"), ".target.value"), 13 | text = "Please, choose a file...", 14 | ), 15 | textOutput(ns("value1Output")), 16 | FileInput.shinyInput( 17 | inputId = ns("value2"), 18 | value = "Please, choose a file..." 19 | ), 20 | textOutput(ns("value2Output")) 21 | ) 22 | } 23 | 24 | server <- function(id) { 25 | moduleServer(id, function(input, output, session) { 26 | output$value1Output <- renderText(input$value1) 27 | output$value2Output <- renderText(input$value2) 28 | }) 29 | } 30 | 31 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 32 | -------------------------------------------------------------------------------- /inst/examples/FormGroup.R: -------------------------------------------------------------------------------- 1 | library(shiny.blueprint) 2 | library(shiny) 3 | 4 | ui <- function(id) { 5 | FormGroup( 6 | helperText = "Helper text with details...", 7 | label = "Label A", 8 | labelFor = "my-button", 9 | labelInfo = "(required)", 10 | inline = TRUE, 11 | Switch( 12 | defaultChecked = TRUE, 13 | label = "Apples" 14 | ), 15 | Switch( 16 | defaultChecked = TRUE, 17 | label = "Bananas" 18 | ) 19 | ) 20 | } 21 | 22 | server <- function(id) { 23 | moduleServer(id, function(input, output, session) {}) 24 | } 25 | 26 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 27 | -------------------------------------------------------------------------------- /inst/examples/HTMLSelect.R: -------------------------------------------------------------------------------- 1 | library(shiny.blueprint) 2 | library(shiny) 3 | 4 | setInput <- function(inputId, accessor = NULL) { 5 | JS(paste0("x => Shiny.setInputValue('", inputId, "', x", accessor, ")")) 6 | } 7 | 8 | options <- list( 9 | list(value = "a", label = "Apples"), 10 | list(value = "b", label = "Bananas"), 11 | list(value = "c", label = "Cherries") 12 | ) 13 | 14 | ui <- function(id) { 15 | ns <- NS(id) 16 | tagList( 17 | HTMLSelect( 18 | onChange = setInput(ns("choice1"), ".target.value"), 19 | options = options 20 | ), 21 | textOutput(ns("text1")), 22 | br(), 23 | HTMLSelect.shinyInput( 24 | inputId = ns("choice2"), 25 | value = "b", 26 | options = options 27 | ), 28 | textOutput(ns("text2")) 29 | ) 30 | } 31 | 32 | server <- function(id) { 33 | moduleServer(id, function(input, output, session) { 34 | output$text1 <- renderText(deparse(input$choice1)) 35 | output$text2 <- renderText(deparse(input$choice2)) 36 | }) 37 | } 38 | 39 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 40 | -------------------------------------------------------------------------------- /inst/examples/HTMLTable.R: -------------------------------------------------------------------------------- 1 | library(shiny.blueprint) 2 | library(shiny) 3 | 4 | ui <- function(id) { 5 | HTMLTable( 6 | tags$thead( 7 | tags$tr(tags$th("Project"), tags$th("Stack"), tags$th("Contributors")) 8 | ), 9 | tags$tbody( 10 | tags$tr(tags$td("Blueprint"), tags$td("JS React"), tags$td("268")), 11 | tags$tr(tags$td("TS"), tags$td("JSX"), tags$td("68")), 12 | tags$tr(tags$td("shiny.blueprint"), tags$td("R JS"), tags$td("2")) 13 | ), 14 | tags$tfoot( 15 | tags$tr(tags$td("Total", colSpan = 2), tags$td("1508")) 16 | ) 17 | ) 18 | } 19 | 20 | server <- function(id) { 21 | moduleServer(id, function(input, output, session) {}) 22 | } 23 | 24 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 25 | -------------------------------------------------------------------------------- /inst/examples/Icon.R: -------------------------------------------------------------------------------- 1 | library(shiny.blueprint) 2 | library(shiny) 3 | 4 | ui <- function(id) { 5 | tagList( 6 | Icon(icon = "cross"), 7 | Icon(icon = "globe", size = 20), 8 | ) 9 | } 10 | 11 | server <- function(id) { 12 | moduleServer(id, function(input, output, session) {}) 13 | } 14 | 15 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 16 | -------------------------------------------------------------------------------- /inst/examples/InputGroup.R: -------------------------------------------------------------------------------- 1 | library(shiny.blueprint) 2 | library(shiny) 3 | 4 | setInput <- function(inputId, accessor = NULL) { 5 | JS(paste0("x => Shiny.setInputValue('", inputId, "', x", accessor, ")")) 6 | } 7 | 8 | ui <- function(id) { 9 | ns <- NS(id) 10 | div( 11 | style = "width: 20rem; display: grid; row-gap: 0.5rem", 12 | H4("Uncontrolled"), 13 | InputGroup( 14 | onChange = setInput(ns("uncontrolledInputGroup"), ".target.value"), 15 | disabled = FALSE, 16 | large = TRUE, 17 | leftIcon = "filter", 18 | placeholder = "Filter histogram...", 19 | rightElement = Spinner(intent = "primary", size = 20) 20 | ), 21 | textOutput(ns("uncontrolledInputGroupOutput")), 22 | H4("Controlled"), 23 | InputGroup.shinyInput( 24 | inputId = ns("controlledInputGroup"), 25 | disabled = FALSE, 26 | large = FALSE, 27 | leftIcon = "home", 28 | placeholder = "Type something..." 29 | ), 30 | textOutput(ns("controlledInputGroupOutput")), 31 | reactOutput(ns("passwordExample")), 32 | textOutput(ns("passwordOutput")) 33 | ) 34 | } 35 | 36 | server <- function(id) { 37 | moduleServer(id, function(input, output, session) { 38 | ns <- session$ns 39 | 40 | output$uncontrolledInputGroupOutput <- renderText(input$uncontrolledInputGroup) 41 | output$controlledInputGroupOutput <- renderText(input$controlledInputGroup) 42 | 43 | isLocked <- reactiveVal(TRUE) 44 | 45 | observeEvent(input$toggleLock, isLocked(!isLocked())) 46 | output$passwordOutput <- renderText(input$passwordInput) 47 | 48 | output$passwordExample <- renderReact({ 49 | lockButton <- Button.shinyInput( 50 | inputId = ns("toggleLock"), 51 | icon = ifelse(isLocked(), "lock", "unlock"), 52 | minimal = TRUE, 53 | intent = "warning" 54 | ) 55 | InputGroup.shinyInput( 56 | inputId = ns("passwordInput"), 57 | disabled = FALSE, 58 | large = FALSE, 59 | rightElement = lockButton, 60 | placeholder = "Enter your password...", 61 | type = ifelse(isLocked(), "password", "text") 62 | ) 63 | }) 64 | }) 65 | } 66 | 67 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 68 | -------------------------------------------------------------------------------- /inst/examples/Label.R: -------------------------------------------------------------------------------- 1 | library(shiny.blueprint) 2 | library(shiny) 3 | 4 | ui <- function(id) { 5 | Label( 6 | "Label", 7 | tags$input(class = "bp5-input") 8 | ) 9 | } 10 | 11 | server <- function(id) { 12 | moduleServer(id, function(input, output, session) {}) 13 | } 14 | 15 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 16 | -------------------------------------------------------------------------------- /inst/examples/Menu.R: -------------------------------------------------------------------------------- 1 | library(shiny.blueprint) 2 | library(shiny) 3 | 4 | ui <- function(id) { 5 | Menu( 6 | style = "max-width: 200px", 7 | className = "bp5-elevation-1", 8 | MenuDivider(title = "Edit"), 9 | MenuItem(icon = "cut", text = "Cut", label = "^X"), 10 | MenuItem(icon = "duplicate", text = "Copy", label = "^C"), 11 | MenuItem(icon = "clipboard", text = "Paste", label = "^V", disabled = TRUE), 12 | MenuDivider(title = "Text"), 13 | MenuItem( 14 | icon = "style", text = "Style", 15 | MenuItem(icon = "bold", text = "Bold"), 16 | MenuItem(icon = "italic", text = "Italic"), 17 | MenuItem(icon = "underline", text = "Underline") 18 | ), 19 | MenuItem( 20 | icon = "asterisk", text = "Miscellaneous", 21 | MenuItem(icon = "badge", text = "Badge"), 22 | MenuItem(icon = "book", text = "Long items will truncate when they reach max-width"), 23 | MenuItem( 24 | icon = "more", text = "Look in here for even more items", 25 | MenuItem(icon = "briefcase", text = "Briefcase"), 26 | MenuItem(icon = "calculator", text = "Calculator"), 27 | MenuItem(icon = "dollar", text = "Dollar"), 28 | MenuItem( 29 | icon = "dot", text = "Shapes", 30 | MenuItem(icon = "full-circle", text = "Full circle"), 31 | MenuItem(icon = "heart", text = "Heart"), 32 | MenuItem(icon = "ring", text = "Ring"), 33 | MenuItem(icon = "square", text = "Square") 34 | ) 35 | ) 36 | ), 37 | MenuDivider(), 38 | MenuItem( 39 | icon = "cog", labelElement = Icon(icon = "share"), 40 | text = "Settings...", intent = "primary" 41 | ) 42 | ) 43 | } 44 | 45 | server <- function(id) { 46 | moduleServer(id, function(input, output, session) {}) 47 | } 48 | 49 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 50 | -------------------------------------------------------------------------------- /inst/examples/MultiSelect.R: -------------------------------------------------------------------------------- 1 | library(shiny) 2 | library(shiny.blueprint) 3 | 4 | top5Films <- list( 5 | list(text = "The Shawshank Redemption", label = 1994), 6 | list(text = "The Godfather", label = 1972), 7 | list(text = "The Godfather: Part II", label = 1974), 8 | list(text = "The Dark Knight", label = 2008), 9 | list(text = "12 Angry Men", label = 1957) 10 | ) 11 | 12 | ui <- function(id) { 13 | ns <- NS(id) 14 | tagList( 15 | H3("Multiselect"), 16 | MultiSelect.shinyInput( 17 | inputId = ns("multiselect"), 18 | items = paste("Option", LETTERS), 19 | selected = c("Option B", "Option E"), 20 | tagInputProps = list( 21 | tagProps = list( 22 | intent = "danger" 23 | ) 24 | ) 25 | ), 26 | uiOutput(ns("multiselect_output")), 27 | H3("Multiselect with labels"), 28 | MultiSelect.shinyInput( 29 | inputId = ns("multiselect_lab"), 30 | items = top5Films, 31 | selected = c("12 Angry Men", "The Godfather") 32 | ), 33 | uiOutput(ns("multiselect_lab_output")) 34 | ) 35 | } 36 | 37 | server <- function(id) { 38 | moduleServer(id, function(input, output, session) { 39 | output$multiselect_output <- renderText({ 40 | paste( 41 | purrr::map_chr(input$multiselect[[1]], ~ .x$text), 42 | collapse = ", " 43 | ) 44 | }) 45 | 46 | output$multiselect_lab_output <- renderText({ 47 | paste( 48 | purrr::map_chr(input$multiselect_lab[[1]], ~ .x$text), 49 | collapse = ", " 50 | ) 51 | }) 52 | }) 53 | } 54 | 55 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 56 | -------------------------------------------------------------------------------- /inst/examples/MultiSlider.R: -------------------------------------------------------------------------------- 1 | library(shiny) 2 | library(shiny.blueprint) 3 | 4 | ui <- function(id) { 5 | ns <- NS(id) 6 | tagList( 7 | reactOutput(ns("multiSlider")), 8 | textOutput(ns("multiSliderOutput")), 9 | MultiSlider.shinyInput( 10 | inputId = ns("multiSliderShiny"), 11 | values = c(3, 6, 9) 12 | ), 13 | textOutput(ns("multiSliderShinyOutput")), 14 | MultiSlider.shinyInput( 15 | inputId = ns("multiSliderShiny2"), 16 | values = list( 17 | list(value = 3, type = "start", intentBefore = "danger"), 18 | list(value = 8, type = "start", intentBefore = "warning"), 19 | list(value = 14, type = "end", intentAfter = "warning"), 20 | list(value = 17, type = "end", intentAfter = "warning") 21 | ), 22 | min = 0, 23 | max = 20, 24 | defaultTrackIntent = "success" 25 | ), 26 | textOutput(ns("multiSliderShinyOutput2")), 27 | ) 28 | } 29 | 30 | server <- function(id) { 31 | moduleServer(id, function(input, output, session) { 32 | ns <- session$ns 33 | 34 | thresholds <- reactiveValues( 35 | dangerStart = 3, 36 | warningStart = 8, 37 | warningEnd = 14, 38 | dangerEnd = 17 39 | ) 40 | 41 | observeEvent(input$mutliSliderInput, { 42 | sliderValues <- sort(input$mutliSliderInput) 43 | thresholds$dangerStart <- sliderValues[1] 44 | thresholds$warningStart <- sliderValues[2] 45 | thresholds$warningEnd <- sliderValues[3] 46 | thresholds$dangerEnd <- sliderValues[4] 47 | }) 48 | 49 | output$multiSlider <- renderReact({ 50 | MultiSlider( 51 | defaultTrackIntent = "success", 52 | onChange = setInput(ns("mutliSliderInput")), 53 | stepSize = 1, 54 | min = 0, 55 | max = 20, 56 | MultiSliderHandle( 57 | type = "start", 58 | intentBefore = "danger", 59 | value = thresholds$dangerStart, 60 | interactionKind = "push" 61 | ), 62 | MultiSliderHandle( 63 | type = "start", 64 | intentBefore = "warning", 65 | value = thresholds$warningStart, 66 | interactionKind = "push" 67 | ), 68 | MultiSliderHandle( 69 | type = "end", 70 | intentAfter = "warning", 71 | value = thresholds$warningEnd, 72 | interactionKind = "push" 73 | ), 74 | MultiSliderHandle( 75 | type = "end", 76 | intentAfter = "danger", 77 | value = thresholds$dangerEnd, 78 | interactionKind = "push" 79 | ) 80 | ) 81 | }) 82 | output$multiSliderOutput <- renderText( 83 | paste( 84 | thresholds$dangerStart, 85 | thresholds$warningStart, 86 | thresholds$warningEnd, 87 | thresholds$dangerEnd, 88 | sep = ", " 89 | ) 90 | ) 91 | output$multiSliderShinyOutput <- renderText( 92 | paste(input$multiSliderShiny, collapse = ", ") 93 | ) 94 | output$multiSliderShinyOutput2 <- renderText( 95 | paste(input$multiSliderShiny2, collapse = ", ") 96 | ) 97 | }) 98 | } 99 | 100 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 101 | -------------------------------------------------------------------------------- /inst/examples/MultistepDialog.R: -------------------------------------------------------------------------------- 1 | library(shiny.blueprint) 2 | library(shiny) 3 | 4 | ui <- function(id) { 5 | ns <- NS(id) 6 | tagList( 7 | Button.shinyInput( 8 | inputId = ns("showMultistepDialog"), 9 | "Show multistep dialog" 10 | ), 11 | reactOutput(ns("multistepDialog")) 12 | ) 13 | } 14 | 15 | server <- function(id) { 16 | moduleServer(id, function(input, output, session) { 17 | ns <- session$ns 18 | 19 | isOpen <- reactiveVal(FALSE) 20 | observeEvent(input$showMultistepDialog, isOpen(TRUE)) 21 | observeEvent(input$closeMultistepDialog, isOpen(FALSE)) 22 | 23 | output$multistepDialog <- renderReact({ 24 | MultistepDialog( 25 | usePortal = FALSE, 26 | isOpen = isOpen(), 27 | title = "Multistep dialog", 28 | onClose = triggerEvent(ns("closeMultistepDialog")), 29 | DialogStep( 30 | id = "step1", 31 | panel = div( 32 | className = "bp5-dialog-body", 33 | p("This is a step 1") 34 | ), 35 | title = "Step 1" 36 | ), 37 | DialogStep( 38 | id = "step2", 39 | panel = div( 40 | className = "bp5-dialog-body", 41 | p("This is a step 2") 42 | ), 43 | title = "Step 2" 44 | ), 45 | DialogStep( 46 | id = "step3", 47 | panel = div( 48 | className = "bp5-dialog-body", 49 | p("This is a step 3") 50 | ), 51 | title = "Step 3" 52 | ) 53 | ) 54 | }) 55 | }) 56 | } 57 | 58 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 59 | -------------------------------------------------------------------------------- /inst/examples/Navbar.R: -------------------------------------------------------------------------------- 1 | library(shiny.blueprint) 2 | library(shiny) 3 | 4 | ui <- function(id) { 5 | Navbar( 6 | NavbarGroup( 7 | NavbarHeading("Blueprint"), 8 | NavbarDivider(), 9 | Button(minimal = TRUE, icon = "home", text = "Home"), 10 | Button(minimal = TRUE, icon = "document", text = "Files") 11 | ), 12 | NavbarGroup( 13 | align = "right", 14 | Button(minimal = TRUE, icon = "user"), 15 | Button(minimal = TRUE, icon = "refresh") 16 | ) 17 | ) 18 | } 19 | 20 | server <- function(id) { 21 | moduleServer(id, function(input, output, session) {}) 22 | } 23 | 24 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 25 | -------------------------------------------------------------------------------- /inst/examples/NonIdealState.R: -------------------------------------------------------------------------------- 1 | library(shiny.blueprint) 2 | library(shiny) 3 | 4 | ui <- function(id) { 5 | NonIdealState( 6 | icon = "search", 7 | title = "No search results", 8 | description = Card( 9 | "Your search didn't match any files.", 10 | tags$br(), 11 | "Try searching for something else, or create a new file." 12 | ), 13 | action = Button(icon = "plus", text = "New file", intent = "primary", outlined = TRUE) 14 | ) 15 | } 16 | 17 | server <- function(id) { 18 | moduleServer(id, function(input, output, session) {}) 19 | } 20 | 21 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 22 | -------------------------------------------------------------------------------- /inst/examples/NumericInput.R: -------------------------------------------------------------------------------- 1 | library(shiny) 2 | library(shiny.blueprint) 3 | 4 | ui <- function(id) { 5 | ns <- NS(id) 6 | tagList( 7 | NumericInput( 8 | onValueChange = setInput(ns("value1")), 9 | intent = "primary" 10 | ), 11 | textOutput(ns("value1Output")), 12 | NumericInput.shinyInput( 13 | inputId = ns("value2"), 14 | intent = "primary" 15 | ), 16 | textOutput(ns("value2Output")) 17 | ) 18 | } 19 | 20 | server <- function(id) { 21 | moduleServer(id, function(input, output, session) { 22 | output$value1Output <- renderText(input$value1) 23 | output$value2Output <- renderText(input$value2) 24 | }) 25 | } 26 | 27 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 28 | -------------------------------------------------------------------------------- /inst/examples/OverflowList.R: -------------------------------------------------------------------------------- 1 | library(shiny.blueprint) 2 | library(shiny) 3 | 4 | boxStyle <- tags$style(" 5 | .box { 6 | margin: 0.5em; 7 | padding: 0.5em; 8 | background: silver; 9 | font-size: 4em; 10 | } 11 | ") 12 | 13 | items <- lapply( 14 | list("Too", "many", "words", "to", "fit", "on", "your", "screen!"), 15 | function(text) div(text, class = "box") 16 | ) 17 | 18 | ui <- function(id) { 19 | tagList( 20 | boxStyle, 21 | OverflowList( 22 | items = items, 23 | visibleItemRenderer = JS("item => item"), 24 | overflowRenderer = JS("items => null"), 25 | collapseFrom = "end" 26 | ) 27 | ) 28 | } 29 | 30 | server <- function(id) { 31 | moduleServer(id, function(input, output, session) {}) 32 | } 33 | 34 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 35 | -------------------------------------------------------------------------------- /inst/examples/Overlay.R: -------------------------------------------------------------------------------- 1 | library(shiny.blueprint) 2 | library(shiny) 3 | 4 | ui <- function(id) { 5 | ns <- NS(id) 6 | tagList( 7 | Button.shinyInput( 8 | inputId = ns("showOverlay"), 9 | "Show overlay" 10 | ), 11 | reactOutput(ns("overlay")) 12 | ) 13 | } 14 | 15 | server <- function(id) { 16 | moduleServer(id, function(input, output, session) { 17 | ns <- session$ns 18 | 19 | isOpen <- reactiveVal(FALSE) 20 | observeEvent(input$showOverlay, isOpen(TRUE)) 21 | observeEvent(input$closeOverlay, isOpen(FALSE)) 22 | 23 | output$overlay <- renderReact({ 24 | Overlay( 25 | usePortal = FALSE, 26 | isOpen = isOpen(), 27 | onClose = triggerEvent(ns("closeOverlay")), 28 | Card( 29 | className = "bp5-elevation-4 bp5-dark bp5-overlay-content", 30 | interactive = TRUE, 31 | H5("Analytical applications"), 32 | tags$p( 33 | "User interfaces that enable people to interact smoothly with data,", 34 | " ask better questions, and make better decisions." 35 | ), 36 | Button.shinyInput( 37 | inputId = ns("closeOverlay"), 38 | "Close" 39 | ) 40 | ) 41 | ) 42 | }) 43 | }) 44 | } 45 | 46 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 47 | -------------------------------------------------------------------------------- /inst/examples/PanelStack.R: -------------------------------------------------------------------------------- 1 | library(shiny.blueprint) 2 | library(shiny) 3 | 4 | customComponents <- tagList( 5 | tags$style(" 6 | .panel-stack { 7 | border: 1px solid lightgrey; 8 | width: 300px; 9 | height: 240px; 10 | } 11 | .panel { 12 | position: absolute; 13 | top: 50%; 14 | left: 50%; 15 | transform: translate(-50%, -50%); 16 | } 17 | "), 18 | tags$script(HTML("(() => { 19 | const React = jsmodule['react']; 20 | const Blueprint = jsmodule['@blueprintjs/core']; 21 | 22 | function createPanel(num) { 23 | return { 24 | title: `Panel ${num}`, 25 | renderPanel: Panel, 26 | props: { num }, 27 | }; 28 | } 29 | 30 | function Panel({ num, openPanel }) { 31 | const button = React.createElement( 32 | Blueprint.Button, 33 | { 34 | onClick: () => openPanel(createPanel(num + 1)), 35 | intent: Blueprint.Intent.PRIMARY, 36 | }, 37 | 'Open Panel' 38 | ) 39 | return React.createElement('div', { className: 'panel' }, button); 40 | } 41 | 42 | window.createPanel = createPanel; 43 | })()")) 44 | ) 45 | 46 | ui <- function(id) { 47 | tagList( 48 | customComponents, 49 | PanelStack( 50 | className = "panel-stack", 51 | initialPanel = JS("createPanel(1)") 52 | ), 53 | PanelStack.shinyWrapper( 54 | panels = list( 55 | list(id = "panel1", title = "Panel 1", content = div( 56 | class = "panel", 57 | Button(text = "Open 2", onClick = openPanel("panel2")), 58 | Button(text = "Open 4", onClick = openPanel("panel4")) 59 | )), 60 | list(id = "panel2", title = "Panel 2", content = div( 61 | class = "panel", 62 | Button(text = "Open 3", onClick = openPanel("panel3")), 63 | Button(text = "Close", onClick = closePanel()) 64 | )), 65 | list(id = "panel3", title = "Panel 3", content = div( 66 | class = "panel", 67 | Button(text = "Open 4", onClick = openPanel("panel4")), 68 | Button(text = "Close", onClick = closePanel()) 69 | )), 70 | list(id = "panel4", title = "Panel 4", content = div( 71 | class = "panel", 72 | Button(text = "Close", onClick = closePanel()) 73 | )) 74 | ) 75 | ) 76 | ) 77 | } 78 | 79 | server <- function(id) { 80 | moduleServer(id, function(input, output, session) {}) 81 | } 82 | 83 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 84 | -------------------------------------------------------------------------------- /inst/examples/Popover.R: -------------------------------------------------------------------------------- 1 | library(shiny.blueprint) 2 | library(shiny) 3 | 4 | ui <- function(id) { 5 | ns <- NS(id) 6 | reactOutput(ns("ui")) 7 | } 8 | 9 | server <- function(id) { 10 | moduleServer(id, function(input, output, session) { 11 | ns <- session$ns 12 | 13 | isOpen <- reactiveVal(FALSE) 14 | observeEvent(input$hello, isOpen(TRUE)) 15 | observeEvent(input$dismiss, isOpen(FALSE)) 16 | 17 | output$ui <- renderReact({ 18 | Popover( 19 | isOpen = isOpen(), 20 | Button.shinyInput(ns("hello"), "Say Hello", intent = "primary"), 21 | usePortal = FALSE, 22 | content = tags$div( 23 | style = "padding: 1em", 24 | H5("Hello!"), 25 | tags$p("Please read this message."), 26 | Button.shinyInput(ns("dismiss"), "Dismiss") 27 | ) 28 | ) 29 | }) 30 | }) 31 | } 32 | 33 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 34 | -------------------------------------------------------------------------------- /inst/examples/ProgressBar.R: -------------------------------------------------------------------------------- 1 | library(shiny.blueprint) 2 | library(shiny) 3 | 4 | ui <- function(id) { 5 | ProgressBar(animate = TRUE) 6 | } 7 | 8 | server <- function(id) { 9 | moduleServer(id, function(input, output, session) {}) 10 | } 11 | 12 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 13 | -------------------------------------------------------------------------------- /inst/examples/Radio.R: -------------------------------------------------------------------------------- 1 | library(shiny.blueprint) 2 | library(shiny) 3 | 4 | setInput <- function(inputId, accessor = NULL) { 5 | JS(paste0("x => Shiny.setInputValue('", inputId, "', x", accessor, ")")) 6 | } 7 | 8 | ui <- function(id) { 9 | ns <- NS(id) 10 | tagList( 11 | H3("Favorite animal"), 12 | RadioGroup.shinyInput( 13 | inputId = ns("animal"), 14 | value = "dog", 15 | Radio(label = "Cat", value = "cat"), 16 | Radio(label = "Dog", value = "dog") 17 | ), 18 | textOutput(ns("favoriteAnimal")), 19 | H3("Favorite fruit"), 20 | reactOutput(ns("fruitRadio")), 21 | textOutput(ns("favoriteFruit")) 22 | ) 23 | } 24 | 25 | server <- function(id) { 26 | moduleServer(id, function(input, output, session) { 27 | ns <- session$ns 28 | 29 | output$favoriteAnimal <- renderText(deparse(input$animal)) 30 | 31 | fruit <- reactiveVal() 32 | observeEvent(input$fruit, fruit(input$fruit)) 33 | output$fruitRadio <- renderReact({ 34 | RadioGroup( 35 | onChange = setInput(ns("fruit"), ".currentTarget.value"), 36 | selectedValue = fruit(), 37 | Radio(label = "Apple", value = "a"), 38 | Radio(label = "Banana", value = "b"), 39 | Radio(label = "Cherry", value = "c") 40 | ) 41 | }) 42 | output$favoriteFruit <- renderText(deparse(fruit())) 43 | }) 44 | } 45 | 46 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 47 | -------------------------------------------------------------------------------- /inst/examples/RangeSlider.R: -------------------------------------------------------------------------------- 1 | library(shiny) 2 | library(shiny.blueprint) 3 | 4 | ui <- function(id) { 5 | ns <- NS(id) 6 | tagList( 7 | RangeSlider.shinyInput( 8 | inputId = ns("value"), 9 | min = 0, 10 | max = 10, 11 | stepSize = 0.1, 12 | labelStepSize = 10 13 | ), 14 | textOutput(ns("valueOutput")) 15 | ) 16 | } 17 | server <- function(id) { 18 | moduleServer(id, function(input, output, session) { 19 | output$valueOutput <- renderText(input$value) 20 | }) 21 | } 22 | 23 | 24 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 25 | -------------------------------------------------------------------------------- /inst/examples/ResizeSensor.R: -------------------------------------------------------------------------------- 1 | library(shiny.blueprint) 2 | library(shiny) 3 | 4 | setInput <- function(inputId, accessor = NULL) { 5 | JS(paste0( 6 | "x => Shiny.setInputValue('", inputId, "', x", accessor, ")" 7 | )) 8 | } 9 | 10 | printSize <- function(content) { 11 | paste0(content$width, "x", content$height) 12 | } 13 | 14 | ui <- function(id) { 15 | ns <- NS(id) 16 | tagList( 17 | tags$style(" 18 | .resizable { 19 | overflow: auto; 20 | resize: both; 21 | width: 100px; 22 | height: 100px; 23 | background: silver; 24 | } 25 | "), 26 | ResizeSensor( 27 | onResize = setInput(ns("resize"), "[0].contentRect"), 28 | div( 29 | class = "resizable", 30 | textOutput(ns("size")) 31 | ) 32 | ), 33 | ResizeSensor.shinyInput( 34 | inputId = ns("resizeSensor"), 35 | content = div( 36 | textOutput(ns("resizeSensorInput")), 37 | style = " 38 | border: 1px solid black; 39 | width: 100px; 40 | " 41 | ) 42 | ) 43 | ) 44 | } 45 | 46 | server <- function(id) { 47 | moduleServer(id, function(input, output, session) { 48 | output$size <- renderText({ 49 | content <- req(input$resize) 50 | printSize(content) 51 | }) 52 | output$resizeSensorInput <- renderText({ 53 | content <- req(input$resizeSensor) 54 | printSize(content) 55 | }) 56 | }) 57 | } 58 | 59 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 60 | -------------------------------------------------------------------------------- /inst/examples/Select.R: -------------------------------------------------------------------------------- 1 | library(shiny) 2 | library(shiny.blueprint) 3 | 4 | top5Films <- list( 5 | list(text = "The Shawshank Redemption", label = 1994), 6 | list(text = "The Godfather", label = 1972), 7 | list(text = "The Godfather: Part II", label = 1974), 8 | list(text = "The Dark Knight", label = 2008), 9 | list(text = "12 Angry Men", label = 1957) 10 | ) 11 | 12 | ui <- function(id) { 13 | ns <- NS(id) 14 | tagList( 15 | H3("Select"), 16 | Select.shinyInput( 17 | inputId = ns("select"), 18 | items = paste("Option", LETTERS), 19 | selected = "Option C", 20 | noResults = "No options." 21 | ), 22 | uiOutput(ns("select_output")), 23 | H3("Select with labels"), 24 | Select.shinyInput( 25 | inputId = ns("select_lab"), 26 | items = top5Films, 27 | selected = "The Dark Knight" 28 | ), 29 | uiOutput(ns("select_lab_output")) 30 | ) 31 | } 32 | 33 | server <- function(id) { 34 | moduleServer(id, function(input, output, session) { 35 | output$select_output <- renderText(input$select$text) 36 | output$select_lab_output <- renderText(input$select_lab$text) 37 | }) 38 | } 39 | 40 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 41 | -------------------------------------------------------------------------------- /inst/examples/Slider.R: -------------------------------------------------------------------------------- 1 | library(shiny) 2 | library(shiny.blueprint) 3 | 4 | ui <- function(id) { 5 | ns <- NS(id) 6 | tagList( 7 | Slider.shinyInput( 8 | inputId = ns("value"), 9 | min = 0, 10 | max = 10, 11 | stepSize = 0.1, 12 | labelStepSize = 10 13 | ), 14 | textOutput(ns("valueOutput")) 15 | ) 16 | } 17 | 18 | server <- function(id) { 19 | moduleServer(id, function(input, output, session) { 20 | output$valueOutput <- renderText(input$value) 21 | }) 22 | } 23 | 24 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 25 | -------------------------------------------------------------------------------- /inst/examples/Spinner.R: -------------------------------------------------------------------------------- 1 | library(shiny.blueprint) 2 | library(shiny) 3 | 4 | ui <- function(id) { 5 | Spinner(intent = "primary", size = 100) 6 | } 7 | 8 | server <- function(id) { 9 | moduleServer(id, function(input, output, session) {}) 10 | } 11 | 12 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 13 | -------------------------------------------------------------------------------- /inst/examples/Suggest.R: -------------------------------------------------------------------------------- 1 | library(shiny) 2 | library(shiny.blueprint) 3 | 4 | top5Films <- list( 5 | list(text = "The Shawshank Redemption", label = 1994), 6 | list(text = "The Godfather", label = 1972), 7 | list(text = "The Godfather: Part II", label = 1974), 8 | list(text = "The Dark Knight", label = 2008), 9 | list(text = "12 Angry Men", label = 1957) 10 | ) 11 | 12 | ui <- function(id) { 13 | ns <- NS(id) 14 | tagList( 15 | H3("Suggest"), 16 | Suggest.shinyInput( 17 | inputId = ns("suggest"), 18 | items = paste("Option", LETTERS), 19 | inputProps = list( 20 | placeholder = "Search with Suggest..." 21 | ) 22 | ), 23 | uiOutput(ns("suggest_output")), 24 | H3("Suggest with labels"), 25 | Suggest.shinyInput( 26 | inputId = ns("suggest_lab"), 27 | items = top5Films, 28 | noResults = "No suggestions." 29 | ), 30 | uiOutput(ns("suggest_lab_output")) 31 | ) 32 | } 33 | 34 | server <- function(id) { 35 | moduleServer(id, function(input, output, session) { 36 | output$suggest_output <- renderText(input$suggest$text) 37 | output$suggest_lab_output <- renderText(input$suggest_lab$text) 38 | }) 39 | } 40 | 41 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 42 | -------------------------------------------------------------------------------- /inst/examples/Switch.R: -------------------------------------------------------------------------------- 1 | library(shiny.blueprint) 2 | library(shiny) 3 | 4 | setInput <- function(inputId, accessor = NULL) { 5 | JS(paste0("x => Shiny.setInputValue('", inputId, "', x", accessor, ")")) 6 | } 7 | 8 | ui <- function(id) { 9 | ns <- NS(id) 10 | tagList( 11 | Switch( 12 | onChange = setInput(ns("apples"), ".target.checked"), 13 | defaultChecked = TRUE, 14 | label = "Apples" 15 | ), 16 | Switch.shinyInput( 17 | inputId = ns("bananas"), 18 | value = TRUE, 19 | label = "Bananas" 20 | ), 21 | textOutput(ns("applesEnabled")), 22 | textOutput(ns("bananasEnabled")) 23 | ) 24 | } 25 | 26 | server <- function(id) { 27 | moduleServer(id, function(input, output, session) { 28 | output$applesEnabled <- renderText(paste("Apples:", deparse(input$apples))) 29 | output$bananasEnabled <- renderText(paste("Bananas:", deparse(input$bananas))) 30 | }) 31 | } 32 | 33 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 34 | -------------------------------------------------------------------------------- /inst/examples/Tabs.R: -------------------------------------------------------------------------------- 1 | library(shiny.blueprint) 2 | library(shiny) 3 | 4 | ui <- function(id) { 5 | ns <- NS(id) 6 | reactOutput(ns("tabs")) 7 | } 8 | 9 | server <- function(id) { 10 | moduleServer(id, function(input, output, session) { 11 | ns <- session$ns 12 | 13 | currentTab <- reactiveVal("react") 14 | observeEvent(input$selectTab, currentTab(input$selectTab)) 15 | output$tabs <- renderReact( 16 | Tabs( 17 | selectedTabId = currentTab(), 18 | onChange = setInput(ns("selectTab")), 19 | Tab(id = "angular", title = "Angular", panel = "Angular"), 20 | Tab(id = "ember", title = "Ember", panel = "Ember"), 21 | Tab(id = "react", title = "React", panel = "React"), 22 | TabsExpander(), 23 | tags$input(class = "bp5-input", type = "text", placeholder = "Search...") 24 | ) 25 | ) 26 | }) 27 | } 28 | 29 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 30 | -------------------------------------------------------------------------------- /inst/examples/Tag.R: -------------------------------------------------------------------------------- 1 | library(shiny.blueprint) 2 | library(shiny) 3 | 4 | ui <- function(id) { 5 | tagList( 6 | Tag(active = TRUE, "Hello"), 7 | Tag(active = TRUE, large = TRUE, "Hello"), 8 | Tag(active = TRUE, round = TRUE, "Hello"), 9 | Tag(active = FALSE, icon = "home", round = TRUE, large = TRUE, "Hello"), 10 | Tag(active = TRUE, rightIcon = "home", "Hello"), 11 | Tag(active = TRUE, round = TRUE, intent = "primary", interactive = TRUE, "Hello"), 12 | Tag(active = TRUE, round = TRUE, intent = "warning", interactive = TRUE, "Hello"), 13 | Tag(active = TRUE, round = TRUE, intent = "success", interactive = TRUE, "Hello"), 14 | Tag(active = TRUE, round = TRUE, intent = "danger", interactive = TRUE, "Hello") 15 | ) 16 | } 17 | 18 | server <- function(id) { 19 | moduleServer(id, function(input, output, session) {}) 20 | } 21 | 22 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 23 | -------------------------------------------------------------------------------- /inst/examples/TagInput.R: -------------------------------------------------------------------------------- 1 | library(shiny) 2 | library(shiny.blueprint) 3 | 4 | 5 | ui <- function(id) { 6 | ns <- NS(id) 7 | tagList( 8 | TagInput.shinyInput( 9 | inputId = ns("value"), 10 | value = c("one", "two", "three") 11 | ), 12 | textOutput(ns("valueOutput")) 13 | ) 14 | } 15 | 16 | server <- function(id) { 17 | moduleServer(id, function(input, output, session) { 18 | output$valueOutput <- renderText(input$value) 19 | }) 20 | } 21 | 22 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 23 | -------------------------------------------------------------------------------- /inst/examples/Text.R: -------------------------------------------------------------------------------- 1 | library(shiny.blueprint) 2 | library(shiny) 3 | 4 | ui <- function(id) { 5 | Text( 6 | "Lorem ipsum dolor sit amet, 7 | consectetur adipiscing elit, 8 | sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 9 | Ut enim ad minim veniam, 10 | quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 11 | Duis aute irure dolor in reprehenderit 12 | in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 13 | Excepteur sint occaecat cupidatat non proident, 14 | sunt in culpa qui officia deserunt mollit anim id est laborum." 15 | ) 16 | } 17 | 18 | server <- function(id) { 19 | moduleServer(id, function(input, output, session) {}) 20 | } 21 | 22 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 23 | -------------------------------------------------------------------------------- /inst/examples/TextArea.R: -------------------------------------------------------------------------------- 1 | library(shiny.blueprint) 2 | library(shiny) 3 | 4 | setInput <- function(inputId, accessor = NULL) { 5 | JS(paste0("x => Shiny.setInputValue('", inputId, "', x", accessor, ")")) 6 | } 7 | 8 | ui <- function(id) { 9 | ns <- NS(id) 10 | tagList( 11 | H4("Uncontrolled"), 12 | TextArea( 13 | growVertically = TRUE, 14 | onChange = setInput(ns("uncontrolledTextarea"), ".target.value"), 15 | large = TRUE, 16 | intent = "primary" 17 | ), 18 | textOutput(ns("uncontrolledTextareaOutput")), 19 | H4("Controlled"), 20 | TextArea.shinyInput( 21 | inputId = ns("controlledTextarea"), 22 | growVertically = TRUE, 23 | large = TRUE, 24 | intent = "primary" 25 | ), 26 | textOutput(ns("controlledTextareaOutput")) 27 | ) 28 | } 29 | 30 | server <- function(id) { 31 | moduleServer(id, function(input, output, session) { 32 | output$uncontrolledTextareaOutput <- renderText(input$uncontrolledTextarea) 33 | output$controlledTextareaOutput <- renderText(input$controlledTextarea) 34 | }) 35 | } 36 | 37 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 38 | -------------------------------------------------------------------------------- /inst/examples/Toast.R: -------------------------------------------------------------------------------- 1 | library(shiny.blueprint) 2 | library(shiny) 3 | 4 | ui <- function(id) { 5 | ns <- NS(id) 6 | tagList( 7 | H3("Simple toasts"), 8 | ButtonGroup( 9 | Button.shinyInput( 10 | inputId = ns("toastDanger"), 11 | "Danger", 12 | intent = "danger" 13 | ), 14 | Button.shinyInput( 15 | inputId = ns("toastWarning"), 16 | "Warning", 17 | intent = "warning" 18 | ), 19 | Button.shinyInput( 20 | inputId = ns("toastSuccess"), 21 | "Success", 22 | intent = "success" 23 | ), 24 | Button.shinyInput( 25 | inputId = ns("toastPrimary"), 26 | "Primary", 27 | intent = "primary" 28 | ) 29 | ), 30 | H3("Another toaster"), 31 | Button.shinyInput( 32 | inputId = ns("anotherToastDanger"), 33 | "Another danger", 34 | intent = "danger" 35 | ), 36 | H3("Progress"), 37 | Button.shinyInput( 38 | inputId = ns("toastProgress"), 39 | "Progress", 40 | intent = "primary" 41 | ), 42 | H3("Clear all"), 43 | Button.shinyInput( 44 | inputId = ns("clearAllToasts"), 45 | "Clear all", 46 | intent = "primary" 47 | ) 48 | ) 49 | } 50 | 51 | server <- function(id) { 52 | moduleServer(id, function(input, output, session) { 53 | toasterTop <- Toaster$new(position = "top") 54 | toasterBottom <- Toaster$new(position = "bottom", maxToasts = 3, toasterId = "newId") 55 | 56 | observeEvent(input$toastDanger, { 57 | toasterTop$show(message = "Danger!", intent = "danger") 58 | }) 59 | observeEvent(input$toastWarning, { 60 | toasterTop$show(message = "Warning!", intent = "warning", icon = "warning-sign") 61 | }) 62 | observeEvent(input$toastSuccess, { 63 | toasterTop$show(message = "Success!", intent = "success", icon = "hand") 64 | }) 65 | observeEvent(input$toastPrimary, { 66 | toasterTop$show(message = "Primary!", intent = "primary") 67 | }) 68 | 69 | observeEvent(input$anotherToastDanger, { 70 | toasterBottom$show(message = "Another danger!", intent = "Danger") 71 | }) 72 | 73 | observeEvent(input$clearAllToasts, { 74 | toasterTop$clear() 75 | toasterBottom$clear() 76 | }) 77 | 78 | counter <- 0 79 | 80 | doRun <- reactiveVal(FALSE) 81 | observeEvent(input$toastProgress, { 82 | counter <<- 0 83 | doRun(TRUE) 84 | }) 85 | 86 | observe({ 87 | req(doRun()) 88 | if (counter <= 100) { 89 | toasterTop$show(message = counter, intent = "primary", key = 1) 90 | counter <<- counter + 1 91 | invalidateLater(10) 92 | } else { 93 | toasterTop$show(message = "Completed!", intent = "success", key = 1) 94 | doRun(FALSE) 95 | } 96 | }) 97 | }) 98 | } 99 | 100 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 101 | -------------------------------------------------------------------------------- /inst/examples/Tree.R: -------------------------------------------------------------------------------- 1 | library(shiny.blueprint) 2 | library(purrr) 3 | library(shiny) 4 | 5 | treeList <- list( 6 | list( 7 | id = 0, 8 | hasCaret = TRUE, 9 | icon = "folder-close", 10 | label = "Tree" 11 | ), 12 | list( 13 | id = 1, 14 | icon = "folder-close", 15 | isExpanded = TRUE, 16 | label = "Hello here", 17 | childNodes = list( 18 | list( 19 | id = 2, 20 | icon = "document", 21 | label = "Item 0", 22 | secondaryLabel = Icon(icon = "eye-open") 23 | ), 24 | list( 25 | id = 3, 26 | icon = "tag", 27 | label = "Organic meditation gluten-free, sriracha VHS drinking vinegar beard man.", 28 | childNodes = list( 29 | list( 30 | id = 4, 31 | icon = "document", 32 | label = "Item 0", 33 | secondaryLabel = Icon(icon = "eye-open") 34 | ), 35 | list( 36 | id = 5, 37 | icon = "tag", 38 | label = "Some other stuff" 39 | ) 40 | ) 41 | ) 42 | ) 43 | ), 44 | list( 45 | id = 10, 46 | hasCaret = TRUE, 47 | icon = "folder-close", 48 | label = "Super secret files", 49 | disabled = TRUE 50 | ) 51 | ) 52 | 53 | modifyTree <- function(tree, ids, props) { 54 | if (!is.null(tree)) purrr::map(tree, function(node) { 55 | if (node$id %in% ids) { 56 | node <- purrr::list_modify(node, !!!props) 57 | } 58 | node$childNodes <- modifyTree(node$childNodes, ids, props) 59 | node 60 | }) 61 | } 62 | 63 | setInput <- partial(shiny.react::setInput, jsAccessor = "[0].id") 64 | 65 | ui <- function(id) { 66 | ns <- NS(id) 67 | tagList( 68 | reactOutput(ns("tree")), 69 | Divider(), 70 | reactOutput(ns("info")), 71 | Divider(), 72 | Tree.shinyInput( 73 | inputId = ns("selected_nodes"), 74 | data = list( 75 | list( 76 | label = "1", 77 | isExpanded = TRUE, 78 | childNodes = list( 79 | list( 80 | label = "1.1", 81 | childNodes = list(list(label = "1.1.1")) 82 | ), 83 | list(label = "1.2") 84 | ) 85 | ), 86 | list( 87 | label = "2", 88 | childNodes = list( 89 | list(label = "2.1") 90 | ) 91 | ), 92 | list(label = "3", hasCaret = TRUE) 93 | ) 94 | ), 95 | Divider(), 96 | tags$span("Hold ", tags$b("shift"), " to select multiple nodes."), 97 | reactOutput(ns("selected_nodes_list")), 98 | ) 99 | } 100 | 101 | server <- function(id) { 102 | moduleServer(id, function(input, output, session) { 103 | ns <- session$ns 104 | 105 | treeReactive <- reactiveVal(treeList) 106 | observeEvent(input$expand, { 107 | treeReactive( 108 | modifyTree(treeReactive(), ids = input$expand, props = list(isExpanded = TRUE)) 109 | ) 110 | }) 111 | observeEvent(input$collapse, { 112 | treeReactive( 113 | modifyTree(treeReactive(), ids = input$collapse, props = list(isExpanded = FALSE)) 114 | ) 115 | }) 116 | 117 | output$tree <- renderReact({ 118 | Tree( 119 | contents = treeReactive(), 120 | onNodeExpand = setInput(ns("expand")), 121 | onNodeCollapse = setInput(ns("collapse")), 122 | onNodeClick = setInput(ns("click")) 123 | ) 124 | }) 125 | 126 | output$info <- renderReact({ 127 | tags$div("Clicked (id): ", input$click) 128 | }) 129 | 130 | output$selected_nodes_list <- renderReact({ 131 | UL(lapply(input$selected_nodes, function(node) tags$li(node))) 132 | }) 133 | }) 134 | } 135 | 136 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 137 | -------------------------------------------------------------------------------- /inst/examples/htmlElements.R: -------------------------------------------------------------------------------- 1 | library(shiny.blueprint) 2 | library(shiny) 3 | 4 | ui <- function(id) { 5 | tagList( 6 | H1("H1"), 7 | H2("H2"), 8 | H3("H3"), 9 | H4("H4"), 10 | H5("H5"), 11 | H6("H6"), 12 | Blockquote("Blockquote"), 13 | Code("Code"), 14 | Label("Label"), 15 | Pre("Pre"), 16 | OL(tags$li("OL")), 17 | UL(tags$li("UL")) 18 | ) 19 | } 20 | 21 | server <- function(id) { 22 | moduleServer(id, function(input, output, session) {}) 23 | } 24 | 25 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 26 | -------------------------------------------------------------------------------- /inst/examples/mbazaDashboard/.gitignore: -------------------------------------------------------------------------------- 1 | # Auto-generated from scss 2 | /www/style.css 3 | -------------------------------------------------------------------------------- /inst/examples/mbazaDashboard/app.R: -------------------------------------------------------------------------------- 1 | library(shiny.blueprint) 2 | library(purrr) 3 | library(sass) 4 | library(shiny.router) 5 | library(shiny) 6 | library(stringi) 7 | 8 | source("sidebar.R") 9 | source("navbar.R") 10 | source("home.R") 11 | 12 | layout <- div( 13 | navbar, 14 | div( 15 | style = "display: flex; flex-direction: row", 16 | sidebar, 17 | homePage 18 | ) 19 | ) 20 | 21 | ui <- fluidPage( 22 | suppressDependencies("bootstrap"), 23 | tags$head( 24 | tags$link(href = "style.css", rel = "stylesheet", type = "text/css") 25 | ), 26 | shiny::tags$body(layout) 27 | ) 28 | 29 | sass(sass_file("style.scss"), output = "www/style.css", cache = FALSE) 30 | 31 | server <- function(input, output, session) { 32 | observeEvent(input$`user-button`, { 33 | print("User button clicked!") 34 | }) 35 | } 36 | 37 | shinyApp(ui, server) 38 | -------------------------------------------------------------------------------- /inst/examples/mbazaDashboard/home.R: -------------------------------------------------------------------------------- 1 | menusExample <- div( 2 | Menu( 3 | className = "bp5-elevation-1 menu-example", 4 | MenuItem(icon = "new-text-box", text = "New, text box"), 5 | MenuItem(icon = "new-object", text = "New object"), 6 | MenuItem(icon = "new-link", text = "New link"), 7 | MenuDivider(), 8 | MenuItem(icon = "cog", text = "Settings...") 9 | ), 10 | Menu( 11 | className = "bp5-elevation-1 menu-example", 12 | MenuDivider(title = "Edit"), 13 | MenuItem(icon = "cut", text = "Cut", label = "⌘X"), 14 | MenuItem(icon = "duplicate", text = "Copy", label = "⌘C"), 15 | MenuItem( 16 | icon = "clipboard", 17 | text = "Paste", 18 | label = "⌘V", 19 | disabled = TRUE 20 | ), 21 | MenuDivider(title = "Text"), 22 | MenuItem( 23 | disabled = TRUE, 24 | icon = "align-left", 25 | text = "Alignment", 26 | MenuItem(icon = "align-left", text = "Left"), 27 | MenuItem(icon = "align-center", text = "Center"), 28 | MenuItem(icon = "align-right", text = "Right"), 29 | MenuItem(icon = "align-justify", text = "Justify") 30 | ), 31 | MenuItem( 32 | icon = "style", 33 | text = "Style", 34 | MenuItem(icon = "bold", text = "Bold"), 35 | MenuItem(icon = "italic", text = "Italic"), 36 | MenuItem(icon = "underline", text = "Underline") 37 | ), 38 | MenuItem( 39 | icon = "asterisk", 40 | text = "Miscellaneous", 41 | MenuItem(icon = "badge", text = "Badge"), 42 | MenuItem(icon = "book", text = "Long items will truncate when they reach max-width"), 43 | MenuItem( 44 | icon = "more", 45 | text = "Look in here for even more items", 46 | MenuItem(icon = "briefcase", text = "Briefcase"), 47 | MenuItem(icon = "calculator", text = "Calculator"), 48 | MenuItem(icon = "dollar", text = "Dollar"), 49 | MenuItem( 50 | icon = "dot", 51 | text = "Shapes", 52 | MenuItem(icon = "full-circle", text = "Full circle"), 53 | MenuItem(icon = "heart", text = "Heart"), 54 | MenuItem(icon = "ring", text = "Ring"), 55 | MenuItem(icon = "square", text = "Square") 56 | ) 57 | ) 58 | ) 59 | ) 60 | ) 61 | 62 | 63 | homePage <- div( 64 | style = "flex: 1", 65 | div( 66 | style = "display: flex", 67 | div( 68 | style = "flex: 1; padding: 20px", 69 | Card( 70 | interactive = TRUE, 71 | elevation = 2, 72 | className = "bp5-running-text", 73 | h1(style = "margin-top: 0", "Welcome!"), 74 | "Seriously, we're glad to see you here!" 75 | ) 76 | ), 77 | div( 78 | style = "flex: 1; padding: 20px", 79 | Callout( 80 | title = "Warning!", 81 | intent = "primary", 82 | "This is an early version of this package." 83 | ) 84 | ) 85 | ), 86 | div( 87 | style = "padding: 20px", 88 | Card( 89 | interactive = TRUE, 90 | elevation = 2, 91 | h1(style = "margin-top: 0", "Take a look at this awesome Blueprint example!"), 92 | menusExample 93 | ) 94 | ), 95 | div( 96 | style = "display: flex; justify-content: space-evenly; margin-top: 30px", 97 | img( 98 | style = "height: 60px; margin: 20px", 99 | src = "appsilon-logo.png", 100 | alt = "Appsilon" 101 | ) 102 | ) 103 | ) 104 | -------------------------------------------------------------------------------- /inst/examples/mbazaDashboard/navbar.R: -------------------------------------------------------------------------------- 1 | navbarLeft <- 2 | NavbarGroup( 3 | align = "left", 4 | NavbarHeading( 5 | img( 6 | src = "appsilon-logo.png", 7 | style = "height: 32px;", 8 | alt = "Appsilon" 9 | ) 10 | ), 11 | NavbarHeading(strong("Mbaza")), 12 | NavbarDivider(), 13 | span("Mbaza AI") 14 | ) 15 | 16 | navbarRight <- 17 | NavbarGroup( 18 | align = "right", 19 | Button( 20 | minimal = TRUE, 21 | icon = "projects", 22 | text = "Projects", 23 | style = list(color = "#fff") 24 | ), 25 | NavbarDivider(), 26 | Button(minimal = TRUE, icon = "user"), 27 | Button(minimal = TRUE, icon = "notifications"), 28 | Popover( 29 | Button(minimal = TRUE, icon = "globe"), 30 | Menu( 31 | MenuItem(text = "English"), 32 | MenuItem(text = "Français") 33 | ) 34 | ) 35 | ) 36 | 37 | navbar <- Navbar( 38 | className = "bp5-dark", 39 | navbarLeft, 40 | navbarRight 41 | ) 42 | -------------------------------------------------------------------------------- /inst/examples/mbazaDashboard/sidebar.R: -------------------------------------------------------------------------------- 1 | routes <- list( 2 | HOME = list( 3 | path = "/", 4 | iconName = "home", 5 | title = "Home" 6 | ), 7 | EXTRACT_FRAMES = list( 8 | path = "/extract-frames", 9 | iconName = "mobile-video", 10 | title = "Extract from video" 11 | ), 12 | CLASSIFY = list( 13 | path = "/classify", 14 | iconName = "send-to-graph", 15 | title = "Classify photos" 16 | ), 17 | EXPLORE = list( 18 | path = "/explore", 19 | iconName = "search-template", 20 | title = "Explore results" 21 | ) 22 | ) 23 | names(routes) <- NULL 24 | 25 | sidebarItem <- function(item) { 26 | shiny::a( 27 | href = item$path, 28 | class = "sidebar_item", 29 | shiny.blueprint::Button( 30 | minimal = TRUE, 31 | icon = item$iconName, 32 | text = item$title, 33 | style = list( 34 | color = "#fff", 35 | width = "100%", 36 | padding = "20px" 37 | ), 38 | alignText = "left", 39 | active = FALSE 40 | ) 41 | ) 42 | } 43 | 44 | sidebar <- div( 45 | class = "sidebar", 46 | style = "display: flex; flex-direction: column; text-align: center;", 47 | lift(div)(map(routes, sidebarItem)) 48 | ) 49 | -------------------------------------------------------------------------------- /inst/examples/mbazaDashboard/style.scss: -------------------------------------------------------------------------------- 1 | body { 2 | min-height: 611px; 3 | margin: 0; 4 | position: relative; 5 | background-color: #f8f9fa; 6 | font-family: Roboto, Arial, Helvetica, Helvetica Neue, serif; 7 | overflow-y: hidden; 8 | } 9 | 10 | .sidebar a { 11 | opacity: 0.75; 12 | text-decoration: none; 13 | } 14 | 15 | li { 16 | list-style: none; 17 | } 18 | 19 | .sidebar { 20 | width: 190px; 21 | height: 100vw; 22 | background-color: #2a3743; 23 | color: #fff; 24 | } 25 | 26 | .sidebar_item { 27 | background-color: #2a3743; 28 | color: #fff; 29 | } 30 | 31 | .menu-example { 32 | max-width: 280px; 33 | margin: 20px; 34 | } 35 | -------------------------------------------------------------------------------- /inst/examples/mbazaDashboard/www/appsilon-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Appsilon/shiny.blueprint/b55c33d730bcfa4eb8d4994d0abcf96292d2cc66/inst/examples/mbazaDashboard/www/appsilon-logo.png -------------------------------------------------------------------------------- /inst/examples/showcase/app.R: -------------------------------------------------------------------------------- 1 | library(shiny.blueprint) 2 | library(shiny.router) 3 | library(shiny) 4 | library(purrr) 5 | 6 | section <- function(name, ...) list(name = name, items = list(...)) 7 | item <- function(name, id) list(type = "item", name = name, id = id) 8 | 9 | sections <- list( 10 | section( 11 | "COMPONENTS", 12 | item("Breadcrumbs", "Breadcrumbs"), 13 | item("Button", "Button"), 14 | item("Button group", "ButtonGroup"), 15 | item("Callout", "Callout"), 16 | item("Card", "Card"), 17 | item("Collapse", "Collapse"), 18 | item("Divider", "Divider"), 19 | item("Editable text", "EditableText"), 20 | item("HTML elements", "htmlElements"), 21 | item("HTML table", "HTMLTable"), 22 | # TODO: HotkeysTarget2 23 | item("Icon", "Icon"), 24 | item("Menu", "Menu"), 25 | item("Navbar", "Navbar"), 26 | item("Non-ideal state", "NonIdealState"), 27 | item("Overflow list", "OverflowList"), 28 | item("Panel stack", "PanelStack"), 29 | item("Progress bar", "ProgressBar"), 30 | item("Resize sensor", "ResizeSensor"), 31 | item("Spinner", "Spinner"), 32 | item("Tabs", "Tabs"), 33 | item("Tag", "Tag"), 34 | item("Text", "Text"), 35 | item("Tree", "Tree") 36 | ), 37 | section( 38 | "FORM CONTROLS", 39 | item("Form group", "FormGroup"), 40 | item("Control group", "ControlGroup"), 41 | item("Label", "Label"), 42 | item("Checkbox", "Checkbox"), 43 | item("Radio", "Radio"), 44 | item("HTML select", "HTMLSelect"), 45 | item("Slider", "Slider"), 46 | item("Range slider", "RangeSlider"), 47 | item("Multi slider", "MultiSlider"), 48 | item("Switch", "Switch") 49 | ), 50 | section( 51 | "FORM INPUTS", 52 | item("File input", "FileInput"), 53 | item("Numeric input", "NumericInput"), 54 | item("Input group", "InputGroup"), 55 | item("Text area", "TextArea"), 56 | item("Tag input", "TagInput") 57 | ), 58 | section( 59 | "OVERLAYS", 60 | item("Overlay", "Overlay"), 61 | item("Alert", "Alert"), 62 | # TODO: Context menu 63 | item("Dialog", "Dialog"), 64 | item("Multistep dialog", "MultistepDialog"), 65 | item("Drawer", "Drawer"), 66 | item("Popover", "Popover"), 67 | item("Toast", "Toast") 68 | # TODO: Tooltip 69 | ), 70 | # TODO: HotkeysProvider - section 71 | section( 72 | "SELECT", 73 | item("Suggest", "Suggest"), 74 | item("Select", "Select"), 75 | item("MultiSelect", "MultiSelect") 76 | ) 77 | ) 78 | items <- do.call(c, lapply(sections, `[[`, "items")) 79 | 80 | makeNav <- function(sections) { 81 | sections <- lapply(sections, function(section) { 82 | sectionId <- paste0( 83 | "section-", 84 | gsub(" ", "-", tolower(section$name)) 85 | ) 86 | tagList( 87 | tags$button( 88 | section$name, 89 | class = "section-button", 90 | onclick = paste0( 91 | "$('#", sectionId, "').slideToggle();", 92 | "$(this).toggleClass('expanded');" 93 | ) 94 | ), 95 | UL( 96 | id = sectionId, 97 | style = "display: none;", 98 | lapply(section$items, function(item) { 99 | tags$li( 100 | tags$a(item$name, href = route_link(item$id)), 101 | class = "li-button" 102 | ) 103 | }) 104 | ) 105 | ) 106 | }) 107 | tagList( 108 | tags$a(class = "home-button", "HOME", href = route_link("/")), 109 | sections 110 | ) 111 | } 112 | 113 | addFileName <- function(code, filename, commentChar) { 114 | paste0(commentChar, " ", filename, "\n\n", code) 115 | } 116 | 117 | readExample <- function(id) { 118 | rPath <- system.file(file.path("examples", paste0(id, ".R")), package = "shiny.blueprint") 119 | if (!file.exists(rPath)) { 120 | return() 121 | } 122 | rCode <- addFileName(readChar(rPath, file.info(rPath)$size), basename(rPath), "#") 123 | 124 | module <- new.env() 125 | source(rPath, local = module) 126 | list(rCode = rCode, ui = module$ui, server = module$server) 127 | } 128 | 129 | makePage <- function(id, name, ui, rCode) { 130 | tagList( 131 | H2(name, class = "component-name"), 132 | H5("Example"), 133 | div( 134 | class = "example-section", 135 | # The ID is used to locate the example in Cypress tests. 136 | div(`data-example-id` = id, ui) 137 | ), 138 | div( 139 | H5("R code"), 140 | Pre(tags$code(class = "language-r", rCode)) 141 | ) 142 | ) 143 | } 144 | 145 | prepareExamples <- function(items) { 146 | routes <- lapply(items, function(item) { 147 | example <- readExample(item$id) 148 | if (is.null(example)) { 149 | return() 150 | } 151 | exampleServer <- list() 152 | exampleServer[[item$id]] <- example$server 153 | return( 154 | list( 155 | server = exampleServer, 156 | router = route( 157 | path = item$id, 158 | ui = makePage( 159 | id = item$id, 160 | name = item$name, 161 | ui = example$ui(item$id), 162 | rCode = example$rCode 163 | ) 164 | ) 165 | ) 166 | ) 167 | }) 168 | return(routes) 169 | } 170 | 171 | makeRouter <- function(items, routes) { 172 | routes <- append( 173 | list(route( 174 | path = "/", 175 | ui = div( 176 | class = "home-page", 177 | H2( 178 | class = "home-page-title", 179 | "This is a ", 180 | tags$a( 181 | "Blueprint", 182 | class = "weight-300", 183 | href = "https://blueprintjs.com/", 184 | target = "_blank" 185 | ), 186 | " app built in Shiny" 187 | ), 188 | span(class = "font-mono", "shiny.react + Blueprint = shiny.blueprint"), 189 | Card( 190 | class = "home-page-section", 191 | span("Welcome to ", tags$strong(class = "font-mono", "shiny.blueprint"), " demo!"), 192 | span( 193 | tags$strong(class = "font-mono", "shiny.blueprint"), " is a package that allows ", 194 | "you to build Shiny apps using Blueprint - a React-based UI toolkit for the web." 195 | ), 196 | span("Use the menu on the left to explore live demos of all available components.") 197 | ), 198 | Card( 199 | class = "home-page-section direction-row", 200 | div( 201 | H4(class = "font-mono weight-600", "shiny.react"), 202 | span( 203 | "R package enables using React in Shiny apps. It contains R and JS code which ", 204 | "is independent from the React library that is being wrapped." 205 | ) 206 | ), 207 | a( 208 | href = "https://appsilon.github.io/shiny.react/", 209 | target = "_blank", 210 | img( 211 | class = "logo", 212 | src = "https://github.com/Appsilon/shiny.react/raw/main/man/figures/shiny-react.png" 213 | ) 214 | ) 215 | ), 216 | Card( 217 | class = "home-page-section direction-row", 218 | div( 219 | H4(class = "font-mono weight-600", "Blueprint"), 220 | span( 221 | "A React-based UI toolkit for the web. It is optimized for building complex, ", 222 | "data-dense web interfaces for desktop applications which run in modern ", 223 | "browsers and IE11. This is not a mobile-first UI toolkit." 224 | ) 225 | ), 226 | a( 227 | href = "https://blueprintjs.com/", 228 | target = "_blank", 229 | img( 230 | class = "logo", 231 | src = "https://cloud.githubusercontent.com/assets/464822/20228152/d3f36dc2-a804-11e6-80ff-51ada2d13ea7.png" # nolint 232 | ) 233 | ) 234 | ) 235 | ) 236 | )), 237 | routes 238 | ) 239 | do.call(router_ui, routes) 240 | } 241 | 242 | examples <- prepareExamples(items) 243 | router <- makeRouter(items, map(examples, "router")) 244 | 245 | addResourcePath("showcase-static", "./static") 246 | 247 | shinyApp( 248 | ui = tagList( 249 | tags$script( 250 | src = "showcase-static/js/highlight.v11.7.0.min.js" 251 | ), 252 | tags$script( 253 | src = "showcase-static/js/highlight_all.js" 254 | ), 255 | tags$link( 256 | rel = "stylesheet", 257 | type = "text/css", 258 | href = "showcase-static/css/mono-blue.min.css" 259 | ), 260 | tags$link( 261 | rel = "stylesheet", 262 | type = "text/css", 263 | href = "showcase-static/css/styles.css" 264 | ), 265 | tags$div( 266 | class = "grid", 267 | tags$nav(class = "sidebar", makeNav(sections)), 268 | tags$main(router) 269 | ) 270 | ), 271 | server = function(input, output, session) { 272 | router_server() 273 | session$sendCustomMessage("highlight_all", list()) 274 | exampleServers <- unlist(map(examples, "server")) 275 | lapply(items, function(item, modules = exampleServers) { 276 | modules[[item$id]](item$id) 277 | }) 278 | } 279 | ) 280 | -------------------------------------------------------------------------------- /inst/examples/showcase/static/css/mono-blue.min.css: -------------------------------------------------------------------------------- 1 | pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{background:#eaeef3;color:#00193a}.hljs-doctag,.hljs-keyword,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-strong,.hljs-title{font-weight:700}.hljs-comment{color:#738191}.hljs-addition,.hljs-built_in,.hljs-literal,.hljs-name,.hljs-quote,.hljs-section,.hljs-selector-class,.hljs-selector-id,.hljs-string,.hljs-tag,.hljs-title,.hljs-type{color:#0048ab}.hljs-attribute,.hljs-bullet,.hljs-deletion,.hljs-link,.hljs-meta,.hljs-regexp,.hljs-subst,.hljs-symbol,.hljs-template-variable,.hljs-variable{color:#4c81c9}.hljs-emphasis{font-style:italic} -------------------------------------------------------------------------------- /inst/examples/showcase/static/css/styles.css: -------------------------------------------------------------------------------- 1 | html, body, .grid { 2 | height: 100%; 3 | } 4 | 5 | body { 6 | margin: 0; 7 | line-height: 1.3rem; 8 | } 9 | 10 | .sidebar { 11 | padding-top: 20px; 12 | } 13 | 14 | .home-button { 15 | display: flex; 16 | align-items: center; 17 | font-size: 20px; 18 | font-weight: 500; 19 | padding-left: 15px; 20 | padding-bottom: 20px; 21 | border-bottom: 1px solid #ddd; 22 | } 23 | 24 | .home-button::before, .home-button::after { 25 | content: ""; 26 | height: 0; 27 | border-top: 1px solid #215db0; 28 | opacity: 0.5; 29 | } 30 | 31 | .home-button::before { 32 | width: 23%; 33 | margin-right: 15px; 34 | } 35 | 36 | .home-button::after { 37 | width: 30%; 38 | margin-left: 15px; 39 | } 40 | 41 | .home-button:focus { 42 | outline: none; 43 | text-decoration-line: underline; 44 | } 45 | 46 | .home-page { 47 | display: flex; 48 | flex-direction: column; 49 | } 50 | 51 | .home-page-title { 52 | margin: 5px 0; 53 | } 54 | 55 | .home-page-section { 56 | display: flex; 57 | flex-direction: column; 58 | gap: 15px; 59 | padding: 25px; 60 | margin-top: 35px; 61 | max-width: 1000px; 62 | } 63 | 64 | .direction-row { 65 | flex-direction: row; 66 | justify-content: space-between; 67 | } 68 | 69 | .font-mono { 70 | font-family: monospace; 71 | } 72 | 73 | code[class*="language-"], 74 | pre[class*="language-"] { 75 | background: unset; 76 | font-family: monospace; 77 | } 78 | 79 | .example-section { 80 | padding: 10px 20px; 81 | margin: 20px 0; 82 | border-radius: 2px; 83 | box-shadow: inset 0 0 0 1px rgba(17, 20, 24, 0.15); 84 | } 85 | 86 | .grid { 87 | display: grid; 88 | grid-template-columns: 230px minmax(0, 1fr); 89 | gap: 1em; 90 | } 91 | 92 | .grid > nav { 93 | overflow: auto; 94 | border-right: 1px solid #ddd; 95 | } 96 | 97 | .section-button { 98 | all: unset; 99 | display: flex; 100 | align-items: center; 101 | position: relative; 102 | box-sizing: border-box; 103 | font-size: 16px; 104 | width: 100%; 105 | margin-top: 20px; 106 | padding: 0 20px; 107 | cursor: pointer; 108 | } 109 | 110 | .section-button:hover, .section-button:active { 111 | text-decoration-line: underline; 112 | } 113 | 114 | .section-button::before, .section-button::after { 115 | content: ""; 116 | position: absolute; 117 | right: 25px; 118 | width: 1px; 119 | height: 60%; 120 | margin: 2px 0; 121 | border-left: 2px solid #aaa; 122 | transform: rotate(90deg); 123 | transition: transform 0.3s; 124 | } 125 | 126 | .section-button::after { 127 | transform: rotate(0deg); 128 | } 129 | 130 | .section-button.expanded::after { 131 | transform: rotate(90deg); 132 | } 133 | 134 | .li-button { 135 | list-style-type: none; 136 | padding: 5px 0; 137 | } 138 | 139 | .li-button > a { 140 | color: black; 141 | font-weight: 300; 142 | } 143 | 144 | .li-button > a:focus { 145 | outline: none; 146 | text-decoration-line: underline; 147 | font-weight: 400; 148 | } 149 | 150 | .grid > main { 151 | overflow-y: auto; 152 | overflow-x: hidden; 153 | padding: 1.3em 1.5em; 154 | } 155 | 156 | .logo { 157 | width: 100px; 158 | padding: 5px; 159 | } 160 | 161 | .component-name { 162 | margin-top: 3px; 163 | margin-bottom: 20px; 164 | } 165 | 166 | .bp4-heading { 167 | font-weight: 400; 168 | } 169 | 170 | div[data-example-id] > * { 171 | margin: 10px 0; 172 | } 173 | 174 | .weight-300 { 175 | font-weight: 300; 176 | } 177 | 178 | .weight-600 { 179 | font-weight: 600; 180 | } 181 | -------------------------------------------------------------------------------- /inst/examples/showcase/static/js/highlight_all.js: -------------------------------------------------------------------------------- 1 | Shiny.addCustomMessageHandler("highlight_all", function(_) { 2 | hljs.highlightAll(); 3 | }); 4 | -------------------------------------------------------------------------------- /inst/www/231.blueprint.min.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunk=self.webpackChunk||[]).push([[231],{999:(e,n,t)=>{t.r(n),t.d(n,{splitPathsBySizeLoader:()=>i});var r=t(635),s=t(261),a=t(134),i=function(e,n){return(0,r.sH)(void 0,void 0,void 0,(function(){var i,u;return(0,r.YH)(this,(function(r){switch(r.label){case 0:return i=(0,s.fL)(e),n!==a.l.STANDARD?[3,2]:[4,t.e(672).then(t.bind(t,109))];case 1:return u=r.sent(),[3,4];case 2:return[4,t.e(783).then(t.bind(t,585))];case 3:u=r.sent(),r.label=4;case 4:return[2,u[i]]}}))}))}}}]); -------------------------------------------------------------------------------- /inst/www/824.blueprint.min.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunk=self.webpackChunk||[]).push([[824],{946:(e,n,t)=>{t.r(n),t.d(n,{allPathsLoader:()=>r});var s=t(635),r=function(e,n){return(0,s.sH)(void 0,void 0,void 0,(function(){return(0,s.YH)(this,(function(s){switch(s.label){case 0:return[4,Promise.all([t.e(783),t.e(672),t.e(860)]).then(t.bind(t,803))];case 1:return[2,(0,s.sent().getIconPaths)(e,n)]}}))}))}}}]); -------------------------------------------------------------------------------- /inst/www/860.blueprint.min.js: -------------------------------------------------------------------------------- 1 | "use strict";(self.webpackChunk=self.webpackChunk||[]).push([[860],{803:(n,e,t)=>{t.r(e),t.d(e,{IconSvgPaths16:()=>a,IconSvgPaths20:()=>r,getIconPaths:()=>o,iconNameToPathsRecordKey:()=>u});var c=t(261),a=t(109),r=t(585),s=t(134);function o(n,e){var t=(0,c.fL)(n);return e===s.l.STANDARD?a[t]:r[t]}function u(n){return(0,c.fL)(n)}}}]); -------------------------------------------------------------------------------- /inst/www/blueprint.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /*! 2 | Copyright (c) 2018 Jed Watson. 3 | Licensed under the MIT License (MIT), see 4 | http://jedwatson.github.io/classnames 5 | */ 6 | 7 | /*! 8 | Copyright (C) 2013-2015 by Andrea Giammarchi - @WebReflection 9 | 10 | Permission is hereby granted, free of charge, to any person obtaining a copy 11 | of this software and associated documentation files (the "Software"), to deal 12 | in the Software without restriction, including without limitation the rights 13 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 14 | copies of the Software, and to permit persons to whom the Software is 15 | furnished to do so, subject to the following conditions: 16 | 17 | The above copyright notice and this permission notice shall be included in 18 | all copies or substantial portions of the Software. 19 | 20 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 21 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 22 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 23 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 24 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 25 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 26 | THE SOFTWARE. 27 | 28 | */ 29 | -------------------------------------------------------------------------------- /inst/www/blueprint.min.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /*! 2 | Copyright (c) 2018 Jed Watson. 3 | Licensed under the MIT License (MIT), see 4 | http://jedwatson.github.io/classnames 5 | */ 6 | 7 | /** 8 | * @license 9 | * Lodash 10 | * Copyright OpenJS Foundation and other contributors 11 | * Released under MIT license 12 | * Based on Underscore.js 1.8.3 13 | * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors 14 | */ 15 | 16 | /** 17 | * @license React 18 | * use-sync-external-store-shim.production.min.js 19 | * 20 | * Copyright (c) Facebook, Inc. and its affiliates. 21 | * 22 | * This source code is licensed under the MIT license found in the 23 | * LICENSE file in the root directory of this source tree. 24 | */ 25 | -------------------------------------------------------------------------------- /js/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | browser: true, 4 | es2021: true, 5 | }, 6 | extends: ["eslint:recommended", "plugin:react/recommended"], 7 | parserOptions: { 8 | ecmaFeatures: { 9 | jsx: true, 10 | }, 11 | ecmaVersion: "latest", 12 | sourceType: "module", 13 | }, 14 | plugins: ["react"], 15 | rules: { 16 | "no-constant-condition": ["error", { checkLoops: false }], 17 | "no-unused-vars": ["error", { argsIgnorePattern: "^_" }] 18 | }, 19 | globals: { 20 | Shiny: true, 21 | }, 22 | }; 23 | -------------------------------------------------------------------------------- /js/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | -------------------------------------------------------------------------------- /js/cypress.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require("cypress"); 2 | 3 | module.exports = defineConfig({ 4 | e2e: { 5 | baseUrl: "http://localhost:3333", 6 | defaultCommandTimeout: 1e4, 7 | supportFile: false, 8 | }, 9 | }); 10 | -------------------------------------------------------------------------------- /js/cypress/.gitignore: -------------------------------------------------------------------------------- 1 | /screenshots/ 2 | /videos/ 3 | -------------------------------------------------------------------------------- /js/cypress/e2e/showcase.cy.js: -------------------------------------------------------------------------------- 1 | function test(id, callback) { 2 | it(id, () => { 3 | cy.visit(`#!/${id}`); 4 | cy.get(`[data-example-id=${id}]`).should('be.visible').within(callback); 5 | }) 6 | } 7 | 8 | describe('showcase', () => { 9 | test('Button', () => { 10 | for (const text of ['Refresh', 'Export', 'OK', 'Next']) 11 | cy.contains(text).click(); 12 | cy.contains('Clicks: 4'); 13 | }) 14 | 15 | test('Overlay', () => { 16 | cy.contains('Show').click(); 17 | cy.get('.bp5-overlay-open').contains('Close'); 18 | }) 19 | 20 | test('Dialog', () => { 21 | cy.contains('Show').click(); 22 | cy.get('.bp5-dialog').contains('Close'); 23 | }) 24 | 25 | test('MultistepDialog', () => { 26 | cy.contains('Show').click(); 27 | const selector = '.bp5-dialog'; 28 | for( const text of ['Next', 'Next', 'Step 2', 'Next', 'Submit']) 29 | cy.get(selector).contains(text).click() 30 | }) 31 | }); 32 | -------------------------------------------------------------------------------- /js/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "scripts": { 4 | "run-showcase": "Rscript -e 'shiny::runApp(\"../inst/examples/showcase\", port = 3333)'", 5 | "test-e2e": "start-server-and-test run-showcase http://localhost:3333 'cypress run'", 6 | "test-e2e-interactive": "start-server-and-test run-showcase http://localhost:3333 'cypress open --e2e'" 7 | }, 8 | "dependencies": { 9 | "@blueprintjs/core": "5.10.2", 10 | "@blueprintjs/popover2": "^2.1.4", 11 | "@blueprintjs/select": "5.1.4", 12 | "@popperjs/core": "^2.11.6", 13 | "prop-types": "^15.8.1", 14 | "react": "^18.2.0", 15 | "react-dom": "^18.2.0", 16 | "react-popper": "^2.3.0" 17 | }, 18 | "devDependencies": { 19 | "css-loader": "^6.7.1", 20 | "cypress": "^12.0.0", 21 | "eslint": "^8.34.0", 22 | "eslint-plugin-react": "^7.32.2", 23 | "start-server-and-test": "^2.0.0", 24 | "style-loader": "^3.3.1", 25 | "webpack": "^5.70.0", 26 | "webpack-cli": "^5.0.0" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /js/src/PanelStack.module.css: -------------------------------------------------------------------------------- 1 | .panelStack { 2 | border: 1px solid lightgrey; 3 | height: 100%; 4 | width: 100%; 5 | } 6 | -------------------------------------------------------------------------------- /js/src/index.js: -------------------------------------------------------------------------------- 1 | import "@blueprintjs/core/lib/css/blueprint.css"; 2 | import "@blueprintjs/popover2/lib/css/blueprint-popover2.css"; 3 | import "@blueprintjs/select/lib/css/blueprint-select.css"; 4 | 5 | import * as BlueprintSelect from "@blueprintjs/select"; 6 | import * as Blueprint from "@blueprintjs/core"; 7 | 8 | import * as Inputs from "./inputs"; 9 | import Suggest from "./suggest"; 10 | import Select from "./select"; 11 | import MultiSelect from "./multiselect"; 12 | import MultiSlider from "./multiSlider"; 13 | import Tree from "./tree"; 14 | import ResizeSensor from "./resizeSensor.js"; 15 | import PanelStack, { panelStackHandlers } from "./panelStack"; 16 | 17 | import "./toaster"; 18 | 19 | window.jsmodule = { 20 | ...window.jsmodule, 21 | "@blueprintjs/core": Blueprint, 22 | "@blueprintjs/select": BlueprintSelect, 23 | "@/shiny.blueprint": { 24 | ...Inputs, 25 | Suggest, 26 | Select, 27 | MultiSelect, 28 | MultiSlider, 29 | Tree, 30 | ResizeSensor, 31 | PanelStack, 32 | panelStackHandlers, 33 | }, 34 | }; 35 | -------------------------------------------------------------------------------- /js/src/inputs.js: -------------------------------------------------------------------------------- 1 | import * as Blueprint from '@blueprintjs/core'; 2 | import { ButtonAdapter, InputAdapter } from '@/shiny.react'; 3 | 4 | export const Button = ButtonAdapter(Blueprint.Button); 5 | export const AnchorButton = ButtonAdapter(Blueprint.AnchorButton); 6 | 7 | export const EditableText = InputAdapter(Blueprint.EditableText, (value, setValue) => ({ 8 | value, 9 | onChange: setValue, 10 | })); 11 | 12 | export const Checkbox = InputAdapter(Blueprint.Checkbox, (value, setValue) => ({ 13 | checked: value, 14 | onChange: (event) => setValue(event.target.checked), 15 | })); 16 | 17 | export const RadioGroup = InputAdapter(Blueprint.RadioGroup, (value, setValue) => ({ 18 | selectedValue: value, 19 | onChange: (event) => setValue(event.currentTarget.value), 20 | })); 21 | 22 | export const HTMLSelect = InputAdapter(Blueprint.HTMLSelect, (value, setValue) => ({ 23 | value, 24 | onChange: (event) => setValue(event.target.value), 25 | })); 26 | 27 | export const Slider = InputAdapter(Blueprint.Slider, (value, setValue) => ({ 28 | value, 29 | onChange: setValue, 30 | })); 31 | 32 | export const RangeSlider = InputAdapter(Blueprint.RangeSlider, (value, setValue) => ({ 33 | value, 34 | onChange: setValue, 35 | })); 36 | 37 | export const MultiSliderHandle = Blueprint.MultiSlider.Handle; 38 | 39 | export const Switch = InputAdapter(Blueprint.Switch, (value, setValue) => ({ 40 | checked: value, 41 | onChange: (event) => setValue(event.target.checked), 42 | })); 43 | 44 | export const FileInput = InputAdapter(Blueprint.FileInput, (value, setValue) => ({ 45 | text: value, 46 | onInputChange: (event) => setValue(event.target.files[0].name), 47 | })); 48 | 49 | export const NumericInput = InputAdapter(Blueprint.NumericInput, (value, setValue) => ({ 50 | value, 51 | onValueChange: setValue, 52 | })); 53 | 54 | export const InputGroup = InputAdapter(Blueprint.InputGroup, (value, setValue) => ({ 55 | value, 56 | onChange: (event) => setValue(event.target.value), 57 | })); 58 | 59 | export const TagInput = InputAdapter(Blueprint.TagInput, (values, setValue) => ({ 60 | values, 61 | onChange: setValue, 62 | })); 63 | 64 | export const TextArea = InputAdapter(Blueprint.TextArea, (value, setValue) => ({ 65 | value, 66 | onChange: (event) => setValue(event.target.value), 67 | })); 68 | -------------------------------------------------------------------------------- /js/src/multiSlider.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import PropTypes from "prop-types"; 3 | import { MultiSlider as MultiSliderBlueprint } from "@blueprintjs/core"; 4 | 5 | const propTypes = { 6 | inputId: PropTypes.string, 7 | values: PropTypes.array, 8 | }; 9 | 10 | const MultiSlider = ({ inputId, values, ...propsRest }) => { 11 | const [state, setState] = React.useState(values.map(({ value }) => value)); 12 | 13 | React.useEffect(() => Shiny.setInputValue(inputId, state), []); 14 | 15 | const handleOnChange = React.useCallback((newState) => { 16 | Shiny.setInputValue(inputId, newState); 17 | setState(newState); 18 | }, []); 19 | 20 | return React.createElement( 21 | MultiSliderBlueprint, 22 | { 23 | onChange: handleOnChange, 24 | ...propsRest, 25 | }, 26 | values.map(({ value: _, ...props }, i) => 27 | React.createElement(MultiSliderBlueprint.Handle, { 28 | value: state[i], 29 | ...{ 30 | ...props, 31 | key: i, 32 | } 33 | }) 34 | ) 35 | ); 36 | }; 37 | 38 | MultiSlider.propTypes = propTypes; 39 | export default MultiSlider; 40 | -------------------------------------------------------------------------------- /js/src/multiselect.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import PropTypes from "prop-types"; 3 | import { MenuItem } from "@blueprintjs/core"; 4 | import { MultiSelect as MultiSelectBlueprint } from "@blueprintjs/select"; 5 | import { highlightText } from "./utils/highlight-text"; 6 | 7 | const filterItem = (query, item) => { 8 | return item.text.toLowerCase().indexOf(query.toLowerCase()) >= 0; 9 | }; 10 | 11 | const tagRenderer = (item) => item.text; 12 | 13 | const propTypes = { 14 | items: PropTypes.array, 15 | selected: PropTypes.array, 16 | inputId: PropTypes.string, 17 | popoverProps: PropTypes.object, 18 | }; 19 | 20 | const MultiSelect = ({ 21 | items, 22 | selected, 23 | inputId, 24 | popoverProps, 25 | ...propsRest 26 | }) => { 27 | const [selectedItems, setSelectedItems] = React.useState( 28 | items.filter((item) => selected.includes(item.text)) 29 | ); 30 | 31 | React.useEffect(() => { 32 | Shiny.setInputValue(inputId, { selectedItems }); 33 | }, [selectedItems]); 34 | 35 | const isSelectedItem = React.useCallback( 36 | (item) => 37 | selectedItems.filter((selectedItem) => selectedItem.key === item.key) 38 | .length > 0, 39 | [selectedItems] 40 | ); 41 | 42 | const selectItem = React.useCallback( 43 | (newItem) => { 44 | setSelectedItems([...selectedItems, newItem]); 45 | }, 46 | [selectedItems] 47 | ); 48 | 49 | const deselectItem = React.useCallback( 50 | (item) => { 51 | setSelectedItems( 52 | selectedItems.filter((selectedItem) => selectedItem.key !== item.key) 53 | ); 54 | }, 55 | [selectedItems] 56 | ); 57 | 58 | const handleItemRemove = React.useCallback( 59 | (removedItem) => { 60 | deselectItem(removedItem); 61 | }, 62 | [deselectItem] 63 | ); 64 | 65 | const handleItemSelect = React.useCallback( 66 | (newItem) => { 67 | if (!isSelectedItem(newItem)) { 68 | selectItem(newItem); 69 | } else { 70 | deselectItem(newItem); 71 | } 72 | }, 73 | [isSelectedItem, selectItem, deselectItem] 74 | ); 75 | 76 | const renderItem = React.useCallback( 77 | (item, { handleClick, modifiers, query }) => { 78 | if (!modifiers.matchesPredicate) { 79 | return null; 80 | } 81 | return React.createElement(MenuItem, { 82 | icon: isSelectedItem(item) ? "tick" : "blank", 83 | selected: modifiers.active, 84 | active: modifiers.active, 85 | disabled: modifiers.disabled, 86 | label: item.label.toString(), 87 | key: item.key, 88 | onClick: handleClick, 89 | text: highlightText(item.text, query), 90 | }); 91 | }, 92 | [selectedItems] 93 | ); 94 | 95 | return React.createElement( 96 | "div", 97 | { style: { width: "fit-content" } }, 98 | React.createElement(MultiSelectBlueprint, { 99 | items, 100 | ...propsRest, 101 | itemPredicate: filterItem, 102 | itemRenderer: renderItem, 103 | onItemSelect: handleItemSelect, 104 | onRemove: handleItemRemove, 105 | popoverProps: { 106 | ...popoverProps, 107 | usePortal: false, 108 | }, 109 | selectedItems, 110 | tagRenderer, 111 | }) 112 | ); 113 | }; 114 | 115 | MultiSelect.propTypes = propTypes; 116 | export default MultiSelect; 117 | -------------------------------------------------------------------------------- /js/src/panelStack.js: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import PropTypes from "prop-types"; 3 | import { PanelStack2 } from "@blueprintjs/core"; 4 | import styles from "./PanelStack.module.css"; 5 | 6 | const PanelsType = PropTypes.arrayOf( 7 | PropTypes.shape({ 8 | id: PropTypes.string, 9 | title: PropTypes.string, 10 | content: PropTypes.node, 11 | }) 12 | ); 13 | 14 | export const panelStackHandlers = {}; 15 | 16 | const Panel = ({ content }) => { 17 | return React.createElement("div", { style: { padding: 10 } }, content); 18 | }; 19 | Panel.propTypes = { 20 | content: PropTypes.node, 21 | }; 22 | 23 | const PanelStack = ({ panels, ns, size, ...propsRest }) => { 24 | const [stack, setStack] = React.useState([ 25 | { 26 | renderPanel: Panel, 27 | title: panels[0].title, 28 | props: { content: panels[0].content }, 29 | }, 30 | ]); 31 | const addToPanelStack = (newPanel) => 32 | setStack((stack) => [...stack, newPanel]); 33 | const removeFromPanelStack = () => setStack((stack) => stack.slice(0, -1)); 34 | React.useEffect(() => { 35 | panelStackHandlers[ns] = { 36 | openPanel: (panelId) => { 37 | const { title, content } = panels.find(({ id }) => id == panelId); 38 | addToPanelStack({ 39 | renderPanel: Panel, 40 | title, 41 | props: { content }, 42 | }); 43 | }, 44 | closePanel: removeFromPanelStack, 45 | }; 46 | return () => delete panelStackHandlers[ns]; 47 | }, [panels]); 48 | return React.createElement( 49 | "div", 50 | { style: { width: size[0], height: size[1] } }, 51 | React.createElement(PanelStack2, { 52 | className: styles.panelStack, 53 | onOpen: addToPanelStack, 54 | onClose: removeFromPanelStack, 55 | stack: stack, 56 | ...propsRest, 57 | }) 58 | ); 59 | }; 60 | PanelStack.propTypes = { 61 | panels: PanelsType, 62 | ns: PropTypes.string, 63 | size: PropTypes.arrayOf(PropTypes.number), 64 | propsRest: PropTypes.object, 65 | }; 66 | 67 | export default PanelStack; 68 | -------------------------------------------------------------------------------- /js/src/resizeSensor.js: -------------------------------------------------------------------------------- 1 | import React, { useCallback } from "react"; 2 | import PropTypes from "prop-types"; 3 | import { ResizeSensor as BlueprintResizeSensor } from "@blueprintjs/core"; 4 | 5 | const propTypes = { 6 | inputId: PropTypes.string, 7 | content: PropTypes.node, 8 | propsRest: PropTypes.object, 9 | }; 10 | 11 | const ResizeSensor = ({ inputId, content, ...propsRest }) => { 12 | content.props.style.overflow = "auto"; 13 | content.props.style.resize = "both"; 14 | const handleResize = useCallback(([{ contentRect }]) => { 15 | Shiny.setInputValue(inputId, contentRect); 16 | }); 17 | 18 | return React.createElement( 19 | BlueprintResizeSensor, 20 | { 21 | onResize: handleResize, 22 | ...propsRest, 23 | }, 24 | content 25 | ); 26 | }; 27 | 28 | ResizeSensor.propTypes = propTypes; 29 | export default ResizeSensor; 30 | -------------------------------------------------------------------------------- /js/src/select.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import PropTypes from "prop-types"; 3 | import { MenuItem, Button } from "@blueprintjs/core"; 4 | import { Select as SelectBlueprint } from "@blueprintjs/select"; 5 | import { highlightText } from "./utils/highlight-text"; 6 | 7 | const renderItem = (item, { handleClick, modifiers, query }) => { 8 | if (!modifiers.matchesPredicate) { 9 | return null; 10 | } 11 | return React.createElement(MenuItem, { 12 | active: modifiers.active, 13 | disabled: modifiers.disabled, 14 | label: item.label.toString(), 15 | key: item.key, 16 | onClick: handleClick, 17 | text: highlightText(item.text, query), 18 | }); 19 | }; 20 | 21 | const propTypes = { 22 | items: PropTypes.array, 23 | selected: PropTypes.string, 24 | inputId: PropTypes.string, 25 | popoverProps: PropTypes.object, 26 | }; 27 | 28 | const filterItem = (query, item) => { 29 | return item.text.toLowerCase().indexOf(query.toLowerCase()) >= 0; 30 | }; 31 | 32 | const Select = ({ items, selected, inputId, popoverProps, ...propsRest }) => { 33 | const [currentItem, setCurrentItem] = React.useState( 34 | items.find(({ text }) => text === selected) 35 | ); 36 | 37 | React.useEffect(() => Shiny.setInputValue(inputId, currentItem), []); 38 | 39 | const handleItemSelect = React.useCallback((newItem) => { 40 | setCurrentItem(newItem); 41 | Shiny.setInputValue(inputId, newItem); 42 | }, []); 43 | 44 | return React.createElement( 45 | "div", 46 | { style: { width: "fit-content" } }, 47 | React.createElement( 48 | SelectBlueprint, 49 | { 50 | items, 51 | ...propsRest, 52 | itemPredicate: filterItem, 53 | itemRenderer: renderItem, 54 | onItemSelect: handleItemSelect, 55 | popoverProps: { 56 | ...popoverProps, 57 | usePortal: false, 58 | }, 59 | }, 60 | React.createElement(Button, { 61 | text: 62 | currentItem.text + 63 | (currentItem.label ? ` (${currentItem.label})` : ""), 64 | rightIcon: "caret-down", 65 | }) 66 | ) 67 | ); 68 | }; 69 | 70 | Select.propTypes = propTypes; 71 | export default Select; 72 | -------------------------------------------------------------------------------- /js/src/suggest.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import PropTypes from "prop-types"; 3 | import { MenuItem } from "@blueprintjs/core"; 4 | import { Suggest2 } from "@blueprintjs/select"; 5 | import { highlightText } from "./utils/highlight-text"; 6 | 7 | const renderItem = (item, { handleClick, modifiers, query }) => { 8 | if (!modifiers.matchesPredicate) { 9 | return null; 10 | } 11 | return React.createElement(MenuItem, { 12 | active: modifiers.active, 13 | disabled: modifiers.disabled, 14 | label: item.label.toString(), 15 | key: item.key, 16 | onClick: handleClick, 17 | text: highlightText(item.text, query), 18 | }); 19 | }; 20 | 21 | const propTypes = { 22 | items: PropTypes.array, 23 | selected: PropTypes.string, 24 | inputId: PropTypes.string, 25 | popoverProps: PropTypes.object, 26 | }; 27 | 28 | const filterItem = (query, item) => { 29 | return item.text.toLowerCase().indexOf(query.toLowerCase()) >= 0; 30 | }; 31 | 32 | const Suggest = ({ items, inputId, popoverProps, ...propsRest }) => { 33 | const handleItemSelect = React.useCallback( 34 | (newItem) => Shiny.setInputValue(inputId, newItem), 35 | [] 36 | ); 37 | 38 | return React.createElement( 39 | "div", 40 | { style: { width: "fit-content" } }, 41 | React.createElement(Suggest2, { 42 | items, 43 | ...propsRest, 44 | itemPredicate: filterItem, 45 | itemRenderer: renderItem, 46 | inputValueRenderer: (item) => item.text, 47 | onItemSelect: handleItemSelect, 48 | popoverProps: { 49 | ...popoverProps, 50 | usePortal: false, 51 | }, 52 | }) 53 | ); 54 | }; 55 | 56 | Suggest.propTypes = propTypes; 57 | export default Suggest; 58 | -------------------------------------------------------------------------------- /js/src/toaster.js: -------------------------------------------------------------------------------- 1 | import { Toaster } from '@blueprintjs/core'; 2 | import { addBlueprintPrefix } from './utils/add-blueprint-prefix'; 3 | 4 | const toasters = {}; 5 | 6 | export const useToaster = (props) => { 7 | const { toasterId, ...propsRest } = props; 8 | toasters[toasterId] = Toaster.create({ ...propsRest }); 9 | Shiny.addCustomMessageHandler(addBlueprintPrefix(`show${toasterId}`), (toast) => { 10 | toasters[toasterId].show(toast.props, toast.key ? toast.key : undefined); 11 | }); 12 | Shiny.addCustomMessageHandler(addBlueprintPrefix(`clear${toasterId}`), (_) => { 13 | toasters[toasterId].clear(); 14 | }); 15 | Shiny.addCustomMessageHandler(addBlueprintPrefix(`dismiss${toasterId}`), (key) => { 16 | toasters[toasterId].dismiss(key); 17 | }); 18 | }; 19 | 20 | Shiny.addCustomMessageHandler(addBlueprintPrefix('createToaster'), (toasterProps) => { 21 | useToaster(toasterProps); 22 | }); 23 | -------------------------------------------------------------------------------- /js/src/tree.js: -------------------------------------------------------------------------------- 1 | import React, { useCallback, useEffect, useReducer } from "react"; 2 | import PropTypes from "prop-types"; 3 | import { cloneDeep } from "lodash"; 4 | import { Tree as BlueprintTree } from "@blueprintjs/core"; 5 | 6 | function forEachNode(nodes, callback) { 7 | if (nodes === undefined) { 8 | return; 9 | } 10 | for (const node of nodes) { 11 | callback(node); 12 | forEachNode(node.childNodes, callback); 13 | } 14 | } 15 | 16 | function getSelectedNodes(nodes) { 17 | if (nodes === undefined) { 18 | return []; 19 | } 20 | const selectedNodes = nodes 21 | .filter(({ isSelected }) => isSelected) 22 | .map(({ label }) => label); 23 | const selectedChildNodes = nodes.flatMap((node) => 24 | getSelectedNodes(node.childNodes) 25 | ); 26 | return [...selectedNodes, ...selectedChildNodes]; 27 | } 28 | 29 | function forNodeAtPath(nodes, path, callback) { 30 | callback(BlueprintTree.nodeFromPath(path, nodes)); 31 | } 32 | 33 | function treeReducer(state, action) { 34 | const newState = cloneDeep(state); 35 | switch (action.type) { 36 | case "DESELECT_ALL": 37 | forEachNode(newState, (node) => (node.isSelected = false)); 38 | return newState; 39 | case "SET_IS_EXPANDED": 40 | forNodeAtPath( 41 | newState, 42 | action.payload.path, 43 | (node) => (node.isExpanded = action.payload.isExpanded) 44 | ); 45 | return newState; 46 | case "SET_IS_SELECTED": 47 | forNodeAtPath( 48 | newState, 49 | action.payload.path, 50 | (node) => (node.isSelected = action.payload.isSelected) 51 | ); 52 | return newState; 53 | default: 54 | return state; 55 | } 56 | } 57 | 58 | const propTypes = { 59 | inputId: PropTypes.string, 60 | data: PropTypes.array, 61 | }; 62 | 63 | const Tree = ({ inputId, data }) => { 64 | const [nodes, dispatch] = useReducer(treeReducer, data); 65 | 66 | useEffect(() => { 67 | forEachNode(data, (node) => { 68 | if (node.id === undefined) { 69 | node.id = `${node.label}-${Math.random()}`; 70 | } 71 | }) 72 | }, []); 73 | 74 | useEffect(() => { 75 | const selectedNodes = getSelectedNodes(nodes); 76 | Shiny.setInputValue(inputId, selectedNodes); 77 | }, [nodes]); 78 | 79 | const handleNodeClick = useCallback((node, nodePath, event) => { 80 | const originallySelected = node.isSelected; 81 | if (!event.shiftKey) { 82 | dispatch({ type: "DESELECT_ALL" }); 83 | } 84 | dispatch({ 85 | payload: { 86 | path: nodePath, 87 | isSelected: originallySelected == null ? true : !originallySelected, 88 | }, 89 | type: "SET_IS_SELECTED", 90 | }); 91 | }, []); 92 | 93 | const handleNodeCollapse = useCallback((_node, nodePath) => { 94 | dispatch({ 95 | payload: { path: nodePath, isExpanded: false }, 96 | type: "SET_IS_EXPANDED", 97 | }); 98 | }, []); 99 | 100 | const handleNodeExpand = useCallback((_node, nodePath) => { 101 | dispatch({ 102 | payload: { path: nodePath, isExpanded: true }, 103 | type: "SET_IS_EXPANDED", 104 | }); 105 | }, []); 106 | 107 | return React.createElement(BlueprintTree, { 108 | contents: nodes, 109 | onNodeClick: handleNodeClick, 110 | onNodeCollapse: handleNodeCollapse, 111 | onNodeExpand: handleNodeExpand, 112 | }); 113 | }; 114 | 115 | Tree.propTypes = propTypes; 116 | export default Tree; 117 | -------------------------------------------------------------------------------- /js/src/utils/add-blueprint-prefix.js: -------------------------------------------------------------------------------- 1 | const addBlueprintPrefix = (txt) => `shiny.blueprint-${txt}`; 2 | 3 | export { addBlueprintPrefix }; 4 | -------------------------------------------------------------------------------- /js/src/utils/highlight-text.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export const highlightText = (text, query) => { 4 | let lastIndex = 0; 5 | const words = query 6 | .split(/\s+/) 7 | .filter((word) => word.length > 0) 8 | .map(escapeRegExpChars); 9 | if (words.length === 0) { 10 | return [text]; 11 | } 12 | const regexp = new RegExp(words.join("|"), "gi"); 13 | const tokens = []; 14 | while (true) { 15 | const match = regexp.exec(text); 16 | if (!match) { 17 | break; 18 | } 19 | const length = match[0].length; 20 | const before = text.slice(lastIndex, regexp.lastIndex - length); 21 | if (before.length > 0) { 22 | tokens.push(before); 23 | } 24 | lastIndex = regexp.lastIndex; 25 | tokens.push(React.createElement("strong", { key: lastIndex }, match[0])); 26 | } 27 | const rest = text.slice(lastIndex); 28 | if (rest.length > 0) { 29 | tokens.push(rest); 30 | } 31 | return tokens; 32 | }; 33 | 34 | export const escapeRegExpChars = (text) => { 35 | return text.replace(/([.*+?^=!:${}()|[\]/\\])/g, "\\$1"); 36 | }; 37 | -------------------------------------------------------------------------------- /js/webpack.config.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack'); 2 | const path = require('path'); 3 | 4 | module.exports = { 5 | mode: 'production', 6 | output: { 7 | path: path.join(__dirname, '..', 'inst', 'www'), 8 | filename: 'blueprint.min.js', 9 | }, 10 | module: { 11 | rules: [ 12 | { 13 | test: /\.css$/, 14 | use: ['style-loader', 'css-loader'], 15 | }, 16 | ], 17 | }, 18 | externals: { 19 | 'react': 'jsmodule["react"]', 20 | 'react-dom': 'jsmodule["react-dom"]', 21 | '@/shiny.react': 'jsmodule["@/shiny.react"]', 22 | }, 23 | performance: { 24 | maxAssetSize: 2097152, // 2 MiB 25 | maxEntrypointSize: 2097152, // 2 MiB 26 | }, 27 | }; 28 | -------------------------------------------------------------------------------- /man/Alert.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/components.R 3 | \name{Alert} 4 | \alias{Alert} 5 | \title{Alert} 6 | \usage{ 7 | Alert(...) 8 | } 9 | \arguments{ 10 | \item{...}{Component props and children. See the official Blueprint docs for details.} 11 | } 12 | \value{ 13 | Object with \code{shiny.tag} class suitable for use in the UI of a Shiny app. 14 | } 15 | \description{ 16 | Documentation: \url{https://blueprintjs.com/docs/#core/components/alert} 17 | } 18 | \examples{ 19 | library(shiny.blueprint) 20 | library(shiny) 21 | 22 | ui <- function(id) { 23 | ns <- NS(id) 24 | tagList( 25 | Button.shinyInput( 26 | inputId = ns("showAlert"), 27 | "Show alert" 28 | ), 29 | reactOutput(ns("alert")) 30 | ) 31 | } 32 | 33 | server <- function(id) { 34 | moduleServer(id, function(input, output, session) { 35 | ns <- session$ns 36 | 37 | isOpen <- reactiveVal(FALSE) 38 | observeEvent(input$showAlert, isOpen(TRUE)) 39 | observeEvent(input$closeAlert, isOpen(FALSE)) 40 | 41 | output$alert <- renderReact({ 42 | Alert( 43 | usePortal = FALSE, 44 | confirmButtonText = "Got it", 45 | isOpen = isOpen(), 46 | onClose = triggerEvent(ns("closeAlert")), 47 | p("Hello, it's me, your alert") 48 | ) 49 | }) 50 | }) 51 | } 52 | 53 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 54 | } 55 | -------------------------------------------------------------------------------- /man/Breadcrumbs.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/components.R 3 | \name{Breadcrumbs} 4 | \alias{Breadcrumbs} 5 | \title{Breadcrumbs} 6 | \usage{ 7 | Breadcrumbs(...) 8 | } 9 | \arguments{ 10 | \item{...}{Component props and children. See the official Blueprint docs for details.} 11 | } 12 | \value{ 13 | Object with \code{shiny.tag} class suitable for use in the UI of a Shiny app. 14 | } 15 | \description{ 16 | Documentation: \url{https://blueprintjs.com/docs/#core/components/breadcrumbs} 17 | } 18 | \examples{ 19 | library(shiny.blueprint) 20 | library(shiny) 21 | 22 | items <- list( 23 | list(href = "/", icon = "folder-close", text = "Users"), 24 | list(href = "/", icon = "folder-close", text = "Janet"), 25 | list(icon = "document", text = "image.jpg") 26 | ) 27 | 28 | ui <- function(id) { 29 | Breadcrumbs(items = items) 30 | } 31 | 32 | server <- function(id) { 33 | moduleServer(id, function(input, output, session) {}) 34 | } 35 | 36 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 37 | } 38 | -------------------------------------------------------------------------------- /man/Button.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/components.R 3 | \name{Button} 4 | \alias{Button} 5 | \alias{Button.shinyInput} 6 | \alias{AnchorButton} 7 | \alias{AnchorButton.shinyInput} 8 | \title{Button} 9 | \usage{ 10 | Button(...) 11 | 12 | Button.shinyInput(inputId, ...) 13 | 14 | AnchorButton(...) 15 | 16 | AnchorButton.shinyInput(inputId, ...) 17 | } 18 | \arguments{ 19 | \item{...}{Component props and children. See the official Blueprint docs for details.} 20 | 21 | \item{inputId}{The \code{input} slot that will be used to access the value.} 22 | } 23 | \value{ 24 | Object with \code{shiny.tag} class suitable for use in the UI of a Shiny app. 25 | } 26 | \description{ 27 | Documentation: \url{https://blueprintjs.com/docs/#core/components/button} 28 | } 29 | \examples{ 30 | library(shiny.blueprint) 31 | library(shiny) 32 | 33 | ui <- function(id) { 34 | ns <- NS(id) 35 | tagList( 36 | textOutput(ns("clicks")), 37 | Button( 38 | onClick = triggerEvent(ns("click1")), 39 | icon = "refresh", 40 | "Refresh" 41 | ), 42 | Button.shinyInput( 43 | inputId = ns("click2"), 44 | rightIcon = "share", 45 | "Export" 46 | ), 47 | AnchorButton( 48 | onClick = triggerEvent(ns("click3")), 49 | intent = "primary", 50 | "OK" 51 | ), 52 | AnchorButton.shinyInput( 53 | inputId = ns("click4"), 54 | intent = "success", 55 | "Next" 56 | ) 57 | ) 58 | } 59 | 60 | server <- function(id) { 61 | moduleServer(id, function(input, output, session) { 62 | clicks <- reactiveVal(0) 63 | output$clicks <- renderText(paste("Clicks:", clicks())) 64 | observeEvent(input$click1, clicks(clicks() + 1)) 65 | observeEvent(input$click2, clicks(clicks() + 1)) 66 | observeEvent(input$click3, clicks(clicks() + 1)) 67 | observeEvent(input$click4, clicks(clicks() + 1)) 68 | }) 69 | } 70 | 71 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 72 | } 73 | -------------------------------------------------------------------------------- /man/ButtonGroup.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/components.R 3 | \name{ButtonGroup} 4 | \alias{ButtonGroup} 5 | \title{Button group} 6 | \usage{ 7 | ButtonGroup(...) 8 | } 9 | \arguments{ 10 | \item{...}{Component props and children. See the official Blueprint docs for details.} 11 | } 12 | \value{ 13 | Object with \code{shiny.tag} class suitable for use in the UI of a Shiny app. 14 | } 15 | \description{ 16 | Documentation: \url{https://blueprintjs.com/docs/#core/components/button-group} 17 | } 18 | \examples{ 19 | library(shiny.blueprint) 20 | library(shiny) 21 | 22 | ui <- function(id) { 23 | ButtonGroup( 24 | Button(icon = "database", "Queries"), 25 | Button(icon = "function", "Functions"), 26 | AnchorButton(rightIcon = "caret-down", "Options") 27 | ) 28 | } 29 | 30 | server <- function(id) { 31 | moduleServer(id, function(input, output, session) {}) 32 | } 33 | 34 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 35 | } 36 | -------------------------------------------------------------------------------- /man/Callout.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/components.R 3 | \name{Callout} 4 | \alias{Callout} 5 | \title{Callout} 6 | \usage{ 7 | Callout(...) 8 | } 9 | \arguments{ 10 | \item{...}{Component props and children. See the official Blueprint docs for details.} 11 | } 12 | \value{ 13 | Object with \code{shiny.tag} class suitable for use in the UI of a Shiny app. 14 | } 15 | \description{ 16 | Documentation: \url{https://blueprintjs.com/docs/#core/components/callout} 17 | } 18 | \examples{ 19 | library(shiny.blueprint) 20 | library(shiny) 21 | 22 | ui <- function(id) { 23 | Callout( 24 | title = "Visually important content", 25 | "The component is a simple wrapper around the CSS API", 26 | " that provides props for modifiers and optional title element.", 27 | " Any additional HTML props will be spread to the rendered ", Code("div"), " element." 28 | ) 29 | } 30 | 31 | server <- function(id) { 32 | moduleServer(id, function(input, output, session) {}) 33 | } 34 | 35 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 36 | } 37 | -------------------------------------------------------------------------------- /man/Card.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/components.R 3 | \name{Card} 4 | \alias{Card} 5 | \title{Card} 6 | \usage{ 7 | Card(...) 8 | } 9 | \arguments{ 10 | \item{...}{Component props and children. See the official Blueprint docs for details.} 11 | } 12 | \value{ 13 | Object with \code{shiny.tag} class suitable for use in the UI of a Shiny app. 14 | } 15 | \description{ 16 | Documentation: \url{https://blueprintjs.com/docs/#core/components/card} 17 | } 18 | \examples{ 19 | library(shiny.blueprint) 20 | library(shiny) 21 | 22 | ui <- function(id) { 23 | Card( 24 | interactive = TRUE, 25 | H5(tags$a(href = "#", "Analytical applications")), 26 | tags$p( 27 | "User interfaces that enable people to interact smoothly with data,", 28 | " ask better questions, and make better decisions." 29 | ), 30 | Button(text = "Explore products") 31 | ) 32 | } 33 | 34 | server <- function(id) { 35 | moduleServer(id, function(input, output, session) {}) 36 | } 37 | 38 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 39 | } 40 | -------------------------------------------------------------------------------- /man/Checkbox.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/components.R 3 | \name{Checkbox} 4 | \alias{Checkbox} 5 | \alias{Checkbox.shinyInput} 6 | \title{Checkbox} 7 | \usage{ 8 | Checkbox(...) 9 | 10 | Checkbox.shinyInput(inputId, ..., value = defaultValue) 11 | } 12 | \arguments{ 13 | \item{...}{Component props and children. See the official Blueprint docs for details.} 14 | 15 | \item{inputId}{The \code{input} slot that will be used to access the value.} 16 | 17 | \item{value}{Initial value.} 18 | } 19 | \value{ 20 | Object with \code{shiny.tag} class suitable for use in the UI of a Shiny app. 21 | } 22 | \description{ 23 | Documentation: \url{https://blueprintjs.com/docs/#core/components/checkbox} 24 | } 25 | \examples{ 26 | library(shiny.blueprint) 27 | library(shiny) 28 | 29 | setInput <- function(inputId, accessor = NULL) { 30 | JS(paste0("x => Shiny.setInputValue('", inputId, "', x", accessor, ")")) 31 | } 32 | 33 | ui <- function(id) { 34 | ns <- NS(id) 35 | tagList( 36 | Checkbox( 37 | onChange = setInput(ns("apples"), ".target.checked"), 38 | defaultChecked = TRUE, 39 | label = "Apples" 40 | ), 41 | Checkbox.shinyInput( 42 | inputId = ns("bananas"), 43 | value = TRUE, 44 | label = "Bananas" 45 | ), 46 | textOutput(ns("applesEnabled")), 47 | textOutput(ns("bananasEnabled")) 48 | ) 49 | } 50 | 51 | server <- function(id) { 52 | moduleServer(id, function(input, output, session) { 53 | output$applesEnabled <- renderText(paste("Apples:", deparse(input$apples))) 54 | output$bananasEnabled <- renderText(paste("Bananas:", deparse(input$bananas))) 55 | }) 56 | } 57 | 58 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 59 | } 60 | -------------------------------------------------------------------------------- /man/Collapse.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/components.R 3 | \name{Collapse} 4 | \alias{Collapse} 5 | \title{Collapse} 6 | \usage{ 7 | Collapse(...) 8 | } 9 | \arguments{ 10 | \item{...}{Component props and children. See the official Blueprint docs for details.} 11 | } 12 | \value{ 13 | Object with \code{shiny.tag} class suitable for use in the UI of a Shiny app. 14 | } 15 | \description{ 16 | Documentation: \url{https://blueprintjs.com/docs/#core/components/collapse} 17 | } 18 | \examples{ 19 | library(shiny.blueprint) 20 | library(shiny) 21 | 22 | logs <- Pre( 23 | "[11:53:30] Finished 'typescript-bundle-blueprint' after 769 ms\n", 24 | "[11:53:30] Starting 'typescript-typings-blueprint'...\n", 25 | "[11:53:30] Finished 'typescript-typings-blueprint' after 198 ms\n", 26 | "[11:53:30] write ./blueprint.css\n", 27 | "[11:53:30] Finished 'sass-compile-blueprint' after 2.84 s\n" 28 | ) 29 | 30 | ui <- function(id) { 31 | ns <- NS(id) 32 | tagList( 33 | Button.shinyInput(ns("toggle"), "Toggle logs"), 34 | reactOutput(ns("ui")) 35 | ) 36 | } 37 | 38 | server <- function(id) { 39 | moduleServer(id, function(input, output, session) { 40 | show <- reactiveVal(FALSE) 41 | observeEvent(input$toggle, show(!show())) 42 | output$ui <- renderReact({ 43 | Collapse(isOpen = show(), logs) 44 | }) 45 | }) 46 | } 47 | 48 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 49 | } 50 | -------------------------------------------------------------------------------- /man/ControlGroup.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/components.R 3 | \name{ControlGroup} 4 | \alias{ControlGroup} 5 | \title{Control group} 6 | \usage{ 7 | ControlGroup(...) 8 | } 9 | \arguments{ 10 | \item{...}{Component props and children. See the official Blueprint docs for details.} 11 | } 12 | \value{ 13 | Object with \code{shiny.tag} class suitable for use in the UI of a Shiny app. 14 | } 15 | \description{ 16 | Documentation: \url{https://blueprintjs.com/docs/#core/components/control-group} 17 | } 18 | \examples{ 19 | library(shiny.blueprint) 20 | library(shiny) 21 | 22 | ui <- function(id) { 23 | ControlGroup( 24 | HTMLSelect(options = rownames(mtcars)), 25 | InputGroup(placeholder = "Find car..."), 26 | Button(icon = "arrow-right"), 27 | ) 28 | } 29 | 30 | server <- function(id) { 31 | moduleServer(id, function(input, output, session) {}) 32 | } 33 | 34 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 35 | } 36 | -------------------------------------------------------------------------------- /man/Dialog.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/components.R 3 | \name{Dialog} 4 | \alias{Dialog} 5 | \title{Dialog} 6 | \usage{ 7 | Dialog(...) 8 | } 9 | \arguments{ 10 | \item{...}{Component props and children. See the official Blueprint docs for details.} 11 | } 12 | \value{ 13 | Object with \code{shiny.tag} class suitable for use in the UI of a Shiny app. 14 | } 15 | \description{ 16 | Documentation: \url{https://blueprintjs.com/docs/#core/components/dialog.dialog} 17 | } 18 | \examples{ 19 | library(shiny.blueprint) 20 | library(shiny) 21 | 22 | ui <- function(id) { 23 | ns <- NS(id) 24 | tagList( 25 | Button.shinyInput( 26 | inputId = ns("showDialog"), 27 | "Show dialog" 28 | ), 29 | reactOutput(ns("dialog")) 30 | ) 31 | } 32 | 33 | server <- function(id) { 34 | moduleServer(id, function(input, output, session) { 35 | ns <- session$ns 36 | 37 | isOpen <- reactiveVal(FALSE) 38 | observeEvent(input$showDialog, isOpen(TRUE)) 39 | observeEvent(input$closeDialog, isOpen(FALSE)) 40 | 41 | output$dialog <- renderReact({ 42 | Dialog( 43 | usePortal = FALSE, 44 | isOpen = isOpen(), 45 | onClose = triggerEvent(ns("closeDialog")), 46 | div( 47 | className = "bp5-dialog-body", 48 | H5("Analytical applications"), 49 | tags$p( 50 | "User interfaces that enable people to interact smoothly with data,", 51 | " ask better questions, and make better decisions." 52 | ), 53 | Button.shinyInput( 54 | inputId = ns("closeDialog"), 55 | "Close" 56 | ) 57 | ) 58 | ) 59 | }) 60 | }) 61 | } 62 | 63 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 64 | } 65 | -------------------------------------------------------------------------------- /man/Divider.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/components.R 3 | \name{Divider} 4 | \alias{Divider} 5 | \title{Divider} 6 | \usage{ 7 | Divider(...) 8 | } 9 | \arguments{ 10 | \item{...}{Component props and children. See the official Blueprint docs for details.} 11 | } 12 | \value{ 13 | Object with \code{shiny.tag} class suitable for use in the UI of a Shiny app. 14 | } 15 | \description{ 16 | Documentation: \url{https://blueprintjs.com/docs/#core/components/divider} 17 | } 18 | \examples{ 19 | library(shiny.blueprint) 20 | library(shiny) 21 | 22 | ui <- function(id) { 23 | ButtonGroup( 24 | minimal = TRUE, 25 | Button(text = "File"), 26 | Button(text = "Edit"), 27 | Divider(), 28 | Button(text = "Create"), 29 | Button(text = "Delete"), 30 | Divider(), 31 | Button(icon = "add"), 32 | Button(icon = "remove") 33 | ) 34 | } 35 | 36 | server <- function(id) { 37 | moduleServer(id, function(input, output, session) {}) 38 | } 39 | 40 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 41 | } 42 | -------------------------------------------------------------------------------- /man/Drawer.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/components.R 3 | \name{Drawer} 4 | \alias{Drawer} 5 | \title{Drawer} 6 | \usage{ 7 | Drawer(...) 8 | } 9 | \arguments{ 10 | \item{...}{Component props and children. See the official Blueprint docs for details.} 11 | } 12 | \value{ 13 | Object with \code{shiny.tag} class suitable for use in the UI of a Shiny app. 14 | } 15 | \description{ 16 | Documentation: \url{https://blueprintjs.com/docs/#core/components/drawer} 17 | } 18 | \examples{ 19 | library(shiny.blueprint) 20 | library(shiny) 21 | 22 | ui <- function(id) { 23 | ns <- NS(id) 24 | tagList( 25 | Button.shinyInput(ns("hello"), "Say Hello", intent = "primary"), 26 | reactOutput(ns("ui")) 27 | ) 28 | } 29 | 30 | server <- function(id) { 31 | moduleServer(id, function(input, output, session) { 32 | ns <- session$ns 33 | 34 | isOpen <- reactiveVal(FALSE) 35 | observeEvent(input$hello, isOpen(!isOpen())) 36 | observeEvent(input$dismissDrawer, isOpen(FALSE)) 37 | 38 | output$ui <- renderReact({ 39 | Drawer( 40 | isOpen = isOpen(), 41 | onClose = triggerEvent(ns("dismissDrawer")), 42 | usePortal = FALSE, 43 | title = "Hello", 44 | icon = "info-sign", 45 | div( 46 | class = "bp5-dialog-body", 47 | p("Lorem Ipsum is simply dummy text of the printing and typesetting industry.") 48 | ) 49 | ) 50 | }) 51 | }) 52 | } 53 | 54 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 55 | } 56 | -------------------------------------------------------------------------------- /man/EditableText.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/components.R 3 | \name{EditableText} 4 | \alias{EditableText} 5 | \alias{EditableText.shinyInput} 6 | \title{Editable text} 7 | \usage{ 8 | EditableText(...) 9 | 10 | EditableText.shinyInput(inputId, ..., value = defaultValue) 11 | } 12 | \arguments{ 13 | \item{...}{Component props and children. See the official Blueprint docs for details.} 14 | 15 | \item{inputId}{The \code{input} slot that will be used to access the value.} 16 | 17 | \item{value}{Initial value.} 18 | } 19 | \value{ 20 | Object with \code{shiny.tag} class suitable for use in the UI of a Shiny app. 21 | } 22 | \description{ 23 | Documentation: \url{https://blueprintjs.com/docs/#core/components/editable-text} 24 | } 25 | \examples{ 26 | library(shiny.blueprint) 27 | library(shiny) 28 | 29 | ui <- function(id) { 30 | ns <- NS(id) 31 | tagList( 32 | H2(EditableText(onChange = setInput(ns("header")))), 33 | EditableText.shinyInput( 34 | inputId = ns("body"), 35 | multiline = TRUE, 36 | minLines = 3, maxLines = 12 37 | ), 38 | textOutput(ns("headerValue")), 39 | textOutput(ns("bodyValue")) 40 | ) 41 | } 42 | 43 | server <- function(id) { 44 | moduleServer(id, function(input, output, session) { 45 | output$headerValue <- renderText(paste("Header:", deparse(input$header))) 46 | output$bodyValue <- renderText(paste("Body:", deparse(input$body))) 47 | }) 48 | } 49 | 50 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 51 | } 52 | -------------------------------------------------------------------------------- /man/FileInput.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/components.R 3 | \name{FileInput} 4 | \alias{FileInput} 5 | \alias{FileInput.shinyInput} 6 | \title{FileInput} 7 | \usage{ 8 | FileInput(...) 9 | 10 | FileInput.shinyInput(inputId, ..., value = defaultValue) 11 | } 12 | \arguments{ 13 | \item{...}{Component props and children. See the official Blueprint docs for details.} 14 | 15 | \item{inputId}{The \code{input} slot that will be used to access the value.} 16 | 17 | \item{value}{Initial value.} 18 | } 19 | \value{ 20 | Object with \code{shiny.tag} class suitable for use in the UI of a Shiny app. 21 | } 22 | \description{ 23 | Documentation: \url{https://blueprintjs.com/docs/#core/components/file-input} 24 | } 25 | \examples{ 26 | library(shiny.blueprint) 27 | library(shiny) 28 | 29 | setInput <- function(inputId, accessor = NULL) { 30 | JS(paste0("x => Shiny.setInputValue('", inputId, "', x", accessor, ")")) 31 | } 32 | 33 | ui <- function(id) { 34 | ns <- NS(id) 35 | tagList( 36 | Switch( 37 | onChange = setInput(ns("apples"), ".target.checked"), 38 | defaultChecked = TRUE, 39 | label = "Apples" 40 | ), 41 | Switch.shinyInput( 42 | inputId = ns("bananas"), 43 | value = TRUE, 44 | label = "Bananas" 45 | ), 46 | textOutput(ns("applesEnabled")), 47 | textOutput(ns("bananasEnabled")) 48 | ) 49 | } 50 | 51 | server <- function(id) { 52 | moduleServer(id, function(input, output, session) { 53 | output$applesEnabled <- renderText(paste("Apples:", deparse(input$apples))) 54 | output$bananasEnabled <- renderText(paste("Bananas:", deparse(input$bananas))) 55 | }) 56 | } 57 | 58 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 59 | } 60 | -------------------------------------------------------------------------------- /man/FormGroup.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/components.R 3 | \name{FormGroup} 4 | \alias{FormGroup} 5 | \title{Form group} 6 | \usage{ 7 | FormGroup(...) 8 | } 9 | \arguments{ 10 | \item{...}{Component props and children. See the official Blueprint docs for details.} 11 | } 12 | \value{ 13 | Object with \code{shiny.tag} class suitable for use in the UI of a Shiny app. 14 | } 15 | \description{ 16 | Documentation: \url{https://blueprintjs.com/docs/#core/components/form-group} 17 | } 18 | \examples{ 19 | library(shiny.blueprint) 20 | library(shiny) 21 | 22 | ui <- function(id) { 23 | FormGroup( 24 | helperText = "Helper text with details...", 25 | label = "Label A", 26 | labelFor = "my-button", 27 | labelInfo = "(required)", 28 | inline = TRUE, 29 | Switch( 30 | defaultChecked = TRUE, 31 | label = "Apples" 32 | ), 33 | Switch( 34 | defaultChecked = TRUE, 35 | label = "Bananas" 36 | ) 37 | ) 38 | } 39 | 40 | server <- function(id) { 41 | moduleServer(id, function(input, output, session) {}) 42 | } 43 | 44 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 45 | } 46 | -------------------------------------------------------------------------------- /man/HTMLSelect.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/components.R 3 | \name{HTMLSelect} 4 | \alias{HTMLSelect} 5 | \alias{HTMLSelect.shinyInput} 6 | \title{HTML select} 7 | \usage{ 8 | HTMLSelect(...) 9 | 10 | HTMLSelect.shinyInput(inputId, ..., value = defaultValue) 11 | } 12 | \arguments{ 13 | \item{...}{Component props and children. See the official Blueprint docs for details.} 14 | 15 | \item{inputId}{The \code{input} slot that will be used to access the value.} 16 | 17 | \item{value}{Initial value.} 18 | } 19 | \value{ 20 | Object with \code{shiny.tag} class suitable for use in the UI of a Shiny app. 21 | } 22 | \description{ 23 | Documentation: \url{https://blueprintjs.com/docs/#core/components/html-select} 24 | } 25 | \examples{ 26 | library(shiny.blueprint) 27 | library(shiny) 28 | 29 | setInput <- function(inputId, accessor = NULL) { 30 | JS(paste0("x => Shiny.setInputValue('", inputId, "', x", accessor, ")")) 31 | } 32 | 33 | options <- list( 34 | list(value = "a", label = "Apples"), 35 | list(value = "b", label = "Bananas"), 36 | list(value = "c", label = "Cherries") 37 | ) 38 | 39 | ui <- function(id) { 40 | ns <- NS(id) 41 | tagList( 42 | HTMLSelect( 43 | onChange = setInput(ns("choice1"), ".target.value"), 44 | options = options 45 | ), 46 | textOutput(ns("text1")), 47 | br(), 48 | HTMLSelect.shinyInput( 49 | inputId = ns("choice2"), 50 | value = "b", 51 | options = options 52 | ), 53 | textOutput(ns("text2")) 54 | ) 55 | } 56 | 57 | server <- function(id) { 58 | moduleServer(id, function(input, output, session) { 59 | output$text1 <- renderText(deparse(input$choice1)) 60 | output$text2 <- renderText(deparse(input$choice2)) 61 | }) 62 | } 63 | 64 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 65 | } 66 | -------------------------------------------------------------------------------- /man/HTMLTable.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/components.R 3 | \name{HTMLTable} 4 | \alias{HTMLTable} 5 | \title{HTML table} 6 | \usage{ 7 | HTMLTable(...) 8 | } 9 | \arguments{ 10 | \item{...}{Component props and children. See the official Blueprint docs for details.} 11 | } 12 | \value{ 13 | Object with \code{shiny.tag} class suitable for use in the UI of a Shiny app. 14 | } 15 | \description{ 16 | Documentation: \url{https://blueprintjs.com/docs/#core/components/html-table} 17 | } 18 | \examples{ 19 | library(shiny.blueprint) 20 | library(shiny) 21 | 22 | ui <- function(id) { 23 | HTMLTable( 24 | tags$thead( 25 | tags$tr(tags$th("Project"), tags$th("Stack"), tags$th("Contributors")) 26 | ), 27 | tags$tbody( 28 | tags$tr(tags$td("Blueprint"), tags$td("JS React"), tags$td("268")), 29 | tags$tr(tags$td("TS"), tags$td("JSX"), tags$td("68")), 30 | tags$tr(tags$td("shiny.blueprint"), tags$td("R JS"), tags$td("2")) 31 | ), 32 | tags$tfoot( 33 | tags$tr(tags$td("Total", colSpan = 2), tags$td("1508")) 34 | ) 35 | ) 36 | } 37 | 38 | server <- function(id) { 39 | moduleServer(id, function(input, output, session) {}) 40 | } 41 | 42 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 43 | } 44 | \seealso{ 45 | Other HTML elements: 46 | \code{\link{Label}()}, 47 | \code{\link{htmlElements}} 48 | } 49 | \concept{HTML elements} 50 | -------------------------------------------------------------------------------- /man/Icon.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/components.R 3 | \name{Icon} 4 | \alias{Icon} 5 | \title{Icon} 6 | \usage{ 7 | Icon(...) 8 | } 9 | \arguments{ 10 | \item{...}{Component props and children. See the official Blueprint docs for details.} 11 | } 12 | \value{ 13 | Object with \code{shiny.tag} class suitable for use in the UI of a Shiny app. 14 | } 15 | \description{ 16 | Documentation: \url{https://blueprintjs.com/docs/#core/components/icon} 17 | } 18 | \details{ 19 | A list of available icons: \url{https://blueprintjs.com/docs/#icons} 20 | } 21 | \examples{ 22 | library(shiny.blueprint) 23 | library(shiny) 24 | 25 | ui <- function(id) { 26 | tagList( 27 | Icon(icon = "cross"), 28 | Icon(icon = "globe", size = 20), 29 | ) 30 | } 31 | 32 | server <- function(id) { 33 | moduleServer(id, function(input, output, session) {}) 34 | } 35 | 36 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 37 | } 38 | -------------------------------------------------------------------------------- /man/InputGroup.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/components.R 3 | \name{InputGroup} 4 | \alias{InputGroup} 5 | \alias{InputGroup.shinyInput} 6 | \alias{TextArea.shinyInput} 7 | \title{Input group} 8 | \usage{ 9 | InputGroup(...) 10 | 11 | InputGroup.shinyInput(inputId, ..., value = defaultValue) 12 | 13 | TextArea.shinyInput(inputId, ..., value = defaultValue) 14 | } 15 | \arguments{ 16 | \item{...}{Component props and children. See the official Blueprint docs for details.} 17 | 18 | \item{inputId}{The \code{input} slot that will be used to access the value.} 19 | 20 | \item{value}{Initial value.} 21 | } 22 | \value{ 23 | Object with \code{shiny.tag} class suitable for use in the UI of a Shiny app. 24 | } 25 | \description{ 26 | Documentation: \url{https://blueprintjs.com/docs/#core/components/text-inputs.input-group} 27 | } 28 | \examples{ 29 | library(shiny.blueprint) 30 | library(shiny) 31 | 32 | setInput <- function(inputId, accessor = NULL) { 33 | JS(paste0("x => Shiny.setInputValue('", inputId, "', x", accessor, ")")) 34 | } 35 | 36 | ui <- function(id) { 37 | ns <- NS(id) 38 | div( 39 | style = "width: 20rem; display: grid; row-gap: 0.5rem", 40 | H4("Uncontrolled"), 41 | InputGroup( 42 | onChange = setInput(ns("uncontrolledInputGroup"), ".target.value"), 43 | disabled = FALSE, 44 | large = TRUE, 45 | leftIcon = "filter", 46 | placeholder = "Filter histogram...", 47 | rightElement = Spinner(intent = "primary", size = 20) 48 | ), 49 | textOutput(ns("uncontrolledInputGroupOutput")), 50 | H4("Controlled"), 51 | InputGroup.shinyInput( 52 | inputId = ns("controlledInputGroup"), 53 | disabled = FALSE, 54 | large = FALSE, 55 | leftIcon = "home", 56 | placeholder = "Type something..." 57 | ), 58 | textOutput(ns("controlledInputGroupOutput")), 59 | reactOutput(ns("passwordExample")), 60 | textOutput(ns("passwordOutput")) 61 | ) 62 | } 63 | 64 | server <- function(id) { 65 | moduleServer(id, function(input, output, session) { 66 | ns <- session$ns 67 | 68 | output$uncontrolledInputGroupOutput <- renderText(input$uncontrolledInputGroup) 69 | output$controlledInputGroupOutput <- renderText(input$controlledInputGroup) 70 | 71 | isLocked <- reactiveVal(TRUE) 72 | 73 | observeEvent(input$toggleLock, isLocked(!isLocked())) 74 | output$passwordOutput <- renderText(input$passwordInput) 75 | 76 | output$passwordExample <- renderReact({ 77 | lockButton <- Button.shinyInput( 78 | inputId = ns("toggleLock"), 79 | icon = ifelse(isLocked(), "lock", "unlock"), 80 | minimal = TRUE, 81 | intent = "warning" 82 | ) 83 | InputGroup.shinyInput( 84 | inputId = ns("passwordInput"), 85 | disabled = FALSE, 86 | large = FALSE, 87 | rightElement = lockButton, 88 | placeholder = "Enter your password...", 89 | type = ifelse(isLocked(), "password", "text") 90 | ) 91 | }) 92 | }) 93 | } 94 | 95 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 96 | } 97 | -------------------------------------------------------------------------------- /man/Label.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/components.R 3 | \name{Label} 4 | \alias{Label} 5 | \title{Label} 6 | \usage{ 7 | Label(...) 8 | } 9 | \arguments{ 10 | \item{...}{Component props and children. See the official Blueprint docs for details.} 11 | } 12 | \value{ 13 | Object with \code{shiny.tag} class suitable for use in the UI of a Shiny app. 14 | } 15 | \description{ 16 | Documentation: \url{https://blueprintjs.com/docs/#core/components/label} 17 | } 18 | \examples{ 19 | library(shiny.blueprint) 20 | library(shiny) 21 | 22 | ui <- function(id) { 23 | Label( 24 | "Label", 25 | tags$input(class = "bp5-input") 26 | ) 27 | } 28 | 29 | server <- function(id) { 30 | moduleServer(id, function(input, output, session) {}) 31 | } 32 | 33 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 34 | } 35 | \seealso{ 36 | Other HTML elements: 37 | \code{\link{HTMLTable}()}, 38 | \code{\link{htmlElements}} 39 | } 40 | \concept{HTML elements} 41 | -------------------------------------------------------------------------------- /man/Menu.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/components.R 3 | \name{Menu} 4 | \alias{Menu} 5 | \alias{MenuItem} 6 | \alias{MenuDivider} 7 | \title{Menu} 8 | \usage{ 9 | Menu(...) 10 | 11 | MenuItem(...) 12 | 13 | MenuDivider(...) 14 | } 15 | \arguments{ 16 | \item{...}{Component props and children. See the official Blueprint docs for details.} 17 | } 18 | \value{ 19 | Object with \code{shiny.tag} class suitable for use in the UI of a Shiny app. 20 | } 21 | \description{ 22 | Documentation: \url{https://blueprintjs.com/docs/#core/components/menu} 23 | } 24 | \examples{ 25 | library(shiny.blueprint) 26 | library(shiny) 27 | 28 | ui <- function(id) { 29 | Menu( 30 | style = "max-width: 200px", 31 | className = "bp5-elevation-1", 32 | MenuDivider(title = "Edit"), 33 | MenuItem(icon = "cut", text = "Cut", label = "^X"), 34 | MenuItem(icon = "duplicate", text = "Copy", label = "^C"), 35 | MenuItem(icon = "clipboard", text = "Paste", label = "^V", disabled = TRUE), 36 | MenuDivider(title = "Text"), 37 | MenuItem( 38 | icon = "style", text = "Style", 39 | MenuItem(icon = "bold", text = "Bold"), 40 | MenuItem(icon = "italic", text = "Italic"), 41 | MenuItem(icon = "underline", text = "Underline") 42 | ), 43 | MenuItem( 44 | icon = "asterisk", text = "Miscellaneous", 45 | MenuItem(icon = "badge", text = "Badge"), 46 | MenuItem(icon = "book", text = "Long items will truncate when they reach max-width"), 47 | MenuItem( 48 | icon = "more", text = "Look in here for even more items", 49 | MenuItem(icon = "briefcase", text = "Briefcase"), 50 | MenuItem(icon = "calculator", text = "Calculator"), 51 | MenuItem(icon = "dollar", text = "Dollar"), 52 | MenuItem( 53 | icon = "dot", text = "Shapes", 54 | MenuItem(icon = "full-circle", text = "Full circle"), 55 | MenuItem(icon = "heart", text = "Heart"), 56 | MenuItem(icon = "ring", text = "Ring"), 57 | MenuItem(icon = "square", text = "Square") 58 | ) 59 | ) 60 | ), 61 | MenuDivider(), 62 | MenuItem( 63 | icon = "cog", labelElement = Icon(icon = "share"), 64 | text = "Settings...", intent = "primary" 65 | ) 66 | ) 67 | } 68 | 69 | server <- function(id) { 70 | moduleServer(id, function(input, output, session) {}) 71 | } 72 | 73 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 74 | } 75 | -------------------------------------------------------------------------------- /man/MultiSelect.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/components.R 3 | \name{MultiSelect} 4 | \alias{MultiSelect} 5 | \alias{MultiSelect.shinyInput} 6 | \title{MultiSelect} 7 | \usage{ 8 | MultiSelect(...) 9 | 10 | MultiSelect.shinyInput( 11 | inputId, 12 | items, 13 | selected = NULL, 14 | ..., 15 | noResults = "No results." 16 | ) 17 | } 18 | \arguments{ 19 | \item{...}{Component props and children. See the official Blueprint docs for details.} 20 | 21 | \item{inputId}{The \code{input} slot that will be used to access the value.} 22 | 23 | \item{items}{A list of options (character vector or list containing \code{text} and \code{label} entries)} 24 | 25 | \item{selected}{Initialy selected item} 26 | 27 | \item{noResults}{Message when no results were found} 28 | } 29 | \value{ 30 | Object with \code{shiny.tag} class suitable for use in the UI of a Shiny app. 31 | } 32 | \description{ 33 | Documentation: \url{https://blueprintjs.com/docs/#select/multi-select2} 34 | } 35 | \examples{ 36 | library(shiny) 37 | library(shiny.blueprint) 38 | 39 | top5Films <- list( 40 | list(text = "The Shawshank Redemption", label = 1994), 41 | list(text = "The Godfather", label = 1972), 42 | list(text = "The Godfather: Part II", label = 1974), 43 | list(text = "The Dark Knight", label = 2008), 44 | list(text = "12 Angry Men", label = 1957) 45 | ) 46 | 47 | ui <- function(id) { 48 | ns <- NS(id) 49 | tagList( 50 | H3("Multiselect"), 51 | MultiSelect.shinyInput( 52 | inputId = ns("multiselect"), 53 | items = paste("Option", LETTERS), 54 | selected = c("Option B", "Option E"), 55 | tagInputProps = list( 56 | tagProps = list( 57 | intent = "danger" 58 | ) 59 | ) 60 | ), 61 | uiOutput(ns("multiselect_output")), 62 | H3("Multiselect with labels"), 63 | MultiSelect.shinyInput( 64 | inputId = ns("multiselect_lab"), 65 | items = top5Films, 66 | selected = c("12 Angry Men", "The Godfather") 67 | ), 68 | uiOutput(ns("multiselect_lab_output")) 69 | ) 70 | } 71 | 72 | server <- function(id) { 73 | moduleServer(id, function(input, output, session) { 74 | output$multiselect_output <- renderText({ 75 | paste( 76 | purrr::map_chr(input$multiselect[[1]], ~ .x$text), 77 | collapse = ", " 78 | ) 79 | }) 80 | 81 | output$multiselect_lab_output <- renderText({ 82 | paste( 83 | purrr::map_chr(input$multiselect_lab[[1]], ~ .x$text), 84 | collapse = ", " 85 | ) 86 | }) 87 | }) 88 | } 89 | 90 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 91 | } 92 | -------------------------------------------------------------------------------- /man/MultiSlider.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/components.R 3 | \name{MultiSlider} 4 | \alias{MultiSlider} 5 | \alias{MultiSlider.shinyInput} 6 | \alias{MultiSliderHandle} 7 | \title{Multi slider} 8 | \usage{ 9 | MultiSlider(...) 10 | 11 | MultiSlider.shinyInput(inputId, values, min = NULL, max = NULL, ...) 12 | 13 | MultiSliderHandle(...) 14 | } 15 | \arguments{ 16 | \item{...}{Component props and children. See the official Blueprint docs for details.} 17 | 18 | \item{inputId}{The \code{input} slot that will be used to access the value.} 19 | 20 | \item{values}{Numeric vector or list containing \code{value} and other params passed 21 | to \code{MultiSliderHandle}} 22 | 23 | \item{min}{Minimal value of the slider} 24 | 25 | \item{max}{Maximum value of the slider} 26 | } 27 | \value{ 28 | Object with \code{shiny.tag} class suitable for use in the UI of a Shiny app. 29 | } 30 | \description{ 31 | Documentation: \url{https://blueprintjs.com/docs/#core/components/sliders.multi-slider} 32 | } 33 | \examples{ 34 | library(shiny) 35 | library(shiny.blueprint) 36 | 37 | ui <- function(id) { 38 | ns <- NS(id) 39 | tagList( 40 | reactOutput(ns("multiSlider")), 41 | textOutput(ns("multiSliderOutput")), 42 | MultiSlider.shinyInput( 43 | inputId = ns("multiSliderShiny"), 44 | values = c(3, 6, 9) 45 | ), 46 | textOutput(ns("multiSliderShinyOutput")), 47 | MultiSlider.shinyInput( 48 | inputId = ns("multiSliderShiny2"), 49 | values = list( 50 | list(value = 3, type = "start", intentBefore = "danger"), 51 | list(value = 8, type = "start", intentBefore = "warning"), 52 | list(value = 14, type = "end", intentAfter = "warning"), 53 | list(value = 17, type = "end", intentAfter = "warning") 54 | ), 55 | min = 0, 56 | max = 20, 57 | defaultTrackIntent = "success" 58 | ), 59 | textOutput(ns("multiSliderShinyOutput2")), 60 | ) 61 | } 62 | 63 | server <- function(id) { 64 | moduleServer(id, function(input, output, session) { 65 | ns <- session$ns 66 | 67 | thresholds <- reactiveValues( 68 | dangerStart = 3, 69 | warningStart = 8, 70 | warningEnd = 14, 71 | dangerEnd = 17 72 | ) 73 | 74 | observeEvent(input$mutliSliderInput, { 75 | sliderValues <- sort(input$mutliSliderInput) 76 | thresholds$dangerStart <- sliderValues[1] 77 | thresholds$warningStart <- sliderValues[2] 78 | thresholds$warningEnd <- sliderValues[3] 79 | thresholds$dangerEnd <- sliderValues[4] 80 | }) 81 | 82 | output$multiSlider <- renderReact({ 83 | MultiSlider( 84 | defaultTrackIntent = "success", 85 | onChange = setInput(ns("mutliSliderInput")), 86 | stepSize = 1, 87 | min = 0, 88 | max = 20, 89 | MultiSliderHandle( 90 | type = "start", 91 | intentBefore = "danger", 92 | value = thresholds$dangerStart, 93 | interactionKind = "push" 94 | ), 95 | MultiSliderHandle( 96 | type = "start", 97 | intentBefore = "warning", 98 | value = thresholds$warningStart, 99 | interactionKind = "push" 100 | ), 101 | MultiSliderHandle( 102 | type = "end", 103 | intentAfter = "warning", 104 | value = thresholds$warningEnd, 105 | interactionKind = "push" 106 | ), 107 | MultiSliderHandle( 108 | type = "end", 109 | intentAfter = "danger", 110 | value = thresholds$dangerEnd, 111 | interactionKind = "push" 112 | ) 113 | ) 114 | }) 115 | output$multiSliderOutput <- renderText( 116 | paste( 117 | thresholds$dangerStart, 118 | thresholds$warningStart, 119 | thresholds$warningEnd, 120 | thresholds$dangerEnd, 121 | sep = ", " 122 | ) 123 | ) 124 | output$multiSliderShinyOutput <- renderText( 125 | paste(input$multiSliderShiny, collapse = ", ") 126 | ) 127 | output$multiSliderShinyOutput2 <- renderText( 128 | paste(input$multiSliderShiny2, collapse = ", ") 129 | ) 130 | }) 131 | } 132 | 133 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 134 | } 135 | -------------------------------------------------------------------------------- /man/MultistepDialog.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/components.R 3 | \name{MultistepDialog} 4 | \alias{MultistepDialog} 5 | \alias{DialogStep} 6 | \title{Multistep dialog} 7 | \usage{ 8 | MultistepDialog(...) 9 | 10 | DialogStep(...) 11 | } 12 | \arguments{ 13 | \item{...}{Component props and children. See the official Blueprint docs for details.} 14 | } 15 | \value{ 16 | Object with \code{shiny.tag} class suitable for use in the UI of a Shiny app. 17 | } 18 | \description{ 19 | Documentation: \url{https://blueprintjs.com/docs/#core/components/dialog.multistep-dialog} 20 | } 21 | \examples{ 22 | library(shiny.blueprint) 23 | library(shiny) 24 | 25 | ui <- function(id) { 26 | ns <- NS(id) 27 | tagList( 28 | Button.shinyInput( 29 | inputId = ns("showMultistepDialog"), 30 | "Show multistep dialog" 31 | ), 32 | reactOutput(ns("multistepDialog")) 33 | ) 34 | } 35 | 36 | server <- function(id) { 37 | moduleServer(id, function(input, output, session) { 38 | ns <- session$ns 39 | 40 | isOpen <- reactiveVal(FALSE) 41 | observeEvent(input$showMultistepDialog, isOpen(TRUE)) 42 | observeEvent(input$closeMultistepDialog, isOpen(FALSE)) 43 | 44 | output$multistepDialog <- renderReact({ 45 | MultistepDialog( 46 | usePortal = FALSE, 47 | isOpen = isOpen(), 48 | title = "Multistep dialog", 49 | onClose = triggerEvent(ns("closeMultistepDialog")), 50 | DialogStep( 51 | id = "step1", 52 | panel = div( 53 | className = "bp5-dialog-body", 54 | p("This is a step 1") 55 | ), 56 | title = "Step 1" 57 | ), 58 | DialogStep( 59 | id = "step2", 60 | panel = div( 61 | className = "bp5-dialog-body", 62 | p("This is a step 2") 63 | ), 64 | title = "Step 2" 65 | ), 66 | DialogStep( 67 | id = "step3", 68 | panel = div( 69 | className = "bp5-dialog-body", 70 | p("This is a step 3") 71 | ), 72 | title = "Step 3" 73 | ) 74 | ) 75 | }) 76 | }) 77 | } 78 | 79 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 80 | } 81 | -------------------------------------------------------------------------------- /man/Navbar.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/components.R 3 | \name{Navbar} 4 | \alias{Navbar} 5 | \alias{NavbarGroup} 6 | \alias{NavbarHeading} 7 | \alias{NavbarDivider} 8 | \title{Navbar} 9 | \usage{ 10 | Navbar(...) 11 | 12 | NavbarGroup(...) 13 | 14 | NavbarHeading(...) 15 | 16 | NavbarDivider(...) 17 | } 18 | \arguments{ 19 | \item{...}{Component props and children. See the official Blueprint docs for details.} 20 | } 21 | \value{ 22 | Object with \code{shiny.tag} class suitable for use in the UI of a Shiny app. 23 | } 24 | \description{ 25 | Documentation: \url{https://blueprintjs.com/docs/#core/components/navbar} 26 | } 27 | \examples{ 28 | library(shiny.blueprint) 29 | library(shiny) 30 | 31 | ui <- function(id) { 32 | Navbar( 33 | NavbarGroup( 34 | NavbarHeading("Blueprint"), 35 | NavbarDivider(), 36 | Button(minimal = TRUE, icon = "home", text = "Home"), 37 | Button(minimal = TRUE, icon = "document", text = "Files") 38 | ), 39 | NavbarGroup( 40 | align = "right", 41 | Button(minimal = TRUE, icon = "user"), 42 | Button(minimal = TRUE, icon = "refresh") 43 | ) 44 | ) 45 | } 46 | 47 | server <- function(id) { 48 | moduleServer(id, function(input, output, session) {}) 49 | } 50 | 51 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 52 | } 53 | -------------------------------------------------------------------------------- /man/NonIdealState.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/components.R 3 | \name{NonIdealState} 4 | \alias{NonIdealState} 5 | \title{Non-ideal state} 6 | \usage{ 7 | NonIdealState(...) 8 | } 9 | \arguments{ 10 | \item{...}{Component props and children. See the official Blueprint docs for details.} 11 | } 12 | \value{ 13 | Object with \code{shiny.tag} class suitable for use in the UI of a Shiny app. 14 | } 15 | \description{ 16 | Documentation: \url{https://blueprintjs.com/docs/#core/components/non-ideal-state} 17 | } 18 | \examples{ 19 | library(shiny.blueprint) 20 | library(shiny) 21 | 22 | ui <- function(id) { 23 | NonIdealState( 24 | icon = "search", 25 | title = "No search results", 26 | description = Card( 27 | "Your search didn't match any files.", 28 | tags$br(), 29 | "Try searching for something else, or create a new file." 30 | ), 31 | action = Button(icon = "plus", text = "New file", intent = "primary", outlined = TRUE) 32 | ) 33 | } 34 | 35 | server <- function(id) { 36 | moduleServer(id, function(input, output, session) {}) 37 | } 38 | 39 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 40 | } 41 | -------------------------------------------------------------------------------- /man/NumericInput.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/components.R 3 | \name{NumericInput} 4 | \alias{NumericInput} 5 | \alias{NumericInput.shinyInput} 6 | \title{NumericInput} 7 | \usage{ 8 | NumericInput(...) 9 | 10 | NumericInput.shinyInput(inputId, ..., value = defaultValue) 11 | } 12 | \arguments{ 13 | \item{...}{Component props and children. See the official Blueprint docs for details.} 14 | 15 | \item{inputId}{The \code{input} slot that will be used to access the value.} 16 | 17 | \item{value}{Initial value.} 18 | } 19 | \value{ 20 | Object with \code{shiny.tag} class suitable for use in the UI of a Shiny app. 21 | } 22 | \description{ 23 | Documentation: \url{https://blueprintjs.com/docs/#core/components/numeric-input} 24 | } 25 | \examples{ 26 | library(shiny) 27 | library(shiny.blueprint) 28 | 29 | ui <- function(id) { 30 | ns <- NS(id) 31 | tagList( 32 | NumericInput( 33 | onValueChange = setInput(ns("value1")), 34 | intent = "primary" 35 | ), 36 | textOutput(ns("value1Output")), 37 | NumericInput.shinyInput( 38 | inputId = ns("value2"), 39 | intent = "primary" 40 | ), 41 | textOutput(ns("value2Output")) 42 | ) 43 | } 44 | 45 | server <- function(id) { 46 | moduleServer(id, function(input, output, session) { 47 | output$value1Output <- renderText(input$value1) 48 | output$value2Output <- renderText(input$value2) 49 | }) 50 | } 51 | 52 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 53 | } 54 | -------------------------------------------------------------------------------- /man/OverflowList.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/components.R 3 | \name{OverflowList} 4 | \alias{OverflowList} 5 | \title{Overflow list} 6 | \usage{ 7 | OverflowList(...) 8 | } 9 | \arguments{ 10 | \item{...}{Component props and children. See the official Blueprint docs for details.} 11 | } 12 | \value{ 13 | Object with \code{shiny.tag} class suitable for use in the UI of a Shiny app. 14 | } 15 | \description{ 16 | Documentation: \url{https://blueprintjs.com/docs/#core/components/overflow-list} 17 | } 18 | \examples{ 19 | library(shiny.blueprint) 20 | library(shiny) 21 | 22 | boxStyle <- tags$style(" 23 | .box { 24 | margin: 0.5em; 25 | padding: 0.5em; 26 | background: silver; 27 | font-size: 4em; 28 | } 29 | ") 30 | 31 | items <- lapply( 32 | list("Too", "many", "words", "to", "fit", "on", "your", "screen!"), 33 | function(text) div(text, class = "box") 34 | ) 35 | 36 | ui <- function(id) { 37 | tagList( 38 | boxStyle, 39 | OverflowList( 40 | items = items, 41 | visibleItemRenderer = JS("item => item"), 42 | overflowRenderer = JS("items => null"), 43 | collapseFrom = "end" 44 | ) 45 | ) 46 | } 47 | 48 | server <- function(id) { 49 | moduleServer(id, function(input, output, session) {}) 50 | } 51 | 52 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 53 | } 54 | -------------------------------------------------------------------------------- /man/Overlay.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/components.R 3 | \name{Overlay} 4 | \alias{Overlay} 5 | \title{Overlay} 6 | \usage{ 7 | Overlay(...) 8 | } 9 | \arguments{ 10 | \item{...}{Component props and children. See the official Blueprint docs for details.} 11 | } 12 | \value{ 13 | Object with \code{shiny.tag} class suitable for use in the UI of a Shiny app. 14 | } 15 | \description{ 16 | Documentation: \url{https://blueprintjs.com/docs/#core/components/overlay} 17 | } 18 | \examples{ 19 | library(shiny.blueprint) 20 | library(shiny) 21 | 22 | ui <- function(id) { 23 | ns <- NS(id) 24 | tagList( 25 | Button.shinyInput( 26 | inputId = ns("showOverlay"), 27 | "Show overlay" 28 | ), 29 | reactOutput(ns("overlay")) 30 | ) 31 | } 32 | 33 | server <- function(id) { 34 | moduleServer(id, function(input, output, session) { 35 | ns <- session$ns 36 | 37 | isOpen <- reactiveVal(FALSE) 38 | observeEvent(input$showOverlay, isOpen(TRUE)) 39 | observeEvent(input$closeOverlay, isOpen(FALSE)) 40 | 41 | output$overlay <- renderReact({ 42 | Overlay( 43 | usePortal = FALSE, 44 | isOpen = isOpen(), 45 | onClose = triggerEvent(ns("closeOverlay")), 46 | Card( 47 | className = "bp5-elevation-4 bp5-dark bp5-overlay-content", 48 | interactive = TRUE, 49 | H5("Analytical applications"), 50 | tags$p( 51 | "User interfaces that enable people to interact smoothly with data,", 52 | " ask better questions, and make better decisions." 53 | ), 54 | Button.shinyInput( 55 | inputId = ns("closeOverlay"), 56 | "Close" 57 | ) 58 | ) 59 | ) 60 | }) 61 | }) 62 | } 63 | 64 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 65 | } 66 | -------------------------------------------------------------------------------- /man/PanelStack.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/components.R, R/handlers.R 3 | \name{PanelStack} 4 | \alias{PanelStack} 5 | \alias{PanelStack.shinyWrapper} 6 | \alias{openPanel} 7 | \alias{closePanel} 8 | \title{Panel stack} 9 | \usage{ 10 | PanelStack(...) 11 | 12 | PanelStack.shinyWrapper(panels, ns = "ps", size = c(300, 250), ...) 13 | 14 | openPanel(panelId, ns = "ps") 15 | 16 | closePanel(ns = "ps") 17 | } 18 | \arguments{ 19 | \item{...}{Component props and children. See the official Blueprint docs for details.} 20 | 21 | \item{panels}{List of lists - each list contains \code{title} (string) and \code{content} (HTML)} 22 | 23 | \item{ns}{Namespace of given panel stack (required if there's more than 1 panel stack)} 24 | 25 | \item{size}{Numeric vector of length 2 - \code{c(width, height)}} 26 | 27 | \item{panelId}{Id of the panel to be closed} 28 | } 29 | \value{ 30 | Object with \code{shiny.tag} class suitable for use in the UI of a Shiny app. 31 | } 32 | \description{ 33 | Documentation: \url{https://blueprintjs.com/docs/#core/components/panel-stack2} 34 | } 35 | \examples{ 36 | library(shiny.blueprint) 37 | library(shiny) 38 | 39 | customComponents <- tagList( 40 | tags$style(" 41 | .panel-stack { 42 | border: 1px solid lightgrey; 43 | width: 300px; 44 | height: 240px; 45 | } 46 | .panel { 47 | position: absolute; 48 | top: 50\%; 49 | left: 50\%; 50 | transform: translate(-50\%, -50\%); 51 | } 52 | "), 53 | tags$script(HTML("(() => { 54 | const React = jsmodule['react']; 55 | const Blueprint = jsmodule['@blueprintjs/core']; 56 | 57 | function createPanel(num) { 58 | return { 59 | title: `Panel ${num}`, 60 | renderPanel: Panel, 61 | props: { num }, 62 | }; 63 | } 64 | 65 | function Panel({ num, openPanel }) { 66 | const button = React.createElement( 67 | Blueprint.Button, 68 | { 69 | onClick: () => openPanel(createPanel(num + 1)), 70 | intent: Blueprint.Intent.PRIMARY, 71 | }, 72 | 'Open Panel' 73 | ) 74 | return React.createElement('div', { className: 'panel' }, button); 75 | } 76 | 77 | window.createPanel = createPanel; 78 | })()")) 79 | ) 80 | 81 | ui <- function(id) { 82 | tagList( 83 | customComponents, 84 | PanelStack( 85 | className = "panel-stack", 86 | initialPanel = JS("createPanel(1)") 87 | ), 88 | PanelStack.shinyWrapper( 89 | panels = list( 90 | list(id = "panel1", title = "Panel 1", content = div( 91 | class = "panel", 92 | Button(text = "Open 2", onClick = openPanel("panel2")), 93 | Button(text = "Open 4", onClick = openPanel("panel4")) 94 | )), 95 | list(id = "panel2", title = "Panel 2", content = div( 96 | class = "panel", 97 | Button(text = "Open 3", onClick = openPanel("panel3")), 98 | Button(text = "Close", onClick = closePanel()) 99 | )), 100 | list(id = "panel3", title = "Panel 3", content = div( 101 | class = "panel", 102 | Button(text = "Open 4", onClick = openPanel("panel4")), 103 | Button(text = "Close", onClick = closePanel()) 104 | )), 105 | list(id = "panel4", title = "Panel 4", content = div( 106 | class = "panel", 107 | Button(text = "Close", onClick = closePanel()) 108 | )) 109 | ) 110 | ) 111 | ) 112 | } 113 | 114 | server <- function(id) { 115 | moduleServer(id, function(input, output, session) {}) 116 | } 117 | 118 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 119 | } 120 | -------------------------------------------------------------------------------- /man/Popover.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/components.R 3 | \name{Popover} 4 | \alias{Popover} 5 | \title{Popover} 6 | \usage{ 7 | Popover(...) 8 | } 9 | \arguments{ 10 | \item{...}{Component props and children. See the official Blueprint docs for details.} 11 | } 12 | \value{ 13 | Object with \code{shiny.tag} class suitable for use in the UI of a Shiny app. 14 | } 15 | \description{ 16 | Documentation: \url{https://blueprintjs.com/docs/#core/components/popover} 17 | } 18 | \examples{ 19 | library(shiny.blueprint) 20 | library(shiny) 21 | 22 | ui <- function(id) { 23 | ns <- NS(id) 24 | reactOutput(ns("ui")) 25 | } 26 | 27 | server <- function(id) { 28 | moduleServer(id, function(input, output, session) { 29 | ns <- session$ns 30 | 31 | isOpen <- reactiveVal(FALSE) 32 | observeEvent(input$hello, isOpen(TRUE)) 33 | observeEvent(input$dismiss, isOpen(FALSE)) 34 | 35 | output$ui <- renderReact({ 36 | Popover( 37 | isOpen = isOpen(), 38 | Button.shinyInput(ns("hello"), "Say Hello", intent = "primary"), 39 | usePortal = FALSE, 40 | content = tags$div( 41 | style = "padding: 1em", 42 | H5("Hello!"), 43 | tags$p("Please read this message."), 44 | Button.shinyInput(ns("dismiss"), "Dismiss") 45 | ) 46 | ) 47 | }) 48 | }) 49 | } 50 | 51 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 52 | } 53 | -------------------------------------------------------------------------------- /man/ProgressBar.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/components.R 3 | \name{ProgressBar} 4 | \alias{ProgressBar} 5 | \title{Progress bar} 6 | \usage{ 7 | ProgressBar(...) 8 | } 9 | \arguments{ 10 | \item{...}{Component props and children. See the official Blueprint docs for details.} 11 | } 12 | \value{ 13 | Object with \code{shiny.tag} class suitable for use in the UI of a Shiny app. 14 | } 15 | \description{ 16 | Documentation: \url{https://blueprintjs.com/docs/#core/components/progress-bar} 17 | } 18 | \examples{ 19 | library(shiny.blueprint) 20 | library(shiny) 21 | 22 | ui <- function(id) { 23 | ProgressBar(animate = TRUE) 24 | } 25 | 26 | server <- function(id) { 27 | moduleServer(id, function(input, output, session) {}) 28 | } 29 | 30 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 31 | } 32 | -------------------------------------------------------------------------------- /man/Radio.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/components.R 3 | \name{Radio} 4 | \alias{Radio} 5 | \alias{RadioGroup} 6 | \alias{RadioGroup.shinyInput} 7 | \title{Radio} 8 | \usage{ 9 | Radio(...) 10 | 11 | RadioGroup(...) 12 | 13 | RadioGroup.shinyInput(inputId, ..., value = defaultValue) 14 | } 15 | \arguments{ 16 | \item{...}{Component props and children. See the official Blueprint docs for details.} 17 | 18 | \item{inputId}{The \code{input} slot that will be used to access the value.} 19 | 20 | \item{value}{Initial value.} 21 | } 22 | \value{ 23 | Object with \code{shiny.tag} class suitable for use in the UI of a Shiny app. 24 | } 25 | \description{ 26 | Documentation: \url{https://blueprintjs.com/docs/#core/components/radio} 27 | } 28 | \examples{ 29 | library(shiny.blueprint) 30 | library(shiny) 31 | 32 | setInput <- function(inputId, accessor = NULL) { 33 | JS(paste0("x => Shiny.setInputValue('", inputId, "', x", accessor, ")")) 34 | } 35 | 36 | ui <- function(id) { 37 | ns <- NS(id) 38 | tagList( 39 | H3("Favorite animal"), 40 | RadioGroup.shinyInput( 41 | inputId = ns("animal"), 42 | value = "dog", 43 | Radio(label = "Cat", value = "cat"), 44 | Radio(label = "Dog", value = "dog") 45 | ), 46 | textOutput(ns("favoriteAnimal")), 47 | H3("Favorite fruit"), 48 | reactOutput(ns("fruitRadio")), 49 | textOutput(ns("favoriteFruit")) 50 | ) 51 | } 52 | 53 | server <- function(id) { 54 | moduleServer(id, function(input, output, session) { 55 | ns <- session$ns 56 | 57 | output$favoriteAnimal <- renderText(deparse(input$animal)) 58 | 59 | fruit <- reactiveVal() 60 | observeEvent(input$fruit, fruit(input$fruit)) 61 | output$fruitRadio <- renderReact({ 62 | RadioGroup( 63 | onChange = setInput(ns("fruit"), ".currentTarget.value"), 64 | selectedValue = fruit(), 65 | Radio(label = "Apple", value = "a"), 66 | Radio(label = "Banana", value = "b"), 67 | Radio(label = "Cherry", value = "c") 68 | ) 69 | }) 70 | output$favoriteFruit <- renderText(deparse(fruit())) 71 | }) 72 | } 73 | 74 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 75 | } 76 | -------------------------------------------------------------------------------- /man/RangeSlider.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/components.R 3 | \name{RangeSlider} 4 | \alias{RangeSlider} 5 | \alias{RangeSlider.shinyInput} 6 | \title{Range slider} 7 | \usage{ 8 | RangeSlider(...) 9 | 10 | RangeSlider.shinyInput(inputId, ..., value = defaultValue) 11 | } 12 | \arguments{ 13 | \item{...}{Component props and children. See the official Blueprint docs for details.} 14 | 15 | \item{inputId}{The \code{input} slot that will be used to access the value.} 16 | 17 | \item{value}{Initial value.} 18 | } 19 | \value{ 20 | Object with \code{shiny.tag} class suitable for use in the UI of a Shiny app. 21 | } 22 | \description{ 23 | Documentation: \url{https://blueprintjs.com/docs/#core/components/sliders.range-slider} 24 | } 25 | \examples{ 26 | library(shiny) 27 | library(shiny.blueprint) 28 | 29 | ui <- function(id) { 30 | ns <- NS(id) 31 | tagList( 32 | Slider.shinyInput( 33 | inputId = ns("value"), 34 | min = 0, 35 | max = 10, 36 | stepSize = 0.1, 37 | labelStepSize = 10 38 | ), 39 | textOutput(ns("valueOutput")) 40 | ) 41 | } 42 | 43 | server <- function(id) { 44 | moduleServer(id, function(input, output, session) { 45 | output$valueOutput <- renderText(input$value) 46 | }) 47 | } 48 | 49 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 50 | } 51 | -------------------------------------------------------------------------------- /man/ResizeSensor.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/components.R 3 | \name{ResizeSensor} 4 | \alias{ResizeSensor} 5 | \alias{ResizeSensor.shinyInput} 6 | \title{Resize sensor} 7 | \usage{ 8 | ResizeSensor(...) 9 | 10 | ResizeSensor.shinyInput(inputId, ...) 11 | } 12 | \arguments{ 13 | \item{...}{Component props and children. See the official Blueprint docs for details.} 14 | 15 | \item{inputId}{The \code{input} slot that will be used to access the value.} 16 | } 17 | \value{ 18 | Object with \code{shiny.tag} class suitable for use in the UI of a Shiny app. 19 | } 20 | \description{ 21 | Documentation: \url{https://blueprintjs.com/docs/#core/components/resize-sensor} 22 | } 23 | \examples{ 24 | library(shiny.blueprint) 25 | library(shiny) 26 | 27 | setInput <- function(inputId, accessor = NULL) { 28 | JS(paste0( 29 | "x => Shiny.setInputValue('", inputId, "', x", accessor, ")" 30 | )) 31 | } 32 | 33 | printSize <- function(content) { 34 | paste0(content$width, "x", content$height) 35 | } 36 | 37 | ui <- function(id) { 38 | ns <- NS(id) 39 | tagList( 40 | tags$style(" 41 | .resizable { 42 | overflow: auto; 43 | resize: both; 44 | width: 100px; 45 | height: 100px; 46 | background: silver; 47 | } 48 | "), 49 | ResizeSensor( 50 | onResize = setInput(ns("resize"), "[0].contentRect"), 51 | div( 52 | class = "resizable", 53 | textOutput(ns("size")) 54 | ) 55 | ), 56 | ResizeSensor.shinyInput( 57 | inputId = ns("resizeSensor"), 58 | content = div( 59 | textOutput(ns("resizeSensorInput")), 60 | style = " 61 | border: 1px solid black; 62 | width: 100px; 63 | " 64 | ) 65 | ) 66 | ) 67 | } 68 | 69 | server <- function(id) { 70 | moduleServer(id, function(input, output, session) { 71 | output$size <- renderText({ 72 | content <- req(input$resize) 73 | printSize(content) 74 | }) 75 | output$resizeSensorInput <- renderText({ 76 | content <- req(input$resizeSensor) 77 | printSize(content) 78 | }) 79 | }) 80 | } 81 | 82 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 83 | } 84 | -------------------------------------------------------------------------------- /man/Select.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/components.R 3 | \name{Select} 4 | \alias{Select} 5 | \alias{Select.shinyInput} 6 | \title{Select} 7 | \usage{ 8 | Select(...) 9 | 10 | Select.shinyInput( 11 | inputId, 12 | items, 13 | selected = NULL, 14 | ..., 15 | noResults = "No results." 16 | ) 17 | } 18 | \arguments{ 19 | \item{...}{Component props and children. See the official Blueprint docs for details.} 20 | 21 | \item{inputId}{The \code{input} slot that will be used to access the value.} 22 | 23 | \item{items}{A list of options (character vector or list containing \code{text} and \code{label} entries)} 24 | 25 | \item{selected}{Initialy selected item} 26 | 27 | \item{noResults}{Message when no results were found} 28 | } 29 | \value{ 30 | Object with \code{shiny.tag} class suitable for use in the UI of a Shiny app. 31 | } 32 | \description{ 33 | Documentation: \url{https://blueprintjs.com/docs/#select/select2} 34 | } 35 | \examples{ 36 | library(shiny) 37 | library(shiny.blueprint) 38 | 39 | top5Films <- list( 40 | list(text = "The Shawshank Redemption", label = 1994), 41 | list(text = "The Godfather", label = 1972), 42 | list(text = "The Godfather: Part II", label = 1974), 43 | list(text = "The Dark Knight", label = 2008), 44 | list(text = "12 Angry Men", label = 1957) 45 | ) 46 | 47 | ui <- function(id) { 48 | ns <- NS(id) 49 | tagList( 50 | H3("Select"), 51 | Select.shinyInput( 52 | inputId = ns("select"), 53 | items = paste("Option", LETTERS), 54 | selected = "Option C", 55 | noResults = "No options." 56 | ), 57 | uiOutput(ns("select_output")), 58 | H3("Select with labels"), 59 | Select.shinyInput( 60 | inputId = ns("select_lab"), 61 | items = top5Films, 62 | selected = "The Dark Knight" 63 | ), 64 | uiOutput(ns("select_lab_output")) 65 | ) 66 | } 67 | 68 | server <- function(id) { 69 | moduleServer(id, function(input, output, session) { 70 | output$select_output <- renderText(input$select$text) 71 | output$select_lab_output <- renderText(input$select_lab$text) 72 | }) 73 | } 74 | 75 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 76 | } 77 | -------------------------------------------------------------------------------- /man/Slider.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/components.R 3 | \name{Slider} 4 | \alias{Slider} 5 | \alias{Slider.shinyInput} 6 | \title{Slider} 7 | \usage{ 8 | Slider(...) 9 | 10 | Slider.shinyInput(inputId, ..., value = defaultValue) 11 | } 12 | \arguments{ 13 | \item{...}{Component props and children. See the official Blueprint docs for details.} 14 | 15 | \item{inputId}{The \code{input} slot that will be used to access the value.} 16 | 17 | \item{value}{Initial value.} 18 | } 19 | \value{ 20 | Object with \code{shiny.tag} class suitable for use in the UI of a Shiny app. 21 | } 22 | \description{ 23 | Documentation: \url{https://blueprintjs.com/docs/#core/components/sliders.slider} 24 | } 25 | \examples{ 26 | library(shiny) 27 | library(shiny.blueprint) 28 | 29 | ui <- function(id) { 30 | ns <- NS(id) 31 | tagList( 32 | Slider.shinyInput( 33 | inputId = ns("value"), 34 | min = 0, 35 | max = 10, 36 | stepSize = 0.1, 37 | labelStepSize = 10 38 | ), 39 | textOutput(ns("valueOutput")) 40 | ) 41 | } 42 | 43 | server <- function(id) { 44 | moduleServer(id, function(input, output, session) { 45 | output$valueOutput <- renderText(input$value) 46 | }) 47 | } 48 | 49 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 50 | } 51 | -------------------------------------------------------------------------------- /man/Spinner.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/components.R 3 | \name{Spinner} 4 | \alias{Spinner} 5 | \title{Spinner} 6 | \usage{ 7 | Spinner(...) 8 | } 9 | \arguments{ 10 | \item{...}{Component props and children. See the official Blueprint docs for details.} 11 | } 12 | \value{ 13 | Object with \code{shiny.tag} class suitable for use in the UI of a Shiny app. 14 | } 15 | \description{ 16 | Documentation: \url{https://blueprintjs.com/docs/#core/components/spinner} 17 | } 18 | \examples{ 19 | library(shiny.blueprint) 20 | library(shiny) 21 | 22 | ui <- function(id) { 23 | Spinner(intent = "primary", size = 100) 24 | } 25 | 26 | server <- function(id) { 27 | moduleServer(id, function(input, output, session) {}) 28 | } 29 | 30 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 31 | } 32 | -------------------------------------------------------------------------------- /man/Suggest.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/components.R 3 | \name{Suggest} 4 | \alias{Suggest} 5 | \alias{Suggest.shinyInput} 6 | \title{Suggest} 7 | \usage{ 8 | Suggest(...) 9 | 10 | Suggest.shinyInput( 11 | inputId, 12 | items, 13 | selected = NULL, 14 | ..., 15 | noResults = "No results." 16 | ) 17 | } 18 | \arguments{ 19 | \item{...}{Component props and children. See the official Blueprint docs for details.} 20 | 21 | \item{inputId}{The \code{input} slot that will be used to access the value.} 22 | 23 | \item{items}{A list of options (character vector or list containing \code{text} and \code{label} entries)} 24 | 25 | \item{selected}{Initialy selected item} 26 | 27 | \item{noResults}{Message when no results were found} 28 | } 29 | \value{ 30 | Object with \code{shiny.tag} class suitable for use in the UI of a Shiny app. 31 | } 32 | \description{ 33 | Documentation: \url{https://blueprintjs.com/docs/#select/suggest2} 34 | } 35 | \examples{ 36 | library(shiny) 37 | library(shiny.blueprint) 38 | 39 | top5Films <- list( 40 | list(text = "The Shawshank Redemption", label = 1994), 41 | list(text = "The Godfather", label = 1972), 42 | list(text = "The Godfather: Part II", label = 1974), 43 | list(text = "The Dark Knight", label = 2008), 44 | list(text = "12 Angry Men", label = 1957) 45 | ) 46 | 47 | ui <- function(id) { 48 | ns <- NS(id) 49 | tagList( 50 | H3("Suggest"), 51 | Suggest.shinyInput( 52 | inputId = ns("suggest"), 53 | items = paste("Option", LETTERS), 54 | inputProps = list( 55 | placeholder = "Search with Suggest..." 56 | ) 57 | ), 58 | uiOutput(ns("suggest_output")), 59 | H3("Suggest with labels"), 60 | Suggest.shinyInput( 61 | inputId = ns("suggest_lab"), 62 | items = top5Films, 63 | noResults = "No suggestions." 64 | ), 65 | uiOutput(ns("suggest_lab_output")) 66 | ) 67 | } 68 | 69 | server <- function(id) { 70 | moduleServer(id, function(input, output, session) { 71 | output$suggest_output <- renderText(input$suggest$text) 72 | output$suggest_lab_output <- renderText(input$suggest_lab$text) 73 | }) 74 | } 75 | 76 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 77 | } 78 | -------------------------------------------------------------------------------- /man/Switch.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/components.R 3 | \name{Switch} 4 | \alias{Switch} 5 | \alias{Switch.shinyInput} 6 | \title{Switch} 7 | \usage{ 8 | Switch(...) 9 | 10 | Switch.shinyInput(inputId, ..., value = defaultValue) 11 | } 12 | \arguments{ 13 | \item{...}{Component props and children. See the official Blueprint docs for details.} 14 | 15 | \item{inputId}{The \code{input} slot that will be used to access the value.} 16 | 17 | \item{value}{Initial value.} 18 | } 19 | \value{ 20 | Object with \code{shiny.tag} class suitable for use in the UI of a Shiny app. 21 | } 22 | \description{ 23 | Documentation: \url{https://blueprintjs.com/docs/#core/components/switch} 24 | } 25 | \examples{ 26 | library(shiny.blueprint) 27 | library(shiny) 28 | 29 | setInput <- function(inputId, accessor = NULL) { 30 | JS(paste0("x => Shiny.setInputValue('", inputId, "', x", accessor, ")")) 31 | } 32 | 33 | ui <- function(id) { 34 | ns <- NS(id) 35 | tagList( 36 | Switch( 37 | onChange = setInput(ns("apples"), ".target.checked"), 38 | defaultChecked = TRUE, 39 | label = "Apples" 40 | ), 41 | Switch.shinyInput( 42 | inputId = ns("bananas"), 43 | value = TRUE, 44 | label = "Bananas" 45 | ), 46 | textOutput(ns("applesEnabled")), 47 | textOutput(ns("bananasEnabled")) 48 | ) 49 | } 50 | 51 | server <- function(id) { 52 | moduleServer(id, function(input, output, session) { 53 | output$applesEnabled <- renderText(paste("Apples:", deparse(input$apples))) 54 | output$bananasEnabled <- renderText(paste("Bananas:", deparse(input$bananas))) 55 | }) 56 | } 57 | 58 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 59 | } 60 | -------------------------------------------------------------------------------- /man/Tabs.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/components.R 3 | \name{Tabs} 4 | \alias{Tabs} 5 | \alias{Tab} 6 | \alias{TabsExpander} 7 | \title{Tabs} 8 | \usage{ 9 | Tabs(...) 10 | 11 | Tab(...) 12 | 13 | TabsExpander(...) 14 | } 15 | \arguments{ 16 | \item{...}{Component props and children. See the official Blueprint docs for details.} 17 | } 18 | \value{ 19 | Object with \code{shiny.tag} class suitable for use in the UI of a Shiny app. 20 | } 21 | \description{ 22 | Documentation: \url{https://blueprintjs.com/docs/#core/components/tabs} 23 | } 24 | \examples{ 25 | library(shiny.blueprint) 26 | library(shiny) 27 | 28 | ui <- function(id) { 29 | ns <- NS(id) 30 | reactOutput(ns("tabs")) 31 | } 32 | 33 | server <- function(id) { 34 | moduleServer(id, function(input, output, session) { 35 | ns <- session$ns 36 | 37 | currentTab <- reactiveVal("react") 38 | observeEvent(input$selectTab, currentTab(input$selectTab)) 39 | output$tabs <- renderReact( 40 | Tabs( 41 | selectedTabId = currentTab(), 42 | onChange = setInput(ns("selectTab")), 43 | Tab(id = "angular", title = "Angular", panel = "Angular"), 44 | Tab(id = "ember", title = "Ember", panel = "Ember"), 45 | Tab(id = "react", title = "React", panel = "React"), 46 | TabsExpander(), 47 | tags$input(class = "bp5-input", type = "text", placeholder = "Search...") 48 | ) 49 | ) 50 | }) 51 | } 52 | 53 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 54 | } 55 | -------------------------------------------------------------------------------- /man/Tag.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/components.R 3 | \name{Tag} 4 | \alias{Tag} 5 | \title{Tag} 6 | \usage{ 7 | Tag(...) 8 | } 9 | \arguments{ 10 | \item{...}{Component props and children. See the official Blueprint docs for details.} 11 | } 12 | \value{ 13 | Object with \code{shiny.tag} class suitable for use in the UI of a Shiny app. 14 | } 15 | \description{ 16 | Documentation: \url{https://blueprintjs.com/docs/#core/components/tag} 17 | } 18 | \examples{ 19 | library(shiny.blueprint) 20 | library(shiny) 21 | 22 | ui <- function(id) { 23 | tagList( 24 | Tag(active = TRUE, "Hello"), 25 | Tag(active = TRUE, large = TRUE, "Hello"), 26 | Tag(active = TRUE, round = TRUE, "Hello"), 27 | Tag(active = FALSE, icon = "home", round = TRUE, large = TRUE, "Hello"), 28 | Tag(active = TRUE, rightIcon = "home", "Hello"), 29 | Tag(active = TRUE, round = TRUE, intent = "primary", interactive = TRUE, "Hello"), 30 | Tag(active = TRUE, round = TRUE, intent = "warning", interactive = TRUE, "Hello"), 31 | Tag(active = TRUE, round = TRUE, intent = "success", interactive = TRUE, "Hello"), 32 | Tag(active = TRUE, round = TRUE, intent = "danger", interactive = TRUE, "Hello") 33 | ) 34 | } 35 | 36 | server <- function(id) { 37 | moduleServer(id, function(input, output, session) {}) 38 | } 39 | 40 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 41 | } 42 | -------------------------------------------------------------------------------- /man/TagInput.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/components.R 3 | \name{TagInput} 4 | \alias{TagInput} 5 | \alias{TagInput.shinyInput} 6 | \title{TagInput} 7 | \usage{ 8 | TagInput(...) 9 | 10 | TagInput.shinyInput(inputId, ..., value = defaultValue) 11 | } 12 | \arguments{ 13 | \item{...}{Component props and children. See the official Blueprint docs for details.} 14 | 15 | \item{inputId}{The \code{input} slot that will be used to access the value.} 16 | 17 | \item{value}{Initial value.} 18 | } 19 | \value{ 20 | Object with \code{shiny.tag} class suitable for use in the UI of a Shiny app. 21 | } 22 | \description{ 23 | Documentation: \url{https://blueprintjs.com/docs/#core/components/tag-input} 24 | } 25 | \examples{ 26 | library(shiny) 27 | library(shiny.blueprint) 28 | 29 | 30 | ui <- function(id) { 31 | ns <- NS(id) 32 | tagList( 33 | TagInput.shinyInput( 34 | inputId = ns("value"), 35 | value = c("one", "two", "three") 36 | ), 37 | textOutput(ns("valueOutput")) 38 | ) 39 | } 40 | 41 | server <- function(id) { 42 | moduleServer(id, function(input, output, session) { 43 | output$valueOutput <- renderText(input$value) 44 | }) 45 | } 46 | 47 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 48 | } 49 | -------------------------------------------------------------------------------- /man/Text.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/components.R 3 | \name{Text} 4 | \alias{Text} 5 | \title{Text} 6 | \usage{ 7 | Text(...) 8 | } 9 | \arguments{ 10 | \item{...}{Component props and children. See the official Blueprint docs for details.} 11 | } 12 | \value{ 13 | Object with \code{shiny.tag} class suitable for use in the UI of a Shiny app. 14 | } 15 | \description{ 16 | Documentation: \url{https://blueprintjs.com/docs/#core/components/text} 17 | } 18 | \examples{ 19 | library(shiny.blueprint) 20 | library(shiny) 21 | 22 | ui <- function(id) { 23 | Text( 24 | "Lorem ipsum dolor sit amet, 25 | consectetur adipiscing elit, 26 | sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 27 | Ut enim ad minim veniam, 28 | quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 29 | Duis aute irure dolor in reprehenderit 30 | in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 31 | Excepteur sint occaecat cupidatat non proident, 32 | sunt in culpa qui officia deserunt mollit anim id est laborum." 33 | ) 34 | } 35 | 36 | server <- function(id) { 37 | moduleServer(id, function(input, output, session) {}) 38 | } 39 | 40 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 41 | } 42 | -------------------------------------------------------------------------------- /man/TextArea.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/components.R 3 | \name{TextArea} 4 | \alias{TextArea} 5 | \title{Text area} 6 | \usage{ 7 | TextArea(...) 8 | } 9 | \arguments{ 10 | \item{...}{Component props and children. See the official Blueprint docs for details.} 11 | } 12 | \value{ 13 | Object with \code{shiny.tag} class suitable for use in the UI of a Shiny app. 14 | } 15 | \description{ 16 | Documentation: \url{https://blueprintjs.com/docs/#core/components/text-inputs.text-area} 17 | } 18 | \examples{ 19 | library(shiny.blueprint) 20 | library(shiny) 21 | 22 | setInput <- function(inputId, accessor = NULL) { 23 | JS(paste0("x => Shiny.setInputValue('", inputId, "', x", accessor, ")")) 24 | } 25 | 26 | ui <- function(id) { 27 | ns <- NS(id) 28 | tagList( 29 | H4("Uncontrolled"), 30 | TextArea( 31 | growVertically = TRUE, 32 | onChange = setInput(ns("uncontrolledTextarea"), ".target.value"), 33 | large = TRUE, 34 | intent = "primary" 35 | ), 36 | textOutput(ns("uncontrolledTextareaOutput")), 37 | H4("Controlled"), 38 | TextArea.shinyInput( 39 | inputId = ns("controlledTextarea"), 40 | growVertically = TRUE, 41 | large = TRUE, 42 | intent = "primary" 43 | ), 44 | textOutput(ns("controlledTextareaOutput")) 45 | ) 46 | } 47 | 48 | server <- function(id) { 49 | moduleServer(id, function(input, output, session) { 50 | output$uncontrolledTextareaOutput <- renderText(input$uncontrolledTextarea) 51 | output$controlledTextareaOutput <- renderText(input$controlledTextarea) 52 | }) 53 | } 54 | 55 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 56 | } 57 | -------------------------------------------------------------------------------- /man/Toaster.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/toaster.R 3 | \name{Toaster} 4 | \alias{Toaster} 5 | \title{Toaster} 6 | \description{ 7 | Documentation: \url{https://blueprintjs.com/docs/#core/components/toast} 8 | } 9 | \section{Methods}{ 10 | \subsection{Public methods}{ 11 | \itemize{ 12 | \item \href{#method-Toaster-new}{\code{Toaster$new()}} 13 | \item \href{#method-Toaster-show}{\code{Toaster$show()}} 14 | \item \href{#method-Toaster-clear}{\code{Toaster$clear()}} 15 | \item \href{#method-Toaster-dismiss}{\code{Toaster$dismiss()}} 16 | } 17 | } 18 | \if{html}{\out{
}} 19 | \if{html}{\out{}} 20 | \if{latex}{\out{\hypertarget{method-Toaster-new}{}}} 21 | \subsection{Method \code{new()}}{ 22 | \subsection{Usage}{ 23 | \if{html}{\out{
}}\preformatted{Toaster$new( 24 | toasterId = incrementToasterId(), 25 | session = shiny::getDefaultReactiveDomain(), 26 | ... 27 | )}\if{html}{\out{
}} 28 | } 29 | 30 | \subsection{Arguments}{ 31 | \if{html}{\out{
}} 32 | \describe{ 33 | \item{\code{toasterId}}{Unique number - needed to use more than one toaster} 34 | 35 | \item{\code{session}}{Shiny session object} 36 | 37 | \item{\code{...}}{Parameters passed to \code{Toaster} component} 38 | } 39 | \if{html}{\out{
}} 40 | } 41 | \subsection{Returns}{ 42 | A new \code{Toaster} instance. 43 | } 44 | } 45 | \if{html}{\out{
}} 46 | \if{html}{\out{}} 47 | \if{latex}{\out{\hypertarget{method-Toaster-show}{}}} 48 | \subsection{Method \code{show()}}{ 49 | Shows a new toast to the user, or updates an existing toast 50 | corresponding to the provided key 51 | \subsection{Usage}{ 52 | \if{html}{\out{
}}\preformatted{Toaster$show(..., key = NULL)}\if{html}{\out{
}} 53 | } 54 | 55 | \subsection{Arguments}{ 56 | \if{html}{\out{
}} 57 | \describe{ 58 | \item{\code{...}}{Parameters passed to \code{Toaster} component} 59 | 60 | \item{\code{key}}{A key of toast to be shown/dismissed} 61 | } 62 | \if{html}{\out{
}} 63 | } 64 | \subsection{Returns}{ 65 | Nothing. This method is called for side effects. 66 | } 67 | } 68 | \if{html}{\out{
}} 69 | \if{html}{\out{}} 70 | \if{latex}{\out{\hypertarget{method-Toaster-clear}{}}} 71 | \subsection{Method \code{clear()}}{ 72 | Dismiss all toasts instantly 73 | \subsection{Usage}{ 74 | \if{html}{\out{
}}\preformatted{Toaster$clear()}\if{html}{\out{
}} 75 | } 76 | 77 | \subsection{Returns}{ 78 | Nothing. This method is called for side effects. 79 | } 80 | } 81 | \if{html}{\out{
}} 82 | \if{html}{\out{}} 83 | \if{latex}{\out{\hypertarget{method-Toaster-dismiss}{}}} 84 | \subsection{Method \code{dismiss()}}{ 85 | Dismiss the given toast instantly 86 | \subsection{Usage}{ 87 | \if{html}{\out{
}}\preformatted{Toaster$dismiss(key)}\if{html}{\out{
}} 88 | } 89 | 90 | \subsection{Arguments}{ 91 | \if{html}{\out{
}} 92 | \describe{ 93 | \item{\code{key}}{A key of toast to be shown/dismissed} 94 | } 95 | \if{html}{\out{
}} 96 | } 97 | \subsection{Returns}{ 98 | Nothing. This method is called for side effects. 99 | } 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /man/Tree.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/components.R 3 | \name{Tree} 4 | \alias{Tree} 5 | \alias{Tree.shinyInput} 6 | \title{Tree} 7 | \usage{ 8 | Tree(...) 9 | 10 | Tree.shinyInput(inputId, data, ...) 11 | } 12 | \arguments{ 13 | \item{...}{Component props and children. See the official Blueprint docs for details.} 14 | 15 | \item{inputId}{The \code{input} slot that will be used to access the value.} 16 | 17 | \item{data}{A list of nodes parameters: 18 | \itemize{ 19 | \item required: \code{label} 20 | \item optional: \code{childNodes}, \code{icon}, \code{hasCaret}, \code{isExpanded}, \code{disabled}, \code{secondaryLabel} 21 | }} 22 | } 23 | \value{ 24 | Object with \code{shiny.tag} class suitable for use in the UI of a Shiny app. 25 | } 26 | \description{ 27 | Documentation: \url{https://blueprintjs.com/docs/#core/components/tree} 28 | } 29 | \examples{ 30 | library(shiny.blueprint) 31 | library(purrr) 32 | library(shiny) 33 | 34 | treeList <- list( 35 | list( 36 | id = "0", 37 | hasCaret = TRUE, 38 | icon = "folder-close", 39 | label = "Tree" 40 | ), 41 | list( 42 | id = "1", 43 | icon = "folder-close", 44 | isExpanded = TRUE, 45 | label = "Hello here", 46 | childNodes = list( 47 | list( 48 | id = "2", 49 | icon = "document", 50 | label = "Item 0", 51 | secondaryLabel = Icon(icon = "eye-open") 52 | ), 53 | list( 54 | id = "3", 55 | icon = "tag", 56 | label = "Organic meditation gluten-free, sriracha VHS drinking vinegar beard man.", 57 | childNodes = list( 58 | list( 59 | id = "4", 60 | icon = "document", 61 | label = "Item 0", 62 | secondaryLabel = Icon(icon = "eye-open") 63 | ), 64 | list( 65 | id = "5", 66 | icon = "tag", 67 | label = "Some other stuff" 68 | ) 69 | ) 70 | ) 71 | ) 72 | ), 73 | list( 74 | id = "10", 75 | hasCaret = TRUE, 76 | icon = "folder-close", 77 | label = "Super secret files", 78 | disabled = TRUE 79 | ) 80 | ) 81 | 82 | modifyTree <- function(tree, ids, props) { 83 | if (!is.null(tree)) purrr::map(tree, function(node) { 84 | if (node$id \%in\% ids) { 85 | node <- purrr::list_modify(node, !!!props) 86 | } 87 | node$childNodes <- modifyTree(node$childNodes, ids, props) 88 | node 89 | }) 90 | } 91 | 92 | ui <- function(id) { 93 | ns <- NS(id) 94 | tagList( 95 | reactOutput(ns("tree")), 96 | Divider(), 97 | reactOutput(ns("info")), 98 | Divider(), 99 | Tree.shinyInput( 100 | inputId = ns("selected_nodes"), 101 | data = list( 102 | list( 103 | label = "1", 104 | id = "1", 105 | isExpanded = TRUE, 106 | childNodes = list( 107 | list( 108 | label = "1.1", 109 | id = "1.1", 110 | childNodes = list(list(label = "1.1.1", id = "1.1.1")) 111 | ), 112 | list(label = "1.2", id = "1.2") 113 | ) 114 | ), 115 | list( 116 | label = "2", 117 | id = "2", 118 | childNodes = list( 119 | list(label = "2.1", id = "2.1") 120 | ) 121 | ), 122 | list(label = "3", id = "3", hasCaret = TRUE) 123 | ) 124 | ), 125 | Divider(), 126 | tags$span("Hold ", tags$b("shift"), " to select multiple nodes."), 127 | reactOutput(ns("selected_nodes_list")), 128 | ) 129 | } 130 | 131 | server <- function(id) { 132 | moduleServer(id, function(input, output, session) { 133 | ns <- session$ns 134 | 135 | treeReactive <- reactiveVal(treeList) 136 | observeEvent(input$expand, { 137 | treeReactive( 138 | modifyTree(treeReactive(), ids = input$expand, props = list(isExpanded = TRUE)) 139 | ) 140 | }) 141 | observeEvent(input$collapse, { 142 | treeReactive( 143 | modifyTree(treeReactive(), ids = input$collapse, props = list(isExpanded = FALSE)) 144 | ) 145 | }) 146 | 147 | output$tree <- renderReact({ 148 | Tree( 149 | contents = treeReactive(), 150 | onNodeExpand = setInput(ns("expand"), jsAccessor = "[0].id"), 151 | onNodeCollapse = setInput(ns("collapse"), jsAccessor = "[0].id"), 152 | onNodeClick = setInput(ns("click"), jsAccessor = "[0].id") 153 | ) 154 | }) 155 | 156 | output$info <- renderReact({ 157 | tags$div("Clicked (id): ", input$click) 158 | }) 159 | 160 | output$selected_nodes_list <- renderReact({ 161 | UL(lapply(input$selected_nodes, function(node) tags$li(node))) 162 | }) 163 | }) 164 | } 165 | 166 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 167 | } 168 | -------------------------------------------------------------------------------- /man/component.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/components.R 3 | \name{component} 4 | \alias{component} 5 | \title{Documentation template} 6 | \arguments{ 7 | \item{inputId}{The \code{input} slot that will be used to access the value.} 8 | 9 | \item{...}{Component props and children. See the official Blueprint docs for details.} 10 | 11 | \item{value}{Initial value.} 12 | } 13 | \value{ 14 | Object with \code{shiny.tag} class suitable for use in the UI of a Shiny app. 15 | } 16 | \description{ 17 | Documentation template 18 | } 19 | \keyword{internal} 20 | -------------------------------------------------------------------------------- /man/figures/shiny-blueprint.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Appsilon/shiny.blueprint/b55c33d730bcfa4eb8d4994d0abcf96292d2cc66/man/figures/shiny-blueprint.png -------------------------------------------------------------------------------- /man/htmlElements.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/components.R 3 | \name{htmlElements} 4 | \alias{htmlElements} 5 | \alias{H1} 6 | \alias{H2} 7 | \alias{H3} 8 | \alias{H4} 9 | \alias{H5} 10 | \alias{H6} 11 | \alias{Blockquote} 12 | \alias{Code} 13 | \alias{Pre} 14 | \alias{OL} 15 | \alias{UL} 16 | \title{HTML elements} 17 | \usage{ 18 | H1(...) 19 | 20 | H2(...) 21 | 22 | H3(...) 23 | 24 | H4(...) 25 | 26 | H5(...) 27 | 28 | H6(...) 29 | 30 | Blockquote(...) 31 | 32 | Code(...) 33 | 34 | Pre(...) 35 | 36 | OL(...) 37 | 38 | UL(...) 39 | } 40 | \arguments{ 41 | \item{...}{Component props and children. See the official Blueprint docs for details.} 42 | } 43 | \value{ 44 | Object with \code{shiny.tag} class suitable for use in the UI of a Shiny app. 45 | } 46 | \description{ 47 | Documentation: \url{https://blueprintjs.com/docs/#core/components/html} 48 | } 49 | \examples{ 50 | library(shiny.blueprint) 51 | library(shiny) 52 | 53 | ui <- function(id) { 54 | tagList( 55 | H1("H1"), 56 | H2("H2"), 57 | H3("H3"), 58 | H4("H4"), 59 | H5("H5"), 60 | H6("H6"), 61 | Blockquote("Blockquote"), 62 | Code("Code"), 63 | Label("Label"), 64 | Pre("Pre"), 65 | OL(tags$li("OL")), 66 | UL(tags$li("UL")) 67 | ) 68 | } 69 | 70 | server <- function(id) { 71 | moduleServer(id, function(input, output, session) {}) 72 | } 73 | 74 | if (interactive()) shinyApp(ui("app"), function(input, output) server("app")) 75 | } 76 | \seealso{ 77 | Other HTML elements: 78 | \code{\link{HTMLTable}()}, 79 | \code{\link{Label}()} 80 | } 81 | \concept{HTML elements} 82 | -------------------------------------------------------------------------------- /man/reexports.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/reexports.R 3 | \docType{import} 4 | \name{reexports} 5 | \alias{reexports} 6 | \alias{JS} 7 | \alias{reactOutput} 8 | \alias{renderReact} 9 | \alias{setInput} 10 | \alias{triggerEvent} 11 | \title{Objects exported from other packages} 12 | \keyword{internal} 13 | \description{ 14 | These objects are imported from other packages. Follow the links 15 | below to see their documentation. 16 | 17 | \describe{ 18 | \item{shiny.react}{\code{\link[shiny.react]{JS}}, \code{\link[shiny.react]{reactOutput}}, \code{\link[shiny.react]{renderReact}}, \code{\link[shiny.react]{setInput}}, \code{\link[shiny.react]{triggerEvent}}} 19 | }} 20 | 21 | -------------------------------------------------------------------------------- /man/runExample.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/runExample.R 3 | \name{runExample} 4 | \alias{runExample} 5 | \title{Run example} 6 | \usage{ 7 | runExample(example = NULL, ...) 8 | } 9 | \arguments{ 10 | \item{example}{The name of the example to run, or \code{NULL} to retrieve the list of examples.} 11 | 12 | \item{...}{Additional arguments to pass to \code{shiny::runApp()}.} 13 | } 14 | \value{ 15 | This function normally does not return; 16 | interrupt R to stop the application (usually by pressing Ctrl+C or Esc). 17 | } 18 | \description{ 19 | Launch a Shiny example app or list the available examples. 20 | Use \code{shiny.blueprint::runExample("showcase")} to run a showcase app with all the components. 21 | } 22 | -------------------------------------------------------------------------------- /pkgdown/_pkgdown.yml: -------------------------------------------------------------------------------- 1 | title: shiny.blueprint 2 | template: 3 | bootstrap: 5 4 | bootswatch: pulse 5 | bslib: 6 | pkgdown-nav-height: 100px 7 | includes: 8 | in_header: | 9 | 10 | 11 | 18 | 19 | 20 | 26 | 27 | before_navbar: | 28 | 29 | 30 | url: https://appsilon.github.io/shiny.blueprint/ 31 | 32 | navbar: 33 | bg: primary 34 | structure: 35 | left: [reference, news] 36 | right: [search, github, twitter, mastodon] 37 | components: 38 | github: 39 | icon: fa-github fa-lg 40 | href: https://github.com/Appsilon/shiny.blueprint 41 | twitter: 42 | icon: fa-twitter fa-lg 43 | href: https://twitter.com/Appsilon 44 | mastodon: 45 | icon: fab fa-mastodon fa-lg 46 | href: https://fosstodon.org/@appsilon 47 | 48 | home: 49 | sidebar: 50 | structure: [star, links, license, community, citation, authors, dev] 51 | components: 52 | star: 53 | title: GitHub 54 | text: | 55 | Star 56 | 57 | footer: 58 | structure: 59 | left: developed 60 | components: 61 | developed: "Developed with :heart: by [Appsilon](https://appsilon.com)." 62 | -------------------------------------------------------------------------------- /pkgdown/extra.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --primary: #87D7E3; 3 | --primary-dark: rgb(63, 104, 166); 4 | } 5 | 6 | .navbar { 7 | background-color: var(--primary) !important; 8 | } 9 | 10 | #navbar > ul.navbar-nav > li.nav-item a:hover { 11 | background-color: var(--primary) !important; 12 | } 13 | 14 | .navbar-dark .navbar-nav .nav-link { 15 | color: rgba(255, 255, 255, 0.7) !important; 16 | } 17 | 18 | .navbar-dark .navbar-nav .active > .nav-link { 19 | background-color: var(--primary) !important; 20 | color: #fff !important; 21 | } 22 | 23 | .navbar-dark input[type="search"] { 24 | background-color: #fff !important; 25 | color: #444 !important; 26 | } 27 | 28 | nav .text-muted { 29 | color: #d8d8d8 !important; 30 | } 31 | 32 | a { 33 | color: var(--primary); 34 | } 35 | 36 | a:hover { 37 | color: var(--primary-dark); 38 | } 39 | 40 | button.btn.btn-primary.btn-copy-ex { 41 | background-color: var(--primary); 42 | border-color: var(--primary); 43 | } 44 | 45 | 46 | .home { 47 | left: 0px; 48 | position: absolute; 49 | padding: 8px 30px; 50 | color: rgba(255,255,255,0.55); 51 | } 52 | 53 | .home:hover { 54 | color: rgba(255,255,255,0.9); 55 | } 56 | -------------------------------------------------------------------------------- /pkgdown/favicon/apple-touch-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Appsilon/shiny.blueprint/b55c33d730bcfa4eb8d4994d0abcf96292d2cc66/pkgdown/favicon/apple-touch-icon-120x120.png -------------------------------------------------------------------------------- /pkgdown/favicon/apple-touch-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Appsilon/shiny.blueprint/b55c33d730bcfa4eb8d4994d0abcf96292d2cc66/pkgdown/favicon/apple-touch-icon-152x152.png -------------------------------------------------------------------------------- /pkgdown/favicon/apple-touch-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Appsilon/shiny.blueprint/b55c33d730bcfa4eb8d4994d0abcf96292d2cc66/pkgdown/favicon/apple-touch-icon-180x180.png -------------------------------------------------------------------------------- /pkgdown/favicon/apple-touch-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Appsilon/shiny.blueprint/b55c33d730bcfa4eb8d4994d0abcf96292d2cc66/pkgdown/favicon/apple-touch-icon-60x60.png -------------------------------------------------------------------------------- /pkgdown/favicon/apple-touch-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Appsilon/shiny.blueprint/b55c33d730bcfa4eb8d4994d0abcf96292d2cc66/pkgdown/favicon/apple-touch-icon-76x76.png -------------------------------------------------------------------------------- /pkgdown/favicon/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Appsilon/shiny.blueprint/b55c33d730bcfa4eb8d4994d0abcf96292d2cc66/pkgdown/favicon/apple-touch-icon.png -------------------------------------------------------------------------------- /pkgdown/favicon/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Appsilon/shiny.blueprint/b55c33d730bcfa4eb8d4994d0abcf96292d2cc66/pkgdown/favicon/favicon-16x16.png -------------------------------------------------------------------------------- /pkgdown/favicon/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Appsilon/shiny.blueprint/b55c33d730bcfa4eb8d4994d0abcf96292d2cc66/pkgdown/favicon/favicon-32x32.png -------------------------------------------------------------------------------- /pkgdown/favicon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Appsilon/shiny.blueprint/b55c33d730bcfa4eb8d4994d0abcf96292d2cc66/pkgdown/favicon/favicon.ico -------------------------------------------------------------------------------- /reinstall.sh: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | set -eu 3 | 4 | # Install the JavaScript dependencies 5 | yarn --cwd js 6 | 7 | # Bundle the JavaScript code into a single file 8 | yarn --cwd js webpack 9 | 10 | # Generate the NAMESPACE file and documentation 11 | Rscript -e 'devtools::document()' 12 | 13 | # Install the package 14 | Rscript -e 'devtools::install()' 15 | -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://docs.renovatebot.com/renovate-schema.json", 3 | "extends": [ 4 | "config:base", 5 | "group:allNonMajor", 6 | "schedule:earlyMondays" 7 | ], 8 | "major": { 9 | "dependencyDashboardApproval": true 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /shiny.blueprint.Rproj: -------------------------------------------------------------------------------- 1 | Version: 1.0 2 | 3 | RestoreWorkspace: Default 4 | SaveWorkspace: Default 5 | AlwaysSaveHistory: Default 6 | 7 | EnableCodeIndexing: Yes 8 | UseSpacesForTab: Yes 9 | NumSpacesForTab: 2 10 | Encoding: UTF-8 11 | 12 | RnwWeave: Sweave 13 | LaTeX: pdfLaTeX 14 | 15 | AutoAppendNewline: Yes 16 | StripTrailingWhitespace: Yes 17 | 18 | BuildType: Package 19 | PackageUseDevtools: Yes 20 | PackageInstallArgs: --no-multiarch --with-keep.source 21 | --------------------------------------------------------------------------------