@thebuoyant-tsdev/mui-ts-library 3.2.1 → 3.4.0

package/dist/components/shared/ToolbarButton.js

@@ -0,0 +1,22 @@
+import { IconButton as e, Tooltip as t } from "@mui/material";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/shared/ToolbarButton.tsx
+function r({ label: r, icon: i, onClick: a, active: o, disabled: s }) {
+	return /* @__PURE__ */ n(t, {
+		title: r,
+		arrow: !0,
+		children: /* @__PURE__ */ n("span", { children: /* @__PURE__ */ n(e, {
+			size: "small",
+			onMouseDown: (e) => e.preventDefault(),
+			onClick: a,
+			disabled: s,
+			color: o ? "primary" : "default",
+			sx: { borderRadius: 1 },
+			"aria-label": r,
+			"aria-pressed": o,
+			children: i
+		}) })
+	});
+}
+//#endregion
+export { r as ToolbarButton };

package/dist/components/shared/normalizeSize.js

@@ -0,0 +1,6 @@
+//#region src/components/shared/normalizeSize.ts
+function e(e) {
+	if (!(e === "" || e === void 0)) return typeof e == "string" && e !== "auto" && !isNaN(Number(e)) ? Number(e) : e;
+}
+//#endregion
+export { e as normalizeSize };

package/dist/components/sql-editor/SqlEditor.js

@@ -0,0 +1,100 @@
+import { normalizeSize as e } from "../shared/normalizeSize.js";
+import { DEFAULT_SQL_EDITOR_TOOLBAR_CONFIG as t, DEFAULT_SQL_EDITOR_TRANSLATION as n } from "./SqlEditor.types.js";
+import { SqlEditorContent as r } from "./SqlEditorContent.js";
+import { SqlEditorToolbar as i } from "./SqlEditorToolbar.js";
+import { SqlEditorFooter as a } from "./SqlEditorFooter.js";
+import { useCallback as o, useRef as s, useState as c } from "react";
+import { Box as l, Divider as u, Paper as d } from "@mui/material";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/sql-editor/SqlEditor.tsx
+function h({ value: h, onChange: g, placeholder: _, height: v, width: y, disabled: b = !1, readonly: x = !1, error: S = !1, helperText: C, name: w, dialect: T = "standard", showLineNumbers: E = !0, showLineColumn: D = !0, showErrorCount: O = !1, toolbarConfig: k, translation: A, highlightColors: j, schema: M, onExecute: N, onLint: P, onBlur: F, onFocus: I }) {
+	let L = {
+		...n,
+		...A
+	}, R = {
+		...t,
+		...k
+	}, z = e(v), B = e(y), V = z === "auto", H = V ? void 0 : z ?? 300, U = s(null), [W, G] = c(null), [K, q] = c({
+		line: 1,
+		col: 1
+	}), [J, Y] = c(0), X = o((e) => {
+		U.current = e, G(e);
+	}, []), Z = o((e, t) => {
+		q({
+			line: e,
+			col: t
+		});
+	}, []), Q = o((e) => {
+		Y(e);
+	}, []), $ = D || O || !!C;
+	return /* @__PURE__ */ m(l, {
+		sx: {
+			width: B ?? "100%",
+			...V ? {
+				display: "flex",
+				flexDirection: "column",
+				flex: 1
+			} : {}
+		},
+		children: [
+			/* @__PURE__ */ m(d, {
+				variant: "outlined",
+				sx: {
+					display: "flex",
+					flexDirection: "column",
+					overflow: "hidden",
+					...V ? { flex: 1 } : { height: H },
+					borderColor: S ? "error.main" : void 0,
+					"&:focus-within": {
+						borderColor: S ? "error.main" : "primary.main",
+						borderWidth: 2
+					}
+				},
+				children: [!x && /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(i, {
+					editorView: W,
+					toolbarConfig: R,
+					translation: L,
+					dialect: T,
+					disabled: b,
+					onExecute: N
+				}), /* @__PURE__ */ p(u, {})] }), /* @__PURE__ */ p(r, {
+					value: h,
+					onChange: g,
+					placeholder: _,
+					disabled: b,
+					readonly: x,
+					showLineNumbers: E,
+					dialect: T,
+					keywordColor: j?.keyword,
+					stringColor: j?.string,
+					identifierColor: j?.identifier,
+					schema: M,
+					onExecute: N,
+					onLint: P,
+					onDiagnosticsChange: P ? Q : void 0,
+					onViewReady: X,
+					onCursorChange: Z,
+					onBlur: F,
+					onFocus: I
+				})]
+			}),
+			$ && /* @__PURE__ */ p(a, {
+				helperText: C,
+				error: S,
+				showLineColumn: D,
+				showErrorCount: O,
+				diagnosticsCount: J,
+				cursorLine: K.line,
+				cursorCol: K.col,
+				translation: L
+			}),
+			w && /* @__PURE__ */ p("input", {
+				type: "hidden",
+				name: w,
+				value: h ?? ""
+			})
+		]
+	});
+}
+//#endregion
+export { h as SqlEditor };

