From 71f3bb8960db9aea72c8d3706fc52e9efe09c8c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Arthur=20Br=C3=A9ant?= Date: Wed, 10 Jul 2024 16:03:38 +0200 Subject: [PATCH 1/4] chore: reexports htmltools tags --- NAMESPACE | 8 ++++++++ R/reexports.R | 15 +++++++++++++++ man/reexports.Rd | 19 +++++++++++++++++++ 3 files changed, 42 insertions(+) create mode 100644 R/reexports.R create mode 100644 man/reexports.Rd diff --git a/NAMESPACE b/NAMESPACE index 3a52360..a90fff1 100644 --- a/NAMESPACE +++ b/NAMESPACE @@ -1,7 +1,15 @@ # Generated by roxygen2: do not edit by hand +export(a) 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) diff --git a/R/reexports.R b/R/reexports.R new file mode 100644 index 0000000..6af81cb --- /dev/null +++ b/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 diff --git a/man/reexports.Rd b/man/reexports.Rd new file mode 100644 index 0000000..28cdfc6 --- /dev/null +++ b/man/reexports.Rd @@ -0,0 +1,19 @@ +% Generated by roxygen2: do not edit by hand +% Please edit documentation in R/reexports.R +\docType{import} +\name{reexports} +\alias{reexports} +\alias{tags} +\alias{div} +\alias{img} +\alias{a} +\title{Objects exported from other packages} +\keyword{internal} +\description{ +These objects are imported from other packages. Follow the links +below to see their documentation. + +\describe{ + \item{htmltools}{\code{\link[htmltools:builder]{a}}, \code{\link[htmltools:builder]{div}}, \code{\link[htmltools:builder]{img}}, \code{\link[htmltools:builder]{tags}}} +}} + From 5a098468e78bd91b66061b94f4a0e35873ad00b8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Arthur=20Br=C3=A9ant?= Date: Thu, 11 Jul 2024 10:19:07 +0200 Subject: [PATCH 2/4] chore: implement layout components --- NAMESPACE | 10 +++++ R/layout.R | 91 ++++++++++++++++++++++++++++++++++++++++++ man/cl_aspect_ratio.Rd | 30 ++++++++++++++ man/cl_center.Rd | 30 ++++++++++++++ man/cl_container.Rd | 30 ++++++++++++++ man/cl_flex.Rd | 30 ++++++++++++++ man/cl_grid.Rd | 34 ++++++++++++++++ man/cl_grid_col.Rd | 34 ++++++++++++++++ man/cl_group.Rd | 30 ++++++++++++++ man/cl_simple_grid.Rd | 30 ++++++++++++++ man/cl_space.Rd | 30 ++++++++++++++ man/cl_stack.Rd | 30 ++++++++++++++ 12 files changed, 409 insertions(+) create mode 100644 R/layout.R create mode 100644 man/cl_aspect_ratio.Rd create mode 100644 man/cl_center.Rd create mode 100644 man/cl_container.Rd create mode 100644 man/cl_flex.Rd create mode 100644 man/cl_grid.Rd create mode 100644 man/cl_grid_col.Rd create mode 100644 man/cl_group.Rd create mode 100644 man/cl_simple_grid.Rd create mode 100644 man/cl_space.Rd create mode 100644 man/cl_stack.Rd diff --git a/NAMESPACE b/NAMESPACE index a90fff1..5c6815a 100644 --- a/NAMESPACE +++ b/NAMESPACE @@ -1,6 +1,16 @@ # 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) diff --git a/R/layout.R b/R/layout.R new file mode 100644 index 0000000..6a4674e --- /dev/null +++ b/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") diff --git a/man/cl_aspect_ratio.Rd b/man/cl_aspect_ratio.Rd new file mode 100644 index 0000000..d2ca85a --- /dev/null +++ b/man/cl_aspect_ratio.Rd @@ -0,0 +1,30 @@ +% Generated by roxygen2: do not edit by hand +% Please edit documentation in R/layout.R +\name{cl_aspect_ratio} +\alias{cl_aspect_ratio} +\title{AspectRatio component} +\usage{ +cl_aspect_ratio(...) +} +\arguments{ +\item{...}{Additional arguments to be passed to the component.} +} +\description{ +AspectRatio component +} +\references{ +\href{https://mantine.dev/core/aspect-ratio/}{AspectRatio documentation} +} +\seealso{ +Other layout: +\code{\link{cl_center}()}, +\code{\link{cl_container}()}, +\code{\link{cl_flex}()}, +\code{\link{cl_grid}()}, +\code{\link{cl_grid_col}()}, +\code{\link{cl_group}()}, +\code{\link{cl_simple_grid}()}, +\code{\link{cl_space}()}, +\code{\link{cl_stack}()} +} +\concept{layout} diff --git a/man/cl_center.Rd b/man/cl_center.Rd new file mode 100644 index 0000000..0db5bfb --- /dev/null +++ b/man/cl_center.Rd @@ -0,0 +1,30 @@ +% Generated by roxygen2: do not edit by hand +% Please edit documentation in R/layout.R +\name{cl_center} +\alias{cl_center} +\title{Center component} +\usage{ +cl_center(...) +} +\arguments{ +\item{...}{Additional arguments to be passed to the component.} +} +\description{ +Center component +} +\references{ +\href{https://mantine.dev/core/center/}{Center documentation} +} +\seealso{ +Other layout: +\code{\link{cl_aspect_ratio}()}, +\code{\link{cl_container}()}, +\code{\link{cl_flex}()}, +\code{\link{cl_grid}()}, +\code{\link{cl_grid_col}()}, +\code{\link{cl_group}()}, +\code{\link{cl_simple_grid}()}, +\code{\link{cl_space}()}, +\code{\link{cl_stack}()} +} +\concept{layout} diff --git a/man/cl_container.Rd b/man/cl_container.Rd new file mode 100644 index 0000000..acfb3d9 --- /dev/null +++ b/man/cl_container.Rd @@ -0,0 +1,30 @@ +% Generated by roxygen2: do not edit by hand +% Please edit documentation in R/layout.R +\name{cl_container} +\alias{cl_container} +\title{Container component} +\usage{ +cl_container(...) +} +\arguments{ +\item{...}{Additional arguments to be passed to the component.} +} +\description{ +Container component +} +\references{ +\href{https://mantine.dev/core/container/}{Container documentation} +} +\seealso{ +Other layout: +\code{\link{cl_aspect_ratio}()}, +\code{\link{cl_center}()}, +\code{\link{cl_flex}()}, +\code{\link{cl_grid}()}, +\code{\link{cl_grid_col}()}, +\code{\link{cl_group}()}, +\code{\link{cl_simple_grid}()}, +\code{\link{cl_space}()}, +\code{\link{cl_stack}()} +} +\concept{layout} diff --git a/man/cl_flex.Rd b/man/cl_flex.Rd new file mode 100644 index 0000000..c1cab34 --- /dev/null +++ b/man/cl_flex.Rd @@ -0,0 +1,30 @@ +% Generated by roxygen2: do not edit by hand +% Please edit documentation in R/layout.R +\name{cl_flex} +\alias{cl_flex} +\title{Flex component} +\usage{ +cl_flex(...) +} +\arguments{ +\item{...}{Additional arguments to be passed to the component.} +} +\description{ +Flex component +} +\references{ +\href{https://mantine.dev/core/flex/}{Flex documentation} +} +\seealso{ +Other layout: +\code{\link{cl_aspect_ratio}()}, +\code{\link{cl_center}()}, +\code{\link{cl_container}()}, +\code{\link{cl_grid}()}, +\code{\link{cl_grid_col}()}, +\code{\link{cl_group}()}, +\code{\link{cl_simple_grid}()}, +\code{\link{cl_space}()}, +\code{\link{cl_stack}()} +} +\concept{layout} diff --git a/man/cl_grid.Rd b/man/cl_grid.Rd new file mode 100644 index 0000000..b964865 --- /dev/null +++ b/man/cl_grid.Rd @@ -0,0 +1,34 @@ +% Generated by roxygen2: do not edit by hand +% Please edit documentation in R/layout.R +\name{cl_grid} +\alias{cl_grid} +\title{Grid component} +\usage{ +cl_grid(...) +} +\arguments{ +\item{...}{Additional arguments to be passed to the component.} +} +\description{ +Grid component +} +\references{ +\href{https://mantine.dev/core/grid/}{Grid documentation} +} +\seealso{ +Other layout: +\code{\link{cl_aspect_ratio}()}, +\code{\link{cl_center}()}, +\code{\link{cl_container}()}, +\code{\link{cl_flex}()}, +\code{\link{cl_grid_col}()}, +\code{\link{cl_group}()}, +\code{\link{cl_simple_grid}()}, +\code{\link{cl_space}()}, +\code{\link{cl_stack}()} + +Other grid: +\code{\link{cl_grid_col}()} +} +\concept{grid} +\concept{layout} diff --git a/man/cl_grid_col.Rd b/man/cl_grid_col.Rd new file mode 100644 index 0000000..8459cd4 --- /dev/null +++ b/man/cl_grid_col.Rd @@ -0,0 +1,34 @@ +% Generated by roxygen2: do not edit by hand +% Please edit documentation in R/layout.R +\name{cl_grid_col} +\alias{cl_grid_col} +\title{Grid col component} +\usage{ +cl_grid_col(...) +} +\arguments{ +\item{...}{Additional arguments to be passed to the component.} +} +\description{ +Grid col component +} +\references{ +\href{https://mantine.dev/core/grid/}{Grid documentation} +} +\seealso{ +Other layout: +\code{\link{cl_aspect_ratio}()}, +\code{\link{cl_center}()}, +\code{\link{cl_container}()}, +\code{\link{cl_flex}()}, +\code{\link{cl_grid}()}, +\code{\link{cl_group}()}, +\code{\link{cl_simple_grid}()}, +\code{\link{cl_space}()}, +\code{\link{cl_stack}()} + +Other grid: +\code{\link{cl_grid}()} +} +\concept{grid} +\concept{layout} diff --git a/man/cl_group.Rd b/man/cl_group.Rd new file mode 100644 index 0000000..56e1780 --- /dev/null +++ b/man/cl_group.Rd @@ -0,0 +1,30 @@ +% Generated by roxygen2: do not edit by hand +% Please edit documentation in R/layout.R +\name{cl_group} +\alias{cl_group} +\title{Group component} +\usage{ +cl_group(...) +} +\arguments{ +\item{...}{Additional arguments to be passed to the component.} +} +\description{ +Group component +} +\references{ +\href{https://mantine.dev/core/group/}{Group documentation} +} +\seealso{ +Other layout: +\code{\link{cl_aspect_ratio}()}, +\code{\link{cl_center}()}, +\code{\link{cl_container}()}, +\code{\link{cl_flex}()}, +\code{\link{cl_grid}()}, +\code{\link{cl_grid_col}()}, +\code{\link{cl_simple_grid}()}, +\code{\link{cl_space}()}, +\code{\link{cl_stack}()} +} +\concept{layout} diff --git a/man/cl_simple_grid.Rd b/man/cl_simple_grid.Rd new file mode 100644 index 0000000..4b5a043 --- /dev/null +++ b/man/cl_simple_grid.Rd @@ -0,0 +1,30 @@ +% Generated by roxygen2: do not edit by hand +% Please edit documentation in R/layout.R +\name{cl_simple_grid} +\alias{cl_simple_grid} +\title{SimpleGrid component} +\usage{ +cl_simple_grid(...) +} +\arguments{ +\item{...}{Additional arguments to be passed to the component.} +} +\description{ +SimpleGrid component +} +\references{ +\href{https://mantine.dev/core/simple-grid/}{SimpleGrid documentation} +} +\seealso{ +Other layout: +\code{\link{cl_aspect_ratio}()}, +\code{\link{cl_center}()}, +\code{\link{cl_container}()}, +\code{\link{cl_flex}()}, +\code{\link{cl_grid}()}, +\code{\link{cl_grid_col}()}, +\code{\link{cl_group}()}, +\code{\link{cl_space}()}, +\code{\link{cl_stack}()} +} +\concept{layout} diff --git a/man/cl_space.Rd b/man/cl_space.Rd new file mode 100644 index 0000000..a24d2f2 --- /dev/null +++ b/man/cl_space.Rd @@ -0,0 +1,30 @@ +% Generated by roxygen2: do not edit by hand +% Please edit documentation in R/layout.R +\name{cl_space} +\alias{cl_space} +\title{Space component} +\usage{ +cl_space(...) +} +\arguments{ +\item{...}{Additional arguments to be passed to the component.} +} +\description{ +Space component +} +\references{ +\href{https://mantine.dev/core/space/}{Space documentation} +} +\seealso{ +Other layout: +\code{\link{cl_aspect_ratio}()}, +\code{\link{cl_center}()}, +\code{\link{cl_container}()}, +\code{\link{cl_flex}()}, +\code{\link{cl_grid}()}, +\code{\link{cl_grid_col}()}, +\code{\link{cl_group}()}, +\code{\link{cl_simple_grid}()}, +\code{\link{cl_stack}()} +} +\concept{layout} diff --git a/man/cl_stack.Rd b/man/cl_stack.Rd new file mode 100644 index 0000000..4f27a77 --- /dev/null +++ b/man/cl_stack.Rd @@ -0,0 +1,30 @@ +% Generated by roxygen2: do not edit by hand +% Please edit documentation in R/layout.R +\name{cl_stack} +\alias{cl_stack} +\title{Stack component} +\usage{ +cl_stack(...) +} +\arguments{ +\item{...}{Additional arguments to be passed to the component.} +} +\description{ +Stack component +} +\references{ +\href{https://mantine.dev/core/stack/}{Stack documentation} +} +\seealso{ +Other layout: +\code{\link{cl_aspect_ratio}()}, +\code{\link{cl_center}()}, +\code{\link{cl_container}()}, +\code{\link{cl_flex}()}, +\code{\link{cl_grid}()}, +\code{\link{cl_grid_col}()}, +\code{\link{cl_group}()}, +\code{\link{cl_simple_grid}()}, +\code{\link{cl_space}()} +} +\concept{layout} From 2d16e6072d577dd878a23f1d6b40cf5ddac4f18d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Arthur=20Br=C3=A9ant?= Date: Thu, 11 Jul 2024 11:46:18 +0200 Subject: [PATCH 3/4] doc: add layout examples --- inst/examples/layout/aspect_ratio/app.R | 19 ++++++ inst/examples/layout/center/app.R | 17 ++++++ inst/examples/layout/container/app.R | 38 ++++++++++++ inst/examples/layout/flex/app.R | 78 +++++++++++++++++++++++++ inst/examples/layout/grid/app.R | 48 +++++++++++++++ inst/examples/layout/group/app.R | 30 ++++++++++ inst/examples/layout/simple_grid/app.R | 30 ++++++++++ inst/examples/layout/space/app.R | 33 +++++++++++ inst/examples/layout/stack/app.R | 32 ++++++++++ 9 files changed, 325 insertions(+) create mode 100644 inst/examples/layout/aspect_ratio/app.R create mode 100644 inst/examples/layout/center/app.R create mode 100644 inst/examples/layout/container/app.R create mode 100644 inst/examples/layout/flex/app.R create mode 100644 inst/examples/layout/grid/app.R create mode 100644 inst/examples/layout/group/app.R create mode 100644 inst/examples/layout/simple_grid/app.R create mode 100644 inst/examples/layout/space/app.R create mode 100644 inst/examples/layout/stack/app.R diff --git a/inst/examples/layout/aspect_ratio/app.R b/inst/examples/layout/aspect_ratio/app.R new file mode 100644 index 0000000..f49e324 --- /dev/null +++ b/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) +} diff --git a/inst/examples/layout/center/app.R b/inst/examples/layout/center/app.R new file mode 100644 index 0000000..656e514 --- /dev/null +++ b/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) +} diff --git a/inst/examples/layout/container/app.R b/inst/examples/layout/container/app.R new file mode 100644 index 0000000..ce8badd --- /dev/null +++ b/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) +} diff --git a/inst/examples/layout/flex/app.R b/inst/examples/layout/flex/app.R new file mode 100644 index 0000000..a7e5838 --- /dev/null +++ b/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) +} diff --git a/inst/examples/layout/grid/app.R b/inst/examples/layout/grid/app.R new file mode 100644 index 0000000..1f12f36 --- /dev/null +++ b/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) +} diff --git a/inst/examples/layout/group/app.R b/inst/examples/layout/group/app.R new file mode 100644 index 0000000..b5fa5ef --- /dev/null +++ b/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) +} diff --git a/inst/examples/layout/simple_grid/app.R b/inst/examples/layout/simple_grid/app.R new file mode 100644 index 0000000..f8e0209 --- /dev/null +++ b/inst/examples/layout/simple_grid/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_simple_grid( + cols = 3, + spacing = "xl", + verticalSpacing = "xl", + 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) +} diff --git a/inst/examples/layout/space/app.R b/inst/examples/layout/space/app.R new file mode 100644 index 0000000..736f3a6 --- /dev/null +++ b/inst/examples/layout/space/app.R @@ -0,0 +1,33 @@ +library(shiny) +library(clemantine) + +div_example <- function(h_space) { + div( + style = "border: 1px solid black; padding: 10px; border-radius: 5px;", + span("This div uses horizontal space:"), + cl_space(h = h_space), + span(h_space) + ) +} + +ui <- clemantine_page( + div( + style = " + display: flex; + justify-content: center; + gap: 10px; + margin-top: 5vh; + ", + div_example(h_space = "xs"), + div_example(h_space = "sm"), + div_example(h_space = "md"), + div_example(h_space = "lg"), + div_example(h_space = "xl") + ) +) + +server <- function(input, output, session) {} + +if (interactive()) { + shinyApp(ui, server) +} diff --git a/inst/examples/layout/stack/app.R b/inst/examples/layout/stack/app.R new file mode 100644 index 0000000..a682ddc --- /dev/null +++ b/inst/examples/layout/stack/app.R @@ -0,0 +1,32 @@ +library(shiny) +library(clemantine) + +default_style <- "border: 1px solid black; padding: 10px; border-radius: 5px;" + +ui <- clemantine_page( + cl_stack( + h = 300, + bg = "#dcdcdc", + align = "center", + justify = "space-between", + gap = "lg", + 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) +} From 08a123489a10d1c028fb6ee4b7cc9618892c245c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Arthur=20Br=C3=A9ant?= Date: Thu, 11 Jul 2024 11:49:21 +0200 Subject: [PATCH 4/4] chore: bump package version --- DESCRIPTION | 2 +- NEWS.md | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/DESCRIPTION b/DESCRIPTION index 77db444..d1a0fb9 100644 --- a/DESCRIPTION +++ b/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", , "arthur@thinkr.fr", role = c("aut", "cre")) Description: A kit of tools to use mantine components in R. diff --git a/NEWS.md b/NEWS.md index c6a7ab8..dfc319f 100644 --- a/NEWS.md +++ b/NEWS.md @@ -1,3 +1,7 @@ +# clemantine 0.2.0 + +- Add Layout components to clemantine + # clemantine 0.1.0 - Create clemantine page