@schandlergarcia/sf-web-components 1.9.37 → 1.9.39

package/src/components/library/forms/FormModal.jsx

@@ -0,0 +1,201 @@
+import React, { useEffect, useCallback } from "react";
+import { createPortal } from "react-dom";
+import { motion, AnimatePresence } from "framer-motion";
+import { XMarkIcon } from "@heroicons/react/24/outline";
+import Spinner from "../ui/Spinner";
+import FormRenderer from "./FormRenderer";
+import useFormState from "./useFormState";
+
+const OVERLAY_VARIANTS = {
+  hidden: { opacity: 0 },
+  visible: { opacity: 1 },
+};
+
+const PANEL_VARIANTS = {
+  hidden: { opacity: 0, y: 24, scale: 0.97 },
+  visible: { opacity: 1, y: 0, scale: 1, transition: { type: "spring", damping: 25, stiffness: 350 } },
+  exit: { opacity: 0, y: 16, scale: 0.97, transition: { duration: 0.15 } },
+};
+
+/**
+ * Size → max-width mapping.
+ */
+const SIZE_CLASSES = {
+  sm: "max-w-md",
+  md: "max-w-xl",
+  lg: "max-w-2xl",
+  xl: "max-w-4xl",
+};
+
+/**
+ * Modal dialog for creating or editing records.
+ * Wraps FormRenderer + useFormState in an animated overlay.
+ *
+ * @param {boolean}  isOpen — whether the modal is visible
+ * @param {Function} onClose — close handler
+ * @param {string}   title — modal title (e.g. "Edit Service", "New Incident")
+ * @param {string}   subtitle — optional subtitle
+ * @param {Array}    sections — form schema sections
+ * @param {Object}   initialValues — prefill for editing (empty = create mode)
+ * @param {Function} onSubmit — async (values) => void, called on valid submit
+ * @param {string}   submitLabel — submit button text (default: "Save")
+ * @param {string}   cancelLabel — cancel button text (default: "Cancel")
+ * @param {string}   size — "sm" | "md" | "lg" | "xl" (default: "lg")
+ * @param {boolean}  destructive — if true, submit button is red (for delete confirmations)
+ */
+export default function FormModal({
+  isOpen = false,
+  onClose,
+  title,
+  subtitle,
+  sections = [],
+  initialValues = {},
+  onSubmit,
+  submitLabel = "Save",
+  cancelLabel = "Cancel",
+  size = "lg",
+  destructive = false,
+  minSubmitMs,
+}) {
+  const form = useFormState({
+    initialValues,
+    sections,
+    minSubmitMs,
+    onSubmit: async (vals) => {
+      await onSubmit?.(vals);
+      onClose?.();
+    },
+  });
+
+  useEffect(() => {
+    if (isOpen) form.reset();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen]);
+
+  const onKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Escape") onClose?.();
+    },
+    [onClose]
+  );
+
+  useEffect(() => {
+    if (!isOpen) return;
+    document.addEventListener("keydown", onKeyDown);
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      document.body.style.overflow = "";
+    };
+  }, [isOpen, onKeyDown]);
+
+  if (typeof document === "undefined") return null;
+
+  return createPortal(
+    <AnimatePresence>
+      {isOpen ? (
+        <div className="fixed inset-0 z-50 flex items-start justify-center px-4 pt-[10vh] sm:pt-[12vh]">
+          {/* Backdrop */}
+          <motion.div
+            key="overlay"
+            className="fixed inset-0 bg-black/40 backdrop-blur-sm"
+            variants={OVERLAY_VARIANTS}
+            initial="hidden"
+            animate="visible"
+            exit="hidden"
+            transition={{ duration: 0.2 }}
+            onClick={onClose}
+            aria-hidden="true"
+          />
+
+          {/* Panel */}
+          <motion.div
+            key="panel"
+            role="dialog"
+            aria-modal="true"
+            aria-label={title}
+            variants={PANEL_VARIANTS}
+            initial="hidden"
+            animate="visible"
+            exit="exit"
+            className={[
+              "relative z-10 flex w-full flex-col rounded-xl border border-slate-200 bg-white shadow-xl dark:border-slate-800 dark:bg-slate-900",
+              SIZE_CLASSES[size] ?? SIZE_CLASSES.lg,
+              "max-h-[80vh]",
+            ].join(" ")}
+          >
+            {/* Header */}
+            <div className="flex items-start justify-between border-b border-slate-100 px-6 py-4 dark:border-slate-800">
+              <div>
+                <h2 className="text-base font-semibold text-slate-900 dark:text-slate-50">
+                  {title}
+                </h2>
+                {subtitle ? (
+                  <p className="mt-0.5 text-sm text-slate-500 dark:text-slate-400">{subtitle}</p>
+                ) : null}
+              </div>
+              <button
+                type="button"
+                onClick={onClose}
+                className="rounded-lg p-1.5 text-slate-400 transition hover:bg-slate-100 hover:text-slate-600 dark:text-slate-500 dark:hover:bg-slate-800 dark:hover:text-slate-300"
+                aria-label="Close"
+              >
+                <XMarkIcon className="h-5 w-5" />
+              </button>
+            </div>
+
+            {/* Body — scrollable */}
+            <div className="flex-1 overflow-y-auto px-6 py-5">
+              <FormRenderer
+                sections={sections}
+                values={form.values}
+                errors={form.errors}
+                touched={form.touched}
+                onFieldChange={form.setValue}
+                onFieldBlur={form.setTouched}
+                formError={form.errors._form}
+              />
+            </div>
+
+            {/* Footer */}
+            <div className="flex items-center justify-between border-t border-slate-100 px-6 py-4 dark:border-slate-800">
+              <div className="text-xs text-slate-400 dark:text-slate-500">
+                {form.isDirty ? "Unsaved changes" : "\u00A0"}
+              </div>
+              <div className="flex items-center gap-3">
+                <button
+                  type="button"
+                  onClick={onClose}
+                  className="inline-flex h-9 items-center rounded-lg border border-slate-200 bg-white px-4 text-sm font-medium text-slate-700 shadow-sm transition hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700"
+                >
+                  {cancelLabel}
+                </button>
+                <button
+                  type="button"
+                  onClick={form.handleSubmit}
+                  disabled={form.isSubmitting}
+                  className={[
+                    "inline-flex h-9 items-center gap-2 rounded-lg border border-transparent px-4 text-sm font-medium text-white shadow-sm transition",
+                    "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-900",
+                    "disabled:cursor-not-allowed disabled:opacity-60",
+                    destructive
+                      ? "bg-red-600 hover:bg-red-500 focus-visible:ring-red-500 dark:bg-red-600 dark:hover:bg-red-500"
+                      : "bg-brand-600 hover:bg-brand-500 focus-visible:ring-brand-500 dark:bg-brand-500 dark:hover:bg-brand-400",
+                  ].join(" ")}
+                >
+                  {form.isSubmitting ? (
+                    <>
+                      <Spinner size="sm" tone="white" label="Submitting" />
+                      Saving…
+                    </>
+                  ) : submitLabel}
+                </button>
+              </div>
+            </div>
+          </motion.div>
+        </div>
+      ) : null}
+    </AnimatePresence>,
+    document.body
+  );
+}

