@gjermundgaraba-designs/pixel-paper 0.26.0 → 0.27.0

package/src/{fileTree/fileTree.ts → file-tree/file-tree.ts}

@@ -1,5 +1,15 @@
 import { Button as UiButton } from "@foldkit/ui";
-import { Array, Data, Effect, Match, Option, Queue, Schema, Stream, pipe } from "effect";
+import {
+  Array,
+  Data,
+  Effect,
+  Match,
+  Option,
+  Queue,
+  Schema,
+  Stream,
+  pipe,
+} from "effect";
 import type { Html, HtmlBuilder } from "foldkit/html";
 import { defineMessageUnion } from "foldkit/message";
 import * as Mount from "foldkit/mount";
@@ -12,8 +22,6 @@ import * as Glyph from "../glyph/glyph.ts";
 import type { GlyphName } from "../glyph/glyphs.ts";
 import { isPlain } from "../keys/keys.ts";
 
-// MODEL
-
 /** Schema for a file tree: the folders folded shut, and the item the keyboard was last on,
  *  which is the tree's one stop for Tab. */
 export const Model = Schema.Struct({
@@ -21,9 +29,8 @@ export const Model = Schema.Struct({
   foldedPaths: Schema.Array(Schema.String),
   maybeFocusedPath: Schema.Option(Schema.String),
 });
-export type Model = typeof Model.Type;
 
-// MESSAGE
+export type Model = typeof Model.Type;
 
 /** Union of all Messages a file tree can produce. */
 export const Message = defineMessageUnion({
@@ -33,22 +40,23 @@ export const Message = defineMessageUnion({
   PressedOpenFolderKey: { path: Schema.String },
   PressedCloseFolderKey: { path: Schema.String },
 });
-export type Message = typeof Message.Type;
 
-// OUT MESSAGE
+export type Message = typeof Message.Type;
 
 /** Union of OutMessages a file tree reports: a file was chosen (a press, Enter or Space).
  *  Show it, and pass its path back in as `currentPath`. */
 export const OutMessage = defineMessageUnion({
   OpenedFile: { path: Schema.String },
 });
-export type OutMessage = typeof OutMessage.Type;
 
-// INIT
+export type OutMessage = typeof OutMessage.Type;
 
 /** Configuration for creating a file tree with `init`. `folded` lists the folder paths that
  *  start shut; every other folder starts open. */
-export type InitConfig = Readonly<{ id: string; folded?: ReadonlyArray<string> }>;
+export type InitConfig = Readonly<{
+  id: string;
+  folded?: readonly string[];
+}>;
 
 /** Creates a file tree. */
 export const init = (config: InitConfig): Model => ({
@@ -57,16 +65,12 @@ export const init = (config: InitConfig): Model => ({
   maybeFocusedPath: Option.none(),
 });
 
-// ACCESSORS
-
 /** The file tree's id, unique in the document. */
 export const id = (model: Model): string => model.id;
 
 const isFolderOpen = (model: Model, path: string): boolean =>
   !Array.contains(model.foldedPaths, path);
 
-// UPDATE
-
 const withFolder = (model: Model, path: string, isOpen: boolean): Model =>
   modifyFields(model, {
     foldedPaths: (foldedPaths) =>
@@ -77,17 +81,29 @@ const withFolder = (model: Model, path: string, isOpen: boolean): Model =>
 
 /** Processes a file tree Message and returns the next Model and OutMessage. */
 export const update = (model: Model, message: Message) =>
-  Message.match<Update.ReturnWithOutMessage<Model, Message, OutMessage>>(message, {
-    ClickedFolder: ({ path }) => ({ model: withFolder(model, path, !isFolderOpen(model, path)) }),
-    ClickedFile: ({ path }) => ({ model, outMessage: OutMessage.OpenedFile({ path }) }),
-    FocusedTreeItem: ({ path }) => ({
-      model: modifyFields(model, { maybeFocusedPath: () => Option.some(path) }),
-    }),
-    PressedOpenFolderKey: ({ path }) => ({ model: withFolder(model, path, true) }),
-    PressedCloseFolderKey: ({ path }) => ({ model: withFolder(model, path, false) }),
-  });
-
-// TREE KEYS
+  Message.match<Update.ReturnWithOutMessage<Model, Message, OutMessage>>(
+    message,
+    {
+      ClickedFolder: ({ path }) => ({
+        model: withFolder(model, path, !isFolderOpen(model, path)),
+      }),
+      ClickedFile: ({ path }) => ({
+        model,
+        outMessage: OutMessage.OpenedFile({ path }),
+      }),
+      FocusedTreeItem: ({ path }) => ({
+        model: modifyFields(model, {
+          maybeFocusedPath: () => Option.some(path),
+        }),
+      }),
+      PressedOpenFolderKey: ({ path }) => ({
+        model: withFolder(model, path, true),
+      }),
+      PressedCloseFolderKey: ({ path }) => ({
+        model: withFolder(model, path, false),
+      }),
+    }
+  );
 
 const ITEM_SELECTOR = '[role="treeitem"]';
 const PATH_ATTRIBUTE = "data-path";
@@ -98,73 +114,82 @@ type FoldMessage =
   | typeof Message.PressedOpenFolderKey.Type
   | typeof Message.PressedCloseFolderKey.Type;
 
-// what a key does in the tree: moves focus to an item (whose `focusin` then reports it), or
-// opens or shuts a folder
 type TreeKeyAction = Data.TaggedEnum<{
   MoveFocus: { readonly item: HTMLElement };
   Fold: { readonly message: FoldMessage };
 }>;
+
 const TreeKeyAction = Data.taggedEnum<TreeKeyAction>();
 
-const ownItems = (tree: Element): ReadonlyArray<HTMLElement> =>
+const ownItems = (tree: Element): readonly HTMLElement[] =>
   Array.filter(
     Array.fromIterable(tree.querySelectorAll<HTMLElement>(ITEM_SELECTOR)),
-    (item) => item.closest('[role="tree"]') === tree,
+    (item) => item.closest('[role="tree"]') === tree
   );
 
 const pathOf = (item: Element): Option.Option<string> =>
   Option.fromNullishOr(item.getAttribute(PATH_ATTRIBUTE));
 
-const levelOf = (item: Element): number => Number(item.getAttribute("aria-level") ?? "1");
+const levelOf = (item: Element): number =>
+  Number(item.getAttribute("aria-level") ?? "1");
 
 const nameOf = (item: Element): string =>
   (item.querySelector(".name")?.textContent ?? "").trim().toLowerCase();
 
 const isTypeahead = (event: KeyboardEvent): boolean =>
-  event.key.length === 1 && event.key !== " " && !event.altKey && !event.ctrlKey && !event.metaKey;
-
-const parentItem = (items: ReadonlyArray<HTMLElement>, index: number): Option.Option<HTMLElement> =>
+  event.key.length === 1 &&
+  event.key !== " " &&
+  !event.altKey &&
+  !event.ctrlKey &&
+  !event.metaKey;
+
+const parentItem = (
+  items: readonly HTMLElement[],
+  index: number
+): Option.Option<HTMLElement> =>
   pipe(
     Array.get(items, index),
     Option.flatMap((item) =>
       Array.findLast(
         Array.take(items, index),
-        (candidate) => levelOf(candidate) === levelOf(item) - 1,
-      ),
-    ),
+        (candidate) => levelOf(candidate) === levelOf(item) - 1
+      )
+    )
   );
 
-/** The next visible item after `index` whose name starts with `letter`, wrapping round. */
 const itemStartingWith = (
-  items: ReadonlyArray<HTMLElement>,
+  items: readonly HTMLElement[],
   index: number,
-  letter: string,
+  letter: string
 ): Option.Option<HTMLElement> =>
-  Array.findFirst([...Array.drop(items, index + 1), ...Array.take(items, index + 1)], (item) =>
-    nameOf(item).startsWith(letter.toLowerCase()),
+  Array.findFirst(
+    [...Array.drop(items, index + 1), ...Array.take(items, index + 1)],
+    (item) => nameOf(item).startsWith(letter.toLowerCase())
   );
 
-const moveTo = (maybeItem: Option.Option<HTMLElement>): Option.Option<TreeKeyAction> =>
+const moveTo = (
+  maybeItem: Option.Option<HTMLElement>
+): Option.Option<TreeKeyAction> =>
   Option.map(maybeItem, (item) => TreeKeyAction.MoveFocus({ item }));
 
 const fold = (
   item: HTMLElement,
   isOpen: boolean,
-  toMessage: (path: string) => FoldMessage,
+  toMessage: (path: string) => FoldMessage
 ): Option.Option<TreeKeyAction> =>
   Option.map(
     Option.filter(
       pathOf(item),
-      () => item.getAttribute("aria-expanded") === (isOpen ? "true" : "false"),
+      () => item.getAttribute("aria-expanded") === (isOpen ? "true" : "false")
     ),
-    (path) => TreeKeyAction.Fold({ message: toMessage(path) }),
+    (path) => TreeKeyAction.Fold({ message: toMessage(path) })
   );
 
 const actOnKey = (
-  items: ReadonlyArray<HTMLElement>,
+  items: readonly HTMLElement[],
   index: number,
   item: HTMLElement,
-  key: string,
+  key: string
 ): Option.Option<TreeKeyAction> =>
   Match.value(key).pipe(
     Match.withReturnType<Option.Option<TreeKeyAction>>(),
@@ -180,28 +205,25 @@ const actOnKey = (
             ? moveTo(
                 Option.filter(
                   Array.get(items, index + 1),
-                  (next) => levelOf(next) === levelOf(item) + 1,
-                ),
+                  (next) => levelOf(next) === levelOf(item) + 1
+                )
               )
-            : Option.none(),
-      ),
+            : Option.none()
+      )
     ),
     Match.when("ArrowLeft", () =>
       Option.orElse(
         fold(item, true, (path) => Message.PressedCloseFolderKey({ path })),
-        () => moveTo(parentItem(items, index)),
-      ),
+        () => moveTo(parentItem(items, index))
+      )
     ),
-    Match.orElse(() => Option.none()),
+    Match.orElse(() => Option.none())
   );
 
-/** Reads one keydown in a tree, as the ARIA tree pattern asks: Down and Up move between the
- *  visible items, Home and End go to the ends, Right opens a folder (or steps into an open
- *  one), Left shuts an open folder (or steps out to its folder), and a letter goes to the
- *  next item whose name starts with it. It acts only when the key's target is one of the
- *  tree's own items (`BindTreeKeys` prevents the default only when it acts); a key an IME is
- *  composing or that someone already handled is left alone. */
-const moveInTree = (tree: Element, event: KeyboardEvent): Option.Option<TreeKeyAction> => {
+const moveInTree = (
+  tree: Element,
+  event: KeyboardEvent
+): Option.Option<TreeKeyAction> => {
   if (event.isComposing || event.defaultPrevented) {
     return Option.none();
   }
@@ -215,78 +237,94 @@ const moveInTree = (tree: Element, event: KeyboardEvent): Option.Option<TreeKeyA
         return moveTo(itemStartingWith(items, index, event.key));
       } else if (isPlain(event)) {
         return actOnKey(items, index, item, event.key);
-      } else {
-        return Option.none();
       }
-    }),
+
+      return Option.none();
+    })
   );
 };
 
