@devxcrew/react-ui 0.0.0-stage → 0.1.7

package/src/blocks/mascot/mascot.tsx

@@ -0,0 +1,202 @@
+import { useEffect, useRef, useState } from "react";
+import type { CSSProperties } from "react";
+
+const DIRECTIONS = ["up-left", "up", "up-right", "left", "center", "right", "down-left", "down", "down-right"] as const;
+
+const REACTIONS = [
+  "blink",
+  "heart",
+  "sparkle",
+  "surprised",
+  "wink",
+  "bashful",
+  "sleepy",
+  "dizzy",
+  "delighted",
+] as const;
+
+type Direction = (typeof DIRECTIONS)[number];
+type Reaction = (typeof REACTIONS)[number];
+
+const CLOCKWISE: Direction[] = ["right", "down-right", "down", "down-left", "left", "up-left", "up", "up-right"];
+const SECTOR = (Math.PI * 2) / CLOCKWISE.length;
+const HYSTERESIS = 0.12;
+const DEAD_ZONE = 70;
+const PAYOFFS: Reaction[] = ["heart", "sparkle", "delighted"];
+const BOOP_PAYOFF = 120;
+const BOOP_END = 560;
+const SQUASH_MS = 420;
+const DIZZY_AFTER = 4;
+const DIZZY_WINDOW = 1600;
+const DIZZY_END = 1100;
+
+const SQUASH: Keyframe[] = [
+  { transform: "scale(1, 1)", easing: "ease-in" },
+  { transform: "scale(1.10, 0.86)", offset: 0.18, easing: "ease-out" },
+  { transform: "scale(0.95, 1.08)", offset: 0.45, easing: "ease-in-out" },
+  { transform: "scale(1.03, 0.97)", offset: 0.72, easing: "ease-in-out" },
+  { transform: "scale(1, 1)" },
+];
+
+function cell(index: number): CSSProperties {
+  return { backgroundPosition: `${(index % 3) * 50}% ${Math.floor(index / 3) * 50}%` };
+}
+
+function wrap(angle: number) {
+  return Math.atan2(Math.sin(angle), Math.cos(angle));
+}
+
+const layer: CSSProperties = {
+  position: "absolute",
+  inset: 0,
+  backgroundSize: "300% 300%",
+  backgroundRepeat: "no-repeat",
+};
+
+export type MascotProps = {
+  /** Served or imported 3x3 sprite sheet containing the nine head directions. */
+  directions: string;
+  /** Served or imported 3x3 sprite sheet containing the nine reactions. */
+  reactions: string;
+  /** Square size in CSS pixels. */
+  size?: number;
+  /** Disable global pointer tracking when rendering a static catalog of variants. */
+  trackPointer?: boolean;
+  className?: string;
+  /** Accessible name announced by the boop button. */
+  label?: string;
+};
+
+/** A pointer-aware, clickable mascot backed by two aligned 3x3 sprite sheets. */
+export function Mascot({
+  directions,
+  reactions,
+  size = 140,
+  trackPointer = true,
+  className,
+  label = "mascot",
+}: MascotProps) {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const squashRef = useRef<HTMLSpanElement>(null);
+  const timersRef = useRef<number[]>([]);
+  const boopsRef = useRef({ count: 0, at: 0 });
+  const [direction, setDirection] = useState<Direction>("center");
+  const [reaction, setReaction] = useState<Reaction | null>(null);
+
+  useEffect(() => {
+    if (!trackPointer || !window.matchMedia("(hover: hover) and (pointer: fine)").matches) return;
+
+    let sector = -1;
+    let pointer: { x: number; y: number } | null = null;
+
+    const aim = () => {
+      const button = buttonRef.current;
+      if (!button || !pointer) return;
+
+      const box = button.getBoundingClientRect();
+      const dx = pointer.x - (box.left + box.width / 2);
+      const dy = pointer.y - (box.top + box.height / 2);
+
+      if (Math.hypot(dx, dy) < DEAD_ZONE) {
+        sector = -1;
+        setDirection("center");
+        return;
+      }
+
+      const angle = Math.atan2(dy, dx);
+      if (sector !== -1 && Math.abs(wrap(angle - sector * SECTOR)) < SECTOR / 2 + HYSTERESIS) return;
+
+      sector = (Math.round(angle / SECTOR) + CLOCKWISE.length) % CLOCKWISE.length;
+      setDirection(CLOCKWISE[sector]);
+    };
+
+    const onPointerMove = (event: PointerEvent) => {
+      pointer = { x: event.clientX, y: event.clientY };
+      aim();
+    };
+
+    window.addEventListener("pointermove", onPointerMove, { passive: true });
+    window.addEventListener("scroll", aim, { passive: true });
+    return () => {
+      window.removeEventListener("pointermove", onPointerMove);
+      window.removeEventListener("scroll", aim);
+    };
+  }, [trackPointer]);
+
+  useEffect(() => () => timersRef.current.forEach(window.clearTimeout), []);
+
+  const boop = () => {
+    timersRef.current.forEach(window.clearTimeout);
+    timersRef.current = [];
+
+    const later = (ms: number, next: Reaction | null) => {
+      timersRef.current.push(window.setTimeout(() => setReaction(next), ms));
+    };
+
+    const now = Date.now();
+    const boops = boopsRef.current;
+    boops.count = now - boops.at < DIZZY_WINDOW ? boops.count + 1 : 1;
+    boops.at = now;
+
+    if (boops.count >= DIZZY_AFTER) {
+      boops.count = 0;
+      setReaction("dizzy");
+      later(DIZZY_END, null);
+    } else {
+      setReaction("blink");
+      later(BOOP_PAYOFF, PAYOFFS[(boops.count - 1) % PAYOFFS.length]);
+      later(BOOP_END, null);
+    }
+
+    if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      squashRef.current?.animate(SQUASH, { duration: SQUASH_MS, easing: "linear" });
+    }
+  };
+
+  return (
+    <button
+      ref={buttonRef}
+      type="button"
+      onClick={boop}
+      aria-label={`Boop the ${label}`}
+      className={className}
+      style={{
+        position: "relative",
+        display: "block",
+        flexShrink: 0,
+        width: size,
+        height: size,
+        padding: 0,
+        border: 0,
+        background: "transparent",
+        appearance: "none",
+        cursor: "pointer",
+        userSelect: "none",
+      }}
+    >
+      <span
+        ref={squashRef}
+        style={{ position: "relative", display: "block", width: "100%", height: "100%", transformOrigin: "50% 78%" }}
+      >
+        <span
+          aria-hidden="true"
+          style={{
+            ...layer,
+            backgroundImage: `url(${directions})`,
+            ...cell(DIRECTIONS.indexOf(direction)),
+            opacity: reaction ? 0 : 1,
+          }}
+        />
+        <span
+          aria-hidden="true"
+          style={{
+            ...layer,
+            backgroundImage: `url(${reactions})`,
+            ...cell(REACTIONS.indexOf(reaction ?? "blink")),
+            opacity: reaction ? 1 : 0,
+          }}
+        />
+      </span>
+    </button>
+  );
+}

