@archbase/components 3.0.0

package/src/debug/jsonpathpicker/ArchbaseJsonPathPicker.tsx

@@ -0,0 +1,341 @@
+// @ts-nocheck
+import { IconArrowBigRightFilled } from '@tabler/icons-react';
+import { archbaseI18next } from '@archbase/core';
+import React, { Component } from 'react';
+import './ArchbaseJsonPathPicker.css';
+
+export interface ArchbaseJsonPathPickerOptions {
+	outputCollapsed: boolean;
+	outputWithQuotes: boolean;
+	pathNotation: string;
+	pathQuotesType: string;
+	processKeys: boolean;
+	keyReplaceRegexPattern: string | undefined;
+	keyReplaceRegexFlags: string | undefined;
+	keyReplacementText: string;
+	pickerIcon: string;
+	withoutPicker: boolean;
+}
+
+const defaultOptions: ArchbaseJsonPathPickerOptions = {
+	outputCollapsed: false,
+	outputWithQuotes: false,
+	pathNotation: 'dots',
+	pathQuotesType: 'single',
+	processKeys: false,
+	keyReplaceRegexPattern: undefined,
+	keyReplaceRegexFlags: undefined,
+	keyReplacementText: '',
+	pickerIcon: '#x1f4cb',
+	withoutPicker: false,
+};
+
+export interface ArchbaseJsonPathPickerProps {
+	data: any;
+	onSelect: (path: string) => void;
+	options?: ArchbaseJsonPathPickerOptions;
+}
+
+function siblings(el, sel, callback) {
+	const sibs: any[] = [];
+
+	for (let i = 0; i < el.parentNode.children.length; i += 1) {
+		const child = el.parentNode.children[i];
+
+		if (child !== el && typeof sel === 'string' && child.matches(sel)) {
+			sibs.push(child);
+		}
+	}
+	if (callback && typeof callback === 'function') {
+		for (let _i = 0; _i < sibs.length; _i += 1) {
+			callback(sibs[_i]);
+		}
+	}
+
+	return sibs;
+}
+function fireClick(node) {
+	let doc;
+	if (node.ownerDocument) {
+		doc = node.ownerDocument;
+	} else if (node.nodeType === 9) {
+		doc = node;
+	} else {
+		throw new Error('Invalid node passed to fireEvent: '.concat(node.id));
+	}
+
+	if (node.dispatchEvent) {
+		const eventClass = 'MouseEvents';
+		const event = doc.createEvent(eventClass);
+		event.initEvent('click', true, true);
+
+		event.synthetic = true;
+		node.dispatchEvent(event, true);
+	} else if (node.fireEvent) {
+		const _event = doc.createEventObject();
+		_event.synthetic = true;
+		node.fireEvent('onclick', _event);
+	}
+}
+
+function isHidden(elem) {
+	const width = elem.offsetWidth;
+	const height = elem.offsetHeight;
+	return (width === 0 && height === 0) || window.getComputedStyle(elem).display === 'none';
+}
+
+function getParents(elem, sel) {
+	const result: any[] = [];
+
+	for (let p = elem && elem.parentElement; p; p = p.parentElement) {
+		if (typeof sel === 'string' && p.matches(sel)) {
+			result.push(p);
+		}
+	}
+
+	return result;
+}
+
+function isCollapsable(arg) {
+	return arg instanceof Object && Object.keys(arg).length > 0;
+}
+
+function isUrl(string) {
+	const regexp = /^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#:.?+=&%@!\-/]))?/;
+	return regexp.test(string);
+}
+
+export class ArchbaseJsonPathPicker extends Component<ArchbaseJsonPathPickerProps> {
+	static defaultProps = {
+		options: defaultOptions,
+	};
+	private pickerRef: any;
+	private destRef: any;
+	private jsonPathPickerInstance: any;
+	constructor(props: ArchbaseJsonPathPickerProps) {
+		super(props);
+		this.pickerRef = React.createRef();
+	}
+
+	json2jsx = (json, options) => {
+		if (typeof json === 'string') {
+			const tmp = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+			if (isUrl(tmp)) {
+				return (
+					<a href={tmp} className="json-string">
+						{tmp}
+					</a>
+				);
+			} else {
+				return <span className="json-string">"{tmp}"</span>;
+			}
+		} else if (typeof json === 'number') {
+			return <span className="json-literal">{json}</span>;
+		} else if (typeof json === 'boolean') {
+			return <span className="json-literal">{json}</span>;
+		} else if (json === null) {
+			return <span className="json-literal">null</span>;
+		} else if (Array.isArray(json)) {
+			if (json.length > 0) {
+				return (
+					<span>
+						[
+						<ol className="json-array">
+							{json.map((item, index) => (
+								<li key={index} data-key-type="array" data-key={index}>
+									{isCollapsable(item) && <a href="" className="json-toggle"></a>}
+									{this.json2jsx(item, options)}
+									{index < json.length - 1 && ','}
+								</li>
+							))}
+						</ol>
+						]
+					</span>
+				);
+			} else {
+				return '[]';
+			}
+		} else if (typeof json === 'object') {
+			const keys = Object.keys(json);
+
+			if (keys.length > 0) {
+				return (
+					<span>
+						{'{'}
+						<ul className="json-dict">
+							{keys.map((key, index) => (
+								<li key={key} data-key-type="object" data-key={key}>
+									{isCollapsable(json[key]) ? (
+										<a href="" className="json-toggle">
+											{options.outputWithQuotes ? <span className="json-string">"{key}"</span> : key}
+										</a>
+									) : options.outputWithQuotes ? (
+										<span className="json-string">"{key}"</span>
+									) : (
+										key
+									)}
+									<span className="pick-path" title={archbaseI18next.t('archbase:Pick path')}>
+										<IconArrowBigRightFilled size="1.0rem" />
+									</span>
+									: {this.json2jsx(json[key], options)}
+									{index < keys.length - 1 && ','}
+								</li>
+							))}
+						</ul>
+						{'}'}
+					</span>
+				);
+			} else {
+				return '{}';
+			}
+		}
+	};
+
+	handlerEventToggle = (elm, event) => {
+		elm.classList.toggle('collapsed');
+		const subTarget = siblings(elm, 'ul.json-dict, ol.json-array', function (el) {
+			el.style.display = el.style.display === '' || el.style.display === 'block' ? 'none' : 'block';
+		});
+
+		for (let i = 0; i < subTarget.length; i += 1) {
+			if (!isHidden(subTarget[i])) {
+				siblings(subTarget[i], '.json-placeholder', function (el) {
+					return el.parentNode.removeChild(el);
+				});
+			} else {
+				const childs = subTarget[i].children;
+				let count = 0;
+
+				for (let j = 0; j < childs.length; j += 1) {
+					if (childs[j].tagName === 'LI') {
+						count += 1;
+					}
+				}
+				const placeholder = count + (count > 1 ? ' items' : ' item');
+				subTarget[i].insertAdjacentHTML('afterend', '<a href class="json-placeholder">'.concat(placeholder, '</a>'));
+			}
+		}
+		event.stopPropagation();
+		event.preventDefault();
+	};
+
+	toggleEventListener = (event) => {
+		let t = event.target;
+
+		while (t && t !== this) {
+			if (typeof t.matches == 'function') {
+				if (t.matches('a.json-toggle')) {
+					this.handlerEventToggle.call(null, t, event);
+					event.stopPropagation();
+					event.preventDefault();
+				}
+			}
+
+			t = t.parentNode;
+		}
+	};
+
+	simulateClickHandler = (elm, event) => {
+		siblings(elm, 'a.json-toggle', function (el) {
+			return fireClick(el);
+		});
+		event.stopPropagation();
+		event.preventDefault();
+	};
+
+	simulateClickEventListener = (event) => {
+		let t = event.target;
+
+		while (t && t !== this) {
+			if (typeof t.matches == 'function') {
+				if (t.matches('a.json-placeholder')) {
+					this.simulateClickHandler.call(null, t, event);
+				}
+			}
+
+			t = t.parentNode;
+		}
+	};
+
+	pickPathHandler = (elm) => {
+		const $parentsList = getParents(elm, 'li').reverse();
+		let pathSegments: any[] = [];
+
+		for (let i = 0; i < $parentsList.length; i += 1) {
+			let key = $parentsList[i].dataset.key;
+			const keyType = $parentsList[i].dataset.keyType;
+
+			if (
+				keyType === 'object' &&
+				typeof key !== 'number' &&
+				this.props.options!.processKeys &&
+				this.props.options!.keyReplaceRegexPattern !== undefined
+			) {
+				const keyReplaceRegex = new RegExp(
+					this.props.options!.keyReplaceRegexPattern,
+					this.props.options!.keyReplaceRegexFlags,
+				);
+				const keyReplacementText =
+					this.props.options!.keyReplacementText === undefined ? '' : this.props.options!.keyReplacementText;
+				key = key.replace(keyReplaceRegex, keyReplacementText);
+			}
+
+			pathSegments.push({
+				key: key,
+				keyType: keyType,
+			});
+		}
+
+		const quotes = {
+			none: '',
+			single: "'",
+			double: '"',
+		};
+		const quote = quotes[this.props.options!.pathQuotesType];
+		pathSegments = pathSegments.map((segment, idx) => {
+			const isBracketsNotation = this.props.options!.pathNotation === 'brackets';
+			const isKeyForbiddenInDotNotation = !/^\w+$/.test(segment.key) || typeof segment.key === 'number';
+
+			if (segment.keyType === 'array' || segment.isKeyANumber) {
+				return '['.concat(segment.key, ']');
+			}
+
+			if (isBracketsNotation || isKeyForbiddenInDotNotation) {
+				return '['.concat(quote).concat(segment.key).concat(quote, ']');
+			}
+
+			if (idx > 0) {
+				return '.'.concat(segment.key);
+			}
+
+			return segment.key;
+		});
+		const path = pathSegments.join('');
+
+		if (this.props.onSelect) {
+			this.props.onSelect(path);
+		}
+	};
+
+	pickEventListener = (event) => {
+		let t = event.target;
+		while (t && t !== this) {
+			if (typeof t.matches == 'function') {
+				if (t.matches('.pick-path')) {
+					this.pickPathHandler.call(null, t);
+				}
+			}
+			t = t.parentNode;
+		}
+	};
+
+	componentDidMount() {
+		this.pickerRef.current.addEventListener('click', this.toggleEventListener);
+		this.pickerRef.current.addEventListener('click', this.simulateClickEventListener);
+		this.pickerRef.current.addEventListener('click', this.pickEventListener);
+	}
+
+	render() {
+		return <div ref={this.pickerRef}>{this.json2jsx(this.props.data, {})}</div>;
+	}
+}

