Init deps clemantine

.gitignore

@@ -1 +1,2 @@
 README.html
+js/node_modules/

DESCRIPTION

@@ -1,10 +1,15 @@
 Package: clemantine
 Title: Mantine.dev React Components Library
-Version: 0.0.0.9000
+Version: 0.1.0
 Authors@R: 
     person("Arthur", "Bréant", , "[email protected]", role = c("aut", "cre"))
 Description: A kit of tools to use mantine components in R.
 License: MIT + file LICENSE
+Imports: 
+    htmltools,
+    shiny.react
+Suggests: 
+    shiny
 Encoding: UTF-8
 Roxygen: list(markdown = TRUE)
 RoxygenNote: 7.3.1

NAMESPACE

@@ -1,2 +1,7 @@
 # Generated by roxygen2: do not edit by hand
 
+export(clemantine_dependency)
+export(clemantine_page)
+importFrom(htmltools,htmlDependency)
+importFrom(shiny.react,asProps)
+importFrom(shiny.react,reactElement)

NEWS.md

@@ -1,3 +1,5 @@
-# clemantine 0.0.0.9000
+# clemantine 0.1.0
 
-- Init dev version
+- Create clemantine page
+- Use clemantine dependencies
+- Start to use Mantine.dev

R/deps.R

@@ -0,0 +1,16 @@
+#' clemantine_dependency
+#'
+#' @importFrom htmltools htmlDependency
+#'
+#' @return html_dependency
+#'
+#' @export
+clemantine_dependency <- function() {
+  htmlDependency(
+    name = "mantine",
+    version = "7.11.0",
+    package = "clemantine",
+    src = "www/clemantine",
+    script = "clemantine.js"
+  )
+}

R/helpers.R

@@ -0,0 +1,12 @@
+#' @noRd
+#' @importFrom shiny.react reactElement asProps
+core_component <- function(name) {
+  function(...) {
+    reactElement(
+      module = "@mantine/core",
+      name = name,
+      props = asProps(...),
+      deps = clemantine_dependency()
+    )
+  }
+}

R/mantine_page.R

@@ -0,0 +1,9 @@
+#' clemantine_page
+#'
+#' @param ... Additional arguments to be passed to the component.
+#'
+#' @references
+#' [MantineProvider documentation](https://mantine.dev/theming/mantine-provider/)
+#'
+#' @export
+clemantine_page <- core_component("MantineProvider")

dev/config_attachment.yaml

@@ -3,7 +3,7 @@ path.d: DESCRIPTION
 dir.r: R
 dir.v: vignettes
 dir.t: tests
-extra.suggests: ~
+extra.suggests: shiny
 pkg_ignore: ~
 document: yes
 normalize: yes

inst/examples/clemantine_page/dark_page.R

@@ -0,0 +1,12 @@
+library(shiny)
+library(clemantine)
+
+ui <- clemantine_page(
+  defaultColorScheme = "dark"
+)
+
+server <- function(input, output, session) {}
+
+if (interactive()) {
+  shinyApp(ui, server)
+}

inst/examples/clemantine_page/light_page.R

@@ -0,0 +1,12 @@
+library(shiny)
+library(clemantine)
+
+ui <- clemantine_page(
+  defaultColorScheme = "light"
+)
+
+server <- function(input, output, session) {}
+
+if (interactive()) {
+  shinyApp(ui, server)
+}

inst/www/clemantine/clemantine.js.LICENSE.txt

@@ -0,0 +1,14 @@
+/*!
+* tabbable 6.2.0
+* @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
+*/
+
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

js/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "js",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "dependencies": {
+    "@mantine/core": "^7.11.1",
+    "@mantine/hooks": "^7.11.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "css-loader": "^7.1.2",
+    "style-loader": "^4.0.0",
+    "webpack": "^5.92.1",
+    "webpack-cli": "^5.1.4"
+  }
+}

js/src/index.js

@@ -0,0 +1,6 @@
+import "@mantine/core/styles.css";
+
+window.jsmodule = {
+  ...window.jsmodule,
+  "@mantine/core": require("@mantine/core"),
+};

js/webpack.config.js

@@ -0,0 +1,30 @@
+const webpack = require("webpack");
+const path = require("path");
+
+const config = {
+  entry: "./src/index.js",
+  mode: "production",
+  output: {
+    path: path.join(__dirname, "..", "inst", "www", "clemantine"),
+    filename: "clemantine.js",
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: ["style-loader", "css-loader"],
+      },
+    ],
+  },
+  externals: {
+    react: 'jsmodule["react"]',
+    "react-dom": 'jsmodule["react-dom"]',
+    "@/shiny.react": 'jsmodule["@/shiny.react"]',
+  },
+  performance: {
+    hints: false,
+  },
+  stats: { colors: true },
+};
+
+module.exports = config;