SmartBear Design System

This repository contains presentational components implementing the SmartBear Design System.

See a live demo based on StoryBook.

Currently the only implementation is based on React, using Styled Components, and only a few components are implemented.

If people want to implement components using other UI technologies such as Vue, Ember or other we could move the React implementation to a sub directory.

We could also consider replacing Styled Components with a general-purpose CSS preprocessor and CSS Modules so that the same stylesheets can be used with several UI technologies.

Suggestions and pull requests welcome!

Try it out

# Install dependencies
npm install

# View components in Storybook
npm run storybook

# Run tests
npm test

Deploy live demo

Run this:

npm run deploy-storybook

TODO: Set up CI and run this automatically

Architecture

The design system is based on tailwindcss and tailwindui. This is extended with a custom theme and custom CSS classes.

Custom theme

The design system theme is implemented by extending tailwindcss' default theme, as described in Customizing Your Design System.

The theme defines the following values:

• Colours (using design system specific names)
• Spacing (padding, margin, width and height)

The theme is defined in tailwind.config.js. All names in the theme use the sb- prefix to distinguish from default tailwindcss names.

Defining Components

We define components in CSS according to tailwindcss' Extracting CSS components with @apply guidelines.

Upgrading Dependencies

It's good practice to regularly upgrade dependencies:

npx npm-check-updates --upgrade

After doing this, export the default tailwind config

npx tailwind init tailwind-full.config.js --full

This file is not in source control (it's in .gitignore), but it's useful to look at it to see if the structure has changed, in which case you may have to update the theme in tailwind.config.js

Releasing

npm version [major|minor|patch]
npm publish