package/src/blocks/master-list/README.md

@@ -0,0 +1,21 @@
+# Master List
+
+`@devxcrew/react-ui/blocks/master-list` exports `MasterList`, `MasterForm`, and their types.
+
+Define one `MasterField[]` for both the list and the form. Each record has a string `id`; other
+field values can be strings, numbers, booleans, or empty values. Set `showInList: false` for
+form-only fields. Use `format` when a list value needs custom display. Select fields provide their
+own `options`.
+
+`MasterList` supports `table` and `cards` variants. Both show configured fields and optional view,
+edit, suspend, and delete actions. The table uses the shared Data Table block for search, sorting,
+and pagination. `MasterForm` supports `page` and `panel` layouts, controlled string values, and
+required-field checks.
+
+`MasterListDesk` supports dense operational lists. It provides a compact toolbar, quick field
+filters, selectable rows, row menus for edit, suspend, and delete actions, page-size controls, and a
+load-more action.
+
+The owning application supplies records, draft values, persistence, permissions, domain validation,
+and delete confirmation. Neither block stores records or calls an API. The UIUX gallery provides
+four separate in-memory pages at `/?template=master-list&variant=v1`, `v2`, `v3`, and `v4`.

package/src/blocks/master-list/index.ts

@@ -0,0 +1,12 @@
+export { MasterForm } from './master-form';
+export type { MasterFormProps } from './master-form';
+export { MasterList } from './master-list';
+export type { MasterListProps } from './master-list';
+export { MasterListDesk } from './master-list-desk';
+export type {
+  MasterListDeskColumn,
+  MasterListDeskFilter,
+  MasterListDeskProps,
+  MasterListDeskRecord,
+} from './master-list-desk';
+export type { MasterField, MasterFormValues, MasterRecord, MasterValue } from './types';

package/src/blocks/master-list/master-form.tsx

