epo-react-lib

React UI components for Rubin Observatory Education & Public Outreach projects

Use

$3

Install from npm.

yarn add @rubin-epo/epo-react-lib

$3

EPO React Library has 5 peer dependencies required to pull it in to your application.

yarn add react react-dom styled-components i18next react-i18next

There is an additional optional peer dependency on next for components that use the Next.js router.

$3

After installing the package library, the global styles will need to be added to the top level of your application.

``
import { GlobalStyles } from "@rubin-epo/epo-react-lib";

const App = () => {
return


}
`

If you use other Rubin React libraries, this step only needs to be done once from this library. Additional imports of the global styles are not necessary.

$3

Import localeStrings from @rubin-epo/epo-react-lib, it contains individual locales that can be added to your project's i18next setup.

Build

$3

This project uses Vite in library mode to package the contents of /packages/epo-react-lib/src into modules located in /packages/epo-react-lib/dist/epo-lib.[es|umd].js and TypeScript typings in /packages/epo-react-lib/dist/index.d.ts

To build from source:

`
cd packages/epo-react-lib
yarn
yarn build # production build


yarn dev # development server


`

$3

Storybook is used to create an interactive display of the components in the EPO React Library.

Stories from component folders following the \\.stories.[t|j]sx will be included in the Storybook bundle.

To run Storybook:

``
yarn build
yarn storybook
`

Test

Each component EPO React Library contains a Jest unit test. Tests should be co-located with component code and their stories and follow the **.test.[t|j]sx naming format.

`
yarn test


yarn test:generate-output # will save to .jest-test-results.json for Storybook


`

To add a unit test to it's Storybook page add the filename of the unit test to the parameters property of the story

`
export const Primary: StoryObj = {
args: {
disabled: false,
children: "Hello",
},
parameters: {
jest: "DemoButton.test.tsx",
},
};
``