atom.io 0.28.1 → 0.28.2

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

@@ -0,0 +1,101 @@
+import type { CSSProperties, FC, ReactNode } from "react"
+
+import { ErrorBoundary } from "../error-boundary"
+
+export type Dict<T> = Record<string, T>
+
+export type WrapperComponent<T extends Dict<unknown> = Dict<unknown>> = FC<
+	T & { children: ReactNode; testid?: string | undefined }
+>
+
+export type WC<T extends Dict<unknown> = Dict<unknown>> = WrapperComponent<T>
+
+export type JsonEditorComponents = {
+	ErrorBoundary: WC
+
+	Button: WC<{
+		onClick?: () => void
+		disabled?: boolean
+	}>
+	DeleteIcon: FC
+
+	EditorWrapper: WC<{
+		style?: CSSProperties | undefined
+		className?: string | undefined
+		testid?: string | undefined
+	}>
+
+	ArrayWrapper: WC
+	ObjectWrapper: WC
+	StringWrapper: WC
+	NumberWrapper: WC
+	BooleanWrapper: WC
+	Null: FC<{ testid?: string | undefined }>
+
+	MissingPropertyWrapper: WC
+	KeyWrapper: WC
+}
+
+export const DEFAULT_JSON_EDITOR_COMPONENTS: JsonEditorComponents = {
+	ErrorBoundary: ({ children }) => <ErrorBoundary>{children}</ErrorBoundary>,
+	Button: ({ onClick, children, disabled, testid }) => (
+		<button
+			type="button"
+			className="json_editor_button"
+			onClick={onClick}
+			disabled={disabled}
+			data-testid={testid}
+		>
+			{children}
+		</button>
+	),
+	EditorWrapper: ({ children, className, testid }) => (
+		<div
+			className={`json_editor` + (className ? ` ${className}` : ``)}
+			data-testid={testid}
+		>
+			{children}
+		</div>
+	),
+	ArrayWrapper: ({ children, testid }) => (
+		<div className="json_editor_array" data-testid={testid}>
+			{children}
+		</div>
+	),
+	ObjectWrapper: ({ children, testid }) => (
+		<div className="json_editor_object" data-testid={testid}>
+			{children}
+		</div>
+	),
+	StringWrapper: ({ children, testid }) => (
+		<span className="json_editor_string" data-testid={testid}>
+			{children}
+		</span>
+	),
+	NumberWrapper: ({ children, testid }) => (
+		<span className="json_editor_number" data-testid={testid}>
+			{children}
+		</span>
+	),
+	BooleanWrapper: ({ children, testid }) => (
+		<span className="json_editor_boolean" data-testid={testid}>
+			{children}
+		</span>
+	),
+	Null: ({ testid }) => (
+		<span className="json_editor_null" data-testid={testid} />
+	),
+	DeleteIcon: () => (
+		<span className="json_editor_icon json_editor_delete">x</span>
+	),
+	MissingPropertyWrapper: ({ children, testid }) => (
+		<span className="json_editor_missing_property" data-testid={testid}>
+			{children}
+		</span>
+	),
+	KeyWrapper: ({ children, testid }) => (
+		<span className="json_editor_key" data-testid={testid}>
+			{children}
+		</span>
+	),
+}

package/react-devtools/src/json-editor/developer-interface.tsx

@@ -0,0 +1,81 @@
+import type { Json, JsonTypes } from "atom.io/json"
+import type { CSSProperties, FC, ReactElement } from "react"
+
+import type { JsonEditorComponents } from "./default-components"
+import { DEFAULT_JSON_EDITOR_COMPONENTS } from "./default-components"
+import { ArrayEditor } from "./editors-by-type/array-editor"
+import { ObjectEditor } from "./editors-by-type/object-editor"
+import {
+	BooleanEditor,
+	NullEditor,
+	NumberEditor,
+	StringEditor,
+} from "./editors-by-type/primitive-editors"
+import type { JsonEditorProps_INTERNAL } from "./json-editor-internal"
+import { JsonEditor_INTERNAL } from "./json-editor-internal"
+
+export const SubEditors: Record<
+	keyof JsonTypes,
+	FC<JsonEditorProps_INTERNAL<any>>
+> = {
+	array: ArrayEditor,
+	boolean: BooleanEditor,
+	null: NullEditor,
+	number: NumberEditor,
+	object: ObjectEditor,
+	string: StringEditor,
+}
+
+export type JsonEditorProps<T> = {
+	data: T
+	set: (valOrUpdater: T | ((currVal: T) => T)) => void
+	name?: string | undefined
+	rename?: ((newKey: string) => void) | undefined
+	remove?: () => void
+	path?: ReadonlyArray<number | string>
+	isReadonly?: (path: ReadonlyArray<number | string>) => boolean
+	isHidden?: (path: ReadonlyArray<number | string>) => boolean
+	className?: string
+	style?: CSSProperties
+	Header?: FC<{ data: T }>
+	Components?: Partial<JsonEditorComponents>
+	testid?: string
+}
+
+export const JsonEditor = <T,>({
+	data,
+	set,
+	name,
+	rename,
+	remove,
+	isReadonly = () => false,
+	isHidden = () => false,
+	className,
+	Header,
+	style,
+	Components: CustomComponents = {},
+	testid,
+}: JsonEditorProps<T>): ReactElement => {
+	const Components = {
+		...DEFAULT_JSON_EDITOR_COMPONENTS,
+		...CustomComponents,
+	}
+
+	return (
+		<JsonEditor_INTERNAL
+			data={data}
+			set={set}
+			name={name}
+			rename={rename}
+			remove={remove}
+			path={[]}
+			isReadonly={isReadonly}
+			isHidden={isHidden}
+			className={className}
+			Header={Header}
+			style={style}
+			Components={Components}
+			testid={testid}
+		/>
+	)
+}

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

