@bccampus/ui-components 0.7.2 → 0.8.0

package/src/components/ui/composite/create-composite-data.ts

@@ -0,0 +1,98 @@
+import { computed } from "nanostores";
+import { CompositeData } from "./CompositeData";
+import type { CompositeOptions, CompositeManagerOptions } from "./types";
+
+/**
+ * Returns nanostores object with `CompositeData` instance,
+ *
+ * @example
+ * ```
+ * const items = [...];
+ * const compositeData = createCompositeData(
+ *    items,
+ *    {
+ *       focusManager: new ListboxFocusManager(),
+ *       selectionManager: new SingleSelectionManager(),
+ *    },
+ *    {
+ *       disabledKeys: ["key 02", "key 04", "key 3023"],
+ *       selectedKeys: ["key 207", "key 101", "key 3021"],
+ *       itemChildrenProp: "nodes",
+ *    },
+ * );
+ *
+ * export function CompositeSelectedItems() {
+ *    const composite = useStore(compositeData);
+ *    const selections = useStore(composite.data.selectionManager!.selectedKeys);
+ *    return (
+ *      <div className="py-4 flex gap-2 items-center justify-star ">
+ *        <span className="text-lg font-semibold text-accent-foreground">Selected Items:</span>
+ *        <div className="flex gap-2 flex-wrap items-center justify-start *:bg-blue-100 *:p-2">
+ *          {[...selections].map((selectedKey) => {
+ *            return <span key={selectedKey}>{composite.data.item(selectedKey)?.data.get().name}</span>;
+ *          })}
+ *        </div>
+ *      </div>
+ *    );
+ * }
+ * ```
+ */
+export const createCompositeData = <T extends object>(
+  items: T[],
+  managerOptions: CompositeManagerOptions<T>,
+  options?: CompositeOptions,
+) => {
+  const $store = new CompositeData(items, managerOptions, options);
+  return computed($store.version, (version) => {
+    return { data: $store, version };
+  });
+};
+
+/**
+ * Returns nanostores object with `CompositeData` instance.
+ *
+ * Intialize the store by calling the `fetch` function without any arguments
+ *
+ * @example
+ * ```
+ * const compositeAsyncData = createAsyncCompositeData(
+ *    async (url?: string) => {
+ *      if (!url) return undefined;
+ *
+ *      const response = await fetch(url);
+ *      if (response.ok) {
+ *        const data = await response.json();
+ *        return data.results as NamedListItem[];
+ *      }
+ *
+ *      return null;
+ *    },
+ *    {
+ *      focusManager: new ListboxFocusManager(),
+ *      selectionManager: new MultipleSelectionManager(),
+ *    },
+ *    {
+ *      itemKeyProp: "name",
+ *    },
+ * );
+ *
+ * export function CompositeSomethign() {
+ *    const composite = useStore(compositeAsyncData);
+ *    return <Listbox data={composite.data} ... />
+ * }
+ * ```
+ */
+export const createAsyncCompositeData = <T extends object, FnArgs = never>(
+  fetch: (options?: FnArgs) => Promise<T[] | undefined | null>,
+  managerOptions: CompositeManagerOptions<T>,
+  options?: CompositeOptions,
+) => {
+  const load = (options?: FnArgs) => {
+    fetch(options).then((items) => items && $store.setItems(items));
+  };
+  const $store = new CompositeData(null, managerOptions, options);
+  load();
+  return computed($store.version, (version) => {
+    return { data: $store, version, load };
+  });
+};

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

@@ -1,8 +1,7 @@
-export * from './CompositeData.ts'
-export * from './CompositeDataItem.ts'
-export * from './FocusProvider'
-export * from './SelectionProvider'
-export * from './composite-component.tsx'
-export * from './composite-component-item.tsx'
-export * from './listbox.tsx'
-export type * from './types'
+export * from "./CompositeData.ts";
+export * from "./CompositeDataItem.ts";
+export * from "./FocusManager/index.ts";
+export * from "./SelectionManager/index.ts";
+export * from "./components";
+export * from "./create-composite-data.ts";
+export type * from "./types";

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

