@bccampus/ui-components 0.3.0 → 0.4.0

package/src/hooks/use-id.ts

@@ -0,0 +1,5 @@
+import { useId as reactUseId } from "react";
+
+export function useId(id?: string): string {
+  return id ?? reactUseId();
+}

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

@@ -0,0 +1,144 @@
+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 {
+  [sequence: string]: (event: KeyboardEvent) => void;
+}
+
+interface KeybindingLookupItem {
+  sequence: Set<string>;
+  handler: (event: KeyboardEvent) => void;
+}
+
+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*/);
+
+    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 {
+      parsedKeybindings.push({
+        sequence: new Set(parsedSequence),
+        handler,
+      });
+    }
+  }
+
+  return parsedKeybindings;
+}
+
+const defaultOptions: UseKeyboardEventOptions = {
+  eventKeyProp: 'key',
+};
+
+export function keyboardEventHandler(
+  bindings: KeyBindings,
+  options: UseKeyboardEventOptions = defaultOptions
+): KeyboardEventHandler {
+  const _options = { ...options, ...defaultOptions }
+
+  const keyBindings = parseKeybindings(bindings);
+
+  return (event: KeyboardEvent) => {
+    const keySequence = new Set<string>();
+    const eventKey = event[_options.eventKeyProp];
+
+    if (event.ctrlKey) keySequence.add('ctrl');
+
+    if (event.shiftKey) keySequence.add('shift');
+
+    if (event.altKey) keySequence.add('alt');
+
+    if (event.metaKey) keySequence.add('meta');
+
+    if (!KEY_MAPPINGS[eventKey]) keySequence.add(eventKey.toLowerCase());
+    else keySequence.add(KEY_MAPPINGS[eventKey]);
+
+    const matchedSequence = keyBindings.find(keyBinding => isSequenceEqual(keySequence, keyBinding.sequence));
+    if (matchedSequence) {
+      event.preventDefault();
+      event.stopPropagation();
+      matchedSequence.handler(event);
+    }
+  };
+}
+
+/**
+ * Returns a `KeyboardEventHandler`
+ * that checks the defined key binding 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.
+ *
+ * @example
+ * ```
+ * export function Input({ value, onChange }: Props) {
+ *   const [inputValue, setInputValue] = useState<string>('');
+ *
+ *   const clearInput = () => {
+ *     setInputValue('');
+ *   };
+ *
+ *   const addItem = () => {
+ *     if (inputValue) {
+ *       onChange([...value, inputValue]);
+ *       clearInput();
+ *     }
+ *   };
+ *
+ *   const deleteAll = () => {
+ *     onChange([]);
+ *     clearInput();
+ *   };
+ *
+ *   const handleKeyDown = useKeyboardEvent({
+ *     'enter': addItem,
+ *     'escape': clearInput,
+ *     'ctrl+c': clearInput,
+ *     'ctrl + shift + c': deleteAll,
+ *   });
+ *
+ *   return (
+ *      <input
+ *        value={inputValue}
+ *        onChange={event => setInputValue(event.target.value)}
+ *        onKeyDown={handleKeyDown}
+ *      />;
+ * }
+ * ```
+ */
+export function useKeyboardEvent(bindings: KeyBindings, options?: UseKeyboardEventOptions) {
+  return useMemo(() => keyboardEventHandler(bindings, options), [bindings, options]);
+}

package/src/lib/object.ts

@@ -0,0 +1,48 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+export const get = <T extends object>(object: T, prop: string) => prop
+    .split('.')
+    .reduce<any>((reducedObject, key) => (reducedObject && key in reducedObject) ? reducedObject[key] : undefined, object);
+
+export const set = <T extends object, V>(object: T, prop: string, value: V) => {
+    const propChunks = prop.split('.');
+    const lastChunk = propChunks.pop();
+    if (!lastChunk) return object;
+
+    const ref = propChunks.reduce<any>((reducedObject, key) => {
+        reducedObject[key] = {};
+        return reducedObject[key];
+    }, object);
+
+    ref[lastChunk] = value;
+
+    return object;
+}
+
+export const pick = <T extends object>(object: T, props: string[]) => {
+
+    return props.reduce<Record<string, unknown>>((result, key) => {
+
+        set(result, key, get(object, key));
+
+        return result;
+    }, {}) as Partial<T>;
+}
+
+export const omit = <T extends object>(object: T, props: string[]) => {
+    const result: Partial<T> = { ...object };
+
+    props.forEach(prop => {
+        const propChunks = prop.split('.');
+        const lastChunk = propChunks.pop();
+        if (lastChunk) {
+            const ref = propChunks.reduce<any>((reducedObject, key) => (reducedObject && key in reducedObject) ? reducedObject[key] : undefined, result);
+            if (ref && lastChunk in ref) delete ref[lastChunk];
+        }
+    })
+
+    return result;
+}
+
+export const isObject = (object: unknown) => (typeof object === 'object' && !Array.isArray(object) && object !== null);
+

package/src/lib/set-operations.ts

@@ -0,0 +1,52 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+export function isSuperset(set: Iterable<any>, subset: Iterable<any>) {
+  const _set = set instanceof Set ? set : new Set(set);
+
+  for (const elem of subset) {
+    if (!_set.has(elem)) {
+      return false;
+    }
+  }
+  return true;
+}
+
+export function union(setA: Iterable<any>, setB: Iterable<any>) {
+  const _union = new Set(setA);
+  for (const elem of setB) {
+    _union.add(elem);
+  }
+  return _union;
+}
+
+export function intersection(setA: Iterable<any>, setB: Iterable<any>) {
+  const _setA = setA instanceof Set ? setA : new Set(setA);
+
+  const _intersection = new Set();
+  for (const elem of setB) {
+    if (_setA.has(elem)) {
+      _intersection.add(elem);
+    }
+  }
+  return _intersection;
+}
+
+export function symmetricDifference(setA: Iterable<any>, setB: Iterable<any>) {
+  const _difference = new Set(setA);
+  for (const elem of setB) {
+    if (_difference.has(elem)) {
+      _difference.delete(elem);
+    } else {
+      _difference.add(elem);
+    }
+  }
+  return _difference;
+}
+
+export function difference(setA: Iterable<any>, setB: Iterable<any>) {
+  const _difference = new Set(setA);
+  for (const elem of setB) {
+    _difference.delete(elem);
+  }
+  return _difference;
+}

package/tsconfig.node.json

@@ -1,25 +1,25 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "target": "ES2023",
-    "lib": ["ES2023"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["vite.config.ts"]
-}
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -20,7 +20,9 @@ export default defineConfig({
       formats: ['es'],
       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'),
         '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'),