# About #

A baseline infrastructure for creating a design system of React components.

Demo: https://ryanfitzer.gitlab.io/design-system-starter


## Usage ##

Using `import`:

```
import { Example } from 'design-system-starter';
```

Using `require`:

```
const { Example } = require( 'design-system-starter' );
```

The `main` entry point defaults to [UMD (Universal Module Definition)](https://github.com/umdjs/umd#readme).

Each component is also exposed in both [ECMAScript Module](https://nodejs.org/api/esm.html) and CommonJS formats.


### ESM ##

Destructured from full library of components:

```
import { Example } from 'design-system-starter/dist/esm';
```

Individual component:

```
import Example from 'design-system-starter/dist/esm/example';
```


### CJS ###

Destructured from full library of components:

```
const { Example } = require( 'design-system-starter/dist/cjs' );
```

Individual component:

```
const Example = require( 'design-system-starter/dist/cjs/example' );
```


### UMD Browser Global ###

The [UMD (Universal Module Definition)](https://github.com/umdjs/umd#readme) format enables access to the components in both Node and the browser.

Components are exposed via the `DS` global variable in the browser.

```
<script src="path/to/dist/umd/index.js"></script>
<script>
  ReactDOM.render(
    <DS.Example/>,
    document.getElementById('root')
  );
</script>
```



## Development ##


### Install Dependencies ###

Install root project and Storybook dependencies:

```
npm install
npm run sb:install
```


### Start Storybook ###

```
npm run sb
```

Navigate to <http://localhost:4000> to view the component documentation.



## Distribution Build ##

This process is automatically run on `npm publish` via the `prepublishOnly` lifecycle hook.

```
npm run dist
```

Creates the following directory: 

```
└── dist
    ├── cjs
    ├── esm
    └── umd
```

Each directory contains an `index.js`. The `esm` and `cjs` directories also contain individual exports for each component.