@@ -1,33 +1,8 @@
-import type { AriaRole, KeyboardEventHandler, MouseEventHandler, ReactNode } from "react";
-import type { CompositeDataItem } from "./CompositeDataItem";
-import type { AbstractFocusProvider, FocusProvider } from "./FocusProvider/AbstractFocusProvider";
-import type { AbstractSelectionProvider, SelectionProvider } from "./SelectionProvider/AbstractSelectionProvider";
-import type { CompositeData } from "./CompositeData";
+import type { AbstractFocusManager } from "./FocusManager/AbstractFocusManager";
+import type { AbstractSelectionManager } from "./SelectionManager/AbstractSelectionManager";
 
 export type CompositeItemKey = string | number;
 
-export type CompositeRoles =
-  | {
-      variant: "listbox";
-      rootRole?: never;
-      itemRole?: never;
-      groupRole?: never;
-    }
-  | {
-      variant: "grid";
-      rootRole?: never;
-      itemRole?: never;
-      groupRole?: never;
-    }
-  | {
-      variant: "custom";
-      rootRole: AriaRole;
-      itemRole: AriaRole;
-      groupRole: AriaRole;
-    };
-
-export type InitialFocusTarget = "None" | "LastFocusedItem" | "SelectedItem" | "FirstItem";
-
 export interface CompositeOptions {
   disabledKeys?: CompositeItemKey[];
   selectedKeys?: CompositeItemKey[];
@@ -41,9 +16,9 @@ interface CompositeDataPropGetters<T> {
   getItemChildren: (item: T) => T[] | undefined;
 }
 
-export interface CompositeProviderOptions<T extends object> {
-  focusProvider: AbstractFocusProvider<T>;
-  selectionProvider?: AbstractSelectionProvider<T>;
+export interface CompositeManagerOptions<T extends object> {
+  focusManager: AbstractFocusManager<T>;
+  selectionManager?: AbstractSelectionManager<T>;
 }
 
 export type CompositeDataOptions<T> = Required<CompositeOptions> & CompositeDataPropGetters<T>;
@@ -58,59 +33,3 @@ export interface CompositeDataItemState {
   selected: boolean;
   disabled: boolean;
 }
-
-export interface CompositeEventHandlers {
-  mouseEventHandler?: MouseEventHandler<HTMLElement>;
-  keyboardEventHandler?: KeyboardEventHandler<HTMLElement>;
-}
-
-export interface CompositeItemEventHandlerFunctions<T extends object> {
-  itemMouseEventHandler?: (itemAtom: CompositeDataItem<T>) => void;
-  itemKeyboardEventHandler?: (itemAtom: CompositeDataItem<T>) => void;
-}
-
-export interface BaseCompositeProps<T extends object> extends React.ComponentPropsWithoutRef<"div"> {
-  data: CompositeData<T>;
-  className?: string;
-  rootRef?: React.RefObject<HTMLDivElement | null>;
-  handleRef?: React.RefObject<CompositeHandle<T> | null>;
-
-  renderItem: CompositeItemRenderFn<T>;
-  itemClassName?: string;
-
-  initialFocus?: InitialFocusTarget;
-  /**
-   * Set `item.focused = true`, but not focus on the HTMLElement
-   */
-  softFocus?: boolean;
-}
-
-export type CompositeProps<T extends object> = BaseCompositeProps<T> &
-  CompositeItemEventHandlerFunctions<T> &
-  CompositeRoles;
-
-export interface CompositeHandle<T extends object> {
-  focusProvider: FocusProvider<T>;
-  focusElement: () => void;
-  selectionProvider?: SelectionProvider<T>;
-}
-
-export type CompositeItemRenderFn<T extends object> = (
-  item: { data: T; level: number; key: CompositeItemKey },
-  state: CompositeDataItemState,
-  eventHandlers: CompositeEventHandlers,
-) => ReactNode;
-
-export interface CompositeItemProps<T extends object> extends CompositeItemEventHandlerFunctions<T> {
-  id: string;
-  className?: string;
-  role?: AriaRole;
-  groupRole?: AriaRole;
-
-  item: CompositeDataItem<T>;
-
-  remove?: () => void;
-  render: CompositeItemRenderFn<T>;
-
-  softFocus?: boolean;
-}

package/src/hooks/index.ts

@@ -1,3 +1,4 @@
-export * from './use-effect-after-mount'
-export * from './use-id'
-export * from './use-keyboard-event'
+export * from "./use-effect-after-mount";
+export * from "./use-id";
+export * from "./use-keyboard-event";
+export * from "./use-required-ref";