Skip to content

[UI] Refactor: Standardize UI with DomusCard and useDomusForm #202

@kilip

Description

@kilip

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:

  • CT-01: apps/dash/src/shared/ui/components/PrivacyView.tsx
  • CT-02: apps/dash/src/shared/ui/components/TermsView.tsx
  • CT-03: apps/dash/src/shared/ui/components/UnderConstruction.tsx
  • CT-04: apps/dash/src/pages/auth/ui/LoginPage.tsx
  • CT-05: apps/dash/src/pages/org/ui/OrgDetailPage.tsx
  • CT-06: apps/dash/src/pages/org/ui/OrgPublicPage.tsx
  • CT-07: apps/dash/src/pages/org/ui/JoinPage.tsx
  • CT-08: apps/dash/src/pages/org/ui/JoinSuccessPage.tsx
  • CT-09: apps/dash/src/pages/org/ui/OrgUpdatePage.tsx
  • CT-10: apps/dash/src/pages/org/ui/OrgNewPage.tsx
  • CT-11: apps/dash/src/pages/org/ui/components/UnitList.tsx
  • CT-12: apps/dash/src/pages/org/ui/components/OrgForm.tsx
  • CT-13: apps/dash/src/pages/org/ui/components/OrganizationList.tsx
  • CT-14: apps/dash/src/pages/org/ui/components/OrgEnrollmentPendingList.tsx
  • CT-15: apps/dash/src/pages/org/ui/components/OrganizationCard.tsx
  • CT-16: apps/dash/src/pages/org/ui/components/OrgGridSkeleton.tsx
  • CT-17: apps/dash/src/pages/parishioner/ui/ParishionerNewPage.tsx
  • CT-18: apps/dash/src/pages/parishioner/ui/components/ParishionerSearch.tsx
  • CT-19: apps/dash/src/pages/parishioner/ui/components/ParishionerManualForm.tsx
  • CT-20: apps/dash/src/pages/setting/ui/components/ParishList.tsx
  • CT-21: apps/dash/src/pages/setting/ui/components/DioceseList.tsx
  • CT-22: apps/dash/src/pages/setting/ui/components/DioceseCard.tsx

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:

  • FT-01: apps/dash/src/pages/org/ui/components/JoinForm.tsx
  • FT-02: apps/dash/src/pages/org/ui/components/OrgForm.tsx
  • FT-03: apps/dash/src/pages/org/ui/components/UnitForm.tsx
  • FT-04: apps/dash/src/pages/parishioner/ui/components/ParishionerManualForm.tsx
  • FT-05: apps/dash/src/pages/auth/ui/components/LoginForm.tsx
  • FT-06: apps/dash/src/pages/setting/ui/components/DioceseForm.tsx
  • FT-07: apps/dash/src/pages/setting/ui/components/ParishForm.tsx

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:

  1. Search the codebase for places using custom card styles or shadcn generic cards directly. Refactor them to use DomusCard instead.
  2. Search the codebase for forms and inputs that are not currently using useDomusForm. Refactor them using RegistrationForm.tsx as your baseline.
  3. Keep all forms correctly typed and preserve their existing functional validation logic.
  4. Do not modify useDomusForm or DomusCard themselves—your goal is only to consume them globally.
  5. Verify no any types are introduced and adhere to the project's strict TypeScript mode.
  6. Make sure to comply with all rules in AGENTS.md.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    Status

    In progress

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions