@bccampus/ui-components 0.5.4 → 0.5.5

package/dist/components/ui/composite/layout-grid.d.ts

@@ -0,0 +1,2 @@
+import { BaseCompositeProps } from './types';
+export declare function LayoutGrid<T extends object>({ data, ...props }: BaseCompositeProps<T>): import("react").JSX.Element;

package/dist/components/ui/composite/layout-grid.js

@@ -0,0 +1,59 @@
+import { jsx } from "react/jsx-runtime";
+import { CompositeComponent } from "./composite-component.js";
+import { useRef, useCallback } from "react";
+import "nanostores";
+import { useKeyboardEvent } from "../../../hooks/use-keyboard-event.js";
+function LayoutGrid({ data, ...props }) {
+  const compositeRef = useRef(null);
+  const focusElement = useCallback(() => {
+    const itemKey = data.focusProvider.focusedItem.get()?.key;
+    if (itemKey && compositeRef.current) {
+      const focusedItemEl = compositeRef.current.querySelector(`[data-key="${itemKey}"]`);
+      if (focusedItemEl) focusedItemEl.focus();
+    }
+  }, [data]);
+  const handleKeyboardEvent = useKeyboardEvent({
+    ArrowUp: () => {
+      data.focusProvider.focusUp();
+      focusElement();
+    },
+    ArrowDown: () => {
+      data.focusProvider.focusDown();
+      focusElement();
+    },
+    Home: () => {
+      data.focusProvider.focusToFirst();
+      focusElement();
+    },
+    End: () => {
+      data.focusProvider.focusToLast();
+      focusElement();
+    },
+    Space: () => {
+      data.selectionProvider?.toggleSelect();
+      focusElement();
+    }
+  });
+  const handleItemMouseEvent = useCallback(
+    (item) => {
+      data.focusProvider.focus(item.key);
+      data.selectionProvider?.toggleSelect(item);
+      focusElement();
+    },
+    [data.focusProvider, data.selectionProvider, focusElement]
+  );
+  return /* @__PURE__ */ jsx(
+    CompositeComponent,
+    {
+      ref: compositeRef,
+      variant: "listbox",
+      data,
+      onKeyDown: handleKeyboardEvent,
+      itemMouseEventHandler: handleItemMouseEvent,
+      ...props
+    }
+  );
+}
+export {
+  LayoutGrid
+};

package/dist/components/ui/icon-generator/generate-tiles.js

@@ -71,7 +71,12 @@ const TileTemplates = {
       `tile-${tileX}-${tileY}`
     );
   },
