Replace Ant Designs Library with Chakra UI

[tn3rb]

Been having too many issues with AntD with regards to accessibility and even just basic functionality, so it's looking like it could just be quicker to simply swap our UI library instead of trying to fix all of the issues with AntD.

The Chakra UI library has added a LOT Of new components since I last looked at it, and it has been getting a lot of recognition for having excellent a11y functionality, so it's now looking like the best solution for our needs.

AntD components in use and their potential Chakra UI equivalents

Ant Designs	Chakra UI
Alert	Alert
AntIcon	Icon
Avatar	Avatar
Badge
Button	Button
Checkbox	ControlBox or Checkbox
Collapse	Collapse
ColProps	Grid
DatePicker
Divider	Divider
Empty	Alert, AlertIcon, AlertTitle, & AlertDescription
Form
Form.Item	FormControl
Input	Input
InputNumber	NumberInput
Modal	Modal
Notification	Toast
Pagination
Popconfirm	AlertDialog
Popover	Popover
Radio	ControlBox or Radio
Result	Alert, AlertIcon, AlertTitle, & AlertDescription
Select	Select
Spin	Spinners
Switch	Switch
TimePicker
Tooltip	Tooltip
Typography.Paragraph	Textarea
Typography.Text	Text
Typography.Title	Heading

---

Possible replacements for AntD components with no Chakra UI equivalent

Badge

• custom component could be created using some of the logic and css from assets\src\components\ui\icon-menu-item in the EDTR/refactor-master branch

DatePicker && TimePicker

• see Research Alternate Datepicker / Timepicker Library Options  #2667

Form

• not really necessary as we would simply use the Form component from React Final Form

Pagination

• EntityPagination component from EDTR/refactor-master which uses react-js-pagination

---

Next Steps

Most of our uses of AntD components are within our application layer, which is good, but there are still a few uses scattered about through the other layers. To improve our abstraction and decoupling from third party libs, I also want to take this opportunity to make a minor change with how we use external components. Hopefully by now you have a decent understanding of the differences between the application and domain layers but you may have noticed that we also have a third primary layer called infrastructure. Its primary purpose is to decouple an application from its underlying system by providing adapters for any logic that needs to connect with the "outside world". So that is exactly what we are going to do with this third party UI library refactor.

Basically the flow of dependencies will work like this:

• The domain layer should be comprised of subfolders that represent all of the various "use cases" that our application has. The domain layer can include dependencies from any layer. It should primarily use components and logic from the app layer but can also directly implement adapters from the infrastructure layer.

• The application layer is the generic core of the system and contains any logic that can be shared between the various use cases. The application layer can have dependencies on the infrastructure layer but NOT the domain layer, since that would result in "cross contamination" between the various use cases.

• the infrastructure layer should NOT have any dependencies on any of the other layers as its purpose is to be a layer of abstraction that decouples the application from any logic that is external to the application.

In case it isn't clear, dependencies have a one way flow like so:

third party code -> infrastructure -> application -> domain

which can also be viewed like this:

external services & objects -> adapters -> framework -> use cases

So with this refactor, since Chakra UI or any other component library we utilize falls into the category of third party code, I want to have ALL of our code that imports third party UI components to utilize adapters located in the infrastructure layer. This way, if we ever have to go down this road again at some point in the future (which could happen for any number of reasons) then it will be even easier to swap out our external dependencies for something new.

Ideally we should do this (or should HAVE done this) for all of our other third party libraries like date-fns but that would go beyond the scope of this PR. That said, if you do find yourself needing to import some third party code into something you are working on, please, please, PLEASE, consider adding an adapter to the infrastructure layer and utilizing that so your code is decoupled and protected.

One important note regarding adapters and something that I saw being done incorrectly in some of our current component wrappers. Do NOT modify our internal interfaces to match those of an external component. The entire purpose of an adapter is to make the external code fit into our application and not the other way around. We do NOT want to have to go through the entire codebase and change prop names because some new UI component uses "title" instead of "text" or "label" or whatever. It is in our best interest to try and standardize our property names and types as much as possible in order to reduce the cognitive load required to work with them. So if in doubt about what to name some property or function when working on a component, look at other components and see if something similar already exists somewhere and try to utilize the same naming and typing. Then if the third party component uses some other name, simply pass the incoming prop using our internal naming schema to the appropriate prop for the external component.

ex:

const GoodAdapter = ({ name }) => <ThirdPartyComponent title={ name } />

and do NOT change our props to match the other component:

const BadAdapter = ({ title}) => <ThirdPartyComponent title={ title } />
// oops... gotta find and replace any code that's using the old prop name

This is where TypeScript interfaces will really come in handy because they can literally define every aspect of our components' props.

Anyways, I will be creating additional issues with detailed lists of the required changes and assigning those to everyone.

issues

Master Code Chef Manzoor

• Replace AntD Modal with Chakra UI Modal #2669 Replace AntD Modal with Chakra UI Modal

• Replace AntD Form and Input Fields with Chakra UI and Update Integration with React Final Form #2670 Replace AntD Form and Input Fields with Chakra UI and Update Integration with React Final Form

• Replace AntD DatePicker and TimePicker #2671 Replace AntD DatePicker and TimePicker

Vadim the Guardian of the Alphabetical Order

• Replace AntD Tooltip with Chakra UI Tooltip #2672 Replace AntD Tooltip with Chakra UI Tooltip

• Replace Other AntD UI Display Components with Chakra UI Equivalents  #2673 Replace Other AntD UI Display Components with Chakra UI Equivalents

• Post AntD Cleanup #2678 Post AntD Cleanup

brentos the brent maker

• Replace AntD Notifications with Chakra UI Toast #2674 Replace AntD Notifications with Chakra UI Toast

• Update EspressoButton and EspressoIcon to work with Chakra UI and Other Updated Components #2675 Update EspressoButton and EspressoIcon to work with Chakra UI and Other Updated Components

• Replace AntD Pagination #2676 Replace AntD Pagination

• Replace AntD Icons with Appropriate Alternatives #2677 Replace AntD Icons with Appropriate Alternatives