@ifloppy/maxcraftmc-ui-svelte 0.1.0

package/src/TreeView/TreeView.svelte

@@ -0,0 +1,266 @@
+<script context="module">
+  /**
+   * Depth-first search to find a node by id; returns an array
+   * of nodes from the initial node to the matching leaf.
+   * @param {TreeNode} node
+   * @param {TreeNodeId} id
+   * @returns {null | TreeNode[]}
+   */
+  function findNodeById(node, id) {
+    if (node === null) return null;
+    if (node.id === id) return [node];
+    if (!Array.isArray(node.nodes)) {
+      return null;
+    }
+
+    for (const child of node.nodes) {
+      const nodes = findNodeById(child, id);
+
+      if (Array.isArray(nodes)) {
+        nodes.unshift(node);
+        return nodes;
+      }
+    }
+
+    return null;
+  }
+</script>
+
+<script>
+  /**
+   * @typedef {string | number} TreeNodeId
+   * @typedef {{ id: TreeNodeId; text: any; icon?: any; disabled?: boolean; nodes?: TreeNode[]; }} TreeNode
+   * @slot {{ node: { id: TreeNodeId; text: string; expanded: boolean, leaf: boolean; disabled: boolean; selected: boolean; } }}
+   * @event {TreeNode & { expanded: boolean; leaf: boolean; }} select
+   * @event {TreeNode & { expanded: boolean; leaf: boolean; }} toggle
+   * @event {TreeNode & { expanded: boolean; leaf: boolean; }} focus
+   */
+
+  /**
+   * Provide an array of nodes to render
+   * @type {Array<TreeNode>}
+   */
+  export let nodes = [];
+
+  /**
+   * Set the current active node id
+   * Only one node can be active
+   * @type {TreeNodeId}
+   */
+  export let activeId = "";
+
+  /**
+   * Set the node ids to be selected
+   * @type {ReadonlyArray<TreeNodeId>}
+   */
+  export let selectedIds = [];
+
+  /**
+   * Set the node ids to be expanded
+   * @type {ReadonlyArray<TreeNodeId>}
+   */
+  export let expandedIds = [];
+
+  /**
+   * Specify the TreeView size
+   * @type {"default" | "compact"}
+   */
+  export let size = "default";
+
+  /** Specify the label text */
+  export let labelText = "";
+
+  /** Set to `true` to visually hide the label text */
+  export let hideLabel = false;
+
+  /**
+   * Programmatically expand all nodes
+   * @type {() => void}
+   */
+  export function expandAll() {
+    expandedIds = [...nodeIds];
+  }
+
+  /**
+   * Programmatically collapse all nodes
+   * @type {() => void}
+   */
+  export function collapseAll() {
+    expandedIds = [];
+  }
+
+  /**
+   * Programmatically expand a subset of nodes.
+   * Expands all nodes if no argument is provided
+   * @type {(filterId?: (node: TreeNode) => boolean) => void}
+   */
+  export function expandNodes(filterNode = (node) => false) {
+    expandedIds = flattenedNodes
+      .filter(
+        (node) =>
+          filterNode(node) ||
+          node.nodes?.some((child) => filterNode(child) && child.nodes),
+      )
+      .map((node) => node.id);
+  }
+
+  /**
+   * Programmatically collapse a subset of nodes.
+   * Collapses all nodes if no argument is provided
+   * @type {(filterId?: (node: TreeNode) => boolean) => void}
+   */
+  export function collapseNodes(filterNode = (node) => true) {
+    expandedIds = flattenedNodes
+      .filter((node) => expandedIds.includes(node.id) && !filterNode(node))
+      .map((node) => node.id);
+  }
+
+  /**
+   * Programmatically show a node by `id`.
+   * The matching node will be expanded, selected, and focused
+   * @type {(id: TreeNodeId) => void}
+   */
+  export function showNode(id) {
+    for (const child of nodes) {
+      const nodes = findNodeById(child, id);
+
+      if (nodes) {
+        const ids = nodes.map((node) => node.id);
+        const nodeIds = new Set(ids);
+
+        expandNodes((node) => nodeIds.has(node.id));
+
+        const lastId = ids[ids.length - 1];
+
+        activeId = lastId;
+        selectedIds = [lastId];
+
+        tick().then(() => {
+          ref?.querySelector(`[id="${lastId}"]`)?.focus();
+        });
+
+        break;
+      }
+    }
+  }
+
+  import { createEventDispatcher, setContext, onMount, tick } from "svelte";
+  import { writable } from "svelte/store";
+  import TreeViewNodeList from "./TreeViewNodeList.svelte";
+
+  const dispatch = createEventDispatcher();
+  const labelId = `label-${Math.random().toString(36)}`;
+  const activeNodeId = writable(activeId);
+  const selectedNodeIds = writable(selectedIds);
+  const expandedNodeIds = writable(expandedIds);
+
+  let ref = null;
+  let treeWalker = null;
+
+  setContext("TreeView", {
+    activeNodeId,
+    selectedNodeIds,
+    expandedNodeIds,
+    clickNode: (node) => {
+      activeId = node.id;
+      selectedIds = [node.id];
+      dispatch("select", node);
+    },
+    selectNode: (node) => {
+      selectedIds = [node.id];
+    },
+    expandNode: (node, expanded) => {
+      if (expanded) {
+        expandedIds = [...expandedIds, node.id];
+      } else {
+        expandedIds = expandedIds.filter((_id) => _id !== node.id);
+      }
+    },
+    focusNode: (node) => dispatch("focus", node),
+    toggleNode: (node) => dispatch("toggle", node),
+  });
+
+  function handleKeyDown(e) {
+    if (e.key === "ArrowUp" || e.key === "ArrowDown") e.preventDefault();
+
+    treeWalker.currentNode = e.target;
+
+    let node = null;
+
+    if (e.key === "ArrowUp") node = treeWalker.previousNode();
+    if (e.key === "ArrowDown") node = treeWalker.nextNode();
+    if (node && node !== e.target) {
+      node.tabIndex = "0";
+      node.focus();
+    }
+  }
+
+  onMount(() => {
+    const firstFocusableNode = ref.querySelector(
+      "li.bx--tree-node:not(.bx--tree-node--disabled)",
+    );
+
+    if (firstFocusableNode != null) {
+      firstFocusableNode.tabIndex = "0";
+    }
+  });
+
+  /**
+   * Recursively flattens a tree of nodes into a single array
+   * @param {Array<TreeNode & { nodes?: TreeNode[] }>} nodes
+   * @returns {Array<TreeNode>}
+   */
+  function traverse(nodes) {
+    return nodes.reduce((acc, node) => {
+      acc.push(node);
+      if (Array.isArray(node.nodes) && node.nodes.length > 0) {
+        acc.push(...traverse(node.nodes));
+      }
+      return acc;
+    }, []);
+  }
+
+  $: flattenedNodes = traverse(nodes);
+  $: nodeIds = flattenedNodes.map((node) => node.id);
+  $: activeNodeId.set(activeId);
+  $: selectedNodeIds.set(selectedIds);
+  $: expandedNodeIds.set(expandedIds);
+  $: if (ref) {
+    treeWalker = document.createTreeWalker(ref, NodeFilter.SHOW_ELEMENT, {
+      acceptNode: (node) => {
+        if (node.classList.contains("bx--tree-node--disabled"))
+          return NodeFilter.FILTER_REJECT;
+        if (node.matches("li.bx--tree-node")) return NodeFilter.FILTER_ACCEPT;
+        return NodeFilter.FILTER_SKIP;
+      },
+    });
+  }
+</script>
+
+{#if !hideLabel}
+  <!-- svelte-ignore a11y-label-has-associated-control -->
+  <label id={labelId} class:bx--label={true}>
+    <slot name="labelText">{labelText}</slot>
+  </label>
+{/if}
+
+<!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
+<ul
+  {...$$restProps}
+  role="tree"
+  bind:this={ref}
+  class:bx--tree={true}
+  class:bx--tree--default={size === "default"}
+  class:bx--tree--compact={size === "compact"}
+  aria-label={hideLabel ? labelText : undefined}
+  aria-labelledby={!hideLabel ? labelId : undefined}
+  aria-multiselectable={selectedIds.length > 1 || undefined}
+  on:keydown
+  on:keydown|stopPropagation={handleKeyDown}
+>
+  <TreeViewNodeList root {nodes} let:node>
+    <slot {node}>
+      {node.text}
+    </slot>
+  </TreeViewNodeList>
+</ul>

package/src/TreeView/TreeViewNode.svelte

@@ -0,0 +1,133 @@
+<script context="module">
+  /**
+   * Computes the depth of a tree leaf node relative to <ul role="tree" />
+   * @param {HTMLLIElement} node
+   * @returns {number} depth
+   */
+  export function computeTreeLeafDepth(node) {
+    let depth = 0;
+
+    if (node == null) return depth;
+
+    let parentNode = node.parentNode;
+
+    while (parentNode != null && parentNode.getAttribute("role") !== "tree") {
+      parentNode = parentNode.parentNode;
+      if (parentNode.tagName === "LI") depth++;
+    }
+
+    return depth;
+  }
+
+  /**
+   * Finds the nearest parent tree node
+   * @param {HTMLElement} node
+   * @returns {null | HTMLElement}
+   */
+  function findParentTreeNode(node) {
+    if (node.classList.contains("bx--tree-parent-node")) return node;
+    if (node.classList.contains("bx--tree")) return null;
+    return findParentTreeNode(node.parentNode);
+  }
+</script>
+
+<script>
+  /**
+   * @typedef {string | number} TreeNodeId
+   * @slot {{ node: { id: TreeNodeId; text: string; expanded: false, leaf: boolean; disabled: boolean; selected: boolean; } }}
+   */
+
+  export let leaf = false;
+
+  /** @type {TreeNodeId} */
+  export let id = "";
+  export let text = "";
+  export let disabled = false;
+
+  /**
+   * Specify the icon to render
+   * @type {any}
+   */
+  export let icon = undefined;
+
+  import { afterUpdate, getContext } from "svelte";
+
+  let ref = null;
+  let refLabel = null;
+  let prevActiveId = undefined;
+
+  const { activeNodeId, selectedNodeIds, clickNode, selectNode, focusNode } =
+    getContext("TreeView");
+  const offset = () =>
+    computeTreeLeafDepth(refLabel) + (leaf && icon ? 2 : 2.5);
+
+  afterUpdate(() => {
+    if (id === $activeNodeId && prevActiveId !== $activeNodeId) {
+      if (!$selectedNodeIds.includes(id)) selectNode(node);
+    }
+
+    prevActiveId = $activeNodeId;
+  });
+
+  $: selected = $selectedNodeIds.includes(id);
+  $: node = {
+    id,
+    text,
+    // A node cannot be expanded.
+    expanded: false,
+    leaf,
+    disabled,
+    selected,
+  };
+  $: if (refLabel) {
+    refLabel.style.marginLeft = `-${offset()}rem`;
+    refLabel.style.paddingLeft = `${offset()}rem`;
+  }
+</script>
+
+<!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
+<li
+  bind:this={ref}
+  role="treeitem"
+  {id}
+  tabindex={disabled ? undefined : -1}
+  aria-current={id === $activeNodeId || undefined}
+  aria-selected={disabled ? undefined : selected}
+  aria-disabled={disabled}
+  class:bx--tree-node={true}
+  class:bx--tree-leaf-node={true}
+  class:bx--tree-node--active={id === $activeNodeId}
+  class:bx--tree-node--selected={selected}
+  class:bx--tree-node--disabled={disabled}
+  class:bx--tree-node--with-icon={icon}
+  on:click|stopPropagation={() => {
+    if (disabled) return;
+    clickNode(node);
+  }}
+  on:keydown={(e) => {
+    if (e.key === "ArrowLeft" || e.key === "ArrowRight" || e.key === "Enter") {
+      e.stopPropagation();
+    }
+
+    if (e.key === "ArrowLeft") {
+      const parentNode = findParentTreeNode(ref.parentNode);
+      if (parentNode) parentNode.focus();
+    }
+
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      if (disabled) return;
+      clickNode(node);
+    }
+  }}
+  on:focus={() => {
+    focusNode(node);
+  }}
+>
+  <div bind:this={refLabel} class:bx--tree-node__label={true}>
+    <svelte:component this={icon} class="bx--tree-node__icon" />
+    <slot {node}>
+      {text}
+    </slot>
+  </div>
+</li>