package/src/debug/jsonpathpicker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC"}

package/src/debug/jsonpathpicker/index.ts

@@ -0,0 +1 @@
+export { ArchbaseJsonPathPicker } from './ArchbaseJsonPathPicker';

package/src/debug/jsonview/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "env": {
+    "jest": true
+  }
+}

package/src/debug/jsonview/ArchbaseJsonViewDataRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArchbaseJsonViewDataRenderer.d.ts","sourceRoot":"","sources":["ArchbaseJsonViewDataRenderer.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,UAAU;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,eAAe,CAAC,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,CAAC,CAAC;IACT,WAAW,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,UAAU,CAAC;IAClB,qBAAqB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC;CAC9E;AAED,MAAM,WAAW,qBAAqB;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC;IAC3B,IAAI,EAAE,KAAK,CAAC,CAAC,MAAM,GAAG,SAAS,EAAE,GAAG,CAAC,CAAC,CAAC;IACvC,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,UAAU,CAAC;IAClB,qBAAqB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC;CAC9E;AAyJD,MAAM,CAAC,OAAO,UAAU,0BAA0B,CAAC,KAAK,EAAE,eAAe,CAAC,GAAG,CAAC,2CAW7E"}

package/src/debug/jsonview/ArchbaseJsonViewDataRenderer.tsx

