Labs Common

This repository holds shared content for use across all Anvil Labs projects built by Digital Foundry. It builds on the MUI framework to provide tools to make a consistent frontend appearance across different applications.

This includes:

• MUI Theme
• shared Components

This content is published to a Digital Foundry npm package for installation in other projects. To install this package to a project, refer to Publishing/Updating the NPM Package and Dependent Projects.

Getting Started

1. Run yarn install locally to setup highlighting and imports for project in IDE
2. docker compose up --build to build project
3. Go to Sandbox Page

The Sandbox Page

Also included in this repository is a sandbox page to preview all styling and shared components. A developer can spin up the preview page as long as Docker is installed. To do so, run docker compose up.

Once the app has started, navigate to localhost:3003 to view the sandbox page.

Using the Theme

The theme standardizes the appearance of many MUI components that will see use across multiple projects. Refer to the Styled Material UI Components section for more details on what components are covered.

When using anvil themes make sure to use a compatible version of @mui/material in your package.json(ex. ~5.16.0 or 5.16.x would be sufficient in your project if lab-commons uses 6.16.4). Check the package.json in the root directory for compatible version.

Note: If you are seeing issues where your build(ex yarn run build) or intellisense is not picking up the typings from labs-common then please also update the versions of react, react-dom, @emotion/react, @emotion/styled, @mui/icon-material to match whats in lab-commons - this may help with those issues

When spinning up an Anvil Labs project, wrap the core components of the project app with a ThemeProvider MUI component, and provide the prop theme={anvilTheme}. The useAnvilTheme hook is exported by this project and provided in the NPM package.

Using Shared Components

Shared components can be found in this project's components directory. They can be imported by any project that has installed the shared package.

As of July 2024, the shared components include:

• LeftNav: a lefthand navigation bar
• Modal: a wrapper to standardize MUI Dialogs
• Slidesheets: a wrapper to standardize MUI Drawers

Making Changes to Themes/Publishing package

NOTE: You cannot overwrite an existing version when you publish. You will need to rev the version before you publish.

1. Create a PR with your changes and rev the version in the package json.

2. Follow this guideline on how to version rev:

   • Example Version: 1.0.0
     • Minor Changes:
       • 1.0.1
     • Breaking Changes:
       • 1.1.0
     • Major Changes:
       • 2.0.0

3. Do not publish until your PR is merged in. To publish the module, run the following commands:

   • yarn run build
   • npm publish --access=public

4. Update your package.json in the other repository to the latest version.

Styled Material UI Components

Default font is Avenir and size to 10

Actions

• [x] Buttons (Text)
• [x] Buttons (Icons)
• [x] Links
• [x] Action Menu

Inputs

• [x] TextField
• [x] SelectField
• [x] SelectMenu
• [x] Checkboxes
• [x] RadioButtons
• [x] TextAreas
• [ ] Datepicker

Information Display

• [x] Alerts & Info
• [x] Toast (MUI calls it a Snackbar)
• [x] Tooltips
• [ ] Table

Dialogs

• [x] Modals
• [x] Slidesheets

Navigation

• [x] Tabs
• [x] Breadcrumbs

Misc

• [x] LoadingSpinner

Styled Material UI Components Not Currently Supported

Inputs

• [ ] FileUpload
• [ ] ChipInput

Information Display

• [ ] Data Display Field