')
31 | })
32 |
33 | test('Component - Can create random ID', () => {
34 | const component = new Component()
35 |
36 | expect(component.createID()).toMatch(/^\w+$/)
37 | expect(component.createID('test')).toMatch(/^test_\w+$/)
38 | })
39 |
40 | test('Component - CSS Units correctly validated', () => {
41 | const component = new Component()
42 |
43 | expect(component.validateCssUnit(10, 'BAD')).toEqual('10px')
44 | expect(component.validateCssUnit('10rem', 'BAD')).toEqual('10rem')
45 | expect(component.validateCssUnit('10sadem', 'BAD')).toEqual('BAD')
46 | })
47 |
--------------------------------------------------------------------------------
/.github/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing to `{designer}`
2 |
3 | This outlines how to propose a change to designer.
4 |
5 | ## Fixing typos
6 |
7 | You can fix typos, spelling mistakes, or grammatical errors in the documentation directly using the GitHub web interface, as long as the changes are made in the _source_ file.
8 | This generally means you'll need to edit [roxygen2 comments](https://roxygen2.r-lib.org/articles/roxygen2.html) in an `.R`, not a `.Rd` file.
9 | You can find the `.R` file that generates the `.Rd` by reading the comment in the first line.
10 |
11 | ## Bigger changes
12 |
13 | If you want to make a bigger change, it's a good idea to first file an issue and make sure someone agrees that it’s needed.
14 | If you’ve found a bug, please file an issue that illustrates the bug with a minimal
15 | [reprex](https://www.tidyverse.org/help/#reprex) (this will also help you write a unit test, if needed).
16 |
17 | ### Pull request process
18 |
19 | * Fork the package and clone onto your computer. If you haven't done this before, we recommend using `usethis::create_from_github("ashbaldry/designer", fork = TRUE)`.
20 |
21 | * Install all development dependences with `devtools::install_dev_deps()`, and then make sure the package passes R CMD check by running `devtools::check()`.
22 | If R CMD check doesn't pass cleanly, it's a good idea to ask for help before continuing.
23 | * Create a Git branch for your pull request (PR). We recommend using `usethis::pr_init("brief-description-of-change")`.
24 |
25 | * Make your changes, commit to git, and then create a PR by running `usethis::pr_push()`, and following the prompts in your browser.
26 | The title of your PR should briefly describe the change.
27 | The body of your PR should contain `Fixes #issue-number`.
28 |
29 | * For user-facing changes, add a bullet to the top of `NEWS.md` (i.e. just below the first header). Follow the style described in .
30 |
--------------------------------------------------------------------------------
/srcjs/component/Input.js:
--------------------------------------------------------------------------------
1 | import { Component } from './Component'
2 |
3 | export class Input extends Component {
4 | constructor (type) {
5 | super()
6 | this.type = type
7 | this.updateComponent(true)
8 | }
9 |
10 | types = [
11 | { value: 'text_input', label: 'Text', r_func: 'textInput' },
12 | { value: 'textarea', label: 'Textarea', r_func: 'textAreaInput' },
13 | { value: 'numeric', label: 'Numeric', r_func: 'numericInput' },
14 | { value: 'password', label: 'Password', r_func: 'passwordInput' }
15 | ]
16 |
17 | html = `
18 |
39 | `
40 | };
41 |
--------------------------------------------------------------------------------
/man/designApp.Rd:
--------------------------------------------------------------------------------
1 | % Generated by roxygen2: do not edit by hand
2 | % Please edit documentation in R/run_app.R
3 | \name{designApp}
4 | \alias{designApp}
5 | \title{Run the Shiny Application}
6 | \usage{
7 | designApp(
8 | onStart = NULL,
9 | options = list(),
10 | enableBookmarking = "url",
11 | uiPattern = "/",
12 | ...
13 | )
14 | }
15 | \arguments{
16 | \item{onStart}{A function that will be called before the app is actually run.
17 | This is only needed for \code{shinyAppObj}, since in the \code{shinyAppDir}
18 | case, a \code{global.R} file can be used for this purpose.}
19 |
20 | \item{options}{Named options that should be passed to the \code{runApp} call
21 | (these can be any of the following: "port", "launch.browser", "host", "quiet",
22 | "display.mode" and "test.mode"). You can also specify \code{width} and
23 | \code{height} parameters which provide a hint to the embedding environment
24 | about the ideal height/width for the app.}
25 |
26 | \item{enableBookmarking}{Can be one of \code{"url"}, \code{"server"}, or
27 | \code{"disable"}. The default value, \code{NULL}, will respect the setting from
28 | any previous calls to \code{\link[shiny:enableBookmarking]{enableBookmarking()}}. See \code{\link[shiny:enableBookmarking]{enableBookmarking()}}
29 | for more information on bookmarking your app.}
30 |
31 | \item{uiPattern}{A regular expression that will be applied to each \code{GET}
32 | request to determine whether the \code{ui} should be used to handle the
33 | request. Note that the entire request path must match the regular
34 | expression in order for the match to be considered successful.}
35 |
36 | \item{...}{arguments to pass to \code{golem_opts}. See \code{\link[golem]{get_golem_options}} for more details.}
37 | }
38 | \value{
39 | This function does not return a value; interrupt R to stop the application (usually by pressing Ctrl+C or Esc).
40 | }
41 | \description{
42 | Runs the designer Shiny application.
43 |
44 | For more information about how the application works, either run the "Help" guide in-app, or run
45 | \code{vignette("designer")}.
46 | }
47 | \examples{
48 | \dontshow{if (interactive()) (if (getRversion() >= "3.4") withAutoprint else force)(\{ # examplesIf}
49 | designApp()
50 | \dontshow{\}) # examplesIf}
51 | }
52 |
--------------------------------------------------------------------------------
/R/cicerone_guide.R:
--------------------------------------------------------------------------------
1 | #' Application Guide
2 | #' @noRd
3 | guide <- cicerone::Cicerone$new(
4 | )$step(
5 | el = "settings-page_type_button",
6 | title = "Page Type",
7 | description = paste(
8 | "First thing to do is select the type of page:
",
9 | "
Fluid Page is the most commonly used page for shiny applications
",
10 | "
Navigation Bar Page enables multiple tabs to be included in the application
",
11 | "
Fill Page will set the height and width to the whole browser window
",
12 | "
Basic Page and Bootstrap Page are for those who will use more HTML/CSS after the application is designed
",
13 | "
"
14 | )
15 | )$step(
16 | el = "sidebar-accordion",
17 | title = "Components",
18 | description = paste(
19 | "Components are the bread and butter of building a UI.",
20 | "The selection of components include rows and columns for designing the layout,",
21 | "and the all important inputs and outputs."
22 | )
23 | )$step(
24 | el = "sidebar-header-body",
25 | title = "Component Settings",
26 | description = paste(
27 | "After a component is selected, some customisation is available ",
28 | "such as the text in the component and how wide it should be."
29 | )
30 | )$step(
31 | el = "component_delete",
32 | title = "Delete Component",
33 | description = paste(
34 | "If you do include something in the UI that you no longer need, drag it here for it to be removed.",
35 | "Alternatively, right-click on an element and delete from the menu instead."
36 | )
37 | )$step(
38 | el = "settings-code_button",
39 | title = "R Code",
40 | description = paste(
41 | "Once you are happy with the layout, you can copy or download the R code required to replicate the UI below."
42 | )
43 | )$step(
44 | el = "settings-template_button",
45 | title = "R Code",
46 | description = paste(
47 | "Alternatively if you want to load a previously saved template, select one of the templates here."
48 | )
49 | )$step(
50 | el = "settings-options_button",
51 | title = "Additional Options",
52 | description = paste(
53 | "Here you can toggle development tools, such as labels and the dotted borders,",
54 | "as well as changing the title and a full page preview of the application."
55 | )
56 | )
57 |
--------------------------------------------------------------------------------
/man/component_setting.Rd:
--------------------------------------------------------------------------------
1 | % Generated by roxygen2: do not edit by hand
2 | % Please edit documentation in R/mod_sidebar_components.R
3 | \name{compSettingTag}
4 | \alias{compSettingTag}
5 | \alias{compSettingType}
6 | \alias{compSettingPlot}
7 | \alias{compSettingValue}
8 | \alias{compSettingLabel}
9 | \alias{compSettingID}
10 | \alias{compSettingIcon}
11 | \alias{compSettingColour}
12 | \alias{compSettingBackground}
13 | \alias{compSettingFill}
14 | \alias{compSettingText}
15 | \alias{compSettingTextArea}
16 | \alias{compSettingChoices}
17 | \alias{compSettingRange}
18 | \alias{compSettingInline}
19 | \alias{compSettingDownload}
20 | \alias{compSettingWidth}
21 | \alias{compSettingHeight}
22 | \alias{compSettingWidthNum}
23 | \alias{compSettingOffset}
24 | \title{Bootstrap Component Inputs}
25 | \usage{
26 | compSettingTag(id, choices = NULL)
27 |
28 | compSettingType(id, choices)
29 |
30 | compSettingPlot(id)
31 |
32 | compSettingValue(id)
33 |
34 | compSettingLabel(id, label = "Label", optional = FALSE)
35 |
36 | compSettingID(id)
37 |
38 | compSettingIcon(id)
39 |
40 | compSettingColour(id, status = FALSE)
41 |
42 | compSettingBackground(id)
43 |
44 | compSettingFill(id, label = "Fill Whole Box")
45 |
46 | compSettingText(id, value = NULL)
47 |
48 | compSettingTextArea(id)
49 |
50 | compSettingChoices(id)
51 |
52 | compSettingRange(id)
53 |
54 | compSettingInline(id)
55 |
56 | compSettingDownload(id)
57 |
58 | compSettingWidth(id)
59 |
60 | compSettingHeight(id)
61 |
62 | compSettingWidthNum(id, value = 3L, min = 1L)
63 |
64 | compSettingOffset(id)
65 | }
66 | \arguments{
67 | \item{id}{Namespace to include the component}
68 |
69 | \item{choices}{A vector of potential choices to include in the component}
70 |
71 | \item{label}{Label of the input}
72 |
73 | \item{optional}{Logical, is the input optional?}
74 |
75 | \item{status}{Logical, are only status colours allowed, default is \code{FALSE}}
76 |
77 | \item{value}{Value given to the component input}
78 |
79 | \item{min}{Minimum value given to the component input}
80 | }
81 | \value{
82 | A \code{shiny.tag.list} of settings specific to the selected component
83 | }
84 | \description{
85 | A way to be able to adjust components so that can more easily visualise how the shiny application will look.
86 | }
87 | \seealso{
88 | \code{\link{component}}
89 | }
90 |
--------------------------------------------------------------------------------
/R/ui_utils.R:
--------------------------------------------------------------------------------
1 | #' Warning Modal
2 | #'
3 | #' @description
4 | #' Creates a modal to warn the user about the consequences of a particular action they're
5 | #' about to make.
6 | #'
7 | #' @param id ID to give to the modal
8 | #' @param text Character string of the body of the warning message
9 | #' @param confirm_id,cancel_id HTML ID references for the confirm and cancel buttons
10 | #' @param confirm_text,cancel_text Labels to give the confirm and cancel buttons
11 | #'
12 | #' @return HTML for a modal
13 | #'
14 | #' @noRd
15 | warningModal <- function(id, text, confirm_id, confirm_text, cancel_id, cancel_text) {
16 | div(
17 | class = "modal fade",
18 | id = id,
19 | tabindex = "-1",
20 | `aria-hidden` = "true",
21 | `data-bs-keyboard` = "false",
22 | `data-keyboard` = "false",
23 | div(
24 | class = "modal-dialog",
25 | role = "document",
26 | div(
27 | class = "modal-content",
28 | div(
29 | class = "modal-header",
30 | h5(class = "modal-title", "Warning!")
31 | ),
32 | div(
33 | class = "modal-body",
34 | p(text)
35 | ),
36 | div(
37 | class = "modal-footer",
38 | tags$button(
39 | id = cancel_id,
40 | type = "button",
41 | class = "btn btn-secondary",
42 | `data-dismiss` = "modal",
43 | `data-bs-dismiss` = "modal",
44 | shiny::icon("xmark"),
45 | cancel_text
46 | ),
47 | tags$button(
48 | id = confirm_id,
49 | type = "button",
50 | class = "btn btn-primary",
51 | `data-dismiss` = "modal",
52 | `data-bs-dismiss` = "modal",
53 | shiny::icon("check"),
54 | confirm_text
55 | )
56 | )
57 | )
58 | )
59 | )
60 | }
61 |
62 | screenshtButton <- function(btn_id, ...) {
63 | btn <- shinyscreenshot::screenshotButton(
64 | selector = ".designer-page-template",
65 | label = "Snapshot UI",
66 | filename = "ui_wireframe",
67 | ...
68 | )
69 | btn[[2L]]$attribs$class <- sub(" btn-default", "", btn[[2L]]$attribs$class)
70 | btn[[2L]]$attribs$onclick <- sub(btn[[2L]]$attribs$id, btn_id, btn[[2L]]$attribs$onclick, fixed = TRUE)
71 | btn[[2L]]$attribs$id <- btn_id
72 | btn
73 | }
74 |
--------------------------------------------------------------------------------
/inst/srcjs/bs-custom-file-input/bs-custom-file-input.min.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * bsCustomFileInput v1.3.4 (https://github.com/Johann-S/bs-custom-file-input)
3 | * Copyright 2018 - 2020 Johann-S
4 | * Licensed under MIT (https://github.com/Johann-S/bs-custom-file-input/blob/master/LICENSE)
5 | */
6 | !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).bsCustomFileInput=t()}(this,function(){"use strict";var s={CUSTOMFILE:'.custom-file input[type="file"]',CUSTOMFILELABEL:".custom-file-label",FORM:"form",INPUT:"input"},l=function(e){if(0
8 |
15 | `
16 |
17 | constructor () {
18 | super()
19 | this.updateComponent(true)
20 | }
21 |
22 | createComponent () {
23 | const label = $('#sidebar-slider-label').val()
24 |
25 | let id = $('#sidebar-slider-id').val()
26 | id = id === '' ? this.createID('slider') : id
27 |
28 | const format = $('#sidebar-slider-type').val()
29 |
30 | const width = this.validateCssUnit($('#sidebar-slider-width').val())
31 | const style_str = width ? `style="width: ${width};"` : ''
32 | const width_str = width ? `, width = "${width}"` : ''
33 |
34 | const ranged = document.getElementById('sidebar-slider-range').checked
35 | const values = this.getValues(format, ranged)
36 | const range_attr = ranged ? 'data-type="double" data-drag-interval="true" data-to="$to$"' : ''
37 |
38 | return this.replaceHTMLPlaceholders(this.html, {
39 | range_attr,
40 | id,
41 | label,
42 | format,
43 | min: values.min,
44 | max: values.max,
45 | step: values.step,
46 | from: values.from,
47 | to: values.to,
48 | style_str,
49 | width_str,
50 | value_str: values.value_str,
51 | time_format: values.time_format
52 | })
53 | };
54 |
55 | getValues (format, range = false) {
56 | if (format === 'number') {
57 | return {
58 | step: 1,
59 | min: 0,
60 | max: 10,
61 | from: 5,
62 | to: 7,
63 | value_str: `, min = 0, max = 10, value = ${range ? 'c(5, 7)' : 5}`
64 | }
65 | }
66 |
67 | const curr_date = new Date()
68 | if (format === 'date') {
69 | curr_date.setHours(0, 0, 0, 0)
70 | }
71 | const curr_time = curr_date.getTime()
72 | const step = format === 'date' ? 1000 * 60 * 60 * 24 : 1000
73 |
74 | const min = curr_time - 5 * step
75 | const max = curr_time + 5 * step
76 | const from = curr_time
77 | const to = curr_time + 2 * step
78 |
79 | const r_datefunc = format === 'date' ? 'Sys.Date()' : 'Sys.time()'
80 | const r_mult = format === 'date' ? '' : '000'
81 | const input_value_str = range ? `"c(${r_datefunc}, ${r_datefunc} + 2${r_mult})"` : r_datefunc
82 |
83 | return {
84 | step,
85 | min,
86 | max,
87 | from,
88 | to,
89 | time_format: format === 'date' ? '%F' : '%F %T',
90 | value_str: `, min = ${r_datefunc} - 5${r_mult}, max = ${r_datefunc} + 5${r_mult}, value = ${input_value_str}`
91 | }
92 | }
93 |
94 | updateComponent (update_sortable = false) {
95 | super.updateComponent(update_sortable)
96 |
97 | if (typeof (window) === 'undefined') {
98 | return null
99 | }
100 | const slider_type = $('#sidebar-slider-type').val()
101 | $('.component-container').find('input').ionRangeSlider({ prettify: this.getSliderPrettifier(slider_type) })
102 | };
103 |
104 | getSliderPrettifier (type) {
105 | if (type === 'date') {
106 | return function (num) {
107 | const sel_date = new Date(num)
108 | return sel_date.getFullYear() + '-' + (sel_date.getMonth() + 1) + '-' + sel_date.getDate()
109 | }
110 | } else if (type === 'datetime') {
111 | return function (num) {
112 | const sel_date = new Date(num)
113 | return sel_date.getFullYear() + '-' + (sel_date.getMonth() + 1) + '-' + sel_date.getDate() + ' ' +
114 | sel_date.getHours() + ':' + sel_date.getMinutes() + ':' + sel_date.getSeconds()
115 | }
116 | } else {
117 | return null
118 | }
119 | }
120 | }
121 |
--------------------------------------------------------------------------------
/R/json_to_rscript.R:
--------------------------------------------------------------------------------
1 | #' Convert JSON to R Calls
2 | #'
3 | #' @description
4 | #' Using the JSON string generated from the canvas, convert into a list that can be easily parsed by R
5 | #' into a script to recreate the UI designed in the app
6 | #'
7 | #' @param json A string containing JSON code of the "App UI" page
8 | #' @param module_name Optional string the allows the function to be written as a module
9 | #' @param app_type Structure of the application. Either `app`, with an app.R/ui.R and server.R,
10 | #' `golem` or `rhino` with the relevant project structure.
11 | #'
12 | #' @return A string that can be written to a \code{ui.R} file
13 | #'
14 | #' @noRd
15 | jsonToRScript <- function(json, module_name = NULL, app_type = c("app", "golem", "rhino")) {
16 | if (is.null(json)) return("")
17 |
18 | valid_json <- jsonlite::validate(json)
19 |
20 | if (valid_json) {
21 | app_type <- match.arg(app_type)
22 | html_list <- jsonlite::fromJSON(json, simplifyDataFrame = FALSE)
23 | htmlToRScript(html_list, module_name = module_name, app_type = app_type)
24 | } else {
25 | message(attr(valid_json, "err"), "Returning NA")
26 | NA_character_
27 | }
28 | }
29 |
30 | #' Convert HTML Info to R Calls
31 | #'
32 | #' @description
33 | #' Recursively looking into a list of HTML information to create R code that will produce the HTML seen in the app.
34 | #'
35 | #' @param html_list A list containing information about the tags, relevant R functions and extra arguments to
36 | #' give to each HTML tag
37 | #' @param indent The number of spaces to indent each subsequent call
38 | #' @param module_name Optional string the allows the function to be written as a module
39 | #'
40 | #' @return A string that can be written to a \code{ui.R} file
41 | #'
42 | #' @noRd
43 | htmlToRScript <- function(html_list, indent = 0L, module_name = NULL, app_type = c("app", "golem", "rhino")) {
44 | if (is.null(html_list$r_function)) return("")
45 | app_type <- match.arg(app_type)
46 |
47 | module_home <- indent == 0L && (is.character(module_name) || app_type != "app")
48 | indent_space <- paste0(rep(" ", indent), collapse = "")
49 | indent_text_space <- paste0(rep(" ", indent + 2L), collapse = "")
50 |
51 | if ("children" %in% names(html_list) && length(html_list$children) > 0L) {
52 | sub_indent <- indent + if (module_home) 4L else 2L
53 | sub_rfuncs <- lapply(html_list$children, htmlToRScript, indent = sub_indent)
54 | sub_rfuncs <- paste0(paste(sub_rfuncs, collapse = ",\n"), "\n")
55 | } else {
56 | sub_rfuncs <- ""
57 | }
58 |
59 | if (is.null(html_list$text) || html_list$text == "") {
60 | html_text <- ""
61 | } else {
62 | html_text <- paste0(
63 | indent_text_space,
64 | "\"", html_list$text, "\"",
65 | if (sub_rfuncs == "") "" else ",",
66 | "\n"
67 | )
68 | }
69 |
70 | if (is.null(html_list$r_arguments)) {
71 | rfunc_arguments <- ""
72 | } else {
73 | rfunc_arguments <- paste0(
74 | indent_text_space,
75 | gsub(",(?![^\\(]+\\)) ", paste0(",\n", indent_text_space), html_list$r_arguments, perl = TRUE),
76 | if (sub_rfuncs == "" && html_text == "") "" else ",",
77 | "\n"
78 | )
79 | }
80 |
81 | if (is.null(html_list$r_comments)) {
82 | r_comments <- ""
83 | } else {
84 | r_comments <- paste0(indent_space, "# ", strsplit(html_list$r_comments, "\n")[[1L]], "\n", collapse = "")
85 | }
86 |
87 | if (module_home && is.character(module_name)) {
88 | r_comments <- paste0("#' ", module_name, " Module\n#' @export\n")
89 | if (app_type == "rhino") {
90 | pkgs <- c("shiny", if (html_list$r_function == "dashboardPage") "shinydashboard")
91 | r_comments <- paste0("box::use(", toString(pkgs), ")\n\n", r_comments)
92 | }
93 |
94 | rfunc <- paste0(
95 | gsub("\\W", "", tools::toTitleCase(module_name)),
96 | "UI <- function(id) {\n tagList(\n"
97 | )
98 | rfunc_arguments <- NULL
99 | rfunc_end <- " )\n}"
100 | } else if (module_home) {
101 | r_comments <- paste0("#' Application UI \n#' @export\n")
102 | if (app_type == "rhino") {
103 | pkgs <- c("shiny", if (html_list$r_function == "dashboardPage") "shinydashboard")
104 | r_comments <- paste0("box::use(", toString(pkgs), ")\n\n", r_comments)
105 | }
106 |
107 | rfunc <- paste0("AppUI <- function(id) {\n ", html_list$r_function, "(\n")
108 | rfunc_arguments <- NULL
109 | rfunc_end <- " )\n}"
110 | } else {
111 | rfunc <- paste0(indent_space, html_list$r_function, "(\n")
112 | rfunc_end <- paste0(indent_space, ")")
113 | }
114 |
115 | paste0(
116 | r_comments,
117 | rfunc,
118 | rfunc_arguments,
119 | html_text,
120 | sub_rfuncs,
121 | rfunc_end,
122 | collapse = ""
123 | )
124 | }
125 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [](https://lifecycle.r-lib.org/articles/stages.html#experimental)
4 | [](https://app.codecov.io/gh/ashbaldry/designer?branch=main)
5 | [](https://github.com/ashbaldry/designer/actions/workflows/R-CMD-check.yaml)
6 |
7 |
8 | # {designer}
9 |
10 | `{designer}` is intended to make the initial generation of a UI wireframe of a shiny application as quick and simple as possible.
11 |
12 | The package contains a `shiny` application that enables the user to build the UI of a `shiny` application by drag and dropping several `shiny` components - such as inputs, outputs and buttons - into one of the available pages in the `{shiny}` package. Once finalised, the R code used to generate the UI can be copied or downloaded to a `ui.R` file, and then the rest of the application like the server logic and styling can be built by the developer.
13 |
14 | The drag-and-drop nature of the application means that it is easy for both R and non-R users to collaborate in designing the UI of their shiny application. Comments can be added to any component so that it is simple to remember what should be included for each input/output.
15 |
16 | ## Installation
17 |
18 | Install from [CRAN](https://cran.r-project.org/package=designer) with:
19 |
20 | ``` r
21 | install.packages("designer")
22 | ```
23 |
24 | Or install the development version from [GitHub](https://github.com/ashbaldry/designer) with:
25 |
26 | ``` r
27 | devtools::install_github("ashbaldry/designer")
28 | ```
29 |
30 | The application is also available on-line through [shinyapps.io](https://ashbaldry.shinyapps.io/designer).
31 |
32 | ## Usage
33 |
34 | To open the `{designer}` application and create your own UI, run the following code:
35 |
36 | ``` r
37 | designer::designApp()
38 | ```
39 |
40 | Alternatively, you can launch the addin via the RStudio menu.
41 |
42 | 
43 |
44 | Once opened, create the application as required until you are happy with the layout of the application, then copy the code to the relevant R file
45 |
46 | 
47 |
48 | ``` r
49 | # ui.R
50 |
51 | bootstrapPage(
52 | title = "Shiny Application",
53 | theme = bslib::bs_theme(4),
54 | h1(
55 | "My shiny application"
56 | ),
57 | inputPanel(
58 | selectInput(
59 | inputId = "dropdown_gxc2o1ekgb",
60 | label = "Label",
61 | choices = "..."
62 | ),
63 | selectInput(
64 | inputId = "dropdown_azset57v65",
65 | label = "Label",
66 | choices = "..."
67 | ),
68 | selectInput(
69 | inputId = "dropdown_itgcle8yze",
70 | label = "Label",
71 | choices = "..."
72 | )
73 | ),
74 | fluidRow(
75 | column(
76 | width = 6,
77 | # Bar plot
78 | plotOutput(
79 | outputId = "plot_zvu8c9upbu",
80 | height = "200px"
81 | )
82 | ),
83 | column(
84 | width = 6,
85 | # Line chart
86 | plotOutput(
87 | outputId = "plot_qsmfr0lp57",
88 | height = "200px"
89 | )
90 | )
91 | )
92 | )
93 | ```
94 |
95 | ## Docker
96 |
97 | Optionally, you can also build a Dockerized version of the app:
98 |
99 | ```
100 | sudo docker build -t designer -f Dockerfile .
101 | ```
102 |
103 | After building the docker image (which should take a while) use the command:
104 |
105 | ```
106 | docker run -p 80:80 designer
107 | ```
108 |
109 | Depending on your Docker set-up, the exposed application may be available under: http://localhost:80
110 |
111 | ## Sharing Designs
112 |
113 | Once you are ready with your initial design, you can share it with others using Code -> Share. This will generate a URL that when opened by another person (or yourself in the future) will show the saved state of the design and then can be added onto and saved again - this will generate a new URL to share.
114 |
115 | **NB** For bookmarking to work, the server the `{designer}` application sits on must be configured to allow sessions to be saved on the disk. As the saved state only saves the HTML and a couple of inputs, each saved state is generally only a couple of kilobytes.
116 |
117 | ## Notes
118 |
119 | Certain inputs will only include default values and not fully customisable; this is intentional as they are likely to change throughout development and therefore not something that is required at this time of the development process.
120 |
--------------------------------------------------------------------------------
/vignettes/designer.Rmd:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Prototyping Your UI with `designer`"
3 | date: "`r Sys.Date()`"
4 | output: rmarkdown::html_vignette
5 | vignette: >
6 | %\VignetteIndexEntry{Prototyping Your UI with `designer`}
7 | %\VignetteEngine{knitr::rmarkdown}
8 | %\VignetteEncoding{UTF-8}
9 | ---
10 |
11 | `designer` is intended to make the initial generation of a UI wireframe of a shiny application as quick and simple as possible.
12 |
13 | The package contains a `shiny` application that enables the user to build the UI of a `shiny` application by drag and dropping several `shiny` components - such as inputs, outputs and buttons - into one of the available pages in the `{shiny}` package. Once finalised, the R code used to generate the UI can be copied or downloaded to a `ui.R` file, and then the rest of the application like the server logic and styling can be built by the developer.
14 |
15 | The drag-and-drop nature of the application means that it is easy for both R and non-R users to collaborate in designing the UI of their shiny application. Comments can be added to any component so that it is simple to remember what should be included for each input/output.
16 |
17 | To run the application, use `designer::designApp()` or select "Shiny UI Builder" in the Addins.
18 |
19 | ---
20 |
21 | ## Application
22 |
23 | There are several steps in creating the desired application UI:
24 |
25 | ### Page
26 |
27 | First is the choice of page.
28 |
29 | - __Standard Page__ is the most commonly used page in shiny applications.
30 | - __Navigation Bar Page__ is useful when creating multi-page applications.
31 | - __Dashboard Page__ can be used to replicate the `{bs4Dash}` dashboard page.
32 | - __Fluid Page__ takes advantage of the rows and columns to align content.
33 | - __Fill Page__ and __Fixed Page__ are included for cases where the developer has more broad knowledge of HTML and CSS and will adapt the application more once the wireframe is created.
34 |
35 | ### Components
36 |
37 | Next is adding the components to the page. A list of available components mentioned below. When creating components the `{shiny}` function parameters that can affect the look/layout of the UI (e.g. width and labels) are available to customise, but the more server-logic related parameters (e.g. dropdown choices) are left to the application developer later on.
38 |
39 | | Component | `{shiny}` Function | Description |
40 | | -------------- | --------------------------- | ---------------------------------------------- |
41 | | Tab | `tabPanel` | (`navbarPage` only) Adding/Removing a tab |
42 | | Header | `h1` to `h6` | |
43 | | Row | `fluidRow` | |
44 | | Column | `column` | |
45 | | Text | `p`, `ol`, `ul` | Adding text or a list to a page |
46 | | Input Panel | `inputPanel` | |
47 | | Dropdown | `selectInput` | |
48 | | Input | `textInput`, `numericInput`, `textAreaInput`, `passwordInput` | |
49 | | Slider | `sliderInput` | |
50 | | File Input | `fileInput` | |
51 | | Calendar | `dateInput`, `dateRangeInput` | |
52 | | Checkbox | `checkboxInput` | |
53 | | Radio Buttons | `checkboxInput` | |
54 | | Button | `actionButton` | |
55 | | Output | `textOutput`, `verbatimTextOutput`, `plotOutput`, `imageOutput`, `DTOutput`, `uiOutput` | |
56 |
57 | #### `bs4Dash` Components
58 |
59 | | Component | `{bs4Dash}` Function | Description |
60 | | -------------- | --------------------------- | ---------------------------------------------- |
61 | | Tab | `tabItem`, `bs4TabItem` | Adding/Removing a tab |
62 | | Box/Card | `box`, `bs4Card` | |
63 | | User Box/Card | `userBox`, `bs4UserCard` | |
64 | | Info Box | `infoBox`, `bs4InfoBox` | |
65 | | Value Box | `valueBox`, `bs4ValueBox` | |
66 | | Block Quote | `blockQuote` | |
67 | | Callout | `callout` | |
68 |
69 | #### Notes
70 |
71 | A few layout rules have been implemented into the application to try and match the Bootstrap UI framework that aren't always checked in `{shiny}`.
72 |
73 | - Columns can only be added to rows. This matches the [grid system](https://getbootstrap.com/docs/4.6/layout/grid/) Bootstrap have used (which is based off flexbox).
74 | - For a similar reason rows are the only component that can be directly added to columns. Anything can be added into a row (even more columns)
75 | - The only components that are allowed in input panels are inputs and buttons.
76 |
77 | ### Saving
78 |
79 | Once the wireframe is complete, then there is the ability to save the code, either by downloading the file or copying the code. There is also the opportunity to take a screenshot to annotate further if required.
80 |
81 | ## Sharing Designs
82 |
83 | Alternatively you can share it with others using Templates -> Save -> Share. This will generate a URL that when opened by another person (or yourself in the future) will show the saved state of the design and then can be added onto and saved again - this will generate a new URL to share.
84 |
85 | ### Extras
86 |
87 | There are some development tools that have been enabled upon start-up that can be removed to preview the UI as the end user would see the application, such as borders around all components, colouring some empty components like columns and rows, and removing component names from the UI.
88 |
--------------------------------------------------------------------------------
/.github/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Contributor Covenant Code of Conduct
2 |
3 | ## Our Pledge
4 |
5 | We as members, contributors, and leaders pledge to make participation in our
6 | community a harassment-free experience for everyone, regardless of age, body
7 | size, visible or invisible disability, ethnicity, sex characteristics, gender
8 | identity and expression, level of experience, education, socio-economic status,
9 | nationality, personal appearance, race, religion, or sexual identity and
10 | orientation.
11 |
12 | We pledge to act and interact in ways that contribute to an open, welcoming,
13 | diverse, inclusive, and healthy community.
14 |
15 | ## Our Standards
16 |
17 | Examples of behavior that contributes to a positive environment for our
18 | community include:
19 |
20 | * Demonstrating empathy and kindness toward other people
21 | * Being respectful of differing opinions, viewpoints, and experiences
22 | * Giving and gracefully accepting constructive feedback
23 | * Accepting responsibility and apologizing to those affected by our mistakes,
24 | and learning from the experience
25 | * Focusing on what is best not just for us as individuals, but for the overall
26 | community
27 |
28 | Examples of unacceptable behavior include:
29 |
30 | * The use of sexualized language or imagery, and sexual attention or
31 | advances of any kind
32 | * Trolling, insulting or derogatory comments, and personal or political attacks
33 | * Public or private harassment
34 | * Publishing others' private information, such as a physical or email
35 | address, without their explicit permission
36 | * Other conduct which could reasonably be considered inappropriate in a
37 | professional setting
38 |
39 | ## Enforcement Responsibilities
40 |
41 | Community leaders are responsible for clarifying and enforcing our standards
42 | of acceptable behavior and will take appropriate and fair corrective action in
43 | response to any behavior that they deem inappropriate, threatening, offensive,
44 | or harmful.
45 |
46 | Community leaders have the right and responsibility to remove, edit, or reject
47 | comments, commits, code, wiki edits, issues, and other contributions that are
48 | not aligned to this Code of Conduct, and will communicate reasons for moderation
49 | decisions when appropriate.
50 |
51 | ## Scope
52 |
53 | This Code of Conduct applies within all community spaces, and also applies
54 | when an individual is officially representing the community in public spaces.
55 | Examples of representing our community include using an official e-mail
56 | address, posting via an official social media account, or acting as an appointed
57 | representative at an online or offline event.
58 |
59 | ## Enforcement
60 |
61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
62 | reported to the community leaders responsible for enforcement at [INSERT CONTACT
63 | METHOD]. All complaints will be reviewed and investigated promptly and fairly.
64 |
65 | All community leaders are obligated to respect the privacy and security of the
66 | reporter of any incident.
67 |
68 | ## Enforcement Guidelines
69 |
70 | Community leaders will follow these Community Impact Guidelines in determining
71 | the consequences for any action they deem in violation of this Code of Conduct:
72 |
73 | ### 1. Correction
74 |
75 | **Community Impact**: Use of inappropriate language or other behavior deemed
76 | unprofessional or unwelcome in the community.
77 |
78 | **Consequence**: A private, written warning from community leaders, providing
79 | clarity around the nature of the violation and an explanation of why the
80 | behavior was inappropriate. A public apology may be requested.
81 |
82 | ### 2. Warning
83 |
84 | **Community Impact**: A violation through a single incident or series of
85 | actions.
86 |
87 | **Consequence**: A warning with consequences for continued behavior. No
88 | interaction with the people involved, including unsolicited interaction with
89 | those enforcing the Code of Conduct, for a specified period of time. This
90 | includes avoiding interactions in community spaces as well as external channels
91 | like social media. Violating these terms may lead to a temporary or permanent
92 | ban.
93 |
94 | ### 3. Temporary Ban
95 |
96 | **Community Impact**: A serious violation of community standards, including
97 | sustained inappropriate behavior.
98 |
99 | **Consequence**: A temporary ban from any sort of interaction or public
100 | communication with the community for a specified period of time. No public or
101 | private interaction with the people involved, including unsolicited interaction
102 | with those enforcing the Code of Conduct, is allowed during this period.
103 | Violating these terms may lead to a permanent ban.
104 |
105 | ### 4. Permanent Ban
106 |
107 | **Community Impact**: Demonstrating a pattern of violation of community
108 | standards, including sustained inappropriate behavior, harassment of an
109 | individual, or aggression toward or disparagement of classes of individuals.
110 |
111 | **Consequence**: A permanent ban from any sort of public interaction within the
112 | community.
113 |
114 | ## Attribution
115 |
116 | This Code of Conduct is adapted from the [Contributor Covenant][homepage],
117 | version 2.0,
118 | available at https://www.contributor-covenant.org/version/2/0/
119 | code_of_conduct.html.
120 |
121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct
122 | enforcement ladder](https://github.com/mozilla/diversity).
123 |
124 | [homepage]: https://www.contributor-covenant.org
125 |
126 | For answers to common questions about this code of conduct, see the FAQ at
127 | https://www.contributor-covenant.org/faq. Translations are available at https://
128 | www.contributor-covenant.org/translations.
129 |
--------------------------------------------------------------------------------
/R/mod_template_srv.R:
--------------------------------------------------------------------------------
1 | #' @noRd
2 | TemplateModuleServer <- function(id, html, page) {
3 | moduleServer(id, function(input, output, session) {
4 | ns <- session$ns
5 | shared_template_id <- reactiveVal()
6 |
7 | #### Bookmarking ####
8 | setBookmarkExclude(c(
9 | "title", "description", "author",
10 | "save", "save_share",
11 | "overwrite", "overwrite_share",
12 | "existing_template", "save_button", "select",
13 | "delete", "confirm_delete", "search"
14 | ))
15 |
16 | onBookmark(function(state) {
17 | state$values$template <- shared_template_id()
18 | })
19 | onRestore(function(state) {
20 | session$sendCustomMessage(
21 | "runjs",
22 | list(
23 | script = paste0(
24 | "document.querySelector(\".template-option[data-value='", state$values$template, "']\").click()"
25 | )
26 | )
27 | )
28 | })
29 |
30 | #### Modal ####
31 | observeEvent(input$save_button, {
32 | existing_templates <- get_template_index()
33 |
34 | showModal(
35 | modalDialog(
36 | tags$form(
37 | tags$fieldset(
38 | tags$legend("Save Template"),
39 | textInput(ns("title"), "Title", width = "100%"),
40 | textInput(ns("author"), "Author", width = "100%"),
41 | textAreaInput(ns("description"), "Description (optional)", rows = 2L, width = "100%"),
42 | tags$button(
43 | type = "button",
44 | class = "btn btn-secondary",
45 | `data-dismiss` = "modal",
46 | `data-bs-dismiss` = "modal",
47 | "Cancel"
48 | ),
49 | tags$button(
50 | id = ns("save"),
51 | type = "button",
52 | class = "btn btn-primary action-button",
53 | `data-dismiss` = "modal",
54 | `data-bs-dismiss` = "modal",
55 | "Save"
56 | ),
57 | tags$button(
58 | id = ns("save_share"),
59 | type = "button",
60 | class = "btn btn-primary action-button",
61 | `data-dismiss` = "modal",
62 | `data-bs-dismiss` = "modal",
63 | "Share",
64 | shiny::icon("share")
65 | )
66 | ),
67 | if (nrow(existing_templates) > 0L) {
68 | tagList(
69 | tags$hr(),
70 | tags$fieldset(
71 | tags$legend("Overwrite Existing Template"),
72 | selectInput(
73 | ns("existing_template"),
74 | "Template",
75 | choices = setNames(
76 | existing_templates$id,
77 | paste(existing_templates$title, "-", existing_templates$user)
78 | ),
79 | selected = NULL,
80 | width = "100%"
81 | ),
82 | tags$button(
83 | type = "button",
84 | class = "btn btn-secondary",
85 | `data-dismiss` = "modal",
86 | `data-bs-dismiss` = "modal",
87 | "Cancel"
88 | ),
89 | tags$button(
90 | id = ns("overwrite"),
91 | type = "button",
92 | class = "btn btn-primary action-button",
93 | `data-dismiss` = "modal",
94 | `data-bs-dismiss` = "modal",
95 | "Overwrite"
96 | ),
97 | tags$button(
98 | id = ns("overwrite_share"),
99 | type = "button",
100 | class = "btn btn-primary action-button",
101 | `data-dismiss` = "modal",
102 | `data-bs-dismiss` = "modal",
103 | "Share",
104 | shiny::icon("share")
105 | )
106 | )
107 | )
108 | }
109 | ),
110 | title = NULL,
111 | footer = NULL,
112 | easyClose = TRUE
113 | )
114 | )
115 | })
116 |
117 | #### Saving ####
118 | saved_template_id <- reactiveVal()
119 |
120 | observe({
121 | req(input$title, input$author)
122 |
123 | id <- save_template(
124 | html = html(),
125 | page = page(),
126 | title = input$title,
127 | desc = input$description,
128 | user = input$author
129 | )
130 | saved_template_id(id)
131 |
132 | insertUI(
133 | selector = paste0("#", ns("select")),
134 | where = "beforeEnd",
135 | ui = createTemplateSelection(
136 | list(
137 | id = id,
138 | page = page(),
139 | user = input$author,
140 | title = input$title,
141 | description = input$description
142 | )
143 | )
144 | )
145 | }) |>
146 | bindEvent(
147 | input$save,
148 | input$save_share,
149 | ignoreInit = TRUE
150 | )
151 |
152 | observe({
153 | shared_template_id(saved_template_id())
154 | session$doBookmark()
155 | }) |>
156 | bindEvent(
157 | input$save_share,
158 | ignoreInit = TRUE
159 | )
160 |
161 | #### Updating ####
162 | observe({
163 | req(input$overwrite + input$overwrite_share > 0L)
164 | update_template(
165 | html = html(),
166 | id = input$existing_template
167 | )
168 | }) |>
169 | bindEvent(
170 | input$overwrite,
171 | input$overwrite_share,
172 | ignoreInit = TRUE
173 | )
174 |
175 | observe({
176 | shared_template_id(input$existing_template)
177 | session$doBookmark()
178 | }) |>
179 | bindEvent(
180 | input$overwrite_share,
181 | ignoreInit = TRUE
182 | )
183 |
184 | #### Deleting ####
185 | observe({
186 | req(input$delete)
187 | showModal(
188 | modalDialog(
189 | p("Deleting this template will remove for all users. Do you wish to continue?"),
190 | title = "Warning!",
191 | footer = tagList(
192 | tags$button(
193 | type = "button",
194 | class = "btn btn-secondary",
195 | `data-dismiss` = "modal",
196 | `data-bs-dismiss` = "modal",
197 | shiny::icon("xmark"),
198 | "No"
199 | ),
200 | tags$button(
201 | id = ns("confirm_delete"),
202 | type = "button",
203 | class = "btn btn-danger action-button",
204 | `data-dismiss` = "modal",
205 | `data-bs-dismiss` = "modal",
206 | shiny::icon("check"),
207 | "Yes"
208 | )
209 | )
210 | )
211 | )
212 | }) |>
213 | bindEvent(
214 | input$select,
215 | input$delete,
216 | ignoreInit = TRUE
217 | )
218 |
219 | observe({
220 | delete_template(input$select)
221 | removeUI(selector = paste0(".template-option[data-value='", input$select, "']"))
222 | }) |>
223 | bindEvent(
224 | input$confirm_delete,
225 | ignoreInit = TRUE
226 | )
227 |
228 | #### UI Updating ####
229 | selected_template <- reactive({
230 | req(!input$delete)
231 | read_template(input$select)
232 | }) |>
233 | bindEvent(
234 | input$select,
235 | input$delete,
236 | ignoreInit = TRUE
237 | )
238 |
239 | return(selected_template)
240 | })
241 | }
242 |
--------------------------------------------------------------------------------
/srcjs/component/Tab.js:
--------------------------------------------------------------------------------
1 | import { Component } from './Component'
2 |
3 | export class Tab extends Component {
4 | _item = 1
5 |
6 | updateComponent () {};
7 |
8 | getPageType () {
9 | return $('#settings-page_type input:radio:checked').val()
10 | };
11 |
12 | addPage () {
13 | const page_type = this.getPageType()
14 |
15 | const tab_name = $('#sidebar-tab-name').val()
16 | let tab_value = $('#sidebar-tab-value').val()
17 | if (tab_value === '') {
18 | tab_value = this.createID('tab')
19 | } else if (this.checkDuplicateIDs(tab_value, page_type)) {
20 | return
21 | }
22 |
23 | $('#sidebar-tab-alert div').alert('close')
24 |
25 | if (page_type === 'dashboardPage') {
26 | this.addMenuItem(tab_name, tab_value)
27 | } else {
28 | this.addTab(tab_name, tab_value)
29 | }
30 | };
31 |
32 | addTab (tab_name, tab_value) {
33 | const nav_panel = $('ul.navbar-nav')
34 | const nav_id = nav_panel.data('tabsetid')
35 |
36 | const tab_panel = $('.tab-content')
37 | const active_class = tab_panel.html() === '' ? 'active' : ''
38 |
39 | const tab_icon = $('#sidebar-tab-icon').val()
40 | const icon_r = tab_icon === '' ? '' : `, icon = icon("${tab_icon}")`
41 | const icon_class = tab_icon === '' ? '' : $('#sidebar-tab-icon option').html().includes('fab') ? 'fab' : 'fa'
42 | const icon_html = tab_icon === '' ? '' : ``
43 |
44 | nav_panel.append(`
45 |
20 | 
9 |
10 | `{designer}` is intended to make the initial generation of a UI wireframe of a shiny application as quick and simple as possible.
11 |
12 | The package contains a `shiny` application that enables the user to build the UI of a `shiny` application by drag and dropping several `shiny` components - such as inputs, outputs and buttons - into one of the available pages in the `{shiny}` package. Once finalised, the R code used to generate the UI can be copied or downloaded to a `ui.R` file, and then the rest of the application like the server logic and styling can be built by the developer.
13 |
14 | The drag-and-drop nature of the application means that it is easy for both R and non-R users to collaborate in designing the UI of their shiny application. Comments can be added to any component so that it is simple to remember what should be included for each input/output.
15 |
16 | ## Installation
17 |
18 | Install from [CRAN](https://cran.r-project.org/package=designer) with:
19 |
20 | ``` r
21 | install.packages("designer")
22 | ```
23 |
24 | Or install the development version from [GitHub](https://github.com/ashbaldry/designer) with:
25 |
26 | ``` r
27 | devtools::install_github("ashbaldry/designer")
28 | ```
29 |
30 | The application is also available on-line through [shinyapps.io](https://ashbaldry.shinyapps.io/designer).
31 |
32 | ## Usage
33 |
34 | To open the `{designer}` application and create your own UI, run the following code:
35 |
36 | ``` r
37 | designer::designApp()
38 | ```
39 |
40 | Alternatively, you can launch the addin via the RStudio menu.
41 |
42 | 
43 |
44 | Once opened, create the application as required until you are happy with the layout of the application, then copy the code to the relevant R file
45 |
46 | 
47 |
48 | ``` r
49 | # ui.R
50 |
51 | bootstrapPage(
52 | title = "Shiny Application",
53 | theme = bslib::bs_theme(4),
54 | h1(
55 | "My shiny application"
56 | ),
57 | inputPanel(
58 | selectInput(
59 | inputId = "dropdown_gxc2o1ekgb",
60 | label = "Label",
61 | choices = "..."
62 | ),
63 | selectInput(
64 | inputId = "dropdown_azset57v65",
65 | label = "Label",
66 | choices = "..."
67 | ),
68 | selectInput(
69 | inputId = "dropdown_itgcle8yze",
70 | label = "Label",
71 | choices = "..."
72 | )
73 | ),
74 | fluidRow(
75 | column(
76 | width = 6,
77 | # Bar plot
78 | plotOutput(
79 | outputId = "plot_zvu8c9upbu",
80 | height = "200px"
81 | )
82 | ),
83 | column(
84 | width = 6,
85 | # Line chart
86 | plotOutput(
87 | outputId = "plot_qsmfr0lp57",
88 | height = "200px"
89 | )
90 | )
91 | )
92 | )
93 | ```
94 |
95 | ## Docker
96 |
97 | Optionally, you can also build a Dockerized version of the app:
98 |
99 | ```
100 | sudo docker build -t designer -f Dockerfile .
101 | ```
102 |
103 | After building the docker image (which should take a while) use the command:
104 |
105 | ```
106 | docker run -p 80:80 designer
107 | ```
108 |
109 | Depending on your Docker set-up, the exposed application may be available under: http://localhost:80
110 |
111 | ## Sharing Designs
112 |
113 | Once you are ready with your initial design, you can share it with others using Code -> Share. This will generate a URL that when opened by another person (or yourself in the future) will show the saved state of the design and then can be added onto and saved again - this will generate a new URL to share.
114 |
115 | **NB** For bookmarking to work, the server the `{designer}` application sits on must be configured to allow sessions to be saved on the disk. As the saved state only saves the HTML and a couple of inputs, each saved state is generally only a couple of kilobytes.
116 |
117 | ## Notes
118 |
119 | Certain inputs will only include default values and not fully customisable; this is intentional as they are likely to change throughout development and therefore not something that is required at this time of the development process.
120 |
--------------------------------------------------------------------------------
/vignettes/designer.Rmd:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Prototyping Your UI with `designer`"
3 | date: "`r Sys.Date()`"
4 | output: rmarkdown::html_vignette
5 | vignette: >
6 | %\VignetteIndexEntry{Prototyping Your UI with `designer`}
7 | %\VignetteEngine{knitr::rmarkdown}
8 | %\VignetteEncoding{UTF-8}
9 | ---
10 |
11 | `designer` is intended to make the initial generation of a UI wireframe of a shiny application as quick and simple as possible.
12 |
13 | The package contains a `shiny` application that enables the user to build the UI of a `shiny` application by drag and dropping several `shiny` components - such as inputs, outputs and buttons - into one of the available pages in the `{shiny}` package. Once finalised, the R code used to generate the UI can be copied or downloaded to a `ui.R` file, and then the rest of the application like the server logic and styling can be built by the developer.
14 |
15 | The drag-and-drop nature of the application means that it is easy for both R and non-R users to collaborate in designing the UI of their shiny application. Comments can be added to any component so that it is simple to remember what should be included for each input/output.
16 |
17 | To run the application, use `designer::designApp()` or select "Shiny UI Builder" in the Addins.
18 |
19 | ---
20 |
21 | ## Application
22 |
23 | There are several steps in creating the desired application UI:
24 |
25 | ### Page
26 |
27 | First is the choice of page.
28 |
29 | - __Standard Page__ is the most commonly used page in shiny applications.
30 | - __Navigation Bar Page__ is useful when creating multi-page applications.
31 | - __Dashboard Page__ can be used to replicate the `{bs4Dash}` dashboard page.
32 | - __Fluid Page__ takes advantage of the rows and columns to align content.
33 | - __Fill Page__ and __Fixed Page__ are included for cases where the developer has more broad knowledge of HTML and CSS and will adapt the application more once the wireframe is created.
34 |
35 | ### Components
36 |
37 | Next is adding the components to the page. A list of available components mentioned below. When creating components the `{shiny}` function parameters that can affect the look/layout of the UI (e.g. width and labels) are available to customise, but the more server-logic related parameters (e.g. dropdown choices) are left to the application developer later on.
38 |
39 | | Component | `{shiny}` Function | Description |
40 | | -------------- | --------------------------- | ---------------------------------------------- |
41 | | Tab | `tabPanel` | (`navbarPage` only) Adding/Removing a tab |
42 | | Header | `h1` to `h6` | |
43 | | Row | `fluidRow` | |
44 | | Column | `column` | |
45 | | Text | `p`, `ol`, `ul` | Adding text or a list to a page |
46 | | Input Panel | `inputPanel` | |
47 | | Dropdown | `selectInput` | |
48 | | Input | `textInput`, `numericInput`, `textAreaInput`, `passwordInput` | |
49 | | Slider | `sliderInput` | |
50 | | File Input | `fileInput` | |
51 | | Calendar | `dateInput`, `dateRangeInput` | |
52 | | Checkbox | `checkboxInput` | |
53 | | Radio Buttons | `checkboxInput` | |
54 | | Button | `actionButton` | |
55 | | Output | `textOutput`, `verbatimTextOutput`, `plotOutput`, `imageOutput`, `DTOutput`, `uiOutput` | |
56 |
57 | #### `bs4Dash` Components
58 |
59 | | Component | `{bs4Dash}` Function | Description |
60 | | -------------- | --------------------------- | ---------------------------------------------- |
61 | | Tab | `tabItem`, `bs4TabItem` | Adding/Removing a tab |
62 | | Box/Card | `box`, `bs4Card` | |
63 | | User Box/Card | `userBox`, `bs4UserCard` | |
64 | | Info Box | `infoBox`, `bs4InfoBox` | |
65 | | Value Box | `valueBox`, `bs4ValueBox` | |
66 | | Block Quote | `blockQuote` | |
67 | | Callout | `callout` | |
68 |
69 | #### Notes
70 |
71 | A few layout rules have been implemented into the application to try and match the Bootstrap UI framework that aren't always checked in `{shiny}`.
72 |
73 | - Columns can only be added to rows. This matches the [grid system](https://getbootstrap.com/docs/4.6/layout/grid/) Bootstrap have used (which is based off flexbox).
74 | - For a similar reason rows are the only component that can be directly added to columns. Anything can be added into a row (even more columns)
75 | - The only components that are allowed in input panels are inputs and buttons.
76 |
77 | ### Saving
78 |
79 | Once the wireframe is complete, then there is the ability to save the code, either by downloading the file or copying the code. There is also the opportunity to take a screenshot to annotate further if required.
80 |
81 | ## Sharing Designs
82 |
83 | Alternatively you can share it with others using Templates -> Save -> Share. This will generate a URL that when opened by another person (or yourself in the future) will show the saved state of the design and then can be added onto and saved again - this will generate a new URL to share.
84 |
85 | ### Extras
86 |
87 | There are some development tools that have been enabled upon start-up that can be removed to preview the UI as the end user would see the application, such as borders around all components, colouring some empty components like columns and rows, and removing component names from the UI.
88 |
--------------------------------------------------------------------------------
/.github/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Contributor Covenant Code of Conduct
2 |
3 | ## Our Pledge
4 |
5 | We as members, contributors, and leaders pledge to make participation in our
6 | community a harassment-free experience for everyone, regardless of age, body
7 | size, visible or invisible disability, ethnicity, sex characteristics, gender
8 | identity and expression, level of experience, education, socio-economic status,
9 | nationality, personal appearance, race, religion, or sexual identity and
10 | orientation.
11 |
12 | We pledge to act and interact in ways that contribute to an open, welcoming,
13 | diverse, inclusive, and healthy community.
14 |
15 | ## Our Standards
16 |
17 | Examples of behavior that contributes to a positive environment for our
18 | community include:
19 |
20 | * Demonstrating empathy and kindness toward other people
21 | * Being respectful of differing opinions, viewpoints, and experiences
22 | * Giving and gracefully accepting constructive feedback
23 | * Accepting responsibility and apologizing to those affected by our mistakes,
24 | and learning from the experience
25 | * Focusing on what is best not just for us as individuals, but for the overall
26 | community
27 |
28 | Examples of unacceptable behavior include:
29 |
30 | * The use of sexualized language or imagery, and sexual attention or
31 | advances of any kind
32 | * Trolling, insulting or derogatory comments, and personal or political attacks
33 | * Public or private harassment
34 | * Publishing others' private information, such as a physical or email
35 | address, without their explicit permission
36 | * Other conduct which could reasonably be considered inappropriate in a
37 | professional setting
38 |
39 | ## Enforcement Responsibilities
40 |
41 | Community leaders are responsible for clarifying and enforcing our standards
42 | of acceptable behavior and will take appropriate and fair corrective action in
43 | response to any behavior that they deem inappropriate, threatening, offensive,
44 | or harmful.
45 |
46 | Community leaders have the right and responsibility to remove, edit, or reject
47 | comments, commits, code, wiki edits, issues, and other contributions that are
48 | not aligned to this Code of Conduct, and will communicate reasons for moderation
49 | decisions when appropriate.
50 |
51 | ## Scope
52 |
53 | This Code of Conduct applies within all community spaces, and also applies
54 | when an individual is officially representing the community in public spaces.
55 | Examples of representing our community include using an official e-mail
56 | address, posting via an official social media account, or acting as an appointed
57 | representative at an online or offline event.
58 |
59 | ## Enforcement
60 |
61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
62 | reported to the community leaders responsible for enforcement at [INSERT CONTACT
63 | METHOD]. All complaints will be reviewed and investigated promptly and fairly.
64 |
65 | All community leaders are obligated to respect the privacy and security of the
66 | reporter of any incident.
67 |
68 | ## Enforcement Guidelines
69 |
70 | Community leaders will follow these Community Impact Guidelines in determining
71 | the consequences for any action they deem in violation of this Code of Conduct:
72 |
73 | ### 1. Correction
74 |
75 | **Community Impact**: Use of inappropriate language or other behavior deemed
76 | unprofessional or unwelcome in the community.
77 |
78 | **Consequence**: A private, written warning from community leaders, providing
79 | clarity around the nature of the violation and an explanation of why the
80 | behavior was inappropriate. A public apology may be requested.
81 |
82 | ### 2. Warning
83 |
84 | **Community Impact**: A violation through a single incident or series of
85 | actions.
86 |
87 | **Consequence**: A warning with consequences for continued behavior. No
88 | interaction with the people involved, including unsolicited interaction with
89 | those enforcing the Code of Conduct, for a specified period of time. This
90 | includes avoiding interactions in community spaces as well as external channels
91 | like social media. Violating these terms may lead to a temporary or permanent
92 | ban.
93 |
94 | ### 3. Temporary Ban
95 |
96 | **Community Impact**: A serious violation of community standards, including
97 | sustained inappropriate behavior.
98 |
99 | **Consequence**: A temporary ban from any sort of interaction or public
100 | communication with the community for a specified period of time. No public or
101 | private interaction with the people involved, including unsolicited interaction
102 | with those enforcing the Code of Conduct, is allowed during this period.
103 | Violating these terms may lead to a permanent ban.
104 |
105 | ### 4. Permanent Ban
106 |
107 | **Community Impact**: Demonstrating a pattern of violation of community
108 | standards, including sustained inappropriate behavior, harassment of an
109 | individual, or aggression toward or disparagement of classes of individuals.
110 |
111 | **Consequence**: A permanent ban from any sort of public interaction within the
112 | community.
113 |
114 | ## Attribution
115 |
116 | This Code of Conduct is adapted from the [Contributor Covenant][homepage],
117 | version 2.0,
118 | available at https://www.contributor-covenant.org/version/2/0/
119 | code_of_conduct.html.
120 |
121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct
122 | enforcement ladder](https://github.com/mozilla/diversity).
123 |
124 | [homepage]: https://www.contributor-covenant.org
125 |
126 | For answers to common questions about this code of conduct, see the FAQ at
127 | https://www.contributor-covenant.org/faq. Translations are available at https://
128 | www.contributor-covenant.org/translations.
129 |
--------------------------------------------------------------------------------
/R/mod_template_srv.R:
--------------------------------------------------------------------------------
1 | #' @noRd
2 | TemplateModuleServer <- function(id, html, page) {
3 | moduleServer(id, function(input, output, session) {
4 | ns <- session$ns
5 | shared_template_id <- reactiveVal()
6 |
7 | #### Bookmarking ####
8 | setBookmarkExclude(c(
9 | "title", "description", "author",
10 | "save", "save_share",
11 | "overwrite", "overwrite_share",
12 | "existing_template", "save_button", "select",
13 | "delete", "confirm_delete", "search"
14 | ))
15 |
16 | onBookmark(function(state) {
17 | state$values$template <- shared_template_id()
18 | })
19 | onRestore(function(state) {
20 | session$sendCustomMessage(
21 | "runjs",
22 | list(
23 | script = paste0(
24 | "document.querySelector(\".template-option[data-value='", state$values$template, "']\").click()"
25 | )
26 | )
27 | )
28 | })
29 |
30 | #### Modal ####
31 | observeEvent(input$save_button, {
32 | existing_templates <- get_template_index()
33 |
34 | showModal(
35 | modalDialog(
36 | tags$form(
37 | tags$fieldset(
38 | tags$legend("Save Template"),
39 | textInput(ns("title"), "Title", width = "100%"),
40 | textInput(ns("author"), "Author", width = "100%"),
41 | textAreaInput(ns("description"), "Description (optional)", rows = 2L, width = "100%"),
42 | tags$button(
43 | type = "button",
44 | class = "btn btn-secondary",
45 | `data-dismiss` = "modal",
46 | `data-bs-dismiss` = "modal",
47 | "Cancel"
48 | ),
49 | tags$button(
50 | id = ns("save"),
51 | type = "button",
52 | class = "btn btn-primary action-button",
53 | `data-dismiss` = "modal",
54 | `data-bs-dismiss` = "modal",
55 | "Save"
56 | ),
57 | tags$button(
58 | id = ns("save_share"),
59 | type = "button",
60 | class = "btn btn-primary action-button",
61 | `data-dismiss` = "modal",
62 | `data-bs-dismiss` = "modal",
63 | "Share",
64 | shiny::icon("share")
65 | )
66 | ),
67 | if (nrow(existing_templates) > 0L) {
68 | tagList(
69 | tags$hr(),
70 | tags$fieldset(
71 | tags$legend("Overwrite Existing Template"),
72 | selectInput(
73 | ns("existing_template"),
74 | "Template",
75 | choices = setNames(
76 | existing_templates$id,
77 | paste(existing_templates$title, "-", existing_templates$user)
78 | ),
79 | selected = NULL,
80 | width = "100%"
81 | ),
82 | tags$button(
83 | type = "button",
84 | class = "btn btn-secondary",
85 | `data-dismiss` = "modal",
86 | `data-bs-dismiss` = "modal",
87 | "Cancel"
88 | ),
89 | tags$button(
90 | id = ns("overwrite"),
91 | type = "button",
92 | class = "btn btn-primary action-button",
93 | `data-dismiss` = "modal",
94 | `data-bs-dismiss` = "modal",
95 | "Overwrite"
96 | ),
97 | tags$button(
98 | id = ns("overwrite_share"),
99 | type = "button",
100 | class = "btn btn-primary action-button",
101 | `data-dismiss` = "modal",
102 | `data-bs-dismiss` = "modal",
103 | "Share",
104 | shiny::icon("share")
105 | )
106 | )
107 | )
108 | }
109 | ),
110 | title = NULL,
111 | footer = NULL,
112 | easyClose = TRUE
113 | )
114 | )
115 | })
116 |
117 | #### Saving ####
118 | saved_template_id <- reactiveVal()
119 |
120 | observe({
121 | req(input$title, input$author)
122 |
123 | id <- save_template(
124 | html = html(),
125 | page = page(),
126 | title = input$title,
127 | desc = input$description,
128 | user = input$author
129 | )
130 | saved_template_id(id)
131 |
132 | insertUI(
133 | selector = paste0("#", ns("select")),
134 | where = "beforeEnd",
135 | ui = createTemplateSelection(
136 | list(
137 | id = id,
138 | page = page(),
139 | user = input$author,
140 | title = input$title,
141 | description = input$description
142 | )
143 | )
144 | )
145 | }) |>
146 | bindEvent(
147 | input$save,
148 | input$save_share,
149 | ignoreInit = TRUE
150 | )
151 |
152 | observe({
153 | shared_template_id(saved_template_id())
154 | session$doBookmark()
155 | }) |>
156 | bindEvent(
157 | input$save_share,
158 | ignoreInit = TRUE
159 | )
160 |
161 | #### Updating ####
162 | observe({
163 | req(input$overwrite + input$overwrite_share > 0L)
164 | update_template(
165 | html = html(),
166 | id = input$existing_template
167 | )
168 | }) |>
169 | bindEvent(
170 | input$overwrite,
171 | input$overwrite_share,
172 | ignoreInit = TRUE
173 | )
174 |
175 | observe({
176 | shared_template_id(input$existing_template)
177 | session$doBookmark()
178 | }) |>
179 | bindEvent(
180 | input$overwrite_share,
181 | ignoreInit = TRUE
182 | )
183 |
184 | #### Deleting ####
185 | observe({
186 | req(input$delete)
187 | showModal(
188 | modalDialog(
189 | p("Deleting this template will remove for all users. Do you wish to continue?"),
190 | title = "Warning!",
191 | footer = tagList(
192 | tags$button(
193 | type = "button",
194 | class = "btn btn-secondary",
195 | `data-dismiss` = "modal",
196 | `data-bs-dismiss` = "modal",
197 | shiny::icon("xmark"),
198 | "No"
199 | ),
200 | tags$button(
201 | id = ns("confirm_delete"),
202 | type = "button",
203 | class = "btn btn-danger action-button",
204 | `data-dismiss` = "modal",
205 | `data-bs-dismiss` = "modal",
206 | shiny::icon("check"),
207 | "Yes"
208 | )
209 | )
210 | )
211 | )
212 | }) |>
213 | bindEvent(
214 | input$select,
215 | input$delete,
216 | ignoreInit = TRUE
217 | )
218 |
219 | observe({
220 | delete_template(input$select)
221 | removeUI(selector = paste0(".template-option[data-value='", input$select, "']"))
222 | }) |>
223 | bindEvent(
224 | input$confirm_delete,
225 | ignoreInit = TRUE
226 | )
227 |
228 | #### UI Updating ####
229 | selected_template <- reactive({
230 | req(!input$delete)
231 | read_template(input$select)
232 | }) |>
233 | bindEvent(
234 | input$select,
235 | input$delete,
236 | ignoreInit = TRUE
237 | )
238 |
239 | return(selected_template)
240 | })
241 | }
242 |
--------------------------------------------------------------------------------
/srcjs/component/Tab.js:
--------------------------------------------------------------------------------
1 | import { Component } from './Component'
2 |
3 | export class Tab extends Component {
4 | _item = 1
5 |
6 | updateComponent () {};
7 |
8 | getPageType () {
9 | return $('#settings-page_type input:radio:checked').val()
10 | };
11 |
12 | addPage () {
13 | const page_type = this.getPageType()
14 |
15 | const tab_name = $('#sidebar-tab-name').val()
16 | let tab_value = $('#sidebar-tab-value').val()
17 | if (tab_value === '') {
18 | tab_value = this.createID('tab')
19 | } else if (this.checkDuplicateIDs(tab_value, page_type)) {
20 | return
21 | }
22 |
23 | $('#sidebar-tab-alert div').alert('close')
24 |
25 | if (page_type === 'dashboardPage') {
26 | this.addMenuItem(tab_name, tab_value)
27 | } else {
28 | this.addTab(tab_name, tab_value)
29 | }
30 | };
31 |
32 | addTab (tab_name, tab_value) {
33 | const nav_panel = $('ul.navbar-nav')
34 | const nav_id = nav_panel.data('tabsetid')
35 |
36 | const tab_panel = $('.tab-content')
37 | const active_class = tab_panel.html() === '' ? 'active' : ''
38 |
39 | const tab_icon = $('#sidebar-tab-icon').val()
40 | const icon_r = tab_icon === '' ? '' : `, icon = icon("${tab_icon}")`
41 | const icon_class = tab_icon === '' ? '' : $('#sidebar-tab-icon option').html().includes('fab') ? 'fab' : 'fa'
42 | const icon_html = tab_icon === '' ? '' : ``
43 |
44 | nav_panel.append(`
45 |