package/src/components/library/forms/FormRenderer.jsx

@@ -0,0 +1,46 @@
+import React from "react";
+import FormSection from "./FormSection";
+
+/**
+ * Renders a complete form from a schema definition.
+ * Pairs with useFormState for state management.
+ *
+ * @param {Array}    sections — form schema sections
+ * @param {Object}   values   — current form values
+ * @param {Object}   errors   — current validation errors
+ * @param {Object}   touched  — which fields have been touched
+ * @param {Function} onFieldChange — (fieldId, value) => void
+ * @param {Function} onFieldBlur — (fieldId) => void
+ * @param {string}   formError — top-level form error (e.g. submission failure)
+ */
+export default function FormRenderer({
+  sections = [],
+  values = {},
+  errors = {},
+  touched = {},
+  onFieldChange,
+  onFieldBlur,
+  formError,
+}) {
+  return (
+    <div className="space-y-8">
+      {formError ? (
+        <div className="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-800 dark:bg-red-950/30 dark:text-red-300">
+          {formError}
+        </div>
+      ) : null}
+
+      {sections.map((section, idx) => (
+        <FormSection
+          key={section.id ?? idx}
+          section={section}
+          values={values}
+          errors={errors}
+          touched={touched}
+          onFieldChange={onFieldChange}
+          onFieldBlur={onFieldBlur}
+        />
+      ))}
+    </div>
+  );
+}

package/src/components/library/forms/FormSection.jsx

