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

package/dist/components/json-editor/JsonEditorContent.js

@@ -0,0 +1,185 @@
+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 { json as f, jsonParseLinter as p } from "@codemirror/lang-json";
+import { defaultKeymap as m, history as h, historyKeymap as g } from "@codemirror/commands";
+import { HighlightStyle as _, syntaxHighlighting as v } from "@codemirror/language";
+import { lintGutter as y, linter as b } from "@codemirror/lint";
+import { tags as x } from "@lezer/highlight";
+import { showMinimap as S } from "@replit/codemirror-minimap";
+import { jsx as C } from "react/jsx-runtime";
+//#region src/components/json-editor/JsonEditorContent.tsx
+function w({ value: w, onChange: T, placeholder: E, disabled: D = !1, readonly: O = !1, showLineNumbers: k = !0, showMinimap: A = !1, highlightColors: j, onViewReady: M, onCursorChange: N, onBlur: P, onFocus: F }) {
+	let I = t(null), L = t(null), R = t(T), z = t(N), B = t(P), V = t(F), H = t(M), U = t(new u()), W = t(new u()), G = r(), K = G.palette.mode === "dark", q = j?.propertyName ?? G.palette.primary.main, J = j?.string ?? G.palette.success.main, Y = j?.number ?? G.palette.warning.main, X = j?.boolean ?? G.palette.info.main, Z = j?.null ?? G.palette.text.secondary;
+	return e(() => {
+		R.current = T;
+	}, [T]), e(() => {
+		z.current = N;
+	}, [N]), e(() => {
+		B.current = P;
+	}, [P]), e(() => {
+		V.current = F;
+	}, [F]), e(() => {
+		H.current = M;
+	}, [M]), e(() => {
+		if (!I.current) return;
+		let e = L.current?.state.doc.toString() ?? w ?? "", t = _.define([
+			{
+				tag: x.propertyName,
+				color: q,
+				fontWeight: "bold"
+			},
+			{
+				tag: x.string,
+				color: J
+			},
+			{
+				tag: x.number,
+				color: Y
+			},
+			{
+				tag: x.bool,
+				color: X,
+				fontWeight: "bold"
+			},
+			{
+				tag: x.null,
+				color: Z,
+				fontStyle: "italic"
+			},
+			{
+				tag: x.bracket,
+				color: G.palette.text.secondary
+			},
+			{
+				tag: x.punctuation,
+				color: G.palette.text.disabled
+			},
+			{
+				tag: x.invalid,
+				color: G.palette.error.main,
+				textDecoration: "underline wavy"
+			}
+		]), n = i.theme({
+			"&": {
+				height: "100%",
+				fontFamily: "'Fira Code', 'JetBrains Mono', 'Consolas', monospace",
+				fontSize: "0.875rem"
+			},
+			".cm-scroller": { overflow: "auto" },
+			".cm-content": {
+				padding: "8px 4px",
+				caretColor: G.palette.text.primary
+			},
+			".cm-gutters": {
+				backgroundColor: K ? G.palette.grey[900] : G.palette.grey[50],
+				color: G.palette.text.disabled,
+				border: "none",
+				borderRight: `1px solid ${G.palette.divider}`
+			},
+			".cm-lineNumbers .cm-gutterElement": {
+				paddingLeft: "4px",
+				paddingRight: "8px"
+			},
+			".cm-activeLineGutter": { backgroundColor: G.palette.action.selected },
+			".cm-activeLine": { backgroundColor: G.palette.action.hover },
+			"&.cm-focused .cm-selectionBackground, .cm-selectionBackground": { backgroundColor: G.palette.primary.main + "40" },
+			".cm-cursor, .cm-dropCursor": { borderLeftColor: G.palette.text.primary },
+			"&.cm-focused": { outline: "none" },
+			".cm-placeholder": {
+				color: G.palette.text.disabled,
+				fontStyle: "italic"
+			},
+			".cm-gutter-lint": { width: "16px" },
+			".cm-lint-marker-error": { color: G.palette.error.main },
+			".cm-lint-marker-warning": { color: G.palette.warning.main },
+			".cm-tooltip.cm-tooltip-lint": {
+				backgroundColor: G.palette.background.paper,
+				border: `1px solid ${G.palette.divider}`,
+				borderRadius: "4px"
+			},
+			".cm-diagnostic-error": { borderLeft: `3px solid ${G.palette.error.main}` },
+			".cm-diagnostic-warning": { borderLeft: `3px solid ${G.palette.warning.main}` }
+		}, { dark: K }), r = A ? [S.of({
+			create: () => {
+				let e = document.createElement("div");
+				return e.style.width = "80px", e.style.overflow = "hidden", e.style.borderLeft = `1px solid ${G.palette.divider}`, e.style.backgroundColor = K ? G.palette.grey[900] : G.palette.grey[50], { dom: e };
+			},
+			displayText: "blocks",
+			showOverlay: "always"
+		})] : [], u = [
+			n,
+			v(t),
+			f(),
+			y(),
+			b(p()),
+			h(),
+			s.of([...m, ...g]),
+			U.current.of(i.editable.of(!D && !O)),
+			W.current.of(d.readOnly.of(O)),
+			a(),
+			...k ? [c(), o()] : [],
+			...E ? [l(E)] : [],
+			...r,
+			i.updateListener.of((e) => {
+				e.docChanged && R.current?.(e.state.doc.toString());
+				let t = e.state.selection.main.head, n = e.state.doc.lineAt(t);
+				z.current(n.number, t - n.from + 1);
+			}),
+			i.domEventHandlers({
+				blur: () => {
+					B.current?.();
+				},
+				focus: () => {
+					V.current?.();
+				}
+			})
+		], C = new i({
+			state: d.create({
+				doc: e,
+				extensions: u
+			}),
+			parent: I.current
+		});
+		return L.current = C, H.current(C), () => {
+			H.current(null), C.destroy(), L.current = null;
+		};
+	}, [
+		K,
+		q,
+		J,
+		Y,
+		X,
+		Z,
+		A
+	]), e(() => {
+		let e = L.current;
+		if (!e) return;
+		let t = e.state.doc.toString();
+		t !== (w ?? "") && e.dispatch({ changes: {
+			from: 0,
+			to: t.length,
+			insert: w ?? ""
+		} });
+	}, [w]), e(() => {
+		L.current?.dispatch({ effects: [U.current.reconfigure(i.editable.of(!D && !O)), W.current.reconfigure(d.readOnly.of(O))] });
+	}, [D, O]), /* @__PURE__ */ C(n, {
+		ref: I,
+		sx: {
+			flex: 1,
+			overflow: "hidden",
+			display: "flex",
+			flexDirection: "column",
+			opacity: D ? .5 : 1,
+			backgroundColor: G.palette.background.paper,
+			"& .cm-editor": {
+				flex: 1,
+				display: "flex",
+				flexDirection: "column"
+			}
+		}
+	});
+}
+//#endregion
+export { w as JsonEditorContent };