package/dist/components/sql-editor/SqlEditor.types.js

@@ -0,0 +1,20 @@
+//#region src/components/sql-editor/SqlEditor.types.ts
+var e = {
+	showFormat: !0,
+	showCopy: !0,
+	showClear: !0,
+	showExecute: !1,
+	showUndoRedo: !0
+}, t = {
+	format: "Format SQL",
+	copy: "Copy",
+	copySuccess: "Copied!",
+	clear: "Clear",
+	execute: "Execute",
+	undo: "Undo",
+	redo: "Redo",
+	lineColumn: "Ln {line}, Col {col}",
+	errorCount: "{count} error(s)"
+};
+//#endregion
+export { e as DEFAULT_SQL_EDITOR_TOOLBAR_CONFIG, t as DEFAULT_SQL_EDITOR_TRANSLATION };

package/dist/components/sql-editor/SqlEditorContent.js

@@ -0,0 +1,248 @@
+import { useEffect as e, useRef as t } from "react";
+import { Box as n, useTheme as r } from "@mui/material";
+import { EditorView as i, highlightActiveLine as a, highlightActiveLineGutter as o, keymap as s, lineNumbers as c, placeholder as l } from "@codemirror/view";
+import { Compartment as u, EditorState as d } from "@codemirror/state";
+import { defaultKeymap as f, history as p, historyKeymap as m } from "@codemirror/commands";
+import { HighlightStyle as ee, syntaxHighlighting as te } from "@codemirror/language";
+import { lintGutter as ne, linter as h } from "@codemirror/lint";
+import { tags as g } from "@lezer/highlight";
+import { jsx as _ } from "react/jsx-runtime";
+import { MSSQL as v, MySQL as y, PostgreSQL as b, SQLite as x, StandardSQL as S, sql as C } from "@codemirror/lang-sql";
+import { autocompletion as re, completionKeymap as w } from "@codemirror/autocomplete";
+//#region src/components/sql-editor/SqlEditorContent.tsx
+var T = {
+	standard: S,
+	mysql: y,
+	postgresql: b,
+	sqlite: x,
+	mssql: v
+};
+function E({ value: v, onChange: y, placeholder: b, disabled: x = !1, readonly: S = !1, showLineNumbers: E = !0, dialect: D = "standard", keywordColor: O, stringColor: k, identifierColor: A, schema: j, onExecute: M, onLint: N, onDiagnosticsChange: P, onViewReady: F, onCursorChange: I, onBlur: L, onFocus: R }) {
+	let z = t(null), B = t(null), V = t(y), H = t(I), U = t(L), W = t(R), G = t(F), K = t(M), q = t(N), J = t(P), Y = t(new u()), X = t(new u()), Z = r(), Q = Z.palette.mode === "dark", $ = !!N, ie = JSON.stringify(j);
+	return e(() => {
+		V.current = y;
+	}, [y]), e(() => {
+		H.current = I;
+	}, [I]), e(() => {
+		U.current = L;
+	}, [L]), e(() => {
+		W.current = R;
+	}, [R]), e(() => {
+		G.current = F;
+	}, [F]), e(() => {
+		K.current = M;
+	}, [M]), e(() => {
+		q.current = N;
+	}, [N]), e(() => {
+		J.current = P;
+	}, [P]), e(() => {
+		if (!z.current) return;
+		let e = B.current?.state.doc.toString() ?? v ?? "", t = O ?? Z.palette.primary.main, n = k ?? Z.palette.success.main, r = A ?? Z.palette.info.main, u = ee.define([
+			{
+				tag: g.keyword,
+				color: t,
+				fontWeight: "bold"
+			},
+			{
+				tag: g.name,
+				color: r
+			},
+			{
+				tag: [g.string, g.special(g.string)],
+				color: n,
+				fontWeight: "bold"
+			},
+			{
+				tag: g.number,
+				color: Z.palette.warning.main
+			},
+			{
+				tag: [g.lineComment, g.blockComment],
+				color: Z.palette.text.disabled,
+				fontStyle: "italic"
+			},
+			{
+				tag: g.operator,
+				color: Z.palette.text.secondary
+			},
+			{
+				tag: [g.function(g.variableName), g.function(g.name)],
+				color: Z.palette.secondary.main
+			},
+			{
+				tag: g.typeName,
+				color: Z.palette.info.main
+			},
+			{
+				tag: g.invalid,
+				color: Z.palette.error.main,
+				textDecoration: "underline wavy"
+			}
+		]), _ = i.theme({
+			"&": {
+				height: "100%",
+				fontFamily: "'Fira Code', 'JetBrains Mono', 'Consolas', monospace",
+				fontSize: "0.875rem"
+			},
+			".cm-scroller": { overflow: "auto" },
+			".cm-content": {
+				padding: "8px 4px",
+				caretColor: Z.palette.text.primary
+			},
+			".cm-gutters": {
+				backgroundColor: Q ? Z.palette.grey[900] : Z.palette.grey[50],
+				color: Z.palette.text.disabled,
+				border: "none",
+				borderRight: `1px solid ${Z.palette.divider}`
+			},
+			".cm-lineNumbers .cm-gutterElement": {
+				paddingLeft: "4px",
+				paddingRight: "8px"
+			},
+			".cm-activeLineGutter": { backgroundColor: Z.palette.action.selected },
+			".cm-activeLine": { backgroundColor: Z.palette.action.hover },
+			"&.cm-focused .cm-selectionBackground, .cm-selectionBackground": { backgroundColor: Z.palette.primary.main + "40" },
+			".cm-cursor, .cm-dropCursor": { borderLeftColor: Z.palette.text.primary },
+			"&.cm-focused": { outline: "none" },
+			".cm-placeholder": {
+				color: Z.palette.text.disabled,
+				fontStyle: "italic"
+			},
+			".cm-tooltip": {
+				backgroundColor: Z.palette.background.paper,
+				border: `1px solid ${Z.palette.divider}`,
+				borderRadius: "4px",
+				boxShadow: Z.shadows[4]
+			},
+			".cm-tooltip-autocomplete > ul > li": { color: Z.palette.text.primary },
+			".cm-tooltip-autocomplete > ul > li[aria-selected]": {
+				backgroundColor: Z.palette.primary.main + "20",
+				color: Z.palette.primary.main
+			},
+			".cm-completionMatchedText": {
+				color: Z.palette.primary.main,
+				textDecoration: "none",
+				fontWeight: "bold"
+			},
+			".cm-completionDetail": {
+				color: Z.palette.text.secondary,
+				fontStyle: "italic"
+			},
+			".cm-gutter-lint": { width: "16px" },
+			".cm-lint-marker-error": { color: Z.palette.error.main },
+			".cm-lint-marker-warning": { color: Z.palette.warning.main },
+			".cm-tooltip.cm-tooltip-lint": {
+				backgroundColor: Z.palette.background.paper,
+				border: `1px solid ${Z.palette.divider}`,
+				borderRadius: "4px"
+			},
+			".cm-diagnostic-error": { borderLeft: `3px solid ${Z.palette.error.main}` },
+			".cm-diagnostic-warning": { borderLeft: `3px solid ${Z.palette.warning.main}` },
+			".cm-diagnostic-info": { borderLeft: `3px solid ${Z.palette.info.main}` }
+		}, { dark: Q }), y = j ? Object.fromEntries(j.tables.map((e) => [e.name, (e.columns ?? []).map((e) => ({
+			label: e.name,
+			detail: e.type,
+			type: "property"
+		}))])) : void 0, M = async (e) => {
+			let t = q.current;
+			if (!t) return [];
+			let n = e.state.doc.toString();
+			try {
+				let r = (await t(n)).map((t) => {
+					let n = Math.max(1, Math.min(t.line, e.state.doc.lines)), r = e.state.doc.line(n);
+					return {
+						from: r.from + Math.max(0, (t.col ?? 1) - 1),
+						to: r.to,
+						severity: t.severity ?? "error",
+						message: t.message
+					};
+				});
+				return J.current?.(r.length), r;
+			} catch {
+				return [];
+			}
+		}, N = s.of([{
+			key: "Mod-Enter",
+			run: (e) => (K.current?.(e.state.doc.toString()), !0)
+		}]), P = [
+			_,
+			te(u),
+			C({
+				dialect: T[D],
+				schema: y
+			}),
+			p(),
+			re(),
+			N,
+			s.of([
+				...f,
+				...m,
+				...w
+			]),
+			Y.current.of(i.editable.of(!x && !S)),
+			X.current.of(d.readOnly.of(S)),
+			a(),
+			...E ? [c(), o()] : [],
+			...b ? [l(b)] : [],
+			...$ ? [ne(), h(M, { delay: 600 })] : [],
+			i.updateListener.of((e) => {
+				e.docChanged && V.current?.(e.state.doc.toString());
+				let t = e.state.selection.main.head, n = e.state.doc.lineAt(t);
+				H.current(n.number, t - n.from + 1);
+			}),
+			i.domEventHandlers({
+				blur: () => {
+					U.current?.();
+				},
+				focus: () => {
+					W.current?.();
+				}
+			})
+		], F = new i({
+			state: d.create({
+				doc: e,
+				extensions: P
+			}),
+			parent: z.current
+		});
+		return B.current = F, G.current(F), () => {
+			G.current(null), F.destroy(), B.current = null;
+		};
+	}, [
+		Q,
+		D,
+		$,
+		O,
+		k,
+		A,
+		ie
+	]), e(() => {
+		let e = B.current;
+		if (!e) return;
+		let t = e.state.doc.toString();
+		t !== (v ?? "") && e.dispatch({ changes: {
+			from: 0,
+			to: t.length,
+			insert: v ?? ""
+		} });
+	}, [v]), e(() => {
+		B.current?.dispatch({ effects: [Y.current.reconfigure(i.editable.of(!x && !S)), X.current.reconfigure(d.readOnly.of(S))] });
+	}, [x, S]), /* @__PURE__ */ _(n, {
+		ref: z,
+		sx: {
+			flex: 1,
+			overflow: "hidden",
+			display: "flex",
+			flexDirection: "column",
+			opacity: x ? .5 : 1,
+			backgroundColor: Z.palette.background.paper,
+			"& .cm-editor": {
+				flex: 1,
+				display: "flex",
+				flexDirection: "column"
+			}
+		}
+	});
+}
+//#endregion
+export { E as SqlEditorContent };

