Hundred5 Design System

This repository contains the components that are common across different Hundred5 web applications implemented in React. These are UI elements such as forms, buttons, modals, alerts etc.

The components are using React and Emotion for styling. TypeScript is used, however type definitions for Flow are also provided.

Installation

yarn add @hundred5/design-system

This package has peer dependencies, so make sure that react, react-dom and react-modal are installed as well.

Usage

import { AlphaButton } from "@hundred5/design-system";

const MyComponent = () => <AlphaButton color="blue">Click me!</AlphaButton>;

For examples of each component check the story files stored next to component files.

Development

This project uses Storybook. You can start it with yarn start.

Publishing to npm

This project uses semantic versioning:

• If a bug is fixed without changing any component props, bump the patch version.
• If you add props to a component or add new components, bump the minor version.
• If you remove or change props in a component or remove components, bump the major version.

Source files are automatically compiled to JavaScript before publishing to npm, so simply running npm publish --access public should work.

The build script does two things:

1. Compiles TypeScript files with Babel to JavaScript. It is easier to use Babel instead of TypeScript compiler as the Emotion Babel plugin must be used to process CSS-in-JS.
2. Generates TypeScript definiton files with the TypeScript compiler, so that the package can be used in TypeScript apps without losing type information.