open-index/open-npm huggingface dataset:
npm package: @hundred5/design-system
Description: Collection of common components used in Hundred5 web apps
Latest version: 1.41.18

# 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](https://emotion.sh) 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

```typescript
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](https://storybook.js.org/). You can start it with `yarn start`.

# Publishing to npm

This project uses [semantic versioning](https://docs.npmjs.com/about-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.