<commit_before># Storybook UI

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

* * *

Storybook UI the core UI of [storybook](https://storybook.js.org).
It's a React based UI which you can initialize with a simple function.
You can configure it by providing a provider API.

## Table of Contents

-   [Usage](#usage)
-   [API](#api)
    -   [.setOptions()](#setoptions)
-   [.setStories()](#setstories)
-   [.onStory()](#onstory)
-   [Hacking Guide](#hacking-guide)
    -   [The App](#the-app)
    -   [Changing UI](#changing-ui)
    -   [Redux](#redux)
    -   [Mounting](#mounting)
    -   [App Context](#app-context)
    -   [Actions](#actions)
    -   [Core API](#core-api)
    -   [Keyboard Shortcuts](#keyboard-shortcuts)
    -   [URL Changes](#url-changes)

## Usage

First you need to install `@storybook/ui` into your app.

```sh
npm install --save @storybook/ui
```

Then you need to create a Provider class like this:

```js
import React from 'react';
import { Provider } from '@storybook/ui';

export default class MyProvider extends Provider {
  getPanels() {
    return {};
  }

  renderPreview() {
    return (
      <p>This is the Preview</p>
    );
  }

  handleAPI(api) {
    // no need to do anything for now.
  }
}
```

Then you need to initialize the UI like this:

```js
import { document } from 'global';
import renderStorybookUI from '@storybook/ui';
import Provider from './provider';

const roolEl = document.getElementById('root');
renderStorybookUI(roolEl, new Provider());
```

Then you'll get a UI like this:

![Simplest Storybook UI](./docs/simple-ui.png)

> **See the [example](/example) app for a complete example.**

## API

### .setOptions()

```js
import { Provider } from '@storybook/ui';

class ReactProvider extends Provider {
  handleAPI(api) {
    api.setOptions({
      // see available options in
      // https://github.com/storybooks/storybook/tree/master/addons/options#getting-started
    });
  }
};<commit_msg>fix(lib/ui): example link<commit_after># Storybook UI

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

* * *

Storybook UI the core UI of [storybook](https://storybook.js.org).
It's a React based UI which you can initialize with a simple function.
You can configure it by providing a provider API.

## Table of Contents

-   [Usage](#usage)
-   [API](#api)
    -   [.setOptions()](#setoptions)
-   [.setStories()](#setstories)
-   [.onStory()](#onstory)
-   [Hacking Guide](#hacking-guide)
    -   [The App](#the-app)
    -   [Changing UI](#changing-ui)
    -   [Redux](#redux)
    -   [Mounting](#mounting)
    -   [App Context](#app-context)
    -   [Actions](#actions)
    -   [Core API](#core-api)
    -   [Keyboard Shortcuts](#keyboard-shortcuts)
    -   [URL Changes](#url-changes)

## Usage

First you need to install `@storybook/ui` into your app.

```sh
npm install --save @storybook/ui
```

Then you need to create a Provider class like this:

```js
import React from 'react';
import { Provider } from '@storybook/ui';

export default class MyProvider extends Provider {
  getPanels() {
    return {};
  }

  renderPreview() {
    return (
      <p>This is the Preview</p>
    );
  }

  handleAPI(api) {
    // no need to do anything for now.
  }
}
```

Then you need to initialize the UI like this:

```js
import { document } from 'global';
import renderStorybookUI from '@storybook/ui';
import Provider from './provider';

const roolEl = document.getElementById('root');
renderStorybookUI(roolEl, new Provider());
```

Then you'll get a UI like this:

![Simplest Storybook UI](./docs/simple-ui.png)

> **See the [example](./example) app for a complete example.**

## API

### .setOptions()

```js
import { Provider } from '@storybook/ui';

class ReactProvider extends Provider {
  handleAPI(api) {
    api.setOptions({
      // see available options in
      // https://github.com/storybooks/storybook/tree/master/addons/options#getting-started
    });
  }
};
{'fraction_non_alphanumeric': 0.16421365966595006, 'fraction_numerical': 0.0165371258475277, 'mean_word_length': 4.200343938091144, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 9, 'https://': 32, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6564519', 'n_tokens_mistral': 2221, 'n_tokens_neox': 2040, 'n_words': 396}