@@ -0,0 +1,69 @@
+import React from "react";
+import FormField from "./FormField";
+
+/**
+ * Fields that naturally span full width by default.
+ */
+const FULL_WIDTH_TYPES = new Set([
+  "textarea",
+  "radio",
+  "checkboxGroup",
+]);
+
+/**
+ * A titled section of a form with a 2-column grid layout.
+ * Fields default to 1-column (half width) unless the type is naturally
+ * full-width or the field specifies `colSpan: 2`.
+ */
+export default function FormSection({
+  section,
+  values,
+  errors,
+  touched,
+  onFieldChange,
+  onFieldBlur,
+}) {
+  const fields = section.fields ?? [];
+  if (!fields.length) return null;
+
+  return (
+    <fieldset className="space-y-4">
+      {section.title ? (
+        <div className="border-b border-slate-100 pb-3 dark:border-slate-800">
+          <legend className="text-sm font-semibold text-slate-900 dark:text-slate-50">
+            {section.title}
+          </legend>
+          {section.description ? (
+            <p className="mt-0.5 text-xs text-slate-500 dark:text-slate-400">
+              {section.description}
+            </p>
+          ) : null}
+        </div>
+      ) : null}
+
+      <div className="grid grid-cols-1 gap-x-4 gap-y-5 sm:grid-cols-2">
+        {fields.map((field) => {
+          const span =
+            field.colSpan ??
+            (FULL_WIDTH_TYPES.has(field.type) ? 2 : 1);
+
+          return (
+            <div
+              key={field.id}
+              className={span === 2 ? "sm:col-span-2" : undefined}
+            >
+              <FormField
+                field={field}
+                value={values[field.id]}
+                error={errors[field.id]}
+                touched={touched[field.id]}
+                onChange={(val) => onFieldChange(field.id, val)}
+                onBlur={() => onFieldBlur(field.id)}
+              />
+            </div>
+          );
+        })}
+      </div>
+    </fieldset>
+  );
+}

package/src/components/library/forms/index.jsx

@@ -0,0 +1,5 @@
+export { default as FormModal } from "./FormModal";
+export { default as FormRenderer } from "./FormRenderer";
+export { default as FormSection } from "./FormSection";
+export { default as FormField } from "./FormField";
+export { default as useFormState } from "./useFormState";

package/src/components/library/forms/useFormState.jsx

