Merge pull request #2 from ThinkR-open/create-layout-components

Create layout components

DESCRIPTION

@@ -1,6 +1,6 @@
 Package: clemantine
 Title: Mantine.dev React Components Library
-Version: 0.1.0
+Version: 0.2.0
 Authors@R: 
     person("Arthur", "Bréant", , "[email protected]", role = c("aut", "cre"))
 Description: A kit of tools to use mantine components in R.

NAMESPACE

@@ -1,7 +1,25 @@
 # Generated by roxygen2: do not edit by hand
 
+export(a)
+export(cl_aspect_ratio)
+export(cl_center)
+export(cl_container)
+export(cl_flex)
+export(cl_grid)
+export(cl_grid_col)
+export(cl_group)
+export(cl_simple_grid)
+export(cl_space)
+export(cl_stack)
 export(clemantine_dependency)
 export(clemantine_page)
+export(div)
+export(img)
+export(tags)
+importFrom(htmltools,a)
+importFrom(htmltools,div)
 importFrom(htmltools,htmlDependency)
+importFrom(htmltools,img)
+importFrom(htmltools,tags)
 importFrom(shiny.react,asProps)
 importFrom(shiny.react,reactElement)

NEWS.md

@@ -1,3 +1,7 @@
+# clemantine 0.2.0
+
+- Add Layout components to clemantine
+
 # clemantine 0.1.0
 
 - Create clemantine page

R/layout.R

@@ -0,0 +1,91 @@
+#' AspectRatio component
+#'
+#' @family layout
+#' @param ... Additional arguments to be passed to the component.
+#' @references
+#' [AspectRatio documentation](https://mantine.dev/core/aspect-ratio/)
+#' @export
+cl_aspect_ratio <- core_component("AspectRatio")
+
+#' Center component
+#'
+#' @family layout
+#' @param ... Additional arguments to be passed to the component.
+#' @references
+#' [Center documentation](https://mantine.dev/core/center/)
+#' @export
+cl_center <- core_component("Center")
+
+#' Container component
+#'
+#' @family layout
+#' @param ... Additional arguments to be passed to the component.
+#' @references
+#' [Container documentation](https://mantine.dev/core/container/)
+#' @export
+cl_container <- core_component("Container")
+
+#' Flex component
+#'
+#' @family layout
+#' @param ... Additional arguments to be passed to the component.
+#' @references
+#' [Flex documentation](https://mantine.dev/core/flex/)
+#' @export
+cl_flex <- core_component("Flex")
+
+#' Grid component
+#'
+#' @family layout
+#' @family grid
+#' @param ... Additional arguments to be passed to the component.
+#' @references
+#' [Grid documentation](https://mantine.dev/core/grid/)
+#' @export
+cl_grid <- core_component("Grid")
+
+#' Grid col component
+#'
+#' @family layout
+#' @family grid
+#' @param ... Additional arguments to be passed to the component.
+#' @references
+#' [Grid documentation](https://mantine.dev/core/grid/)
+#' @export
+cl_grid_col <- core_component("GridCol")
+
+#' SimpleGrid component
+#'
+#' @family layout
+#' @param ... Additional arguments to be passed to the component.
+#' @references
+#' [SimpleGrid documentation](https://mantine.dev/core/simple-grid/)
+#' @export
+cl_simple_grid <- core_component("SimpleGrid")
+
+#' Group component
+#'
+#' @family layout
+#' @param ... Additional arguments to be passed to the component.
+#' @references
+#' [Group documentation](https://mantine.dev/core/group/)
+#' @export
+cl_group <- core_component("Group")
+
+#' Space component
+#'
+#' @family layout
+#' @param ... Additional arguments to be passed to the component.
+#' @references
+#' [Space documentation](https://mantine.dev/core/space/)
+#' @export
+cl_space <- core_component("Space")
+
+#' Stack component
+#'
+#' @family layout
+#' @param ... Additional arguments to be passed to the component.
+#' @references
+#' [Stack documentation](https://mantine.dev/core/stack/)
+#' @export
+cl_stack <- core_component("Stack")

R/reexports.R

@@ -0,0 +1,15 @@
+#' @importFrom htmltools tags
+#' @export
+htmltools::tags
+
+#' @importFrom htmltools div
+#' @export
+htmltools::div
+
+#' @importFrom htmltools img
+#' @export
+htmltools::img
+
+#' @importFrom htmltools a
+#' @export
+htmltools::a

inst/examples/layout/aspect_ratio/app.R

@@ -0,0 +1,19 @@
+library(shiny)
+library(clemantine)
+
+ui <- clemantine_page(
+  cl_aspect_ratio(
+    ratio = list(1080 / 720),
+    maw = 800,
+    mx = "auto",
+    img(
+      src = "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-5.png"
+    )
+  )
+)
+
+server <- function(input, output, session) {}
+
+if (interactive()) {
+  shinyApp(ui, server)
+}

