atom.io 0.3.0 → 0.4.0

package/src/react-devtools/devtools.scss

@@ -0,0 +1,130 @@
+main.atom_io_devtools {
+  --fg-color: #eee;
+  --bg-color: #111;
+  @media (prefers-color-scheme: light) {
+    --fg-color: #222;
+    --bg-color: #ccc;
+  }
+  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: 460px;
+  overflow-y: scroll;
+  padding: 5px;
+  header {
+    display: flex;
+    justify-content: space-between;
+    h1 {
+      font-size: inherit;
+      margin: 0;
+    }
+  }
+  main {
+    overflow-y: scroll;
+    flex-grow: 1;
+    section {
+      margin-top: 30px;
+      h2 {
+        font-size: inherit;
+        margin: 0;
+      }
+      .node {
+        border: 1px solid var(--fg-color);
+        padding: 5px;
+        margin: 5px;
+        overflow-x: scroll;
+      }
+    }
+  }
+  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-size: 20px;
+      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 {
+      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: 2px solid #333;
+          margin-bottom: 2px;
+        }
+      }
+    }
+  }
+}

package/src/react-devtools/index.ts

@@ -0,0 +1 @@
+export * from "./AtomIODevtools"

package/src/react-explorer/AtomIOExplorer.tsx

@@ -0,0 +1,208 @@
+import type { FC, ReactNode } from "react"
+import { useEffect } from "react"
+
+import { Link, MemoryRouter, useLocation } from "react-router-dom"
+
+import type { composeStoreHooks } from "~/packages/atom.io/src/react"
+import { ErrorBoundary } 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: ReturnType<typeof composeStoreHooks>
+}
+
+const DEFAULT_COMPONENTS: ExplorerOptions[`Components`] = {
+  SpaceWrapper: ({ children }) => <div>{children}</div>,
+  CloseSpaceButton: ({ onClick }) => <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)
+    )
+    return (
+      <div
+        className={`tab ${spaceFocusedView === viewId ? `focused` : ``}`}
+        onClick={() => setSpaceFocusedView(viewId)}
+      >
+        {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">
+        <ErrorBoundary>
+          <MemoryRouter
+            initialEntries={view.location ? [view.location.pathname] : []}
+          >
+            <TabBar spaceId={spaceId} viewIds={viewIds} />
+            <View viewId={focusedViewId}>{children}</View>
+          </MemoryRouter>
+        </ErrorBoundary>
+      </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))
+    console.log({ spaceLayout, viewIds, focusedViewId })
+    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 onClick={() => runTransaction(addView)({ spaceId })}>
+          + View
+        </button>
+        <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

@@ -0,0 +1,20 @@
+import { isString } from "fp-ts/lib/string"
+
+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(isString)(json) ? json : []
+      return new Set(array)
+    } catch (thrown) {
+      console.error(`Error parsing spaceIndexState from localStorage`)
+      return new Set()
+    }
+  },
+})

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

