Forms

/**
 * Basic form layout component with automatic validation and submission
 * @param props - SimpleForm configuration props
 * @returns Form component with validation and Material UI styling
 */
function SimpleForm(props: SimpleFormProps): ReactElement;

interface SimpleFormProps {
  /** Custom toolbar component for form actions */
  toolbar?: ComponentType<ToolbarProps> | false;
  /** Child input components */
  children?: ReactNode;
  /** Default values for form fields */
  defaultValues?: Record<string, any>;
  /** Form validation function */
  validate?: (values: Record<string, any>) => Record<string, any>;
  /** Form submission handler */
  save?: (data: any, redirectTo?: string) => void;
  /** Redirect location after save */
  redirect?: string | false;
  /** Transform function for form data before save */
  transform?: (data: any) => any;
  /** Form margin setting */
  margin?: 'none' | 'normal' | 'dense';
  /** Form variant */
  variant?: 'standard' | 'outlined' | 'filled';
}

import { SimpleForm, TextInput, NumberInput, SaveButton } from "ra-ui-materialui";

// Basic form
const UserForm = () => (
  <SimpleForm>
    <TextInput source="name" validate={required()} />
    <TextInput source="email" validate={[required(), email()]} />
    <NumberInput source="age" />
  </SimpleForm>
);

// Custom form with toolbar
const CustomForm = () => (
  <SimpleForm 
    defaultValues={{ status: 'active' }}
    toolbar={<CustomToolbar />}
    margin="dense"
  >
    <TextInput source="title" />
    <TextInput source="description" multiline />
  </SimpleForm>
);

/**
 * Tabbed form layout component for organizing fields into separate tabs
 * @param props - TabbedForm configuration props
 * @returns Form with tab navigation and organized field groups
 */
function TabbedForm(props: TabbedFormProps): ReactElement;

interface TabbedFormProps {
  /** Custom toolbar component */
  toolbar?: ComponentType<ToolbarProps> | false;
  /** Child FormTab components */
  children?: ReactNode;
  /** Default values for form fields */
  defaultValues?: Record<string, any>;
  /** Form validation function */
  validate?: (values: Record<string, any>) => Record<string, any>;
  /** Form submission handler */
  save?: (data: any, redirectTo?: string) => void;
  /** Redirect location after save */
  redirect?: string | false;
  /** Transform function for form data */
  transform?: (data: any) => any;
  /** Tab indicator color */
  indicatorColor?: 'primary' | 'secondary';
  /** Tab text color */
  textColor?: 'primary' | 'secondary' | 'inherit';
}

/**
 * Individual tab component for use within TabbedForm
 * @param props - FormTab configuration props
 * @returns Tab panel with form fields
 */
function FormTab(props: FormTabProps): ReactElement;

interface FormTabProps {
  /** Tab label text */
  label: string;
  /** Tab icon component */
  icon?: ReactElement;
  /** Child input components for this tab */
  children?: ReactNode;
  /** Tab value for controlled tabs */
  value?: string | number;
  /** Whether tab is disabled */
  disabled?: boolean;
  /** Path for tab content (used with nested resources) */
  path?: string;
}

import { TabbedForm, FormTab, TextInput, DateInput } from "ra-ui-materialui";
import { Person, Work } from "@mui/icons-material";

const UserTabbedForm = () => (
  <TabbedForm>
    <FormTab label="Personal" icon={<Person />}>
      <TextInput source="firstName" />
      <TextInput source="lastName" />
      <DateInput source="birthDate" />
    </FormTab>
    <FormTab label="Professional" icon={<Work />}>
      <TextInput source="company" />
      <TextInput source="position" />
      <NumberInput source="salary" />
    </FormTab>
  </TabbedForm>
);

/**
 * Form toolbar component containing action buttons
 * @param props - Toolbar configuration props
 * @returns Toolbar with form action buttons
 */
function Toolbar(props: ToolbarProps): ReactElement;

interface ToolbarProps {
  /** Child button components */
  children?: ReactNode;
  /** Whether toolbar should take full width */
  width?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false;
  /** Toolbar alignment */
  align?: 'left' | 'right' | 'center';
  /** Custom save button component */
  saveButton?: ReactElement;
  /** Custom delete button component */
  deleteButton?: ReactElement;
  /** Whether to show save button */
  showSaveButton?: boolean;
  /** Whether to show delete button */
  showDeleteButton?: boolean;
}

/**
 * Save button for forms with loading state and validation
 */
function SaveButton(props: SaveButtonProps): ReactElement;

/**
 * Delete button for forms with confirmation dialog
 */
function DeleteButton(props: DeleteButtonProps): ReactElement;

interface SaveButtonProps {
  /** Button label text */
  label?: string;
  /** Redirect location after save */
  redirect?: string | false;
  /** Whether button is disabled */
  disabled?: boolean;
  /** Button variant */
  variant?: 'text' | 'outlined' | 'contained';
  /** Button color */
  color?: 'primary' | 'secondary' | 'error';
  /** Transform function for save data */
  transform?: (data: any) => any;
  /** Click handler */
  onClick?: () => void;
  /** Button icon */
  icon?: ReactElement;
}

interface DeleteButtonProps {
  /** Button label text */
  label?: string;
  /** Redirect location after delete */
  redirect?: string;
  /** Whether button is disabled */
  disabled?: boolean;
  /** Confirmation message */
  confirmTitle?: string;
  /** Confirmation content */
  confirmContent?: string;
  /** Button color */
  color?: 'primary' | 'secondary' | 'error';
}

import { Toolbar, SaveButton, DeleteButton } from "ra-ui-materialui";
import { Save, Delete } from "@mui/icons-material";

// Custom toolbar
const CustomToolbar = () => (
  <Toolbar>
    <SaveButton 
      label="Save Changes"
      icon={<Save />}
      redirect="list"
    />
    <DeleteButton 
      label="Remove"
      confirmTitle="Delete Confirmation"
      confirmContent="Are you sure you want to delete this item?"
    />
  </Toolbar>
);

/**
 * Hook for accessing form context and methods
 * @returns Form context with methods and state
 */
function useFormContext(): FormContext;

/**
 * Hook for accessing form state information
 * @returns Form state with validation and submission status
 */
function useFormState(): FormState;

interface FormContext {
  getValues: () => Record<string, any>;
  setValue: (name: string, value: any) => void;
  register: (name: string) => void;
  unregister: (name: string) => void;
  control: any;
  formState: FormState;
}

interface FormState {
  isDirty: boolean;
  isValid: boolean;
  isSubmitting: boolean;
  errors: Record<string, any>;
  touchedFields: Record<string, boolean>;
  dirtyFields: Record<string, boolean>;
}

import { useFormContext, useFormState } from "ra-ui-materialui";

const FormStatus = () => {
  const { isValid, isDirty, errors } = useFormState();
  const { getValues } = useFormContext();
  
  return (
    <div>
      <p>Form Valid: {isValid ? 'Yes' : 'No'}</p>
      <p>Form Dirty: {isDirty ? 'Yes' : 'No'}</p>
      <p>Errors: {Object.keys(errors).length}</p>
    </div>
  );
};

interface ValidationRule {
  required?: boolean | string;
  pattern?: RegExp | { value: RegExp; message: string };
  min?: number | { value: number; message: string };
  max?: number | { value: number; message: string };
  validate?: (value: any) => boolean | string;
}

interface FormTabsProps {
  children?: ReactNode;
  indicatorColor?: 'primary' | 'secondary';
  textColor?: 'primary' | 'secondary' | 'inherit';
  variant?: 'standard' | 'scrollable' | 'fullWidth';
}