https://github.com/diamondlightsource/web-ui-components
https://github.com/diamondlightsource/web-ui-components
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/diamondlightsource/web-ui-components
- Owner: DiamondLightSource
- License: apache-2.0
- Created: 2023-07-26T10:47:50.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2026-04-07T08:49:40.000Z (3 months ago)
- Last Synced: 2026-04-07T10:25:15.582Z (3 months ago)
- Language: TypeScript
- Size: 7.19 MB
- Stars: 1
- Watchers: 19
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Web UI Components Library
 
Source code | https://github.com/DiamondLightSource/web-ui-components |
-------------|-----------------------------------------------------------|
Storybook | https://diamondlightsource.github.io/web-ui-components/ |
Generic components for React based Diamond web apps
## Installing
```sh
yarn add @diamondlightsource/ui-components
```
## Building
Building the distribution files:
```sh
yarn install
yarn build
```
Note: In some versions of Node < 16, there can be problems importing JSON files. In this case, the above command may not work and you should run the following:
`node --experimental-json-modules rollup --config rollup.config.mjs`
## Storybook
For examples of how to use components, you can run storybook with yarn storybook. That will open a catalogue of all available components and how to use them. For examples on Chakra (on which this library is based on, and provides plenty of components), visit the project's docs.
## Usage
1. Wrap your application with a Chakra Provider and apply the theme (this is application/framework specific, methods may vary):
```js
import { theme } from "@diamondlightsource/ui-components";
```
2. Use components
```js
import { theme } from "@diamondlightsource/ui-components";
```
## Testing
- Run `yarn test`