@@ -0,0 +1,224 @@
+import { lastOf } from "~/packages/anvl/src/array"
+import { now } from "~/packages/anvl/src/id"
+import { Join } from "~/packages/anvl/src/join"
+import type { Entries } from "~/packages/anvl/src/object"
+import { cannotExist } from "~/packages/anvl/src/refinement"
+
+import { addToIndex, removeFromIndex } from "."
+import {
+  makeSpaceLayoutNodeFamily,
+  makeSpaceFamily,
+  makeSpaceIndex,
+  makeSpaceLayoutState,
+} from "./space-states"
+import type { View } from "./view-states"
+import {
+  makeViewFocusedFamily,
+  makeViewFamily,
+  makeViewIndex,
+} from "./view-states"
+import type {
+  AtomFamily,
+  AtomToken,
+  ReadonlySelectorFamily,
+  ReadonlySelectorToken,
+  SelectorFamily,
+  TransactionToken,
+  Write,
+} from ".."
+import { selectorFamily, selector, transaction, atom } from ".."
+import { persistAtom } from "../web-effects"
+
+export const makeViewsPerSpaceState = (
+  key: string
+): AtomToken<Join<null, `viewId`, `spaceId`>> =>
+  atom<Join<null, `viewId`, `spaceId`>>({
+    key: `${key}:views_per_space`,
+    default: new Join({ relationType: `1:n` }),
+    effects: [
+      persistAtom<Join<null, `viewId`, `spaceId`>>(localStorage)({
+        stringify: (index) => JSON.stringify(index.toJSON()),
+        parse: (json) =>
+          Join.fromJSON(JSON.parse(json), cannotExist, `viewId`, `spaceId`),
+      })(`${key}:views_per_space`),
+    ],
+  })
+
+export const makeSpaceViewsFamily = (
+  key: string,
+  viewsPerSpaceState: AtomToken<Join>
+): ReadonlySelectorFamily<string[], string> =>
+  selectorFamily<string[], string>({
+    key: `${key}:space_views`,
+    get:
+      (spaceId) =>
+      ({ get }) => {
+        const join = get(viewsPerSpaceState)
+        const viewIds = join.getRelatedIds(spaceId)
+        return viewIds
+      },
+  })
+
+export const makeSpaceFocusedViewFamily = (
+  key: string,
+  findSpaceViewsState: ReadonlySelectorFamily<string[], string>,
+  findViewFocusedState: AtomFamily<number, string>
+): SelectorFamily<string | null, string> =>
+  selectorFamily<string | null, string>({
+    key: `${key}:space_focused_view`,
+    get:
+      (spaceKey) =>
+      ({ get }) => {
+        const views = get(findSpaceViewsState(spaceKey))
+        const viewsLastFocused = views.map((viewKey): [string, number] => [
+          viewKey,
+          get(findViewFocusedState(viewKey)),
+        ])
+        const lastFocused = lastOf(viewsLastFocused.sort((a, b) => b[1] - a[1]))
+        return lastFocused ? lastFocused[0] : null
+      },
+    set:
+      (spaceKey) =>
+      ({ get, set }, viewKey) => {
+        if (viewKey === null) {
+          return
+        }
+        const views = get(findSpaceViewsState(spaceKey))
+        if (views.includes(viewKey)) {
+          set(findViewFocusedState(viewKey), Date.now())
+        } else {
+          console.warn(`View ${viewKey} not found in space ${spaceKey}`)
+        }
+      },
+  })
+
+type AddViewOptions = { spaceId?: string; path?: string }
+type SplitSpaceOptions = { parentId?: string }
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export const attachExplorerState = (key: string) => {
+  const findSpaceState = makeSpaceFamily(key)
+  const findViewState = makeViewFamily(key)
+  const findViewFocusedState = makeViewFocusedFamily(key)
+  const spaceIndexState = makeSpaceIndex(key)
+  const spaceLayoutState = makeSpaceLayoutState(key)
+  const viewIndexState = makeViewIndex(key)
+  const viewsPerSpaceState = makeViewsPerSpaceState(key)
+
+  const findSpaceLayoutNode = makeSpaceLayoutNodeFamily(key, spaceLayoutState)
+  const findSpaceViewsState = makeSpaceViewsFamily(key, viewsPerSpaceState)
+  const findSpaceFocusedViewState = makeSpaceFocusedViewFamily(
+    key,
+    findSpaceViewsState,
+    findViewFocusedState
+  )
+
+  const allViewsState = selector<Entries<string, View>>({
+    key: `${key}:all_views`,
+    get: ({ get }) => {
+      const viewIndex = get(viewIndexState)
+      return [...viewIndex].map((id) => [id, get(findViewState(id))])
+    },
+  })
+
+  const writeOperationAddSpace: Write<
+    (options?: SplitSpaceOptions) => string
+  > = (transactors, { parentId = `root` } = {}) => {
+    const { set } = transactors
+    const key = `s-${now()}`
+    addToIndex(transactors, { indexAtom: spaceIndexState, id: key })
+    set(spaceLayoutState, (current) =>
+      current.set({ parent: `parent:${parentId}`, child: key }, { size: 1 })
+    )
+    set(findSpaceState(key), 1)
+    return key
+  }
+
+  const writeOperationRemoveSpace: Write<(id: string) => void> = (
+    transactors,
+    id
+  ) => {
+    removeFromIndex(transactors, { indexAtom: spaceIndexState, id })
+    transactors.set(findSpaceState(id), null)
+  }
+
+  const writeOperationAddView: Write<(options?: AddViewOptions) => void> = (
+    transactors,
+    { spaceId: maybeSpaceId, path } = {}
+  ) => {
+    const { get, set } = transactors
+    const id = `v-${now()}`
+
+    addToIndex(transactors, { indexAtom: viewIndexState, id })
+    set(
+      findViewState(id),
+      (current): View => ({
+        ...current,
+        location: {
+          ...current.location,
+          pathname: path ?? `/`,
+        },
+      })
+    )
+    const spaceId =
+      maybeSpaceId ??
+      lastOf([...get(spaceIndexState)]) ??
+      writeOperationAddSpace(transactors)
+    set(findViewFocusedState(id), Date.now())
+
+    set(viewsPerSpaceState, (current) => current.set({ spaceId, viewId: id }))
+    set(findViewFocusedState(id), Date.now())
+  }
+
+  const writeOperationRemoveView: Write<(viewId: string) => void> = (
+    transactors,
+    viewId
+  ) => {
+    const { set } = transactors
+    removeFromIndex(transactors, { indexAtom: viewIndexState, id: viewId })
+    set(viewsPerSpaceState, (current) => current.remove({ viewId }))
+    set(findViewState(viewId), null)
+  }
+
+  const addView = transaction<(options?: AddViewOptions) => void>({
+    key: `${key}:add_view`,
+    do: writeOperationAddView,
+  })
+
+  const removeView = transaction({
+    key: `${key}:remove_view`,
+    do: writeOperationRemoveView,
+  })
+
+  const addSpace = transaction({
+    key: `${key}:add_space`,
+    do: writeOperationAddSpace,
+  })
+
+  const removeSpace = transaction({
+    key: `${key}:remove_space`,
+    do: writeOperationRemoveSpace,
+  })
+
+  return {
+    addSpace,
+    addView,
+    allViewsState,
+    findSpaceLayoutNode,
+    findSpaceFocusedViewState,
+    findSpaceState,
+    findSpaceViewsState,
+    findViewState,
+    findViewFocusedState,
+    removeSpace,
+    removeView,
+    spaceIndexState,
+    spaceLayoutState,
+    viewIndexState,
+    viewsPerSpaceState,
+    writeOperationAddSpace,
+    writeOperationAddView,
+    writeOperationRemoveSpace,
+    writeOperationRemoveView,
+  }
+}

