By name: create-form-drawer description: Build erxes drawer, sheet, or dialog forms with local validation, mutations, state, toasts, and close/reset behavior. Use for create and edit flows in frontend plugins.
Skill: Create Form Drawer
Workflow
- Find the closest create/edit drawer, sheet, or dialog in the same plugin.
- Reuse existing
erxes-uiform, drawer, sheet, dialog, input, button, toast, and loading components. - Reuse the plugin's existing React Hook Form and Zod patterns when present.
- Keep form schema, default values, types, mutation hooks, and drawer state near the feature unless the plugin already has a shared location.
- Match nearby submit behavior: loading state, disabled buttons, toast, refetch/cache update, close drawer, and form reset.
- Ensure the affected list/detail/count/selector UI updates after submit without a browser refresh, using the nearby Apollo cache, refetch, or subscription pattern.
- Preserve route params and required IDs such as
websiteId, board IDs, pipeline IDs, or plugin-specific IDs. - Run focused validation:
pnpm nx lint <plugin>andpnpm nx build <plugin>. Runpnpm nx test <plugin>when tested behavior or test setup changed.
Important
- Do not create a new form, drawer, modal, validation, or state system.
- Do not duplicate GraphQL mutations without searching existing feature and shared GraphQL folders.
- Do not store form values in global atoms unless the nearby feature already uses that pattern.
- Do not rely on users refreshing the page to see newly created, updated, or removed records.
- Keep empty, error, and loading states consistent with surrounding screens.