denwa-react-shared/skills/admin-forms/SKILL.md

---
name: admin-forms
description: >
  Implement entity editor forms using DrawerForm and specialized inputs. 
  Covers form submission, language switching, and integration with 
  AdminTable actions.
type: framework
library: denwa-react-shared
framework: react
library_version: "1.0.88"
requires:
  - session-auth
---

# Drawer Forms & Inputs

Most entity management in the admin panel happens within `Drawer` panels using `BaseDrawerForm`. This component standardizes the appearance of save buttons and multi-language controls.

## Setup

```tsx
import { BaseDrawerForm, AdminDrawerFormProps } from 'denwa-react-shared';

const UserForm = ({ id, action, onClose, onRefetch }: AdminDrawerFormProps<'create' | 'update' | 'read'>) => {
  const { control, handleSubmit } = useForm();
  
  const isReadOnly = action === 'read';

  return (
    <BaseDrawerForm
      saveText="Сохранить"
      submitButtonText={action === 'create' ? 'Создать' : 'Обновить'}
      isVisibleSubmit={!isReadOnly}
      onSubmitClick={handleSubmit(onSave)}
    >
      <Controller
        name="name"
        control={control}
        render={({ field }) => <Input {...field} disabled={isReadOnly} />}
      />
      {/* ... form content */}
    </BaseDrawerForm>
  );
};
```

## Core Patterns

### Language Switching
If the entity supports multiple languages, enable `isVisibleLanguage` and provide `languagesData`.

```tsx
<BaseDrawerForm
  isVisibleLanguage
  language={currentLang}
  languagesData={[
    { label: 'Русский', value: 'ru' },
    { label: 'English', value: 'en' },
  ]}
  onChangeLang={(lang) => setLang(lang)}
  // Optional: Bulk translation button
  isVisibleLanguageButton
  translateAllText="Перевести все"
  onTranslateAllClick={handleTranslate}
>
  {/* ... fields */}
</BaseDrawerForm>
```

### Integration with AdminTable
The `AdminTable` orchestration passes `id`, `action`, `onClose`, and `onRefetch` to the `drawerContent` component.

```tsx
// In AdminTable:
<AdminTable
  drawerContent={UserForm}
  readAction="read"
  createAction="create"
  updateAction="update"
  // ...
/>
```

## Common Mistakes

### MEDIUM Using raw antd Form
Wrong:
```tsx
import { Form } from 'antd';
return <Form>{children}</Form>;
```
Correct:
```tsx
import { BaseDrawerForm } from 'denwa-react-shared';
return <BaseDrawerForm>{children}</BaseDrawerForm>;
```
`BaseDrawerForm` wraps `antd` Form but adds standardized footer buttons and integrated logic for language switching and submission loading states.

Source: maintainer interview

### HIGH Mismanaging "read" action state
Wrong:
```tsx
const UserForm = ({ action }) => {
  return <BaseDrawerForm>{/* inputs are always enabled */}</BaseDrawerForm>;
};
```
Correct:
```tsx
const UserForm = ({ action }) => {
  const isReadOnly = action === 'read';
  return (
    <BaseDrawerForm isVisibleSubmit={!isReadOnly}>
       <Input disabled={isReadOnly} />
    </BaseDrawerForm>
  );
};
```
When `action` is 'read', the form should visually hide the submit button and disable all input fields.

Source: src/shared/ui/admin-table/index.tsx