Merge pull request #2 from ThinkR-open/continue-ui

Continue UI

.Rbuildignore

@@ -14,3 +14,5 @@ $run_dev.*
 ^\.github$
 ^app\.R$
 ^rsconnect$
+^manifest\.json$
+^inst/app/node_modules$

.gitattributes

@@ -0,0 +1 @@
+*.css linguist-detectable=false

.gitignore

@@ -0,0 +1 @@
+node_modules

DESCRIPTION

@@ -11,9 +11,8 @@ Imports:
     bslib,
     config (>= 0.3.2),
     golem (>= 0.4.1),
-    pkgload,
-    sass,
-    shiny (>= 1.9.1)
+    shiny (>= 1.9.1),
+    whereami
 Suggests: 
     spelling,
     testthat (>= 3.0.0)

NAMESPACE

@@ -2,19 +2,21 @@
 
 export(run_app)
 import(shiny)
-importFrom(bslib,bs_add_rules)
-importFrom(bslib,bs_theme)
+importFrom(bslib,accordion)
+importFrom(bslib,accordion_panel)
 importFrom(bslib,input_dark_mode)
+importFrom(bslib,input_task_button)
 importFrom(golem,activate_js)
 importFrom(golem,add_resource_path)
 importFrom(golem,bundle_resources)
 importFrom(golem,favicon)
 importFrom(golem,with_golem_options)
-importFrom(sass,sass_file)
 importFrom(shiny,HTML)
 importFrom(shiny,NS)
 importFrom(shiny,column)
 importFrom(shiny,shinyApp)
 importFrom(shiny,tagAppendAttributes)
 importFrom(shiny,tagList)
 importFrom(shiny,tags)
+importFrom(whereami,cat_where)
+importFrom(whereami,whereami)

R/app_server.R

@@ -5,5 +5,9 @@
 #' @import shiny
 #' @noRd
 app_server <- function(input, output, session) {
+  global <- reactiveValues()
+
   mod_navbar_server("navbar")
+  mod_form_server("form", global = global)
+  mod_preview_server("preview", global = global)
 }

R/app_ui.R

@@ -9,10 +9,22 @@ app_ui <- function(request) {
     # Leave this function for adding external resources
     golem_add_external_resources(),
     # Your application UI logic
-    fixedPage(
-      theme = signature_theme(),
-      mod_navbar_ui("navbar"),
-      div()
+    tagList(
+      useBusyIndicators(
+        spinners = FALSE
+      ),
+      div(
+        class = "container",
+        mod_navbar_ui("navbar"),
+        div(
+          class = "container",
+          div(
+            class = "row",
+            mod_form_ui("form"),
+            mod_preview_ui("preview")
+          )
+        )
+      )
     )
   )
 }
@@ -36,26 +48,27 @@ golem_add_external_resources <- function() {
     bundle_resources(
       path = app_sys("app/www"),
       app_title = "signature.r"
-    )
-    # Add here other external resources
-    # for example, you can add shinyalert::useShinyalert()
-  )
-}
+    ),
+    tags$script(
+      src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js",
+      integrity = "sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz",
+      crossorigin = "anonymous"
+    ),
+    tags$script(
+      src = "https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"
+    ),
+    tags$script(
+      src = "https://www.googletagmanager.com/gtag/js?id=G-CT5YFS6MDQ",
+      async = TRUE
+    ),
+    tags$script(
+      "
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
 
-#' signature_theme
-#'
-#' @importFrom bslib bs_theme bs_add_rules
-#' @importFrom sass sass_file
-#'
-#' @noRd
-signature_theme <- function() {
-  bs_theme(
-    version = 5,
-    primary = "#b8b8dc",
-    secondary = "#f15522",
-    info = "#494955"
-  ) |>
-    bs_add_rules(
-      sass_file(app_sys("app", "www", "signature.scss"))
+        gtag('config', 'G-CT5YFS6MDQ');
+      "
     )
+  )
 }

R/mod_form.R