@@ -0,0 +1,206 @@
+import * as React from 'react';
+import { useArchbaseBool } from '@archbase/core';
+import * as DataTypeDetection from './ArchbaseJsonViewDataTypeDetection';
+
+const expandedIcon = '\u25BE';
+const collapsedIcon = '\u25B8';
+
+export interface StyleProps {
+	container: string;
+	basicChildStyle: string;
+	expander: string;
+	label: string;
+	nullValue: string;
+	undefinedValue: string;
+	numberValue: string;
+	stringValue: string;
+	booleanValue: string;
+	otherValue: string;
+	punctuation: string;
+	pointer: string;
+}
+
+export interface JsonRenderProps<T> {
+	field?: string;
+	value: T;
+	lastElement: boolean;
+	level: number;
+	style: StyleProps;
+	shouldInitiallyExpand: (level: number, value: any, field?: string) => boolean;
+}
+
+export interface ExpandableRenderProps {
+	field?: string;
+	value: Array<any> | object;
+	data: Array<[string | undefined, any]>;
+	openBracket: string;
+	closeBracket: string;
+	lastElement: boolean;
+	level: number;
+	style: StyleProps;
+	shouldInitiallyExpand: (level: number, value: any, field?: string) => boolean;
+}
+
+function combineStyles(style1: string, style2: string): string {
+	return `${style1 || ''} ${style2 || ''}`;
+}
+
+function renderExpandableObject({
+	field,
+	value,
+	data,
+	lastElement,
+	openBracket,
+	closeBracket,
+	level,
+	style,
+	shouldInitiallyExpand,
+}: ExpandableRenderProps) {
+	const shouldInitiallyExpandCalledRef = React.useRef(false);
+	const [expanded, , , toggleExpanded] = useArchbaseBool(shouldInitiallyExpand(level, value, field));
+
+	React.useEffect(() => {
+		if (!shouldInitiallyExpandCalledRef.current) {
+			shouldInitiallyExpandCalledRef.current = true;
+		}
+		// Note: useArchbaseBool doesn't provide a direct setter, so we rely on the initial value
+	}, [shouldInitiallyExpand]);
+
+	const expandIcon = expanded ? expandedIcon : collapsedIcon;
+	const childLevel = level + 1;
+	const lastIndex = data.length - 1;
+
+	const onKeyDown = (e: React.KeyboardEvent<HTMLSpanElement>) => {
+		if (e.key === ' ') {
+			toggleExpanded();
+		}
+	};
+
+	return (
+		<div className={style.basicChildStyle} role="list">
+			<span
+				className={combineStyles(style.expander, style.pointer)}
+				role="button"
+				onClick={toggleExpanded}
+				onKeyDown={onKeyDown}
+				tabIndex={0}
+			>
+				{expandIcon}
+			</span>
+			{field && <span className={style.label}>{field}:</span>}
+			<span className={style.punctuation}>{openBracket}</span>
+
+			{expanded ? (
+				<div>
+					{data.map((dataElement, index) => (
+						<ArchbaseJsonViewDataRender
+							key={dataElement[0] || index}
+							field={dataElement[0]}
+							value={dataElement[1]}
+							style={style}
+							lastElement={index === lastIndex}
+							level={childLevel}
+							shouldInitiallyExpand={shouldInitiallyExpand}
+						/>
+					))}
+				</div>
+			) : (
+				<span
+					className={combineStyles(style.punctuation, style.pointer)}
+					role="button"
+					tabIndex={0}
+					onClick={toggleExpanded}
+					onKeyDown={onKeyDown}
+				>
+					...
+				</span>
+			)}
+
+			<span className={style.punctuation}>{closeBracket}</span>
+			{!lastElement && <span className={style.punctuation}>,</span>}
+		</div>
+	);
+}
+
+function JsonObject({ field, value, style, lastElement, shouldInitiallyExpand, level }: JsonRenderProps<Object>) {
+	return renderExpandableObject({
+		field,
+		value,
+		lastElement: lastElement || false,
+		level,
+		openBracket: '{',
+		closeBracket: '}',
+		style,
+		shouldInitiallyExpand,
+		data: Object.keys(value).map((key) => [key, value[key as keyof typeof value]]),
+	});
+}
+
+function JsonArray({ field, value, style, lastElement, level, shouldInitiallyExpand }: JsonRenderProps<Array<any>>) {
+	return renderExpandableObject({
+		field,
+		value,
+		lastElement: lastElement || false,
+		level,
+		openBracket: '[',
+		closeBracket: ']',
+		style,
+		shouldInitiallyExpand,
+		data: value.map((element) => [undefined, element]),
+	});
+}
+
+function JsonPrimitiveValue({
+	field,
+	value,
+	style,
+	lastElement,
+}: JsonRenderProps<string | number | boolean | bigint | null | undefined>) {
+	let stringValue: string;
+	let valueStyle = style.otherValue;
+
+	if (value === null) {
+		stringValue = 'null';
+		valueStyle = style.nullValue;
+	} else if (value === undefined) {
+		stringValue = 'undefined';
+		valueStyle = style.undefinedValue;
+	} else if (DataTypeDetection.isString(value)) {
+		stringValue = `"${value}"`;
+		valueStyle = style.stringValue;
+	} else if (DataTypeDetection.isBoolean(value)) {
+		stringValue = value ? 'true' : 'false';
+		valueStyle = style.booleanValue;
+	} else if (DataTypeDetection.isNumber(value)) {
+		stringValue = value.toString();
+		valueStyle = style.numberValue;
+	} else if (DataTypeDetection.isBigInt(value)) {
+		stringValue = `${value.toString()}n`;
+		valueStyle = style.numberValue;
+	} else {
+		// This case should never be reached due to TypeScript's type narrowing,
+		// but we'll handle it safely anyway
+		stringValue = String(value);
+	}
+
+	return (
+		<div className={style.basicChildStyle} role="listitem">
+			{field && <span className={style.label}>{field}:</span>}
+			<span className={valueStyle}>{stringValue}</span>
+			{!lastElement && <span className={style.punctuation}>,</span>}
+		</div>
+	);
+}
+
+export default function ArchbaseJsonViewDataRender(props: JsonRenderProps<any>) {
+	const value = props.value;
+	if (DataTypeDetection.isArray(value)) {
+		return <JsonArray {...props} value={value} />;
+	}
+
+	if (DataTypeDetection.isObject(value)) {
+		return <JsonObject {...props} value={value} />;
+	}
+
+	return <JsonPrimitiveValue {...props} value={value} />;
+}

