@up42/up-components v1.12.0
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.
9 days ago
18 days ago
19 days ago
24 days ago
25 days ago
26 days ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
4 months ago
4 months ago
5 months ago
8 months ago
10 months ago
10 months ago
7 months ago
8 months ago
8 months ago
7 months ago
7 months ago
6 months ago
6 months ago
6 months ago
8 months ago
10 months ago
10 months ago
9 months ago
9 months ago
9 months ago
7 months ago
7 months ago
7 months ago
8 months ago
7 months ago
9 months ago
9 months ago
10 months ago
8 months ago
9 months ago
10 months ago
10 months ago
9 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago