@bccampus/ui-components 0.4.0 → 0.4.2

package/src/hooks/use-keyboard-event.ts

@@ -1,52 +1,38 @@
 import type { KeyboardEvent, KeyboardEventHandler } from 'react';
 import { useMemo } from 'react';
 
-const MODIFIER_KEYS = new Set(['ctrl', 'shift', 'alt', 'meta']);
-
-const KEY_MAPPINGS: Record<string, string> = {
-  ' ': 'space',
-};
-
-export interface KeyBindings {
+interface KeyBindings {
   [sequence: string]: (event: KeyboardEvent) => void;
 }
-
 interface KeybindingLookupItem {
-  sequence: Set<string>;
+  sequence: RegExp;
   handler: (event: KeyboardEvent) => void;
 }
+const MODIFIER_KEYS = new Set(["ctrl", "shift", "alt", "meta"]);
+
+const KEY_MAPPINGS: Record<string, string> = {
+  " ": "space",
+};
 
 interface UseKeyboardEventOptions {
   eventKeyProp: 'key' | 'code';
 }
 
-function isSequenceEqual<T>(sequenceA: Set<T>, sequenceB: Set<T>) {
-  if (sequenceA.size !== sequenceB.size) return false;
-
-  for (const element of sequenceB) {
-    if (!sequenceA.has(element)) return false;
-  }
-
-  return true;
-}
-
 function parseKeybindings(bindings: KeyBindings) {
   const parsedKeybindings: KeybindingLookupItem[] = [];
   for (const [sequence, handler] of Object.entries(bindings)) {
     const parsedSequence = sequence
       .toLowerCase()
       .trim()
-      .split(/\s*\+\s*/);
+      .split(/\s*\+\s*/g);
 
     if (parsedSequence.length === 1 && MODIFIER_KEYS.has(parsedSequence[0])) {
-      console.error(`[useKeyboardEvent] \`${sequence}\`: A key sequence cannot be only a modifier key.`);
-    }
-    else if (parsedSequence.includes('')) {
-      console.error(`[useKeyboardEvent] \`${sequence}\`: Unknown key defined in the sequence.`);
-    }
-    else {
+      console.error(`[useKeyboardEvent] '${sequence}': A key sequence cannot be only a modifier key.`);
+    } else if (parsedSequence.includes("")) {
+      console.error(`[useKeyboardEvent] '${sequence}': Invalid key sequence defined in the sequence.`);
+    } else {
       parsedKeybindings.push({
-        sequence: new Set(parsedSequence),
+        sequence: new RegExp("^" + parsedSequence.join("\\+") + "$"),
         handler,
       });
     }
@@ -68,21 +54,22 @@ export function keyboardEventHandler(
   const keyBindings = parseKeybindings(bindings);
 
   return (event: KeyboardEvent) => {
-    const keySequence = new Set<string>();
     const eventKey = event[_options.eventKeyProp];
+    const keySequence: string[] = [];
 
-    if (event.ctrlKey) keySequence.add('ctrl');
+    if (event.ctrlKey) keySequence.push("ctrl");
 
-    if (event.shiftKey) keySequence.add('shift');
+    if (event.shiftKey) keySequence.push("shift");
 
-    if (event.altKey) keySequence.add('alt');
+    if (event.altKey) keySequence.push("alt");
 
-    if (event.metaKey) keySequence.add('meta');
+    if (event.metaKey) keySequence.push("meta");
 
-    if (!KEY_MAPPINGS[eventKey]) keySequence.add(eventKey.toLowerCase());
-    else keySequence.add(KEY_MAPPINGS[eventKey]);
+    if (!KEY_MAPPINGS[eventKey]) keySequence.push(eventKey.toLowerCase());
+    else keySequence.push(KEY_MAPPINGS[eventKey]);
 
-    const matchedSequence = keyBindings.find(keyBinding => isSequenceEqual(keySequence, keyBinding.sequence));
+    const matchedSequence = keyBindings.find((keyBinding) => keyBinding.sequence.test(keySequence.join("+")));
+    
     if (matchedSequence) {
       event.preventDefault();
       event.stopPropagation();
@@ -91,16 +78,18 @@ export function keyboardEventHandler(
   };
 }
 
+
 /**
  * Returns a `KeyboardEventHandler`
- * that checks the defined key binding sequences against a keyboard event
+ * that checks the defined key sequences against a keyboard event
  * and executes the handler of the first matched key binding.
- *
- * Limitations:
- *   - Space character (` `) cannot be used in the key sequences.
- *    Use the `space` keyword instead.
- *   - Plus character (`+`) cannot be used in the key sequences.
- *    Use `shit + =` instead.
+ * 
+ * Key Sequence Rules:
+ *  - Multiple key must be seperated by `+`
+ *  - Only the following modifier key values as allowed: ctrl, shift, alt, meta
+ *  - Modifier key must followed by a key 
+ *  - Space character (` `) cannot be used in the key sequences. Use the `space` keyword instead.
+ *  - Plus character (`+`) cannot be used in the key sequences. Use the `shit + =` sequence instead.
  *
  * @example
  * ```

package/vite.config.ts

@@ -21,8 +21,12 @@ export default defineConfig({
       entry: {
         'ui-components': path.resolve(__dirname, 'src/components/ui/index.ts'),
         'composite': path.resolve(__dirname, 'src/components/ui/composite/index.ts'),
-        'icon-generator': path.resolve(__dirname, 'src/components/ui/icon-generator/icon-generator.tsx'),
-        'igenerate-tiles': path.resolve(__dirname, 'src/components/ui/icon-generator/generate-tiles.tsx'),
+        'listbox': path.resolve(__dirname, 'src/components/ui/composite/listbox.tsx'),
+        'SingleSelectionProvider': path.resolve(__dirname, 'src/components/ui/composite/SelectionProvider/SingleSelectionProvider.ts'),
+        'MultipleSelectionProvider': path.resolve(__dirname, 'src/components/ui/composite/SelectionProvider/MultipleSelectionProvider.ts'),
+        'ListboxFocusProvider': path.resolve(__dirname, 'src/components/ui/composite/FocusProvider/ListboxFocusProvider.ts'),
+        'icon-generator': path.resolve(__dirname, 'src/components/ui/icon-generator/index.ts'),
+        'generate-tiles': path.resolve(__dirname, 'src/components/ui/icon-generator/generate-tiles.tsx'),
         'masked-image-generator': path.resolve(__dirname, 'src/components/ui/icon-generator/masked-image-generator.tsx'),
         'caption': path.resolve(__dirname, 'src/components/ui/typography/caption.tsx'),
         'banner': path.resolve(__dirname, 'src/components/ui/banner.tsx'),

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

@@ -1,31 +0,0 @@
-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>;
-}