@@ -0,0 +1,157 @@
+import { useId, useState, type FormEvent } from 'react';
+import { Button } from '@devxcrew/react-ui/components/button';
+import { Field, FieldDescription, FieldError, FieldLabel } from '@devxcrew/react-ui/components/field';
+import { Input } from '@devxcrew/react-ui/components/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@devxcrew/react-ui/components/select';
+import { Textarea } from '@devxcrew/react-ui/components/textarea';
+import { cn } from '@devxcrew/react-ui/lib/utils';
+import type { MasterField, MasterFormValues } from './types';
+
+export type MasterFormProps = {
+  fields: readonly MasterField[];
+  values: MasterFormValues;
+  onValueChange: (fieldId: string, value: string) => void;
+  onSubmit: (values: MasterFormValues) => void | Promise<void>;
+  onCancel: () => void;
+  title: string;
+  description?: string;
+  submitLabel?: string;
+  variant?: 'page' | 'panel';
+};
+
+function fieldControl(
+  field: MasterField,
+  id: string,
+  value: string,
+  onChange: (value: string) => void,
+  invalid: boolean,
+) {
+  if (field.type === 'textarea') {
+    return (
+      <Textarea
+        aria-invalid={invalid}
+        aria-required={field.required}
+        id={id}
+        onChange={(event) => onChange(event.target.value)}
+        placeholder={field.placeholder}
+        value={value}
+      />
+    );
+  }
+  if (field.type === 'select') {
+    return (
+      <Select onValueChange={(next) => onChange(next ?? '')} value={value || null}>
+        <SelectTrigger aria-invalid={invalid} aria-required={field.required} className="w-full" id={id}>
+          <SelectValue placeholder={field.placeholder ?? `Select ${field.label.toLowerCase()}`} />
+        </SelectTrigger>
+        <SelectContent>
+          {field.options?.map((option) => (
+            <SelectItem key={option.value} value={option.value}>
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    );
+  }
+  return (
+    <Input
+      aria-invalid={invalid}
+      aria-required={field.required}
+      id={id}
+      onChange={(event) => onChange(event.target.value)}
+      placeholder={field.placeholder}
+      type={field.type ?? 'text'}
+      value={value}
+    />
+  );
+}
+
+export function MasterForm({
+  fields,
+  values,
+  onValueChange,
+  onSubmit,
+  onCancel,
+  title,
+  description,
+  submitLabel = 'Save',
+  variant = 'page',
+}: MasterFormProps) {
+  const formId = useId();
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [submitting, setSubmitting] = useState(false);
+
+  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    const nextErrors = Object.fromEntries(
+      fields
+        .filter((field) => field.required && !values[field.id]?.trim())
+        .map((field) => [field.id, `${field.label} is required.`]),
+    );
+    setErrors(nextErrors);
+    if (Object.keys(nextErrors).length) return;
+    setSubmitting(true);
+    try {
+      await onSubmit(values);
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <form
+      className={cn('w-full space-y-6', variant === 'panel' && 'rounded-lg border bg-card p-6')}
+      noValidate
+      onSubmit={handleSubmit}
+    >
+      <header className="border-b pb-4">
+        <h2 className="text-xl font-semibold tracking-tight">{title}</h2>
+        {description ? <p className="mt-1 text-sm text-muted-foreground">{description}</p> : null}
+      </header>
+      <div className="grid gap-5 sm:grid-cols-2">
+        {fields.map((field) => {
+          const id = `${formId}-${field.id}`;
+          const error = errors[field.id];
+          return (
+            <Field
+              className={field.type === 'textarea' ? 'sm:col-span-2' : undefined}
+              data-invalid={Boolean(error)}
+              key={field.id}
+            >
+              <FieldLabel htmlFor={id}>
+                {field.label}
+                {field.required ? (
+                  <span aria-hidden="true" className="text-destructive">
+                    {' '}
+                    *
+                  </span>
+                ) : null}
+              </FieldLabel>
+              {fieldControl(
+                field,
+                id,
+                values[field.id] ?? '',
+                (value) => {
+                  onValueChange(field.id, value);
+                  if (error) setErrors((current) => ({ ...current, [field.id]: '' }));
+                },
+                Boolean(error),
+              )}
+              {field.placeholder ? <FieldDescription>{field.placeholder}</FieldDescription> : null}
+              {error ? <FieldError>{error}</FieldError> : null}
+            </Field>
+          );
+        })}
+      </div>
+      <footer className="flex justify-end gap-2 border-t pt-4">
+        <Button onClick={onCancel} type="button" variant="outline">
+          Cancel
+        </Button>
+        <Button disabled={submitting} type="submit">
+          {submitting ? 'Saving…' : submitLabel}
+        </Button>
+      </footer>
+    </form>
+  );
+}