Please note: this is an archived copy. For the most up to date version see https://docs.google.com/document/d/1PviXkmbkl3Q-2Ygvhgw2nzqeL273cpaCDvlyK-ShEs0/edit?usp=sharing
...
Element | Where’s it used currently? | What are we going to replace it with? | JIRA Ticket |
|---|---|---|---|
Collapsible left-hand menu | SidebarNav.tsx Sidebar.tsx Globals.scss _sidebar.scss | MUI Drawer | |
Breadcrumb | Breadcrumb.tsx Header.tsx _header.scss | MUI Breadcrumbs | |
Table | Bootstrap Table Table.tsx @tanstack/react-table Table.tsx useResource.ts agencies/index.tsx hostlms/index.tsx locations/index.tsx requests/index.tsx Table component Details.tsx components/Table/index.ts agencies/index.tsx hostlms/index.tsx locations/index.tsx requests/index.tsx | MUI X Data Grid (see 3.3.1) | |
Typography (Headers, titles etc) | Throughout | MUI Typography | |
Dropdowns / Selects | HeaderProfileNav.tsx | Replacing dropdown with MUI App Bar | |
Button | Details.tsx Header.tsx Sidebar.tsx SideBar.nav Groups Hostlms Locations Requests login | MUI Button - one primary button per page (as rule - occasional exceptions may be necessary) | |
Icons | Profile.tsx | React Icons - standard switch from FontAwesome icons currently present (and any others) | |
Search | Table.tsx | MUI X Data Grid Quick Filter (Will be implemented as part of the Data Grid) | |
Card | Profile.tsx | MUI Card + Paper (to hold cards) | |
Modal | Details.tsx AddAgenciesToGroup.tsx agencies/index.tsx groups/index.tsx NewGroup.tsx requests/index.tsx | MUI Modal, Dialog (for things like confirmation). | |
Pagination (this refers only to the UI pagination controls) | Table.tsx | With customisation so user can go to Page ‘X’ by clicking on the number / typing it in |
Possible Future Components (to be implemented in those tickets)
Tabs | Not yet used but will be needed for different data views. | MUI Tabs | Future ticket when needed |
Accordion | Not yet used but will be needed for record views. | Future ticket when needed |
...
Choices | MUI - React Table | Material React Table |
Notes/Documentation | ||
Pros |
|
|
Cons | x | |
Package size | 501.3kB (entire material package) 11.3kB - table package | |
Usage & Maintenance Stats (package score) | ||
Final Choice | x | |
Justification | The project already uses TanStack so there is no current need to import a library that imports TanStack again |
...
Choices | MUI - Modal Component | react-modal |
Notes/Documentation | ||
Pros |
|
|
Cons |
|
|
Package size | 17.9kB - Modal | |
Usage & Maintenance Stats (package score) | ||
Final Choice | x | |
Justification | No notable issues |
4.1 Tabs
Choices | MUI Tabs | React-Tabs |
Notes/Documentation | ||
Pros |
|
|
Cons |
| |
Package size | 16.5kB - Tabs | |
Usage & Maintenance Stats (package score) | ||
Final Choice | x | |
Justification | This is just a suggestion as tabs are already included in the MUI package, but if more features are needed I would recommend switching over to react-tabs. |
...