-// the tree item focus landed on, if focus landed on one: it becomes the tree's Tab stop
 const focusInMessage = (event: Event): Option.Option<FocusMessage> =>
   Option.map(
     Option.flatMap(
       Option.liftPredicate(event.target, (target) => target instanceof Element),
-      (target) => Option.flatMap(Option.fromNullishOr(target.closest(ITEM_SELECTOR)), pathOf),
+      (target) =>
+        Option.flatMap(
+          Option.fromNullishOr(target.closest(ITEM_SELECTOR)),
+          pathOf
+        )
     ),
-    (path) => Message.FocusedTreeItem({ path }),
+    (path) => Message.FocusedTreeItem({ path })
   );
 
 /** The tree's keys (see `moveInTree`), and the item focus lands on (see `focusInMessage`),
  *  which becomes the tree's stop for Tab. A key that moves focus reports nothing itself: the
  *  item's `focusin` does, once. Attached to the tree by `view`. */
 export const BindTreeKeys = Mount.defineStream("BindTreeKeys", {
-  messages: [Message.FocusedTreeItem, Message.PressedOpenFolderKey, Message.PressedCloseFolderKey],
+  messages: [
+    Message.FocusedTreeItem,
+    Message.PressedOpenFolderKey,
+    Message.PressedCloseFolderKey,
+  ],
   execute: ({ element }) =>
-    Stream.callback<FocusMessage | FoldMessage>((queue) =>
-      Effect.gen(function* () {
+    Stream.callback<FocusMessage | FoldMessage>((queue) => {
+      const onFocusIn = (event: Event): void => {
+        const maybeMessage = focusInMessage(event);
+
+        if (Option.isSome(maybeMessage)) {
+          Queue.offerUnsafe(queue, maybeMessage.value);
+        }
+      };
+
+      return Effect.gen(function* () {
         yield* Effect.acquireRelease(
           Effect.sync(() => {
             const onKeyDown = (event: Event): void => {
               const maybeAction = Option.flatMap(
-                Option.liftPredicate(event, (keyEvent) => keyEvent instanceof KeyboardEvent),
-                (keyEvent) => moveInTree(element, keyEvent),
+                Option.liftPredicate(
+                  event,
+                  (keyEvent) => keyEvent instanceof KeyboardEvent
+                ),
+                (keyEvent) => moveInTree(element, keyEvent)
               );
+
               if (Option.isSome(maybeAction)) {
                 event.preventDefault();
                 TreeKeyAction.$match(maybeAction.value, {
-                  MoveFocus: ({ item }) => item.focus(),
+                  MoveFocus: ({ item }) => {
+                    item.focus();
+                  },
                   Fold: ({ message }) => {
                     Queue.offerUnsafe(queue, message);
                   },
                 });
               }
             };
-            const onFocusIn = (event: Event): void => {
-              const maybeMessage = focusInMessage(event);
-              if (Option.isSome(maybeMessage)) {
-                Queue.offerUnsafe(queue, maybeMessage.value);
-              }
-            };
+
             element.addEventListener("keydown", onKeyDown);
             element.addEventListener("focusin", onFocusIn);
-            return { onKeyDown, onFocusIn };
+
+            return { onKeyDown };
           }),
-          ({ onKeyDown, onFocusIn }) =>
+          ({ onKeyDown }) =>
             Effect.sync(() => {
               element.removeEventListener("keydown", onKeyDown);
               element.removeEventListener("focusin", onFocusIn);
-            }),
+            })
         );
+
         return yield* Effect.never;
-      }),
-    ),
+      });
+    }),
 });
 
