University of Michigan Library Design System

A collection of shared design styles, components, and patterns for teams to build quality consistent interfaces. A bit like a LEGO kit.

View the documentation site

Getting started

This project uses:

Lerna to manage multiple packages/libraries.
Storybook for a development environment.
Gatsby v2 for a fast website.

Run these commands before doing anything else.

git clone https://github.com/mlibrary/umich-lib-ui.git
cd umich-lib-ui
npm install

⌨️ Development

1. Boostrap Lerna

All dependencies get linked for cross-component and package development

npm run bootstrap

2. Start the development environment

Starts the the storybook development environment.

npm run develop

Opens up Storybook at http://localhost:9001

3. Develop components in `/packages/`.

Anytime you add a new component you will need to run npm run bootstrap again.

`www` / doc site

Built with Gatsby v2 for a fast website.

See the README in www directory.

📦 Publishing

❗ An NPM account with the umich-lib-ui organization is required to publish. Only core-contributors are able to publish versions. Contact the core team to get help setting this up.

Before anything else

Create a build to be published

npm run build

Make sure you're logged into the NPM registry.

npm login

Publish options

1. Canary

To publish a quick canary version

npm run publish:canary

2. Next

To publish a next version.

npm run publish:next

3. Publish

To publish an official version and follow Lerna publish prompts.

npm run publish

🆘 Help / Questions

Open a GitHub issue.

Why CSS-in-JS with Emotion?

See A Unified Styling Language

Contributing

See guidelines for contributing

heidisb/umich-lib-ui