react-usit-ui
v0.0.68
Published
React components using Grafisk profil for UiO
Downloads
14
Keywords
Readme
UI component library for UiO Profile
WORK IN PROGRESS - EXPECT API TO BREAK FROM ONE VERSION TO THE NEXT WITHOUT FURTHER NOTICE.
React components created by USIT (University Center for Information Technology) - University of Oslo.
The components implement the UiO Graphical Profile from https://bitbucket.usit.uio.no/projects/UX/repos/grafisk-profil/browse
Storybook for the current version: https://utv.uio.no/react-usit-ui
Getting started
Add the library to your project
yarn add react-usit-ui
Configure copying of assets
This library comes with some graphical assets (icons, logos etc). When
the library is installed, these are put in
node_modules/react-usit-ui/dist/assets
. You may need to copy files
from this folder to your application's static
folder or equivalent.
To make assets load properly, set theme.props.publicPath
to the
public path of your static folder.
Theme
Application must be wrapped in a ThemeProvider component for other components to be rendered properly.
import { ThemeProvider } from 'react-jss';
import { createUiOTheme } from 'react-usit-ui';
const theme = createUiOTheme();
// ...
<ThemeProvider theme={theme}>
<App />
</ThemeProvider>
Color Palette
The standard colors is defined in the color palette. Styles can be overridden in theme.palette.xxx
. Standard colors are also exported from react-usit-ui/colors
.
Theming
The component library supports theming. The function createUiOTheme
provides a default theme and supports customization of color palette and typography.
Todo: Provide documentation on theme object and how it can be customized.
Development
Developing in isolation
We use Storybook to present and document components. To start Storybook locally run
yarn run storybook
Todo: Add link to published storybook for most recent version of UI library.
Developing together with an application
Recommended workflow:
- Checkout this repository
- Run
yarn link
in the repository folder - Go to your project folder (the project that has react-usit-ui as a dependency) and run
yarn link react-usit-ui
- Still in your project folder, run
(cd node_modules/react-usit-ui && yarn watch)
to start a build server. This will build the react-usit-ui library in development mode and watch for changes, so you don't have to rebuild manually whenever you change something.
Please note:
- To install new packages in your project, you may have to unlink first to avoid an error message:
yarn unlink react-usit-ui
- To test your project with a production build of this library, run
(cd node_modules/react-usit-ui && yarn prepare)
.