https://github.com/diamondlightsource/sci-react-ui
A collection of common, material UI styled, components for use at Diamond and beyond.
https://github.com/diamondlightsource/sci-react-ui
Last synced: 3 months ago
JSON representation
A collection of common, material UI styled, components for use at Diamond and beyond.
- Host: GitHub
- URL: https://github.com/diamondlightsource/sci-react-ui
- Owner: DiamondLightSource
- Created: 2024-10-21T14:46:37.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-01-28T14:18:24.000Z (4 months ago)
- Last Synced: 2025-03-01T00:57:00.277Z (3 months ago)
- Language: TypeScript
- Homepage: https://diamondlightsource.github.io/sci-react-ui/
- Size: 2.09 MB
- Stars: 2
- Watchers: 4
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: readme.md
- Changelog: changelog.md
Awesome Lists containing this project
README
Scientific React UI
===================
Scientific React UI components, based on MUI.
_Early development release._
A theme and component library to make websites at scientific installations simple to create.
Using
-----
### Installing
Install as usual:
```sh
npm i @diamondlightsource/sci-react-ui
```
### Usage
First use the ThemeProvider and supply a theme.
```js
import {
ThemeProvider,
DiamondTheme
} from "@diamondlightsource/sci-react-ui";
root.render(
)
```
There are currently two themes, `GenericTheme` or `DiamondTheme`, but you can - and should - adapt your own.
There are various components, here's an example of how to use the NavBar:
```js
import {Container, Typography} from "@mui/material";
import {
Navbar,
NavLink,
NavLinks
} from "@diamondlightsource/sci-react-ui";
function App() {
return <>
A link
Scientific UI Collection
A collection of science based React components.
>
}
export default App;
```
### Documentation
Documentation is created with Storybook.
Read and play with it at [diamondlightsource.github.io/sci-react-ui](https://diamondlightsource.github.io/sci-react-ui/)
Developing
----------
Code can be found at [github.com/DiamondLightSource/sci-react-ui](https://github.com/DiamondLightSource/sci-react-ui).
You'll need `pnpm` installed to build it. See [tools.md](./tools.md) for list of other tools used in this library
### Build
First install all packages
```sh
pnpm install
```
Build with rollup
```sh
pnpm run rollup
```
### Storybook
To view the components in Storybook use:
```sh
pnpm run storybook
```
### Unit Test
Test with Jest
```sh
pnpm run test
```
### App test
Create a test app.
To test the package, you may be able to `link` the package directly from source:
```sh
pnpm link
```
But if that doesn't work, you can try `pack`, then `install`:
In the package repo:
```sh
pnpm pack
```
In the test app repo:
```sh
pnpm install /diamondlightsource-sci-react-ui-0.0.1.tgz
```