atom.io 0.28.1 → 0.29.0

package/react-devtools/src/AtomIODevtools.tsx

@@ -1,23 +1,34 @@
 import "./devtools.scss"
 
-import { useI, useO } from "atom.io/react"
+import { StoreContext, useI, useO } from "atom.io/react"
 import { LayoutGroup, motion, spring } from "framer-motion"
-import { useRef } from "react"
+import { useContext, useRef } from "react"
 
 import { StateIndex } from "./StateIndex"
-import {
-	atomIndex,
-	devtoolsAreOpenState,
-	devtoolsViewOptionsState,
-	devtoolsViewSelectionState,
-	selectorIndex,
-} from "./store"
+import { attachDevtoolsStates, DevtoolsContext } from "./store"
 import { TimelineIndex } from "./TimelineIndex"
 import { TransactionIndex } from "./TransactionIndex"
 
-export const AtomIODevtools = (): JSX.Element => {
+export const AtomIODevtools: React.FC = () => {
+	const store = useContext(StoreContext)
+	return (
+		<DevtoolsContext.Provider value={attachDevtoolsStates(store)}>
+			<AtomIODevtoolsInternal />
+		</DevtoolsContext.Provider>
+	)
+}
+
+const AtomIODevtoolsInternal = (): JSX.Element => {
 	const constraintsRef = useRef(null)
 
+	const {
+		atomIndex,
+		selectorIndex,
+		devtoolsAreOpenState,
+		devtoolsViewSelectionState,
+		devtoolsViewOptionsState,
+	} = useContext(DevtoolsContext)
+
 	const setDevtoolsAreOpen = useI(devtoolsAreOpenState)
 	const devtoolsAreOpen = useO(devtoolsAreOpenState)
 	const setDevtoolsView = useI(devtoolsViewSelectionState)
@@ -85,9 +96,9 @@ export const AtomIODevtools = (): JSX.Element => {
 									<StateIndex tokenIndex={selectorIndex} />
 								) : devtoolsView === `transactions` ? (
 									<TransactionIndex />
-								) : devtoolsView === `timelines` ? (
+								) : (
 									<TimelineIndex />
-								) : null}
+								)}
 							</LayoutGroup>
 						</motion.main>
 					</>
@@ -103,7 +114,7 @@ export const AtomIODevtools = (): JSX.Element => {
 							}
 						}}
 					>
-						👁‍🗨
+						🔍
 					</button>
 				</footer>
 			</motion.main>

package/react-devtools/src/StateEditor.tsx

@@ -1,45 +1,16 @@
 import type { ReadonlySelectorToken, WritableToken } from "atom.io"
-import { isJson } from "atom.io/json"
 import { useI, useO } from "atom.io/react"
 import type { FC } from "react"
 
