Building a shared UI library for Intelli*

We need a design for error messages on this screen !

Let's copy it, we also need it on another screen.

Oh btw we've added a button on it.

We're not displaying errors but we'd like to use the same color scheme.

Our error message needs to look different because we are Unique™.



Solution A : copy & pasting ftw

  • Easy and cheap to implement
  • Very flexible
  • Doesn't scale well
  • High risk of introducing inconsistencies
  • No single source of truth

Solution B : Just Use Bootstrap

  • Easy and cheap to implement
  • Well documented
  • Reliable
  • Difficult to customise in a maintainable way
  • Difficult to enforce consistency
  • Includes a bunch of stuff we don't need (jQuery...)

Solution C : share UI components across projects

  • Great for code scalability / maintainability
  • Great for consistency
  • Clean way to separate UI from business logic
  • Costly to implement
  • No documentation out of the box
  • Need to manage breaking changes effectively

"Design systems" / "styleguides" / "pattern libraries"

The stack




The documentation (Storybook)

Document components in isolation and in context

Play with props, get a live preview

npm install -D intelli-ui-library --registry
import {
} from 'intelli-ui-library/src/components';

Importing the components in a project

import "intelli-ui-library/src/assets/global-styles";
npm link intelli-ui-library

Local workflow :

WIP and future improvements

  • Unit tests coverage
  • Usage documentation (in Storybook)
  • More granular versioning for breaking changes
  • Host the documentation online

Lessons learned

Start small & deliver usable material quickly

Avoid premature optimisations (only include components that are actually shared across projects)

Versioning is hard

It's not just about the deliverables, it's about the workflow

Building a shared UI library for Intelli*

By maelig

Building a shared UI library for Intelli*

  • 554
Loading comments...

More from maelig