package/src/react-explorer/index.ts

@@ -0,0 +1,23 @@
+import type { AtomToken, Write } from ".."
+
+export * from "./AtomIOExplorer"
+
+export type AtomicIndexOptions = {
+  indexAtom: AtomToken<Set<string>>
+  id: string
+}
+
+export const addToIndex: Write<(options: AtomicIndexOptions) => void> = (
+  { set },
+  { indexAtom, id }
+): void => set(indexAtom, (currentSet) => new Set(currentSet).add(id))
+
+export const removeFromIndex: Write<(options: AtomicIndexOptions) => void> = (
+  { set },
+  { indexAtom, id }
+): void =>
+  set(indexAtom, (currentSet) => {
+    const newSet = new Set(currentSet)
+    newSet.delete(id)
+    return newSet
+  })

package/src/react-explorer/space-states.ts

@@ -0,0 +1,73 @@
+import { isNumber } from "fp-ts/lib/number"
+
+import { Join } from "~/packages/anvl/src/join"
+import { parseJson, stringifyJson } from "~/packages/anvl/src/json"
+import { hasExactProperties } from "~/packages/anvl/src/object"
+
+import { persistStringSetAtom } from "./explorer-effects"
+import type { AtomToken, ReadonlySelectorFamily, SelectorFamily } from ".."
+import { selectorFamily } from ".."
+import type { AtomFamily } from "../atom"
+import { atom, atomFamily } from "../atom"
+import { lazyLocalStorageEffect, persistAtom } from "../web-effects"
+
+export const makeSpaceIndex = (key: string): AtomToken<Set<string>> =>
+  atom<Set<string>>({
+    key: `${key}:space_index`,
+    default: new Set([`root`]),
+    effects: [persistStringSetAtom(`${key}:space_index`)],
+  })
+
+export const makeSpaceLayoutState = (
+  key: string
+): AtomToken<Join<{ size: number }, `parent`, `child`>> =>
+  atom({
+    key: `${key}:space_layout`,
+    default: new Join({ relationType: `1:n` }),
+    effects: [
+      persistAtom<Join<{ size: number }, `parent`, `child`>>(localStorage)({
+        stringify: (join) => stringifyJson(join.toJSON()),
+        parse: (string) => {
+          try {
+            const json = parseJson(string)
+            const join = Join.fromJSON(
+              json,
+              hasExactProperties({ size: isNumber }),
+              `parent`,
+              `child`
+            )
+            return join
+          } catch (thrown) {
+            console.error(`Error parsing spaceLayoutState from localStorage`)
+            return new Join({ relationType: `1:n` })
+          }
+        },
+      })(`${key}:space_layout`),
+    ],
+  })
+
+export const makeSpaceLayoutNodeFamily = (
+  key: string,
+  spaceLayoutState: AtomToken<Join<{ size: number }>>
+): ReadonlySelectorFamily<{ childSpaceIds: string[]; size: number }, string> =>
+  selectorFamily<{ childSpaceIds: string[]; size: number }, string>({
+    key: `${key}:explorer_space`,
+    get:
+      (me) =>
+      ({ get }) => {
+        const join = get(spaceLayoutState)
+        const myFollowers = join.getRelatedIds(`parent:${me}`)
+        const myLeader = join.getRelatedId(me)
+        const { size } = myLeader
+          ? join.getContent(myLeader, me) ?? { size: NaN }
+          : { size: NaN }
+        return { childSpaceIds: myFollowers, size }
+      },
+  })
+
+export const makeSpaceFamily = (key: string): AtomFamily<number, string> =>
+  atomFamily<number, string>({
+    key: `${key}:space`,
+    default: 1,
+    effects: (subKey) => [lazyLocalStorageEffect(`${key}:${subKey}`)],
+  })