package/dist/components/sql-editor/SqlEditorFooter.js

@@ -0,0 +1,45 @@
+import { Box as e, FormHelperText as t } from "@mui/material";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import i from "@mui/icons-material/WarningAmber";
+//#region src/components/sql-editor/SqlEditorFooter.tsx
+function a({ helperText: a, error: o, showLineColumn: s, showErrorCount: c, diagnosticsCount: l, cursorLine: u, cursorCol: d, translation: f }) {
+	let p = f.lineColumn.replace("{line}", String(u)).replace("{col}", String(d)), m = f.errorCount.replace("{count}", String(l));
+	return /* @__PURE__ */ r(e, {
+		sx: {
+			display: "flex",
+			justifyContent: "space-between",
+			alignItems: "flex-start",
+			mt: .5,
+			px: .5
+		},
+		children: [/* @__PURE__ */ r(e, { children: [c && l > 0 && /* @__PURE__ */ r(e, {
+			sx: {
+				display: "flex",
+				alignItems: "center",
+				gap: .5
+			},
+			children: [/* @__PURE__ */ n(i, { sx: {
+				fontSize: "0.875rem",
+				color: "error.main"
+			} }), /* @__PURE__ */ n(t, {
+				sx: {
+					color: "error.main",
+					m: 0
+				},
+				children: m
+			})]
+		}), /* @__PURE__ */ n(t, {
+			error: o,
+			children: a ?? ""
+		})] }), s && /* @__PURE__ */ n(t, {
+			sx: {
+				color: "text.disabled",
+				fontFamily: "monospace",
+				whiteSpace: "nowrap"
+			},
+			children: p
+		})]
+	});
+}
+//#endregion
+export { a as SqlEditorFooter };

