🛠 Tailwinding Care

[rithviknishad]

do not assign this issue

This issue is an EPIC to track the progress of making custom tailwind components for care, sub-issues will be created).
Link this issue on pull requests that implement or modify a tailwind component without a closing keyword.

Notes

• Follow the Figma design provided when implementing the components.

• Add redesign label to related issues / PR.

• When implementing or redesigning an entire form that replaces components with the custom tailwind components, name the branch in the format: tailwind/{branch-name}, for example: tailwind/asset-registration or tailwind/patient-filters or tailwind/patient-consultation.

• Form field components shall be wrapped by FormField so that the design stays consistent across the app and achieves a uniform component API interface.

Components to be built

• 📖 Storybook + 🛠 Tailwind Patient Filters #3744 TextFormField
• 📖 Storybook + 🛠 Tailwind Patient Filters #3744 TextAreaFormField
• 📖 Storybook + 🛠 Tailwind Patient Filters #3744 DatePicker
• 📖 Storybook + 🛠 Tailwind Patient Filters #3744 DateRangePicker
• 📖 Storybook + 🛠 Tailwind Patient Filters #3744 SelectMenu
• 📖 Storybook + 🛠 Tailwind Patient Filters #3744 MultiSelectMenu
• 📖 Storybook + 🛠 Tailwind Patient Filters #3744 AsyncAutocompleteFormField
• 📖 Storybook + 🛠 Tailwind Patient Filters #3744 ButtonV2
• Autocomplete for location field in asset create form #4463 AutocompleteSelect
• 🛠 Upgrade the colors of tailwind input components + 🛠 Tailwind Consultation Form + 🛠 Tailiwnd discharge patient dialog #4309 AutocompleteMultiSelect
• Tailwind Component: Collapse (Accordion) #3763
• Fix facility create page responsiveness and adds RadioFormField component #4740 RadioFormField
• CheckboxFormField
• Migrate all existing usages PhoneNumberField to PhoneNumberFormField and deprecates the legacy component #4527 PhoneNumberFormField
• Tabs
• Care UI Slideover, upgrades Notifications List and Mobile Sidebar #4487 SlideOver
• CareUI: Adds a higher-order Form component (not used anywhere) #4633 Form
• Create custom Modals #3908 Dialog
• Create custom Modals #3908 ConfirmActionDialog
• Tailwind Patient Registration #3872 Callout
• Make Asset page compact #3769 Note
• Make Asset page compact #3769 PropertyDetail
• Make Asset page compact #3769 ContactDisplay
• Make Asset page compact #3769 FeatureTag
• Ctrl + K shortcut for focus to search box in main pages where search bar is present. #3898 SearchInput
• Add RelativeTime component which shows actual timestamp on hover else relative time (like GitHub relative-time) #4649 RelativeTime
• CircularProgress

We can use tailwind/headlessui for building some of the components

Other related tasks

• Update Vercel deploy config to use develop branch instead of the PR's branch.
• Update README.md with content related to Storybook and add Storybook staging deploy link.
• Replace Material UI components with CareUI/custom components #5006

Migrations

• Tailwind Consultation Form #3594
• 📖 Storybook + 🛠 Tailwind Patient Filters #3744
• Upgrade the facility creation component to Custom Components #4200
• Upgrade the facility bed capacity into tailwind #4202
• Upgrade the facility doctor capacity to tailwind #4203
• Update the colors used by the new tailwind input components #4277
• Goodbye Material UI's MutlilineInputField #4317
• Tailwind the Add User page #4322
• Goodbye CheckCircleOutline icon of material UI #4367
• Goodbye to Rolebtn component from CARE #4370
• Implement Page component to make padding across pages consistent #4375

cc: @gigincg

[khavinshankar]

@rithviknishad do you need any help with this?

[rithviknishad]

@khavinshankar definitely!! Could you help tailwind the async autocomplete field in the #3744 patient filters?

Generally, apart from that, I was thinking of having all the input components have their own validators and also be compliant with form reducers across care since we mostly have only set_form and set_error only.

so that, the component's API interface would just take in the additional props (validator, reducerProps) see this.

however, the components API should still be usable when not used with reducers.
So I was just taking time to document it clearly so that it's easily maintainable by everyone and changing the component API interface later would be a hassle.

For example, the text input is composed like this:
https://github.com/coronasafe/care_fe/pull/3744/files#diff-e0e39dd41cb8f0b76d60275fa706cd765c8648107e45183f24781aa0cd51145f
and when used with reducers, the amount of code we write would be so less, but still, it'll render out the errors and field labels without having to write separate components each time.