bulma.R: Bulma CSS Framework for R

bulma_demo_elements <- function() {

  bulma_demo_nav(
    size = "small",
    "Button"       = bulma_demo_elements_button(),
    "Icon"         = bulma_demo_elements_icon(),
    "Image"        = bulma_demo_elements_image(),
    "Notification" = bulma_demo_elements_notification(),
    "Progress Bar" = bulma_demo_elements_progress_bar(),
    "Table"        = bulma_demo_elements_table(),
    "Tag"          = bulma_demo_elements_tag(),
    "Text"         = bulma_demo_elements_text()
  )

}

bulma_demo_elements_button <- function() {

  bulma_container(
    bulma_title("Buttons"),
    bulma_subtitle("The classic button, in different colors, sizes, states"),
    bulma_demo_side(
      bulma_buttons(
        bulma_button(
          "Anchor",
          tag = tags$a
        ),
        bulma_button(
          "Button",
          tag = tags$button
        ),
        bulma_form_button(
          type = "submit",
          name = "submit"
        ),
        bulma_form_button(
          type = "reset",
          name = "reset"
        )
      )
    ),
    bulma_demo_side(
      width = 60L,
      bulma_buttons(
        bulma_button(color = "white", "White"),
        bulma_button(color = "light", "Light"),
        bulma_button(color = "dark", "Dark"),
        bulma_button(color = "black", "Black"),
        bulma_button(color = "text", "Text"),
        bulma_button(color = "primary", "Primary"),
        bulma_button(color = "link", "Link"),
        bulma_button(color = "info", "Info"),
        bulma_button(color = "success", "Success"),
        bulma_button(color = "warning", "Warning"),
        bulma_button(color = "danger", "Danger"),
        bulma_button(color = "primary", "Primary", shade = "light"),
        bulma_button(color = "link", "Link", shade = "light"),
        bulma_button(color = "info", "Info", shade = "light"),
        bulma_button(color = "success", "Success", shade = "light"),
        bulma_button(color = "warning", "Warning", shade = "light"),
        bulma_button(color = "danger", "Danger", shade = "light")
      )
    ),
    bulma_demo_side(
      bulma_buttons(
        bulma_button(size = "small", "Small"),
        bulma_button("Default"),
        bulma_button(size = "normal", "Normal"),
        bulma_button(size = "medium", "Medium"),
        bulma_button(size = "large", "Large")
      )
    ),
    bulma_demo_side(
      bulma_buttons(
        size = "small",
        bulma_button("Small"),
        bulma_button("Small"),
        bulma_button("Small"),
        bulma_button(size = "normal", "Normal"),
        bulma_button("Small")
      )
    ),
    bulma_demo_side(
      width = 60L,
      bulma_buttons(
        bulma_button("Small", size = "small", full_width = TRUE),
        bulma_button("Normal", size = "normal", full_width = TRUE),
        bulma_button("Medium", size = "medium", full_width = TRUE),
        bulma_button("Large", size = "large", full_width = TRUE)
      )
    ),
    bulma_demo_side(
      width = 60L,
      bulma_buttons(
        bulma_button(color = "primary", "Primary", outlined = TRUE),
        bulma_button(color = "link", "Link", outlined = TRUE),
        bulma_button(color = "info", "Info", outlined = TRUE),
        bulma_button(color = "success", "Success", outlined = TRUE),
        bulma_button(color = "warning", "Warning", outlined = TRUE),
        bulma_button(color = "danger", "Danger", outlined = TRUE)
      )
    ),
    bulma_demo_side(
      width = 60L,
      bulma_buttons(
        bulma_button(color = "primary", "Primary", inverted = TRUE),
        bulma_button(color = "link", "Link", inverted = TRUE),
        bulma_button(color = "info", "Info", inverted = TRUE),
        bulma_button(color = "success", "Success", inverted = TRUE),
        bulma_button(color = "warning", "Warning", inverted = TRUE),
        bulma_button(color = "danger", "Danger", inverted = TRUE)
      )
    ),
    bulma_demo_side(
      width = 60L,
      bulma_buttons(
        bulma_button(color = "primary", "Normal"),
        bulma_button(color = "primary", "Hovered", state = "hovered"),
        bulma_button(color = "primary", "Focused", state = "focused"),
        bulma_button(color = "primary", "Active", state = "active"),
        bulma_button(color = "primary", "Static", state = "static"),
        bulma_button(color = "primary", "Loading", state = "loading"),
        bulma_button(color = "primary", "Disabled", disabled = TRUE)
      )
    ),
    bulma_demo_side(
      width = 60L,
      bulma_buttons(
        bulma_button(bulma_icon("fas fa-bold")),
        bulma_button(bulma_icon("fas fa-italic")),
        bulma_button(bulma_icon("fas fa-underline"))
      )
    ),
    bulma_demo_side(
      width = 60L,
      bulma_buttons(
        bulma_button(
          color = "info",
          bulma_icon("fab fa-twitter"),
          tags$span("@tjpalanca")
        )
      )
    ),
    bulma_demo_side(
      width = 60L,
      bulma_buttons(
        bulma_button(
          size = "large",
          bulma_icon("fas fa-heading", size = "small")
        ),
        bulma_button(
          size = "large",
          bulma_icon("fas fa-heading fa-lg", size = "medium")
        ),
        bulma_button(
          size = "large",
          bulma_icon("fas fa-heading fa-2x", size = "large")
        )
      )
    ),
    bulma_demo_side(
      width = 60L,
      bulma_form_field(
        grouped = TRUE,
        bulma_form_control(bulma_button(color = "primary", "Save")),
        bulma_form_control(bulma_button(color = "warning", "Cancel")),
        bulma_form_control(bulma_button(color = "danger", "Delete"))
      )
    ),
    bulma_demo_side(
      width = 60L,
      bulma_form_field(
        attach = TRUE,
        bulma_form_control(
          bulma_button(bulma_icon("fas fa-align-left"), span("Left"))
        ),
        bulma_form_control(
          bulma_button(bulma_icon("fas fa-align-center"), span("Center"))
        ),
        bulma_form_control(
          bulma_button(bulma_icon("fas fa-align-right"), span("Right"))
        )
      )
    ),
    bulma_demo_side(
      bulma_button_delete()
    ),
    bulma_demo_side(
      bulma_button_group(
        bulma_form_control(bulma_form_button(name = "hello", "Hello!")),
        bulma_form_control(bulma_form_button(name = "hi", "Hi!"))
      )
    ),
    bulma_demo_side(
      bulma_button_group(
        attach = TRUE,
        bulma_form_control(bulma_form_button(name = "hello", "Hello!")),
        bulma_form_control(bulma_form_button(name = "hi", "Hi!"))
      )
    )
  )

}

