@schandlergarcia/sf-web-components 1.9.38 → 1.9.39

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>
+);

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

@@ -0,0 +1,34 @@
+import React from "react";
+import { Popover, PopoverTrigger, PopoverContent } from "./Popover";
+
+/**
+ * HeroUI v3 DatePicker — simple wrapper using Popover.
+ * Full implementation would integrate with react-day-picker.
+ *
+ * @example
+ *   import { DatePicker, DatePickerTrigger, DatePickerContent } from "@/components/library";
+ *   <DatePicker>
+ *     <DatePickerTrigger>
+ *       <button>Select date</button>
+ *     </DatePickerTrigger>
+ *     <DatePickerContent>
+ *       <DatePickerCalendar />
+ *     </DatePickerContent>
+ *   </DatePicker>
+ */
+export default function HeroUIDatePicker({ children, ...props }) {
+  return <Popover {...props}>{children}</Popover>;
+}
+
+export const DatePicker = HeroUIDatePicker;
+export const DatePickerTrigger = ({ children, date, dateFormat, placeholder, className = "", ...props }) => {
+  // Accept shadcn DatePicker props but just pass through as trigger
+  return <PopoverTrigger {...props}>{children}</PopoverTrigger>;
+};
+export const DatePickerContent = PopoverContent;
+export const DatePickerCalendar = ({ date, onSelect, ...props }) => (
+  <div className="p-4" {...props}>
+    <p className="text-sm text-slate-500">Calendar placeholder - integrate react-day-picker here</p>
+  </div>
+);
+export const DatePickerRangeTrigger = DatePickerTrigger;

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

@@ -0,0 +1,37 @@
+import React from "react";
+import { Modal } from "@heroui/react";
+
+/**
+ * HeroUI v3 Dialog — maps to Modal for shadcn compatibility.
+ *
+ * Sub-components via dot notation on the named `Modal` export:
+ *   Modal.Backdrop, Modal.Container, Modal.Dialog,
+ *   Modal.CloseTrigger, Modal.Header, Modal.Icon,
+ *   Modal.Heading, Modal.Body, Modal.Footer
+ *
+ * @example
+ *   import { Dialog, DialogTrigger, DialogContent } from "@/components/library";
+ *   <Dialog>
+ *     <DialogTrigger>Open</DialogTrigger>
+ *     <DialogContent>
+ *       <DialogHeader><DialogTitle>Title</DialogTitle></DialogHeader>
+ *       <DialogDescription>Content</DialogDescription>
+ *       <DialogFooter>Actions</DialogFooter>
+ *     </DialogContent>
+ *   </Dialog>
+ */
+export default function HeroUIDialog(props) {
+  return <Modal {...props} />;
+}
+
+// Shadcn-compatible exports
+export const Dialog = HeroUIDialog;
+export const DialogTrigger = Modal.Trigger || (props => <button {...props} />);
+export const DialogPortal = ({ children }) => <>{children}</>;
+export const DialogClose = Modal.CloseTrigger || (props => <button {...props} />);
+export const DialogOverlay = Modal.Backdrop || (props => <div {...props} />);
+export const DialogContent = Modal.Dialog || Modal.Container || (props => <div {...props} />);
+export const DialogHeader = Modal.Header || (props => <div {...props} />);
+export const DialogFooter = Modal.Footer || (props => <div {...props} />);
+export const DialogTitle = Modal.Heading || (props => <h2 {...props} />);
+export const DialogDescription = (props) => <p {...props} />;

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

@@ -0,0 +1,32 @@
+import React from "react";
+import { Drawer } from "@heroui/react";
+
+/**
+ * HeroUI v3 Drawer — compound component.
+ *
+ * Sub-components via dot notation on the named `Drawer` export:
+ *   Drawer.Backdrop, Drawer.Content, Drawer.Dialog,
+ *   Drawer.Header, Drawer.Heading, Drawer.Body, Drawer.Footer,
+ *   Drawer.Handle, Drawer.CloseTrigger
+ *
+ * @example
+ *   import { Drawer } from "@/components/library";
+ *   <Drawer>
+ *     <Button>Open</Button>
+ *     <Drawer.Backdrop>
+ *       <Drawer.Content placement="right">
+ *         <Drawer.Dialog>
+ *           <Drawer.CloseTrigger />
+ *           <Drawer.Header><Drawer.Heading>Details</Drawer.Heading></Drawer.Header>
+ *           <Drawer.Body>…</Drawer.Body>
+ *           <Drawer.Footer>…</Drawer.Footer>
+ *         </Drawer.Dialog>
+ *       </Drawer.Content>
+ *     </Drawer.Backdrop>
+ *   </Drawer>
+ */
+export default function HeroUIDrawer(props) {
+  return <Drawer {...props} />;
+}
+
+export { Drawer };

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

@@ -0,0 +1,28 @@
+import React from "react";
+import { Dropdown } from "@heroui/react";
+
+/**
+ * HeroUI v3 Dropdown — compound component.
+ *
+ * Sub-components via dot notation on the named `Dropdown` export:
+ *   Dropdown.Trigger, Dropdown.Popover, Dropdown.Menu,
+ *   Dropdown.Item, Dropdown.Section, Dropdown.ItemIndicator,
+ *   Dropdown.SubmenuTrigger, Dropdown.SubmenuIndicator
+ *
+ * @example
+ *   import { Dropdown } from "@/components/library";
+ *   <Dropdown>
+ *     <Button>Actions</Button>
+ *     <Dropdown.Popover>
+ *       <Dropdown.Menu onAction={(key) => console.log(key)}>
+ *         <Dropdown.Item id="edit" textValue="Edit"><Label>Edit</Label></Dropdown.Item>
+ *         <Dropdown.Item id="delete" textValue="Delete" variant="danger"><Label>Delete</Label></Dropdown.Item>
+ *       </Dropdown.Menu>
+ *     </Dropdown.Popover>
+ *   </Dropdown>
+ */
+export default function HeroUIDropdown(props) {
+  return <Dropdown {...props} />;
+}
+
+export { Dropdown };

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

