@intellihr/blueberry

Blueberry Design System

[Alpha - 0.0.1]
Blueberry is currently a work in progress. Check out ui-components for our currently-in-use component library.

Component status tracker: https://www.notion.so/ihr/cd77ab4f45634527b0ac495a83c27ad5?v=e96dc48e0a774a15b5bfb9f60cfddb23
Storybook: https://intellihr.gitlab.io/engineering/blueberry/storybook
Playroom: https://intellihr.gitlab.io/engineering/blueberry/playroom

Run Blueberry locally

Running Blueberry locally is super simple.

1. Clone this repo to your local dev environment
2. Add a .npmrc file with our FontAwesome auth token to the root of the project. Look for 'Font Awesome Pro .npmrc' on 1Password for the contents of this file.
3. Run yarn
4. Run Storybook (yarn storybook) and/or Playroom (yarn playroom) using their respective commands

Consume Blueberry components (yum!)

Blueberry exports a single package containing all the components and utilities you need to build awesome, accessible UIs. The library is versioned as a single package to keep maintenance simple and straightforward for both consumers and the design team.

First time set up

1. Add Blueberry as a dependency
   • yarn add @intellihr/blueberry
2. Wrap the BlueberryProvider component around the top level of your app (you'll likely have a stack of providers already).
   • This provider sets up the global styles and theme variables - none of our components will work correctly without this.
3. Start importing components!

BlueberryProvider configuration

The following props can be used to customize your implementation:

• theme takes a string to select what theme to use.
  • intelliLight will be used if no theme is specified.
  • The theme object cannot be directly configured or passed through from a consumer.
• i18n takes an object of all the translation strings required for components. Default English translations are located in _private/BlueberryContext/i18n.ts
• i18nLocale takes a locale for certain require components that require it. Defaults to en.
• anchorOnClick takes a function that gets called when a user interacts with any a element rendered by Blueberry.
  • undefined will be used if no callback is specified.
  • If you don't use a routing library like react-router you can ignore this prop.
  • Example for running a custom callback only on hrefs that start with /spa/:

    anchorOnClick={(e) => {
      if (e.currentTarget.href.startsWith('/spa/') {
        myCustomOnClick(e)
      }
    }}

Our Foundations

Vanilla Extract (CSS-in-JS)

We're using Vanilla Extract as it gives us great performance with its zero-runtime atomic CSS and type safety through its Typescript preprocessor.

Radix (Component Primitives)

We're using Radix components as the basis for many of our components to save time and effort instead of re-implementing accessibility (a11y) standards and common interactions. Radix primitives should never be re-exported directly by Blueberry.

FontAwesome (Icons)

We're using Font Awesome 6 Pro icons for a consistent library of icons. Blueberry uses the Individual import method and exports a curated subset of icons with our own wrapper.

Contributing to Blueberry

Blueberry is composed of a few separate apps which can each be run individually both inside and outside of docker. We recommend running outside of docker for local development.

Storybook (Component Development)

yarn storybook

Storybook is great for developing and prototyping components in an isolated environment.

• Blueberry Storybook
• All components should have a .stories.tsx file.
• Built with Storybook

Playroom (Design Prototyping via Code)

yarn playroom

Playroom is an awesome tool for live prototyping and designing UIs with code.

• Blueberry Playroom
• All components exported from index.ts should be available in Playroom.
• All components should have a .snippets.tsx file.
• Built with Playroom

Tests

yarn test

We expect all of our components and interactions to be thoroughly tested for accessibility and functionality.

• All components should have a .test.tsx file
• Components have an data-cy attribute that can be used for testing with Jest and Cypress. This is equivalent to the data-component-context attribute in UI Components. Set this value with the component's id prop.
• Tests run on Jest
• Built with Interactors by Frontside and Testing Library (React)

Docs Site

-Coming eventually-

The landing point for all things Blueberry that clearly displays all of our design principles, tokens, and patterns as well as component usage documentation with links out to Storybook and Playroom.

Misc

Create React App

Blueberry is built on top of Create React App. The following scripts are available:

• npm run build - Builds the app for production to the build folder.

• npm run eject - Ejects the app from CRA's single build config