@health-samurai/react-components 0.0.0-alpha.4 → 0.0.0-alpha.6

package/src/components/code-editor/index.tsx

@@ -6,6 +6,8 @@ import {
 } from "@codemirror/autocomplete";
 import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
 import { json, jsonParseLinter } from "@codemirror/lang-json";
+import { SQLDialect, sql } from "@codemirror/lang-sql";
+import { yaml } from "@codemirror/lang-yaml";
 import {
 	bracketMatching,
 	foldGutter,
@@ -16,7 +18,7 @@ import {
 } from "@codemirror/language";
 import { linter, lintGutter, lintKeymap } from "@codemirror/lint";
 import { highlightSelectionMatches, searchKeymap } from "@codemirror/search";
-import { EditorState } from "@codemirror/state";
+import { Compartment, EditorState } from "@codemirror/state";
 import {
 	crosshairCursor,
 	drawSelection,
@@ -28,10 +30,13 @@ import {
 	keymap,
 	lineNumbers,
 	rectangularSelection,
+	type ViewUpdate,
 } from "@codemirror/view";
 import { tags } from "@lezer/highlight";
 import * as React from "react";
 
+import { http } from "./http";
+
 const baseTheme = EditorView.baseTheme({
 	"&": {
 		backgroundColor: "var(--color-bg-primary)",
@@ -70,33 +75,229 @@ const baseTheme = EditorView.baseTheme({
 	},
 });
 
+const readOnlyTheme = EditorView.theme({
+	"&": {
+		backgroundColor: "var(--color-bg-secondary)",
+		height: "100%",
+		width: "100%",
+		fontSize: "14px",
+		paddingTop: "8px",
+		paddingBottom: "8px",
+	},
+	".cm-scroller": {
+		overflow: "auto",
+	},
+	".cm-content": {
+		fontFamily: "var(--font-family-mono)",
+		padding: "0",
+	},
+	"&.cm-focused": {
+		outline: "none",
+	},
+	".cm-gutter": {
+		fontFamily: "var(--font-family-mono)",
+	},
+	".cm-gutters": {
+		backgroundColor: "var(--color-bg-secondary)",
+		border: "none",
+	},
+	".cm-lineNumbers": {
+		paddingLeft: "16px",
+	},
+	".cm-activeLineGutter": {
+		backgroundColor: "var(--color-bg-secondary)",
+		color: "var(--color-text-primary)",
+	},
+	".cm-activeLine": {
+		backgroundColor: "rgba(255, 255, 255, 0)",
+	},
+});
+
 const customHighlightStyle = HighlightStyle.define([
 	{ tag: tags.propertyName, color: "#EA4A35" },
 	{ tag: tags.string, color: "#405CBF" },
 	{ tag: tags.number, color: "#00A984" },
 	{ tag: tags.bool, color: "#569cd6" },
 	{ tag: tags.null, color: "#569cd6" },
+	{ tag: tags.keyword, color: "#569cd6" },
+	{ tag: tags.operatorKeyword, color: "#405CBF" },
+	{ tag: tags.controlKeyword, color: "#EA4A35" },
+	{ tag: tags.typeName, color: "#00A984" },
+	{ tag: tags.variableName, color: "#EA4A35" },
+	{ tag: tags.operator, color: "#405CBF" },
+	{ tag: tags.comment, color: "#00A984" },
+	{ tag: tags.lineComment, color: "#00A984" },
+	{ tag: tags.blockComment, color: "#00A984" },
 ]);
 
+const SQL_KEYWORDS = [
+	"select",
+	"from",
+	"where",
+	"and",
+	"or",
+	"not",
+	"in",
+	"between",
+	"like",
+	"insert",
+	"update",
+	"delete",
+	"create",
+	"drop",
+	"alter",
+	"table",
+	"index",
+	"join",
+	"inner",
+	"left",
+	"right",
+	"outer",
+	"on",
+	"as",
+	"order",
+	"by",
+	"group",
+	"having",
+	"limit",
+	"offset",
+	"union",
+	"intersect",
+	"except",
+	"distinct",
+	"all",
+	"exists",
+	"case",
+	"when",
+	"then",
+	"else",
+	"end",
+	"null",
+	"true",
+	"false",
+	"is",
+	"asc",
+	"desc",
+];
+
+const SQL_BUILTIN = [
+	"varchar",
+	"char",
+	"text",
+	"integer",
+	"int",
+	"bigint",
+	"decimal",
+	"numeric",
+	"float",
+	"real",
+	"boolean",
+	"date",
+	"time",
+	"timestamp",
+	"uuid",
+	"count",
+	"sum",
+	"avg",
+	"min",
+	"max",
+	"coalesce",
+	"concat",
+	"substring",
+	"upper",
+	"lower",
+	"trim",
+	"length",
+	"now",
+	"current_date",
+	"current_time",
+];
+
+const customSQLDialect = SQLDialect.define({
+	keywords: SQL_KEYWORDS.join(" "),
+	builtin: SQL_BUILTIN.join(" "),
+});
+
+type LanguageMode = "json" | "http" | "sql" | "yaml";
+
+function languageExtensions(mode: LanguageMode) {
+	if (mode === "http") {
+		const jsonLang = json();
+		const yamlLang = yaml();
+		return [
+			http((ct) =>
+				ct === "application/json"
+					? jsonLang.language
+					: ct === "text/yaml"
+						? yamlLang.language
+						: null,
+			),
+			syntaxHighlighting(customHighlightStyle),
+		];
+	} else if (mode === "sql") {
+		return [
+			sql({ dialect: customSQLDialect }),
+			syntaxHighlighting(customHighlightStyle),
+		];
+	} else if (mode === "yaml") {
+		return [yaml(), syntaxHighlighting(customHighlightStyle)];
+	} else {
+		return [
+			json(),
+			linter(jsonParseLinter(), { delay: 300 }),
+			syntaxHighlighting(customHighlightStyle),
+		];
+	}
+}
+
+type CodeEditorProps = {
+	readOnly?: boolean;
+	isReadOnlyTheme?: boolean;
+	defaultValue?: string;
+	currentValue?: string;
+	onChange?: (value: string) => void;
+	onUpdate?: (update: ViewUpdate) => void;
+	id?: string;
+	mode?: LanguageMode;
+	viewCallback?: (view: EditorView) => void;
+};
+
+export type CodeEditorView = EditorView;
+
 export function CodeEditor({
 	defaultValue,
+	currentValue,
 	onChange,
-}: {
-	defaultValue?: string;
-	onChange?: (value: string) => void;
-}) {
-	const editorRef = React.useRef(null);
+	onUpdate,
+	viewCallback,
+	readOnly = false,
+	id,
+	mode = "json",
+	isReadOnlyTheme = false,
+}: CodeEditorProps) {
+	const domRef = React.useRef(null);
+	const [view, setView] = React.useState<EditorView | null>(null);
+
+	const initialValue = React.useRef(defaultValue ?? "");
+
+	const onChangeComparment = React.useRef(new Compartment());
+	const onUpdateComparment = React.useRef(new Compartment());
+	const languageCompartment = React.useRef(new Compartment());
+	const readOnlyCompartment = React.useRef(new Compartment());
+	const themeCompartment = React.useRef(new Compartment());
 
 	React.useEffect(() => {
-		if (!editorRef.current) {
+		if (!domRef.current) {
 			return;
 		}
 
 		const view = new EditorView({
-			parent: editorRef.current,
+			parent: domRef.current,
 			state: EditorState.create({
-				doc: defaultValue ?? "",
+				doc: initialValue.current,
 				extensions: [
+					EditorView.contentAttributes.of({ "data-gramm": "false" }),
+					readOnlyCompartment.current.of(EditorState.readOnly.of(false)),
 					lineNumbers(),
 					foldGutter(),
 					highlightSpecialChars(),
@@ -105,8 +306,7 @@ export function CodeEditor({
 					dropCursor(),
 					EditorState.allowMultipleSelections.of(true),
 					indentOnInput(),
-					json(),
-					syntaxHighlighting(customHighlightStyle),
+					languageCompartment.current.of([]),
 					bracketMatching(),
 					closeBrackets(),
 					autocompletion(),
@@ -115,7 +315,7 @@ export function CodeEditor({
 					highlightActiveLine(),
 					highlightActiveLineGutter(),
 					highlightSelectionMatches(),
-					baseTheme,
+					themeCompartment.current.of(baseTheme),
 					keymap.of([
 						...closeBracketsKeymap,
 						...defaultKeymap,
@@ -125,19 +325,105 @@ export function CodeEditor({
 						...completionKeymap,
 						...lintKeymap,
 					]),
-					linter(jsonParseLinter(), { delay: 300 }),
 					lintGutter(),
-					EditorView.updateListener.of((update) => {
-						if (update.docChanged && onChange) {
-							onChange(update.view.state.doc.toString());
-						}
-					}),
+					onChangeComparment.current.of([]),
+					onUpdateComparment.current.of([]),
 				],
 			}),
 		});
 
-		return () => view.destroy();
-	}, [defaultValue, onChange]);
+		setView(() => view);
+
+		return () => {
+			view.destroy();
+			setView(() => null);
+		};
+	}, []);
+
+	React.useEffect(() => {
+		if (viewCallback && view) {
+			viewCallback(view);
+		}
+	}, [view, viewCallback]);
+
+	React.useEffect(() => {
+		view?.dispatch({
+			effects: onChangeComparment.current.reconfigure([
+				EditorView.updateListener.of((update) => {
+					if (update.docChanged && onChange) {
+						onChange(update.view.state.doc.toString());
+					}
+				}),
+			]),
+		});
+	}, [view, onChange]);
+
+	React.useEffect(() => {
+		view?.dispatch({
+			effects: onUpdateComparment.current.reconfigure([
+				EditorView.updateListener.of((update) => {
+					if (onUpdate) {
+						onUpdate(update);
+					}
+				}),
+			]),
+		});
+	}, [view, onUpdate]);
+
+	// FIXME: it is probably better to have CM manage its state.
+	React.useEffect(() => {
+		if (!view || currentValue === undefined) {
+			return;
+		}
+
+		const currentDoc = view.state.doc.toString();
+		if (currentDoc !== currentValue) {
+			view.dispatch({
+				changes: {
+					from: 0,
+					to: currentDoc.length,
+					insert: currentValue,
+				},
+			});
+		}
+	}, [currentValue, view]);
+
+	React.useEffect(() => {
+		if (view === null) {
+			return;
+		}
+		view.dispatch({
+			effects: languageCompartment.current.reconfigure(
+				languageExtensions(mode),
+			),
+		});
+	}, [mode, view]);
+
+	React.useEffect(() => {
+		if (view === null) {
+			return;
+		}
+		view.dispatch({
+			effects: [
+				readOnlyCompartment.current.reconfigure(
+					EditorState.readOnly.of(readOnly),
+				),
+			],
+		});
+	}, [readOnly, view]);
+
+	React.useEffect(() => {
+		if (view === null) {
+			return;
+		}
+		view.dispatch({
+			effects: [
+				themeCompartment.current.reconfigure(
+					isReadOnlyTheme ? readOnlyTheme : baseTheme,
+				),
+			],
+		});
+	}, [isReadOnlyTheme, view]);
 
-	return <div className="h-full w-full" ref={editorRef} />;
+	return <div className="h-full w-full" ref={domRef} id={id} />;
 }

package/src/components/code-editor.stories.tsx

@@ -1,4 +1,7 @@
+import type { EditorView } from "@codemirror/view";
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import React from "react";
+import { Input } from "#shadcn/components/ui/input.js";
 import { CodeEditor } from "./code-editor";
 
 const meta: Meta<typeof CodeEditor> = {
@@ -28,7 +31,298 @@ export const Default: Story = {
 	},
 	render: () => (
 		<div className="h-[500px] w-[500px]">
-			<CodeEditor />
+			<CodeEditor mode="http" />
 		</div>
 	),
 };
+
+type ParsedHeader = {
+	name: string;
+	nameTrivia: string;
+	value: string;
+	valueTrivia: string;
+};
+
+type Parsed = {
+	method: string;
+	methodTrivia: string;
+	path: string;
+	pathTrivia: string;
+	headers: ParsedHeader[];
+	headersTrivia: string;
+};
+
+function parse(query: string): Parsed {
+	let hi = 0;
+	let lo = 0;
+	const res: Parsed = {
+		method: "",
+		methodTrivia: "",
+		path: "",
+		pathTrivia: "",
+		headers: [],
+		headersTrivia: "",
+	};
+
+	// Note that we iterate by code units, but it doesn't change correctness.
+	// method
+	for (hi = 0; hi < query.length; ++hi) {
+		const c = query[hi];
+		if (c === " " || c === "\t" || c === "\n") {
+			break;
+		}
+	}
+	res.method = query.substring(lo, hi);
+	lo = hi;
+	if (lo >= query.length) {
+		return res;
+	}
+
+	// method trivia
+	for (hi = lo; hi < query.length; ++hi) {
+		const c = query[hi];
+		if (!(c === " " || c === "\t")) {
+			break;
+		}
+	}
+	res.methodTrivia = query.substring(lo, hi);
+	lo = hi;
+	if (lo >= query.length) {
+		return res;
+	}
+
+	// path
+	for (hi = lo; hi < query.length; ++hi) {
+		const c = query[hi];
+		if (c === "\n") {
+			break;
+		}
+	}
+	res.path = query.substring(lo, hi);
+	lo = hi;
+	if (lo >= query.length) {
+		return res;
+	}
+
+	// path trivia
+	if (query[hi] === "\n") {
+		hi += 1;
+		res.pathTrivia = query.substring(lo, hi);
+	}
+	lo = hi;
+	if (lo >= query.length) {
+		return res;
+	}
+
+	// headers
+	let header: ParsedHeader = {
+		name: "",
+		nameTrivia: "",
+		value: "",
+		valueTrivia: "",
+	};
+	let headerReady = false;
+	// SAFETY: don't decrease hi inside this loop.
+	for (hi = lo; hi < query.length; ++hi) {
+		if (headerReady) {
+			res.headers.push(header);
+		}
+		header = { name: "", nameTrivia: "", value: "", valueTrivia: "" };
+		headerReady = false;
+
+		if (query[hi] === "\n") {
+			// end of headers
+			break;
+		}
+
+		// header name
+		for (lo = hi; hi <= query.length; ++hi) {
+			const c = query[hi];
+			if (c === " " || c === "\t" || c === "\n" || c === ":") {
+				break;
+			}
+		}
+		headerReady = true;
+		header.name = query.substring(lo, hi);
+		lo = hi;
+		if (lo >= query.length) {
+			break;
+		}
+
+		// header name trivia
+		let colonFound = false;
+		for (lo = hi; hi <= query.length; ++hi) {
+			const c = query[hi];
+			if (c === ":" && !colonFound) {
+				colonFound = true;
+			} else if (!(c === " " || c === "\t")) {
+				break;
+			}
+		}
+		header.nameTrivia = query.substring(lo, hi);
+		lo = hi;
+		if (lo >= query.length) {
+			break;
+		}
+
+		// header value
+		for (hi = lo; hi < query.length; ++hi) {
+			const c = query[hi];
+			if (c === "\n") {
+				break;
+			}
+		}
+		header.value = query.substring(lo, hi);
+		lo = hi;
+		if (lo >= query.length) {
+			break;
+		}
+
+		// header value trivia
+		if (query[hi] === "\n") {
+			header.valueTrivia = query.substring(lo, hi + 1);
+		}
+		lo = hi + 1;
+		if (lo >= query.length) {
+			break;
+		}
+	}
+	if (headerReady) {
+		res.headers.push(header);
+	}
+
+	if (query[hi] === "\n") {
+		res.headersTrivia = query.substring(lo, hi + 1);
+	}
+
+	return res;
+}
+
+const MethodInput = React.memo(function MethodInput({
+	method,
+	onMethodChange,
+}: {
+	method: string;
+	onMethodChange: (ev: React.ChangeEvent<HTMLInputElement>) => void;
+}) {
+	return (
+		<div className="flex justify-center items-baseline">
+			Method:
+			<Input
+				type="text"
+				className="inline"
+				value={method}
+				onChange={onMethodChange}
+			/>
+		</div>
+	);
+});
+
+const PathInput = React.memo(function PathInput({
+	path,
+	onPathChange,
+}: {
+	path: string;
+	onPathChange: (ev: React.ChangeEvent<HTMLInputElement>) => void;
+}) {
+	return (
+		<div className="flex justify-center items-baseline">
+			{"Path: "}
+			<Input
+				type="text"
+				className="inline"
+				value={path}
+				onChange={onPathChange}
+			/>
+		</div>
+	);
+});
+
+function ComplexComp() {
+	const [rawQuery, setRawQuery] = React.useState("");
+	const parsed = React.useMemo(() => parse(rawQuery), [rawQuery]);
+	const parsedRef = React.useRef(parsed);
+	React.useEffect(() => {
+		parsedRef.current = parsed;
+	}, [parsed]);
+	const method = React.useMemo(() => parsed.method, [parsed.method]);
+	const path = React.useMemo(() => parsed.path, [parsed.path]);
+
+	const viewRef = React.useRef<EditorView | null>(null);
+
+	const onMethodChange = React.useCallback(
+		(ev: React.ChangeEvent<HTMLInputElement>) => {
+			let newVal = ev.target.value;
+
+			if (newVal.indexOf(" ") !== -1) {
+				newVal = newVal.replaceAll(" ", "").replaceAll("\t", "");
+			}
+
+			const view = viewRef.current;
+			if (view === null) {
+				return null;
+			}
+
+			const from = 0;
+			const to = parsedRef.current.method.length;
+
+			view.dispatch({
+				changes: {
+					from: from,
+					to: to,
+					insert: newVal,
+				},
+			});
+		},
+		[],
+	);
+
+	const onPathChange = React.useCallback(
+		(ev: React.ChangeEvent<HTMLInputElement>) => {
+			const newVal = ev.target.value;
+
+			const view = viewRef.current;
+			if (view === null) {
+				return null;
+			}
+
+			const from =
+				parsedRef.current.method.length + parsedRef.current.methodTrivia.length;
+			const to = from + parsedRef.current.path.length;
+			console.log(from, to);
+
+			view.dispatch({
+				changes: {
+					from: from,
+					to: to,
+					insert: newVal,
+				},
+			});
+		},
+		[],
+	);
+
+	return (
+		<>
+			<MethodInput method={method} onMethodChange={onMethodChange} />
+			<PathInput path={path} onPathChange={onPathChange} />
+			<div className="h-[500px] w-[500px] border-black border-2">
+				<CodeEditor
+					mode="http"
+					onUpdate={(update) => {
+						if (update.docChanged) {
+							setRawQuery(update.state.doc.toString());
+						}
+					}}
+					viewCallback={(view) => {
+						viewRef.current = view;
+					}}
+				/>
+			</div>
+		</>
+	);
+}
+
+export const Complex: Story = {
+	render: () => ComplexComp(),
+};