@schandlergarcia/sf-web-components 1.9.28 → 1.9.30

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

@@ -1,185 +0,0 @@
-import { useState, useMemo, useCallback, useRef } from "react";
-import type { FormSection } from "./FormRenderer";
-
-const DEFAULT_MIN_SUBMIT_MS = 4000;
-
-interface UseFormStateOptions {
-  initialValues?: Record<string, unknown>;
-  sections?: FormSection[];
-  onSubmit?: (values: Record<string, unknown>) => void | Promise<void>;
-  minSubmitMs?: number;
-}
-
-interface UseFormStateReturn {
-  values: Record<string, unknown>;
-  errors: Record<string, string>;
-  touched: Record<string, boolean>;
-  isDirty: boolean;
-  isValid: boolean;
-  isSubmitting: boolean;
-  setValue: (id: string, value: unknown) => void;
-  setValues: (vals: Record<string, unknown>) => void;
-  setTouched: (id: string) => void;
-  validate: () => boolean;
-  reset: () => void;
-  handleSubmit: (e?: React.FormEvent) => Promise<boolean>;
-}
-
-/**
- * Extracts all field ids and their default values from a form schema.
- */
-function buildDefaults(sections: FormSection[]): Record<string, unknown> {
-  const defaults: Record<string, unknown> = {};
-  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: Record<string, unknown>, sections: FormSection[]): Record<string, string> {
-  const errors: Record<string, string> = {};
-  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.
- */
-export default function useFormState({
-  initialValues = {},
-  sections = [],
-  onSubmit,
-  minSubmitMs = DEFAULT_MIN_SUBMIT_MS
-}: UseFormStateOptions = {}): UseFormStateReturn {
-  const defaults = useMemo(() => buildDefaults(sections), [sections]);
-  const merged = useMemo(() => ({ ...defaults, ...initialValues }), [defaults, initialValues]);
-
-  const [values, setValuesState] = useState<Record<string, unknown>>(merged);
-  const [errors, setErrors] = useState<Record<string, string>>({});
-  const [touched, setTouchedState] = useState<Record<string, boolean>>({});
-  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: string, value: unknown) => {
-    setValuesState((prev) => ({ ...prev, [id]: value }));
-    setErrors((prev) => {
-      if (!prev[id]) return prev;
-      const next = { ...prev };
-      delete next[id];
-      return next;
-    });
-  }, []);
-
-  const setValues = useCallback((vals: Record<string, unknown>) => {
-    setValuesState((prev) => ({ ...prev, ...vals }));
-  }, []);
-
-  const setTouched = useCallback((id: string) => {
-    setTouchedState((prev) => (prev[id] ? prev : { ...prev, [id]: true }));
-  }, []);
-
-  const validate = useCallback(() => {
-    const errs = runValidation(values, sections);
-    setErrors(errs);
-    const allTouched: Record<string, boolean> = {};
-    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?: React.FormEvent) => {
-      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) {
-        const errorMessage = err instanceof Error ? err.message : "Submission failed";
-        setErrors((prev) => ({ ...prev, _form: errorMessage }));
-        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.tsx

@@ -1,31 +0,0 @@
-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 interface HeroUIAccordionProps {
-  variant?: string;
-  [key: string]: any;
-}
-
-export default function HeroUIAccordion({ variant = "default", ...props }: HeroUIAccordionProps) {
-  const AccordionAny = Accordion as any;
-  return <AccordionAny variant={variant} {...props} />;
-}
-
-export { Accordion };

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

@@ -1,13 +0,0 @@
-import { Alert } from "@heroui/react";
-
-export interface HeroUIAlertProps {
-  variant?: string;
-  [key: string]: any;
-}
-
-export default function HeroUIAlert({ variant = "default", ...props }: HeroUIAlertProps) {
-  const AlertAny = Alert as any;
-  return <AlertAny variant={variant} {...props} />;
-}
-
-export { Alert };

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

@@ -1,14 +0,0 @@
-import type { ReactNode } from "react";
-import { Badge } from "@heroui/react";
-import type { BadgeProps } from "@heroui/react";
-
-export interface HeroUIBadgeProps extends BadgeProps {
-  children?: ReactNode;
-}
-
-export default function HeroUIBadge({ children, ...props }: HeroUIBadgeProps) {
-  return <Badge {...props}>{children}</Badge>;
-}
-
-export { Badge };
-export type { BadgeProps };

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

@@ -1,25 +0,0 @@
-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 interface HeroUIBreadcrumbsProps {
-  [key: string]: any;
-}
-
-export default function HeroUIBreadcrumbs(props: HeroUIBreadcrumbsProps) {
-  return <Breadcrumbs {...props} />;
-}
-
-export { Breadcrumbs };

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

@@ -1,76 +0,0 @@
-import type { ReactNode } 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
- */
-
-type ShadcnVariant = "primary" | "secondary" | "destructive" | "outline" | "ghost";
-
-export interface HeroUIButtonProps {
-  variant?: ShadcnVariant;
-  size?: "sm" | "md" | "lg";
-  fullWidth?: boolean;
-  onClick?: () => void;
-  children?: ReactNode;
-  className?: string;
-  disabled?: boolean;
-  type?: "button" | "submit" | "reset";
-  [key: string]: any;
-}
-
-export default function HeroUIButton({
-  variant = "primary",
-  size = "md",
-  fullWidth,
-  onClick,
-  children,
-  className = "",
-  ...props
-}: HeroUIButtonProps) {
-  // Map shadcn variants to HeroUI variants
-  const variantMap: Record<ShadcnVariant, string> = {
-    primary: "solid",
-    secondary: "solid",
-    destructive: "solid",
-    outline: "bordered",
-    ghost: "light"
-  };
-
-  // Map shadcn variants to HeroUI colors
-  const colorMap: Record<ShadcnVariant, string> = {
-    primary: "primary",
-    secondary: "default",
-    destructive: "danger",
-    outline: "default",
-    ghost: "default"
-  };
-
-  const heroVariant = variantMap[variant];
-  const heroColor = colorMap[variant];
-
-  const HeroButtonAny = HeroButton as any;
-
-  return (
-    <HeroButtonAny
-      variant={heroVariant}
-      color={heroColor}
-      size={size}
-      fullWidth={fullWidth}
-      onPress={onClick}
-      className={className}
-      {...props}
-    >
-      {children}
-    </HeroButtonAny>
-  );
-}
-
-// Also export as Button for shadcn compatibility
-export const Button = HeroUIButton;
-

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

@@ -1,14 +0,0 @@
-import type { ReactNode } from "react";
-import { Card } from "@heroui/react";
-import type { CardProps } from "@heroui/react";
-
-export interface HeroUICardProps extends CardProps {
-  children?: ReactNode;
-}
-
-export default function HeroUICard({ children, ...props }: HeroUICardProps) {
-  return <Card {...props}>{children}</Card>;
-}
-
-export { Card };
-export type { CardProps };

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

@@ -1,62 +0,0 @@
-import * as 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 interface HeroUICollapsibleProps {
-  open?: boolean;
-  onOpenChange?: (isOpen: boolean) => void;
-  children?: React.ReactNode;
-  [key: string]: any;
-}
-
-export default function HeroUICollapsible({ open, onOpenChange, children, ...props }: HeroUICollapsibleProps) {
-  // Map shadcn props to HeroUI Accordion
-  const selectedKeys = open ? ["item"] : [];
-  const AccordionAny = Accordion as any;
-
-  return (
-    <AccordionAny
-      selectedKeys={selectedKeys}
-      onSelectionChange={(keys: any) => {
-        const isOpen = Array.from(keys).includes("item");
-        onOpenChange?.(isOpen);
-      }}
-      {...props}
-    >
-      <AccordionAny.Item key="item" aria-label="Collapsible content">
-        {children}
-      </AccordionAny.Item>
-    </AccordionAny>
-  );
-}
-
-export const Collapsible = HeroUICollapsible;
-
-export interface CollapsibleTriggerProps {
-  children?: React.ReactNode;
-  [key: string]: any;
-}
-
-export const CollapsibleTrigger = ({ children, ...props }: CollapsibleTriggerProps) => {
-  const AccordionAny = Accordion as any;
-  return <AccordionAny.Trigger {...props}>{children}</AccordionAny.Trigger>;
-};
-
-export interface CollapsibleContentProps {
-  children?: React.ReactNode;
-  [key: string]: any;
-}
-
-export const CollapsibleContent = ({ children, ...props }: CollapsibleContentProps) => {
-  const AccordionAny = Accordion as any;
-  return <AccordionAny.Panel {...props}>{children}</AccordionAny.Panel>;
-};

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

@@ -1,58 +0,0 @@
-import * as 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 interface HeroUIDatePickerProps {
-  children?: React.ReactNode;
-  [key: string]: any;
-}
-
-export default function HeroUIDatePicker({ children, ...props }: HeroUIDatePickerProps) {
-  return <Popover {...props}>{children}</Popover>;
-}
-
-export const DatePicker = HeroUIDatePicker;
-
-export interface DatePickerTriggerProps {
-  children?: React.ReactNode;
-  date?: Date;
-  dateFormat?: string;
-  placeholder?: string;
-  className?: string;
-  [key: string]: any;
-}
-
-export const DatePickerTrigger = ({ children, date, dateFormat, placeholder, className = "", ...props }: DatePickerTriggerProps) => {
-  // Accept shadcn DatePicker props but just pass through as trigger
-  return <PopoverTrigger {...props}>{children}</PopoverTrigger>;
-};
-
-export const DatePickerContent = PopoverContent;
-
-export interface DatePickerCalendarProps {
-  date?: Date;
-  onSelect?: (date: Date) => void;
-  [key: string]: any;
-}
-
-export const DatePickerCalendar = ({ date, onSelect, ...props }: DatePickerCalendarProps) => (
-  <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.tsx

@@ -1,43 +0,0 @@
-import * as 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 interface HeroUIDialogProps {
-  children: React.ReactNode;
-  [key: string]: any;
-}
-
-export default function HeroUIDialog(props: HeroUIDialogProps) {
-  return <Modal {...props} />;
-}
-
-// Shadcn-compatible exports
-export const Dialog = HeroUIDialog;
-const ModalAny = Modal as any;
-export const DialogTrigger = ModalAny.Trigger || ((props: any) => <button {...props} />);
-export const DialogPortal = ({ children }: { children: React.ReactNode }) => <>{children}</>;
-export const DialogClose = ModalAny.CloseTrigger || ((props: any) => <button {...props} />);
-export const DialogOverlay = ModalAny.Backdrop || ((props: any) => <div {...props} />);
-export const DialogContent = ModalAny.Dialog || ModalAny.Container || ((props: any) => <div {...props} />);
-export const DialogHeader = ModalAny.Header || ((props: any) => <div {...props} />);
-export const DialogFooter = ModalAny.Footer || ((props: any) => <div {...props} />);
-export const DialogTitle = ModalAny.Heading || ((props: any) => <h2 {...props} />);
-export const DialogDescription = (props: any) => <p {...props} />;

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

@@ -1,36 +0,0 @@
-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 interface HeroUIDrawerProps {
-  children: React.ReactNode;
-  [key: string]: any;
-}
-
-export default function HeroUIDrawer(props: HeroUIDrawerProps) {
-  return <Drawer {...props} />;
-}
-
-export { Drawer };

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

@@ -1,32 +0,0 @@
-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 interface HeroUIDropdownProps {
-  children: React.ReactNode;
-  [key: string]: any;
-}
-
-export default function HeroUIDropdown(props: HeroUIDropdownProps) {
-  return <Dropdown {...props} />;
-}
-
-export { Dropdown };

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

@@ -1,68 +0,0 @@
-import * as 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 interface HeroUIFieldProps extends React.HTMLAttributes<HTMLDivElement> {
-  children?: React.ReactNode;
-}
-
-export default function HeroUIField({ className = "", children, ...props }: HeroUIFieldProps) {
-  return (
-    <div className={`flex flex-col gap-1.5 ${className}`} {...props}>
-      {children}
-    </div>
-  );
-}
-
-export const Field = HeroUIField;
-
-export interface FieldLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
-  children?: React.ReactNode;
-}
-
-export const FieldLabel = ({ className = "", htmlFor, children, ...props }: FieldLabelProps) => (
-  <label
-    htmlFor={htmlFor}
-    className={`text-sm font-medium text-slate-700 dark:text-slate-200 ${className}`}
-    {...props}
-  >
-    {children}
-  </label>
-);
-
-export interface FieldDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
-  children?: React.ReactNode;
-}
-
-export const FieldDescription = ({ className = "", children, ...props }: FieldDescriptionProps) => (
-  <p className={`text-xs text-slate-500 dark:text-slate-400 ${className}`} {...props}>
-    {children}
-  </p>
-);
-
-export interface FieldErrorProps extends React.HTMLAttributes<HTMLParagraphElement> {
-  errors?: string[];
-  children?: React.ReactNode;
-}
-
-export const FieldError = ({ className = "", errors, children, ...props }: FieldErrorProps) => {
-  // Support both children and errors prop
-  const errorContent = errors && 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.tsx

@@ -1,10 +0,0 @@
-import { Input } from "@heroui/react";
-import type { InputProps } from "@heroui/react";
-
-export interface HeroUIInputProps extends InputProps {}
-
-export default function HeroUIInput(props: HeroUIInputProps) {
-  return <Input {...props} />;
-}
-
-export type { InputProps };

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

@@ -1,11 +0,0 @@
-import { Kbd } from "@heroui/react";
-import type { KbdProps } from "@heroui/react";
-
-export interface HeroUIKbdProps extends KbdProps {}
-
-export default function HeroUIKbd({ children, ...props }: HeroUIKbdProps) {
-  return <Kbd {...props}>{children}</Kbd>;
-}
-
-export { Kbd };
-export type { KbdProps };