api query builder update (#94)

* redesign api query builder and fix to type export

* json viewer rerender fix

* split up query demo into smaller components

* removing old scroll position logic and removed duplicate state sets

Author: eersnington

apps/docs/app/(home)/api/actions.ts

@@ -26,7 +26,9 @@ export async function getQueryTypes(
 ): Promise<QueryTypesResponse> {
 	try {
 		const url = new URL(`${API_BASE_URL}/v1/query/types`);
-		if (includeMeta) url.searchParams.set('include_meta', 'true');
+		if (includeMeta) {
+			url.searchParams.set('include_meta', 'true');
+		}
 
 		const response = await fetch(url.toString(), {
 			method: 'GET',

apps/docs/app/(home)/api/json-viewer.tsx

@@ -1,23 +1,54 @@
 'use client';
 
 import { CaretDownIcon, CaretRightIcon } from '@phosphor-icons/react';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 
 export interface JsonNodeProps {
 	data: unknown;
 	name?: string;
 	level?: number;
+	maxDepth?: number;
+}
+
+const MAX_DEPTH = 20;
+
+const indentClasses = [
+	'pl-0',
+	'pl-3',
+	'pl-6',
+	'pl-9',
+	'pl-12',
+	'pl-[60px]',
+	'pl-[72px]',
+	'pl-[84px]',
+	'pl-[96px]',
+	'pl-[108px]',
+	'pl-[120px]',
+	'pl-[132px]',
+	'pl-[144px]',
+	'pl-[156px]',
+	'pl-[168px]',
+	'pl-[180px]',
+	'pl-[192px]',
+	'pl-[204px]',
+	'pl-[216px]',
+	'pl-[228px]',
+	'pl-[240px]',
+];
+
+function getKeyColor() {
+	return 'text-green-600 dark:text-blue-300';
 }
 
 function getValueColor(value: unknown) {
 	if (value === null) {
 		return 'text-muted-foreground';
 	}
 	if (typeof value === 'string') {
-		return 'text-emerald-500 dark:text-emerald-300';
+		return 'text-blue-600 dark:text-orange-300';
 	}
 	if (typeof value === 'number' || typeof value === 'boolean') {
-		return 'text-amber-500 dark:text-amber-300';
+		return 'text-blue-600 dark:text-orange-300';
 	}
 	return 'text-foreground/90';
 }
@@ -41,13 +72,12 @@ function PrimitiveNode({
 	name?: string;
 	level: number;
 }) {
-	const indent = level * 12;
+	const indentClass = indentClasses[Math.min(level, indentClasses.length - 1)];
 	return (
 		<div
-			className="flex items-center rounded px-2 py-1 transition-colors hover:bg-muted/20"
-			style={{ paddingLeft: indent }}
+			className={`flex items-center rounded px-2 py-1 font-mono transition-colors hover:bg-muted/20 ${indentClass}`}
 		>
-			{name && <span className="mr-2 text-primary">{name}:</span>}
+			{name && <span className={`mr-2 ${getKeyColor()}`}>{name}:</span>}
 			<span className={getValueColor(value)}>{formatValue(value)}</span>
 		</div>
 	);
@@ -57,52 +87,64 @@ function ArrayNode({
 	data,
 	name,
 	level,
+	maxDepth = MAX_DEPTH,
 }: {
 	data: unknown[];
 	name?: string;
 	level: number;
+	maxDepth?: number;
 }) {
 	const [isExpanded, setIsExpanded] = useState(true);
-	const indent = level * 12;
+	const indentClass = indentClasses[Math.min(level, indentClasses.length - 1)];
+
+	const itemKeys = useMemo(
+		() => data.map((_, index) => `${name || 'root'}_${level}_${index}`),
+		[data, name, level]
+	);
+
 	if (data.length === 0) {
 		return <PrimitiveNode level={level} name={name} value="[]" />;
 	}
+
+	if (level >= maxDepth) {
+		return (
+			<PrimitiveNode level={level} name={name} value="[...deeply nested]" />
+		);
+	}
+
 	return (
-		<div>
+		<div className="font-mono">
 			<button
 				aria-expanded={isExpanded}
-				className="flex w-full items-center rounded px-2 py-1 text-left transition-colors hover:bg-muted/20"
+				className={`flex w-full items-center rounded px-2 py-1 text-left transition-colors hover:bg-muted/20 ${indentClass}`}
 				onClick={() => setIsExpanded(!isExpanded)}
-				style={{ paddingLeft: indent }}
 				type="button"
 			>
 				{isExpanded ? (
 					<CaretDownIcon className="mr-1 h-4 w-4 text-muted-foreground" />
 				) : (
 					<CaretRightIcon className="mr-1 h-4 w-4 text-muted-foreground" />
 				)}
-				{name && <span className="mr-2 text-primary">{name}:</span>}
+				{name && <span className={`mr-2 ${getKeyColor()}`}>{name}:</span>}
 				<span className="font-semibold text-foreground/80">[</span>
 			</button>
 			{isExpanded && (
 				<>
 					{data.map((item, index) => (
 						<JsonNode
 							data={item}
-							key={`${name || 'root'}-${index}`}
+							key={itemKeys[index]}
 							level={level + 1}
+							maxDepth={maxDepth}
 						/>
 					))}
-					<div
-						className="flex items-center py-1"
-						style={{ paddingLeft: indent }}
-					>
+					<div className={`flex items-center py-1 ${indentClass}`}>
 						<span className="font-semibold text-foreground/80">]</span>
 					</div>
 				</>
 			)}
 			{!isExpanded && (
-				<div className="flex items-center py-1" style={{ paddingLeft: indent }}>
+				<div className={`flex items-center py-1 ${indentClass}`}>
 					<span className="font-semibold text-foreground/80">]</span>
 				</div>
 			)}
@@ -114,49 +156,70 @@ function ObjectNode({
 	data,
 	name,
 	level,
+	maxDepth = MAX_DEPTH,
 }: {
 	data: Record<string, unknown>;
 	name?: string;
 	level: number;
+	maxDepth?: number;
 }) {
 	const [isExpanded, setIsExpanded] = useState(true);
-	const indent = level * 12;
+	const indentClass = indentClasses[Math.min(level, indentClasses.length - 1)];
 	const keys = Object.keys(data);
+
+	const keyProps = useMemo(
+		() =>
+			keys.map((key) => ({
+				key: `${name || 'root'}_${level}_${key}`,
+				name: key,
+			})),
+		[keys, name, level]
+	);
+
 	if (keys.length === 0) {
 		return <PrimitiveNode level={level} name={name} value="{}" />;
 	}
+
+	if (level >= maxDepth) {
+		return (
+			<PrimitiveNode level={level} name={name} value="{...deeply nested}" />
+		);
+	}
+
 	return (
-		<div>
+		<div className="font-mono">
 			<button
 				aria-expanded={isExpanded}
-				className="flex w-full items-center rounded px-2 py-1 text-left transition-colors hover:bg-muted/20"
+				className={`flex w-full items-center rounded px-2 py-1 text-left transition-colors hover:bg-muted/20 ${indentClass}`}
 				onClick={() => setIsExpanded(!isExpanded)}
-				style={{ paddingLeft: indent }}
 				type="button"
 			>
 				{isExpanded ? (
 					<CaretDownIcon className="mr-1 h-4 w-4 text-muted-foreground" />
 				) : (
 					<CaretRightIcon className="mr-1 h-4 w-4 text-muted-foreground" />
 				)}
-				{name && <span className="mr-2 text-primary">{name}:</span>}
+				{name && <span className={`mr-2 ${getKeyColor()}`}>{name}:</span>}
 				<span className="font-semibold text-foreground/80">{'{'}</span>
 			</button>
 			{isExpanded && (
 				<>
-					{keys.map((key) => (
-						<JsonNode data={data[key]} key={key} level={level + 1} name={key} />
+					{keyProps.map(({ key, name: keyName }) => (
+						<JsonNode
+							data={data[keyName]}
+							key={key}
+							level={level + 1}
+							maxDepth={maxDepth}
+							name={keyName}
+						/>
 					))}
-					<div
-						className="flex items-center py-1"
-						style={{ paddingLeft: indent }}
-					>
+					<div className={`flex items-center py-1 ${indentClass}`}>
 						<span className="font-semibold text-foreground/80">{'}'}</span>
 					</div>
 				</>
 			)}
 			{!isExpanded && (
-				<div className="flex items-center py-1" style={{ paddingLeft: indent }}>
+				<div className={`flex items-center py-1 ${indentClass}`}>
 					<span className="font-semibold text-foreground/80">{'}'}</span>
 				</div>
 			)}