@datum-cloud/datum-ui 0.4.0 → 0.5.0

package/dist/types-BZNk3q65.mjs

@@ -0,0 +1,357 @@
+import { t as cn } from "./cn-D2KYQ917.mjs";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs/index.mjs";
+import { n as useTheme } from "./themes-DG1md8FI.mjs";
+import { t as toast } from "./toast-BWnN5fax.mjs";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Editor from "@monaco-editor/react";
+import yaml from "js-yaml";
+import { z } from "zod";
+//#region src/components/features/code-editor/code-editor.tsx
+/**
+* CodeEditor - Monaco-based code editor component
+*
+* A Monaco Editor wrapper with single language support, theme integration,
+* and form compatibility. Provides a VS Code-like editing experience with
+* automatic formatting, responsive layout, and error state handling.
+*
+* Features:
+* - Monaco Editor with VS Code experience
+* - Theme-aware (automatic light/dark mode)
+* - Form-compatible (hidden input for React Hook Form)
+* - Responsive layout with automatic resizing
+* - Read-only mode support
+* - Custom error state styling
+*
+* @example
+* ```tsx
+* import { CodeEditor } from '@datum-cloud/datum-ui/code-editor'
+*
+* // Basic usage
+* <CodeEditor
+*   value={code}
+*   onChange={(newValue) => setCode(newValue)}
+*   language="yaml"
+*   minHeight="400px"
+* />
+*
+* // With error state
+* <CodeEditor
+*   value={invalidJson}
+*   onChange={handleChange}
+*   language="json"
+*   error="Invalid JSON format"
+* />
+*
+* // Read-only mode
+* <CodeEditor
+*   value={config}
+*   language="yaml"
+*   readOnly={true}
+* />
+* ```
+*
+* @param props - Component props
+* @param props.value - Editor content
+* @param props.onChange - Content change callback
+* @param props.language - Syntax highlighting language
+* @param props.id - Input element ID for form integration
+* @param props.name - Input element name for form submission (default: 'code-editor')
+* @param props.error - Error message to display below the editor
+* @param props.className - Additional CSS classes
+* @param props.readOnly - Read-only mode (default: false)
+* @param props.minHeight - Minimum editor height (default: '200px')
+* @returns Rendered Monaco editor with form integration
+*/
+function CodeEditor({ value, onChange, language, id, name = "code-editor", error, className, readOnly = false, minHeight = "200px" }) {
+	const { theme } = useTheme();
+	const editorRef = useRef(null);
+	const [mounted, setMounted] = useState(false);
+	const monacoTheme = theme === "dark" ? "vs-dark" : "light";
+	useEffect(() => {
+		if (editorRef.current && !mounted) {
+			setTimeout(() => {
+				editorRef.current?.getAction("editor.action.formatDocument")?.run();
+			}, 300);
+			setMounted(true);
+		}
+	}, [mounted]);
+	const handleEditorChange = (newValue) => {
+		onChange?.(newValue || "");
+	};
+	const handleEditorDidMount = (editor) => {
+		editorRef.current = editor;
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative", className),
+		children: [
+			/* @__PURE__ */ jsx(Editor, {
+				height: minHeight,
+				language,
+				value,
+				theme: monacoTheme,
+				onChange: handleEditorChange,
+				onMount: handleEditorDidMount,
+				options: {
+					readOnly,
+					minimap: { enabled: false },
+					fontSize: 14,
+					tabSize: 2,
+					wordWrap: "on",
+					lineNumbers: "on",
+					folding: true,
+					automaticLayout: true
+				},
+				className: cn(error && "border border-destructive rounded-md")
+			}),
+			/* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				id,
+				name,
+				value
+			}),
+			error && /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-destructive mt-1",
+				children: error
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/features/code-editor/lib/editor.ts
+function isValidJson(jsonStr) {
+	try {
+		JSON.parse(jsonStr);
+		return true;
+	} catch {
+		return false;
+	}
+}
+function isValidYaml(yamlStr) {
+	try {
+		yaml.load(yamlStr, { schema: yaml.FAILSAFE_SCHEMA });
+		return true;
+	} catch {
+		return false;
+	}
+}
+function formatJson(jsonStr) {
+	try {
+		const parsed = JSON.parse(jsonStr);
+		return JSON.stringify(parsed, null, 2);
+	} catch (error) {
+		throw new Error(`Invalid JSON format: ${error instanceof Error ? error.message : String(error)}`);
+	}
+}
+function formatYaml(yamlStr) {
+	try {
+		const parsed = yaml.load(yamlStr, { schema: yaml.FAILSAFE_SCHEMA });
+		return yaml.dump(parsed, {
+			indent: 2,
+			lineWidth: -1,
+			noRefs: true
+		});
+	} catch (error) {
+		throw new Error(`Invalid YAML format: ${error instanceof Error ? error.message : String(error)}`);
+	}
+}
+function jsonToYaml(jsonStr) {
+	try {
+		const parsed = JSON.parse(jsonStr);
+		return yaml.dump(parsed, {
+			indent: 2,
+			lineWidth: -1,
+			noRefs: true
+		});
+	} catch (error) {
+		throw new Error(`Invalid JSON format: ${error instanceof Error ? error.message : String(error)}`);
+	}
+}
+function yamlToJson(yamlStr) {
+	try {
+		const parsed = yaml.load(yamlStr, { schema: yaml.FAILSAFE_SCHEMA });
+		return JSON.stringify(parsed, null, 2);
+	} catch (error) {
+		throw new Error(`Invalid YAML format: ${error instanceof Error ? error.message : String(error)}`);
+	}
+}
+//#endregion
+//#region src/components/features/code-editor/code-editor-tabs.tsx
+/**
+* CodeEditorTabs - Dual-format code editor with JSON ↔ YAML conversion
+*
+* A tabbed interface that provides JSON and YAML editing with automatic
+* bidirectional conversion and validation. Prevents tab switching when
+* content has syntax errors and shows error toasts for conversion failures.
+*
+* Features:
+* - Dual-format editing (JSON ↔ YAML)
+* - Automatic bidirectional conversion
+* - Real-time validation before conversion
+* - Error toasts for conversion failures
+* - Maintains sync between both formats
+* - Hidden format field for form submission
+*
+* @example
+* ```tsx
+* import { CodeEditorTabs } from '@datum-cloud/datum-ui/code-editor'
+*
+* // Basic usage
+* <CodeEditorTabs
+*   value={config}
+*   format="yaml"
+*   onChange={(value, format) => {
+*     setConfig(value)
+*     setFormat(format)
+*   }}
+*   name="configuration"
+*   minHeight="500px"
+* />
+*
+* // With React Hook Form
+* const { watch, setValue } = useForm()
+*
+* <CodeEditorTabs
+*   value={watch('config')}
+*   onChange={(value) => setValue('config', value)}
+*   name="config"
+* />
+*
+* // With format change handler
+* <CodeEditorTabs
+*   value={data}
+*   format={currentFormat}
+*   onChange={(value, format) => console.log({ value, format })}
+*   onFormatChange={(format) => setCurrentFormat(format)}
+* />
+* ```
+*
+* @param props - Component props
+* @param props.value - Editor content
+* @param props.onChange - Content and format change callback
+* @param props.format - Active format ('json' or 'yaml', default: 'yaml')
+* @param props.onFormatChange - Format change callback
+* @param props.error - Error message to display below the editor
+* @param props.id - Input element ID for form integration
+* @param props.name - Input element name for form submission (default: 'code-editor')
+* @param props.minHeight - Minimum editor height (default: '300px')
+* @returns Rendered tabbed editor with JSON/YAML conversion
+*/
+function CodeEditorTabs({ value, onChange, format = "yaml", onFormatChange, error, id, name = "code-editor", minHeight = "300px" }) {
+	const [jsonContent, setJsonContent] = useState("");
+	const [yamlContent, setYamlContent] = useState("");
+	const [activeTab, setActiveTab] = useState(format);
+	useEffect(() => {
+		if (format === "json") {
+			setJsonContent(value);
+			try {
+				setYamlContent(jsonToYaml(value));
+			} catch {}
+		} else {
+			setYamlContent(value);
+			try {
+				setJsonContent(yamlToJson(value));
+			} catch {}
+		}
+	}, [value, format]);
+	const handleJsonChange = (newValue) => {
+		setJsonContent(newValue);
+		try {
+			setYamlContent(jsonToYaml(newValue));
+			if (activeTab === "json") onChange?.(newValue, "json");
+		} catch (error) {
+			console.error("Failed to convert JSON to YAML:", error);
+		}
+	};
+	const handleYamlChange = (newValue) => {
+		setYamlContent(newValue);
+		try {
+			setJsonContent(yamlToJson(newValue));
+			if (activeTab === "yaml") onChange?.(newValue, "yaml");
+		} catch (error) {
+			console.error("Failed to convert YAML to JSON:", error);
+		}
+	};
+	const handleTabChange = (newTab) => {
+		const newFormat = newTab;
+		const currentContent = activeTab === "json" ? jsonContent : yamlContent;
+		try {
+			if (activeTab === "json") jsonToYaml(currentContent);
+			else yamlToJson(currentContent);
+			setActiveTab(newFormat);
+			onFormatChange?.(newFormat);
+			onChange?.(newFormat === "json" ? jsonContent : yamlContent, newFormat);
+		} catch {
+			const errorMsg = activeTab === "json" ? "Invalid JSON format. Please fix errors before switching tabs." : "Invalid YAML format. Please fix errors before switching tabs.";
+			toast.error(errorMsg, { id: `${activeTab}-to-${newFormat}-error` });
+		}
+	};
+	return /* @__PURE__ */ jsxs(Tabs, {
+		value: activeTab,
+		onValueChange: handleTabChange,
+		children: [
+			/* @__PURE__ */ jsxs(TabsList, { children: [/* @__PURE__ */ jsx(TabsTrigger, {
+				value: "yaml",
+				children: "YAML"
+			}), /* @__PURE__ */ jsx(TabsTrigger, {
+				value: "json",
+				children: "JSON"
+			})] }),
+			/* @__PURE__ */ jsx(TabsContent, {
+				value: "yaml",
+				children: /* @__PURE__ */ jsx(CodeEditor, {
+					value: yamlContent,
+					onChange: handleYamlChange,
+					language: "yaml",
+					minHeight,
+					error
+				})
+			}),
+			/* @__PURE__ */ jsx(TabsContent, {
+				value: "json",
+				children: /* @__PURE__ */ jsx(CodeEditor, {
+					value: jsonContent,
+					onChange: handleJsonChange,
+					language: "json",
+					minHeight,
+					error
+				})
+			}),
+			/* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				id,
+				name,
+				value: activeTab === "json" ? jsonContent : yamlContent
+			}),
+			/* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name: `${name}-format`,
+				value: activeTab
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/features/code-editor/types.ts
+const jsonSchema = z.object({ jsonContent: z.string().min(1, "JSON content is required").refine(isValidJson, { message: "Invalid JSON format" }) });
+const yamlSchema = z.object({ yamlContent: z.string().min(1, "YAML content is required").refine(isValidYaml, { message: "Invalid YAML format" }) });
+function createCodeEditorSchema(name = "code-editor") {
+	return z.object({
+		[name]: z.string().min(1, `${name} content is required`),
+		format: z.enum(["json", "yaml"])
+	}).superRefine((data, ctx) => {
+		const content = data[name];
+		if (data.format === "json" && !isValidJson(content)) ctx.addIssue({
+			code: z.ZodIssueCode.custom,
+			message: "Invalid JSON format",
+			path: [name]
+		});
+		else if (data.format === "yaml" && !isValidYaml(content)) ctx.addIssue({
+			code: z.ZodIssueCode.custom,
+			message: "Invalid YAML format",
+			path: [name]
+		});
+	});
+}
+//#endregion
+export { formatJson as a, isValidYaml as c, CodeEditor as d, CodeEditorTabs as i, jsonToYaml as l, jsonSchema as n, formatYaml as o, yamlSchema as r, isValidJson as s, createCodeEditorSchema as t, yamlToJson as u };

package/dist/typography/index.mjs

@@ -1,3 +1,2 @@
-import { a as ListItem, c as Title, d as titleVariants, i as List, l as paragraphVariants, n as Code, o as Paragraph, r as Link, s as Text, t as Blockquote, u as textVariants } from "../typography-Iap9fU5P.mjs";
-
-export { Blockquote, Code, Link, List, ListItem, Paragraph, Text, Title, paragraphVariants, textVariants, titleVariants };
+import { a as ListItem, c as Title, d as titleVariants, i as List, l as paragraphVariants, n as Code, o as Paragraph, r as Link, s as Text, t as Blockquote, u as textVariants } from "../typography-ClB8k55E.mjs";
+export { Blockquote, Code, Link, List, ListItem, Paragraph, Text, Title, paragraphVariants, textVariants, titleVariants };

package/dist/{typography-Iap9fU5P.mjs → typography-ClB8k55E.mjs}

@@ -1,9 +1,8 @@
-import { t as cn } from "./cn-DWCc1QRE.mjs";
+import { t as cn } from "./cn-D2KYQ917.mjs";
 import { cva } from "class-variance-authority";
 import { CopyIcon } from "lucide-react";
 import * as React$1 from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-
 //#region src/components/base/typography/typography.tsx
 const titleVariants = cva("font-semibold leading-tight tracking-tight", {
 	variants: {
@@ -195,6 +194,5 @@ function Code({ className, as = "code", children, ...props }) {
 		children
 	});
 }
-
 //#endregion
-export { ListItem as a, Title as c, titleVariants as d, List as i, paragraphVariants as l, Code as n, Paragraph as o, Link as r, Text as s, Blockquote as t, textVariants as u };
+export { ListItem as a, Title as c, titleVariants as d, List as i, paragraphVariants as l, Code as n, Paragraph as o, Link as r, Text as s, Blockquote as t, textVariants as u };

package/dist/{use-copy-to-clipboard-n29wJwvW.mjs → use-copy-to-clipboard-BGdTmkFV.mjs}

@@ -1,6 +1,5 @@
-import { r as toast } from "./use-toast-By9HuFwP.mjs";
+import { t as toast } from "./toast-BWnN5fax.mjs";
 import { useCallback, useEffect, useRef, useState } from "react";
-
 //#region src/hooks/use-copy-to-clipboard.ts
 function useCopyToClipboard() {
 	const [isCopied, setIsCopied] = useState(false);
@@ -26,6 +25,5 @@ function useCopyToClipboard() {
 		}
 	}, [])];
 }
-
 //#endregion
-export { useCopyToClipboard as t };
+export { useCopyToClipboard as t };

package/dist/utils/index.mjs

@@ -1,3 +1,2 @@
-import { t as cn } from "../cn-DWCc1QRE.mjs";
-
-export { cn };
+import { t as cn } from "../cn-D2KYQ917.mjs";
+export { cn };

package/dist/{utils-DJboNGQM.mjs → utils-C8KwMfT_.mjs}

@@ -1,6 +1,5 @@
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
-
 //#region ../shadcn/lib/utils.ts
 /**
 * shadcn/ui Utilities
@@ -15,6 +14,5 @@ import { twMerge } from "tailwind-merge";
 function cn(...inputs) {
 	return twMerge(clsx(inputs));
 }
-
 //#endregion
-export { cn as t };
+export { cn as t };

package/dist/visually-hidden/index.mjs

@@ -1,3 +1,2 @@
-import { t as VisuallyHidden } from "../visuallyhidden-BJsQCmg-.mjs";
-
-export { VisuallyHidden };
+import { t as VisuallyHidden } from "../visuallyhidden-BLUsJpYH.mjs";
+export { VisuallyHidden };

package/dist/{visuallyhidden-BJsQCmg-.mjs → visuallyhidden-BLUsJpYH.mjs}

@@ -1,7 +1,5 @@
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
-
 //#region ../shadcn/ui/visuallyhidden.tsx
 const VisuallyHidden$1 = { Root: VisuallyHidden };
-
 //#endregion
-export { VisuallyHidden$1 as t };
+export { VisuallyHidden$1 as t };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datum-cloud/datum-ui",
   "type": "module",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "license": "MIT",
   "repository": {
     "url": "https://github.com/datum-cloud/datum-ui"
@@ -84,6 +84,11 @@
       "types": "./dist/components/base/chart/index.d.ts",
       "default": "./dist/chart/index.mjs"
     },
+    "./code-editor": {
+      "source": "./src/components/features/code-editor/index.ts",
+      "types": "./dist/components/features/code-editor/index.d.ts",
+      "default": "./dist/code-editor/index.mjs"
+    },
     "./checkbox": {
       "source": "./src/components/base/checkbox/index.ts",
       "types": "./dist/components/base/checkbox/index.d.ts",
@@ -316,16 +321,19 @@
   "peerDependencies": {
     "@conform-to/react": ">=1",
     "@conform-to/zod": ">=1",
+    "@monaco-editor/react": "^4.7.0",
     "@stepperize/react": ">=4",
     "@tanstack/react-table": ">=8",
     "@tanstack/react-virtual": ">=3",
     "date-fns": ">=4",
     "date-fns-tz": ">=3",
+    "js-yaml": "^4.1.0",
     "leaflet": ">=1.9",
     "leaflet-draw": ">=1",
     "leaflet.fullscreen": ">=5",
     "leaflet.markercluster": ">=1.5",
     "lucide-react": ">=0.400",
+    "monaco-editor": ">=0.44.0",
     "motion": ">=11",
     "nprogress": ">=0.2",
     "nuqs": ">=2",
@@ -347,6 +355,9 @@
     "@conform-to/zod": {
       "optional": true
     },
+    "@monaco-editor/react": {
+      "optional": true
+    },
     "@stepperize/react": {
       "optional": true
     },
@@ -362,6 +373,9 @@
     "date-fns-tz": {
       "optional": true
     },
+    "js-yaml": {
+      "optional": true
+    },
     "leaflet": {
       "optional": true
     },
@@ -375,6 +389,9 @@
       "optional": true
     },
     "lucide-react": {},
+    "monaco-editor": {
+      "optional": true
+    },
     "motion": {
       "optional": true
     },
@@ -435,12 +452,14 @@
   "devDependencies": {
     "@conform-to/react": "^1.17.1",
     "@conform-to/zod": "^1.17.1",
+    "@monaco-editor/react": "^4.7.0",
     "@stepperize/react": "^6.1.0",
     "@tanstack/react-table": "^8.21.3",
     "@tanstack/react-virtual": "^3.13.19",
     "@testing-library/jest-dom": "^6",
     "@testing-library/react": "^16",
     "@testing-library/user-event": "^14",
+    "@types/js-yaml": "^4.0.9",
     "@types/leaflet": "^1.9.21",
     "@types/leaflet-draw": "^1.0.13",
     "@types/leaflet.fullscreen": "^5.2.0",
@@ -451,12 +470,14 @@
     "date-fns": "^4.1.0",
     "date-fns-tz": "^3.2.0",
     "eslint": "^9.39.3",
+    "js-yaml": "^4.1.1",
     "jsdom": "^26",
     "leaflet": "^1.9.4",
     "leaflet-draw": "^1.0.4",
     "leaflet.fullscreen": "^5.3.0",
     "leaflet.markercluster": "^1.5.3",
     "lucide-react": "^0.556",
+    "monaco-editor": "^0.55.1",
     "motion": "^12.34.4",
     "nprogress": "^0.2.0",
     "nuqs": "^2.8.9",
@@ -469,7 +490,7 @@
     "react-number-format": "^5.4.4",
     "sonner": "^2.0.7",
     "tailwindcss": "^4.2.1",
-    "tsdown": "^0.20.3",
+    "tsdown": "^0.21.5",
     "typescript": "^5.9",
     "vitest": "^3",
     "zod": "^4.3.6",

package/dist/input-with-addons-B8rzNhpq.mjs

@@ -1,30 +0,0 @@
-import { t as cn } from "./cn-DWCc1QRE.mjs";
-import "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/components/features/input-with-addons/input-with-addons.tsx
-function InputWithAddons({ ref, leading, trailing, containerClassName, className, ...props }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn("border-input-border bg-input-background/50 text-input-foreground placeholder:text-input-placeholder", "focus-within:border-input-focus-border focus-within:shadow-(--input-focus-shadow)", "group flex h-10 w-full items-stretch overflow-hidden rounded-lg border transition-all", "focus-within:ring-0 focus-within:ring-offset-0 focus-within:outline-hidden", containerClassName),
-		children: [
-			leading ? /* @__PURE__ */ jsx("div", {
-				className: "text-muted-foreground flex items-center bg-transparent pl-3",
-				children: leading
-			}) : null,
-			/* @__PURE__ */ jsx("input", {
-				className: cn("flex-1 bg-transparent px-3 text-base md:text-sm", "placeholder:text-input-placeholder text-input-foreground", "focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:outline-hidden", "focus-visible:border-transparent focus-visible:shadow-none", "read-only:cursor-not-allowed read-only:opacity-50 disabled:cursor-not-allowed disabled:opacity-50", "file:text-foreground file:border-0 file:bg-transparent file:text-sm file:font-medium", leading && "pl-2", trailing && "pr-2", className),
-				"data-slot": "input-with-addons",
-				ref,
-				...props
-			}),
-			trailing ? /* @__PURE__ */ jsx("div", {
-				className: "text-muted-foreground flex items-center bg-transparent pr-3",
-				children: trailing
-			}) : null
-		]
-	});
-}
-InputWithAddons.displayName = "InputWithAddons";
-
-//#endregion
-export { InputWithAddons as t };