@@ -0,0 +1,165 @@
+import { useState, useMemo, useCallback, useRef } from "react";
+
+const DEFAULT_MIN_SUBMIT_MS = 4000;
+
+/**
+ * Extracts all field ids and their default values from a form schema.
+ */
+function buildDefaults(sections) {
+  const defaults = {};
+  for (const section of sections) {
+    for (const field of section.fields ?? []) {
+      if (field.type === "checkboxGroup") {
+        defaults[field.id] = [];
+      } else if (field.type === "toggle" || field.type === "checkbox") {
+        defaults[field.id] = false;
+      } else {
+        defaults[field.id] = "";
+      }
+    }
+  }
+  return defaults;
+}
+
+/**
+ * Runs validation for all fields.
+ * Returns an object of { fieldId: errorMessage } (empty object = valid).
+ */
+function runValidation(values, sections) {
+  const errors = {};
+  for (const section of sections) {
+    for (const field of section.fields ?? []) {
+      const val = values[field.id];
+
+      if (field.required) {
+        const empty =
+          val === undefined ||
+          val === null ||
+          val === "" ||
+          (Array.isArray(val) && val.length === 0);
+        if (empty) {
+          errors[field.id] = field.requiredMessage ?? `${field.label ?? field.id} is required`;
+          continue;
+        }
+      }
+
+      if (field.validate) {
+        const msg = field.validate(val, values);
+        if (msg) errors[field.id] = msg;
+      }
+    }
+  }
+  return errors;
+}
+
+/**
+ * Form state management hook.
+ *
+ * @param {Object} options
+ * @param {Object}  options.initialValues — prefill for editing (merged over field defaults)
+ * @param {Array}   options.sections — form schema sections (used for defaults + validation)
+ * @param {Function} options.onSubmit — called with (values) when form is valid
+ * @param {number}  options.minSubmitMs — minimum time the submit spinner shows (default 4000ms, set 0 to disable)
+ *
+ * @returns {Object} { values, errors, touched, isDirty, isValid, isSubmitting,
+ *                     setValue, setValues, setTouched, validate, reset, handleSubmit }
+ */
+export default function useFormState({ initialValues = {}, sections = [], onSubmit, minSubmitMs = DEFAULT_MIN_SUBMIT_MS } = {}) {
+  const defaults = useMemo(() => buildDefaults(sections), [sections]);
+  const merged = useMemo(() => ({ ...defaults, ...initialValues }), [defaults, initialValues]);
+
+  const [values, setValuesState] = useState(merged);
+  const [errors, setErrors] = useState({});
+  const [touched, setTouchedState] = useState({});
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const submitRef = useRef(onSubmit);
+  submitRef.current = onSubmit;
+
+  const isDirty = useMemo(() => {
+    return Object.keys(merged).some((k) => {
+      const a = merged[k];
+      const b = values[k];
+      if (Array.isArray(a) && Array.isArray(b)) {
+        return a.length !== b.length || a.some((v, i) => v !== b[i]);
+      }
+      return a !== b;
+    });
+  }, [merged, values]);
+
+  const setValue = useCallback((id, value) => {
+    setValuesState((prev) => ({ ...prev, [id]: value }));
+    setErrors((prev) => {
+      if (!prev[id]) return prev;
+      const next = { ...prev };
+      delete next[id];
+      return next;
+    });
+  }, []);
+
+  const setValues = useCallback((vals) => {
+    setValuesState((prev) => ({ ...prev, ...vals }));
+  }, []);
+
+  const setTouched = useCallback((id) => {
+    setTouchedState((prev) => (prev[id] ? prev : { ...prev, [id]: true }));
+  }, []);
+
+  const validate = useCallback(() => {
+    const errs = runValidation(values, sections);
+    setErrors(errs);
+    const allTouched = {};
+    for (const section of sections) {
+      for (const field of section.fields ?? []) {
+        allTouched[field.id] = true;
+      }
+    }
+    setTouchedState(allTouched);
+    return Object.keys(errs).length === 0;
+  }, [values, sections]);
+
+  const reset = useCallback(() => {
+    setValuesState(merged);
+    setErrors({});
+    setTouchedState({});
+  }, [merged]);
+
+  const handleSubmit = useCallback(
+    async (e) => {
+      e?.preventDefault?.();
+      const valid = validate();
+      if (!valid) return false;
+
+      setIsSubmitting(true);
+      try {
+        const delay = minSubmitMs > 0
+          ? new Promise((r) => setTimeout(r, minSubmitMs))
+          : Promise.resolve();
+        await Promise.all([submitRef.current?.(values), delay]);
+        return true;
+      } catch (err) {
+        setErrors((prev) => ({ ...prev, _form: err?.message ?? "Submission failed" }));
+        return false;
+      } finally {
+        setIsSubmitting(false);
+      }
+    },
+    [validate, values, minSubmitMs]
+  );
+
+  const isValid = Object.keys(errors).length === 0;
+
+  return {
+    values,
+    errors,
+    touched,
+    isDirty,
+    isValid,
+    isSubmitting,
+    setValue,
+    setValues,
+    setTouched,
+    validate,
+    reset,
+    handleSubmit,
+  };
+}

package/src/components/library/heroui/Accordion.jsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Accordion } from "@heroui/react";
+
+/**
+ * HeroUI v3 Accordion — compound component.
+ *
+ * Sub-components via dot notation on the named `Accordion` export:
+ *   Accordion.Item, Accordion.Heading, Accordion.Trigger,
+ *   Accordion.Panel, Accordion.Body, Accordion.Indicator
+ *
+ * @example
+ *   import { Accordion } from "@/components/library";
+ *   <Accordion>
+ *     <Accordion.Item>
+ *       <Accordion.Heading>
+ *         <Accordion.Trigger>Section 1<Accordion.Indicator /></Accordion.Trigger>
+ *       </Accordion.Heading>
+ *       <Accordion.Panel><Accordion.Body>Content</Accordion.Body></Accordion.Panel>
+ *     </Accordion.Item>
+ *   </Accordion>
+ */
+export default function HeroUIAccordion({ variant = "default", ...props }) {
+  return <Accordion variant={variant} {...props} />;
+}
+
+export { Accordion };

package/src/components/library/heroui/Alert.jsx

@@ -0,0 +1,8 @@
+import React from "react";
+import { Alert } from "@heroui/react";
+
+export default function HeroUIAlert({ variant = "default", ...props }) {
+  return <Alert variant={variant} {...props} />;
+}
+
+export { Alert };

package/src/components/library/heroui/Badge.jsx