package/dist/components/json-editor/JsonEditorFooter.js

@@ -0,0 +1,55 @@
+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/CheckCircleOutlined";
+import a from "@mui/icons-material/ErrorOutlined";
+//#region src/components/json-editor/JsonEditorFooter.tsx
+function o({ helperText: o, error: s, showLineColumn: c, showValidation: l, isValid: u, cursorLine: d, cursorCol: f, translation: p }) {
+	let m = p.lineColumn.replace("{line}", String(d)).replace("{col}", String(f));
+	return /* @__PURE__ */ r(e, {
+		sx: {
+			display: "flex",
+			justifyContent: "space-between",
+			alignItems: "flex-start",
+			mt: .5,
+			px: .5
+		},
+		children: [/* @__PURE__ */ r(e, { children: [l && /* @__PURE__ */ r(e, {
+			sx: {
+				display: "flex",
+				alignItems: "center",
+				gap: .5
+			},
+			children: [u ? /* @__PURE__ */ n(i, {
+				sx: {
+					fontSize: "0.875rem",
+					color: "success.main"
+				},
+				"data-testid": "json-valid-icon"
+			}) : /* @__PURE__ */ n(a, {
+				sx: {
+					fontSize: "0.875rem",
+					color: "error.main"
+				},
+				"data-testid": "json-invalid-icon"
+			}), /* @__PURE__ */ n(t, {
+				sx: {
+					color: u ? "success.main" : "error.main",
+					m: 0
+				},
+				children: u ? p.validJson : p.invalidJson
+			})]
+		}), /* @__PURE__ */ n(t, {
+			error: s,
+			children: o ?? ""
+		})] }), c && /* @__PURE__ */ n(t, {
+			sx: {
+				color: "text.disabled",
+				fontFamily: "monospace",
+				whiteSpace: "nowrap"
+			},
+			children: m
+		})]
+	});
+}
+//#endregion
+export { o as JsonEditorFooter };

