@bccampus/ui-components 0.2.0 → 0.4.0

package/src/components/ui/composite/CompositeData.ts

@@ -0,0 +1,215 @@
+import { difference, union } from "@/lib/set-operations";
+import { atom, type PreinitializedWritableAtom } from "nanostores";
+import type { CompositeDataOptions, CompositeItemKey, CompositeOptions } from "./types";
+import { CompositeDataItem } from "./CompositeDataItem";
+
+export class CompositeData<T extends object> implements Iterable<CompositeDataItem<T>> {
+  #options: CompositeDataOptions<T>;
+
+  lookup: Map<CompositeItemKey, CompositeDataItem<T>> = new Map();
+
+  firstFocusableItem!: CompositeDataItem<T> | null;
+  focusedItem: PreinitializedWritableAtom<CompositeDataItem<T> | null> = atom(null);
+  disabledKeys: PreinitializedWritableAtom<Set<CompositeItemKey>> = atom(new Set());
+  selectedKeys: PreinitializedWritableAtom<Set<CompositeItemKey>> = atom(new Set());
+
+  root!: CompositeDataItem<T>;
+
+  constructor(items: T[], options?: CompositeOptions) {
+    this.#options = {
+      itemKeyProp: "key",
+      itemChildrenProp: "children",
+      disabledKeys: [],
+      selectedKeys: [],
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      getItemKey: (item: any) => item[this.#options.itemKeyProp] as CompositeItemKey,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      getItemChildren: (item: any) => item[this.#options.itemChildrenProp] ? item[this.#options.itemChildrenProp] as T[] : undefined,
+
+      ...options
+    };
+
+    this.init(items);
+  }
+
+  *[Symbol.iterator](): Iterator<CompositeDataItem<T>> {
+    if (this.root.children) {
+      for (const node of this.root.children) {
+        yield node;
+      }
+    }
+  }
+
+  toJSON() {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const json: any = this.root.toJSON()
+
+    return json[this.#options.itemChildrenProp] as T[];
+  }
+
+
+  init(items: T[]) {
+    // this.itemAtoms = this.#setItemMap(items);
+    this.root = new CompositeDataItem(
+      { [this.#options.itemKeyProp]: "ALL", [this.#options.itemChildrenProp]: items } as T,
+      this.#options,
+      null
+    );
+
+    // Build item lookup table
+    this.lookup = new Map([...this.root].map(item => [item.key, item]));
+
+    // Set initially disabled items
+    this.#options.disabledKeys.forEach(disabledKey => this.disable(disabledKey));
+
+    // Set initially selected items : SelectionProvider
+    this.#options.selectedKeys.forEach(selectedKey => this.select(selectedKey));
+
+    // Set initially focused items : FocusProvider
+    this.firstFocusableItem = this.getFirstFocusableItem() ?? null;
+    if (this.firstFocusableItem) {
+      this.firstFocusableItem.state.setKey("focused", true);
+      this.focusedItem.set(this.firstFocusableItem);
+    }
+
+    // Set focus pointers: FocusProvider
+    const lookupData = [...this.lookup];
+    for (let index = 0; index < lookupData.length; index++) {
+      const [key, item] = lookupData[index];
+
+      if (!this.isFocusable(item)) continue;
+
+      if (index < lookupData.length - 1) {
+        let newIndex = index === lookupData.length - 1 ? 0 : index + 1;
+        while (newIndex < lookupData.length && !this.isFocusable(lookupData[newIndex][1])) {
+          newIndex = (newIndex + 1) % lookupData.length;
+        }
+
+        item.pointers.down = lookupData[newIndex][0];
+        lookupData[newIndex][1].pointers.up = key;
+      }
+    }
+  }
+
+
+  isFocusable(itemAtom: CompositeDataItem<T>) {
+    return !itemAtom.state.get().disabled;
+  }
+
+  getFirstFocusableItem() {
+    let iterItem = this.lookup.values().next();
+
+    while (iterItem.value && !this.isFocusable(iterItem.value)) {
+      iterItem = this.lookup.values().next();
+    }
+
+    return iterItem.value;
+  }
+
+  item(key: CompositeItemKey) { return this.lookup.get(key) };
+
+  descendants(itemKey: CompositeItemKey) {
+    const item = this.lookup.get(itemKey);
+    if (!item) return undefined;
+
+    return item.descendants();
+  }
+
+  ancestors(itemKey: CompositeItemKey) {
+    const item = this.lookup.get(itemKey);
+    if (!item) return undefined;
+
+    return item.ancestors();
+  }
+
+  focus(itemKey: CompositeItemKey): void;
+  focus(item: CompositeDataItem<T>): void;
+  focus(item: CompositeDataItem<T> | CompositeItemKey) {
+    const _item = item instanceof CompositeDataItem ? item : this.lookup.get(item);
+    if (!_item) return;
+
+    if (this.focusedItem.get()) {
+      if (_item.key === this.focusedItem.get()?.key) return;
+
+      this.focusedItem.get()!.state.setKey("focused", false);
+    }
+
+    _item.state.setKey("focused", true);
+    this.focusedItem.set(_item);
+  }
+
+  toggleSelect(itemKey: CompositeItemKey, recursive?: boolean): void;
+  toggleSelect(item: CompositeDataItem<T>, recursive?: boolean): void;
+  toggleSelect(item: CompositeDataItem<T> | CompositeItemKey, recursive: boolean = false) {
+    const _item = item instanceof CompositeDataItem ? item : this.lookup.get(item);
+    if (!_item) return;
+
+    if (_item.state.get().selected) this.deselect(_item, recursive);
+    else this.select(_item, recursive);
+  }
+
+  select(itemKey: CompositeItemKey, recursive?: boolean): void;
+  select(item: CompositeDataItem<T>, recursive?: boolean): void;
+  select(item: CompositeDataItem<T> | CompositeItemKey, recursive: boolean = false) {
+    const _item = item instanceof CompositeDataItem ? item : this.lookup.get(item);
+    if (!_item) return;
+
+    const selectedKeys = _item.select(recursive);
+    this.selectedKeys.set(union(this.selectedKeys.get(), selectedKeys));
+  }
+
+  deselect(itemKey: CompositeItemKey, recursive?: boolean): void;
+  deselect(item: CompositeDataItem<T>, recursive?: boolean): void;
+  deselect(item: CompositeDataItem<T> | CompositeItemKey, recursive: boolean = false) {
+    const _item = item instanceof CompositeDataItem ? item : this.lookup.get(item);
+    if (!_item) return;
+
+    const deselectedKeys = _item.deselect(recursive);
+    this.selectedKeys.set(difference(this.selectedKeys.get(), deselectedKeys));
+  }
+
+  disable(itemKey: CompositeItemKey, recursive?: boolean): void;
+  disable(item: CompositeDataItem<T>, recursive?: boolean): void;
+  disable(item: CompositeDataItem<T> | CompositeItemKey, recursive: boolean = false) {
+    const _item = item instanceof CompositeDataItem ? item : this.lookup.get(item);
+    if (!_item) return;
+
+    const disabledKeys = _item.disable(recursive);
+    this.disabledKeys.set(union(this.selectedKeys.get(), disabledKeys));
+  }
+
+
+  enable(itemKey: CompositeItemKey, recursive?: boolean): void;
+  enable(item: CompositeDataItem<T>, recursive?: boolean): void;
+  enable(item: CompositeDataItem<T> | CompositeItemKey, recursive: boolean = false) {
+    const _item = item instanceof CompositeDataItem ? item : this.lookup.get(item);
+    if (!_item) return;
+
+    const enabledKeys = _item.enable(recursive);
+    this.disabledKeys.set(union(this.selectedKeys.get(), enabledKeys));
+  }
+
+
+  updateItem(key: CompositeItemKey, data: Partial<T> | ((item: T) => Partial<T>)) {
+    const item = this.lookup.get(key);
+    if (item) {
+      const newData = {
+        ...item.data.get(), ...(
+          (typeof data === "function") ? data(item.data.get()) : data
+        )
+      };
+
+      const newKey = this.#options.getItemKey(newData);
+      if (item.key !== newKey) throw "Item key cannot be updated!";
+
+      this.#updateIfSelectedItem(key);
+      item.data.set(newData);
+    }
+  }
+
+  #updateIfSelectedItem(key: CompositeItemKey) {
+    if (this.selectedKeys.get().has(key)) {
+      this.selectedKeys.set(new Set([...this.selectedKeys.get()]));
+    }
+  }
+}

package/src/components/ui/composite/CompositeDataItem.ts

@@ -0,0 +1,144 @@
+import { omit } from "@/lib/object";
+import { map, type PreinitializedMapStore, } from "nanostores";
+import type { CompositeDataItemState, CompositeItemKey, CompositeDataItemOptions } from "./types";
+
+export class CompositeDataItem<T extends object> implements Iterable<CompositeDataItem<T>> {
+    #key: CompositeItemKey;
+    parent: CompositeDataItem<T> | null = null;
+    children?: CompositeDataItem<T>[];
+    level: number;
+
+    data: PreinitializedMapStore<T>;
+    state: PreinitializedMapStore<CompositeDataItemState>;
+
+    pointers: {
+        left?: CompositeItemKey;
+        right?: CompositeItemKey;
+        up?: CompositeItemKey;
+        down?: CompositeItemKey;
+    };
+    childrenProp: string
+
+    constructor(item: T, options: CompositeDataItemOptions<T>, parent: CompositeDataItem<T> | null) {
+        this.#key = options.getItemKey(item);
+        this.data = map(omit(item, [options.itemChildrenProp]));
+        this.state = map({
+            focused: false,
+            selected: false,
+            disabled: false,
+            ...options.initialState
+        })
+        this.pointers = {};
+        this.parent = parent;
+        this.level = parent ? parent.level + 1 : 0;
+
+        this.childrenProp = options.itemChildrenProp;
+
+        const children = options.getItemChildren(item);
+        if (children) {
+            this.children = children.map(child => {
+                const childItem = new CompositeDataItem(child, options, this);
+                return childItem;
+            })
+        }
+    }
+
+    get key() {
+        return this.#key;
+    }
+
+    *[Symbol.iterator](): Iterator<CompositeDataItem<T>> {
+        if (this.key !== "ALL") yield this;
+        if (this.children)
+            for (const child of this.children)
+                for (const item of child) yield item;
+    }
+
+    toJSON() {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const json: any = { ...this.data.get() };
+
+        if (this.children) {
+            json[this.childrenProp] = [];
+            for (const child of this.children)
+                json[this.childrenProp].push(child.toJSON());
+        }
+
+        return json as T;
+    }
+
+    descendants() {
+        if (!this.children) return [];
+
+        const descendants: CompositeDataItem<T>[] = [];
+        this.children.forEach((child) => {
+            descendants.push(child);
+            const childDescendants = child.descendants();
+            if (childDescendants) descendants.push(...childDescendants);
+        }
+        )
+
+        return descendants;
+    }
+
+    ancestors() {
+        const ancestors: CompositeDataItem<T>[] = [];
+        let parent = this.parent;
+        while (parent) {
+            ancestors.push(parent);
+            parent = parent.parent;
+        }
+
+        return ancestors;
+    }
+
+
+    toggleSelect(recursive: boolean = false) {
+        if (this.state.get().selected) this.deselect(recursive);
+        else this.select(recursive);
+    }
+
+    select(recursive: boolean = false): CompositeItemKey[] {
+        this.state.setKey("selected", true);
+
+        if (recursive && this.children) {
+            const selectedChildKeys = this.children.map(child => child.select(true)).flat();
+            return [this.key, ...selectedChildKeys];
+        }
+
+        return [this.key]
+    }
+
+    deselect(recursive: boolean = false): CompositeItemKey[] {
+        this.state.setKey("selected", false);
+
+        if (recursive && this.children) {
+            const deselectedChildKeys = this.children.map(child => child.deselect(true)).flat();
+            return [this.key, ...deselectedChildKeys];
+        }
+
+        return [this.key];
+    }
+
+    disable(recursive: boolean = false): CompositeItemKey[] {
+        this.state.setKey("disabled", true);
+
+        if (recursive && this.children) {
+            const disabledChildKeys = this.children.map(child => child.disable(true)).flat();
+            return [this.key, ...disabledChildKeys];
+        }
+
+        return [this.key]
+    }
+
+    enable(recursive: boolean = false): CompositeItemKey[] {
+        this.state.setKey("disabled", false);
+
+        if (recursive && this.children) {
+            const enabledChildKeys = this.children.map(child => child.enable(true)).flat();
+            return [this.key, ...enabledChildKeys];
+        }
+
+        return [this.key];
+    }
+}

package/src/components/ui/composite/composite-component-item.tsx

@@ -0,0 +1,50 @@
+import { useMemo } from "react";
+import type { CompositeItemEventHandlers, CompositeItemProps } from "./types";
+import { useStore } from "@nanostores/react";
+
+export function CompositeComponentItem<T extends object>({
+  id,
+  className,
+  item,
+  mouseEventHandler,
+  keyboardEventHandler,
+  render,
+}: CompositeItemProps<T>) {
+  const data = useStore(item.data);
+  const state = useStore(item.state);
+
+  const handlers: CompositeItemEventHandlers = useMemo(() => {
+    if (state.disabled) return {};
+
+    return {
+      mouseEventHandler: () => mouseEventHandler?.(item),
+      keyboardEventHandler: () => keyboardEventHandler?.(item),
+    };
+  }, [state.disabled, item, keyboardEventHandler, mouseEventHandler]);
+
+  return (
+    <div
+      id={id}
+      role="option"
+      aria-disabled={state.disabled}
+      data-key={item.key}
+      tabIndex={!state.disabled ? (state.focused ? 0 : -1) : undefined}
+      className={className}
+    >
+      {render({ data, key: item.key, level: item.level }, state, handlers)}
+      {item.children &&
+        item.children.length > 0 &&
+        [...item.children].map((child) => (
+          <CompositeComponentItem
+            id={`${id}-${item.key}`}
+            item={child}
+            key={child.key}
+            render={render}
+            className={className}
+            mouseEventHandler={mouseEventHandler}
+            keyboardEventHandler={keyboardEventHandler}
+          />
+        ))}
+    </div>
+  );
+}

package/src/components/ui/composite/composite-component.tsx

@@ -0,0 +1,100 @@
+import { useCallback, useImperativeHandle, useRef } from "react";
+import { CompositeDataItem } from "./CompositeDataItem";
+import type { CompositeItemKey, CompositeProps } from "./types";
+import { useKeyboardEvent } from "@/hooks/use-keyboard-event";
+import { useCompositeContext } from "./composite-data-context";
+import { CompositeComponentItem } from "./composite-component-item";
+import { useId } from "@/hooks/use-id";
+
+export function CompositeComponent<T extends object>({
+  renderItem,
+  className,
+  itemClassName,
+  ref,
+  id,
+  ...props
+}: CompositeProps<T>) {
+  const compositeData = useCompositeContext<T>();
+  const compositeRef = useRef<HTMLDivElement>(null);
+  const compositeId = useId(id);
+
+  const focus = useCallback(
+    (itemKey: CompositeItemKey) => {
+      compositeData.focus(itemKey);
+      // const focusedItemEl = compositeRef.current?.querySelector<HTMLDivElement>(`[data-key="${itemKey}"]`);
+      // if (focusedItemEl) focusedItemEl.focus();
+    },
+    [compositeData]
+  );
+
+  const focusDown = useCallback(() => {
+    if (compositeData.focusedItem.get()?.pointers.down) {
+      focus(compositeData.focusedItem.get()!.pointers.down!);
+    }
+  }, [compositeData, focus]);
+
+  const focusUp = useCallback(() => {
+    if (compositeData.focusedItem.get()?.pointers.up) {
+      focus(compositeData.focusedItem.get()!.pointers.up!);
+    }
+  }, [compositeData, focus]);
+
+  const handleKeyDown = useKeyboardEvent({
+    ArrowUp: focusUp,
+    ArrowLeft: focusUp,
+    ArrowDown: focusDown,
+    ArrowRight: focusDown,
+    Space: () => {
+      if (compositeData.focusedItem.get()) compositeData.toggleSelect(compositeData.focusedItem.get()!);
+    },
+  });
+
+  const handleItemMouseEvent = useCallback(
+    (item: CompositeDataItem<T>) => {
+      focus(item.key);
+      compositeData.toggleSelect(item);
+    },
+    [compositeData, focus]
+  );
+
+  useImperativeHandle(
+    ref,
+    () => {
+      return {
+        focusDown() {
+          focusDown();
+        },
+        focusUp() {
+          focusUp();
+        },
+        select() {
+          if (compositeData.focusedItem.get()) compositeData.toggleSelect(compositeData.focusedItem.get()!);
+        },
+      };
+    },
+    [compositeData, focusDown, focusUp]
+  );
+
+  return (
+    <div
+      ref={compositeRef}
+      id={compositeId}
+      className={className}
+      tabIndex={-1}
+      role="listbox"
+      onKeyDown={handleKeyDown}
+      {...props}
+    >
+      {[...compositeData].map((item) => (
+        <CompositeComponentItem
+          className={itemClassName}
+          id={`${compositeId}-${item.key}`}
+          item={item}
+          key={item.key}
+          render={renderItem}
+          mouseEventHandler={handleItemMouseEvent}
+        />
+      ))}
+    </div>
+  );
+}

package/src/components/ui/composite/composite-data-context.tsx

@@ -0,0 +1,31 @@
+import { createContext, useContext, useMemo } from "react";
+import { CompositeData } from "./CompositeData";
+import type { CompositeOptions } from "./types";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const CompositeDataContext = createContext<CompositeData<any> | undefined>(undefined);
+
+export function useCompositeContext<T extends object>() {
+  const context = useContext(CompositeDataContext);
+
+  if (!context) {
+    throw new Error("No CompositeDataContext has been set, use CompositeDataContext to provide a context");
+  }
+
+  return context as CompositeData<T>;
+}
+
+interface CompositeComponentContextProps<T extends object> extends CompositeOptions {
+  data: T[];
+  children: React.ReactNode;
+}
+
+export function CompositeComponentContext<T extends object>({
+  data,
+  children,
+  ...compositeOptions
+}: CompositeComponentContextProps<T>) {
+  const composite = useMemo(() => new CompositeData(data, compositeOptions), [data, compositeOptions]);
+
+  return <CompositeDataContext value={composite}>{children}</CompositeDataContext>;
+}

package/src/components/ui/composite/index.ts

@@ -0,0 +1,4 @@
+export * from './composite-component.tsx'
+export * from './composite-component-item.tsx'
+export * from './composite-data-context.tsx'
+export * from './types.ts'

package/src/components/ui/composite/types.ts

@@ -0,0 +1,81 @@
+import type { KeyboardEventHandler, MouseEventHandler, ReactNode } from "react";
+import type { CompositeDataItem } from "./CompositeDataItem";
+
+export type CompositeItemKey = string | number;
+
+export interface CompositeOptions {
+    disabledKeys?: CompositeItemKey[];
+    selectedKeys?: CompositeItemKey[];
+
+    itemKeyProp?: string;
+    itemChildrenProp?: string;
+}
+
+interface CompositeDataPropGetters<T> {
+    getItemKey: (item: T) => CompositeItemKey;
+    getItemChildren: (item: T) => T[] | undefined;
+}
+
+export type CompositeDataOptions<T> = Required<CompositeOptions> & CompositeDataPropGetters<T>;
+
+export type CompositeDataItemOptions<T> = CompositeDataPropGetters<T> & {
+    initialState?: CompositeDataItemState;
+    itemChildrenProp: string;
+};
+
+export interface CompositeDataItemState {
+    focused: boolean;
+    selected: boolean;
+    disabled: boolean;
+}
+
+export interface CompositeProps<T extends object> extends React.ComponentPropsWithoutRef<"div"> {
+    renderItem: CompositeItemRenderFn<T>;
+    className?: string;
+    itemClassName?: string;
+    ref?: React.Ref<CompositeHandle>
+}
+
+
+export interface CompositeHandle {
+    focusUp: () => void;
+    focusDown: () => void;
+    select: () => void;
+}
+
+export interface CompositeItemEventHandlers {
+    mouseEventHandler?: MouseEventHandler<HTMLElement>;
+    keyboardEventHandler?: KeyboardEventHandler<HTMLElement>;
+}
+
+export type CompositeItemRenderFn<T extends object> = (
+    item: { data: T; level: number; key: CompositeItemKey },
+    state: CompositeDataItemState,
+    eventHandlers: CompositeItemEventHandlers
+) => ReactNode;
+
+export interface CompositeItemProps<T extends object> {
+    id: string;
+    className?: string;
+
+    item: CompositeDataItem<T>;
+
+    mouseEventHandler?: (itemAtom: CompositeDataItem<T>) => void;
+    keyboardEventHandler?: (itemAtom: CompositeDataItem<T>) => void;
+
+    remove?: () => void;
+    render: CompositeItemRenderFn<T>;
+}
+
+export interface CompositeFocusProvider {
+    setPointers: () => void;
+
+    goFirst: () => void;
+    goLast: () => void;
+    
+    goUp: () => void;
+    goDown: () => void;
+    goLeft: () => void;
+    goRight: () => void;
+
+}

package/src/components/ui/horizontal-list.tsx

@@ -5,12 +5,12 @@ import { useCallback, useRef } from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 
 const horizontalListVariants = cva(
-  "scrollbar-hidden overscroll-x-contain flex flex-row flex-nowrap py-1 gap-card overflow-x-auto snap-x snap-mandatory touch-pan-x scroll-smooth *:shrink-0 *:grow-0 *:snap-center *:select-none",
+  "scrollbar-hidden overscroll-x-contain flex flex-row flex-nowrap py-1 gap-(--gap-card) overflow-x-auto snap-x snap-mandatory touch-pan-x scroll-smooth *:shrink-0 *:grow-0 *:snap-center *:select-none",
   {
     variants: {
       variant: {
         contain: "w-full ",
-        overflow: "w-screen px-section -ms-section scroll-px-(--section-p)",
+        overflow: "w-screen px-(--spacing-section) -ms-(--spacing-section) scroll-px-(--spacing-section)",
       },
     },
     defaultVariants: {

package/src/components/ui/index.ts

@@ -6,6 +6,7 @@ export * from './button.tsx'
 export * from './card.tsx'
 export * from './horizontal-list.tsx'
 export * from './input.tsx'
+export * from './navigation-menu.tsx'
 export * from './overlay.tsx'
 export * from './page-header.tsx'
 export * from './page-section.tsx'