-import { ElasticInput } from "~/packages/hamr/react-elastic-input/src"
-import { JsonEditor } from "~/packages/hamr/react-json-editor/src"
-
-export const fallback = <T,>(fn: () => T, fallbackValue: T): T => {
-	try {
-		return fn()
-	} catch (_) {
-		return fallbackValue
-	}
-}
+import { JsonEditor } from "./json-editor"
 
 export const StateEditor: FC<{
 	token: WritableToken<unknown>
 }> = ({ token }) => {
 	const set = useI(token)
 	const data = useO(token)
-	return isJson(data) ? (
-		<JsonEditor data={data} set={set} schema={true} />
-	) : (
-		<div className="json_editor">
-			<ElasticInput
-				value={
-					data === undefined || data === null
-						? ``
-						: typeof data === `object` &&
-								`toJson` in data &&
-								typeof data.toJson === `function`
-							? JSON.stringify(data.toJson())
-							: data instanceof Set
-								? `Set { ${JSON.stringify([...data]).slice(1, -1)} }`
-								: Object.getPrototypeOf(data).constructor.name +
-									` ` +
-									fallback(() => JSON.stringify(data), `?`)
-				}
-				disabled={true}
-			/>
-		</div>
+	return (
+		<JsonEditor testid={`${token.key}-state-editor`} data={data} set={set} />
 	)
 }
 
@@ -47,26 +18,13 @@ export const ReadonlySelectorViewer: FC<{
 	token: ReadonlySelectorToken<unknown>
 }> = ({ token }) => {
 	const data = useO(token)
-	return isJson(data) ? (
+	return (
 		<JsonEditor
+			testid={`${token.key}-state-editor`}
 			data={data}
 			set={() => null}
-			schema={true}
 			isReadonly={() => true}
 		/>
-	) : (
-		<div className="json_editor">
-			<ElasticInput
-				value={
-					data instanceof Set
-						? `Set ` + JSON.stringify([...data])
-						: Object.getPrototypeOf(data).constructor.name +
-							` ` +
-							JSON.stringify(data)
-				}
-				disabled={true}
-			/>
-		</div>
 	)
 }
 

package/react-devtools/src/StateIndex.tsx

@@ -4,15 +4,15 @@ import type {
 	RegularAtomToken,
 } from "atom.io"
 import { getState } from "atom.io"
-import { findState } from "atom.io/ephemeral"
+import { findInStore } from "atom.io/internal"
 import type { FamilyNode, WritableTokenIndex } from "atom.io/introspection"
 import { primitiveRefinery } from "atom.io/introspection"
 import { useI, useO } from "atom.io/react"
-import type { FC } from "react"
+import { type FC, useContext } from "react"
 
 import { button } from "./Button"
 import { StoreEditor } from "./StateEditor"
-import { typeSelectors, viewIsOpenAtoms } from "./store"
+import { DevtoolsContext } from "./store"
 
 /* eslint-disable no-console */
 
@@ -65,9 +65,12 @@ export const StateIndexTreeNode: FC<{
 }> = ({ node, isOpenState }) => {
 	const setIsOpen = useI(isOpenState)
 	const isOpen = useO(isOpenState)
+
+	const { typeSelectors, viewIsOpenAtoms, store } = useContext(DevtoolsContext)
+
 	for (const [key, childNode] of node.familyMembers) {
-		findState(viewIsOpenAtoms, key)
-		findState(typeSelectors, childNode.key)
+		findInStore(store, viewIsOpenAtoms, key)
+		findInStore(store, typeSelectors, childNode.key)
 	}
 	return (
 		<>
@@ -87,8 +90,8 @@ export const StateIndexTreeNode: FC<{
 						<StateIndexNode
 							key={key}
 							node={childNode}
-							isOpenState={findState(viewIsOpenAtoms, childNode.key)}
-							typeState={findState(typeSelectors, childNode.key)}
+							isOpenState={findInStore(store, viewIsOpenAtoms, childNode.key)}
+							typeState={findInStore(store, typeSelectors, childNode.key)}
 						/>
 					))
 				: null}
@@ -120,6 +123,9 @@ export const StateIndex: FC<{
 	tokenIndex: ReadonlySelectorToken<WritableTokenIndex<ReadableToken<unknown>>>
 }> = ({ tokenIndex }) => {
 	const tokenIds = useO(tokenIndex)
+
+	const { typeSelectors, viewIsOpenAtoms, store } = useContext(DevtoolsContext)
+
 	return (
 		<article className="index state_index" data-testid="state-index">
 			{[...tokenIds.entries()]
@@ -130,8 +136,8 @@ export const StateIndex: FC<{
 						<StateIndexNode
 							key={key}
 							node={node}
-							isOpenState={findState(viewIsOpenAtoms, node.key)}
-							typeState={findState(typeSelectors, node.key)}
+							isOpenState={findInStore(store, viewIsOpenAtoms, node.key)}
+							typeState={findInStore(store, typeSelectors, node.key)}
 						/>
 					)
 				})}

package/react-devtools/src/TimelineIndex.tsx

@@ -4,13 +4,12 @@ import type {
 	TimelineToken,
 } from "atom.io"
 import { redo, undo } from "atom.io"
-import { findState } from "atom.io/ephemeral"
-import type { Timeline } from "atom.io/internal"
+import { findInStore, type Timeline } from "atom.io/internal"
 import { useI, useO } from "atom.io/react"
-import { type FC, Fragment } from "react"
+import { type FC, Fragment, useContext } from "react"
 
 import { button } from "./Button"
-import { timelineIndex, timelineSelectors, viewIsOpenAtoms } from "./store"
+import { DevtoolsContext } from "./store"
 import { article } from "./Updates"
 
 export const YouAreHere: FC = () => {
@@ -86,7 +85,11 @@ export const TimelineLog: FC<{
 }
 
 export const TimelineIndex: FC = () => {
+	const { timelineIndex, timelineSelectors, viewIsOpenAtoms, store } =
+		useContext(DevtoolsContext)
+
 	const tokenIds = useO(timelineIndex)
+
 	return (
 		<article className="index timeline_index" data-testid="timeline-index">
 			{tokenIds
@@ -96,8 +99,8 @@ export const TimelineIndex: FC = () => {
 						<TimelineLog
 							key={token.key}
 							token={token}
-							isOpenState={findState(viewIsOpenAtoms, token.key)}
-							timelineState={findState(timelineSelectors, token.key)}
+							isOpenState={findInStore(store, viewIsOpenAtoms, token.key)}
+							timelineState={findInStore(store, timelineSelectors, token.key)}
 						/>
 					)
 				})}

package/react-devtools/src/TransactionIndex.tsx

@@ -4,17 +4,12 @@ import type {
 	TransactionToken,
 	TransactionUpdate,
 } from "atom.io"
-import { findState } from "atom.io/ephemeral"
-import type { Func } from "atom.io/internal"
+import { findInStore, type Func } from "atom.io/internal"
 import { useI, useO } from "atom.io/react"
-import type { FC } from "react"
+import { type FC, useContext } from "react"
 
 import { button } from "./Button"
-import {
-	transactionIndex,
-	transactionLogSelectors,
-	viewIsOpenAtoms,
-} from "./store"
+import { DevtoolsContext } from "./store"
 import { article } from "./Updates"
 
 export const TransactionLog: FC<{
@@ -58,18 +53,21 @@ export const TransactionLog: FC<{
 }
 
 export const TransactionIndex: FC = () => {
+	const { transactionIndex, transactionLogSelectors, viewIsOpenAtoms, store } =
+		useContext(DevtoolsContext)
+
 	const tokenIds = useO(transactionIndex)
 	return (
 		<article className="index transaction_index" data-testid="transaction-index">
 			{tokenIds
-				.filter((token) => !token.key.startsWith(`👁‍🗨`))
+				.filter((token) => !token.key.startsWith(`🔍`))
 				.map((token) => {
 					return (
 						<TransactionLog
 							key={token.key}
 							token={token}
-							isOpenState={findState(viewIsOpenAtoms, token.key)}
-							logState={findState(transactionLogSelectors, token.key)}
+							isOpenState={findInStore(store, viewIsOpenAtoms, token.key)}
+							logState={findInStore(store, transactionLogSelectors, token.key)}
 						/>
 					)
 				})}

package/react-devtools/src/elastic-input/ElasticInput.tsx

@@ -0,0 +1,86 @@
+import type {
+	DetailedHTMLProps,
+	ForwardRefExoticComponent,
+	InputHTMLAttributes,
+} from "react"
+import {
+	forwardRef,
+	useImperativeHandle,
+	useLayoutEffect,
+	useRef,
+	useState,
+} from "react"
+
+export type ElasticInputProps = DetailedHTMLProps<
+	InputHTMLAttributes<HTMLInputElement>,
+	HTMLInputElement
+> & {
+	widthPadding?: number
+}
+
+export const ElasticInput: ForwardRefExoticComponent<
+	DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
+		widthPadding?: number
+	}
+> = forwardRef(function ElasticInputFC(props, ref) {
+	const inputRef = useRef<HTMLInputElement>(null)
+	const spanRef = useRef<HTMLSpanElement>(null)
+	const [inputWidth, setInputWidth] = useState(`auto`)
+
+	useImperativeHandle<Partial<HTMLInputElement>, Partial<HTMLInputElement>>(
+		ref,
+		() => ({
+			focus: () => {
+				inputRef.current?.focus()
+			},
+		}),
+	)
+
+	const extraWidth = props.type === `number` ? 15 : 0
+
+	useLayoutEffect(() => {
+		if (spanRef.current) {
+			setInputWidth(`${spanRef.current.offsetWidth + extraWidth}px`)
+			const interval = setInterval(() => {
+				if (spanRef.current) {
+					setInputWidth(`${spanRef.current.offsetWidth + extraWidth}px`)
+				}
+			}, 1000)
+			return () => {
+				clearInterval(interval)
+			}
+		}
+	}, [inputRef.current?.value, props.value])
+
+	return (
+		<div style={{ display: `inline-block`, position: `relative` }}>
+			<input
+				{...props}
+				ref={inputRef}
+				style={{
+					padding: 0,
+					borderRadius: 0,
+					border: `none`,
+					fontFamily: `inherit`,
+					fontSize: `inherit`,
+					width: inputWidth,
+					...props.style,
+				}}
+			/>
+			<span
+				ref={spanRef}
+				style={{
+					padding: props.style?.padding,
+					position: `absolute`,
+					visibility: `hidden`,
+					// color: `red`,
+					whiteSpace: `pre`,
+					fontFamily: props.style?.fontFamily ?? `inherit`,
+					fontSize: props.style?.fontSize ?? `inherit`,
+				}}
+			>
+				{props.value}
+			</span>
+		</div>
+	)
+})

package/react-devtools/src/elastic-input/NumberInput.tsx

@@ -0,0 +1,199 @@
+import type { FC } from "react"
+import { useId, useRef, useState } from "react"
+
+import { ElasticInput } from "."
+
+export function clampInto(min: number, max: number) {
+	return (value: number): number =>
+		value < min ? min : value > max ? max : value
+}
+function round(value: number, decimalPlaces?: number): number {
+	if (decimalPlaces === undefined) return value
+	const factor = 10 ** decimalPlaces
+	return Math.round(value * factor) / factor
+}
+function roundAndPad(value: number, decimalPlaces?: number): string {
+	const roundedValue = round(value, decimalPlaces)
+	const paddedString = roundedValue.toFixed(decimalPlaces)
+	return paddedString
+}
+
+export const VALID_NON_NUMBERS = [``, `-`, `.`, `-.`] as const
+export type ValidNonNumber = (typeof VALID_NON_NUMBERS)[number]
+export const isValidNonNumber = (input: string): input is ValidNonNumber =>
+	VALID_NON_NUMBERS.includes(input as ValidNonNumber)
+export const VALID_NON_NUMBER_INTERPRETATIONS: Readonly<
+	Record<ValidNonNumber, number | null>
+> = {
+	"": null,
+	"-": 0,
+	".": 0,
+	"-.": 0,
+} as const
+export type DecimalInProgress = `${number | ``}.${number}`
+export const isDecimalInProgress = (input: string): input is DecimalInProgress =>
+	input === `0` || (!Number.isNaN(Number(input)) && input.includes(`.`))
+
+const textToValue = (input: string, allowDecimal: boolean): number | null => {
+	if (isValidNonNumber(input)) return VALID_NON_NUMBER_INTERPRETATIONS[input]
+	return allowDecimal
+		? Number.parseFloat(input)
+		: Math.round(Number.parseFloat(input))
+}
+
+export type NumberConstraints = {
+	max: number
+	min: number
+	decimalPlaces: number
+	nullable: boolean
+}
+export const DEFAULT_NUMBER_CONSTRAINTS: NumberConstraints = {
+	max: Number.POSITIVE_INFINITY,
+	min: Number.NEGATIVE_INFINITY,
+	decimalPlaces: 100,
+	nullable: true,
+}
+
+const initRefinery =
+	<Constraints extends NumberConstraints>(
+		constraints: { [K in keyof Constraints]?: Constraints[K] | undefined },
+	) =>
+	(
+		input: number | null,
+	): Constraints extends { nullable: true | undefined }
+		? number | null
+		: number => {
+		if (input === null && constraints.nullable === true) {
+			return null as Constraints extends { nullable: true }
+				? number | null
+				: number
+		}
+		const { max, min, decimalPlaces } = {
+			...DEFAULT_NUMBER_CONSTRAINTS,
+			...constraints,
+		}
+		let constrained = clampInto(min, max)(input ?? 0)
+		if (decimalPlaces) {
+			constrained = round(constrained, decimalPlaces)
+		}
+		return constrained
+	}
+
+const valueToText = (numericValue: number | null): string => {
+	if (numericValue === null || numericValue === undefined) {
+		return ``
+	}
+	return numericValue.toString()
+}
+
+type NumberInputProps = Partial<NumberConstraints> & {
+	autoSize?: boolean
+	disabled?: boolean
+	id?: string
+	label?: string
+	name?: string
+	onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
+	onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
+	placeholder?: string
+	set?: ((newValue: number | null) => void) | undefined
+	testid?: string
+	value?: number | null
+}
+
+export const NumberInput: FC<NumberInputProps> = ({
+	autoSize = false,
+	decimalPlaces,
+	disabled = false,
+	label,
+	max,
+	min,
+	name,
+	onChange,
+	onClick,
+	placeholder = ``,
+	set = () => null,
+	testid,
+	value = null,
+}) => {
+	const id = useId()
+	const [temporaryEntry, setTemporaryEntry] = useState<
+		DecimalInProgress | ValidNonNumber | null
+	>(null)
+	const userHasMadeDeliberateChange = useRef<boolean>(false)
+
+	const refine = initRefinery({ max, min, decimalPlaces, nullable: true })
+
+	const allowDecimal = decimalPlaces === undefined || decimalPlaces > 0
+
+	const handleBlur = () => {
+		if (userHasMadeDeliberateChange.current) {
+			set(refine(value ?? null))
+			setTemporaryEntry(null)
+		}
+		userHasMadeDeliberateChange.current = false
+	}
+
+	const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+		if (onChange) onChange(event)
+		if (set === undefined) return
+		userHasMadeDeliberateChange.current = true
+		const input = event.target.value
+		if (isValidNonNumber(input) || isDecimalInProgress(input)) {
+			setTemporaryEntry(input)
+			const textInterpretation = isDecimalInProgress(input)
+				? input
+				: min?.toString() ?? `0`
+			const newValue = textToValue(textInterpretation, allowDecimal)
+			set(refine(newValue))
+			return
+		}
+		setTemporaryEntry(null)
+		const inputIsNumeric =
+			(!Number.isNaN(Number(input)) && !input.includes(` `)) ||
+			(allowDecimal && input === `.`) ||
+			(allowDecimal && input === `-.`) ||
+			input === `` ||
+			input === `-`
+		const numericValue = textToValue(input, allowDecimal)
+
+		if (inputIsNumeric) {
+			set(refine(numericValue))
+		}
+	}
+
+	const displayValue =
+		temporaryEntry ?? valueToText(value ? refine(value) : value)
+
+	return (
+		<span>
+			{label && <label htmlFor={id}>{label}</label>}
+			{autoSize ? (
+				<ElasticInput
+					type="text"
+					value={displayValue}
+					placeholder={placeholder ?? `-`}
+					onChange={handleChange}
+					onBlur={handleBlur}
+					disabled={disabled}
+					name={name ?? id}
+					id={id}
+					onClick={onClick}
+					data-testid={testid}
+				/>
+			) : (
+				<input
+					type="text"
+					value={displayValue}
+					placeholder={placeholder ?? `-`}
+					onChange={handleChange}
+					onBlur={handleBlur}
+					disabled={disabled}
+					name={name ?? id}
+					id={id}
+					onClick={onClick}
+					data-testid={testid}
+				/>
+			)}
+		</span>
+	)
+}

package/react-devtools/src/elastic-input/TextInput.tsx

@@ -0,0 +1,47 @@
+import type { FC } from "react"
+
+import { ElasticInput } from "."
+
+export type TextInputProps = {
+	value: string
+	set?: ((value: string) => void) | undefined
+	label?: string
+	placeholder?: string
+	autoSize?: boolean
+	readOnly?: boolean
+	testid?: string
+}
+
+export const TextInput: FC<TextInputProps> = ({
+	value,
+	set,
+	label,
+	placeholder,
+	autoSize = false,
+	testid,
+}) => {
+	return (
+		<span>
+			<label>{label}</label>
+			{autoSize ? (
+				<ElasticInput
+					type="text"
+					value={value}
+					onChange={(e) => set?.(e.target.value)}
+					disabled={set === undefined}
+					placeholder={placeholder}
+					data-testid={testid}
+				/>
+			) : (
+				<input
+					type="text"
+					value={value}
+					onChange={(e) => set?.(e.target.value)}
+					disabled={set === undefined}
+					placeholder={placeholder}
+					data-testid={testid}
+				/>
+			)}
+		</span>
+	)
+}

package/react-devtools/src/elastic-input/index.ts

@@ -0,0 +1,3 @@
+export * from "./ElasticInput"
+export * from "./NumberInput"
+export * from "./TextInput"

package/react-devtools/src/error-boundary/DefaultFallback.tsx

@@ -0,0 +1,49 @@
+import type { ErrorInfo, FC } from "react"
+
+export type FallbackProps = {
+	error?: Error | string | undefined
+	errorInfo?: ErrorInfo | undefined
+}
+
+export const DefaultFallback: FC<FallbackProps> = ({ error, errorInfo }) => {
+	const component = errorInfo?.componentStack?.split(` `).filter(Boolean)[2]
+	const message =
+		error?.toString() ?? errorInfo?.componentStack ?? `Unknown error`
+	return (
+		<div
+			data-testid="error-boundary"
+			style={{
+				flex: `1`,
+				background: `black`,
+				backgroundImage: `url(./src/assets/kablooey.gif)`,
+				backgroundPosition: `center`,
+				// backgroundRepeat: `no-repeat`,
+				backgroundSize: `overlay`,
+			}}
+		>
+			{/* <img src="./src/assets/kablooey.gif" alt="error" /> */}
+			<div
+				style={{
+					margin: `50px`,
+					marginTop: `0`,
+					padding: `50px`,
+					border: `1px solid dashed`,
+				}}
+			>
+				<span
+					style={{
+						background: `black`,
+						color: `white`,
+						padding: 10,
+						paddingTop: 5,
+					}}
+				>
+					{`⚠️ `}
+					<span style={{ color: `#fc0`, fontWeight: 700 }}>{component}</span>
+					{` ⚠️ `}
+					{message}
+				</span>
+			</div>
+		</div>
+	)
+}