-  [TileShape.RandBasic]: (tileX, tileY, tileSize, tileConfig) => TileTemplates[TileShape.Square + Math.floor(Math.random() * 4)](tileX, tileY, tileSize, tileConfig),
+  [TileShape.RandBasic]: (tileX, tileY, tileSize, tileConfig) => TileTemplates[TileShape.Square + Math.floor(Math.random() * 4)](
+    tileX,
+    tileY,
+    tileSize,
+    tileConfig
+  ),
   [TileShape.TriangleSE]: (tileX, tileY, tileSize, tileConfig) => /* @__PURE__ */ jsx(
     "path",
     {
@@ -158,7 +163,12 @@ const TileTemplates = {
     },
     `tile-${tileX}-${tileY}`
   ),
-  [TileShape.CaretRand]: (tileX, tileY, tileSize, tileConfig) => TileTemplates[TileShape.CaretN + Math.floor(Math.random() * 4)](tileX, tileY, tileSize, tileConfig),
+  [TileShape.CaretRand]: (tileX, tileY, tileSize, tileConfig) => TileTemplates[TileShape.CaretN + Math.floor(Math.random() * 4)](
+    tileX,
+    tileY,
+    tileSize,
+    tileConfig
+  ),
   [TileShape.PieSE]: (tileX, tileY, tileSize, tileConfig) => /* @__PURE__ */ jsx(
     "path",
     {
@@ -199,7 +209,12 @@ const TileTemplates = {
     },
     `tile-${tileX}-${tileY}`
   ),
-  [TileShape.PieRand]: (tileX, tileY, tileSize, tileConfig) => TileTemplates[TileShape.PieSE + Math.floor(Math.random() * 4)](tileX, tileY, tileSize, tileConfig)
+  [TileShape.PieRand]: (tileX, tileY, tileSize, tileConfig) => TileTemplates[TileShape.PieSE + Math.floor(Math.random() * 4)](
+    tileX,
+    tileY,
+    tileSize,
+    tileConfig
+  )
 };
 const generateIconPattern = (width, height, tileConfig) => {
   const pattern = [];
@@ -211,10 +226,11 @@ const generateIconPattern = (width, height, tileConfig) => {
   }
   return pattern;
 };
+const itemShape = (shape) => typeof shape === "string" ? TileShape[shape] : shape;
 const generateTiles = (pattern, tileSize, tileClassName) => pattern.map(
   (rows, y) => rows.map((item, x) => {
     const tileConfig = typeof item === "object" ? { className: cn(tileClassName, item.className), scale: item.scale ?? 1, shape: item.shape } : { className: tileClassName, scale: 1, shape: item };
-    return TileTemplates[tileConfig.shape](x, y, tileSize, tileConfig);
+    return TileTemplates[itemShape(tileConfig.shape)](x, y, tileSize, tileConfig);
   })
 ).flat();
 export {

package/dist/components/ui/icon-generator/types.d.ts

@@ -26,7 +26,9 @@ export declare const TileShape: {
     readonly PieNE: 24;
     readonly PieRand: 25;
 };
-export type TileShape = (typeof TileShape)[keyof typeof TileShape];
+export type TileShapeKeys = keyof typeof TileShape;
+export type TileShapeValue = (typeof TileShape)[TileShapeKeys];
+export type TileShape = TileShapeKeys | TileShapeValue;
 export interface TileConfig {
     shape: TileShape;
     scale?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bccampus/ui-components",
-  "version": "0.5.4",
+  "version": "0.5.5",
   "type": "module",
   "packageManager": "yarn@4.10.3",
   "exports": {

package/src/components/ui/composite/layout-grid.tsx

@@ -0,0 +1,61 @@
+import { CompositeComponent } from "./composite-component";
+import { useCallback, useRef } from "react";
+import { CompositeDataItem } from "./CompositeDataItem";
+import type { BaseCompositeProps } from "./types";
+import { useKeyboardEvent } from "@/hooks/use-keyboard-event";
+
+export function LayoutGrid<T extends object>({ data, ...props }: BaseCompositeProps<T>) {
+  const compositeRef = useRef<HTMLDivElement>(null);
+
+  const focusElement = useCallback(() => {
+    const itemKey = data.focusProvider.focusedItem.get()?.key;
+
+    if (itemKey && compositeRef.current) {
+      const focusedItemEl = compositeRef.current.querySelector<HTMLDivElement>(`[data-key="${itemKey}"]`);
+      if (focusedItemEl) focusedItemEl.focus();
+    }
+  }, [data]);
+
+  const handleKeyboardEvent = useKeyboardEvent({
+    ArrowUp: () => {
+      data.focusProvider.focusUp();
+      focusElement();
+    },
+    ArrowDown: () => {
+      data.focusProvider.focusDown();
+      focusElement();
+    },
+    Home: () => {
+      data.focusProvider.focusToFirst();
+      focusElement();
+    },
+    End: () => {
+      data.focusProvider.focusToLast();
+      focusElement();
+    },
+    Space: () => {
+      data.selectionProvider?.toggleSelect();
+      focusElement();
+    },
+  });
+
+  const handleItemMouseEvent = useCallback(
+    (item: CompositeDataItem<T>) => {
+      data.focusProvider.focus(item.key);
+      data.selectionProvider?.toggleSelect(item);
+      focusElement();
+    },
+    [data.focusProvider, data.selectionProvider, focusElement]
+  );
+
+  return (
+    <CompositeComponent
+      ref={compositeRef}
+      variant="listbox"
+      data={data}
+      onKeyDown={handleKeyboardEvent}
+      itemMouseEventHandler={handleItemMouseEvent}
+      {...props}
+    />
+  );
+}

package/src/components/ui/icon-generator/generate-tiles.tsx

@@ -1,5 +1,5 @@
 import type { JSX } from "react";
-import type { TileConfig } from "./types";
+import type { TileConfig, TileShapeValue } from "./types";
 import { cn } from "@/lib/utils";
 import { TileShape } from "./types";
 
@@ -21,7 +21,7 @@ const randomSet = [
 type TileTemplatesConfig = TileConfig & Required<Pick<TileConfig, "scale">>;
 
 const TileTemplates: Record<
-  TileShape,
+  TileShapeValue,
   (tileX: number, tileY: number, tileSize: number, tileConfig: TileTemplatesConfig) => JSX.Element | null
 > = {
   [TileShape.Blank]: () => null,
@@ -85,7 +85,12 @@ const TileTemplates: Record<
     );
   },
   [TileShape.RandBasic]: (tileX, tileY, tileSize, tileConfig) =>
-    TileTemplates[(TileShape.Square + Math.floor(Math.random() * 4)) as TileShape](tileX, tileY, tileSize, tileConfig),
+    TileTemplates[(TileShape.Square + Math.floor(Math.random() * 4)) as TileShapeValue](
+      tileX,
+      tileY,
+      tileSize,
+      tileConfig
+    ),
 
   [TileShape.TriangleSE]: (tileX, tileY, tileSize, tileConfig) => (
     <path
@@ -124,7 +129,7 @@ const TileTemplates: Record<
     />
   ),
   [TileShape.TriangleRand]: (tileX, tileY, tileSize, tileConfig) =>
-    TileTemplates[(TileShape.TriangleSE + Math.floor(Math.random() * 4)) as TileShape](
+    TileTemplates[(TileShape.TriangleSE + Math.floor(Math.random() * 4)) as TileShapeValue](
       tileX,
       tileY,
       tileSize,
@@ -168,7 +173,12 @@ const TileTemplates: Record<
     />
   ),
   [TileShape.CaretRand]: (tileX, tileY, tileSize, tileConfig) =>
-    TileTemplates[(TileShape.CaretN + Math.floor(Math.random() * 4)) as TileShape](tileX, tileY, tileSize, tileConfig),
+    TileTemplates[(TileShape.CaretN + Math.floor(Math.random() * 4)) as TileShapeValue](
+      tileX,
+      tileY,
+      tileSize,
+      tileConfig
+    ),
 
   [TileShape.PieSE]: (tileX, tileY, tileSize, tileConfig) => (
     <path
@@ -213,7 +223,12 @@ const TileTemplates: Record<
     />
   ),
   [TileShape.PieRand]: (tileX, tileY, tileSize, tileConfig) =>
-    TileTemplates[(TileShape.PieSE + Math.floor(Math.random() * 4)) as TileShape](tileX, tileY, tileSize, tileConfig),
+    TileTemplates[(TileShape.PieSE + Math.floor(Math.random() * 4)) as TileShapeValue](
+      tileX,
+      tileY,
+      tileSize,
+      tileConfig
+    ),
 };
 
 export const generateIconPattern = (width: number, height: number, tileConfig: TileShape | TileConfig) => {
@@ -228,6 +243,8 @@ export const generateIconPattern = (width: number, height: number, tileConfig: T
   return pattern;
 };
 
+const itemShape = (shape: TileShape) => (typeof shape === "string" ? TileShape[shape] : shape);
+
 export const generateTiles = (pattern: (TileShape | TileConfig)[][], tileSize: number, tileClassName?: string) =>
   pattern
     .map((rows, y) =>
@@ -237,7 +254,7 @@ export const generateTiles = (pattern: (TileShape | TileConfig)[][], tileSize: n
             ? { className: cn(tileClassName, item.className), scale: item.scale ?? 1, shape: item.shape }
             : { className: tileClassName, scale: 1, shape: item };
 
-        return TileTemplates[tileConfig.shape](x, y, tileSize, tileConfig);
+        return TileTemplates[itemShape(tileConfig.shape)](x, y, tileSize, tileConfig);
       })
     )
     .flat();

package/src/components/ui/icon-generator/types.ts

@@ -28,7 +28,9 @@ export const TileShape = {
     PieRand: 25,
 } as const;
 
-export type TileShape = (typeof TileShape)[keyof typeof TileShape];
+export type TileShapeKeys = keyof typeof TileShape;
+export type TileShapeValue = (typeof TileShape)[TileShapeKeys];
+export type TileShape = TileShapeKeys | TileShapeValue;
 
 export interface TileConfig {
     shape: TileShape;