pa-temp-design-system v0.0.17

About

TODO

Storybook

See Storybook for documentation and code samples

@todo ...about styled-system / styled-components

Getting Started

Import essential files

Theme

ThemeProvider

Base CSS

Usage

Using import:

import { Example } from 'pa-temp-design-system';

Using require:

const { Example } = require( 'pa-temp-design-system' );

The main entry point defaults to UMD (Universal Module Definition).

Each component is also exposed in both ECMAScript Module and CommonJS formats.

ESM

Destructured from full library of components:

import { Example } from 'pa-temp-design-system/dist/esm';

Individual component:

import Example from 'pa-temp-design-system/dist/esm/example';

CJS

Destructured from full library of components:

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

Individual component:

const Example = require( 'pa-temp-design-system/dist/cjs/example' );

UMD Browser Global

The UMD (Universal Module Definition) 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 start

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.