@@ -0,0 +1,51 @@
+import React from "react";
+
+/**
+ * HeroUI v3 Field components — simple wrappers for form field layout.
+ *
+ * @example
+ *   import { Field, FieldLabel, FieldError } from "@/components/library";
+ *   <Field>
+ *     <FieldLabel>Name</FieldLabel>
+ *     <Input />
+ *     <FieldError>Required</FieldError>
+ *   </Field>
+ */
+export default function HeroUIField({ className = "", children, ...props }) {
+  return (
+    <div className={`flex flex-col gap-1.5 ${className}`} {...props}>
+      {children}
+    </div>
+  );
+}
+
+export const Field = HeroUIField;
+
+export const FieldLabel = ({ className = "", htmlFor, children, ...props }) => (
+  <label
+    htmlFor={htmlFor}
+    className={`text-sm font-medium text-slate-700 dark:text-slate-200 ${className}`}
+    {...props}
+  >
+    {children}
+  </label>
+);
+
+export const FieldDescription = ({ className = "", children, ...props }) => (
+  <p className={`text-xs text-slate-500 dark:text-slate-400 ${className}`} {...props}>
+    {children}
+  </p>
+);
+
+export const FieldError = ({ className = "", errors, children, ...props }) => {
+  // Support both children and errors prop
+  const errorContent = errors?.length > 0 ? errors.join(", ") : children;
+
+  if (!errorContent) return null;
+
+  return (
+    <p className={`text-xs text-red-600 dark:text-red-400 ${className}`} {...props}>
+      {errorContent}
+    </p>
+  );
+};

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

@@ -0,0 +1,6 @@
+import React from "react";
+import { Input } from "@heroui/react";
+
+export default function HeroUIInput(props) {
+  return <Input {...props} />;
+}

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

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

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

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

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

@@ -0,0 +1,32 @@
+import React from "react";
+import { Modal } from "@heroui/react";
+
+/**
+ * HeroUI v3 Modal — compound component.
+ *
+ * Sub-components via dot notation on the named `Modal` export:
+ *   Modal.Backdrop, Modal.Container, Modal.Dialog,
+ *   Modal.CloseTrigger, Modal.Header, Modal.Icon,
+ *   Modal.Heading, Modal.Body, Modal.Footer
+ *
+ * @example
+ *   import { Modal } from "@/components/library";
+ *   <Modal>
+ *     <Button>Open</Button>
+ *     <Modal.Backdrop>
+ *       <Modal.Container>
+ *         <Modal.Dialog>
+ *           <Modal.CloseTrigger />
+ *           <Modal.Header><Modal.Heading>Title</Modal.Heading></Modal.Header>
+ *           <Modal.Body>…</Modal.Body>
+ *           <Modal.Footer>…</Modal.Footer>
+ *         </Modal.Dialog>
+ *       </Modal.Container>
+ *     </Modal.Backdrop>
+ *   </Modal>
+ */
+export default function HeroUIModal(props) {
+  return <Modal {...props} />;
+}
+
+export { Modal };

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

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

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

@@ -0,0 +1,64 @@
+import React from "react";
+
+/**
+ * HeroUI v3 Popover — simple popover for shadcn compatibility.
+ * Using native HTML/CSS since HeroUI v3 doesn't have a Popover component.
+ *
+ * @example
+ *   import { Popover, PopoverTrigger, PopoverContent } from "@/components/library";
+ *   <Popover>
+ *     <PopoverTrigger>Open</PopoverTrigger>
+ *     <PopoverContent>Content</PopoverContent>
+ *   </Popover>
+ */
+export default function HeroUIPopover({ children, open, onOpenChange, ...props }) {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const isControlled = open !== undefined;
+  const actualOpen = isControlled ? open : isOpen;
+
+  const handleOpenChange = (newOpen) => {
+    if (!isControlled) setIsOpen(newOpen);
+    onOpenChange?.(newOpen);
+  };
+
+  return (
+    <div className="relative inline-block" {...props}>
+      {React.Children.map(children, (child) => {
+        if (React.isValidElement(child)) {
+          return React.cloneElement(child, { open: actualOpen, onOpenChange: handleOpenChange });
+        }
+        return child;
+      })}
+    </div>
+  );
+}
+
+export const Popover = HeroUIPopover;
+
+export const PopoverTrigger = ({ children, open, onOpenChange, ...props }) => {
+  const handleClick = () => onOpenChange?.(!open);
+
+  return React.cloneElement(children, {
+    ...props,
+    onClick: handleClick,
+  });
+};
+
+export const PopoverContent = ({ children, open, className = "", align = "center", sideOffset = 4, ...props }) => {
+  if (!open) return null;
+
+  const alignClasses = {
+    start: "left-0",
+    center: "left-1/2 -translate-x-1/2",
+    end: "right-0"
+  };
+
+  return (
+    <div
+      className={`absolute z-50 mt-${sideOffset} w-72 rounded-md border border-slate-200 bg-white p-4 text-slate-900 shadow-md dark:border-slate-800 dark:bg-slate-900 dark:text-slate-50 ${alignClasses[align] || alignClasses.center} ${className}`}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};

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

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