package/src/debug/jsonview/ArchbaseJsonViewDataTypeDetection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArchbaseJsonViewDataTypeDetection.d.ts","sourceRoot":"","sources":["ArchbaseJsonViewDataTypeDetection.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS,SAAU,GAAG,8BAElC,CAAA;AAED,eAAO,MAAM,QAAQ,SAAU,GAAG,4BAEjC,CAAA;AAED,eAAO,MAAM,QAAQ,SAAU,GAAG,4BAEjC,CAAA;AAED,eAAO,MAAM,QAAQ,SAAU,GAAG,4BAEjC,CAAA;AAED,eAAO,MAAM,OAAO,SAAU,GAAG,kBAEhC,CAAA;AAED,eAAO,MAAM,QAAQ,SAAU,GAAG,YAEjC,CAAA;AAED,eAAO,MAAM,MAAM,SAAU,GAAG,YAE/B,CAAA;AAED,eAAO,MAAM,WAAW,SAAU,GAAG,YAEpC,CAAA"}

package/src/debug/jsonview/ArchbaseJsonViewDataTypeDetection.ts

@@ -0,0 +1,31 @@
+export const isBoolean = (data: any) => {
+  return typeof data === 'boolean' || data instanceof Boolean
+}
+
+export const isNumber = (data: any) => {
+  return typeof data === 'number' || data instanceof Number
+}
+
+export const isBigInt = (data: any) => {
+  return typeof data === 'bigint' || data instanceof BigInt
+}
+
+export const isString = (data: any) => {
+  return typeof data === 'string' || data instanceof String
+}
+
+export const isArray = (data: any) => {
+  return Array.isArray(data)
+}
+
+export const isObject = (data: any) => {
+  return data instanceof Object && data !== null
+}
+
+export const isNull = (data: any) => {
+  return data === null
+}
+
+export const isUndefined = (data: any) => {
+  return data === undefined
+}

