feat(admin-ui): List and DataList components

[leopuleo]

Changes

With this pull request, we introduce two new components: List and DataList.

These two components are utilised to present data across various admin app views. The List component serves as the foundational element and is used internally by DataList, which displays data along with additional props necessary for functionalities such as filtering and ordering, etc.

With this PR, we refactored the views that are using DataList to:

• Show the data correctly; see Breaking changes.
• Use the button icons exported by the DataList component: now the icons used are imported directly from @material-design-icons/svg/outline set.

Breaking changes

Previously, developers could use any component as direct children of List.ListItem. This is no longer possible; to ensure the correct positioning, the appropriate List.ListItem child tag must now be used (i.e.: <ListItemTextPrimary />).

Example:

<ListItemText>
-  {item.firstName} {item.lastName}
+  <ListItemTextPrimary>
+    {item.firstName} {item.lastName}
+  </ListItemTextPrimary>
   <ListItemTextSecondary>{item.email}</ListItemTextSecondary>
</ListItemText>

Missing from the design

• ListItem active and selected state.

Other improvements

• Accordion: various minor fixes to the component; most of which are cosmetic.
• FormComponentProps: FormComponentProps now accept TValue generic for the onChange prop.
• IconPicker: any domain entity name has been prefixed with IconPicker namespace to not collide with other components such as Icon.
• Heading and Text: incorporate text class names into extendTailwindMerge for enhanced merging.

Screenshots

Important

The changes have been applied to the left side of the screen. We still need to refactor the right side.