bulma_demo_elements_icon <- function() {

  bulma_container(
    bulma_title("Icon"),
    bulma_subtitle("Bulma is compatible with all icon font libraries"),
    bulma_demo_side(
      bulma_icon("fas fa-inbox fa-5x", size = "large")
    ),
    bulma_demo_side(
      bulma_icon_text(
        bulma_icon("fas fa-inbox"),
        span("Inbox")
      )
    ),
    bulma_demo_side(
      bulma_icon_text(
        bulma_icon("fas fa-train"),
        span("Paris"),
        bulma_icon("fas fa-arrow-right"),
        span("Berlin"),
        bulma_icon("fas fa-arrow-right"),
        span("Istanbul"),
        bulma_icon("fas fa-flag-checkered")
      )
    ),
    bulma_demo_side(
      bulma_content(
        "Want to go to dinner ",
        bulma_icon("fas fa-utensils"), " with me?"
      )
    ),
    bulma_demo_side(
      div(
        bulma_icon_text(
          inline = FALSE,
          bulma_icon(color = "info", "fas fa-info"),
          span("Information")
        ),
        "Your package is on the way."
      )
    ),
    bulma_demo_side(
      bulma_icon_text(
        inline = FALSE,
        color = "warning",
        bulma_icon("fas fa-exclamation-triangle"),
        span("EMERGENCY ALERT")
      )
    ),
    bulma_demo_side(
      div(
        bulma_icon("fas fa-spinner fa-pulse"),
        bulma_icon("fas fa-border fa-camera"),
        bulma_icon(c(
          "fas fa-camera fa-stack-1x",
          "fas fa-ban fa-stack-2x has-text-danger"
        ), size = "large", stack = "fa-lg")
      )
    )
  )

}

bulma_demo_elements_image <- function() {

  bulma_container(
    bulma_title("Image"),
    bulma_subtitle("A container for responsive images"),
    bulma_demo_side(
      do.call(
        div,
        map(
          c(16L, 24L, 32L, 48L, 64L, 96L, 128L),
          ~bulma_image(
            src = glue("https://via.placeholder.com/{.}"),
            square = .
          )
        )
      )
    ),
    bulma_demo_side(
      bulma_image(
        rounded = TRUE,
        square = 128L,
        src = "https://via.placeholder.com/128"
      )
    ),
    bulma_demo_side(
      do.call(
        function(...) div(style = css(max_width = "200px"), ...),
        map(
          c("square", "1by1", "5by4", "4by3", "3by2",
            "5by3", "16by9", "2by1", "3by1", "4by5",
            "3by4", "2by3", "3by5", "9by16", "1by2",
            "1by3"),
          ~bulma_image(
            ratio = .,
            src = "https://via.placeholder.com/128"
          )
        )
      )
    )
  )

}

