react-usit-ui

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).