@health-samurai/react-components 0.0.0-alpha.3 → 0.0.0-alpha.5

package/src/components/code-editor/http/grammar/http.grammar

@@ -0,0 +1,74 @@
+@top Http {
+    httpRequest
+}
+
+@tokens {
+    eof { @eof }
+
+    lf { $[\n] }
+    notLf { ![\n] }
+
+    cr { $[\r] }
+    notCr { ![\r] }
+
+    colon { $[:] }
+    notColon { ![:] }
+
+    space { $[ \t] }
+    notSpace { ![ \t] }
+
+    headerNameChar { ![\n\r \t:] }
+    headerNameText { headerNameChar+ }
+
+    headerValueFirstChar { ![\n\r \t] }
+    headerValueChar { ![\n\r] }
+    headerValueLastChar { headerValueFirstChar }
+    headerValueText { headerValueFirstChar headerValueChar* headerValueLastChar | headerValueFirstChar }
+
+    methodChar { ![\n\r \t] }
+    methodText { methodChar+ }
+
+    pathChar { ![\n\r] }
+    firstPathChar { ![\n\r \t] }
+    pathText { firstPathChar pathChar* }
+
+    crlf { (cr lf) | cr | lf }
+
+    bodyChar { _ }
+}
+
+HttpRequestMethod[group="Method"] {
+    methodText
+}
+
+HttpRequestPath {
+    pathText
+}
+
+httpRequestLine {
+    space* HttpRequestMethod space+ HttpRequestPath crlf
+}
+
+HttpHeaderName {
+    headerNameText
+}
+
+HttpHeaderValue {
+    headerValueText
+}
+
+HttpHeader {
+    space* HttpHeaderName space* colon space* HttpHeaderValue space* crlf
+}
+
+HttpHeaders {
+    HttpHeader+
+}
+
+HttpBody {
+    bodyChar*
+}
+
+httpRequest {
+    httpRequestLine HttpHeaders? crlf HttpBody
+}

package/src/components/code-editor/http/grammar/http.terms.ts

@@ -0,0 +1,9 @@
+// This file was generated by lezer-generator. You probably shouldn't edit it.
+export const Http = 1,
+	HttpRequestMethod = 2,
+	HttpRequestPath = 3,
+	HttpHeaders = 4,
+	HttpHeader = 5,
+	HttpHeaderName = 6,
+	HttpHeaderValue = 7,
+	HttpBody = 8;

package/src/components/code-editor/http/grammar/http.test.ts

@@ -0,0 +1,110 @@
+// Tests for lezer Http grammar
+
+import { testTree } from "@lezer/generator/test";
+import { parser } from "./http";
+
+type StackEntry = {
+	name: string;
+	from: number;
+	to: number;
+	value: string;
+	children: StackEntry[];
+	textNode?: boolean;
+};
+
+function parseHttp(input: string): StackEntry {
+	const stack: StackEntry[] = [];
+	parser.parse(input).iterate({
+		enter: (node) => {
+			const nodeName = node.type.name;
+			const nodeFrom = node.from;
+			const nodeTo = node.to;
+			const value = input.slice(nodeFrom, nodeTo);
+
+			stack.push({
+				name: nodeName,
+				from: nodeFrom,
+				to: nodeTo,
+				value: value,
+				children: [],
+			});
+		},
+
+		leave: () => {
+			const current = stack.pop();
+			if (current === undefined) {
+				throw "Stack underflow";
+			}
+
+			if (stack.length === 0) {
+				// Re-push root
+				stack.push(current);
+				return;
+			}
+
+			const parent = stack[stack.length - 1];
+			if (parent === undefined) {
+				throw "Impossible";
+			}
+
+			parent.children.push(current);
+		},
+	});
+
+	const res = stack.pop();
+	if (res === undefined) {
+		throw "Stack underflow";
+	}
+	return res;
+}
+
+type Tree = TreeNode | string;
+type TreeNode = {
+	name: string;
+	children: Tree[];
+};
+
+function transform(root: StackEntry): Tree {
+	const tree: Tree = {
+		name: root.name,
+		children: [],
+	};
+
+	let pos = root.from;
+	for (const child of root.children) {
+		if (pos < child.from) {
+			const prefix = root.value.slice(pos - root.from, child.from - root.from);
+			tree.children.push(prefix);
+		}
+
+		tree.children.push(transform(child));
+		pos = child.to;
+	}
+
+	if (pos < root.to) {
+		tree.children.push(root.value.slice(pos - root.from));
+	}
+
+	return tree;
+}
+
+const tree = parser.parse("GET /\nAccept: text/yaml\n\nhello: world");
+console.dir(parseHttp("GET /\nAccept: text/yaml\n\nhello: world\n\nagain"), {
+	depth: null,
+});
+console.dir(
+	transform(parseHttp("GET /\nAccept: text/yaml\n\nhello: world\n\nagain")),
+	{
+		depth: null,
+	},
+);
+console.log(tree);
+tree.iterate({
+	enter: (node) => {
+		console.log(`ENTER ${node.type.name}[${node.from}:${node.to}]`);
+	},
+	leave: (node) => {
+		console.log(`LEAVE ${node.type.name}[${node.from}:${node.to}]`);
+	},
+});
+testTree(tree, `Http`);