bulma_demo_elements_notification <- function() {

  bulma_container(
    bulma_title("Notification"),
    bulma_subtitle("Bold notification blocks, to alert users of something"),
    bulma_demo_side(
      bulma_notification(
        bulma_button_delete(),
        stri_rand_lipsum(1L)
      )
    ),
    bulma_demo_side(
      bulma_notification(
        color = "info",
        bulma_button_delete(),
        stri_rand_lipsum(1L)
      )
    ),
    bulma_demo_side(
      bulma_notification(
        color = "info",
        light = TRUE,
        bulma_button_delete(),
        stri_rand_lipsum(1L)
      )
    )
  )

}

bulma_demo_elements_progress_bar <- function() {

  bulma_container(
    bulma_title("Progress Bar"),
    bulma_subtitle("Native HTML progress bars"),
    bulma_demo_side(
      bulma_progress_bar(value = 15, max = 100)
    ),
    bulma_demo_side(
      bulma_progress_bar(value = 60, max = 100, color = "link")
    ),
    bulma_demo_side(
      bulma_progress_bar(value = 80, max = 100, size = "large")
    ),
    bulma_demo_side(
      bulma_progress_bar(size = "small", color = "warning")
    )
  )

}

bulma_demo_elements_table <- function() {

  bulma_container(
    bulma_title("Table"),
    bulma_subtitle("The inevitable HTML table, with special case cells"),
    bulma_demo_side(
      width = 60L,
      bulma_table(
        bulma_table_header(
          bulma_table_row(
            bulma_table_heading("Name"),
            bulma_table_heading("Company"),
            bulma_table_heading("Status")
          )
        ),
        bulma_table_body(
          bulma_table_row(
            bulma_table_cell("Mary Poppins"),
            bulma_table_cell("Popcorn Inc."),
            bulma_table_cell("Performing")
          ),
          bulma_table_row(
            selected = TRUE,
            bulma_table_cell("Andrew Starburst"),
            bulma_table_cell("Star Apple Inc."),
            bulma_table_cell("Bankrupt")
          ),
          bulma_table_row(
            bulma_table_cell("Patrick Denmark"),
            bulma_table_cell("Triangle Second Inc."),
            bulma_table_cell("Performing")
          )
        )
      )
    ),
    bulma_demo_side(
      width = 60L,
      bulma_table(
        bordered = TRUE,
        bulma_table_header(
          bulma_table_row(
            bulma_table_heading("Name"),
            bulma_table_heading("Company"),
            bulma_table_heading("Status")
          )
        ),
        bulma_table_body(
          bulma_table_row(
            bulma_table_cell("Mary Poppins"),
            bulma_table_cell("Popcorn Inc."),
            bulma_table_cell("Performing")
          ),
          bulma_table_row(
            bulma_table_cell("Patrick Denmark"),
            bulma_table_cell("Triangle Second Inc."),
            bulma_table_cell("Performing")
          )
        )
      )
    ),
    bulma_demo_side(
      width = 60L,
      bulma_table(
        striped = TRUE,
        bulma_table_header(
          bulma_table_row(
            bulma_table_heading("Name"),
            bulma_table_heading("Company"),
            bulma_table_heading("Status")
          )
        ),
        bulma_table_body(
          bulma_table_row(
            bulma_table_cell("Mary Poppins"),
            bulma_table_cell("Popcorn Inc."),
            bulma_table_cell("Performing")
          ),
          bulma_table_row(
            bulma_table_cell("Patrick Denmark"),
            bulma_table_cell("Triangle Second Inc."),
            bulma_table_cell("Performing")
          )
        )
      )
    ),
    bulma_demo_side(
      width = 60L,
      bulma_table(
        narrow = TRUE,
        bulma_table_header(
          bulma_table_row(
            bulma_table_heading("Name"),
            bulma_table_heading("Company"),
            bulma_table_heading("Status")
          )
        ),
        bulma_table_body(
          bulma_table_row(
            bulma_table_cell("Mary Poppins"),
            bulma_table_cell("Popcorn Inc."),
            bulma_table_cell("Performing")
          ),
          bulma_table_row(
            bulma_table_cell("Patrick Denmark"),
            bulma_table_cell("Triangle Second Inc."),
            bulma_table_cell("Performing")
          )
        )
      )
    ),
    bulma_demo_side(
      width = 60L,
      bulma_table(
        hoverable = TRUE,
        bulma_table_header(
          bulma_table_row(
            bulma_table_heading("Name"),
            bulma_table_heading("Company"),
            bulma_table_heading("Status")
          )
        ),
        bulma_table_body(
          bulma_table_row(
            bulma_table_cell("Mary Poppins"),
            bulma_table_cell("Popcorn Inc."),
            bulma_table_cell("Performing")
          ),
          bulma_table_row(
            bulma_table_cell("Patrick Denmark"),
            bulma_table_cell("Triangle Second Inc."),
            bulma_table_cell("Performing")
          )
        )
      )
    ),
    bulma_demo_side(
      width = 60L,
      bulma_table(
        fullwidth = TRUE,
        bulma_table_header(
          bulma_table_row(
            bulma_table_heading("Name"),
            bulma_table_heading("Company"),
            bulma_table_heading("Status")
          )
        ),
        bulma_table_body(
          bulma_table_row(
            bulma_table_cell("Mary Poppins"),
            bulma_table_cell("Popcorn Inc."),
            bulma_table_cell("Performing")
          ),
          bulma_table_row(
            bulma_table_cell("Patrick Denmark"),
            bulma_table_cell("Triangle Second Inc."),
            bulma_table_cell("Performing")
          )
        ),
        bulma_table_footer(
          bulma_table_row(
            bulma_table_cell("Name"),
            bulma_table_cell("Company"),
            bulma_table_cell("Status")
          )
        )
      )
    ),
    bulma_demo_side(
      width = 60L,
      style = css("overflow" = "scroll"),
      bulma_table_container(
        bulma_table(
          bulma_table_header(
            exec(
              bulma_table_row,
              !!!map(1:30, bulma_table_heading)
            )
          ),
          bulma_table_body(
            exec(
              bulma_table_row,
              !!!map(31:60, bulma_table_cell)
            ),
            exec(
              bulma_table_row,
              !!!map(61:90, bulma_table_cell)
            )
          )
        )
      )
    )
  )

}

