open-index/open-npm huggingface dataset:
npm package: @nlabs/arkhamjs-devtools-extension
Description: ArkhamJS DevTools Extension
Author: Giraldo Rosales
Latest version: 3.11.6

# arkhamjs-devtools-extension

ArkhamJS Development Tools Browser Extension

[![Travis](https://img.shields.io/travis/nitrogenlabs/arkhamjs.svg?style=flat-square)](https://travis-ci.org/nitrogenlabs/arkhamjs)
[![Issues](https://img.shields.io/github/issues/nitrogenlabs/arkhamjs.svg?style=flat-square)](https://github.com/nitrogenlabs/arkhamjs/issues)
[![TypeScript](https://badges.frapsoft.com/typescript/version/typescript-next.svg?v=101)](https://github.com/ellerbrock/typescript-badges/)
[![MIT license](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](http://opensource.org/licenses/MIT)
[![Chat](https://img.shields.io/discord/446122412715802649.svg)](https://discord.gg/Ttgev58)
npm package: @nlabs/arkhamjs-middleware-devtools
Description: Add devtools to ArkhamJS app
Author: Giraldo Rosales
Latest version: 3.11.6

# @nlabs/arkhamjs-middleware-devtools

ArkhamJS DevTools Middleware

[![npm version](https://img.shields.io/npm/v/@nlabs/arkhamjs-middleware-devtools.svg?style=flat-square)](https://www.npmjs.com/package/@nlabs/arkhamjs-middleware-devtools)
[![npm downloads](https://img.shields.io/npm/dm/@nlabs/arkhamjs-middleware-devtools.svg?style=flat-square)](https://www.npmjs.com/package/@nlabs/arkhamjs-middleware-devtools)
[![Travis](https://img.shields.io/travis/nitrogenlabs/arkhamjs.svg?style=flat-square)](https://travis-ci.org/nitrogenlabs/arkhamjs)
[![Issues](https://img.shields.io/github/issues/nitrogenlabs/arkhamjs.svg?style=flat-square)](https://github.com/nitrogenlabs/arkhamjs/issues)
[![TypeScript](https://badges.frapsoft.com/typescript/version/typescript-next.svg?v=101)](https://github.com/ellerbrock/typescript-badges/)
[![MIT license](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](http://opensource.org/licenses/MIT)
[![Chat](https://img.shields.io/discord/446122412715802649.svg)](https://discord.gg/Ttgev58)

## Installation

Using [npm](https://www.npmjs.com/):

```shell
npm install --save @nlabs/arkhamjs-middleware-devtools
```

or

```shell
yarn add @nlabs/arkhamjs-middleware-devtools
```

## Documentation
For detailed [Documentation](https://arkhamjs.io) and additional options.
npm package: @nlabs/arkhamjs-storage-node
Description: NodeJS storage for ArkhamJS
Author: Giraldo Rosales
Latest version: 3.29.7

# @nlabs/arkhamjs-storage-node

[![npm version](https://img.shields.io/npm/v/@nlabs/arkhamjs-storage-node.svg?style=flat-square)](https://www.npmjs.com/package/@nlabs/arkhamjs-storage-node)
[![npm downloads](https://img.shields.io/npm/dm/@nlabs/arkhamjs-storage-node.svg?style=flat-square)](https://www.npmjs.com/package/@nlabs/arkhamjs-storage-node)
[![Travis](https://img.shields.io/travis/nitrogenlabs/arkhamjs.svg?style=flat-square)](https://travis-ci.org/nitrogenlabs/arkhamjs)
[![Issues](https://img.shields.io/github/issues/nitrogenlabs/arkhamjs.svg?style=flat-square)](https://github.com/nitrogenlabs/arkhamjs/issues)
[![TypeScript](https://badges.frapsoft.com/typescript/version/typescript-next.svg?v=101)](https://github.com/ellerbrock/typescript-badges/)
[![MIT license](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](http://opensource.org/licenses/MIT)
[![Chat](https://img.shields.io/discord/446122412715802649.svg)](https://discord.gg/Ttgev58)

## Installation

Using [npm](https://www.npmjs.com/):

```shell
npm i --save @nlabs/arkhamjs-storage-node
```

## Documentation

For detailed [Documentation](https://arkhamjs.io) and additional options.
npm package: @nlabs/arkhamjs-views-react
Description: React view components for ArkhamJS
Author: Giraldo Rosales
Latest version: 1.2.2

# arkhamjs-views-react

[![npm version](https://img.shields.io/npm/v/arkhamjs-views-react.svg?style=flat-square)](https://www.npmjs.com/package/arkhamjs-views-react)
[![Travis](https://img.shields.io/travis/nitrogenlabs/arkhamjs-views-react.svg?style=flat-square)](https://travis-ci.org/nitrogenlabs/arkhamjs-views-react)
[![npm downloads](https://img.shields.io/npm/dm/arkhamjs-views-react.svg?style=flat-square)](https://www.npmjs.com/package/arkhamjs-views-react)
[![TypeScript](https://badges.frapsoft.com/typescript/version/typescript-next.svg?v=101)](https://github.com/ellerbrock/typescript-badges/)
[![Issues](http://img.shields.io/github/issues/nitrogenlabs/arkhamjs-views-react.svg?style=flat-square)](https://github.com/nitrogenlabs/arkhamjs-views-react/issues)
[![MIT license](http://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](http://opensource.org/licenses/MIT)

### Installation

Using [npm](https://www.npmjs.com/):

```bash
$ npm install --save @nlabs/arkhamjs-views-react
```

or

```bash
$ yarn add @nlabs/arkhamjs-views-react
```

#### Documentation

For detailed [Documentation](http://www.arkhamjs.com) and additional options.
npm package: @nlabs/preset-stage-0
Description: Babel preset for stage 0 plugins
Author: Sebastian McKenzie
Latest version: 7.0.0-beta.50

# @nlabs/preset-stage-0

> Babel preset for stage 0 plugins

See the babel website [@babel/preset-stage-0](https://new.babeljs.io/docs/en/next/babel-preset-stage-0.html) for more information.

***Note:** In the @nlabs version, decoratorsLegacy has been defaulted to true.*

## Install

Using npm:

```sh
npm install --save @nlabs/preset-stage-0
```

or using yarn:

```sh
yarn add --save @nlabs/preset-stage-0
```
npm package: @nlabs/react-native-form
Description: React Native form components
Author: Giraldo Rosales
Latest version: 0.4.12

# @nlabs/react-native-form

React Native component for a form and input components.

[![npm version](https://img.shields.io/npm/v/react-native-form.svg?style=flat-square)](https://www.npmjs.com/package/@nlabs/react-native-form)
[![npm downloads](https://img.shields.io/npm/dm/react-native-form.svg?style=flat-square)](https://www.npmjs.com/package/@nlabs/react-native-form)
[![TypeScript](https://badges.frapsoft.com/typescript/version/typescript-next.svg?v=101)](https://github.com/ellerbrock/typescript-badges/)
[![Issues](http://img.shields.io/github/issues/nitrogenlabs/react-native-form.svg?style=flat-square)](https://github.com/nitrogenlabs/react-native-form/issues)
[![MIT license](http://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](http://opensource.org/licenses/MIT)

### Installation

Using [npm](https://www.npmjs.com/):
```bash
$ npm install --save @nlabs/react-native-form
```
or
```bash
$ yarn add @nlabs/react-native-form
```
npm package: @nlabs/react-native-image-gallery
Description: A React Native image gallery browser with interactive animations
Author: Alvaro Medina Ballester
Latest version: 1.1.0

# @nlabs/react-native-image-gallery

A React Native component to display a gallery of images.

[![npm version](https://img.shields.io/npm/v/arkhamjs.svg?style=flat-square)](https://www.npmjs.com/package/arkhamjs)
[![Travis](https://img.shields.io/travis/nitrogenlabs/arkhamjs.svg?style=flat-square)](https://travis-ci.org/nitrogenlabs/arkhamjs)
[![npm downloads](https://img.shields.io/npm/dm/arkhamjs.svg?style=flat-square)](https://www.npmjs.com/package/arkhamjs)
[![TypeScript](https://badges.frapsoft.com/typescript/version/typescript-next.svg?v=101)](https://github.com/ellerbrock/typescript-badges/)
[![Issues](http://img.shields.io/github/issues/nitrogenlabs/arkhamjs.svg?style=flat-square)](https://github.com/nitrogenlabs/arkhamjs/issues)
[![Gitter](https://img.shields.io/gitter/room/NitrgenLabs/arkhamjs.svg?style=flat-square)](https://gitter.im/NitrogenLabs/arkhamjs)
[![MIT license](http://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](http://opensource.org/licenses/MIT)

### Preview

<p align="center">
<img src="https://raw.githubusercontent.com/wiki/InterfaceKit/react-native-interactive-image-gallery/ios.gif" alt="iOS" width="300" />
<img src="https://raw.githubusercontent.com/wiki/InterfaceKit/react-native-interactive-image-gallery/android.gif" alt="Android" width="300" />
</p>

### Installation

Using [npm](https://www.npmjs.com/):
```bash
$ npm install --save @nlabs/react-native-image-gallery
```
or
```bash
$ yarn add @nlabs/react-native-image-gallery
```

### Usage

```javascript
import {ImageGallery} from '@nlabs/react-native-image-gallery';

class Images extends React.PureComponent {
  render() {
    const {images} = this.props;
    const imageUrls = images.map((img) => ({
        url: img.uri,
        id: img.id,
        title: img.title,
        description: img.description
      })
    );
    return <ImageGallery images={imageUrls} />;
  }
}
```
npm package: @nlabs/react-native-interactive-image-gallery
Description: A React Native image gallery browser with interactive animations
Author: Alvaro Medina Ballester
Latest version: 0.2.1

# react-native-interactive-image-gallery

<p>
<img src="https://img.shields.io/npm/dm/react-native-interactive-image-gallery.svg" />
<img src="https://img.shields.io/npm/dt/react-native-interactive-image-gallery.svg" />
</p>

A React Native component to display a gallery of images.

<p align="center">
<img src="https://raw.githubusercontent.com/wiki/InterfaceKit/react-native-interactive-image-gallery/ios.gif" alt="iOS" width="400" />
<img src="https://raw.githubusercontent.com/wiki/InterfaceKit/react-native-interactive-image-gallery/android.gif" alt="Android" width="400" />
</p>

## Getting started

`$ yarn addreact-native-interactive-image-gallery`

### Mostly automatic installation

`$ react-native link react-native-interactive-image-gallery`

### Manual installation

#### iOS

1. In Xcode, in the project navigator, right click `Libraries` ➜ `Add Files to
   [your project's name]`
2. Go to `node_modules` ➜ `react-native-interactive-image-gallery` and add
   `RNIKInteractiveImageLibrary.xcodeproj`
3. In XCode, in the project navigator, select your project. Add
   `libRNIKInteractiveImageLibrary.a` to your project's `Build Phases` ➜ `Link
   Binary With Libraries`
4. Run your project (`Cmd+R`)<

#### Android

No additional setup needed.

## Usage

```javascript
import ImageBrowser from 'react-native-interactive-image-gallery';

class Images extends React.PureComponent<Props> {
  render() {
    const imageURLs: Array<Object> = this.props.images.map(
      (img: Object, index: number) => ({
        URI: img.uri,
        id: String(index),
        title: img.title,
        description: img.description
      })
    );
    return <ImageBrowser images={imageURLs} />;
  }
}
```

## API

Work in progress 🚧👷🏻. Some features are experimental and the API will change in
the future.

## Aknowledgements

Thanks to Eric Vicenti (https://github.com/ericvicenti) and
[his talk at React Native EU 2017](https://www.youtube.com/watch?v=7emqc7yf-Zg)
called "Practical Hacks for delightful interactions" for the inspiration and the
iOS animations present in this library

The main idea of the library and some parts of the code were inspired or taken
from his presentation, available at
[this repo](https://github.com/ericvicenti/react-native-eu-2017).

## License

MIT.

## Author

Álvaro Medina Ballester `<amedina at apsl.net>`

Built with 💛 by [APSL](https://github.com/apsl).
npm package: @nlabs/react-native-top-nav
Description: React Native Top Nav
Author: Giraldo Rosales
Latest version: 0.1.0

# @nlabs/react-native-top-nav

React Native component for a top navigational bar.

[![npm version](https://img.shields.io/npm/v/react-native-top-nav.svg?style=flat-square)](https://www.npmjs.com/package/@nlabs/react-native-top-nav)
[![npm downloads](https://img.shields.io/npm/dm/react-native-top-nav.svg?style=flat-square)](https://www.npmjs.com/package/@nlabs/react-native-top-nav)
[![TypeScript](https://badges.frapsoft.com/typescript/version/typescript-next.svg?v=101)](https://github.com/ellerbrock/typescript-badges/)
[![Issues](http://img.shields.io/github/issues/nitrogenlabs/react-native-top-nav.svg?style=flat-square)](https://github.com/nitrogenlabs/react-native-top-nav/issues)
[![MIT license](http://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](http://opensource.org/licenses/MIT)

### Installation

Using [npm](https://www.npmjs.com/):
```bash
$ npm install --save @nlabs/react-native-top-nav
```
or
```bash
$ yarn add @nlabs/react-native-top-nav
```

### Usage

```javascript
import {ImageGallery} from '@nlabs/react-native-image-gallery';

class Images extends React.PureComponent {
  render() {
    const {images} = this.props;
    const imageUrls = images.map((img) => ({
        url: img.uri,
        id: img.id,
        title: img.title,
        description: img.description
      })
    );
    return <ImageGallery images={imageUrls} />;
  }
}
```
npm package: @nlabs/react-native-utils
Description: React Native utilities
Author: Giraldo Rosales
Latest version: 0.1.0

# @nlabs/react-native-image-gallery

A React Native component to display a gallery of images.

[![npm version](https://img.shields.io/npm/v/arkhamjs.svg?style=flat-square)](https://www.npmjs.com/package/arkhamjs)
[![Travis](https://img.shields.io/travis/nitrogenlabs/arkhamjs.svg?style=flat-square)](https://travis-ci.org/nitrogenlabs/arkhamjs)
[![npm downloads](https://img.shields.io/npm/dm/arkhamjs.svg?style=flat-square)](https://www.npmjs.com/package/arkhamjs)
[![TypeScript](https://badges.frapsoft.com/typescript/version/typescript-next.svg?v=101)](https://github.com/ellerbrock/typescript-badges/)
[![Issues](http://img.shields.io/github/issues/nitrogenlabs/arkhamjs.svg?style=flat-square)](https://github.com/nitrogenlabs/arkhamjs/issues)
[![Gitter](https://img.shields.io/gitter/room/NitrgenLabs/arkhamjs.svg?style=flat-square)](https://gitter.im/NitrogenLabs/arkhamjs)
[![MIT license](http://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](http://opensource.org/licenses/MIT)

### Preview

<p align="center">
<img src="https://raw.githubusercontent.com/wiki/InterfaceKit/react-native-interactive-image-gallery/ios.gif" alt="iOS" width="300" />
<img src="https://raw.githubusercontent.com/wiki/InterfaceKit/react-native-interactive-image-gallery/android.gif" alt="Android" width="300" />
</p>

### Installation

Using [npm](https://www.npmjs.com/):
```bash
$ npm install --save @nlabs/react-native-image-gallery
```
or
```bash
$ yarn add @nlabs/react-native-image-gallery
```

### Usage

```javascript
import {ImageGallery} from '@nlabs/react-native-image-gallery';

class Images extends React.PureComponent {
  render() {
    const {images} = this.props;
    const imageUrls = images.map((img) => ({
        url: img.uri,
        id: img.id,
        title: img.title,
        description: img.description
      })
    );
    return <ImageGallery images={imageUrls} />;
  }
}
```
npm package: @nlabs/storybook-addon-a11y
Description: a11y addon for storybook
Latest version: 3.4.3

# storybook-addon-a11y

This storybook addon can be helpfull to make your UI components more accessibile.

![](docs/screenshot.png)

## Getting started

First, install the addon.

```sh
$ npm install -D @nlabs/storybook-addon-a11y
```

Add this line to your `addons.js` file (create this file inside your storybook config directory if needed).

```js
import '@nlabs/storybook-addon-a11y/register';
```

import the `'checkA11y'` decorator to check your stories for violations within your components.

```js
import React from 'react';
import { storiesOf } from '@nlabs/storybook-react';

import { checkA11y } from '@nlabs/storybook-addon-a11y';

storiesOf('button', module)
  .addDecorator(checkA11y)
  .add('Accessible', () => (
    <button>
      Accessible button
    </button>
  ))
  .add('Inaccessible', () => (
    <button style={{ backgroundColor: 'red', color: 'darkRed', }}>
      Inaccessible button
    </button>
  ));
```

## Roadmap

* Make UI accessibile
* Add color blindness filters ([Example](http://lowvision.support/))
* Show in story where violations are.
* Make it configurable
* Add more example tests
* Add tests
* Make CI integration possible
npm package: @nlabs/storybook-addon-actions
Description: Action Logger addon for storybook
Latest version: 3.4.3

# Storybook Addon Actions

[![Build Status on CircleCI](https://circleci.com/gh/nitrogenlabs/storybook.svg?style=shield)](https://circleci.com/gh/nitrogenlabs/storybook)
[![CodeFactor](https://www.codefactor.io/repository/github/nitrogenlabs/storybook/badge)](https://www.codefactor.io/repository/github/nitrogenlabs/storybook)
[![Known Vulnerabilities](https://snyk.io/test/github/nitrogenlabs/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/nitrogenlabs/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)
[![BCH compliance](https://bettercodehub.com/edge/badge/nitrogenlabs/storybook)](https://bettercodehub.com/results/nitrogenlabs/storybook) [![codecov](https://codecov.io/gh/nitrogenlabs/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/nitrogenlabs/storybook)


* * *

Storybook Addon Actions can be used to display data received by event handlers in [Storybook](https://storybook.nitrogenlabs.com).

This addon works with Storybook for:
- [React](https://github.com/nitrogenlabs/storybook/tree/master/app/react)
- [React Native](https://github.com/nitrogenlabs/storybook/tree/master/app/react-native)

![Screenshot](docs/screenshot.png)

## Getting Started

Install:

```sh
npm i -D @nlabs/storybook-addon-actions
```

Then, add following content to `.storybook/addons.js`

```js
import '@nlabs/storybook-addon-actions/register';
```

Import the `action` function and use it to create actions handlers. When creating action handlers, provide a **name** to make it easier to identify.

> _Note: Make sure NOT to use reserved words as function names. [issues#29](https://github.com/nitrogenlabs/storybook-addon-actions/issues/29#issuecomment-288274794)_

```js
import { storiesOf } from '@nlabs/storybook-react';
import { action } from '@nlabs/storybook-addon-actions';

import Button from './button';

storiesOf('Button', module)
  .add('default view', () => (
    <Button onClick={ action('button-click') }>
      Hello World!
    </Button>
  ))
```

## Action Decorators

If you wish to process action data before sending them over to the logger, you can do it with action decorators.

`decorateAction` takes an array of decorator functions. Each decorator function is passed an array of arguments, and should return a new arguments array to use. `decorateAction` returns a function that can be used like `action` but will log the modified arguments instead of the original arguments.

```js
import { decorateAction } from '@nlabs/storybook-addon-actions';

import Button from './button';

const firstArgAction = decorateAction([
  args => args.slice(0, 1)
]);

storiesOf('Button', module)
  .add('default view', () => (
    <Button onClick={ firstArgAction('button-click') }>
      Hello World!
    </Button>
  ))
```
npm package: @nlabs/storybook-addon-backgrounds
Description: A storybook addon to show different backgrounds for your preview
Author: jbaxleyiii
Latest version: 3.4.3

# addon-backgrounds

[![Build Status](https://travis-ci.org/storybooks/addon-backgrounds.svg?branch=travis)](https://travis-ci.org/storybooks/addon-backgrounds)

![React Storybook Screenshot](./.storybook/backgrounds.gif)

### Getting Started

```sh
npm i --save @nlabs/storybook-addon-backgrounds
```

Then create a file called `addons.js` in your storybook config.

Add following content to it:

```js
import '@nlabs/storybook-addon-backgrounds/register';
```

Then write your stories like this:

```js
import React from 'react';
import { storiesOf } from "@nlabs/storybook-react";
import backgrounds from "@nlabs/storybook-addon-backgrounds";

storiesOf("Button", module)
  .addDecorator(backgrounds([
    { name: "twitter", value: "#00aced", default: true },
    { name: "facebook", value: "#3b5998" },
  ]))
  .add("with text", () => <button>Click me</button>);
```

### Development

This project is built using typescript and is tested with jest. To get started, clone this repo and run the following command:

```bash
$ npm install # install node deps
```

To run the project locally, run:

```bash
$ npm run storybook # for storybook testing
# (coming soon) $ npm run test-watch # for testing
```

To test the project run:

```bash
$ npm test
```
npm package: @nlabs/storybook-addon-centered
Description: Storybook decorator to center components
Author: Muhammed Thanish
Latest version: 3.4.3

# Storybook Centered Decorator

[![Build Status on CircleCI](https://circleci.com/gh/nitrogenlabs/storybook.svg?style=shield)](https://circleci.com/gh/nitrogenlabs/storybook)
[![CodeFactor](https://www.codefactor.io/repository/github/nitrogenlabs/storybook/badge)](https://www.codefactor.io/repository/github/nitrogenlabs/storybook)
[![Known Vulnerabilities](https://snyk.io/test/github/nitrogenlabs/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/nitrogenlabs/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)
[![BCH compliance](https://bettercodehub.com/edge/badge/nitrogenlabs/storybook)](https://bettercodehub.com/results/nitrogenlabs/storybook) [![codecov](https://codecov.io/gh/nitrogenlabs/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/nitrogenlabs/storybook)

* * *

Storybook Centered Decorator can be used to center components inside the preview in [Storybook](https://storybook.nitrogenlabs.com).

This addon works with Storybook for:

-   [React](https://github.com/nitrogenlabs/storybook/tree/master/app/react)

### Usage

```sh
npm install @nlabs/storybook-addon-centered --save-dev
```

#### As a decorator

You can set the decorator locally.

example for React:

```js
import { storiesOf } from '@nlabs/storybook-react';
import centered from '@nlabs/storybook-addon-centered';

import MyComponent from '../Component';

storiesOf('MyComponent', module)
  .addDecorator(centered)
  .add('without props', () => (<MyComponent />))
  .add('with some props', () => (<MyComponent text="The Comp"/>));
```

Also, you can also add this decorator globally

example for React:

```js
import { configure, addDecorator } from '@nlabs/storybook-react';
import centered from '@nlabs/storybook-addon-centered';

addDecorator(centered);

configure(function () {
  //...
}, module);
```

#### As an extension

##### 1 - Configure the extension

```js
import { configure, setAddon } from '@nlabs/storybook-react';
import centered from '@nlabs/storybook-addon-centered';

setAddon({
  addCentered(storyName, storyFn) {
    this.add(storyName, (context) => (
      centered.call(context, storyFn)
    ));
  },
});

configure(function () {
  //...
}, module);
```

##### 2 - Use it in your story

```js
import { storiesOf } from '@nlabs/storybook-react';

import Component from '../Component';

storiesOf('Component', module)
  .addCentered('without props', () => (<Component />))
```
npm package: @nlabs/storybook-addon-events
Description: Add events to your Storybook stories.
Latest version: 3.4.3

# Storybook Addon Events

[![Build Status on CircleCI](https://circleci.com/gh/nitrogenlabs/storybook.svg?style=shield)](https://circleci.com/gh/nitrogenlabs/storybook)
[![CodeFactor](https://www.codefactor.io/repository/github/nitrogenlabs/storybook/badge)](https://www.codefactor.io/repository/github/nitrogenlabs/storybook)
[![Known Vulnerabilities](https://snyk.io/test/github/nitrogenlabs/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/nitrogenlabs/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)
[![BCH compliance](https://bettercodehub.com/edge/badge/nitrogenlabs/storybook)](https://bettercodehub.com/results/nitrogenlabs/storybook) [![codecov](https://codecov.io/gh/nitrogenlabs/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/nitrogenlabs/storybook)

* * *

This [storybook](https://storybook.nitrogenlabs.com) ([source](https://github.com/nitrogenlabs/storybook)) addon allows you to add events for your stories.

![Storybook Addon Events Example](docs/demo1.png)
[Storybook Addon Events Live Demo](https://z4o4z.github.io/storybook-addon-events/index.html)

### Getting Started

```sh
npm i --save-dev @nlabs/storybook-addon-events
```

Then create a file called `addons.js` in your storybook config.

Add following content to it:

```js
import '@nlabs/storybook-addon-actions';
import '@nlabs/storybook-addon-links';
import '@nlabs/storybook-addon-events/register';
```

Then write your stories like this:

```js
import { storiesOf } from '@nlabs/storybook-react';
import WithEvents from '@nlabs/storybook-addon-events';
import EventEmiter from 'event-emiter';

import Logger from './Logger';
import * as EVENTS from './events';

const emiter = new EventEmiter();
const emit = emiter.emit.bind(emiter);


storiesOf('WithEvents', module)
  .addDecorator(getStory => (
    <WithEvents
      emit={emit}
      events={[
        {
          name: EVENTS.TEST_EVENT_1,
          title: 'Test event 1',
          payload: 0,
        },
        {
          name: EVENTS.TEST_EVENT_2,
          title: 'Test event 2',
          payload: 'asdasdad asdasdasd',
        },
        {
          name: EVENTS.TEST_EVENT_3,
          title: 'Test event 3',
          payload: {
            string: 'value',
            number: 123,
            array: [1, 2, 3],
            object: {
              string: 'value',
              number: 123,
              array: [1, 2, 3],
            },
          },
        },
        {
          name: EVENTS.TEST_EVENT_4,
          title: 'Test event 4',
          payload: [
            {
              string: 'value',
              number: 123,
              array: [1, 2, 3],
            },
            {
              string: 'value',
              number: 123,
              array: [1, 2, 3],
            },
            {
              string: 'value',
              number: 123,
              array: [1, 2, 3],
            },
          ],
        },
      ]}
    >
      {getStory()}
    </WithEvents>
  ))
  .add('Logger', () => <Logger emiter={emiter} />);
```
npm package: @nlabs/storybook-addon-graphql
Description: Storybook addon to display the GraphiQL IDE
Latest version: 3.4.3

# Storybook GraphiQL Addon

[![Build Status on CircleCI](https://circleci.com/gh/nitrogenlabs/storybook.svg?style=shield)](https://circleci.com/gh/nitrogenlabs/storybook)
[![CodeFactor](https://www.codefactor.io/repository/github/nitrogenlabs/storybook/badge)](https://www.codefactor.io/repository/github/nitrogenlabs/storybook)
[![Known Vulnerabilities](https://snyk.io/test/github/nitrogenlabs/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/nitrogenlabs/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)
[![BCH compliance](https://bettercodehub.com/edge/badge/nitrogenlabs/storybook)](https://bettercodehub.com/results/nitrogenlabs/storybook) [![codecov](https://codecov.io/gh/nitrogenlabs/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/nitrogenlabs/storybook)
[![Storybook Slack](https://now-examples-slackin-rrirkqohko.now.sh/badge.svg)](https://now-examples-slackin-rrirkqohko.now.sh/)

* * *

Storybook GraphQL Addon can be used to display the GraphiQL IDE with example queries in [Storybook](https://storybook.nitrogenlabs.com).

This addon works with Storybook for:
- [React](https://github.com/nitrogenlabs/storybook/tree/master/app/react)

![Screenshot](docs/screenshot.png)

## Getting Started

First, install the addon

```sh
npm install -D @nlabs/storybook-addon-graphql
```

Import the `setupGraphiQL` function and use it to create the graphiql helper with a base url.

```js
import { storiesOf } from '@nlabs/storybook-react'
import { setupGraphiQL } from '@nlabs/storybook-addon-graphql'

// setup the graphiql helper which can be used with the add method later
const graphiql = setupGraphiQL({ url: 'http://localhost:3000/graphql' });

storiesOf('GraphQL Demo', module)
  .add('get user info', graphiql(`{
    user(id: "1") {
      name
    }
  }`));
```

> Tip: try creating the helper in another file and import the configured graphiql helper from it

## Advanced Setup

The `setupGraphiQL` function also accepts a fetcher parameter which can be used to change how graphiql gets data. If the fetcher parameter is not given, it'll create a fetcher which uses the `fetch` api to make requests. The above example can also be written using a custom fetcher.

```js
import { storiesOf } from '@nlabs/storybook-react'
import { setupGraphiQL } from '@nlabs/storybook-addon-graphql'

import { url } from './settings';

const fetcher = params => {
  const options = {
    method: 'post',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(params),
  };
  return fetch(url, options).then(res => res.json());
};

// create the helper with a custom fetcher
const graphiql = setupGraphiQL({ fetcher });

storiesOf('GraphQL Demo', module)
  .add('get user info', graphiql(`{
    user(id: "1") {
      name
    }
  }`));
```
npm package: @nlabs/storybook-addon-notes
Description: Write notes for your Storybook stories.
Latest version: 3.4.3

# Storybook Addon Notes

[![Build Status on CircleCI](https://circleci.com/gh/nitrogenlabs/storybook.svg?style=shield)](https://circleci.com/gh/nitrogenlabs/storybook)
[![CodeFactor](https://www.codefactor.io/repository/github/nitrogenlabs/storybook/badge)](https://www.codefactor.io/repository/github/nitrogenlabs/storybook)
[![Known Vulnerabilities](https://snyk.io/test/github/nitrogenlabs/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/nitrogenlabs/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)
[![BCH compliance](https://bettercodehub.com/edge/badge/nitrogenlabs/storybook)](https://bettercodehub.com/results/nitrogenlabs/storybook) [![codecov](https://codecov.io/gh/nitrogenlabs/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/nitrogenlabs/storybook)

* * *

Storybook Addon Notes allows you to write notes (text or HTML) for your stories in [Storybook](https://storybook.nitrogenlabs.com).

This addon works with Storybook for:
- [React](https://github.com/nitrogenlabs/storybook/tree/master/app/react)
- [React Native](https://github.com/nitrogenlabs/storybook/tree/master/app/react-native)

![Storybook Addon Notes Demo](docs/demo.png)

### Getting Started

```sh
npm i --save-dev @nlabs/storybook-addon-notes
```

Then create a file called `addons.js` in your storybook config.

Add following content to it:

```js
import '@nlabs/storybook-addon-notes/register';
```

Then write your stories like this:

```js
import { storiesOf } from '@nlabs/storybook-react';
import { withNotes } from '@nlabs/storybook-addon-notes';

import Component from './Component';

storiesOf('Component', module)
  .add('with some emoji', withNotes('A very simple component')(() => </Component>>));
```

#### Using Markdown

To use markdown in your notes simply import a markdown file and use that in your note.

```js
import { storiesOf } from '@nlabs/storybook-react';
import { withNotes } from '@nlabs/storybook-addon-notes';
import Component from './Component';
import someMarkdownText from './someMarkdownText.md';

storiesOf('Component', module)
  .add('With Markdown', withNotes(someMarkdownText)(() => <Component/>));

```
### Deprecated API
This API is slated for removal in 4.0

```js
import { WithNotes } from '@nlabs/storybook-addon-notes';

storiesOf('Addon Notes', module)
  .add('using deprecated API', () => (
    <WithNotes notes="Hello">
      <BaseButton onClick={action('clicked')} label="😀 😎 👍 💯" />
    </WithNotes>
  ));
```
npm package: @nlabs/storybook-addon-viewport
Description: Storybook addon to change the viewport size to mobile
Latest version: 3.4.3

# Storybook Viewport Addon

Storybook Viewport Addon allows your stories to be displayed in different sizes and layouts in [Storybook](https://storybookjs.org).  This helps build responsive components inside of Storybook.

This addon works with Storybook for: [React](https://github.com/nitrogenlabs/storybook/tree/master/app/react).

![Screenshot](https://github.com/nitrogenlabs/storybook/blob/master/docs/viewport.png)

## Installation

Install the following npm module:

    npm i --save-dev @nlabs/storybook-addon-viewport

or with yarn:

    yarn add -D @nlabs/storybook-addon-viewport

## Basic Usage

Simply import the Storybook Viewport Addon in the `addon.js` file in your `.storybook` directory.

```js
import '@nlabs/storybook-addon-viewport/register'
```

This will register the Viewport Addon to Storybook and will show up in the action area.

## FAQ

#### How do I add a new device?

Unfortunately, this is currently not supported.

#### How can I make a custom screen size?

Unfortunately, this is currently not supported.
npm package: @nlabs/storybook-addons
Description: Storybook addons store
Latest version: 3.4.3

# Storybook Addons

[![Build Status on CircleCI](https://circleci.com/gh/nitrogenlabs/storybook.svg?style=shield)](https://circleci.com/gh/nitrogenlabs/storybook)
[![CodeFactor](https://www.codefactor.io/repository/github/nitrogenlabs/storybook/badge)](https://www.codefactor.io/repository/github/nitrogenlabs/storybook)
[![Known Vulnerabilities](https://snyk.io/test/github/nitrogenlabs/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/nitrogenlabs/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)
[![BCH compliance](https://bettercodehub.com/edge/badge/nitrogenlabs/storybook)](https://bettercodehub.com/results/nitrogenlabs/storybook) [![codecov](https://codecov.io/gh/nitrogenlabs/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/nitrogenlabs/storybook)

* * *

Storybook Addons is a node module which is used to load custom addons to storybook.

It stores addon loaders, communication channel and other resources which can be used by storybook implementations where required.

* * *

For more information visit: [storybook.nitrogenlabs.com](https://storybook.nitrogenlabs.com)
npm package: @nlabs/storybook-channel-postmessage
Description: [![Build Status on CircleCI](https://circleci.com/gh/nitrogenlabs/storybook.svg?style=shield)](https://circleci.com/gh/nitrogenlabs/storybook) [![CodeFactor](https://www.codefactor.io/repository/github/nitrogenlabs/storybook/badge)](https://www.codefactor
Latest version: 3.4.3

# Storybook PostMessage Channel

[![Build Status on CircleCI](https://circleci.com/gh/nitrogenlabs/storybook.svg?style=shield)](https://circleci.com/gh/nitrogenlabs/storybook)
[![CodeFactor](https://www.codefactor.io/repository/github/nitrogenlabs/storybook/badge)](https://www.codefactor.io/repository/github/nitrogenlabs/storybook)
[![Known Vulnerabilities](https://snyk.io/test/github/nitrogenlabs/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/nitrogenlabs/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)
[![BCH compliance](https://bettercodehub.com/edge/badge/nitrogenlabs/storybook)](https://bettercodehub.com/results/nitrogenlabs/storybook) [![codecov](https://codecov.io/gh/nitrogenlabs/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/nitrogenlabs/storybook)

* * *

Storybook PostMessage Channel is a channel for Storybook that can be used when the Storybook Renderer runs inside an iframe or a child window.
A channel can be created using the `createChannel` function.

```js
import createChannel from '@nlabs/storybook-channel-postmessage';

const channel = createChannel({ key: 'postmsg-key' });
```

* * *

For more information visit: [storybook.nitrogenlabs.com](https://storybook.nitrogenlabs.com)
npm package: @nlabs/storybook-channel-websocket
Description: [![Build Status on CircleCI](https://circleci.com/gh/nitrogenlabs/storybook.svg?style=shield)](https://circleci.com/gh/nitrogenlabs/storybook) [![CodeFactor](https://www.codefactor.io/repository/github/nitrogenlabs/storybook/badge)](https://www.codefactor
Latest version: 3.4.3

# Storybook Websocket Channel

[![Build Status on CircleCI](https://circleci.com/gh/nitrogenlabs/storybook.svg?style=shield)](https://circleci.com/gh/nitrogenlabs/storybook)
[![CodeFactor](https://www.codefactor.io/repository/github/nitrogenlabs/storybook/badge)](https://www.codefactor.io/repository/github/nitrogenlabs/storybook)
[![Known Vulnerabilities](https://snyk.io/test/github/nitrogenlabs/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/nitrogenlabs/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)
[![BCH compliance](https://bettercodehub.com/edge/badge/nitrogenlabs/storybook)](https://bettercodehub.com/results/nitrogenlabs/storybook) [![codecov](https://codecov.io/gh/nitrogenlabs/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/nitrogenlabs/storybook)

* * *

Storybook Websocket Channel is a channel for Storybook that can be used when the Storybook Renderer should communicate with the Storybook Manager over the network.
A channel can be created using the `createChannel` function.

```js
import createChannel from '@nlabs/storybook-channel-websocket';

const channel = createChannel({ url: 'ws://localhost:9001' });
```

* * *

For more information visit: [storybook.nitrogenlabs.com](https://storybook.nitrogenlabs.com)
npm package: @nlabs/storybook-channels
Description: [![Build Status on CircleCI](https://circleci.com/gh/nitrogenlabs/storybook.svg?style=shield)](https://circleci.com/gh/nitrogenlabs/storybook) [![CodeFactor](https://www.codefactor.io/repository/github/nitrogenlabs/storybook/badge)](https://www.codefactor
Latest version: 3.4.3

# Storybook Channel

[![Build Status on CircleCI](https://circleci.com/gh/nitrogenlabs/storybook.svg?style=shield)](https://circleci.com/gh/nitrogenlabs/storybook)
[![CodeFactor](https://www.codefactor.io/repository/github/nitrogenlabs/storybook/badge)](https://www.codefactor.io/repository/github/nitrogenlabs/storybook)
[![Known Vulnerabilities](https://snyk.io/test/github/nitrogenlabs/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/nitrogenlabs/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)
[![BCH compliance](https://bettercodehub.com/edge/badge/nitrogenlabs/storybook)](https://bettercodehub.com/results/nitrogenlabs/storybook) [![codecov](https://codecov.io/gh/nitrogenlabs/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/nitrogenlabs/storybook)

* * *

Storybook Channel is similar to an EventEmitter.
Channels are used with Storybook implementations to send/receive events between the Storybook Manager and the Storybook Renderer.

```js
class Channel {
  addListener(type, listener) {}
  addPeerListener(type, listener) {} // ignore events from itself
  emit(type, ...args) {}
  eventNames() {}
  listenerCount(type) {}
  listeners(type) {}
  on(type, listener) {}
  once(type, listener) {}
  prependListener(type, listener) {}
  prependOnceListener(type, listener) {}
  removeAllListeners(type) {}
  removeListener(type, listener) {}
}
```

The channel takes a Transport object as a parameter which will be used to send/receive messages. The transport object should implement this interface.

```js
class Transport {
  send(event) {}
  setHandler(handler) {}
}
```

Currently, channels are baked into storybook implementations and therefore this module is not designed to be used directly by addon developers. When developing addons, use the `getChannel` method exported by `@nlabs/storybook-addons` module. For this to work, Storybook implementations should use the `setChannel` method before loading addons.

```js
import addons from '@nlabs/storybook-addons';

const channel = addons.getChannel();
```

* * *

For more information visit: [storybook.nitrogenlabs.com](https://storybook.nitrogenlabs.com)
npm package: @nlabs/storybook-cli
Description: Storybook's CLI - easiest method of adding storybook to your projects
Author: Storybook Team
Latest version: 3.4.3

# Storybook CLI

[![Build Status on CircleCI](https://circleci.com/gh/nitrogenlabs/storybook.svg?style=shield)](https://circleci.com/gh/nitrogenlabs/storybook)
[![CodeFactor](https://www.codefactor.io/repository/github/nitrogenlabs/storybook/badge)](https://www.codefactor.io/repository/github/nitrogenlabs/storybook)
[![Known Vulnerabilities](https://snyk.io/test/github/nitrogenlabs/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/nitrogenlabs/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)
[![BCH compliance](https://bettercodehub.com/edge/badge/nitrogenlabs/storybook)](https://bettercodehub.com/results/nitrogenlabs/storybook) [![codecov](https://codecov.io/gh/nitrogenlabs/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/nitrogenlabs/storybook)

* * *

Storybook CLI (*Command Line Interface*) is the easiest way to add [Storybook](https://github.com/nitrogenlabs/storybook) to your project.

In the future it will also add other useful generators and migration tooling.

![Screenshot](docs/getstorybook.png)

First install the storybook CLI globally.

```sh
npm i -g @nlabs/storybook-cli
```

Then go to your project run:

```sh
getstorybook
```

That's all you've to do.

* * *

## [Yarn](https://github.com/yarnpkg/yarn) support

It also supports yarn.
If you have installed yarn in your system, it'll detect it and use `yarn` instead of `npm`.

If you don't want to use `yarn` always you can use the `--use-npm` option like this:

```sh
getstorybook --use-npm
```

* * *

## [Flow](https://flow.org/) support

It also supports flow files. By default, [jscodeshift](https://github.com/facebook/jscodeshift), the tool used to transform the source files, uses babel to read the files. To be able to transform any flow annotated file, you need to use the flow parser.

```sh
getstorybook --parser flow
```

For more information visit: [storybook.nitrogenlabs.com](https://storybook.nitrogenlabs.com)
npm package: @nlabs/storybook-client-logger
Description: [![Build Status on CircleCI](https://circleci.com/gh/nitrogenlabs/storybook.svg?style=shield)](https://circleci.com/gh/nitrogenlabs/storybook) [![CodeFactor](https://www.codefactor.io/repository/github/nitrogenlabs/storybook/badge)](https://www.codefactor
Latest version: 3.4.3

# Storybook Logger

[![Build Status on CircleCI](https://circleci.com/gh/nitrogenlabs/storybook.svg?style=shield)](https://circleci.com/gh/nitrogenlabs/storybook)
[![CodeFactor](https://www.codefactor.io/repository/github/nitrogenlabs/storybook/badge)](https://www.codefactor.io/repository/github/nitrogenlabs/storybook)
[![Known Vulnerabilities](https://snyk.io/test/github/nitrogenlabs/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/nitrogenlabs/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)
[![BCH compliance](https://bettercodehub.com/edge/badge/nitrogenlabs/storybook)](https://bettercodehub.com/results/nitrogenlabs/storybook) [![codecov](https://codecov.io/gh/nitrogenlabs/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/nitrogenlabs/storybook)

* * *

Any client-side logging that is done through storybook should be done through this package.

Examples:

```js

import { logger } from '@nlabs/storybook-client-logger'

logger.info('Info message')
logger.warn('Warning message')
logger.error('Error message')

```


For more information visit: [storybook.nitrogenlabs.com](https://storybook.nitrogenlabs.com)
npm package: @nlabs/storybook-components
Description: Core Storybook Components
Latest version: 3.4.3

# Storybook Components

[![Build Status on CircleCI](https://circleci.com/gh/nitrogenlabs/storybook.svg?style=shield)](https://circleci.com/gh/nitrogenlabs/storybook)
[![CodeFactor](https://www.codefactor.io/repository/github/nitrogenlabs/storybook/badge)](https://www.codefactor.io/repository/github/nitrogenlabs/storybook)
[![Known Vulnerabilities](https://snyk.io/test/github/nitrogenlabs/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/nitrogenlabs/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)
[![BCH compliance](https://bettercodehub.com/edge/badge/nitrogenlabs/storybook)](https://bettercodehub.com/results/nitrogenlabs/storybook) [![codecov](https://codecov.io/gh/nitrogenlabs/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/nitrogenlabs/storybook)

* * *

Storybook Components is a React UI components collection used by the UI of Storybook and Addons.

All components use [`glamorous`](https://glamorous.rocks) for styling.
npm package: @nlabs/storybook-node-logger
Description: [![Build Status on CircleCI](https://circleci.com/gh/nitrogenlabs/storybook.svg?style=shield)](https://circleci.com/gh/nitrogenlabs/storybook) [![CodeFactor](https://www.codefactor.io/repository/github/nitrogenlabs/storybook/badge)](https://www.codefactor
Latest version: 3.4.3

# Storybook Logger

[![Build Status on CircleCI](https://circleci.com/gh/nitrogenlabs/storybook.svg?style=shield)](https://circleci.com/gh/nitrogenlabs/storybook)
[![CodeFactor](https://www.codefactor.io/repository/github/nitrogenlabs/storybook/badge)](https://www.codefactor.io/repository/github/nitrogenlabs/storybook)
[![Known Vulnerabilities](https://snyk.io/test/github/nitrogenlabs/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/nitrogenlabs/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)
[![BCH compliance](https://bettercodehub.com/edge/badge/nitrogenlabs/storybook)](https://bettercodehub.com/results/nitrogenlabs/storybook) [![codecov](https://codecov.io/gh/nitrogenlabs/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/nitrogenlabs/storybook)

* * *

Any node logging that is done through storybook should be done through this package.

Examples:

```js

import { logger } from '@nlabs/storybook-node-logger'

logger.info('Info message')
logger.warn('Warning message')
logger.error('Error message')


```


For more information visit: [storybook.nitrogenlabs.com](https://storybook.nitrogenlabs.com)
npm package: @nlabs/storybook-react
Description: Storybook for React: Develop React Component in isolation with Hot Reloading.
Latest version: 3.4.3

# Storybook for React

[![Build Status on CircleCI](https://circleci.com/gh/nitrogenlabs/storybook.svg?style=shield)](https://circleci.com/gh/nitrogenlabs/storybook)
[![CodeFactor](https://www.codefactor.io/repository/github/nitrogenlabs/storybook/badge)](https://www.codefactor.io/repository/github/nitrogenlabs/storybook)
[![Known Vulnerabilities](https://snyk.io/test/github/nitrogenlabs/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/nitrogenlabs/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)
[![BCH compliance](https://bettercodehub.com/edge/badge/nitrogenlabs/storybook)](https://bettercodehub.com/results/nitrogenlabs/storybook) [![codecov](https://codecov.io/gh/nitrogenlabs/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/nitrogenlabs/storybook)

* * *

Storybook for React is a UI development environment for your React components.
With it, you can visualize different states of your UI components and develop them interactively.

![Storybook Screenshot](docs/demo.gif)

Storybook runs outside of your app.
So you can develop UI components in isolation without worrying about app specific dependencies and requirements.

## Getting Started

```sh
npm i -g @nlabs/storybook-cli
cd my-react-app
getstorybook
```

For more information visit: [storybook.nitrogenlabs.com](https://storybook.nitrogenlabs.com)

* * *

Storybook also comes with a lot of [addons](https://storybook.nitrogenlabs.com/addons/introduction) and a great API to customize as you wish.
You can also build a [static version](https://storybook.nitrogenlabs.com/basics/exporting-storybook) of your storybook and deploy it anywhere you want.

Here are some featured storybooks that you can reference to see how Storybook works:

-   [Demo of React Dates](http://airbnb.io/react-dates/) - [source](https://github.com/airbnb/react-dates)
-   [Demo of React Native Web](http://necolas.github.io/react-native-web/storybook/) - [source](https://github.com/necolas/react-native-web)

## Typescript

If you are using Typescript, make sure you have the type definitions installed via `yarn add @types/node @types/react @types/storybook__react --dev`.

## Docs

-   [Basics](https://storybook.nitrogenlabs.com/basics/introduction)
-   [Configurations](https://storybook.nitrogenlabs.com/configurations/default-config)
-   [Addons](https://storybook.nitrogenlabs.com/addons/introduction)