package/dist/components/json-editor/JsonEditorToolbar.js

@@ -0,0 +1,148 @@
+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 { jsx as o, jsxs as s } from "react/jsx-runtime";
+import c from "@mui/icons-material/ContentCopy";
+import l from "@mui/icons-material/Check";
+import u from "@mui/icons-material/Delete";
+import d from "@mui/icons-material/Undo";
+import f from "@mui/icons-material/Redo";
+import p from "@mui/icons-material/AutoFixHigh";
+import m from "@mui/icons-material/Compress";
+//#region src/components/json-editor/JsonEditorToolbar.tsx
+function h({ editorView: h, toolbarConfig: g, translation: _, indent: v, disabled: y }) {
+	let [b, x] = t(!1), S = y || !h;
+	function C() {
+		let e = h;
+		if (!e) return;
+		let t = e.state.doc.toString();
+		try {
+			let n = JSON.stringify(JSON.parse(t), null, v);
+			e.dispatch({ changes: {
+				from: 0,
+				to: e.state.doc.length,
+				insert: n
+			} });
+		} catch {}
+		e.focus();
+	}
+	function w() {
+		let e = h;
+		if (!e) return;
+		let t = e.state.doc.toString();
+		try {
+			let n = JSON.stringify(JSON.parse(t));
+			e.dispatch({ changes: {
+				from: 0,
+				to: e.state.doc.length,
+				insert: n
+			} });
+		} catch {}
+		e.focus();
+	}
+	function T() {
+		let e = h?.state.doc.toString() ?? "";
+		navigator.clipboard.writeText(e).then(() => {
+			x(!0), setTimeout(() => x(!1), 2e3);
+		});
+	}
+	function E() {
+		let e = h;
+		e && (e.dispatch({ changes: {
+			from: 0,
+			to: e.state.doc.length,
+			insert: ""
+		} }), e.focus());
+	}
+	function D() {
+		let e = h;
+		e && (a(e), e.focus());
+	}
+	function O() {
+		let e = h;
+		e && (i(e), e.focus());
+	}
+	let k = g.showFormat || g.showCompact, A = g.showCopy || g.showClear, j = g.showUndoRedo;
+	return /* @__PURE__ */ s(n, {
+		sx: {
+			display: "flex",
+			flexWrap: "wrap",
+			alignItems: "center",
+			gap: .25,
+			px: 1,
+			py: .5
+		},
+		role: "toolbar",
+		"aria-label": "JSON editor actions",
+		children: [
+			k && /* @__PURE__ */ s(n, {
+				sx: {
+					display: "flex",
+					gap: .25
+				},
+				children: [g.showFormat && /* @__PURE__ */ o(e, {
+					label: _.format,
+					icon: /* @__PURE__ */ o(p, { fontSize: "small" }),
+					onClick: C,
+					disabled: S
+				}), g.showCompact && /* @__PURE__ */ o(e, {
+					label: _.compact,
+					icon: /* @__PURE__ */ o(m, { fontSize: "small" }),
+					onClick: w,
+					disabled: S
+				})]
+			}),
+			k && (A || j) && /* @__PURE__ */ o(r, {
+				orientation: "vertical",
+				flexItem: !0,
+				sx: { mx: .5 }
+			}),
+			A && /* @__PURE__ */ s(n, {
+				sx: {
+					display: "flex",
+					gap: .25
+				},
+				children: [g.showCopy && /* @__PURE__ */ o(e, {
+					label: b ? _.copySuccess : _.copy,
+					icon: b ? /* @__PURE__ */ o(l, {
+						fontSize: "small",
+						color: "success"
+					}) : /* @__PURE__ */ o(c, { fontSize: "small" }),
+					onClick: T,
+					disabled: S
+				}), g.showClear && /* @__PURE__ */ o(e, {
+					label: _.clear,
+					icon: /* @__PURE__ */ o(u, { fontSize: "small" }),
+					onClick: E,
+					disabled: S
+				})]
+			}),
+			A && j && /* @__PURE__ */ o(r, {
+				orientation: "vertical",
+				flexItem: !0,
+				sx: { mx: .5 }
+			}),
+			j && /* @__PURE__ */ s(n, {
+				sx: {
+					display: "flex",
+					gap: .25
+				},
+				children: [/* @__PURE__ */ o(e, {
+					label: _.undo,
+					icon: /* @__PURE__ */ o(d, { fontSize: "small" }),
+					onClick: D,
+					disabled: S
+				}), /* @__PURE__ */ o(e, {
+					label: _.redo,
+					icon: /* @__PURE__ */ o(f, { fontSize: "small" }),
+					onClick: O,
+					disabled: S
+				})]
+			}),
+			!k && !A && !j && /* @__PURE__ */ o(n, { sx: { height: 32 } })
+		]
+	});
+}
+//#endregion
+export { h as JsonEditorToolbar };