bulma_demo_elements_tag <- function() {

  bulma_container(
    bulma_title("Tags"),
    bulma_subtitle("Small tag labels to insert anywhere"),
    bulma_demo_side(
      tagList(
        do.call(
          bulma_tags,
          map(
            c("primary", "link", "info", "success", "warning", "danger",
              "white", "black", "light", "dark"),
            ~bulma_tag(color = ., .)
          )
        ),
        do.call(
          bulma_tags,
          map(
            c("primary", "link", "info", "success", "warning", "danger"),
            ~bulma_tag(color = ., ., light = TRUE)
          )
        )
      )
    ),
    bulma_demo_side(
      do.call(
        bulma_tags,
        map(c("small", "normal", "medium", "large"),
            ~bulma_tag(size = ., .))
      )
    ),
    bulma_demo_side(
      do.call(
        function(...) bulma_tags(size = "large", ...),
        map(c("these", "are", "all", "large"), bulma_tag)
      )
    ),
    bulma_demo_side(
      bulma_tags(
        bulma_tag(rounded = TRUE, "Rounded Tag", color = "warning"),
        bulma_tag(delete = TRUE, color = "danger"),
        bulma_tag("Deletable Tag", bulma_button_delete(), color = "link")
      )
    ),
    bulma_demo_side(
      do.call(
        bulma_tags,
        map(1:50, bulma_tag)
      )
    ),
    bulma_demo_side(
      bulma_tags(attach = TRUE,
                 bulma_tag(color = "dark", "Repository"),
                 bulma_tag(color = "primary", "Basis Engine"))
    ),
    bulma_demo_side(
      bulma_form_field(
        grouped = TRUE,
        bulma_form_control(
          bulma_tags(attach = TRUE,
                     bulma_tag(color = "dark", "Repository"),
                     bulma_tag(color = "primary", "Basis Engine"))
        ),
        bulma_form_control(
          bulma_tags(attach = TRUE,
                     bulma_tag(color = "dark", "Status"),
                     bulma_tag(color = "success", "Stable"))
        )
      )
    )
  )

}

bulma_demo_elements_text <- function() {

  bulma_container(
    bulma_title("Text"),
    bulma_subtitle("Typography inside Bulma"),
    bulma_demo_side(
      div(
        bulma_title("This is the title"),
        bulma_subtitle("This is the subtitle")
      )
    ),
    bulma_demo_side(
      div(
        bulma_title(size = 1L, "This is the title"),
        bulma_subtitle(size = 3L, "This is the subtitle")
      )
    ),
    bulma_demo_side(
      div(
        bulma_title(size = 4L, "This is the title", spaced = TRUE),
        bulma_subtitle(size = 6L, "This is the subtitle")
      )
    )
  )

}