atom.io 0.33.10 → 0.33.12

package/src/react-devtools/devtools.css

@@ -1,18 +1,30 @@
 main[data-css="atom_io_devtools"] {
 	--fg-color: #ccc;
 	--fg-light: #aaa;
+	--fg-soft: #777;
 	--fg-faint: #555;
+	--fg-hint: #333;
+	--fg-max: #fff;
 	--bg-color: #111;
 	--bg-accent: #00f;
+	--bg-max: #000;
 	--bg-tint1: #222;
+	--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;
+		--fg-soft: #888;
 		--fg-faint: #999;
+		--fg-hint: #ccc;
+		--fg-max: #000;
 		--bg-color: #ddd;
 		--bg-accent: #0ff;
+		--bg-max: #fff;
 		--bg-tint1: #e3e3e3;
+		--bg-tint2: #f3f3f3;
 	}
 	& {
 		pointer-events: all;
@@ -42,14 +54,20 @@ main[data-css="atom_io_devtools"] {
 		display: flex;
 		justify-content: space-between;
 		h1 {
-			margin: 0;
+			margin: 2px 4px;
 			font-size: 24px;
 			font-family: charter, serif;
 		}
 		nav {
+			position: relative;
 			display: flex;
 			flex-flow: row nowrap;
+			margin-top: 4px;
+			overflow-x: scroll;
+			overflow-y: visible;
+			height: 24px;
 			button {
+				height: 24px;
 				cursor: pointer;
 				background: none;
 				border: none;
@@ -58,10 +76,9 @@ main[data-css="atom_io_devtools"] {
 				z-index: 1000;
 				&:disabled {
 					cursor: default;
-					background-color: var(--bg-tint1);
-					color: var(--fg-color);
+					background-color: var(--fg-color);
+					color: var(--bg-color);
 					border: var(--fg-border);
-					border-bottom: none;
 				}
 			}
 		}
@@ -69,6 +86,10 @@ main[data-css="atom_io_devtools"] {
 	> main {
 		background: var(--bg-tint1);
 	}
+	> main::before {
+		background-color: black;
+		height: 10px;
+	}
 	main {
 		overflow-y: scroll;
 		flex-grow: 1;
@@ -86,7 +107,7 @@ main[data-css="atom_io_devtools"] {
 			}
 			.node > .node {
 				margin: 0px 2px 2px 18px;
-				border-left: var(--fg-border);
+				border-left: var(--fg-border-soft);
 				&:last-of-type {
 					margin-bottom: 6px;
 				}
@@ -100,32 +121,21 @@ main[data-css="atom_io_devtools"] {
 				&.transaction_update {
 					padding: 0;
 				}
-				header {
+				> header {
 					display: flex;
 					flex-flow: row;
 					position: sticky;
 					z-index: 999;
 					top: 0;
 					height: 22px;
-					button.carat {
-						cursor: pointer;
-						background: none;
-						border: none;
-						width: 20px;
-						color: var(--fg-light);
-						&.open {
-							transform: rotate(90deg);
-						}
-						&:disabled {
-							cursor: default;
-							color: var(--fg-faint);
-						}
-					}
+					background: var(--bg-tint2);
+					border-bottom: var(--fg-border-soft);
 					> main {
 						display: flex;
 						flex-flow: row;
 						cursor: help;
 						align-items: center;
+						flex-shrink: 0;
 						* {
 							height: 100%;
 							display: flex;
@@ -146,25 +156,34 @@ 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 {
 						display: flex;
+						flex-shrink: 1;
+						z-index: -1;
+						overflow-x: scroll;
 						align-items: center;
-						border-left: 1px solid var(--fg-light);
-						background-color: var(--bg-tint1);
-						* {
+						border-left: var(--fg-border-soft);
+						white-space: pre;
+						background: var(--bg-tint2);
+						&:focus-within {
+							background-color: var(--bg-max);
+							outline: 2px solid var(--fg-max);
+							* {
+								color: var(--fg-max);
+							}
+						}
+						&.nu * {
 							display: flex;
 							height: 100%;
 						}
 						> span {
 							padding: 0px 5px;
-							border-left: var(--fg-color);
 							z-index: 0;
-							&:focus-within {
-								outline: 4px solid var(--fg-color);
-								background: var(--bg-accent);
-							}
 						}
 						input {
 							outline: none;
@@ -281,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;
@@ -288,12 +342,36 @@ main[data-css="atom_io_devtools"] {
 				border: none;
 			}
 		}
+		input,
+		button,
+		select {
+			&:focus-within {
+				outline: 2px solid var(--fg-max);
+				background: var(--bg-max);
+				color: var(--fg-max);
+			}
+		}
+		button:disabled {
+			cursor: default;
+			> span.json_editor_icon {
+				color: var(--fg-hint);
+			}
+			&:hover {
+				background: none;
+			}
+		}
+		input::selection {
+			background: var(--bg-accent);
+		}
+
 		button {
 			background: none;
 			color: #777;
 			border: none;
 			font-family: theia, monospace;
 			font-size: 14px;
+			height: 21px;
+			min-width: 21px;
 			margin: none;
 			padding: 4px;
 			padding-bottom: 6px;
@@ -323,25 +401,78 @@ main[data-css="atom_io_devtools"] {
 			background-color: #f055;
 		}
 		.json_editor_key {
-			padding-right: 10px;
+			padding-right: 0px;
+			&::after {
+				content: ":";
+			}
 			input {
-				color: #999;
-				@media (prefers-color-scheme: light) {
-					color: #777;
-				}
+				color: var(--fg-color);
 			}
 		}
-		.json_editor_object {
-			border-left: 2px solid #333;
-			padding-left: 20px;
-			@media (prefers-color-scheme: light) {
-				border-color: #ccc;
-			}
-			.json_editor_properties {
-				> * {
-					border-bottom: var(--fg-border);
+		.json_editor_object,
+		.json_editor_array {
+			border-left: var(--fg-border-soft);
+			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;
+					> header {
+						width: 100%;
+
+						> span {
+							input {
+								min-width: 10px;
+							}
+							> * {
+								border: var(--fg-border-hint);
+							}
+						}
+					}
 				}
+				&.readonly {
+					.json_editor_property,
+					.json_editor_element {
+						&:last-of-type {
+							border-bottom: none;
+						}
+						> span > * {
+							border: 1px solid transparent;
+						}
+					}
+				}
+			}
+		}
+	}
+
+	.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,9 +1,66 @@
-import type { Json } 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"
+import {
+	makePropertyRecasters,
+	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 = [],
@@ -14,25 +71,53 @@ 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)
+	const removeElement = makePropertyRemovers(data, set)
+	const recastElement = makePropertyRecasters(data, set)
+
 	return (
-		<>
-			{data.map((element, index) => {
-				const newPath = [...path, index]
-				return (
-					<JsonEditor_INTERNAL
-						key={newPath.join(``)}
-						path={newPath}
-						isReadonly={isReadonly}
-						isHidden={isHidden}
-						data={element}
-						set={setElement[index]}
-						Components={Components}
-						className="json_editor_element"
-						testid={`${testid}-element-${index}`}
-					/>
-				)
-			})}
-		</>
+		<Components.ArrayWrapper>
+			<div className={`json_editor_elements${disabled ? ` readonly` : ``}`}>
+				{data.map((element, index) => {
+					const elementPath = [...path, index]
+					const pathKey = elementPath.join(`,`)
+					const viewIsOpenAtom = findInStore(
+						store,
+						viewIsOpenAtoms,
+						`${testid}__${pathKey}`,
+					)
+					return (
+						<ArrayElement
+							key={pathKey}
+							path={elementPath}
+							isReadonly={isReadonly}
+							isHidden={isHidden}
+							data={element}
+							set={setElement[index]}
+							remove={removeElement[index]}
+							recast={recastElement[index]}
+							Components={Components}
+							testid={testid}
+							viewIsOpenAtom={viewIsOpenAtom}
+						/>
+					)
+				})}
+			</div>
+			<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>>(
@@ -72,57 +130,74 @@ export const ObjectEditor = <T extends Json.Tree.Object>({
 	const makePropertyAdder = makePropertyCreationInterface(data, set)
 
 	return (
-		<>
-			<Components.Button
-				testid={`${testid}-sort-properties`}
-				onClick={() => {
-					sortProperties()
-				}}
-				disabled={disabled}
-			>
-				Sort
-			</Components.Button>
-			<Components.ObjectWrapper>
-				<div className="json_editor_properties">
-					{Object.keys(data).map((key) => {
-						const originalKey = stableKeyMap.current[key]
-						const newPath = [...path, key]
-						const originalPath = [...path, originalKey]
+		<Components.ObjectWrapper>
+			<div className={`json_editor_properties${disabled ? ` readonly` : ``}`}>
+				{Object.keys(data).map((key) => {
+					const originalKey = stableKeyMap.current[key]
+					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}
-								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}`}
-							/>
-						)
-					})}
-				</div>
-				{disabled ? (
-					<Components.Button disabled testid={`${testid}-add-property`}>
-						+
-					</Components.Button>
-				) : (
+					return (
+						// <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]}
+							set={setProperty[key]}
+							rename={renameProperty[key]}
+							remove={removeProperty[key]}
+							recast={recastProperty[key]}
+							Components={Components}
+							testid={testid}
+							viewIsOpenAtom={viewIsOpenAtom}
+						/>
+					)
+				})}
+			</div>
+			{disabled ? null : (
+				<>
 					<Components.Button
+						disabled={disabled}
 						testid={`${testid}-add-property`}
 						onClick={() => {
 							makePropertyAdder(`new_property`, `string`)()
 						}}
 					>
-						+
+						<Components.AddIcon />
+					</Components.Button>
+					<Components.Button
+						testid={`${testid}-sort-properties`}
+						onClick={() => {
+							sortProperties()
+						}}
+						disabled={disabled}
+					>
+						Sort
 					</Components.Button>
-				)}
-			</Components.ObjectWrapper>
-		</>
+				</>
+			)}
+		</Components.ObjectWrapper>
 	)
 }