Prototype common UI module ICSHWI-9960

This merge request contains some initial implementation for the ce-ui-common component/hook library. It contains the following things:

Hooks:

useAsync

• A React hook to call async functions and get the data as state
• I changed the way it works a bit. useAsync now
  • Returns an object instead of an array: { value, wrapper, loading, dataReady, error }
  • Has an dataReady state to let you know when the first data is available. (We have often wanted take action after the very first loading cycle completes. Now the clients don't need to keep track of this themselves)
  • Allows you to await the wrapper and get the updated value, e.g. const value = await wrapper(); doSomething(value). This will be very useful in callbacks and probably reduce the number of useEffect blocks we need.
  • Just returns the error -- some external code should deal with it.
  • Works for all async functions, not just API responses (this means some code will need to shift to callAndUnpack or similar.
• Has some tests for all this functionality

Components:

All components have storybooks which you can run using npm run storybook

GlobalAppBar

• A top app bar and collapsible menu
• The app bar displays a home button, title, and action button
  • These are supplied by the user, no defaults
  • These can be set via the GlobalAppBarContext
• The collapsible menu
  • displays whatever menu items the user configures through the menuItems prop
  • can be collapsed or opened using a toggle button
  • shifts the main content over when opening or closing
• The API of this component is completely changed from the deployment tool
  • Before, the only prop it accepted was children
• This component combines two others:
  • ButtonAppBar
  • MenuDrawer

Table

• A styled version of the PrimeReact DataTable
• Based on CustomTable from the deployment tool
• Styling done with Material UI's styled utility (no custom CSS file anymore)
• An updated interface:
  • The pagination prop must be supplied to make the table's paging controls appear. This object contains all the related configuration for the page controls. Having one object for this should reduce the amount of state other components need to keep track of when using a table.
  • rowClassName allows you to supply a function mapping the row data to some class name for styling purposes. If you don't supply one, the default will map the severity field of the row data to the class.
  • Setting the row class to info, warn, or error will change the row styling. These special styles no longer use hardcoded colors. Instead, you can configure them using the theme's color palette.
• Sorting functionality has not been implemented yet

Styles

theme

• A theme which can be used in dependent apps
• Currently only sets the font families, main colors, and demos creating a component variant

General styling comments

• I have tried to use Material UI styled components and the theme for everything
  • I have tried to avoid inline styling (e.g. sx)
  • I have completely avoided the deprecated makeStyles API
• When using styled components, I have tried to be as specific as possible with selectors
  • The selectors in Table need some improvement in this area
• I have NOT done a good job making safe class names. This needs to be fixed soon.

Config/Other stuff

README.md

• The readme has been updated to contain a lot of information. You can read
  • How to install the module into an app from Gitlab
  • How to develop the module locally
  • How some of the building works
  • How to run tests and storybook

.babelrc

• Configuration for building the library

package.json

• Scripts which allow you to
  • Build the module locally
  • Install the module locally
  • Install module from git

TODO

• There is no Gitlab CI yet
• There are no component tests
• These components don't have as much functionality as the components that inspired them (yet)