Scientific React UI

Scientific React UI components, based on MUI.

Using

Installing

Install as usual:

npm i @diamondlightsource/sci-react-ui

Usage

First use the ThemeProvider and supply a theme.

import {
    ThemeProvider,
	DiamondTheme
} from "@diamondlightsource/sci-react-ui";

root.render(
  <ThemeProvider theme={DiamondTheme}>
    <App />
  </ThemeProvider>
)

There are currently two themes, BaseTheme or DiamondTheme, but you can adapt your own.

There are various components, here's an example of how to use the NavBar:

import {Container, Typography} from "@mui/material";
import {
  Navbar,
  NavLink,
  NavLinks
} from "@diamondlightsource/sci-react-ui";

function App() {
  return <>
    <Navbar>
      <NavLinks key="links">
        <NavLink href="#" key="first">A link</NavLink>
      </NavLinks>
    </Navbar>
    <Container>
        <Typography variant="h2">Scientific UI Collection</Typography>
        <Typography>A collection of science based React components.</Typography>
    </Container>
  </>
}
export default App;

Documentation

Documentation is created with Storybook. Read and play with it at diamondlightsource.github.io/sci-react-ui

Developing

Code can be found at github.com/DiamondLightSource/sci-react-ui.

You'll need pnpm installed to build it. See tools.md for list of other tools used in this library

Build

First install all packages

pnpm install

Build with rollup

pnpm run rollup

Storybook

To view the components in Storybook use:

pnpm run storybook

Unit Test

Test with Jest

pnpm run test

App test

Create a test app.

To test the package, you may be able to link the package directly from source:

pnpm link <path-to-this-app-folder>

But if that doesn't work, you can try pack, then install:

In the package repo:

pnpm pack

In the test app repo:

pnpm install <path-to-this-app-folder>/diamondlightsource-sci-react-ui-0.0.1.tgz