Versions Compared

Old Version 2

changes.mady.by.user Millie Wilkinson

Saved on

compared with

New Version 3

changes.mady.by.user Millie Wilkinson

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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

The existing Admin app needs evaluating with a view to replacing components to fix issues with non compliance against accessibility guidelines, and to enable better development in the long term. 

...

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.

MUI Accordion

Future ticket when needed

3 ) Review

Components have been selected from Material design libraries and evaluated against the goals (see section 1) for their suitability for use in the Admin app.

3.1. Collapsible left-hand menu

Choices

MUI - React Drawer 

react-pro-sidebar

react-burger-menu

Custom

Notes/Documentation

MUI documentation

Npm react pro sidebar packages page

Npm burger menu package page

N/A

Pros

  • Included in the MUI package

  • Easy to use

  • Highly customisable

  • Visually appealing 

  • Includes transition animations 

  • Has been around for 8+ years 

  • No package installation needed

Cons

  • Big package size - but this includes many other components that will be used.

  • Extra package install

  • Relatively large package

  • Inactive maintenance 

  • Will take time to implement (another task)

Package size

501.3kB (entire material package)

20.4kb - drawer package

64.2kB

108.3kB

Usage & Maintenance Stats

(package score)

95/100

72/100

69/100

Final Choice 

x

Justification

Included in the MUI package that is planned to be used, making it convenient. 

3.2. Breadcrumb

Choices

MUI - Breadcrumbs

react-router-dom

Notes/Documentation

https://mui.com/material-ui/react-breadcrumbs/

https://reactrouter.com/en/main/hooks/use-matches#breadcrumbs

Pros

  • Comes with the MUI package

  • Part of the react-router-dom, so can be used along with other routing features

  • Minimal code

  • Popular and well maintained

Cons

  • The code uses nextjs routing, therefore would have to be reworked to include react-router-dom

Package size

501.3kB (material package)

19.4kB - breadcrumb package

70kB

Usage & Maintenance Stats

(package score)

95/100

100/100

Final Choice 

x

Justification

Included in the MUI package and there is no need to rework routing from next js to use it.

3.3. Table

Choices

MUI - React Table

Material React Table

Notes/Documentation

MUI documentation

Material React Table documentation 

Pros

  • The project already uses TanStack.

  • Imports TanStack as well as only the necessary components from MUI

  • No need to switch UI components If the project decides to switch from MUI to another UI 

Cons

x

Package size

501.3kB (entire material package)

11.3kB - table package

176.9kB

Usage & Maintenance Stats

(package score)

95/100

83/100

Final Choice 

Justification

The project already uses TanStack so there is no current need to import a library that imports TanStack again

3.3.1 Data Grid Assessment

...

  • Sorting columns 

  • Searching 

  • Filtering

  • Clicking on rows to reveal details (as opposed to one column being a ‘link’)

  • Checkbox select

  • Menu for future bulk actions

3.4. Typography

Choices

MUI - Typography

Custom Typography component 

Notes/Documentation

MUI Documentation

guide

Pros

  • Appears to be the most recommended component, as there are a few guides on how to use it here and here 

  • Full control over code (again)

Cons

Nothing notable

  • Again, will take time

Package size

501.3kB (entire material package)

11.8 kB - Typography

Usage & Maintenance Stats

(package score)

95/100

?

Final Choice 

x

Justification

It will be easier than coding a new Typography component.

3.5 Dropdowns/Selects

Choices

MUI - Menu Component

React Select

Custom

Notes/Documentation

Documentation linked to title

Documentation linked to title

Pros

  • No extra import required

  • More features than MUI for selection features (animation, styles)

  • 5k avg weekly downloads, popular for a smaller package

  • Complete control of code

Cons

  • Not as customisable as react-select

  • Extra import cost

  • Less features 

  • Needs maintaining

Package size

501.3kB (entire material package

23.kB - Menu

90.9kB

Usage & Maintenance Stats

(package score)

95/100

78/100

?

Final Choice 

x

Justification

Unless we need the specified features of react-select, there is no need to use it yet.

3.6. Button

Choices

MUI - Button Component

Custom

Notes/Documentation

Documentation from MUI

Pros

  • Inclusive in MUI (the package we plan to use)

  • Full control

  • Not reliant on a package

Cons

?

  • Will take time to implement own button

  • Is the effort necessary?

Package size

501.3kB (entire material package)

17.2kB - Button

Usage & Maintenance Stats

(package score)

95/100

?

Final Choice 

x

Justification

Searching around, there seem to be no good single package replacements for the MUI button. It is possible to use a button from another package, however the MUI one is already included in the package the project plans to use

3.7. Icons

Choices

MUI Icons

React Icons

Font Awesome 

Notes/Documentation

MUI Icons documentation

React Icons page

Font Awesome Page

Pros

  • Easy to navigate

  • Icons fit a consistent theme

  • When using code examples from MUI, the icons don’t need to be changed

  • You only need to import icons you will use

  • Fairly lightweight

  • Includes icons from many different place

Cons

  • Additional import on top of MUI package

  • May not all adhere to a consistent design theme as icons are pulled from different websites

  • Some paid features

  • Pay wall for support features 

Package size

4.4MB

6.6kB

56.6kB

Usage & Maintenance Stats

(package score)

95/100

90/100

93/100

Final Choice 

x

Justification

Small package size and no pay wall for icons

3.9. Card

Choices

MUI Card

react-ui-cards

Notes/Documentation

MUI Documentation

Npm package page

Pros

  • More customisable

  • Neat, pre-made cards without having to write much extra code

Cons

  • Potentially have to write more code to create a nice looking card

  • Not very popular and a small community (low package rating)

  • Unsure of how customisable it is

Package size

501.3kB

11.8kB - Card

446kB

Usage & Maintenance Stats

(package score)

95/100

56/100

Final Choice 

x

Justification

The package size for react-ui-cards is quite large

4.0. Modal

Choices

MUI - Modal Component

react-modal

Notes/Documentation

Documentation

Npm package page

Pros

  • Already themed (visually pleasing)

  • Seems easy to implement

  • Highly customisable

Cons

  • Nothing notable

  • CSS will need customising as the default modal is not visually pleasing

  • Inactive maintenance 

Package size

501.3kB

17.9kB - Modal

186kB

Usage & Maintenance Stats

(package score)

95/100

80/100

Final Choice 

x

Justification

No notable issues

4.1 Tabs

Choices

MUI Tabs

React-Tabs

Notes/Documentation

Documentation 

Website

Pros

  • No extra import

  • More options for customising (tabs inside tabs, dynamic tabs)

  • Very small package size

Cons

  • Simple compared to react-tabs

Package size

501.3kB

16.5kB - Tabs

6.5kB

Usage & Maintenance Stats

(package score)

95/100

86/100

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.

Final Summary

The Material UI switchover was completed in DCB-306, with the work captured in DCB-278 and the results can be viewed at https://admin.dev.resharedcb.org/ . The key improvements this work has delivered have been captured below.

...