inst/examples/layout/center/app.R

@@ -0,0 +1,17 @@
+library(shiny)
+library(clemantine)
+
+ui <- clemantine_page(
+  cl_center(
+    maw = 400,
+    h = 100,
+    bg = "var(--mantine-color-gray-light)",
+    "Hello {clemantine}!"
+  )
+)
+
+server <- function(input, output, session) {}
+
+if (interactive()) {
+  shinyApp(ui, server)
+}

inst/examples/layout/container/app.R

@@ -0,0 +1,38 @@
+library(shiny)
+library(clemantine)
+
+ui <- clemantine_page(
+  cl_container(
+    bg = "var(--mantine-color-blue-light)",
+    h = 50,
+    mt = "md",
+    "First row"
+  ),
+  cl_container(
+    size = "xs",
+    bg = "var(--mantine-color-blue-light)",
+    h = 50,
+    mt = "md",
+    "Second xs row"
+  ),
+  cl_container(
+    size = "xl",
+    bg = "var(--mantine-color-blue-light)",
+    h = 50,
+    mt = "md",
+    "Third xl row"
+  ),
+  cl_container(
+    fluid = TRUE,
+    bg = "var(--mantine-color-blue-light)",
+    h = 50,
+    mt = "md",
+    "Fourth fluid row"
+  ),
+)
+
+server <- function(input, output, session) {}
+
+if (interactive()) {
+  shinyApp(ui, server)
+}

inst/examples/layout/flex/app.R

@@ -0,0 +1,78 @@
+library(shiny)
+library(clemantine)
+
+default_style <- "
+  border: 1px solid white;
+  padding: 10px;
+  border-radius: 5px;
+  color: white;
+"
+
+ui <- clemantine_page(
+  cl_flex(
+    justify = "center",
+    align = "center",
+    direction = "row",
+    gap = "xl",
+    bg = "blue",
+    h = 225,
+    div(
+      style = default_style,
+      "1"
+    ),
+    div(
+      style = default_style,
+      "2"
+    ),
+    div(
+      style = default_style,
+      "3"
+    )
+  ),
+  cl_flex(
+    justify = "center",
+    align = "center",
+    direction = "column",
+    gap = "xl",
+    bg = "violet",
+    h = 225,
+    div(
+      style = default_style,
+      "1"
+    ),
+    div(
+      style = default_style,
+      "2"
+    ),
+    div(
+      style = default_style,
+      "3"
+    )
+  ),
+  cl_flex(
+    justify = "flex-start",
+    align = "center",
+    direction = "row-reverse",
+    gap = "xl",
+    bg = "grape",
+    h = 225,
+    div(
+      style = default_style,
+      "1"
+    ),
+    div(
+      style = default_style,
+      "2"
+    ),
+    div(
+      style = default_style,
+      "3"
+    )
+  )
+)
+
+server <- function(input, output, session) {}
+
+if (interactive()) {
+  shinyApp(ui, server)
+}

inst/examples/layout/grid/app.R

@@ -0,0 +1,48 @@
+library(shiny)
+library(clemantine)
+
+default_style <- "
+  padding: 20px;
+  background-color: #bd90dc;
+  color: white;
+  font-weight: bold;
+  border-radius: 5px;
+"
+
+ui <- clemantine_page(
+  div(
+    style = "padding: 20px;",
+    cl_grid(
+      cols = 3,
+      gutter = "xs",
+      cl_grid_col(
+        span = list(base = 12, md = 6, lg = 3),
+        bg = "primary",
+        div(
+          style = default_style,
+          "1"
+        )
+      ),
+      cl_grid_col(
+        span = list(base = 12, md = 6, lg = 3),
+        div(
+          style = default_style,
+          "2"
+        )
+      ),
+      cl_grid_col(
+        span = list(base = 12, md = 6, lg = 6),
+        div(
+          style = default_style,
+          "3"
+        )
+      )
+    )
+  )
+)
+
+server <- function(input, output, session) {}
+
+if (interactive()) {
+  shinyApp(ui, server)
+}

inst/examples/layout/group/app.R

@@ -0,0 +1,30 @@
+library(shiny)
+library(clemantine)
+
+default_style <- "border: 1px solid black; padding: 10px; border-radius: 5px;"
+
+ui <- clemantine_page(
+  cl_group(
+    justify = "center",
+    gap = "xl",
+    grow = TRUE,
+    div(
+      style = default_style,
+      "1"
+    ),
+    div(
+      style = default_style,
+      "2"
+    ),
+    div(
+      style = default_style,
+      "1"
+    )
+  )
+)
+
+server <- function(input, output, session) {}
+
+if (interactive()) {
+  shinyApp(ui, server)
+}