npm package: @form-eng/antd
Description: Ant Design v5 field components for @form-eng/core
Author: bghcore
Latest version: 1.6.1
Deprecated: This package has been renamed to @formosaic/antd. Install @formosaic/antd instead. See https://github.com/bghcore/formosaic

> **DEPRECATED:** This package has been renamed to [`@formosaic/antd`](https://www.npmjs.com/package/@formosaic/antd). Please install `@formosaic/antd` instead. This package will no longer receive updates.
>
> **New repo:** [github.com/bghcore/formosaic](https://github.com/bghcore/formosaic)

# @form-eng/antd

Ant Design v5 field components for [@form-eng/core](https://www.npmjs.com/package/@form-eng/core).

This package provides 28 field types using **Ant Design v5** components, with `dayjs` for date handling. Includes 19 native antd components and 9 semantic HTML fallbacks. All fields integrate with `@form-eng/core`'s rules engine and form orchestration.

## Installation

```bash
npm install @form-eng/antd @form-eng/core antd dayjs react react-dom react-hook-form
```

## Quick Start

```tsx
import { FormEngine, RulesEngineProvider, InjectedFieldProvider } from "@form-eng/core";
import { createAntdFieldRegistry } from "@form-eng/antd";

const fields = createAntdFieldRegistry();

function App() {
  return (
    <RulesEngineProvider>
      <InjectedFieldProvider fields={fields}>
        <FormEngine
          formConfig={myFormConfig}
          entityData={myEntityData}
          onSave={handleSave}
        />
      </InjectedFieldProvider>
    </RulesEngineProvider>
  );
}
```

## Field Components

### Editable Fields (12)

| Component | antd Component | Type Key |
|---|---|---|
| `Textbox` | `Input` | `Textbox` |
| `Number` | `InputNumber` | `Number` |
| `Toggle` | `Switch` | `Toggle` |
| `Dropdown` | `Select` | `Dropdown` |
| `SimpleDropdown` | `Select` | `SimpleDropdown` |
| `MultiSelect` | `Select` (`mode="multiple"`) | `Multiselect` |
| `DateControl` | `DatePicker` (dayjs) | `DateControl` |
| `Slider` | `Slider` | `Slider` |
| `RadioGroup` | `Radio.Group` | `RadioGroup` |
| `CheckboxGroup` | `Checkbox.Group` | `CheckboxGroup` |
| `Textarea` | `Input.TextArea` | `Textarea` |
| `DynamicFragment` | `<input type="hidden">` | `DynamicFragment` |

### Read-Only Fields (1)

| Component | Renders | Type Key |
|---|---|---|
| `ReadOnly` | `ReadOnlyText` | `ReadOnly` |

## Custom Fields

You can extend or replace any field in the registry:

```tsx
import { createAntdFieldRegistry } from "@form-eng/antd";

const fields = createAntdFieldRegistry();

// Replace the textbox with your own component
fields["Textbox"] = <MyCustomTextbox />;

// Add a brand new field type
fields["PhoneNumber"] = <MyPhoneInput />;
```

## Compared to Other Adapters

| Feature | `antd` | `fluent` | `mui` | `headless` | `chakra` | `mantine` |
|---|---|---|---|---|---|---|
| UI framework | Ant Design v5 | Fluent UI v9 | Material UI v5/v6 | None | Chakra UI v3 | Mantine v7 |
| Date library | dayjs | - | - | Native | Native | Native |
| Bundle size | Includes antd | Includes Fluent | Includes MUI | Minimal | Includes Chakra | Includes Mantine |
| Styling | antd tokens | Fluent tokens | MUI theme | Your choice | Chakra tokens | Mantine theme |

## License

MIT