package/dist/components/sql-editor/SqlEditorToolbar.js

@@ -0,0 +1,151 @@
+import { ToolbarButton as e } from "../shared/ToolbarButton.js";
+import { useState as t } from "react";
+import { Box as n, Divider as r } from "@mui/material";
+import { redo as i, undo as a } from "@codemirror/commands";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import l from "@mui/icons-material/ContentCopy";
+import u from "@mui/icons-material/Check";
+import d from "@mui/icons-material/Delete";
+import f from "@mui/icons-material/Undo";
+import p from "@mui/icons-material/Redo";
+import m from "@mui/icons-material/AutoFixHigh";
+import h from "@mui/icons-material/PlayArrow";
+import { format as g } from "sql-formatter";
+//#region src/components/sql-editor/SqlEditorToolbar.tsx
+var _ = {
+	standard: "sql",
+	mysql: "mysql",
+	postgresql: "postgresql",
+	sqlite: "sqlite",
+	mssql: "tsql"
+};
+function v({ editorView: v, toolbarConfig: y, translation: b, dialect: x, disabled: S, onExecute: C }) {
+	let [w, T] = t(!1), E = S || !v;
+	function D() {
+		let e = v?.state.doc.toString() ?? "";
+		navigator.clipboard.writeText(e).then(() => {
+			T(!0), setTimeout(() => T(!1), 2e3);
+		});
+	}
+	function O() {
+		let e = v;
+		e && (e.dispatch({ changes: {
+			from: 0,
+			to: e.state.doc.length,
+			insert: ""
+		} }), e.focus());
+	}
+	function k() {
+		let e = v;
+		e && (a(e), e.focus());
+	}
+	function A() {
+		let e = v;
+		e && (i(e), e.focus());
+	}
+	function j() {
+		let e = v;
+		if (!e) return;
+		let t = e.state.doc.toString();
+		try {
+			let n = g(t, { language: _[x] });
+			e.dispatch({ changes: {
+				from: 0,
+				to: e.state.doc.length,
+				insert: n
+			} });
+		} catch {}
+		e.focus();
+	}
+	function M() {
+		let e = v;
+		!e || !C || C(e.state.doc.toString());
+	}
+	let N = y.showFormat, P = y.showCopy || y.showClear, F = y.showUndoRedo, I = y.showExecute && !!C;
+	return /* @__PURE__ */ c(n, {
+		sx: {
+			display: "flex",
+			flexWrap: "wrap",
+			alignItems: "center",
+			gap: .25,
+			px: 1,
+			py: .5
+		},
+		role: "toolbar",
+		"aria-label": "SQL editor actions",
+		children: [
+			N && /* @__PURE__ */ s(n, {
+				sx: {
+					display: "flex",
+					gap: .25
+				},
+				children: /* @__PURE__ */ s(e, {
+					label: b.format,
+					icon: /* @__PURE__ */ s(m, { fontSize: "small" }),
+					onClick: j,
+					disabled: E
+				})
+			}),
+			N && (P || F) && /* @__PURE__ */ s(r, {
+				orientation: "vertical",
+				flexItem: !0,
+				sx: { mx: .5 }
+			}),
+			P && /* @__PURE__ */ c(n, {
+				sx: {
+					display: "flex",
+					gap: .25
+				},
+				children: [y.showCopy && /* @__PURE__ */ s(e, {
+					label: w ? b.copySuccess : b.copy,
+					icon: w ? /* @__PURE__ */ s(u, {
+						fontSize: "small",
+						color: "success"
+					}) : /* @__PURE__ */ s(l, { fontSize: "small" }),
+					onClick: D,
+					disabled: E
+				}), y.showClear && /* @__PURE__ */ s(e, {
+					label: b.clear,
+					icon: /* @__PURE__ */ s(d, { fontSize: "small" }),
+					onClick: O,
+					disabled: E
+				})]
+			}),
+			P && F && /* @__PURE__ */ s(r, {
+				orientation: "vertical",
+				flexItem: !0,
+				sx: { mx: .5 }
+			}),
+			F && /* @__PURE__ */ c(n, {
+				sx: {
+					display: "flex",
+					gap: .25
+				},
+				children: [/* @__PURE__ */ s(e, {
+					label: b.undo,
+					icon: /* @__PURE__ */ s(f, { fontSize: "small" }),
+					onClick: k,
+					disabled: E
+				}), /* @__PURE__ */ s(e, {
+					label: b.redo,
+					icon: /* @__PURE__ */ s(p, { fontSize: "small" }),
+					onClick: A,
+					disabled: E
+				})]
+			}),
+			I && /* @__PURE__ */ c(o, { children: [(P || F) && /* @__PURE__ */ s(r, {
+				orientation: "vertical",
+				flexItem: !0,
+				sx: { mx: .5 }
+			}), /* @__PURE__ */ s(e, {
+				label: b.execute,
+				icon: /* @__PURE__ */ s(h, { fontSize: "small" }),
+				onClick: M,
+				disabled: E
+			})] }),
+			!N && !P && !F && !I && /* @__PURE__ */ s(n, { sx: { height: 32 } })
+		]
+	});
+}
+//#endregion
+export { v as SqlEditorToolbar };