@@ -0,0 +1,131 @@
+#' form UI Function
+#'
+#' @description A shiny Module.
+#'
+#' @importFrom bslib accordion accordion_panel
+#'
+#' @param id,input,output,session Internal parameters for {shiny}.
+#'
+#' @noRd
+#'
+#' @importFrom shiny NS tagList
+mod_form_ui <- function(id) {
+  ns <- NS(id)
+  tagList(
+    div(
+      class = "col-lg-5 col-md-12 p-3",
+      div(
+        class = "row",
+        accordion(
+          id = "form-accordion",
+          multiple = FALSE,
+          accordion_panel(
+            title = "Personal information",
+            tagList(
+              textInput(
+                inputId = ns("firstname"),
+                label = "First name",
+                placeholder = "John",
+                width = "100%"
+              ),
+              textInput(
+                inputId = ns("lastname"),
+                label = "Last name",
+                placeholder = "Doe",
+                width = "100%"
+              )
+            )
+          ),
+          accordion_panel(
+            title = "Business information",
+            tagList(
+              textInput(
+                inputId = ns("job_title"),
+                label = "Job title",
+                placeholder = "Data Scientist",
+                width = "100%"
+              ),
+              textInput(
+                inputId = ns("email"),
+                label = "Email",
+                placeholder = "[email protected]",
+                width = "100%"
+              ),
+              textInput(
+                inputId = ns("phone"),
+                label = "Phone number",
+                value = NULL,
+                placeholder = "+33(0) xx xx xx xx",
+                width = "100%"
+              )
+            )
+          ),
+          accordion_panel(
+            title = "Details about this application",
+            tagList(
+              p(
+                "This application is a demonstration of the use of the shiny library with R."
+              ),
+              p(
+                "You can enter your personal and professional information in the form on the left. Then you can preview the rendering of your signature on the right."
+              ),
+              p("Then you can copy the signature to your clipboard."),
+              p("You love this application and you would like to reuse it?"),
+              p("Discover how to do it on the GitHub repository."),
+              a(
+                "Explore the code of this application on GitHub.",
+                href = "https://github.com/ThinkR-open/signature.r/",
+                target = "_blank",
+              )
+            )
+          )
+        )
+      )
+    )
+  )
+}
+
+#' form Server Functions
+#'
+#' @importFrom whereami whereami cat_where
+#'
+#' @noRd
+mod_form_server <- function(id, global) {
+  moduleServer(id, function(input, output, session) {
+    ns <- session$ns
+
+    observeEvent(
+      c(
+        input$firstname,
+        input$lastname,
+        input$job_title,
+        input$email,
+        input$phone
+      ),
+      ignoreInit = FALSE,
+      {
+        cat_where(whereami())
+
+        lapply(
+          c("firstname", "lastname", "job_title", "email", "phone"),
+          function(x) {
+            global[[x]] <- if (is.null(input[[x]]) | input[[x]] == "") {
+              sprintf("{{%s}}", x)
+            } else {
+              input[[x]]
+            }
+          }
+        )
+
+        global$phone_url <- sprintf("tel:%s", global$phone)
+        global$email_url <- sprintf("mailto:%s", global$email)
+      }
+    )
+  })
+}
+
+## To be copied in the UI
+# mod_form_ui("form")
+
+## To be copied in the server
+# mod_form_server("form")

R/mod_preview.R

@@ -0,0 +1,97 @@
+#' preview UI Function
+#'
+#' @description A shiny Module.
+#'
+#' @param id,input,output,session Internal parameters for {shiny}.
+#'
+#' @importFrom bslib input_task_button
+#'
+#' @noRd
+#'
+#' @importFrom shiny NS tagList
+mod_preview_ui <- function(id) {
+  ns <- NS(id)
+  tagList(
+    div(
+      class = "col-lg-7 col-md-12 p-3",
+      div(
+        class = "card",
+        div(
+          class = "card-header bg-ligth",
+          div(
+            class = "buttons",
+            div(class = "close"),
+            div(class = "minimize"),
+            div(class = "zoom"),
+          )
+        ),
+        div(
+          class = "card-body row gy-4",
+          div(
+            id = "intro",
+            p("Hello the team!"),
+            p("You can edit your signature from this interface."),
+            p("Then you'll just have to insert it as your signature."),
+            HTML("Thank you &#128513")
+          ),
+          div(
+            id = "signature",
+            uiOutput(ns("preview"))
+          )
+        ),
+        div(
+          class = "card-footer bg-transparent border-top-0",
+          input_task_button(
+            id = ns("copy"),
+            label = " Copy to clipboard",
+            icon = icon("copy fa-solid"),
+            label_busy = "Copied!",
+            icon_busy = icon("check"),
+            `data-clipboard-target` = "#signature",
+            class = "btn-info btn-md",
+            style = "width: 100%;"
+          )
+        )
+      )
+    )
+  )
+}
+
+#' preview Server Functions
+#'
+#' @noRd
+mod_preview_server <- function(id, global) {
+  moduleServer(id, function(input, output, session) {
+    ns <- session$ns
+
+    output$preview <- renderUI({
+      htmlTemplate(
+        filename = app_sys(
+          "app", "www", "template", "template.html"
+        ),
+        firstname = global$firstname,
+        lastname = global$lastname,
+        job_title = global$job_title,
+        email = global$email,
+        email_url = global$email_url,
+        phone = global$phone,
+        phone_url = global$phone_url
+      )
+    })
+
+    observeEvent(input$copy, {
+      Sys.sleep(0.75)
+      showNotification(
+        "Paste the signature in your email client",
+        type = "default",
+        duration = 5
+      )
+    })
+  })
+}
+
+## To be copied in the UI
+# mod_preview_ui("preview")
+
+## To be copied in the server
+# mod_preview_server("preview")

dev/02_dev.R

@@ -21,6 +21,8 @@ attachment::att_amend_desc()
 ## Add modules ----
 ## Create a module infrastructure in R/
 golem::add_module(name = "navbar", with_test = TRUE)
+golem::add_module(name = "form", with_test = TRUE)
+golem::add_module(name = "preview", with_test = TRUE)
 
 ## Add helper functions ----
 ## Creates fct_* and utils_*

dev/run_dev.R

@@ -11,5 +11,14 @@ golem::detach_all_attached()
 # Document and reload your package
 golem::document_and_reload()
 
+# Sass code compilation
+sass::sass(
+  input = sass::sass_file(
+    "inst/app/signature.scss"
+  ),
+  output = "inst/app/www/signature.css",
+  cache = NULL
+)
+
 # Run the application
 run_app()