package/dist/components/password-strength-meter/PasswordStrengthBar.js

@@ -0,0 +1,66 @@
+import { Box as e } from "@mui/material";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/password-strength-meter/PasswordStrengthBar.tsx
+function n({ percent: n, color: r, ariaLabel: i, segments: a = !1 }) {
+	if (a) {
+		let a = Math.round(n / 25);
+		return /* @__PURE__ */ t(e, {
+			role: "progressbar",
+			"aria-label": i,
+			"aria-valuenow": n,
+			"aria-valuemin": 0,
+			"aria-valuemax": 100,
+			sx: {
+				width: "100%",
+				display: "flex",
+				gap: "3px",
+				mt: .5
+			},
+			children: [
+				0,
+				1,
+				2,
+				3
+			].map((n) => /* @__PURE__ */ t(e, {
+				"data-testid": n < a ? "psm-meter-segment-active" : "psm-meter-segment",
+				sx: {
+					flex: 1,
+					height: "8px",
+					borderRadius: "3px",
+					border: "1px solid",
+					borderColor: "divider",
+					backgroundColor: n < a ? r : "transparent",
+					transition: "background-color 0.3s ease-in-out"
+				}
+			}, n))
+		});
+	}
+	return /* @__PURE__ */ t(e, {
+		role: "progressbar",
+		"aria-label": i,
+		"aria-valuenow": n,
+		"aria-valuemin": 0,
+		"aria-valuemax": 100,
+		sx: {
+			width: "100%",
+			height: "8px",
+			border: "1px solid",
+			borderColor: "divider",
+			borderRadius: "6px",
+			mt: .5,
+			display: "flex"
+		},
+		children: /* @__PURE__ */ t(e, {
+			"data-testid": "psm-meter",
+			sx: {
+				height: "100%",
+				width: `${n}%`,
+				backgroundColor: r,
+				borderRadius: "6px",
+				transition: "width 0.2s ease-in-out"
+			}
+		})
+	});
+}
+//#endregion
+export { n as PasswordStrengthBar };