@bccampus/ui-components 0.2.0 → 0.4.0

package/src/components/ui/navigation-menu.tsx

@@ -0,0 +1,165 @@
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import { ChevronDownIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "./button";
+
+function NavigationMenu({
+  className,
+  children,
+  noViewport = false,
+  mega = false,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
+  noViewport?: boolean;
+  mega?: boolean;
+}) {
+  return (
+    <NavigationMenuPrimitive.Root
+      data-slot="navigation-menu"
+      data-mega={mega}
+      data-viewport={!noViewport || mega}
+      className={cn(
+        "group/navigation-menu flex max-w-max flex-1 items-center justify-center",
+        { relative: !mega },
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {(!noViewport || mega) && <NavigationMenuViewport mega={mega} />}
+    </NavigationMenuPrimitive.Root>
+  );
+}
+
+function NavigationMenuList({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
+  return (
+    <NavigationMenuPrimitive.List
+      data-slot="navigation-menu-list"
+      className={cn("group flex flex-1 list-none items-center justify-center gap-1", className)}
+      {...props}
+    />
+  );
+}
+
+function NavigationMenuItem({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
+  return (
+    <NavigationMenuPrimitive.Item data-slot="navigation-menu-item" className={cn("relative", className)} {...props} />
+  );
+}
+
+const navigationMenuTriggerStyle = buttonVariants({
+  variant: "ghost",
+  className:
+    "data-[state=open]:hover:text-secondary data-[state=open]:focus:text-secondary data-[state=open]:text-secondary",
+});
+
+function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      data-slot="navigation-menu-trigger"
+      className={cn(navigationMenuTriggerStyle, "group", className)}
+      {...props}
+    >
+      {children}{" "}
+      <ChevronDownIcon
+        className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
+        aria-hidden="true"
+      />
+    </NavigationMenuPrimitive.Trigger>
+  );
+}
+
+function NavigationMenuContent({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
+  return (
+    <NavigationMenuPrimitive.Content
+      data-slot="navigation-menu-content"
+      className={cn(
+        "max-md:h-[calc(100vh-var(--spacing-page-nav))] top-0 left-0 min-w-xs w-auto absolute group-data-[mega=true]/navigation-menu:w-full",
+        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52",
+        "group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0",
+        "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function NavigationMenuViewport({
+  className,
+  mega = false,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport> & {
+  mega?: boolean;
+}) {
+  return (
+    <div
+      className={cn("absolute top-full left-0 isolate z-50 flex justify-center bg-popover", {
+        "min-w-xs": !mega,
+        "w-full  px-(--spacing-section)": mega,
+      })}
+    >
+      <NavigationMenuPrimitive.Viewport
+        data-slot="navigation-menu-viewport"
+        className={cn(
+          "origin-top-center duration-150 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in",
+          "bg-popover text-popover-foreground relative overflow-hidden w-full h-[var(--radix-navigation-menu-viewport-height)] overscroll-contain",
+          {
+            "mt-1.5 rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]": !mega,
+            "border-b-1 border-complement-1-50": mega,
+          },
+          className
+        )}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function NavigationMenuLink({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
+  return (
+    <NavigationMenuPrimitive.Link
+      data-slot="navigation-menu-link"
+      className={cn(
+        "[&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function NavigationMenuIndicator({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
+  return (
+    <NavigationMenuPrimitive.Indicator
+      data-slot="navigation-menu-indicator"
+      className={cn(
+        "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
+        className
+      )}
+      {...props}
+    >
+      <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
+    </NavigationMenuPrimitive.Indicator>
+  );
+}
+
+export {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+  navigationMenuTriggerStyle,
+};

package/src/components/ui/page-header.tsx

@@ -1,14 +1,22 @@
+import { Slot } from "@radix-ui/react-slot";
 import { PageSection } from "./page-section";
 import { LogoBCcampusWithTagline } from "@bccampus/media-kit";
 
-function PageHeader({ children, ...props }: React.ComponentProps<"div">) {
+export type PageHeaderProps = React.ComponentProps<"div"> & {
+  asChild?: boolean;
+};
+
+function PageHeader({ children, asChild, ...props }: PageHeaderProps) {
+  const Comp = asChild ? Slot : "div";
   return (
-    <PageSection py="none" className="sticky top-0 right-0 left-0 z-10 bg-background" {...props}>
-      <div className="h-page-nav flex flex-row flex-nowrap  place-items-center border-b-1 border-b-complement-1-50 py-4 gap-12">
-        <LogoBCcampusWithTagline height="100%" variant="color" />
+    <PageSection py="none" className="sticky top-0 right-0 left-0 z-50 bg-background" {...props}>
+      <Comp className="h-page-nav overflow-hidden flex flex-row flex-nowrap border-b-1 border-b-complement-1-50 gap-2 sm:gap-12 justify-between items-center sm:justify-start">
+        <div className="py-4 h-full">
+          <LogoBCcampusWithTagline height="100%" variant="color" />
+        </div>
 
         {children}
-      </div>
+      </Comp>
     </PageSection>
   );
 }

package/src/components/ui/page-section.tsx

@@ -5,17 +5,17 @@ const pageSectionVariants = cva("group @container/page-section relative w-full",
   variants: {
     px: {
       none: "px-0",
-      default: "px-section",
-      sm: "px-sextion-sm",
-      lg: "px-section-lg",
-      xl: "px-section-xl",
+      default: "px-(--spacing-section)",
+      sm: "px-(--spacing-section-sm)",
+      lg: "px-(--spacing-section-lg)",
+      xl: "px-(--spacing-section-xl)",
     },
     py: {
       none: "py-0",
-      default: "py-section",
-      sm: "py-sextion-sm",
-      lg: "py-section-lg",
-      xl: "py-section-xl",
+      default: "py-(--spacing-section)",
+      sm: "py-(--spacing-section-sm)",
+      lg: "py-(--spacing-section-lg)",
+      xl: "py-(--spacing-section-xl)",
     },
   },
   defaultVariants: {

package/src/components/ui/page.tsx

@@ -3,7 +3,9 @@ import { cn } from "@/lib/utils";
 export type PageProps = React.ComponentProps<"div">;
 
 function Page({ className, ...props }: PageProps) {
-  return <div data-slot="page" className={cn("group @container/page relative w-full", className)} {...props} />;
+  return (
+    <div data-slot="page" className={cn("group/page @container/page relative w-full", className)} {...props} />
+  );
 }
 
 export { Page };

package/src/components/ui/popover.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

package/src/hooks/use-effect-after-mount.ts

@@ -0,0 +1,27 @@
+import type { DependencyList, EffectCallback } from 'react';
+
+import { useEffect, useRef } from 'react';
+
+export function useEffectAfterMount(fn: EffectCallback, dependencies?: DependencyList) {
+  const mounted = useRef(false);
+
+  useEffect(
+    () => () => {
+      mounted.current = false;
+    },
+    []
+  );
+
+  useEffect(
+    () => {
+      if (mounted.current) {
+        return fn();
+      }
+
+      mounted.current = true;
+      return undefined;
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    dependencies
+  );
+}

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/src/styles/theme.css

@@ -69,7 +69,7 @@
   --secondary: oklch(0.5393 0.0909 200);
   --secondary-foreground: oklch(0.985 0 0);
   --muted: oklch(0.967 0.001 286.375);
-  --muted-foreground: oklch(0.552 0.016 285.938);
+  --muted-foreground: oklch(0.45 0.0236 285.938);
   --accent: oklch(0.967 0.001 286.375);
   --accent-foreground: oklch(0.3741 0.0774 245.65);
   --destructive: oklch(0.577 0.245 27.325);
@@ -91,11 +91,11 @@
   --sidebar-ring: oklch(0.5393 0.0909 199.73);
 
   /* Responsive Layout Spacing */
-  --section-p: --spacing(6);
-  --card-p: --spacing(6);
+  --section-p: --spacing(4);
+  --card-p: --spacing(4);
   --page-gap: --spacing(0);
-  --card-gap: --spacing(6);
-  --card-area-gap: --spacing(6);
+  --card-gap: --spacing(4);
+  --card-area-gap: --spacing(4);
   --card-item-group-gap: --spacing(2);
 
   @media (width >= 40rem) {
@@ -169,8 +169,8 @@
 }
 
 @utility areas-* {
-  grid-template-areas: --value(*, [*]);
-  grid-template-columns: --modifier(*, [*]);
+  grid-template-areas: --value(*, [ *]);
+  grid-template-columns: --modifier(*, [ *]);
 }
 
 @utility stick-to-page {