-// VIEW
-
 /** One file or folder. */
 export type FileNode = Readonly<{
   name: string;
   /** Unique across the tree: what `OpenedFile` reports. */
   path: string;
   /** A folder when present, even if empty. */
-  children?: ReadonlyArray<FileNode>;
+  children?: readonly FileNode[];
   /** Defaults to `page` for a file. */
   glyph?: GlyphName;
   /** A small tag after a file's name: `"main"`, `"new"`. */
@@ -297,24 +335,25 @@ export type FileNode = Readonly<{
 export type ViewInputs = Readonly<{
   /** Names the tree: `"Files in config"`. */
   label: string;
-  nodes: ReadonlyArray<FileNode>;
+  nodes: readonly FileNode[];
   /** The open file, which prints inverted (`aria-current`). */
   currentPath?: string;
 }>;
 
-const visiblePaths = (model: Model, nodes: ReadonlyArray<FileNode>): ReadonlyArray<string> =>
+const visiblePaths = (
+  model: Model,
+  nodes: readonly FileNode[]
+): readonly string[] =>
   Array.flatMap(nodes, (node) =>
     node.children !== undefined && isFolderOpen(model, node.path)
       ? [node.path, ...visiblePaths(model, node.children)]
-      : [node.path],
+      : [node.path]
   );
 
-/** The one item Tab stops on: where the keyboard last was, else the open file, else the
- *  first item, whichever is visible. */
 const tabStop = (
   model: Model,
-  nodes: ReadonlyArray<FileNode>,
-  maybeCurrentPath: Option.Option<string>,
+  nodes: readonly FileNode[],
+  maybeCurrentPath: Option.Option<string>
 ): Option.Option<string> => {
   const visible = visiblePaths(model, nodes);
   const isVisible = (path: string): boolean => Array.contains(visible, path);
@@ -322,11 +361,11 @@ const tabStop = (
   return pipe(
     Option.filter(model.maybeFocusedPath, isVisible),
     Option.orElse(() => Option.filter(maybeCurrentPath, isVisible)),
-    Option.orElse(() => Array.head(visible)),
+    Option.orElse(() => Array.head(visible))
   );
 };
 
-type Level = Readonly<{ level: number; nodes: ReadonlyArray<FileNode> }>;
+type Level = Readonly<{ level: number; nodes: readonly FileNode[] }>;
 
 type RenderContext = Readonly<{
   model: Model;
@@ -335,23 +374,38 @@ type RenderContext = Readonly<{
   h: HtmlBuilder<Message>;
 }>;
 
-const groupId = (model: Model, path: string): string => `${model.id}-group-${path}`;
+const groupId = (model: Model, path: string): string =>
+  `${model.id}-group-${path}`;
 
-const itemAttributes = (context: RenderContext, level: Level, node: FileNode, index: number) => {
+const itemAttributes = (
+  context: RenderContext,
+  level: Level,
+  node: FileNode,
+  index: number
+) => {
   const { h, maybeTabStop } = context;
+
   return [
     h.Role("treeitem"),
     h.AriaLevel(level.level),
     h.AriaSetsize(level.nodes.length),
     h.AriaPosinset(index + 1),
     h.DataAttribute("path", node.path),
-    h.Tabindex(Option.exists(maybeTabStop, (path) => path === node.path) ? 0 : -1),
+    h.Tabindex(
+      Option.exists(maybeTabStop, (path) => path === node.path) ? 0 : -1
+    ),
     h.Class("file"),
   ];
 };
 
-const fileView = (context: RenderContext, level: Level, node: FileNode, index: number): Html => {
+const fileView = (
+  context: RenderContext,
+  level: Level,
+  node: FileNode,
+  index: number
+): Html => {
   const { h, maybeCurrentPath } = context;
+
   return UiButton.view(
     {
       onClick: Message.ClickedFile({ path: node.path }),
@@ -359,17 +413,24 @@ const fileView = (context: RenderContext, level: Level, node: FileNode, index: n
         h.button(
           [
             ...groups.button,
-            ...(Option.contains(maybeCurrentPath, node.path) ? [h.AriaCurrent("true")] : []),
+            ...(Option.contains(maybeCurrentPath, node.path)
+              ? [h.AriaCurrent("true")]
+              : []),
             ...itemAttributes(context, level, node, index),
           ],
           [
-            h.span([h.Class("glyph")], [Glyph.view({ name: node.glyph ?? "page" }, h)]),
+            h.span(
+              [h.Class("glyph")],
+              [Glyph.view({ name: node.glyph ?? "page" }, h)]
+            ),
             h.span([h.Class("name")], [node.name]),
-            ...(node.tag === undefined ? [] : [" ", h.span([h.Class("tag")], [node.tag])]),
-          ],
+            ...(node.tag === undefined
+              ? []
+              : [" ", h.span([h.Class("tag")], [node.tag])]),
+          ]
         ),
     },
-    h,
+    h
   );
 };
 
@@ -378,52 +439,63 @@ const folderView = (
   level: Level,
   node: FileNode,
   index: number,
-  children: ReadonlyArray<FileNode>,
-): ReadonlyArray<Html> => {
+  hasGroup: boolean
+): Html => {
   const { h, model } = context;
   const isOpen = isFolderOpen(model, node.path);
-  const hasGroup = isOpen && Array.isReadonlyArrayNonEmpty(children);
 
-  return [
-    UiButton.view(
-      {
-        onClick: Message.ClickedFolder({ path: node.path }),
-        toView: (groups) =>
-          h.button(
-            [
-              ...groups.button,
-              h.AriaExpanded(isOpen),
-              ...(hasGroup ? [h.AriaOwns(groupId(model, node.path))] : []),
-              ...itemAttributes(context, level, node, index),
-            ],
-            [
-              h.span(
-                [h.Class("glyph")],
-                [Glyph.view({ name: isOpen ? "folder-open" : "folder" }, h)],
-              ),
-              h.span([h.Class("name")], [`${node.name}/`]),
-            ],
-          ),
-      },
-      h,
-    ),
-    ...(hasGroup
-      ? [
-          branchView(context, { level: level.level + 1, nodes: children }, [
-            h.Role("group"),
-            h.Id(groupId(model, node.path)),
-          ]),
-        ]
-      : []),
-  ];
+  return UiButton.view(
+    {
+      onClick: Message.ClickedFolder({ path: node.path }),
+      toView: (groups) =>
+        h.button(
+          [
+            ...groups.button,
+            h.AriaExpanded(isOpen),
+            ...(hasGroup ? [h.AriaOwns(groupId(model, node.path))] : []),
+            ...itemAttributes(context, level, node, index),
+          ],
+          [
+            h.span(
+              [h.Class("glyph")],
+              [Glyph.view({ name: isOpen ? "folder-open" : "folder" }, h)]
+            ),
+            h.span([h.Class("name")], [`${node.name}/`]),
+          ]
+        ),
+    },
+    h
+  );
 };
 
 const branchView = (
   context: RenderContext,
   level: Level,
-  listAttributes: Attributes<Message>,
+  listAttributes: Attributes<Message>
 ): Html => {
-  const { h } = context;
+  const { h, model } = context;
+
+  const folderAndGroup = (
+    node: FileNode,
+    index: number,
+    children: readonly FileNode[]
+  ): readonly Html[] => {
+    const hasGroup =
+      isFolderOpen(model, node.path) && Array.isReadonlyArrayNonEmpty(children);
+
+    return [
+      folderView(context, level, node, index, hasGroup),
+      ...(hasGroup
+        ? [
+            branchView(context, { level: level.level + 1, nodes: children }, [
+              h.Role("group"),
+              h.Id(groupId(model, node.path)),
+            ]),
+          ]
+        : []),
+    ];
+  };
+
   return h.ul(
     listAttributes,
     Array.map(level.nodes, (node, index) =>
@@ -432,9 +504,9 @@ const branchView = (
         [h.Role("none")],
         node.children === undefined
           ? [fileView(context, level, node, index)]
-          : folderView(context, level, node, index, node.children),
-      ),
-    ),
+          : folderAndGroup(node, index, node.children)
+      )
+    )
   );
 };
 
@@ -445,24 +517,27 @@ const branchView = (
  * The tree is one stop for Tab; Down, Up, Home and End move, Right opens and Left shuts a
  * folder (see `moveInTree`), and Enter, Space or a press opens a file or folds a folder.
  */
-export const view = defineView<Model, Message, ViewInputs>((model, viewInputs, h): Html => {
-  const { label, nodes } = viewInputs;
-  const maybeCurrentPath = Option.fromNullishOr(viewInputs.currentPath);
-  const context: RenderContext = {
-    model,
-    maybeCurrentPath,
-    maybeTabStop: tabStop(model, nodes, maybeCurrentPath),
-    h,
-  };
-
-  return h.div(
-    [h.Class("file-tree")],
-    [
-      branchView(context, { level: 1, nodes }, [
-        h.Role("tree"),
-        h.AriaLabel(label),
-        h.OnMount(BindTreeKeys()),
-      ]),
-    ],
-  );
-});
+export const view = defineView<Model, Message, ViewInputs>(
+  (model, viewInputs, h): Html => {
+    const { label, nodes } = viewInputs;
+    const maybeCurrentPath = Option.fromNullishOr(viewInputs.currentPath);
+
+    const context: RenderContext = {
+      model,
+      maybeCurrentPath,
+      maybeTabStop: tabStop(model, nodes, maybeCurrentPath),
+      h,
+    };
+
+    return h.div(
+      [h.Class("file-tree")],
+      [
+        branchView(context, { level: 1, nodes }, [
+          h.Role("tree"),
+          h.AriaLabel(label),
+          h.OnMount(BindTreeKeys()),
+        ]),
+      ]
+    );
+  }
+);

package/src/file-tree/index.ts

@@ -0,0 +1,12 @@
+export {
+  BindTreeKeys,
+  Message,
+  Model,
+  OutMessage,
+  id,
+  init,
+  update,
+  view,
+} from "./file-tree.ts";
+
+export type { FileNode, InitConfig, ViewInputs } from "./file-tree.ts";