@@ -0,0 +1,38 @@
+import type { Json } from "atom.io/json"
+import type { ReactElement } from "react"
+
+import type { JsonEditorProps_INTERNAL } from "../json-editor-internal"
+import { JsonEditor_INTERNAL } from "../json-editor-internal"
+import { makeElementSetters } from "./utilities/array-elements"
+
+export const ArrayEditor = ({
+	path = [],
+	isReadonly = () => false,
+	isHidden = () => false,
+	data,
+	set,
+	Components,
+	testid,
+}: JsonEditorProps_INTERNAL<Json.Tree.Array>): ReactElement => {
+	const setElement = makeElementSetters(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}`}
+					/>
+				)
+			})}
+		</>
+	)
+}

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

@@ -0,0 +1,23 @@
+import { ElasticInput } from "../../elastic-input"
+import type { JsonEditorProps } from "../developer-interface"
+
+export const NonJsonEditor: React.FC<JsonEditorProps<never>> = ({
+	data,
+	testid,
+}) => {
+	return data === undefined ? (
+		<ElasticInput
+			disabled
+			value="undefined"
+			data-testid={`${testid}-undefined`}
+		/>
+	) : (
+		<ElasticInput
+			disabled
+			value={
+				Object.getPrototypeOf(data).constructor.name + ` ` + JSON.stringify(data)
+			}
+			data-testid={`${testid}-non-json-${Object.getPrototypeOf(data).constructor.name}`}
+		/>
+	)
+}

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

@@ -0,0 +1,128 @@
+import type { Json } from "atom.io/json"
+import type { FC, ReactElement } from "react"
+import { useRef } from "react"
+
+import { ElasticInput } from "../../elastic-input"
+import type { JsonEditorComponents } from "../default-components"
+import type { JsonEditorProps_INTERNAL } from "../json-editor-internal"
+import { JsonEditor_INTERNAL } from "../json-editor-internal"
+import {
+	makePropertyCreationInterface,
+	makePropertyRecasters,
+	makePropertyRemovers,
+	makePropertyRenamers,
+	makePropertySetters,
+	makePropertySorter,
+} from "./utilities/object-properties"
+
+export type PropertyAdderProps = {
+	addProperty: () => void
+	disabled: boolean
+	propertyKey: string
+	Components: JsonEditorComponents
+}
+
+export const PropertyAdder: FC<PropertyAdderProps> = ({
+	addProperty,
+	disabled,
+	propertyKey,
+	Components,
+}) => (
+	<Components.MissingPropertyWrapper>
+		<ElasticInput disabled defaultValue={propertyKey} />
+		{` `}
+		<ElasticInput disabled defaultValue="is missing" />
+		<Components.Button
+			onClick={() => {
+				addProperty()
+			}}
+			disabled={disabled}
+		>
+			+
+		</Components.Button>
+	</Components.MissingPropertyWrapper>
+)
+
+export const ObjectEditor = <T extends Json.Tree.Object>({
+	path = [],
+	isReadonly = () => false,
+	isHidden = () => false,
+	data,
+	set,
+	Components,
+	testid,
+}: JsonEditorProps_INTERNAL<T>): ReactElement => {
+	const disabled = isReadonly(path)
+
+	const stableKeyMap = useRef<Record<keyof T, keyof T>>(
+		Object.keys(data).reduce(
+			(acc, key: keyof T) => {
+				acc[key] = key
+				return acc
+			},
+			{} as Record<keyof T, keyof T>,
+		),
+	)
+
+	const setProperty = makePropertySetters(data, set)
+	const renameProperty = makePropertyRenamers(data, set, stableKeyMap)
+	const removeProperty = makePropertyRemovers(data, set)
+	const recastProperty = makePropertyRecasters(data, set)
+	const sortProperties = makePropertySorter(data, set)
+	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]
+
+						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>
+				) : (
+					<Components.Button
+						testid={`${testid}-add-property`}
+						onClick={() => {
+							makePropertyAdder(`new_property`, `string`)()
+						}}
+					>
+						+
+					</Components.Button>
+				)}
+			</Components.ObjectWrapper>
+		</>
+	)
+}

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

@@ -0,0 +1,73 @@
+import type { ReactElement } from "react"
+
+import { NumberInput, TextInput } from "../../elastic-input"
+import type { JsonEditorProps_INTERNAL } from "../json-editor-internal"
+
+export const BooleanEditor = ({
+	data,
+	set,
+	Components,
+	testid,
+}: JsonEditorProps_INTERNAL<boolean>): ReactElement => (
+	<Components.BooleanWrapper>
+		<input
+			data-testid={`${testid}-boolean-input`}
+			type="checkbox"
+			checked={data}
+			onChange={(event) => {
+				set(event.target.checked)
+			}}
+		/>
+	</Components.BooleanWrapper>
+)
+
+export const NullEditor = ({
+	Components,
+	testid,
+}: JsonEditorProps_INTERNAL<null>): ReactElement => (
+	<Components.Null testid={`${testid}-null`} />
+)
+
+export const NumberEditor = ({
+	path = [],
+	isReadonly = () => false,
+	data,
+	set,
+	Components,
+	testid,
+}: JsonEditorProps_INTERNAL<number>): ReactElement => (
+	<Components.NumberWrapper>
+		<NumberInput
+			testid={`${testid}-number-input`}
+			value={data}
+			set={
+				isReadonly(path)
+					? undefined
+					: (newValue) => {
+							set(Number(newValue))
+						}
+			}
+			autoSize={true}
+		/>
+	</Components.NumberWrapper>
+)
+
+export const StringEditor = ({
+	path = [],
+	isReadonly = () => false,
+	data,
+	set,
+	Components,
+	testid,
+}: JsonEditorProps_INTERNAL<string>): ReactElement => {
+	return (
+		<Components.StringWrapper>
+			<TextInput
+				testid={`${testid}-string-input`}
+				value={data}
+				set={isReadonly(path) ? undefined : set}
+				autoSize={true}
+			/>
+		</Components.StringWrapper>
+	)
+}

package/react-devtools/src/json-editor/editors-by-type/utilities/array-elements.ts

@@ -0,0 +1,16 @@
+import { become } from "atom.io/internal"
+import type { Json } from "atom.io/json"
+
+import type { SetterOrUpdater } from "../.."
+
+export const makeElementSetters = <T extends Json.Tree.Array>(
+	data: T,
+	set: SetterOrUpdater<T>,
+): SetterOrUpdater<T[number]>[] =>
+	data.map((value, index) => (newValue) => {
+		set((): T => {
+			const newData = [...data]
+			newData[index] = become(newValue)(value)
+			return newData as unknown as T
+		})
+	})

package/react-devtools/src/json-editor/editors-by-type/utilities/cast-json.ts

@@ -0,0 +1,57 @@
+import type { Json } from "atom.io/json"
+
+export const stringToBoolean = (str: string): boolean => str === `true`
+export const stringToNumber = (str: string): number => Number(str)
+export const stringToArray = (str: string): string[] => str.split(`,`)
+export const stringToObject = (str: string): Json.Tree.Object => {
+	try {
+		return JSON.parse(str)
+	} catch (e) {
+		return { [str]: str }
+	}
+}
+
+export const objectToString = (obj: Json.Tree.Object): string =>
+	JSON.stringify(obj)
+export const objectToBoolean = (obj: Json.Tree.Object): boolean =>
+	obj.true === true
+export const objectToNumber = (obj: Json.Tree.Object): number =>
+	Number(obj.number ?? obj.size ?? obj.count ?? 0)
+export const objectToArray = <T>(
+	obj: Json.Tree.Object<string, T>,
+): [key: string, value: T][] => Object.entries(obj)
+
+export const booleanToString = (bool: boolean): string => bool.toString()
+export const booleanToNumber = (bool: boolean): number => +bool
+export const booleanToObject = (bool: boolean): Json.Tree.Object => ({
+	[bool.toString()]: bool,
+})
+export const booleanToArray = (bool: boolean): boolean[] => [bool]
+
+export const numberToString = (num: number): string => num.toString()
+export const numberToBoolean = (num: number): boolean => num === 1
+export const numberToObject = (num: number): Json.Tree.Object => ({
+	number: num,
+})
+export const numberToArray = (num: number): null[] => Array(num).fill(null)
+
+export const arrayToString = (arr: Json.Tree.Array): string => arr.join(`,`)
+export const arrayToNumber = (arr: Json.Tree.Array): number => arr.length
+export const arrayToBoolean = (arr: Json.Tree.Array): boolean =>
+	typeof arr[0] === `boolean` ? arr[0] : arr.length > 0
+export const arrayToObject = <T>(
+	arr: Json.Tree.Array<T>,
+): Json.Tree.Object<`${number}`, T> =>
+	arr.reduce(
+		(acc, cur, idx) => {
+			acc[`${idx}`] = cur
+			return acc
+		},
+		{} as Json.Tree.Object<`${number}`, T>,
+	)
+
+export const nullToString = (): string => ``
+export const nullToNumber = (): number => 0
+export const nullToBoolean = (): boolean => false
+export const nullToArray = (): Json.Tree.Array => []
+export const nullToObject = (): Json.Tree.Object => ({})

package/react-devtools/src/json-editor/editors-by-type/utilities/cast-to-json.ts

@@ -0,0 +1,156 @@
+import { jsonRefinery } from "atom.io/introspection"
+import type { Json } from "atom.io/json"
+
+import * as Cast from "./cast-json"
+
+export const castToJson = (
+	input: unknown,
+): {
+	array: Json.Tree.Array
+	boolean: boolean
+	number: number
+	object: Json.Tree.Object
+	string: string
+	null: null
+} => {
+	const refined = jsonRefinery.refine(input)
+	switch (refined?.type) {
+		case `array`: {
+			const data = refined.data
+			return {
+				get array() {
+					return data
+				},
+				get boolean() {
+					return Cast.arrayToBoolean(data)
+				},
+				get number() {
+					return Cast.arrayToNumber(data)
+				},
+				get object() {
+					return Cast.arrayToObject(data)
+				},
+				get string() {
+					return Cast.arrayToString(data)
+				},
+				get null() {
+					return null
+				},
+			}
+		}
+		case `boolean`: {
+			const data = refined.data
+			return {
+				get array() {
+					return Cast.booleanToArray(data)
+				},
+				get boolean() {
+					return data
+				},
+				get number() {
+					return Cast.booleanToNumber(data)
+				},
+				get object() {
+					return Cast.booleanToObject(data)
+				},
+				get string() {
+					return Cast.booleanToString(data)
+				},
+				get null() {
+					return null
+				},
+			}
+		}
+		case `number`: {
+			const data = refined.data
+			return {
+				get array() {
+					return Cast.numberToArray(data)
+				},
+				get boolean() {
+					return Cast.numberToBoolean(data)
+				},
+				get number() {
+					return data
+				},
+				get object() {
+					return Cast.numberToObject(data)
+				},
+				get string() {
+					return Cast.numberToString(data)
+				},
+				get null() {
+					return null
+				},
+			}
+		}
+		case `object`: {
+			const data = refined.data
+			return {
+				get array() {
+					return Cast.objectToArray(data)
+				},
+				get boolean() {
+					return Cast.objectToBoolean(data)
+				},
+				get number() {
+					return Cast.objectToNumber(data)
+				},
+				get object() {
+					return data
+				},
+				get string() {
+					return Cast.objectToString(data)
+				},
+				get null() {
+					return null
+				},
+			}
+		}
+		case `string`: {
+			const data = refined.data
+			return {
+				get array() {
+					return Cast.stringToArray(data)
+				},
+				get boolean() {
+					return Cast.stringToBoolean(data)
+				},
+				get number() {
+					return Cast.stringToNumber(data)
+				},
+				get object() {
+					return Cast.stringToObject(data)
+				},
+				get string() {
+					return data
+				},
+				get null() {
+					return null
+				},
+			}
+		}
+		default: {
+			return {
+				get array() {
+					return Cast.nullToArray()
+				},
+				get boolean() {
+					return Cast.nullToBoolean()
+				},
+				get number() {
+					return Cast.nullToNumber()
+				},
+				get object() {
+					return Cast.nullToObject()
+				},
+				get string() {
+					return Cast.nullToString()
+				},
+				get null() {
+					return null
+				},
+			}
+		}
+	}
+}