design-system-starter
Version:
Design system starter
118 lines (69 loc) • 2.05 kB
Markdown
# 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.