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

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,
@@ -117,17 +119,128 @@ const customHighlightStyle = HighlightStyle.define([
 	{ 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" },
 ]);
 
-type LanguageMode = "json" | "http";
+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 [
-			http((ct) => (ct === "application/json" ? jsonLang.language : null)),
+			sql({ dialect: customSQLDialect }),
 			syntaxHighlighting(customHighlightStyle),
 		];
+	} else if (mode === "yaml") {
+		return [yaml(), syntaxHighlighting(customHighlightStyle)];
 	} else {
 		return [
 			json(),
@@ -139,6 +252,7 @@ function languageExtensions(mode: LanguageMode) {
 
 type CodeEditorProps = {
 	readOnly?: boolean;
+	isReadOnlyTheme?: boolean;
 	defaultValue?: string;
 	currentValue?: string;
 	onChange?: (value: string) => void;
@@ -159,6 +273,7 @@ export function CodeEditor({
 	readOnly = false,
 	id,
 	mode = "json",
+	isReadOnlyTheme = false,
 }: CodeEditorProps) {
 	const domRef = React.useRef(null);
 	const [view, setView] = React.useState<EditorView | null>(null);
@@ -293,12 +408,22 @@ export function CodeEditor({
 				readOnlyCompartment.current.reconfigure(
 					EditorState.readOnly.of(readOnly),
 				),
+			],
+		});
+	}, [readOnly, view]);
+
+	React.useEffect(() => {
+		if (view === null) {
+			return;
+		}
+		view.dispatch({
+			effects: [
 				themeCompartment.current.reconfigure(
-					readOnly ? readOnlyTheme : baseTheme,
+					isReadOnlyTheme ? readOnlyTheme : baseTheme,
 				),
 			],
 		});
-	}, [readOnly, view]);
+	}, [isReadOnlyTheme, view]);
 
 	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> = {
@@ -32,3 +35,294 @@ export const Default: Story = {
 		</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(),
+};

package/src/components/copy-icon.tsx

@@ -1,17 +1,53 @@
 import { Check, Copy } from "lucide-react";
 import * as React from "react";
+import { toast } from "sonner";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "#shadcn/components/ui/tooltip";
 
 interface CopyIconProps {
 	text: string;
+	showTooltip?: boolean;
+	tooltipText?: string;
+	showToast?: boolean;
+	onCopy?: (text: string) => void;
 }
 
-function CopyIcon({ text }: CopyIconProps) {
+function CopyIcon({
+	text,
+	showTooltip = true,
+	tooltipText = "Copy",
+	showToast = true,
+	onCopy,
+	...props
+}: CopyIconProps) {
 	const [isActive, setIsActive] = React.useState(false);
 
 	async function handleClick() {
 		try {
 			await navigator.clipboard.writeText(text);
 			setIsActive(true);
+
+			if (showToast) {
+				const truncatedText =
+					text.length > 30 ? `${text.slice(0, 30)}...` : text;
+				toast(
+					<div className="flex flex-col gap-1">
+						<span className="typo-body">Successfully copied</span>
+						<span className="typo-code text-text-secondary">
+							{truncatedText}
+						</span>
+					</div>,
+					{
+						duration: 2000,
+					},
+				);
+			}
+
+			onCopy?.(text);
+
 			setTimeout(() => {
 				setIsActive(false);
 			}, 1000);
@@ -20,11 +56,29 @@ function CopyIcon({ text }: CopyIconProps) {
 		}
 	}
 
-	return (
-		<button type="button" onClick={handleClick} style={{ cursor: "pointer" }}>
+	const button = (
+		<button
+			{...props}
+			type="button"
+			onClick={handleClick}
+			style={{ cursor: "pointer" }}
+		>
 			{isActive ? <Check /> : <Copy />}
 		</button>
 	);
+
+	if (!showTooltip) {
+		return button;
+	}
+
+	return (
+		<Tooltip>
+			<TooltipTrigger asChild>{button}</TooltipTrigger>
+			<TooltipContent>
+				<p>{tooltipText}</p>
+			</TooltipContent>
+		</Tooltip>
+	);
 }
 
 export { CopyIcon };

package/src/components/data-table.stories.tsx

@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { DataTable, type DataTableProps } from "./data-table";
+
+const meta: Meta<typeof DataTable> = {
+	title: "Component/Data table",
+	component: DataTable,
+	tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof DataTable>;
+
+function DataTableWrapper<TData, TValue>({
+	columns,
+	data,
+}: DataTableProps<TData, TValue>) {
+	return <DataTable columns={columns} data={data} />;
+}
+
+export const Default: Story = {
+	args: {
+		columns: [
+			{
+				header: "Name",
+				accessorKey: "name",
+			},
+			{
+				header: "Age",
+				accessorKey: "age",
+			},
+		],
+		data: [
+			{ name: "John Doe", age: 30 },
+			{ name: "Jane Smith", age: 25 },
+			{ name: "Bob Johnson", age: 42 },
+			{ name: "Alice Williams", age: 35 },
+			{ name: "Charlie Brown", age: 28 },
+			{ name: "Diana Prince", age: 31 },
+			{ name: "Edward Norton", age: 45 },
+			{ name: "Fiona Green", age: 27 },
+			{ name: "George Miller", age: 38 },
+			{ name: "Hannah Davis", age: 33 },
+			{ name: "Ian Moore", age: 29 },
+			{ name: "Julia Taylor", age: 41 },
+			{ name: "Kevin Anderson", age: 36 },
+			{ name: "Laura Thomas", age: 32 },
+			{ name: "Michael Jackson", age: 44 },
+			{ name: "Nancy Wilson", age: 26 },
+			{ name: "Oscar Martinez", age: 39 },
+			{ name: "Patricia Lee", age: 34 },
+			{ name: "Quinn Harris", age: 37 },
+			{ name: "Rachel Clark", age: 40 },
+			{ name: "Samuel Wright", age: 43 },
+			{ name: "Tina Turner", age: 48 },
+			{ name: "Ulysses Grant", age: 52 },
+			{ name: "Victoria Baker", age: 29 },
+			{ name: "William Scott", age: 35 },
+			{ name: "Xavier Adams", age: 31 },
+			{ name: "Yolanda King", age: 38 },
+			{ name: "Zachary Nelson", age: 27 },
+			{ name: "Amy Carter", age: 33 },
+			{ name: "Benjamin Hall", age: 46 },
+			{ name: "Catherine Allen", age: 24 },
+			{ name: "David Young", age: 41 },
+			{ name: "Emily Walker", age: 36 },
+			{ name: "Frank Robinson", age: 39 },
+			{ name: "Grace White", age: 28 },
+			{ name: "Henry Lewis", age: 47 },
+			{ name: "Isabella Hill", age: 32 },
+			{ name: "Jack Martin", age: 34 },
+			{ name: "Katherine Garcia", age: 30 },
+			{ name: "Louis Rodriguez", age: 45 },
+			{ name: "Margaret Martinez", age: 37 },
+			{ name: "Nathan Hernandez", age: 26 },
+			{ name: "Olivia Lopez", age: 29 },
+			{ name: "Peter Gonzalez", age: 43 },
+			{ name: "Quincy Wilson", age: 38 },
+			{ name: "Rebecca Anderson", age: 31 },
+			{ name: "Steven Thomas", age: 44 },
+			{ name: "Teresa Taylor", age: 35 },
+			{ name: "Ursula Moore", age: 40 },
+			{ name: "Victor Jackson", age: 42 },
+		],
+	},
+	parameters: {
+		layout: "fullscreen",
+	},
+	render: (args) => <DataTableWrapper {...args} />,
+};