atom.io 0.33.11 → 0.33.12

package/src/react-devtools/devtools.css

@@ -12,6 +12,7 @@ main[data-css="atom_io_devtools"] {
 	--bg-tint2: #333;
 	--fg-border: 1px solid var(--fg-color);
 	--fg-border-soft: 1px solid var(--fg-soft);
+	--fg-border-hint: 1px solid var(--fg-hint);
 	@media (prefers-color-scheme: light) {
 		--fg-color: #444;
 		--fg-light: #777;
@@ -120,7 +121,7 @@ main[data-css="atom_io_devtools"] {
 				&.transaction_update {
 					padding: 0;
 				}
-				header {
+				> header {
 					display: flex;
 					flex-flow: row;
 					position: sticky;
@@ -129,23 +130,6 @@ main[data-css="atom_io_devtools"] {
 					height: 22px;
 					background: var(--bg-tint2);
 					border-bottom: var(--fg-border-soft);
-					button.carat {
-						cursor: pointer;
-						background: none;
-						border: none;
-						width: 20px;
-						color: var(--fg-light);
-						&.open {
-							transform: rotate(90deg);
-						}
-						&:disabled {
-							cursor: default;
-						}
-						&:focus-within {
-							outline: 2px solid var(--fg-max);
-							background: var(--bg-max);
-						}
-					}
 					> main {
 						display: flex;
 						flex-flow: row;
@@ -172,6 +156,9 @@ main[data-css="atom_io_devtools"] {
 					}
 					> .json_viewer {
 						color: var(--fg-light);
+						font-size: 14px;
+						flex-shrink: 1;
+						overflow-x: scroll;
 					}
 					> .json_editor,
 					> .json_viewer {
@@ -186,6 +173,9 @@ main[data-css="atom_io_devtools"] {
 						&:focus-within {
 							background-color: var(--bg-max);
 							outline: 2px solid var(--fg-max);
+							* {
+								color: var(--fg-max);
+							}
 						}
 						&.nu * {
 							display: flex;
@@ -310,6 +300,41 @@ main[data-css="atom_io_devtools"] {
 	}
 
 	.json_editor {
+		display: flex;
+		flex-flow: column;
+		align-items: flex-start;
+		> header {
+			display: flex;
+			flex-flow: row;
+			width: 100%;
+			position: relative;
+			align-items: baseline;
+			overflow: hidden;
+			white-space: nowrap;
+			> .json_viewer {
+				flex-shrink: 1;
+				overflow-x: scroll;
+				height: 21px;
+				font-size: 14px;
+				display: flex;
+				align-items: center;
+				margin-left: 6px;
+				color: var(--fg-light);
+			}
+			> button {
+				padding: 0;
+				&.carat {
+					line-height: 0.5em;
+					font-size: 14px;
+					align-self: flex-start;
+				}
+			}
+		}
+		> .json_editor_array,
+		> .json_editor_object {
+			width: 100%;
+			flex-grow: 1;
+		}
 		input {
 			font-family: theia, monospace;
 			background: none;
@@ -323,6 +348,7 @@ main[data-css="atom_io_devtools"] {
 			&:focus-within {
 				outline: 2px solid var(--fg-max);
 				background: var(--bg-max);
+				color: var(--fg-max);
 			}
 		}
 		button:disabled {
@@ -345,6 +371,7 @@ main[data-css="atom_io_devtools"] {
 			font-family: theia, monospace;
 			font-size: 14px;
 			height: 21px;
+			min-width: 21px;
 			margin: none;
 			padding: 4px;
 			padding-bottom: 6px;
@@ -379,30 +406,33 @@ main[data-css="atom_io_devtools"] {
 				content: ":";
 			}
 			input {
-				color: #999;
-				@media (prefers-color-scheme: light) {
-					color: #777;
-				}
+				color: var(--fg-color);
 			}
 		}
 		.json_editor_object,
 		.json_editor_array {
 			border-left: var(--fg-border-soft);
-			padding-left: 12px;
-			margin-left: 8px;
+			padding-left: 10px;
+			margin-left: 10px;
+			width: calc(100% - 21px);
 			.json_editor_properties,
 			.json_editor_elements {
 				.json_editor_property,
 				.json_editor_element {
+					display: flex;
 					border-bottom: var(--fg-border-soft);
 					margin-bottom: 2px;
 					min-height: 23px;
-					> span {
-						input {
-							min-width: 10px;
-						}
-						> * {
-							border: var(--fg-border-soft);
+					> header {
+						width: 100%;
+
+						> span {
+							input {
+								min-width: 10px;
+							}
+							> * {
+								border: var(--fg-border-hint);
+							}
 						}
 					}
 				}
@@ -420,4 +450,30 @@ main[data-css="atom_io_devtools"] {
 			}
 		}
 	}
+
+	.json_editor_icon {
+		color: var(--fg-soft);
+	}
+
+	button.carat {
+		border: none;
+		cursor: pointer;
+		background: none;
+		&:focus-within {
+			outline: none;
+			background: none;
+		}
+		> .json_editor_icon {
+			line-height: 4px;
+		}
+		&.open {
+			transform: rotate(90deg);
+		}
+		&:disabled {
+			> .json_editor_icon {
+				cursor: default;
+				color: var(--fg-hint);
+			}
+		}
+	}
 }

package/src/react-devtools/json-editor/default-components.tsx

@@ -18,6 +18,7 @@ export type JsonEditorComponents = {
 		disabled?: boolean
 	}>
 	DeleteIcon: FC
+	AddIcon: FC
 
 	EditorWrapper: WC<{
 		style?: CSSProperties | undefined
@@ -86,8 +87,10 @@ export const DEFAULT_JSON_EDITOR_COMPONENTS: JsonEditorComponents = {
 		<span className="json_editor_null" data-testid={testid} />
 	),
 	DeleteIcon: () => (
-		<span className="json_editor_icon json_editor_delete">x</span>
+		<span className="json_editor_icon json_editor_delete">×</span>
 	),
+	// big plus
+	AddIcon: () => <span className="json_editor_icon json_editor_add">＋</span>,
 	MissingPropertyWrapper: ({ children, testid }) => (
 		<span className="json_editor_missing_property" data-testid={testid}>
 			{children}

package/src/react-devtools/json-editor/editors-by-type/array-editor.tsx

@@ -1,6 +1,12 @@
-import { type Json, JSON_DEFAULTS } from "atom.io/json"
-import type { ReactElement } from "react"
+import type { RegularAtomToken } from "atom.io"
+import { findInStore } from "atom.io/internal"
+import type { Json, JsonTypes } from "atom.io/json"
+import { JSON_DEFAULTS } from "atom.io/json"
+import { useI, useO } from "atom.io/react"
+import { DevtoolsContext } from "atom.io/react-devtools/store"
+import { type ReactElement, useContext } from "react"
 
+import type { JsonEditorComponents, SetterOrUpdater } from ".."
 import type { JsonEditorProps_INTERNAL } from "../json-editor-internal"
 import { JsonEditor_INTERNAL } from "../json-editor-internal"
 import { makeElementSetters } from "./utilities/array-elements"
@@ -9,6 +15,53 @@ import {
 	makePropertyRemovers,
 } from "./utilities/object-properties"
 
+type ArrayElementProps = {
+	path: ReadonlyArray<number | string>
+	isReadonly: (path: ReadonlyArray<number | string>) => boolean
+	isHidden: (path: ReadonlyArray<number | string>) => boolean
+	data: unknown
+	set: SetterOrUpdater<Json.Tree.Array>
+	remove: (() => void) | undefined
+	recast: (newType: keyof JsonTypes) => void
+	Components: JsonEditorComponents
+	testid?: string | undefined
+	viewIsOpenAtom: RegularAtomToken<boolean, string>
+}
+const ArrayElement = ({
+	path,
+	isReadonly,
+	isHidden,
+	data,
+	set,
+	remove,
+	recast,
+	Components,
+	testid,
+	viewIsOpenAtom,
+}: ArrayElementProps): ReactElement => {
+	const index = path[path.length - 1]
+	const viewIsOpen = useO(viewIsOpenAtom)
+	const setViewIsOpen = useI(viewIsOpenAtom)
+
+	return (
+		<JsonEditor_INTERNAL
+			path={path}
+			name={`${index}`}
+			isReadonly={isReadonly}
+			isHidden={isHidden}
+			data={data}
+			set={set}
+			remove={remove}
+			recast={recast}
+			className="json_editor_element"
+			Components={Components}
+			isOpen={viewIsOpen}
+			setIsOpen={setViewIsOpen}
+			testid={`${testid}-element-${index}`}
+		/>
+	)
+}
+
 export const ArrayEditor = ({
 	path = [],
 	isReadonly = () => false,
@@ -18,6 +71,7 @@ export const ArrayEditor = ({
 	Components,
 	testid,
 }: JsonEditorProps_INTERNAL<Json.Tree.Array>): ReactElement => {
+	const { viewIsOpenAtoms, store } = useContext(DevtoolsContext)
 	const disabled = isReadonly(path)
 
 	const setElement = makeElementSetters(data, set)
@@ -28,39 +82,42 @@ export const ArrayEditor = ({
 		<Components.ArrayWrapper>
 			<div className={`json_editor_elements${disabled ? ` readonly` : ``}`}>
 				{data.map((element, index) => {
-					const newPath = [...path, index]
+					const elementPath = [...path, index]
+					const pathKey = elementPath.join(`,`)
+					const viewIsOpenAtom = findInStore(
+						store,
+						viewIsOpenAtoms,
+						`${testid}__${pathKey}`,
+					)
 					return (
-						<JsonEditor_INTERNAL
-							key={newPath.join(``)}
-							path={newPath}
-							name={`${index}`}
+						<ArrayElement
+							key={pathKey}
+							path={elementPath}
 							isReadonly={isReadonly}
 							isHidden={isHidden}
 							data={element}
 							set={setElement[index]}
 							remove={removeElement[index]}
 							recast={recastElement[index]}
-							className="json_editor_element"
 							Components={Components}
-							testid={`${testid}-element-${index}`}
+							testid={testid}
+							viewIsOpenAtom={viewIsOpenAtom}
 						/>
 					)
 				})}
 			</div>
-			{disabled ? null : (
-				<Components.Button
-					testid={`${testid}-add-element`}
-					disabled={disabled}
-					onClick={() => {
-						set((current) => {
-							const newData = [...current, JSON_DEFAULTS.string]
-							return newData
-						})
-					}}
-				>
-					+
-				</Components.Button>
-			)}
+			<Components.Button
+				testid={`${testid}-add-element`}
+				disabled={disabled}
+				onClick={() => {
+					set((current) => {
+						const newData = [...current, JSON_DEFAULTS.string]
+						return newData
+					})
+				}}
+			>
+				<Components.AddIcon />
+			</Components.Button>
 		</Components.ArrayWrapper>
 	)
 }

package/src/react-devtools/json-editor/editors-by-type/object-editor.tsx

@@ -1,8 +1,14 @@
-import type { Json } from "atom.io/json"
+import type { RegularAtomToken } from "atom.io"
+import { findInStore } from "atom.io/internal"
+import type { Json, JsonTypes } from "atom.io/json"
+import { useI } from "atom.io/react/use-i"
+import { useO } from "atom.io/react/use-o"
+import { DevtoolsContext } from "atom.io/react-devtools/store"
 import type { FC, ReactElement } from "react"
-import { useRef } from "react"
+import { useContext, useRef } from "react"
 
 import { ElasticInput } from "../../elastic-input"
+import type { SetterOrUpdater } from ".."
 import type { JsonEditorComponents } from "../default-components"
 import type { JsonEditorProps_INTERNAL } from "../json-editor-internal"
 import { JsonEditor_INTERNAL } from "../json-editor-internal"
@@ -43,6 +49,56 @@ export const PropertyAdder: FC<PropertyAdderProps> = ({
 	</Components.MissingPropertyWrapper>
 )
 
+type ObjectPropertyProps = {
+	path: ReadonlyArray<number | string>
+	isReadonly: (path: ReadonlyArray<number | string>) => boolean
+	isHidden: (path: ReadonlyArray<number | string>) => boolean
+	data: unknown
+	set: SetterOrUpdater<Json.Tree.Object>
+	rename: (newKey: string) => void
+	remove: (() => void) | undefined
+	recast: (newType: keyof JsonTypes) => void
+	Components: JsonEditorComponents
+	testid?: string | undefined
+	viewIsOpenAtom: RegularAtomToken<boolean, string>
+}
+const ObjectProperty = ({
+	path,
+	isReadonly,
+	isHidden,
+	data,
+	set,
+	rename,
+	remove,
+	recast,
+	Components,
+	testid,
+	viewIsOpenAtom,
+}: ObjectPropertyProps): ReactElement => {
+	const key = path[path.length - 1]
+	const viewIsOpen = useO(viewIsOpenAtom)
+	const setViewIsOpen = useI(viewIsOpenAtom)
+
+	return (
+		<JsonEditor_INTERNAL
+			path={path}
+			name={`${key}`}
+			isReadonly={isReadonly}
+			isHidden={isHidden}
+			data={data}
+			set={set}
+			rename={rename}
+			remove={remove}
+			recast={recast}
+			className="json_editor_property"
+			Components={Components}
+			isOpen={viewIsOpen}
+			setIsOpen={setViewIsOpen}
+			testid={`${testid}-property-${key}`}
+		/>
+	)
+}
+
 export const ObjectEditor = <T extends Json.Tree.Object>({
 	path = [],
 	isReadonly = () => false,
@@ -52,6 +108,8 @@ export const ObjectEditor = <T extends Json.Tree.Object>({
 	Components,
 	testid,
 }: JsonEditorProps_INTERNAL<T>): ReactElement => {
+	const { viewIsOpenAtoms, store } = useContext(DevtoolsContext)
+
 	const disabled = isReadonly(path)
 
 	const stableKeyMap = useRef<Record<keyof T, keyof T>>(
@@ -76,24 +134,44 @@ export const ObjectEditor = <T extends Json.Tree.Object>({
 			<div className={`json_editor_properties${disabled ? ` readonly` : ``}`}>
 				{Object.keys(data).map((key) => {
 					const originalKey = stableKeyMap.current[key]
-					const newPath = [...path, key]
-					const originalPath = [...path, originalKey]
+					const propertyPath = [...path, key]
+					const originalPropertyPath = [...path, originalKey]
+					const stablePathKey = originalPropertyPath.join(`.`)
+					const viewIsOpenAtom = findInStore(
+						store,
+						viewIsOpenAtoms,
+						`${testid}__${stablePathKey}`,
+					)
 
 					return (
-						<JsonEditor_INTERNAL
-							key={originalPath.join(`.`)}
-							path={newPath}
-							name={key}
+						// <JsonEditor_INTERNAL
+						// 	key={originalPath.join(`.`)}
+						// 	path={newPath}
+						// 	name={key}
+						// 	isReadonly={isReadonly}
+						// 	isHidden={isHidden}
+						// 	data={data[key as keyof T]}
+						// 	set={setProperty[key as keyof T]}
+						// 	rename={renameProperty[key as keyof T]}
+						// 	remove={removeProperty[key as keyof T]}
+						// 	recast={recastProperty[key as keyof T]}
+						// 	className="json_editor_property"
+						// 	Components={Components}
+						// 	testid={`${testid}-property-${key}`}
+						// />
+						<ObjectProperty
+							key={stablePathKey}
+							path={propertyPath}
 							isReadonly={isReadonly}
 							isHidden={isHidden}
-							data={data[key as keyof T]}
-							set={setProperty[key as keyof T]}
-							rename={renameProperty[key as keyof T]}
-							remove={removeProperty[key as keyof T]}
-							recast={recastProperty[key as keyof T]}
-							className="json_editor_property"
+							data={data[key]}
+							set={setProperty[key]}
+							rename={renameProperty[key]}
+							remove={removeProperty[key]}
+							recast={recastProperty[key]}
 							Components={Components}
-							testid={`${testid}-property-${key}`}
+							testid={testid}
+							viewIsOpenAtom={viewIsOpenAtom}
 						/>
 					)
 				})}
@@ -107,7 +185,7 @@ export const ObjectEditor = <T extends Json.Tree.Object>({
 							makePropertyAdder(`new_property`, `string`)()
 						}}
 					>
-						+
+						<Components.AddIcon />
 					</Components.Button>
 					<Components.Button
 						testid={`${testid}-sort-properties`}

package/src/react-devtools/json-editor/json-editor-internal.tsx

@@ -3,6 +3,7 @@ import type { JsonTypes } from "atom.io/json"
 import { isJson } from "atom.io/json"
 import type { CSSProperties, FC, ReactElement } from "react"
 
+import { button } from "../Button"
 import { ElasticInput } from "../elastic-input"
 import type { SetterOrUpdater } from "."
 import { SubEditors } from "."
@@ -23,6 +24,8 @@ export type JsonEditorProps_INTERNAL<T> = {
 	style?: CSSProperties | undefined
 	Header?: FC<{ data: T }> | undefined
 	Components: JsonEditorComponents
+	isOpen?: boolean
+	setIsOpen?: (newValue: boolean) => void
 	testid?: string | undefined
 }
 
@@ -38,8 +41,9 @@ export const JsonEditor_INTERNAL = <T,>({
 	isHidden = () => false,
 	className,
 	style,
-	Header: HeaderDisplay,
 	Components,
+	isOpen,
+	setIsOpen,
 	testid,
 }: JsonEditorProps_INTERNAL<T>): ReactElement | null => {
 	const dataIsJson = isJson(data)
@@ -53,6 +57,8 @@ export const JsonEditor_INTERNAL = <T,>({
 
 	const disabled = isReadonly(path)
 
+	const dataIsTree = refined.type === `array` || refined.type === `object`
+
 	return isHidden(path) ? null : (
 		<Components.ErrorBoundary>
 			<Components.EditorWrapper
@@ -60,64 +66,108 @@ export const JsonEditor_INTERNAL = <T,>({
 				style={style}
 				testid={testid}
 			>
-				{remove ? (
-					<Components.Button
-						disabled={disabled}
-						onClick={() => {
-							remove()
-						}}
-						testid={`${testid}-delete`}
-					>
-						<Components.DeleteIcon />
-					</Components.Button>
-				) : null}
-				{HeaderDisplay && <HeaderDisplay data={data} />}
-				{rename && (
-					<Components.KeyWrapper>
-						<ElasticInput
-							value={name}
-							onChange={
-								disabled
-									? undefined
-									: (e) => {
-											rename(e.target.value)
-										}
-							}
+				<header>
+					{remove ? (
+						<Components.Button
 							disabled={disabled}
-							data-testid={`${testid}-rename`}
+							onClick={() => {
+								remove()
+							}}
+							testid={`${testid}-delete`}
+						>
+							<Components.DeleteIcon />
+						</Components.Button>
+					) : null}
+					{dataIsTree && isOpen !== undefined && setIsOpen ? (
+						<button.OpenClose
+							isOpen={isOpen}
+							testid={`${testid}-open-close`}
+							setIsOpen={setIsOpen}
 						/>
-					</Components.KeyWrapper>
-				)}
-				<SubEditor
-					data={refined.data as never}
-					set={set}
-					remove={remove}
-					rename={rename}
-					path={path}
-					isReadonly={isReadonly}
-					isHidden={isHidden}
-					Components={Components}
-					testid={testid}
-				/>
-				{recast && dataIsJson ? (
-					<select
-						onChange={
-							disabled
-								? undefined
-								: (e) => {
+					) : null}
+					{rename && (
+						<Components.KeyWrapper>
+							<ElasticInput
+								value={name}
+								onChange={(e) => {
+									rename(e.target.value)
+								}}
+								disabled={disabled}
+								data-testid={`${testid}-rename`}
+							/>
+						</Components.KeyWrapper>
+					)}
+					{dataIsTree ? (
+						<>
+							{recast ? (
+								<select
+									onChange={(e) => {
 										recast(e.target.value as keyof JsonTypes)
+									}}
+									value={refined.type}
+									disabled={disabled}
+									data-testid={`${testid}-recast`}
+								>
+									{Object.keys(SubEditors).map((type) => (
+										<option key={type} value={type}>
+											{type}
+										</option>
+									))}
+								</select>
+							) : null}
+							{isOpen !== undefined && setIsOpen ? (
+								<span className="json_viewer">{JSON.stringify(data)}</span>
+							) : null}
+						</>
+					) : (
+						<>
+							<SubEditor
+								data={refined.data as never}
+								set={set}
+								remove={remove}
+								rename={rename}
+								path={path}
+								isReadonly={isReadonly}
+								isHidden={isHidden}
+								Components={Components}
+								testid={testid}
+							/>
+							{recast && dataIsJson ? (
+								<select
+									onChange={
+										disabled
+											? undefined
+											: (e) => {
+													recast(e.target.value as keyof JsonTypes)
+												}
 									}
-						}
-						value={refined.type}
-						disabled={disabled}
-						data-testid={`${testid}-recast`}
-					>
-						{Object.keys(SubEditors).map((type) => (
-							<option key={type} value={type}>
-								{type}
-							</option>
-						))}
-					</select>
+									value={refined.type}
+									disabled={disabled}
+									data-testid={`${testid}-recast`}
+								>
+									{Object.keys(SubEditors).map((type) => (
+										<option key={type} value={type}>
+											{type}
+										</option>
+									))}
+								</select>
+							) : null}
+						</>
+					)}
+				</header>
+
+				{dataIsTree && isOpen !== false ? (
+					<SubEditor
+						data={refined.data as never}
+						set={set}
+						remove={remove}
+						rename={rename}
+						path={path}
+						isReadonly={isReadonly}
+						isHidden={isHidden}
+						Components={Components}
+						testid={testid}
+					/>
 				) : null}
 			</Components.EditorWrapper>
 		</Components.ErrorBoundary>