From fdf8767c22357f92a247b350c083c12ed6326e57 Mon Sep 17 00:00:00 2001
From: Kuba Orlik <kontakt@kuba-orlik.name>
Date: Sun, 16 Mar 2025 21:00:52 +0100
Subject: [PATCH] Add custom CSS wrapper component

---
 package-lock.json                             |  8 ++---
 package.json                                  |  2 +-
 .../custom-css-wrapper/custom-css-wrapper.css |  2 ++
 .../custom-css-wrapper.jdd.tsx                | 36 +++++++++++++++++++
 .../split-view/split-view.jdd.tsx             | 12 +++----
 5 files changed, 49 insertions(+), 11 deletions(-)
 create mode 100644 src/back/jdd-components/custom-css-wrapper/custom-css-wrapper.css
 create mode 100644 src/back/jdd-components/custom-css-wrapper/custom-css-wrapper.jdd.tsx

diff --git a/package-lock.json b/package-lock.json
index 307a178..1c74bbb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,7 @@
 				"@sealcode/add-to-head": "^1.0.0",
 				"@sealcode/crud-ui": "^0.0.17",
 				"@sealcode/file-manager": "^1.0.2",
-				"@sealcode/jdd": "^0.7.3",
+				"@sealcode/jdd": "^0.7.4",
 				"@sealcode/jdd-editor": "^0.1.20",
 				"@sealcode/sealgen": "^0.17.27",
 				"@sealcode/simplemde": "^1.12.1",
@@ -939,9 +939,9 @@
 			}
 		},
 		"node_modules/@sealcode/jdd": {
-			"version": "0.7.3",
-			"resolved": "https://registry.npmjs.org/@sealcode/jdd/-/jdd-0.7.3.tgz",
-			"integrity": "sha512-OZJDBLt7MMr/PGKfGQxEhLl+7wG2sw0jxHJr4PW0SLrPizT2NGHJGsyDK2eR1ZsNPm+Bukim8V2Q4M1gACYtWg==",
+			"version": "0.7.4",
+			"resolved": "https://registry.npmjs.org/@sealcode/jdd/-/jdd-0.7.4.tgz",
+			"integrity": "sha512-awIxh2o5xklnba4n89MHSL+YTcg+0RaSFicug0XBsha5xUlhc6KLFIBFNRSQiq06rowUMAwCdhGayrza4XWcEw==",
 			"dependencies": {
 				"@sealcode/file-manager": "^1.0.2",
 				"@sealcode/ts-predicates": "^0.5.3",
diff --git a/package.json b/package.json
index e606dfc..3ef5ba0 100644
--- a/package.json
+++ b/package.json
@@ -80,7 +80,7 @@
 		"@sealcode/add-to-head": "^1.0.0",
 		"@sealcode/crud-ui": "^0.0.17",
 		"@sealcode/file-manager": "^1.0.2",
-		"@sealcode/jdd": "^0.7.3",
+		"@sealcode/jdd": "^0.7.4",
 		"@sealcode/jdd-editor": "^0.1.20",
 		"@sealcode/sealgen": "^0.17.27",
 		"@sealcode/simplemde": "^1.12.1",
diff --git a/src/back/jdd-components/custom-css-wrapper/custom-css-wrapper.css b/src/back/jdd-components/custom-css-wrapper/custom-css-wrapper.css
new file mode 100644
index 0000000..8ffe721
--- /dev/null
+++ b/src/back/jdd-components/custom-css-wrapper/custom-css-wrapper.css
@@ -0,0 +1,2 @@
+.custom-css-wrapper {
+}
\ No newline at end of file
diff --git a/src/back/jdd-components/custom-css-wrapper/custom-css-wrapper.jdd.tsx b/src/back/jdd-components/custom-css-wrapper/custom-css-wrapper.jdd.tsx
new file mode 100644
index 0000000..a4dd5bf
--- /dev/null
+++ b/src/back/jdd-components/custom-css-wrapper/custom-css-wrapper.jdd.tsx
@@ -0,0 +1,36 @@
+import { TempstreamJSX } from "tempstream";
+import type { ComponentToHTMLArgs } from "@sealcode/jdd";
+import { Component, ComponentArguments } from "@sealcode/jdd";
+import { v4 as uuid } from "uuid";
+
+const component_arguments = {
+	custom_css: new ComponentArguments.ShortText(),
+	content: new ComponentArguments.NestedComponent(),
+} as const;
+
+export class CustomCssWrapper extends Component<typeof component_arguments> {
+	getArguments() {
+		return component_arguments;
+	}
+
+	async toHTML({
+		args: { custom_css, content },
+		classes,
+		jdd_context,
+	}: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> {
+		const unique_class = `css-wrapper--${uuid()}`;
+		return (
+			<div class={["custom-css-wrapper", unique_class, ...classes]}>
+				{
+					/* HTML */ `<style>
+						.${unique_class}{ ${custom_css}  }
+					</style>`
+				}
+				{ComponentArguments.NestedComponent.render({
+					jdd_context,
+					data: content as Record<string, unknown>,
+				})}
+			</div>
+		);
+	}
+}
diff --git a/src/back/jdd-components/split-view/split-view.jdd.tsx b/src/back/jdd-components/split-view/split-view.jdd.tsx
index e242bfd..8579d73 100644
--- a/src/back/jdd-components/split-view/split-view.jdd.tsx
+++ b/src/back/jdd-components/split-view/split-view.jdd.tsx
@@ -42,16 +42,16 @@ export class SplitView extends Component<typeof component_arguments> {
 			<div class={["split-view", ...classes]}>
 				<div class="split-view__wrapper">
 					<div class="split-view__half">
-						{ComponentArguments.NestedComponent.render(
+						{ComponentArguments.NestedComponent.render({
 							jdd_context,
-							component1 as Record<string, unknown>
-						)}
+							data: component1 as Record<string, unknown>,
+						})}
 					</div>
 					<div class="split-view__half">
-						{ComponentArguments.NestedComponent.render(
+						{ComponentArguments.NestedComponent.render({
 							jdd_context,
-							component2 as Record<string, unknown>
-						)}
+							data: component2 as Record<string, unknown>,
+						})}
 					</div>
 				</div>
 			</div>