Task Description
Refactor the UI components across the application to standardize cards and forms using our premium design system.
1. Standardize Cards
Replace any generic, ad-hoc, or plain shadcn card implementations with our standardized DomusCard.
- Target Component:
DomusCard located at apps/dash/src/shared/ui/components/DomusCard.tsx.
- Refactor any layout that acts as a card to use
DomusCard for consistency, glassmorphism effects, and premium look.
Target Card components to replace with DomusCard:
2. Standardize Forms
Replace all manual form implementations with our unified hook useDomusForm.
- Target Hook:
useDomusForm located at apps/dash/src/shared/ui/fields/context.ts.
- Reference Implementation: See
apps/dash/src/pages/demo/ui/components/RegistrationForm.tsx for a prime example of how to implement useDomusForm together with the standardized fields (e.g., TextField, RadioGroupField).
- Ensure that validation, form states, and error messages are migrated correctly following the reference pattern.
Target forms to migrate to useDomusForm:
Note: OrgForm (CT-12 & FT-02) and ParishionerManualForm (CT-19 & FT-04) require both the Card and Form refactors.
Instructions
Please execute the following carefully:
- Search the codebase for places using custom card styles or
shadcn generic cards directly. Refactor them to use DomusCard instead.
- Search the codebase for forms and inputs that are not currently using
useDomusForm. Refactor them using RegistrationForm.tsx as your baseline.
- Keep all forms correctly typed and preserve their existing functional validation logic.
- Do not modify
useDomusForm or DomusCard themselves—your goal is only to consume them globally.
- Verify no
any types are introduced and adhere to the project's strict TypeScript mode.
- Make sure to comply with all rules in
AGENTS.md.
Task Description
Refactor the UI components across the application to standardize cards and forms using our premium design system.
1. Standardize Cards
Replace any generic, ad-hoc, or plain
shadcncard implementations with our standardizedDomusCard.DomusCardlocated atapps/dash/src/shared/ui/components/DomusCard.tsx.DomusCardfor consistency, glassmorphism effects, and premium look.Target
Cardcomponents to replace withDomusCard:apps/dash/src/shared/ui/components/PrivacyView.tsxapps/dash/src/shared/ui/components/TermsView.tsxapps/dash/src/shared/ui/components/UnderConstruction.tsxapps/dash/src/pages/auth/ui/LoginPage.tsxapps/dash/src/pages/org/ui/OrgDetailPage.tsxapps/dash/src/pages/org/ui/OrgPublicPage.tsxapps/dash/src/pages/org/ui/JoinPage.tsxapps/dash/src/pages/org/ui/JoinSuccessPage.tsxapps/dash/src/pages/org/ui/OrgUpdatePage.tsxapps/dash/src/pages/org/ui/OrgNewPage.tsxapps/dash/src/pages/org/ui/components/UnitList.tsxapps/dash/src/pages/org/ui/components/OrgForm.tsxapps/dash/src/pages/org/ui/components/OrganizationList.tsxapps/dash/src/pages/org/ui/components/OrgEnrollmentPendingList.tsxapps/dash/src/pages/org/ui/components/OrganizationCard.tsxapps/dash/src/pages/org/ui/components/OrgGridSkeleton.tsxapps/dash/src/pages/parishioner/ui/ParishionerNewPage.tsxapps/dash/src/pages/parishioner/ui/components/ParishionerSearch.tsxapps/dash/src/pages/parishioner/ui/components/ParishionerManualForm.tsxapps/dash/src/pages/setting/ui/components/ParishList.tsxapps/dash/src/pages/setting/ui/components/DioceseList.tsxapps/dash/src/pages/setting/ui/components/DioceseCard.tsx2. Standardize Forms
Replace all manual form implementations with our unified hook
useDomusForm.useDomusFormlocated atapps/dash/src/shared/ui/fields/context.ts.apps/dash/src/pages/demo/ui/components/RegistrationForm.tsxfor a prime example of how to implementuseDomusFormtogether with the standardized fields (e.g.,TextField,RadioGroupField).Target forms to migrate to
useDomusForm:apps/dash/src/pages/org/ui/components/JoinForm.tsxapps/dash/src/pages/org/ui/components/OrgForm.tsxapps/dash/src/pages/org/ui/components/UnitForm.tsxapps/dash/src/pages/parishioner/ui/components/ParishionerManualForm.tsxapps/dash/src/pages/auth/ui/components/LoginForm.tsxapps/dash/src/pages/setting/ui/components/DioceseForm.tsxapps/dash/src/pages/setting/ui/components/ParishForm.tsxInstructions
Please execute the following carefully:
shadcngeneric cards directly. Refactor them to useDomusCardinstead.useDomusForm. Refactor them usingRegistrationForm.tsxas your baseline.useDomusFormorDomusCardthemselves—your goal is only to consume them globally.anytypes are introduced and adhere to the project's strict TypeScript mode.AGENTS.md.