package/src/components/code-editor/http/grammar/http.ts

@@ -0,0 +1,21 @@
+// This file was generated by lezer-generator. You probably shouldn't edit it.
+import { LRParser } from "@lezer/lr";
+export const parser = LRParser.deserialize({
+	version: 14,
+	states:
+		"'zOQOPOOOOOO'#Ce'#CeOQOPO'#CjOOOO'#C^'#C^OYOPO'#CjO_OQO'#CiQOOOOOOOOO-E6c-E6cOYOPO,59UOjOSO,59UOrOQO'#CaOOOO'#Cb'#CbOzOQO'#CaOOOO'#Cf'#CfO!SOQO'#C`O!_OWO,59TO!gOPO,59TOjOSO1G.pOOOO'#C_'#C_O!lOPO1G.pO!qOQO,58{O!qOQO,58{O!yO`O,58{OOOO-E6d-E6dOOOO'#Cg'#CgO#ROWO'#CdOOOO1G.o1G.oO!_OWO1G.oO#ZOPO7+$[OOOO7+$[7+$[O#`OQO1G.gO!yO`O1G.gO!yO`O1G.gOOOO'#Cc'#CcO#hOPO1G.gOOOO-E6e-E6eOOOO7+$Z7+$ZOOOO<<Gv<<GvO!yO`O7+$RO!yO`O7+$RO#pOPO7+$RO#pOPO7+$ROOOO7+$R7+$RO!yO`O<<GmO#xOPO<<GmO#xOPO<<GmOOOO<<Gm<<GmO$QOPOAN=XO$QOPOAN=XOOOOAN=XAN=XO$YOPOG22sOOOOG22sG22sOOOOLD(_LD(_",
+	stateData:
+		"$b~O_PO`RO~O_PO~O_POb_OcZO~O_POabO~O_POcZO~O_POdfO~O_POcZObSX~OfhO[WP~ObkO~ObmO~O_POdoO~O_POeqO~OfhO[WX~ObuO~O_POdvO~O_PObzO~O_POb!OO~O_POb!RO~O_POb!TO~O_POb!UO~O",
+	goto: "#|_PP`flosz!Y!`#i#oP#v#yQSORWQQcXRlaR`TT]T^S[T^RdYQrfSxopS|vwR!P{Qj_RtkQQOjVQXYaenpwy{}!Q!SQXSSYT^QaWQe[QndQpfQwoQyrQ{vQ}xQ!Q|R!S!PQ^TRg^Si_kRsiRUORTO",
+	nodeNames:
+		"⚠ Http HttpRequestMethod HttpRequestPath HttpHeaders HttpHeader HttpHeaderName HttpHeaderValue HttpBody",
+	maxTerm: 22,
+	nodeProps: [["group", 2, "Method"]],
+	skippedNodes: [0],
+	repeatNodeCount: 3,
+	tokenData:
+		"'xoR]OXzXY&VYZ&^Z]z]^&e^pzpq&Vq![z![!]&t!];'Sz;'S;=`'k;=`<%l's<%lOzo!XYfWcQe``PaSOX!wXY#rZ]!w^p!wpq#rq![!w![!]%W!];'S!w;'S;=`&P<%lO!wg#SYcQe``PaSOX!wXY#rZ]!w^p!wpq#rq![!w![!]%W!];'S!w;'S;=`&P<%lO!wd#wWaSOX$aXY#rZ]$a^p$apq#rq;'S$a;'S;=`%Q<%lO$ad$hWe`aSOX$aXY#rZ]$a^p$apq#rq;'S$a;'S;=`%Q<%lO$ad%TP;=`<%l$ae%aWe``PaSOX%WXY#rZ]%W^p%Wpq#rq;'S%W;'S;=`%y<%lO%We%|P;=`<%l%Wg&SP;=`<%l!wo&^OfW_gZ&eOfWbRZ&lPfWbRYZ&oR&tObRo'RWfWdQe``PaSOX%WXY#rZ]%W^p%Wpq#rq;'S%W;'S;=`%y<%lO%Wo'pPfW;=`<%lzW'xOfW",
+	tokenizers: [0, 1, 2, 3, 4],
+	topRules: { Http: [0, 1] },
+	tokenPrec: 0,
+});

