Up Components

UP42's Shared Component Library. This is a cross-team collaborative package that enables us to reuse React components across different projects. The package uses Storybook to organize and document UI components, and is based on MUI for theming and most of the APIs.

Up Components library provides react components based on UP42's design system

Getting Started

$ npm install @up42/up-components

If you are using yarn you need to install the peer dependencies manually.

$ yarn add @up42/up-components @mui/material @mui/icons-material @emotion/react @emotion/styled @mui/x-data-grid @mui/x-date-pickers

Using Up Components in your application

Make sure to wrap your application with the top-level UpComponentsProvider.

import { UpComponentsProvider, Button } from '@up42/up-components'

const App = () => (
  <UpComponentsProvider>
    <Button>Hello!</Button>
  </UpComponentsProvider>
)

Available Components

To see a list of available components, you can go through Storybook's Component Documentation UI, either at the following links:

• Master version at https://up-components.up42.com/
• Preview branch at https://up-components--{branch-name}.branch-preview.up42.dev/

You can also import components from the @mui/material directly from the package, instead of using @mui:

- import { Accordion } from '@mui/material';
+ import { Accordion } from '@up42/up-components'

Note: UP Components currently exports all MUI components on top of our custom ones. Which means that the existing MUI documentation can be used for any component not yet documented on our own Storybook. In case of conflicts, our custom documentation prevails over MUI.

Design System Tokens

UP42 tokens are also exposed as part of UpComponents.

- import tokens from '@up42/constellation-tokens/dist/json/tokens.json'
+ import { tokens } from "@up42/up-components"

Working with multiple branches

When working on a project using Up Components, it's important to remember that different versions might be used on different branches.

For example, your project's master branch might be using Up Components version 0.4.9, while your feature branch might be using version 0.5.0.

To avoid conflicts when working on multiple branches, remember to always run yarn or npm install after switching branches.

Developing in the Up Components package

Please refer to our Contributing Guidelines for development information.

Troubleshooting

Please refer to out Troubleshooting documentation.