package/src/debug/jsonview/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AACA,OAAmC,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAGxF,MAAM,WAAW,qBAAqB;IACrC,IAAI,EAAE,WAAW,CAAC,OAAO,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IACxC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC;CAC/E;AAED,eAAO,MAAM,aAAa,EAAE,UAa3B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,UAaxB,CAAC;AAEF,eAAO,MAAM,WAAW,eAAa,CAAC;AACtC,eAAO,MAAM,iBAAiB,UAAW,MAAM,YAAc,CAAC;AAE9D,eAAO,MAAM,gBAAgB,4CAI1B,qBAAqB,4CAYvB,CAAC"}

package/src/debug/jsonview/index.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import ArchbaseJsonViewDataRender, { StyleProps } from './ArchbaseJsonViewDataRenderer';
+import styles from './styles.module.css';
+
+export interface ArchbaseJsonViewProps {
+	data: NonNullable<unknown> | Array<any>;
+	style?: StyleProps;
+	shouldInitiallyExpand?: (level: number, value: any, field?: string) => boolean;
+}
+
+export const defaultStyles: StyleProps = {
+	container: styles['container-light'],
+	basicChildStyle: styles['basic-element-style'],
+	label: styles['label-light'],
+	nullValue: styles['value-null-light'],
+	undefinedValue: styles['value-undefined-light'],
+	stringValue: styles['value-string-light'],
+	booleanValue: styles['value-boolean-light'],
+	numberValue: styles['value-number-light'],
+	otherValue: styles['value-other-light'],
+	expander: styles['expander-light'],
+	punctuation: styles['punctuation-light'],
+	pointer: styles.pointer,
+};
+
+export const darkStyles: StyleProps = {
+	container: styles['container-dark'],
+	basicChildStyle: styles['basic-element-style'],
+	label: styles['label-dark'],
+	nullValue: styles['value-null-dark'],
+	undefinedValue: styles['value-undefined-dark'],
+	stringValue: styles['value-string-dark'],
+	booleanValue: styles['value-boolean-dark'],
+	numberValue: styles['value-number-dark'],
+	otherValue: styles['value-other-dark'],
+	expander: styles['expander-dark'],
+	punctuation: styles['punctuation-dark'],
+	pointer: styles.pointer,
+};
+
+export const allExpanded = () => true;
+export const collapseAllNested = (level: number) => level < 1;
+
+export const ArchbaseJsonView = ({
+	data,
+	style = defaultStyles,
+	shouldInitiallyExpand = allExpanded,
+}: ArchbaseJsonViewProps) => {
+	return (
+		<div className={style.container}>
+			<ArchbaseJsonViewDataRender
+				value={data}
+				style={style}
+				lastElement
+				level={0}
+				shouldInitiallyExpand={shouldInitiallyExpand}
+			/>
+		</div>
+	);
+};