package/src/TreeView/TreeViewNodeList.svelte

@@ -0,0 +1,179 @@
+<script>
+  /**
+   * @typedef {string | number} TreeNodeId
+   * @typedef {{ id: TreeNodeId; text: string; disabled?: boolean; expanded?: boolean; }} TreeNode
+   * @slot {{ node: { id: TreeNodeId; text: string; expanded: boolean, leaf: boolean; disabled: boolean; selected: boolean; } }}
+   */
+
+  /** @type {Array<TreeNode & { nodes?: TreeNode[] }>} */
+  export let nodes = [];
+  export let root = false;
+
+  /** @type {string | number} */
+  export let id = "";
+  export let text = "";
+  export let disabled = false;
+
+  /**
+   * Specify the icon to render
+   * @type {any}
+   */
+  export let icon = undefined;
+
+  import { afterUpdate, getContext } from "svelte";
+  import CaretDown from "../icons/CaretDown.svelte";
+  import TreeViewNode, { computeTreeLeafDepth } from "./TreeViewNode.svelte";
+
+  let ref = null;
+  let refLabel = null;
+  let prevActiveId = undefined;
+
+  const {
+    activeNodeId,
+    selectedNodeIds,
+    expandedNodeIds,
+    clickNode,
+    selectNode,
+    expandNode,
+    focusNode,
+    toggleNode,
+  } = getContext("TreeView");
+
+  const offset = () => {
+    const depth = computeTreeLeafDepth(refLabel);
+
+    if (parent) return depth + 1;
+    if (icon) return depth + 2;
+    return depth + 2.5;
+  };
+
+  afterUpdate(() => {
+    if (id === $activeNodeId && prevActiveId !== $activeNodeId) {
+      if (!$selectedNodeIds.includes(id)) selectNode(node);
+    }
+
+    prevActiveId = $activeNodeId;
+  });
+
+  $: parent = Array.isArray(nodes);
+  $: node = { id, text, expanded, leaf: !parent };
+  $: if (refLabel) {
+    refLabel.style.marginLeft = `-${offset()}rem`;
+    refLabel.style.paddingLeft = `${offset()}rem`;
+  }
+  $: expanded = $expandedNodeIds.includes(id);
+</script>
+
+{#if root}
+  {#each nodes as child (child.id)}
+    {#if Array.isArray(child.nodes)}
+      <svelte:self {...child} let:node>
+        <slot {node} />
+      </svelte:self>
+    {:else}
+      <TreeViewNode leaf {...child} let:node>
+        <slot {node} />
+      </TreeViewNode>
+    {/if}
+  {/each}
+{:else}
+  {@const selected = $selectedNodeIds.includes(id)}
+  <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
+  <li
+    bind:this={ref}
+    role="treeitem"
+    {id}
+    tabindex={disabled ? undefined : -1}
+    aria-current={id === $activeNodeId || undefined}
+    aria-selected={disabled ? undefined : selected}
+    aria-disabled={disabled}
+    class:bx--tree-node={true}
+    class:bx--tree-parent-node={true}
+    class:bx--tree-node--active={id === $activeNodeId}
+    class:bx--tree-node--selected={selected}
+    class:bx--tree-node--disabled={disabled}
+    class:bx--tree-node--with-icon={icon}
+    aria-expanded={expanded}
+    on:click|stopPropagation={() => {
+      if (disabled) return;
+      clickNode(node);
+    }}
+    on:keydown={(e) => {
+      if (
+        e.key === "ArrowLeft" ||
+        e.key === "ArrowRight" ||
+        e.key === "Enter"
+      ) {
+        e.stopPropagation();
+      }
+
+      if (parent && e.key === "ArrowLeft") {
+        expanded = false;
+        expandNode(node, false);
+        toggleNode(node);
+      }
+
+      if (parent && e.key === "ArrowRight") {
+        if (expanded) {
+          ref.lastChild.firstElementChild?.focus();
+        } else {
+          expanded = true;
+          expandNode(node, true);
+          toggleNode(node);
+        }
+      }
+
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        if (disabled) return;
+        expanded = !expanded;
+        toggleNode(node);
+        clickNode(node);
+        expandNode(node, expanded);
+        ref.focus();
+      }
+    }}
+    on:focus={() => {
+      focusNode(node);
+    }}
+  >
+    <div class:bx--tree-node__label={true} bind:this={refLabel}>
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
+      <span
+        class:bx--tree-parent-node__toggle={true}
+        {disabled}
+        on:click={() => {
+          if (disabled) return;
+          expanded = !expanded;
+          expandNode(node, expanded);
+          toggleNode(node);
+        }}
+      >
+        <CaretDown
+          class="bx--tree-parent-node__toggle-icon {expanded &&
+            'bx--tree-parent-node__toggle-icon--expanded'}"
+        />
+      </span>
+      <span class:bx--tree-node__label__details={true}>
+        <svelte:component this={icon} class="bx--tree-node__icon" />
+        <slot node={{ ...node, selected, disabled }} />
+      </span>
+    </div>
+    {#if expanded}
+      <ul role="group" class:bx--tree-node__children={true}>
+        {#each nodes as child (child.id)}
+          {#if Array.isArray(child.nodes)}
+            <svelte:self {...child} let:node>
+              <slot {node} />
+            </svelte:self>
+          {:else}
+            <TreeViewNode leaf {...child} let:node>
+              <slot {node}>{node.text}</slot>
+            </TreeViewNode>
+          {/if}
+        {/each}
+      </ul>
+    {/if}
+  </li>
+{/if}

package/src/TreeView/index.d.ts

@@ -0,0 +1 @@
+export { default as TreeView } from "./TreeView.svelte";

package/src/TreeView/index.js

@@ -0,0 +1 @@
+export { default as TreeView } from "./TreeView.svelte";

package/src/Truncate/Truncate.svelte

@@ -0,0 +1,12 @@
+<script>
+  /** @type {"end" | "front"}*/
+  export let clamp = "end";
+</script>
+
+<p
+  class:bx--text-truncate--end={clamp === "end"}
+  class:bx--text-truncate--front={clamp === "front"}
+  {...$$restProps}
+>
+  <slot />
+</p>

package/src/Truncate/index.js

@@ -0,0 +1,2 @@
+export { default as Truncate } from "./Truncate.svelte";
+export { truncate } from "./truncate";

package/src/Truncate/truncate.d.ts

@@ -0,0 +1,12 @@
+interface TruncateOptions {
+  clamp?: "end" | "front";
+}
+
+export function TruncateAction(
+  node: HTMLElement,
+  options?: TruncateOptions,
+): {
+  update: (options?: TruncateOptions) => void;
+};
+
+export default TruncateAction;

package/src/Truncate/truncate.js

@@ -0,0 +1,29 @@
+/**
+ * Svelte action that applies single-line text truncation to an element
+ * @typedef {{ clamp?: "end" | "front" }} TruncateOptions
+ * @type {(node: HTMLElement, options?: TruncateOptions) => { update: (options?: TruncateOptions) => void; }}
+ * @example
+ * <h1 use:truncate>...</h1>
+ * <h1 use:truncate={{ clamp: "front" }}>...</h1>
+ */
+export function truncate(node, options = {}) {
+  const prefix = "bx--text-truncate--";
+
+  function toggleClass(front = false) {
+    const classes = [...node.classList]
+      .filter((name) => !name.startsWith(prefix))
+      .join(" ");
+
+    node.className = `${classes} ${prefix}${front ? "front" : "end"}`;
+  }
+
+  toggleClass(options.clamp === "front");
+
+  return {
+    update(options) {
+      toggleClass(options.clamp === "front");
+    },
+  };
+}
+
+export default truncate;

package/src/UIShell/Content.svelte

@@ -0,0 +1,24 @@
+<script>
+  /** Specify the id for the main element */
+  export let id = "main-content";
+
+  import { isSideNavCollapsed, isSideNavRail } from "./navStore";
+
+  /**
+   * By default, the `SideNav` applies a left margin of `3rem` to `Content`
+   * if it's a sibling component (e.g., .bx--side-nav ~ .bx--content).
+   *
+   * We manually unset the left margin if the `SideNav`
+   * is collapsed and if it's not the `rail` variant.
+   */
+  $: unsetLeftMargin = $isSideNavCollapsed && !$isSideNavRail;
+</script>
+
+<main
+  {id}
+  class:bx--content={true}
+  style:margin-left={unsetLeftMargin ? 0 : undefined}
+  {...$$restProps}
+>
+  <slot />
+</main>