package/src/components/code-editor/http/index.ts

@@ -0,0 +1,87 @@
+import {
+	foldInside,
+	foldNodeProp,
+	type Language,
+	LanguageSupport,
+	LRLanguage,
+} from "@codemirror/language";
+import { parseMixed } from "@lezer/common";
+import { styleTags, tags } from "@lezer/highlight";
+import type { LRParser } from "@lezer/lr";
+import { parser } from "./grammar/http";
+
+function makeParser(
+	bodyLanguages: (contentType: string) => Language | null,
+): LRParser {
+	return parser.configure({
+		props: [
+			styleTags({
+				HttpHeaderName: tags.variableName,
+				HttpHeaderValue: tags.attributeValue,
+			}),
+
+			foldNodeProp.add({
+				HttpHeaders: foldInside,
+			}),
+		],
+		wrap: parseMixed((node, input) => {
+			if (node.name !== "HttpBody") {
+				return null;
+			}
+
+			const headers = node.node.prevSibling;
+			if (headers?.name !== "HttpHeaders") {
+				return null;
+			}
+
+			let contentType: string | null = null;
+
+			for (
+				let child = headers.firstChild;
+				child !== null;
+				child = child.nextSibling
+			) {
+				const headerNameNode = child.getChild("HttpHeaderName");
+				if (headerNameNode === null) {
+					continue;
+				}
+
+				const headerName = input.read(headerNameNode.from, headerNameNode.to);
+				if (headerName.toLowerCase() !== "content-type") {
+					continue;
+				}
+
+				if (contentType !== null) {
+					// Disallow multiple content types
+					return null;
+				}
+
+				const headerValueNode = child.getChild("HttpHeaderValue");
+				if (headerValueNode === null) {
+					continue;
+				}
+
+				contentType = input.read(headerValueNode.from, headerValueNode.to);
+			}
+
+			if (contentType === null) {
+				return null;
+			}
+
+			const language = bodyLanguages(contentType);
+			if (language === null) {
+				return null;
+			}
+
+			return { parser: language.parser };
+		}),
+	});
+}
+
+function http(bodyLanguages: (contentType: string) => Language | null) {
+	const parser = makeParser(bodyLanguages);
+	const language = LRLanguage.define({ parser: parser });
+	return new LanguageSupport(language, []);
+}
+
+export { http };

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

@@ -16,7 +16,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 +28,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,6 +73,44 @@ 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" },
@@ -78,25 +119,70 @@ const customHighlightStyle = HighlightStyle.define([
 	{ tag: tags.null, color: "#569cd6" },
 ]);
 
