atom.io 0.6.8 → 0.6.9

package/src/react-devtools/devtools.scss

@@ -1,310 +0,0 @@
-main.atom_io_devtools {
-  --fg-color: #eee;
-  --bg-color: #111;
-  --bg-tint1: #222;
-  --fg-border: 1px solid var(--fg-color);
-  @media (prefers-color-scheme: light) {
-    --fg-color: #444;
-    --bg-color: #ddd;
-    --bg-tint1: #e3e3e3;
-  }
-  box-sizing: border-box;
-  color: var(--fg-color);
-  background-color: var(--bg-color);
-  border: 2px solid var(--fg-color);
-  position: fixed;
-  right: 0;
-  bottom: 0;
-  height: 100%;
-  display: flex;
-  flex-flow: column;
-  max-height: 800px;
-  width: 100%;
-  max-width: 500px;
-  overflow-y: scroll;
-  * {
-    font-size: 16px;
-    font-family: theia, monospace;
-  }
-  > header {
-    padding: 5px;
-    padding-left: 10px;
-    padding-bottom: 0;
-    display: flex;
-    justify-content: space-between;
-    h1 {
-      font-size: inherit;
-      margin: 0;
-      font-size: 24px;
-      font-family: charter;
-    }
-    nav {
-      display: flex;
-      flex-flow: row nowrap;
-      button {
-        cursor: pointer;
-        background: none;
-        border: none;
-        padding: none;
-        margin-bottom: -2px;
-        z-index: 1000;
-        &:disabled {
-          cursor: default;
-          background-color: var(--bg-tint1);
-          color: var(--fg-color);
-          border: var(--fg-border);
-          border-bottom: none;
-        }
-      }
-    }
-  }
-  > main {
-    background: var(--bg-tint1);
-  }
-  main {
-    overflow-y: scroll;
-    flex-grow: 1;
-    display: flex;
-    flex-flow: column;
-    gap: 0;
-    article.index {
-      .node .node {
-        border-right: var(--fg-border);
-        padding-right: 0;
-        background: #fff3;
-      }
-      .node > .node {
-        margin: 5px 0;
-        margin-left: 12px;
-        border-left: var(--fg-border);
-      }
-      .node {
-        border-top: var(--fg-border);
-        overflow-x: scroll;
-        padding: 5px;
-        &:last-of-type {
-          border-bottom: var(--fg-border);
-        }
-        &.transaction_update {
-          padding: 0;
-        }
-        header {
-          display: flex;
-          flex-flow: row;
-          gap: 5px;
-          position: sticky;
-          z-index: 999;
-          top: 0;
-          button.carat {
-            cursor: pointer;
-            background: none;
-            border: none;
-            width: 20px;
-            &.open {
-              transform: rotate(90deg);
-            }
-            &:disabled {
-              cursor: default;
-            }
-          }
-          label {
-            display: flex;
-            flex-flow: row;
-            gap: 5px;
-            cursor: help;
-            h2 {
-              display: inline-block;
-              margin: 0;
-            }
-            .detail {
-              color: #777;
-              @media (prefers-color-scheme: light) {
-                color: #999;
-              }
-            }
-          }
-        }
-        main {
-          margin-left: 15px;
-        }
-      }
-      section.transaction_log {
-        margin-top: 0;
-        header: {
-          padding: 5px;
-        }
-        main {
-          display: flex;
-          flex-flow: row wrap;
-          gap: 5px;
-          .transaction_update {
-            width: 100%;
-            display: flex;
-            flex-flow: row;
-            align-items: flex-start;
-            justify-content: flex-start;
-            justify-items: flex-start;
-            align-content: flex-start;
-            border-left: var(--fg-border);
-            border-top: var(--fg-border);
-            header {
-              padding: 5px;
-              h4 {
-                margin: 0;
-                padding: 0;
-                font-size: inherit;
-              }
-            }
-            main {
-              margin-left: 0;
-              display: flex;
-              flex-flow: column;
-              gap: 0px;
-              border-left: 1px solid #333;
-              section ~ section {
-                border-top: 1px solid #333;
-              }
-              section {
-                padding: 5px;
-                &.transaction_output {
-                  border-right: none;
-                }
-                &.transaction_impact {
-                  padding: 5px;
-                }
-                margin: 0;
-                article {
-                  border-left: var(--fg-border);
-                  border-right: var(--fg-border);
-                  .summary {
-                    white-space: nowrap;
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-      section.timeline_log {
-        header {
-          display: flex;
-          label {
-            display: flex;
-            width: 100%;
-            flex-grow: 1;
-            .gap {
-              flex-grow: 1;
-            }
-            nav {
-              display: flex;
-              flex-flow: row nowrap;
-              gap: 5px;
-            }
-          }
-        }
-        .timeline_update {
-          padding: 5px;
-          border-left: var(--fg-border);
-          h4 {
-            margin: 0;
-            padding: 0;
-            font-size: inherit;
-          }
-          main {
-            margin: 0;
-            .node.atom_update {
-              border-left: var(--fg-border);
-            }
-          }
-        }
-        .you_are_here {
-          background: var(--fg-color);
-          color: var(--bg-color);
-          text-align: center;
-        }
-      }
-    }
-  }
-  footer {
-    display: flex;
-    justify-content: flex-end;
-    button {
-      cursor: pointer;
-      background: none;
-      border: none;
-      padding: none;
-      position: absolute;
-      right: 0;
-      bottom: 0;
-    }
-  }
-
-  .json_editor {
-    input {
-      font-family: theia;
-      border: none;
-      border-bottom: 1px solid;
-      background: none;
-      &:disabled {
-        border: none;
-      }
-    }
-    button {
-      background: none;
-      margin-left: auto;
-      color: #777;
-      border: none;
-      font-family: theia;
-      font-size: 14px;
-      margin: none;
-      padding: 4px;
-      padding-bottom: 6px;
-      cursor: pointer;
-      &:hover {
-        color: #333;
-        background-color: #aaa;
-      }
-    }
-    select {
-      font-family: theia;
-      font-size: 14px;
-      background: none;
-      border: none;
-      color: #777;
-      @media (prefers-color-scheme: light) {
-        color: #999;
-      }
-    }
-    .json_editor_unofficial {
-      background-color: #777;
-      button {
-        color: #333;
-      }
-    }
-    .json_editor_missing {
-      background-color: #f055;
-    }
-    .json_editor_key {
-      padding-right: 10px;
-      input {
-        color: #999;
-        @media (prefers-color-scheme: light) {
-          color: #777;
-        }
-      }
-    }
-    .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);
-          margin-bottom: 2px;
-        }
-      }
-    }
-  }
-}

package/src/react-devtools/index.ts

@@ -1,72 +0,0 @@
-import { isPlainObject } from "~/packages/anvl/src/object"
-import { Refinery } from "~/packages/anvl/src/refinement/refinery"
-import {
-	diffArray,
-	diffBoolean,
-	diffNumber,
-	diffObject,
-	diffString,
-	Differ,
-} from "~/packages/anvl/src/tree/differ"
-
-import { atom, atomFamily } from ".."
-import { attachIntrospectionStates } from "../introspection"
-import { lazyLocalStorageEffect } from "../web-effects"
-
-export * from "./AtomIODevtools"
-
-export const {
-	atomIndex,
-	selectorIndex,
-	transactionIndex,
-	findTransactionLogState,
-	timelineIndex,
-	findTimelineState,
-} = attachIntrospectionStates()
-
-export const devtoolsAreOpenState = atom<boolean>({
-	key: `👁‍🗨 Devtools Are Open`,
-	default: true,
-	effects: [lazyLocalStorageEffect(`👁‍🗨 Devtools Are Open`)],
-})
-
-type DevtoolsView = `atoms` | `selectors` | `timelines` | `transactions`
-
-export const devtoolsViewSelectionState = atom<DevtoolsView>({
-	key: `👁‍🗨 Devtools View Selection`,
-	default: `atoms`,
-	effects: [lazyLocalStorageEffect(`👁‍🗨 Devtools View`)],
-})
-
-export const devtoolsViewOptionsState = atom<DevtoolsView[]>({
-	key: `👁‍🗨 Devtools View Options`,
-	default: [`atoms`, `selectors`, `transactions`, `timelines`],
-	effects: [lazyLocalStorageEffect(`👁‍🗨 Devtools View Options`)],
-})
-
-export const findViewIsOpenState = atomFamily<boolean, string>({
-	key: `👁‍🗨 Devtools View Is Open`,
-	default: false,
-	effects: (key) => [lazyLocalStorageEffect(key + `:view-is-open`)],
-})
-
-export const primitiveRefinery = new Refinery({
-	number: (input: unknown): input is number => typeof input === `number`,
-	string: (input: unknown): input is string => typeof input === `string`,
-	boolean: (input: unknown): input is boolean => typeof input === `boolean`,
-	null: (input: unknown): input is null => input === null,
-})
-
-export const jsonTreeRefinery = new Refinery({
-	object: isPlainObject,
-	array: (input: unknown): input is unknown[] => Array.isArray(input),
-})
-
-export const prettyJson = new Differ(primitiveRefinery, jsonTreeRefinery, {
-	number: diffNumber,
-	string: diffString,
-	boolean: diffBoolean,
-	null: () => ({ summary: `No Change` }),
-	object: diffObject,
-	array: diffArray,
-})

package/src/react-explorer/AtomIOExplorer.tsx

@@ -1,218 +0,0 @@
-import type { StoreHooks } from "atom.io/react"
-import type { FC, ReactNode } from "react"
-import { useEffect } from "react"
-import { Link, MemoryRouter, useLocation } from "react-router-dom"
-
-import { RecoverableErrorBoundary } from "~/packages/hamr/src/react-error-boundary"
-import type { WC } from "~/packages/hamr/src/react-json-editor"
-
-import { attachExplorerState } from "./explorer-states"
-import { setState } from ".."
-import { runTransaction } from "../transaction"
-
-export type ExplorerOptions = {
-	key: string
-	Components?: {
-		SpaceWrapper: WC
-		CloseSpaceButton: FC<{ onClick: () => void }>
-	}
-	storeHooks: StoreHooks
-}
-
-const DEFAULT_COMPONENTS: ExplorerOptions[`Components`] = {
-	SpaceWrapper: ({ children }) => <div>{children}</div>,
-	CloseSpaceButton: ({ onClick }) => (
-		<button type="button" onClick={onClick}>
-			X
-		</button>
-	),
-}
-
-export const composeExplorer = ({
-	key,
-	Components,
-	storeHooks: { useO, useIO },
-}: ExplorerOptions): ReturnType<typeof attachExplorerState> & {
-	Explorer: FC<{ children: ReactNode }>
-	useSetTitle: (viewId: string) => void
-} => {
-	const { SpaceWrapper, CloseSpaceButton } = {
-		...DEFAULT_COMPONENTS,
-		...Components,
-	}
-
-	const state = attachExplorerState(key)
-
-	const {
-		addSpace,
-		addView,
-		allViewsState,
-		findSpaceFocusedViewState,
-		findSpaceLayoutNode,
-		findSpaceViewsState,
-		findViewFocusedState,
-		findViewState,
-		removeSpace,
-		removeView,
-		spaceLayoutState,
-		viewIndexState,
-	} = state
-
-	const View: FC<{
-		children: ReactNode
-		viewId: string
-	}> = ({ children, viewId }) => {
-		const location = useLocation()
-		const viewState = findViewState(viewId)
-		const [view, setView] = useIO(viewState)
-		useEffect(() => {
-			setView((view) => ({ ...view, location }))
-		}, [location.key])
-		return (
-			<div className="view">
-				<header>
-					<h1>{view.title}</h1>
-					<CloseSpaceButton onClick={() => runTransaction(removeView)(viewId)} />
-				</header>
-				<main>{children}</main>
-				<footer>
-					<nav>
-						{location.pathname.split(`/`).map((pathPiece, idx, array) =>
-							pathPiece === `` && idx === 1 ? null : (
-								<Link
-									to={array.slice(0, idx + 1).join(`/`)}
-									key={`${pathPiece}_${viewId}`}
-								>
-									{idx === 0 ? `home` : pathPiece}/
-								</Link>
-							),
-						)}
-					</nav>
-				</footer>
-			</div>
-		)
-	}
-
-	const Tab: FC<{ viewId: string; spaceId: string }> = ({ viewId, spaceId }) => {
-		const view = useO(findViewState(viewId))
-		const [spaceFocusedView, setSpaceFocusedView] = useIO(
-			findSpaceFocusedViewState(spaceId),
-		)
-		const handleClick = () => setSpaceFocusedView(viewId)
-		return (
-			<div
-				className={`tab ${spaceFocusedView === viewId ? `focused` : ``}`}
-				onClick={handleClick}
-				onKeyUp={handleClick}
-			>
-				{view.title}
-			</div>
-		)
-	}
-
-	const TabBar: FC<{
-		spaceId: string
-		viewIds: string[]
-	}> = ({ spaceId, viewIds }) => {
-		return (
-			<nav className="tab-bar">
-				{viewIds.map((viewId) => (
-					<Tab key={viewId} viewId={viewId} spaceId={spaceId} />
-				))}
-			</nav>
-		)
-	}
-
-	const Space: FC<{
-		children: ReactNode
-		focusedViewId: string
-		spaceId: string
-		viewIds: string[]
-	}> = ({ children, focusedViewId, spaceId, viewIds }) => {
-		const view = useO(findViewState(focusedViewId))
-		return (
-			<div className="space">
-				<RecoverableErrorBoundary>
-					<MemoryRouter
-						initialEntries={view.location ? [view.location.pathname] : []}
-					>
-						<TabBar spaceId={spaceId} viewIds={viewIds} />
-						<View viewId={focusedViewId}>{children}</View>
-					</MemoryRouter>
-				</RecoverableErrorBoundary>
-			</div>
-		)
-	}
-
-	const Spaces: FC<{ children: ReactNode; spaceId?: string }> = ({
-		children,
-		spaceId = `root`,
-	}) => {
-		const spaceLayout = useO(findSpaceLayoutNode(spaceId))
-		const viewIds = useO(findSpaceViewsState(spaceId))
-		const focusedViewId = useO(findSpaceFocusedViewState(spaceId))
-		return (
-			<div className="spaces">
-				{spaceLayout.childSpaceIds.length === 0 ? (
-					focusedViewId ? (
-						<Space
-							focusedViewId={focusedViewId}
-							spaceId={spaceId}
-							viewIds={viewIds}
-						>
-							{children}
-						</Space>
-					) : (
-						`no view`
-					)
-				) : (
-					spaceLayout.childSpaceIds.map((childSpaceId) => (
-						<Spaces key={childSpaceId} spaceId={childSpaceId}>
-							{children}
-						</Spaces>
-					))
-				)}
-				<button
-					type="button"
-					onClick={() => runTransaction(addView)({ spaceId })}
-				>
-					+ View
-				</button>
-				<button
-					type="button"
-					onClick={() => runTransaction(addSpace)({ parentId: spaceId })}
-				>
-					+ Space
-				</button>
-			</div>
-		)
-	}
-
-	const Explorer: FC<{ children: ReactNode }> = ({ children }) => {
-		return <Spaces>{children}</Spaces>
-	}
-
-	const useSetTitle = (title: string): void => {
-		let location: ReturnType<typeof useLocation>
-		try {
-			location = useLocation()
-		} catch (thrown) {
-			console.warn(
-				`Failed to set title to "${title}"; useSetTitle must be called within the children of Explorer`,
-			)
-			return
-		}
-		const views = useO(allViewsState)
-		const locationView = views.find(
-			([, view]) => view.location.key === location.key,
-		)
-		const viewId = locationView?.[0] ?? null
-		useEffect(() => {
-			if (viewId) {
-				setState(findViewState(viewId), (v) => ({ ...v, title }))
-			}
-		}, [viewId])
-	}
-
-	return { Explorer, useSetTitle, ...state }
-}

package/src/react-explorer/explorer-effects.ts

@@ -1,20 +0,0 @@
-import { isArray } from "~/packages/anvl/src/array"
-import { parseJson, stringifyJson } from "~/packages/anvl/src/json"
-
-import { persistAtom } from "../web-effects"
-
-export const persistStringSetAtom = persistAtom<Set<string>>(localStorage)({
-	stringify: (set) => stringifyJson([...set]),
-	parse: (string) => {
-		try {
-			const json = parseJson(string)
-			const array = isArray((v): v is string => typeof v === `string`)(json)
-				? json
-				: []
-			return new Set(array)
-		} catch (thrown) {
-			console.error(`Error parsing spaceIndexState from localStorage`)
-			return new Set()
-		}
-	},
-})