eigen/trackgo-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 12 Wiki Activity

feat: implement comprehensive Form UI library with React Hook Form integration, Zod validation, and i18n support.

Browse Source
This commit is contained in:
Firman Ramdhani
2026-06-15 18:40:22 +07:00
parent 00a2f218cc
commit a72b73bac4
45 changed files with 2064 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Untitled.java
+29
View File
@@ -0,0 +1,29 @@
**Role:** You are a Staff Level React Engineer and Architect managing a highly scalable Enterprise ERP monorepo.
**Context:**
We have successfully established our Form UI library in `packages/ui/src/components/Form/fields` featuring 22 Mantine form components wrapped with React Hook Form (e.g., `FieldTextInput`, `FieldSelect`, `FieldColorPicker`, etc.). We also have a Zod validation layer at `packages/ui/src/validators` that uses JSON-stringified payloads for i18n translation.
We now need to build a showcase/demo page in the main web application to test and demonstrate these components in a real-world ERP form scenario.
**Pre-Execution Analysis (READ THESE FIRST):**
Before writing any code, you MUST read and analyze:
1. The component signatures and exports in `packages/ui/src/components/Form/index.ts`.
2. The Zod validator pattern in `packages/ui/src/validators` (specifically how the JSON i18n payloads are structured).
3. The existing layout and routing patterns in `apps/web/src/apps/showcase/showcase-view.tsx` to understand how to correctly inject and mount new showcase features.
**Task Requirements:**
**Phase 1: Create the Form Showcase Component**
1. Create a new comprehensive demo component inside `apps/web/src/apps/showcase/example/features/`. Follow the existing file naming convention found in that directory.
2. The component should implement a realistic ERP form (e.g., Textile Production Order, Inventory Bulk Update, or User Registration) using `useForm`, `zodResolver`, and a custom Zod schema.
3. The Zod schema MUST utilize the JSON-stringified i18n message pattern for validation errors.
4. Utilize a diverse set of our generated UI components (text input, select, number input, color input/picker, etc.) to prove they function correctly in a unified form.
5. Include a visual output panel (e.g., using Mantine's `Code` or `Pre` component) that displays the validated JSON payload upon successful submission.
**Phase 2: Connect to Showcase View**
1. Update `apps/web/src/apps/showcase/showcase-view.tsx` to import and render the newly created Form Showcase component.
2. Integrate it seamlessly into the existing UI layout of the showcase view (e.g., adding a new Tab, Accordion, or Section dedicated to the Form UI & Validation Layer).
**Execution Rules:**
- Do not rely on hardcoded assumptions. Let your code be guided completely by the patterns, styles, and typings you discover during the Pre-Execution Analysis.
- Ensure all TypeScript typings are strict.
- Output the newly created files and the modified files cleanly.