+type LanguageMode = "json" | "http";
+
+function languageExtensions(mode: LanguageMode) {
+	if (mode === "http") {
+		const jsonLang = json();
+		return [
+			http((ct) => (ct === "application/json" ? jsonLang.language : null)),
+			syntaxHighlighting(customHighlightStyle),
+		];
+	} else {
+		return [
+			json(),
+			linter(jsonParseLinter(), { delay: 300 }),
+			syntaxHighlighting(customHighlightStyle),
+		];
+	}
+}
+
+type CodeEditorProps = {
+	readOnly?: 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",
+}: 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 +191,7 @@ export function CodeEditor({
 					dropCursor(),
 					EditorState.allowMultipleSelections.of(true),
 					indentOnInput(),
-					json(),
-					syntaxHighlighting(customHighlightStyle),
+					languageCompartment.current.of([]),
 					bracketMatching(),
 					closeBrackets(),
 					autocompletion(),
@@ -115,7 +200,7 @@ export function CodeEditor({
 					highlightActiveLine(),
 					highlightActiveLineGutter(),
 					highlightSelectionMatches(),
-					baseTheme,
+					themeCompartment.current.of(baseTheme),
 					keymap.of([
 						...closeBracketsKeymap,
 						...defaultKeymap,
@@ -125,19 +210,95 @@ 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),
+				),
+				themeCompartment.current.reconfigure(
+					readOnly ? readOnlyTheme : baseTheme,
+				),
+			],
+		});
+	}, [readOnly, 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

@@ -28,7 +28,7 @@ export const Default: Story = {
 	},
 	render: () => (
 		<div className="h-[500px] w-[500px]">
-			<CodeEditor />
+			<CodeEditor mode="http" />
 		</div>
 	),
 };

package/src/components/request-line-editor.stories.tsx

@@ -18,13 +18,9 @@ const meta: Meta<typeof RequestLineEditor> = {
 export default meta;
 type Story = StoryObj<typeof RequestLineEditor>;
 
-function RequestLineEditorWrapper({
-	selectedMethod,
-	methods,
-	inputValue,
-}: RequestLineEditorProps) {
-	const [currentSelectedMethod, setMethod] = React.useState(selectedMethod);
-	const [currentInputValue, setInputValue] = React.useState(inputValue);
+function RequestLineEditorWrapper({ method, path }: RequestLineEditorProps) {
+	const [currentSelectedMethod, setMethod] = React.useState(method);
+	const [currentInputValue, setInputValue] = React.useState(path);
 	const actionSetMethod = (method: string) => {
 		action("setMethod")(method);
 		setMethod(method);
@@ -35,56 +31,50 @@ function RequestLineEditorWrapper({
 	};
 	return (
 		<RequestLineEditor
-			methods={methods}
-			selectedMethod={currentSelectedMethod}
-			setMethod={actionSetMethod}
-			inputValue={currentInputValue}
-			onInputChange={actionSetInputValue}
+			method={currentSelectedMethod}
+			onMethodChange={actionSetMethod}
+			path={currentInputValue}
+			onPathChange={actionSetInputValue}
 		/>
 	);
 }
 
 export const GET: Story = {
 	args: {
-		selectedMethod: "GET",
-		methods: ["GET", "POST", "PUT", "PATCH", "DELETE"],
-		inputValue: "/fhir/Patient",
+		method: "GET",
+		path: "/fhir/Patient",
 	},
 	render: (args) => <RequestLineEditorWrapper {...args} />,
 };
 
 export const POST: Story = {
 	args: {
-		selectedMethod: "POST",
-		methods: ["GET", "POST", "PUT", "PATCH", "DELETE"],
-		inputValue: "/fhir/Patient",
+		method: "POST",
+		path: "/fhir/Patient",
 	},
 	render: (args) => <RequestLineEditorWrapper {...args} />,
 };
 
 export const PUT: Story = {
 	args: {
-		selectedMethod: "PUT",
-		methods: ["GET", "POST", "PUT", "PATCH", "DELETE"],
-		inputValue: "/fhir/Patient",
+		method: "PUT",
+		path: "/fhir/Patient",
 	},
 	render: (args) => <RequestLineEditorWrapper {...args} />,
 };
 
 export const PATCH: Story = {
 	args: {
-		selectedMethod: "PATCH",
-		methods: ["GET", "POST", "PUT", "PATCH", "DELETE"],
-		inputValue: "/fhir/Patient",
+		method: "PATCH",
+		path: "/fhir/Patient",
 	},
 	render: (args) => <RequestLineEditorWrapper {...args} />,
 };
 
 export const DELETE: Story = {
 	args: {
-		selectedMethod: "DELETE",
-		methods: ["GET", "POST", "PUT", "PATCH", "DELETE"],
-		inputValue: "/fhir/Patient",
+		method: "DELETE",
+		path: "/fhir/Patient",
 	},
 	render: (args) => <RequestLineEditorWrapper {...args} />,
 };