# Shared Task Form Components

Shared components, hooks, schemas, and utilities for task action forms.

## Structure

```
shared/
├── index.ts        # Barrel exports
├── types.ts        # BaseTaskFormValues, section props (JSDoc documented)
├── schemas.ts      # Zod validation schemas
├── hooks.ts        # Shared React hooks
├── fields.ts       # Field props utilities
├── transforms.ts   # Backend ↔ Form data conversions
├── utils.ts        # Default values helper
└── [Sections]/     # UI section components
```

## UI Sections

Reusable form sections that compose into task forms:

| Component | Description |
|-----------|-------------|
| `CoverImageSection` | Toggle + image uploader |
| `IconNameSection` | Icon picker + name input |
| `AssigneeDescriptionSection` | Assignee autocomplete + rich text |
| `AttachmentsSection` | Toggle + file uploader |
| `DueDateSection` | Toggle + days input |
| `ReminderSection` | Reminder configuration |
| `DependencySection` | Task dependency selector |
| `IconSelectButton` | Standalone icon picker |

### Usage

```tsx
import { CoverImageSection, ReminderSection } from '../shared';

<CoverImageSection
  disabled={disabled}
  fields={{
    hasCoverImage: formFields.hasCoverImage,
    coverImage: formFields.coverImage,
  }}
/>

<ReminderSection
  disabled={disabled}
  showDueDateFields={hasDueDate}
  shouldRepeatReminder={repeatReminder}
  fields={...}
  options={...}
/>
```

## Hooks

Default values and assignee resolution are handled by `useGetFormDefaultValues` in `Process/hooks`; providers pass `getDefaultValuesFn` and receive `defaultValues`, `isLoading`, and `error`. The hook passes the fetched action to `getDefaultValuesFn` so form-specific data (e.g. Survey `dynamicFormData`) can be set there; drawer title and display data come from `defaultValues` (e.g. `defaultValues.name`).

### useConfirmChangesModal

Shows confirmation when canceling dirty form.

```tsx
const modal = useConfirmChangesModal({
  onCancel: handleClose,
  translations: { title, description, confirmButton, cancelButton },
});

if (isDirty) modal.showModal();
// JSX: {modal.modal}
```

### useTaskFormSubmit

Generic form submission with mutation handling.

```tsx
const { handleSubmit } = useTaskFormSubmit<FormValues>({
  actionId, processId, stepId,
  transformFn: convertFormValuesToStepAction,
  onSuccess, onError,
});
```

## Transforms

### convertStepActionToFormValues(action, t)

Backend action → Form values (for editing).

### convertFormValuesToStepAction(values)

Form values → Backend request (for submission).

```tsx
// Loading existing action
const defaultValues = convertStepActionToFormValues(action, t);

// Submitting form
const requestData = convertFormValuesToStepAction(formValues);
```

## Schemas

### createBaseTaskFormSchema(t)

Base Zod schema for all task forms.

### applyBaseTaskFormRefinements(data, ctx, t)

Conditional validations (cover image required when enabled, etc.).

```tsx
// Extend for custom forms
export function createMyFormSchema(t) {
  return createBaseTaskFormSchema(t)
    .extend({ myField: z.string() })
    .superRefine((data, ctx) => {
      applyBaseTaskFormRefinements(data, ctx, t);
    });
}
```

## Creating a New Task Form

1. **Schema**: Extend `createBaseTaskFormSchema`
2. **Fields**: Use `getBaseTaskFieldsProps` for common field configs
3. **Component**: Compose shared sections + custom sections
4. **Types**: Extend `BaseTaskFormValues` if needed

See `types.ts` for full type documentation (JSDoc comments).
