open-index/open-npm huggingface dataset:
npm package: @olympusdao/component-library
Description: [![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg)](https://master--61c4d644c064da004aebdd97.chromatic.com)
Latest version: 3.1.7

# Olympus Component Library

[![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg)](https://master--61c4d644c064da004aebdd97.chromatic.com)

This library extends Material UI and contains common React Components for Olympus Frontends.

## Getting Started

We use React Storybook to build reusable components in isolation. To get started with Storybook first:

- Clone project and run `yarn install`
- Launch Storybook: `yarn storybook`

Story files are contained under the stories directory and illustrate/validate various component states.

## Linking with frontend projects for local development

To validate changes in this repo quickly and avoid constant package publishing during development cycles you will need to leverage yarn link to link this package to your frontend project.

Run:

- `yarn build` to rollup this project.
- `cd lib`
- `yarn link`
- `cd FRONTEND PROJECT`
- `yarn link @olympusdao/component-library`

Because there are peer dependencies of Material UI and React, you will also need to link these modules to avoid conflicts and multiple instances.

```
NAVIGATE TO FRONTEND PROJECT DIR (NOT THIS REPO)
yarn install
cd node_modules/react
yarn link
cd ../react-dom
yarn link
cd ../@mui/material
yarn link
cd ../../react-router-dom
yarn link

cd THIS PROJECT
yarn link react
yarn link react-dom
<!-- yarn link @material-ui/core -->
yarn link @mui/material
yarn link react-router-dom
```

Read more about why we need to do this here:
https://github.com/facebook/react/issues/14257