@@ -0,0 +1,8 @@
+import React from "react";
+import { Badge } from "@heroui/react";
+
+export default function HeroUIBadge({ children, ...props }) {
+  return <Badge {...props}>{children}</Badge>;
+}
+
+export { Badge };

package/src/components/library/heroui/Breadcrumbs.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { Breadcrumbs } from "@heroui/react";
+
+/**
+ * HeroUI v3 Breadcrumbs — compound component.
+ *
+ * Sub-components via dot notation on the named `Breadcrumbs` export:
+ *   Breadcrumbs.Item
+ *
+ * @example
+ *   import { Breadcrumbs } from "@/components/library";
+ *   <Breadcrumbs>
+ *     <Breadcrumbs.Item href="/">Home</Breadcrumbs.Item>
+ *     <Breadcrumbs.Item href="/settings">Settings</Breadcrumbs.Item>
+ *     <Breadcrumbs.Item>Profile</Breadcrumbs.Item>
+ *   </Breadcrumbs>
+ */
+export default function HeroUIBreadcrumbs(props) {
+  return <Breadcrumbs {...props} />;
+}
+
+export { Breadcrumbs };

package/src/components/library/heroui/Button.jsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { Button as HeroButton } from "@heroui/react";
+
+/**
+ * HeroUI v3 Button wrapper with shadcn compatibility.
+ *
+ * Maps shadcn variants to HeroUI:
+ * - primary/secondary/destructive -> solid
+ * - outline -> bordered
+ * - ghost -> light
+ */
+export default function HeroUIButton({
+  variant = "primary",
+  size = "md",
+  fullWidth,
+  onClick,
+  children,
+  className = "",
+  ...props
+}) {
+  // Map shadcn variants to HeroUI variants
+  const variantMap = {
+    primary: "solid",
+    secondary: "solid",
+    destructive: "solid",
+    outline: "bordered",
+    ghost: "light"
+  };
+
+  // Map shadcn variants to HeroUI colors
+  const colorMap = {
+    primary: "primary",
+    secondary: "default",
+    destructive: "danger",
+    outline: "default",
+    ghost: "default"
+  };
+
+  const heroVariant = variantMap[variant] || "solid";
+  const heroColor = colorMap[variant] || "primary";
+
+  return (
+    <HeroButton
+      variant={heroVariant}
+      color={heroColor}
+      size={size}
+      fullWidth={fullWidth}
+      onPress={onClick}
+      className={className}
+      {...props}
+    >
+      {children}
+    </HeroButton>
+  );
+}
+
+// Also export as Button for shadcn compatibility
+export const Button = HeroUIButton;

package/src/components/library/heroui/Card.jsx

@@ -0,0 +1,8 @@
+import React from "react";
+import { Card } from "@heroui/react";
+
+export default function HeroUICard({ children, ...props }) {
+  return <Card {...props}>{children}</Card>;
+}
+
+export { Card };

package/src/components/library/heroui/Collapsible.jsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { Accordion } from "@heroui/react";
+
+/**
+ * HeroUI v3 Collapsible — maps to Accordion for shadcn compatibility.
+ *
+ * @example
+ *   import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@/components/library";
+ *   <Collapsible open={isOpen} onOpenChange={setIsOpen}>
+ *     <CollapsibleTrigger>Toggle</CollapsibleTrigger>
+ *     <CollapsibleContent>Content</CollapsibleContent>
+ *   </Collapsible>
+ */
+export default function HeroUICollapsible({ open, onOpenChange, children, ...props }) {
+  // Map shadcn props to HeroUI Accordion
+  const selectedKeys = open ? ["item"] : [];
+
+  return (
+    <Accordion
+      selectedKeys={selectedKeys}
+      onSelectionChange={(keys) => {
+        const isOpen = Array.from(keys).includes("item");
+        onOpenChange?.(isOpen);
+      }}
+      {...props}
+    >
+      <Accordion.Item key="item" aria-label="Collapsible content">
+        {children}
+      </Accordion.Item>
+    </Accordion>
+  );
+}
+
+export const Collapsible = HeroUICollapsible;
+
+export const CollapsibleTrigger = ({ children, ...props }) => (
+  <Accordion.Trigger {...props}>{children}</Accordion.Trigger>
+);
+
+export const CollapsibleContent = ({ children, ...props }) => (
+  <Accordion.Panel {...props}>{children}</Accordion.Panel>
+);