setValue(e.target.value)}
    ref={ref => (textarea = ref)}
  />
</div>
```

## How to exclude some components from style guide?

Styleguidist will ignore tests (`__tests__` folder and filenames containing `.test.js` or `.spec.js`) by default.

Use [ignore](Configuration.md#ignore) option to customize this behavior:

```javascript
module.exports = {
  ignore: ['**/*.spec.js', '**/components/Button.js']
}
```

> **Caution:** You should pass glob patterns, for example, use `**/components/Button.js` instead of `components/Button.js`.

## How to hide some components in style guide but make them available in examples?

Enable [skipComponentsWithoutExample](Configuration.md#skipcomponentswithoutexample) option and do not add an example file (`Readme.md` by default) to components you want to ignore.

Import these components in your examples:

````jsx
// ```jsx inside Markdown
import Button from '../common/Button'
;<Button>Push Me Tender</Button>
````

Or, to make these components available for all examples:

```jsx
// styleguide.config.js
module.exports = {
  require: [path.resolve(__dirname, 'styleguide/setup.js')]
}

// styleguide/setup.js
import Button from './src/components/common/Button'
global.Button = Button
```

The `Button` component will be available in every example without a need to `import` it.

## How to render React components that aren’t part of the style guide?

Import these components in your examples:

````jsx
// ```jsx or ```jsx noeditor inside Markdown
import ColorPalette from './components/ColorPalette'
;<ColorPalette />
````

## How to dynamically load other components in an example?

Although examples don’t have direct access to webpack’s `require.context` feature, you _can_ use it in a separate helper file which you require in your example code. If you wanted to create an example to load and show all your icon components, you could do this:

```js
// load-icons.js
const iconsContext = require.context('./icons/', true, /js$/)
const icons = iconsContext.keys().reduce((icons, file) => {
  const Icon = iconsContext(file).default
  const label = file.slice(2, -3) // strip './' and '.js'
  icons[label] = Icon
  return icons
}, {})

export default icons
```

````jsx
// ```jsx or ```jsx noeditor inside Markdown
import icons from './load-icons'
const iconElements = Object.keys(icons).map(iconName => {
  const Icon = icons[iconName]
  return (
    <span key={iconName}>
      {iconName}: {<Icon />}
    </span>
  )
})
<div>{iconElements}</div>
````

## How to display the source code of any file?

First, code examples can receive [props and settings](Documenting.md#usage-examples-and-readme-files):

```js { "file": "../mySourceCode.js" }
    ```

The above example adds a setting called `file` with the **relative path** to the file we want to display as value.

Second, use the [updateExample](Configuration#updateexample) config option, to detect the setting and change the content of a fenced code block:

```javascript
module.exports = {
  updateExample(props, exampleFilePath) {
    // props.settings are passed by any fenced code block, in this case
    const { settings, lang } = props
    // "../mySourceCode.js"
    if (typeof settings.file === 'string') {
      // "absolute path to mySourceCode.js"
      const filepath = path.resolve(exampleFilePath, settings.file)
      // displays the block as static code
      settings.static = true
      // no longer needed
      delete settings.file
      return {
        content: fs.readFileSync(filepath, 'utf8'),
        settings,
        lang
      }
    }
    return props
  }
}
```

## How to set global styles for user components?

Using the [jss-global](https://github.com/cssinjs/jss-global) API you can set global styles in your config:

```javascript
module.exports = {
  components: 'src/components/**/[A-Z]*.js',
  styles: {
    StyleGuide: {
      '@global body': {
        fontFamily: 'Helvetica'
      }
    }
  }
}
```

Above, we have set `font-family: 'Helvetica';` on the body.

> **Tip:** This does not set styles on the style guide UI, for that read [How to change styles of a style guide](#how-to-change-styles-of-a-style-guide).

## How to add custom JavaScript and CSS or polyfills?

In your style guide config:

```javascript
const path = require('path')
module.exports = {
  require: [
    'babel-polyfill',
    path.join(__dirname, 'path/to/script.js'),
    path.join(__dirname, 'path/to/styles.css')
  ]
}
```

## How to use React Styleguidist with Preact?

You need to alias `react` and `react-dom` to `preact-compat`:

```javascript
module.exports = {
  webpackConfig: {
    resolve: {
      alias: {
        react: 'preact-compat',
        'react-dom': 'preact-compat'
      }
    }
  }
}
```

See the [Preact example style guide](https://github.com/styleguidist/react-styleguidist/tree/master/examples/preact).

## How to change styles of a style guide?

There are two config options to change your style guide UI: [theme](Configuration.md#theme) and [styles](Configuration.md#styles).

Use [theme](Configuration.md#theme) to change fonts, colors, etc.

Use [styles](Configuration.md#styles) to tweak the style of any particular Styleguidist component.

As an example:

```javascript
module.exports = {
  theme: {
    color: {
      link: 'firebrick',
      linkHover: 'salmon'
    },
    fontFamily: {
      base: '"Comic Sans MS", "Comic Sans", cursive'
    }
  },
  styles: {
    Logo: {
      // We're changing the LogoRenderer component
      logo: {
        // We're changing the rsg--logo-XX class name inside the component
        animation: '$blink ease-in-out 300ms infinite'
      },
      '@keyframes blink': {
        to: { opacity: 0 }
      }
    }
  }
}
```

> **Info:** See available [theme variables](https://github.com/styleguidist/react-styleguidist/blob/master/src/client/styles/theme.ts).

> **Info:** Styles use [JSS](https://github.com/cssinjs/jss/blob/master/docs/jss-syntax.md) with these plugins: [jss-isolate](https://github.com/cssinjs/jss/tree/master/packages/jss-plugin-isolate), [jss-nested](https://github.com/cssinjs/jss/tree/master/packages/jss-plugin-nested), [jss-camel-case](https://github.com/cssinjs/jss/tree/master/packages/jss-plugin-camel-case), [jss-default-unit](https://github.com/cssinjs/jss/tree/master/packages/jss-plugin-default-unit), [jss-compose](https://github.com/cssinjs/jss/tree/master/packages/jss-plugin-compose) and [jss-global](https://github.com/cssinjs/jss/tree/master/packages/jss-plugin-global).

> **Tip:** Use [React Developer Tools](https://github.com/facebook/react) to find component and style names. For example a component `<LogoRenderer><h1 className="rsg--logo-53">` corresponds to an example above.

> **Tip:** Use a function instead of an object for [styles](Configuration.md#styles) to access all theme variables in your custom styles.

You can store all styles in a separate file to allow hot module replacement (HMR). Same goes for theme variables.

The same example above would then translate as:

In `styleguide.config,js`, objects are replaced with file paths

```javascript
module.exports = {
  // ...
  styles: './styleguide/styles.js',
  theme: './styleguide/themes.js'
}
```

then in `./styleguide/theme.js`

```javascript
module.exports = {
  color: {
    link: 'firebrick',
    linkHover: 'salmon'
  },
  fontFamily: {
    base: '"Comic Sans MS", "Comic Sans", cursive'
  }
}
```

and in `./styleguide/styles.js`

```javascript
module.exports = {
  Logo: {
    // We're changing the LogoRenderer component
    logo: {
      // We're changing the rsg--logo-XX class name inside the component
      animation: '$blink ease-in-out 300ms infinite'
    },
    '@keyframes blink': {
      to: { opacity: 0 }
    }
  }
}
```

Each modification of `theme.js` or `styles.js` will trigger a hot module replacement, updating the styleguide in the browser.

Check out the [themed example](https://github.com/styleguidist/react-styleguidist/tree/master/examples/themed) on the github repo to learn more and try it out.

```javascript
module.exports = {
  styles: function (theme) {
    return {
      Logo: {
        logo: {
          // we can now change the color used in the logo item to use the theme's `link` color
          color: theme.color.link
        }
      }
    }
  }
}
```

## How to use CSS animations in your style guide?

As seen in the `@keyframes` animation examples above, the animation property in CSS rules do not directly use the name of their keyframe animations because of internal keyframe scoping.

To use a CSS animation, you have to define its keyframe at the root of the renderer object. The use of `@keyframes` in styling above are good examples of this.

## How to change the layout of a style guide?

You can replace any Styleguidist React component. But in most of the cases you’ll want to replace `*Renderer` components — all HTML is rendered by these components. For example `ReactComponentRenderer`, `ComponentsListRenderer`, `PropsRenderer`, etc. — [check the source](https://github.com/styleguidist/react-styleguidist/tree/master/src/client/rsg-components) to see what components are available.

There’s also a special wrapper component — `Wrapper` — that wraps every example component. By default, it renders `children` as is but you can use it to provide custom logic.

For example, you can replace the `Wrapper` component to wrap any example in the [React Intl’s](https://github.com/yahoo/react-intl) provider component. You can’t wrap the whole style guide because every example is compiled separately in a browser.

```javascript
// styleguide.config.js
const path = require('path')
module.exports = {
  styleguideComponents: {
    Wrapper: path.join(__dirname, 'src/styleguide/Wrapper')
  }
}
```

```jsx
// src/styleguide/Wrapper.js
import React, { Component } from 'react'
import { IntlProvider } from 'react-intl'
export default class Wrapper extends Component {
  render() {
    return (
      <IntlProvider locale="en">{this.props.children}</IntlProvider>
    )
  }
}
```

You can replace the `StyleGuideRenderer` component like this:

```javascript
// styleguide.config.js
const path = require('path')
module.exports = {
  styleguideComponents: {
    StyleGuideRenderer: path.join(
      __dirname,
      'src/styleguide/StyleGuideRenderer'
    )
  }
}
```

```jsx
// src/styleguide/StyleGuideRenderer.js
import React from 'react'
const StyleGuideRenderer = ({
  title,
  version,
  homepageUrl,
  components,
  toc,
  hasSidebar
}) => (
  <div className="root">
    <h1>{title}</h1>
    {version && <h2>{version}</h2>}
    <main className="wrapper">
      <div className="content">
        {components}
        <footer className="footer">
          <Markdown
            text={`Created with [React Styleguidist](${homepageUrl})`}
          />
        </footer>
      </div>
      {hasSidebar && <div className="sidebar">{toc}</div>}
    </main>
  </div>
)
```

We have [an example style guide](https://github.com/styleguidist/react-styleguidist/tree/master/examples/customised) with custom components.

## How to change syntax highlighting colors?

Styleguidist uses [Prism](https://prismjs.com/) for code highlighting in static examples and inside the editor. You can change the colors using the [theme](Configuration.md#theme) config option:

```javascript
// styleguide.config.js
module.exports = {
  theme: {
    color: {
      codeComment: '#6d6d6d',
      codePunctuation: '#999',
      codeProperty: '#905',
      codeDeleted: '#905',
      codeString: '#690',
      codeInserted: '#690',
      codeOperator: '#9a6e3a',
      codeKeyword: '#1673b1',
      codeFunction: '#DD4A68',
      codeVariable: '#e90'
    }
  }
}
```

## How to change style guide dev server logs output?

You can modify webpack dev server logs format changing `stats` option of webpack config:

```javascript
module.exports = {
  webpackConfig(env) {
    if (env === 'development') {
      return {
        stats: {
          chunks: false,
          chunkModules: false,
          chunkOrigins: false
        }
      }
    }
    return {}
  }
}
```

## How to debug my components and examples?

1. Open your browser’s developer tools
2. Write `debugger;` statement wherever you want: in a component source, a Markdown example or even in an editor in a browser.

![](https://d3vv6lp55qjaqc.cloudfront.net/items/3i3E3j2h3t1315141k0o/debugging.png)

## How to debug the exceptions thrown from my components?

1. Put `debugger;` statement at the beginning of your code.
2. Press the ![Debugger](https://d3vv6lp55qjaqc.cloudfront.net/items/2h2q3N123N3G3R252o41/debugger.png) button in your browser’s developer tools.
3. Press the ![Continue](https://d3vv6lp55qjaqc.cloudfront.net/items/3b3c1P3g3O1h3q111I2l/continue.png) button and the debugger will stop execution at the next exception.

## How to use the production or development build of React?

In some cases, you might need to use the development build of React instead of the default [production one](https://reactjs.org/docs/optimizing-performance.html#use-the-production-build). For example, this might be needed if you use React Native and make references to a React Native component’s PropTypes in your code. As React removes all PropTypes in its production build, your code will fail. By default, Styleguidist uses the development build for the dev server and the production one for static builds.

```js
import React from 'react'
import { TextInput } from 'react-native'

const CustomInput = ({ value }) => <TextInput value={value} />

CustomInput.propTypes = {
  // Will fail in a static build
  value: TextInput.value.isRequired
}
```

If you use code like the example above, you might see a `Cannot read property 'isRequired' of undefined` error. To avoid it, you need to tell Styleguidist to use React’s development build. To do this, set the `NODE_ENV` variable to `development` in your npm script.

```json
{
  "scripts": {
    "build": "cross-env NODE_ENV=development react-styleguidist build"
  }
}
```

**Note:** The script above uses [cross-env](https://github.com/kentcdodds/cross-env) to make sure the environment variable is properly set on all platforms. Run `npm i -D cross-env` to add it.

## How to use Vagrant with Styleguidist?

First, read [Vagrant guide](https://webpack.js.org/guides/development-vagrant/) from the webpack documentation. Then enable polling in your webpack config:

```js
devServer: {
  watchOptions: {
    poll: true
  }
}
```

## How to add a favicon?

Two options:

1. Put a `favicon.ico` file into the root folder of your site.

2. Use [template](Configuration.md#template) option:

```javascript
module.exports = {
  template: {
    favicon: 'https://assets-cdn.github.com/favicon.ico'
  }
}
```

## How to add external JavaScript and CSS files?

Use [template](Configuration.md#template) option:

```javascript
module.exports = {
  template: {
    head: {
      scripts: [
        {
          src: 'assets/js/babelHelpers.min.js'
        }
      ],
      links: [
        {
          rel: 'stylesheet',
          href:
            'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'
        }
      ]
    }
  }
}
```

In comparison to [require](Configuration.md#require) option, these scripts and links are run in the browser, not during webpack build process. It can be useful for side effect-causing scripts in which your components, or in this case Babel output, need to function properly.

## How to add fonts from Google Fonts?

Use [template](Configuration.md#template) and [theme](Configuration.md#theme) options:

```javascript
module.exports = {
  template: {
    head: {
      links: [
        {
          rel: 'stylesheet',
          href: 'https://fonts.googleapis.com/css?family=Roboto'
        }
      ]
    }
  },
  theme: {
    fontFamily: {
      base: '"Roboto", sans-serif'
    }
  }
}
```

## How to reuse project’s webpack config?

See in [configuring webpack](Webpack.md#reusing-your-projects-webpack-config).

## How to use React Styleguidist with Redux, Relay or Styled Components?

See [working with third-party libraries](Thirdparties.md).

## How to use React-axe to test accessibility of components?

1. Install [react-axe](https://github.com/dequelabs/react-axe).

2. Load React-axe with the style guide and run checks for each example:

```jsx
// styleguide.config.js
module.exports = {
  require: [path.resolve(__dirname, 'styleguide/setup.js')]
}

// styleguide/setup.js
import React from 'react'
import ReactDOM from 'react-dom'
var context = {
  include: [['[data-preview]']]
}
if (process.env.NODE_ENV !== 'production') {
  var axe = require('react-axe')
  axe(React, ReactDOM, 1000, undefined, context)
}
```

3. [Start your style guide server](https://react-styleguidist.js.org/docs/getting-started#3-start-your-style-guide) and open your browser’s developer tools console.

If you are using Jest for testing you can also use [jest-axe](https://github.com/nickcolley/jest-axe).

## How to change the names of components displayed in Styleguidist UI?

You might want to change your components’ names to be displayed differently, for example, for stylistic purposes or to give them more descriptive names in your style guide.

This can be done by adding [@visibleName](Documenting.md#defining-custom-component-names) tag to your component documentation.

In case you want to change components’ names in bulk, for example, based on their current name, you can use [updateDocs](Configuration.md#updatedocs) config option:

```javascript
module.exports = {
  updateDocs(docs) {
    if (docs && docs.displayName) {
      docs.visibleName = docs.displayName.toLowerCase()
    }
    return docs
  }
}
```

## How to re-use the types in Styleguidist?

From version 10, Styleguidist is written using TypeScript language.

It allows the maintainers to catch type mismatch before execution and gives them a better developer experience.

It also allows you to write customized style guide components using TypeScript TSX instead of JavaScript JSX.

**NOTE:** Since all files in `src/client/rsg-components` are aliased to `rsg-components` using webpack, you will have to add this alias to your `tsconfig.json` file:

```json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      // remap rsg-components/anything to its version in react-styleguidist
      "rsg-components/*": [
        "node_modules/react-styleguidist/lib/client/rsg-components/*"
      ]
    }
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}
```

This way when you write the following component, TypeScript will resolve typings for client components and help you type them properly.

```ts
import Styled from 'rsg-components/Styled'
import Heading from 'rsg-components/Heading'

export default function SectionsRenderer({ children }) {
  return (
    <div>
      {children.length > 0 && (
        <div>
          <Heading level={1}>Example Components</Heading>
          <p>These are the greatest components</p>
        </div>
      )}
      <DefaultSectionsRenderer>{children}</DefaultSectionsRenderer>
    </div>
  )
}
```

## What’s the difference between Styleguidist and Storybook?

Both tools are good and mature, they have many similarities but also some distinctions that may make you choose one or the other. For me, the biggest distinction is how you describe component variations.

With [Storybook](https://storybook.js.org/) you write _stories_ in JavaScript files:

```js
import React from 'react'
import { storiesOf } from '@storybook/react'
import { action } from '@storybook/addon-actions'
import Button from '../components/Button'

storiesOf('Button', module)
  .add('default', () => (
    <Button onClick={action('clicked')}>Push Me</Button>
  ))
  .add('large size', () => <Button size="large">Push Me</Button>)
```

And with Styleguidist you write _examples_ in Markdown files:

React button component example:

```js
    <Button onClick={() => console.log('clicked')>Push Me</Button>
    ```

Large size:

```js
    <Button size="large">Push Me</Button>
    ```

![Styleguidist screenshot](https://camo.githubusercontent.com/7af8e5fc43288807978f28530656275008c5afbf/68747470733a2f2f64337676366c703535716a6171632e636c6f756466726f6e742e6e65742f6974656d732f32373142333732783130325330633035326933462f72656163742d7374796c6567756964697374372e676966)

Another important distinction is that Storybook shows only one variation of one component at a time but Styleguidist can show all variations of all components, all variations of a single component or one variation. It’s easier to create a style guide with Styleguidist but Storybook has more tools to develop components (though we’re working on that too).

| Feature | Storybook | Styleguidist |
| --- | --- | --- |
| Component examples | JavaScript | Markdown |
| Props docs | Yes | Yes |
| Public methods docs | No | Yes |
| Style guide¹ | No | Yes |
| Customizable design | No | Yes |
| Extra documentation² | No | Yes |
| Plugins | Many | [In development](https://github.com/styleguidist/react-styleguidist/issues/354) |
| React | Yes | Yes |
| Preact | Yes | Yes |
| React Native | Yes | [react-native-web](https://github.com/styleguidist/react-styleguidist/issues/675) |
| Vue | Yes | [Fork](https://github.com/vue-styleguidist/vue-styleguidist) |

¹ All components on a single page.<br> ² Include non-component documentation.

## Are there any other projects like this?

### Active

- [Catalog](https://github.com/interactivethings/catalog), create living style guides using Markdown or React.
- [Cosmos](https://github.com/react-cosmos/react-cosmos), a tool for designing encapsulated React components.
- [Docz](https://www.docz.site/), a tool for documenting your components with zero configuration and live preview.
- [React Storybook](https://storybooks.js.org/), isolate your React UI Component development from the main app.

### Inactive

- [Atellier](https://github.com/scup/atellier), a React components emulator. Last release 2016.
- [Carte Blanche](https://github.com/carteb/carte-blanche), an isolated development space with integrated fuzz testing for your components. Last release 2016.
- [React BlueKit](http://bluekit.blueberry.io/), render React components with editable source and live preview. Last release 2017.
- [React Cards](https://github.com/steos/reactcards), devcards for React. Last release 2017.
- [React Styleguide Generator](https://github.com/pocotan001/react-styleguide-generator), a React style guide generator. Last release 2017.
- [React-demo](https://github.com/rpominov/react-demo), a component for creating demos of other components with props editor. Last release 2017.
- [SourceJS](https://github.com/sourcejs/Source), a platform to unify all your frontend documentation. It has a [Styleguidist plugin](https://github.com/sourcejs/sourcejs-react-styleguidist). On hold.

---

# React Styleguidist Documentation
# Source: https://raw.githubusercontent.com/styleguidist/react-styleguidist/master/docs/Development.md
# Path: docs/Development.md

# Developer guide

_For basics see [How to contribute](https://github.com/styleguidist/react-styleguidist/blob/master/.github/Contributing.md)._

Styleguidist isn’t an ordinary single-page app and some design decisions may look confusing to an outsider. In this guide, we’ll explain these decisions to un-confuse potential contributors.

The main thing is that we’re running two apps at the same time: user’s components and Styleguidist UI. They share a webpack configuration and have styles in the same scope (there’s only one scope in CSS). And we can control only one of these two apps: Styleguidist UI. That puts us under some restrictions:

- Our styles should not affect user component styles.
- User styles (especially global like Bootstrap) should not affect Styleguidist UI.
- `body` styles (like `font-family`) should affect user components as the user expects but not Styleguidist UI.

## How it works

Styleguidist uses [react-docgen](https://github.com/reactjs/react-docgen) to parse _source_ files (not transpiled). react-docgen finds exported React components and generates documentation based on PropTypes or Flow annotations.

Styleguidist uses Markdown for documentation: each JavaScript code block is rendered as an interactive playground with [react-simple-code-editor](https://github.com/satya164/react-simple-code-editor). To do that we extract all these code blocks using [Remark](http://remark.js.org/).

Webpack loaders (see below) generate JavaScript modules with all user components, their documentation and examples and pass that to a React app which renders a style guide.

## Webpack loaders and webpack configuration

We use webpack loaders to hot reload the style guide on changes in user components, styles and Markdown documentation. We have three loaders ([loaders](https://github.com/styleguidist/react-styleguidist/tree/master/src/loaders) folder):

- `styleguide-loader`: loads components and sections;
- `props-loaders`: loads props documentation using react-docgen;
- `examples-loader`: loads examples from Markdown files;

Styleguidist tries to load and reuse the user’s webpack config (`webpack.config.js` in project root folder). It works most of the time but has some restrictions: Styleguidist [ignores](https://github.com/styleguidist/react-styleguidist/blob/master/src/scripts/utils/mergeWebpackConfig.js) some fields and plugins because they are already included (like `webpack.HotModuleReplacementPlugin`), don’t make sense for a style guide (like `output`) or may break Styleguidist (like `entry`).

We’re trying to keep Styleguidist’s [webpack config](https://github.com/styleguidist/react-styleguidist/blob/master/src/scripts/make-webpack-config.ts) minimal to reduce clashes with the user’s configuration.

## React components

Most of StyleGuidist UI components consist of two parts: `Foo/Foo.js` that contains all logic and `Foo/FooRenderer.js` that contains all markup and styles. This allows users to customize rendering by overriding `*Renderer` component using webpack aliases (or [styleguideComponents](Configuration.md#styleguidecomponents) config option):

```js
// styleguide.config.js
const path = require('path')
module.exports = {
  webpackConfig: {
    resolve: {
      alias: {
        'rsg-components/Wrapper': path.join(
          __dirname,
          'lib/styleguide/Wrapper'
        )
      }
    }
  }
}
```

All Styleguidist components should be imported like this: `import Foo from 'rsg-components/Foo'` to make aliases work.

Each component folder usually has several files:

- `Foo/Foo.js` (optional for basic components);
- `Foo/FooRenderer.js`;
- `Foo/Foo.spec.js` — tests;
- `Foo/index.js` — reexport of `Foo.js` or `FooRenderer.js`.

## Styles

For styles we use [JSS](http://cssinjs.org/), it allows users to customize their style guide and allows us to ensure style isolation (thanks to [jss-isolate](http://cssinjs.org/jss-isolate/)). No user styles should affect Styleguidist UI and no Styleguidist styles should affect user components.

Use [clsx](https://github.com/lukeed/clsx) to merge several class names or for conditional class names, import it as `cx` (`import cx from 'clsx'`).

We use `Styled` higher-order component to allow theming (see [theme](Configuration.md#theme) and [style](Configuration.md#style) style guide config options). Use it like this:

```jsx
import React from 'react'
import Styled from 'rsg-components/Styled'

export const styles = ({ fontFamily, fontSize, color }) => ({
  button: {
    fontSize: fontSize.base,
    fontFamily: fontFamily.base,
    color: color.light,
    '&:hover, &:active': {
      isolate: false,
      color: color.lightest
    }
  }
})

function ExamplePlaceholderRenderer({ classes }) {
  return (
    <button className={classes.button}>I am a styled button</button>
  )
}

export default Styled(styles)(ExamplePlaceholderRenderer)
```

Check available theme variables in [src/client/styles/theme.js](https://github.com/styleguidist/react-styleguidist/blob/master/src/client/styles/theme.js).

Because of isolation and theming you need to explicitly declare `fontFamily`, `fontSize` and `color`. Add `isolate: false` to your hover styles, otherwise you’ll have to repeat base non-hover styles.

## Testing

We’re using [Jest with React Test Renderer](https://reactjs.org/docs/test-renderer.html) for testing. Put your component tests into `Component.spec.js` file in the same folder and all other tests into `__tests__/filename.spec.js`.

To test particular class names use `classes` function (available in the global namespace in tests):

```js
import { TabButtonRenderer, styles } from './TabButtonRenderer'

const props = {
  classes: classes(styles)
}

it('should render active styles', () => {
  const renderer = createRenderer()
  renderer.render(
    <TabButtonRenderer {...props} active>
      pizza
    </TabButtonRenderer>
  )
  expect(actual.toJson()).toMatchSnapshot()
})
```

---

# React Styleguidist Documentation
# Source: https://raw.githubusercontent.com/styleguidist/react-styleguidist/master/docs/Documenting.md
# Path: docs/Documenting.md

# Documenting components

Styleguidist generates documentation for your components based on the comments in your source code, propTypes declarations, and Readme files.

> **Tip:** [See examples](https://github.com/styleguidist/react-styleguidist/tree/master/examples/basic/src/components) of documented components in our demo style guide.

## Code comments and propTypes

Styleguidist will display your components’ JSDoc comment blocks. Also, it will pick up props from propTypes declarations and display them in a table.

```javascript
import React from 'react'
import PropTypes from 'prop-types'

/**
 * General component description in JSDoc format. Markdown is *supported*.
 */
export default class Button extends React.Component {
  static propTypes = {
    /** Description of prop "foo". */
    foo: PropTypes.number,
    /** Description of prop "baz". */
    baz: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
  }
  static defaultProps = {
    foo: 42
  }

render() {
    /* ... */
  }
}
```

> **Info:** [Flow](https://flowtype.org/) and [TypeScript](https://www.typescriptlang.org) type annotations are supported.

> **Tip:** You can change its behavior using [propsParser](Configuration.md#propsparser) and [resolver](Configuration.md#resolver) options.

> **Info:** Component’s `PropTypes` and documentation comments are parsed by the [react-docgen](https://github.com/reactjs/react-docgen) library. They can be modified using the [updateDocs](Configuration.md#updatedocs) function.

## Usage examples and Readme files

Styleguidist will look for any `Readme.md` or `ComponentName.md` files in the component’s folder and display them. Any code block with a language tag of `js`, `jsx`, or `javascript` will be rendered as a React component with an interactive playground. For backwards compatibility, code blocks without a language tag are also rendered in this way. It is recommended to always use the proper language tag for new documentation.

React component example:

```js
    <Button size="large">Push Me</Button>
    ```

You can add a custom props to an example wrapper:

```js { "props": { "className": "checks" } }
    <Button>I’m transparent!</Button>
    ```

Or add padding between examples in a block by passing the `padded` modifier:

```jsx padded
    <Button>Push Me</Button>
    <Button>Click Me</Button>
    <Button>Tap Me</Button>
    ```

Or disable an editor by passing a `noeditor` modifier:

```jsx noeditor
    <Button>Push Me</Button>
    ```

To render an example as highlighted source code add a `static` modifier:

```jsx static
    import React from 'react';
    ```

Examples with all other languages are rendered only as highlighted source code, not an actual component:

```html
    <Button size="large">Push Me</Button>
    ```

Any [Markdown](http://daringfireball.net/projects/markdown/) is **allowed** _here_.

> **Tip:** You can configure examples file name with the [getExampleFilename](Configuration.md#getexamplefilename) option.

> **Tip:** If you need to display some JavaScript code in your documentation that you don’t want to be rendered as an interactive playground you can use the `static` modifier with a language tag (e.g. `js static`).

## External examples using doclet tags

Additional example files can be associated with components using `@example` doclet syntax.

The following component will also have an example loaded from the `extra.examples.md` file:

```javascript
/**
 * Component is described here.
 *
 * @example ./extra.examples.md
 */
export default class Button extends React.Component {
  // ...
}
```

> **Note:** You’ll need a regular example file (like `Readme.md`) too when [skipComponentsWithoutExample](Configuration.md#skipcomponentswithoutexample) is `true`.

## Public methods

By default, any methods your components have are considered to be private and are not published. Mark your public methods with JSDoc [`@public`](http://usejsdoc.org/tags-public.html) tag to get them published in the docs:

```javascript
/**
 * Insert text at cursor position.
 *
 * @param {string} text
 * @public
 */
insertAtCursor(text) {
  // ...
}
```

## Ignoring props

By default, all props your components have are considered to be public and are published. In some rare cases, you might want to remove a prop from the documentation while keeping it in the code. To do so, mark the prop with JSDoc [`@ignore`](http://usejsdoc.org/tags-ignore.html) tag to remove it from the docs:

```javascript
MyComponent.propTypes = {
  /**
   * A prop that should not be visible in the documentation.
   *
   * @ignore
   */
  hiddenProp: React.PropTypes.string
}
```

## Defining custom component names

Use `@visibleName` JSDoc tag to define component names that are used in the Styleguidist UI:

```javascript
/**
 * The only true button.
 *
 * @visibleName The Best Button Ever 🐙
 */
class Button extends React.Component {
```

The component will be displayed with a custom “The Best Button Ever 🐙” name and this will not change the name of the component used in the code of your app or Styleguidist examples.

## Using JSDoc tags

You can use the following [JSDoc](http://usejsdoc.org/) tags when documenting components, props and methods:

- [@deprecated](http://usejsdoc.org/tags-deprecated.html)
- [@see, @link](http://usejsdoc.org/tags-see.html)
- [@author](http://usejsdoc.org/tags-author.html)
- [@since](http://usejsdoc.org/tags-since.html)
- [@version](http://usejsdoc.org/tags-version.html)

When documenting props you can also use:

- [@param, @arg, @argument](http://usejsdoc.org/tags-param.html)

All tags can render Markdown.

```javascript
/**
 * The only true button.
 *
 * @version 1.0.1
 * @author [Artem Sapegin](https://github.com/sapegin)
 * @author [Andy Krings-Stern](https://github.com/ankri)
 */
class Button extends React.Component {
  static propTypes = {
    /**
     * Button label.
     */
    children: PropTypes.string.isRequired,
    /**
     * The color for the button
     *
     * @see See [Wikipedia](https://en.wikipedia.org/wiki/Web_colors#HTML_color_names) for a list of color names
     * @see See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) for a list of color names
     */
    color: PropTypes.string,
    /**
     * The size of the Button
     *
     * @since Version 1.0.1
     */
    size: PropTypes.oneOf(['small', 'normal', 'large']),
    /**
     * The width of the button
     *
     * @deprecated Do not use! Use `size` instead!
     */
    width: PropTypes.number,
    /**
     * Gets called when the user clicks on the button
     *
     * @param {SyntheticEvent} event The react `SyntheticEvent`
     * @param {Object} allProps All props of this Button
     */
    onClick: PropTypes.func
  }
}
```

## Writing code examples

Code examples in Markdown use ES6+JSX syntax. You can use the current component without explicitly importing it:

````jsx
// ```jsx inside Button/Readme.md or Button.md
<Button>Push Me</Button>
````

> **Info:** Styleguidist uses [Bublé](https://buble.surge.sh/guide/) to run ES6 code on the frontend, it supports [most of the ES6 features](https://buble.surge.sh/guide/#unsupported-features).

To use other components, you need to explicitly `import` them:

````jsx
// ```jsx inside Panel/Readme.md or Panel.md
import Button from '../Button'
;<Panel>
  <p>
    Using the Button component in the example of the Panel component:
  </p>
  <Button>Push Me</Button>
</Panel>
````

You can also `import` other modules, like mock data:

````jsx
// ```jsx inside Markdown
import mockData from './mocks'
;<Message content={mockData.hello} />
````

Or you can explicitly import all your example dependencies, to make examples easier to copy into your app code:

````jsx
// ```jsx inside Markdown
import React from 'react'
import Button from 'rsg-example/components/Button'
import Placeholder from 'rsg-example/components/Placeholder'
````

> **Info:** `rsg-example` module is an alias defined by the [moduleAliases](Configuration.md#modulealiases) config option.

> **Caution:** You can only use `import` by editing your Markdown files, not by editing the example code in the browser.

Each example acts as a function component and you can use the `useState` Hook to handle its state.

````jsx
// ```jsx inside Markdown
const [isOpen, setIsOpen] = React.useState(false)
;<div>
  <button onClick={() => setIsOpen(true)}>Open</button>
  <Modal isOpen={isOpen}>
    <h1>Hallo!</h1>
    <button onClick={() => setIsOpen(false)}>Close</button>
  </Modal>
</div>
````

If a component uses React Context, you need a context provider in the example or in a custom `Wrapper` component. See [ThemeButton example](https://github.com/styleguidist/react-styleguidist/tree/master/examples/sections/src/components/ThemeButton).

> **Tip:** If you need a more complex demo it’s often a good idea to define it in a separate JavaScript file and `import` it in Markdown.

## Limitations

In some cases Styleguidist may not understand your components, [see possible solutions](Thirdparties.md).

---

# React Styleguidist Documentation
# Source: https://raw.githubusercontent.com/styleguidist/react-styleguidist/master/docs/GettingStarted.md
# Path: docs/GettingStarted.md

# Getting started with React Styleguidist

## 1. Install Styleguidist

Install webpack if you don’t have it already and aren’t using Create React App:

```bash
npm install --save-dev webpack
```

Install Styleguidist:

```bash
npm install --save-dev react-styleguidist
```

## 2. Configure your style guide

**If you’re using [Create React App](https://github.com/facebook/create-react-app) you can skip this step.**

- [Point Styleguidist to your React components](Components.md)
- [Tell Styleguidist how to load your app’s code](Webpack.md)

## 3. Start your style guide

- Run **`npx styleguidist server`** to start a style guide dev server.
- Run **`npx styleguidist build`** to build a production HTML version.

> **Tip:** We recommend [adding these commands to your `package.json`](CLI.md#usage).

## 4. Start documenting your components

See how to [document your components](Documenting.md).

## Something isn’t working?

- [Solutions for common problems and questions](Cookbook.md)
- [Configuring Styleguidist with third-party tools](Thirdparties.md)

---

# React Styleguidist Documentation
# Source: https://raw.githubusercontent.com/styleguidist/react-styleguidist/master/docs/Maintenance.md
# Path: docs/Maintenance.md

# Maintainer guide

_See also [Developer guide](Development.md)._

## We need you!

Help us develop and maintain Styleguidist:

- Answer questions in [GitHub issues](https://github.com/styleguidist/react-styleguidist/issues) and [Stack Overflow](https://stackoverflow.com/questions/tagged/react-styleguidist).
- Review [pull requests](https://github.com/styleguidist/react-styleguidist/pulls).
- Fix bugs and add new features.
- Write articles and talk about Styleguidist on conferences and meetups (we’re always happy to review your texts and slides).

## Commit message conventions

We use a simplified [Angular commit message conventions](https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y/edit). This makes automated releases with [semantic-release](https://github.com/semantic-release/semantic-release) possible.

\*\*The main differences with the Angular convention is that all messages are capitalized. Commit messages are written for humans to read, so we should use text convention for humans, not for machines.

Hovewer, we commit messages should follow a ceratain structure, so they semantic-release could generate nice human-readalbe changelogs.

**The commit message** consists of a `header`, a `body`, and a `footer`:

```
<header>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>
```

The `header` is mandatory and must conform to the commit message header format described below.

The `body` optional but higly recommended for most commits, except very simple ones.

The `footer` is optional.

**The commit message header** looks like this:

The `<type>` and `<Short summary>` fields are mandatory.

### Type

Must be one of the following:

- `chore` — configuration change, dependencies upgrade, and so on.
- `docs` — changes to documentation only.
- `feat` — a new feature.
- `fix` — a bug fix.
- `refactor` — a code change that neither fixes a bug nor adds a feature.
- `test` — adding missing tests or correcting existing tests.

### Short summary

Use the summary field to provide a short description of the change.

- use the imperative, present tense: “change” not “changed” nor “changes”;
- always capitalize the first letter;
- no dot (.) at the end.

### Commit message body

As in the summary, use the imperative, present tense: “fix” not “fixed” nor “fixes”, but put a dot (.) at the end of each sentence.

Explain the motivation for the change: why you are making it. You could include a comparison of the previous behavior with the new behavior to illustrate the impact of the change.

### Commit message footer

The footer could contain information about breaking changes, and is also the place to reference GitHub issues, and other pull requests that this commit closes or is related to.

```
BREAKING CHANGE: <breaking change summary>
<BLANK LINE>
<breaking change description + migration instructions>
<BLANK LINE>
<BLANK LINE>
Fixes #<issue number>
```

Breaking change section should start with the phrase `BREAKING CHANGE:` (with a `:` and a space at the end, you must use ALL CAPS — _sorry but life is full of pain_) followed by a summary of the breaking change, a blank line, and a detailed description of the breaking change that also includes migration instructions.

If the commit doesn’t completely fix the issue, then use (`Refs #1234`) instead of (`Fixes #1234`).

### Commit messsage example

````
Fix: Fix missing FlowType enum values in prop description

In ef4c109b, the file `PropsRenderer.js` (located at
`src/client/rsg-components/Props/PropsRenderer.js`) was removed. In
`PropsRenderer.js`, the `renderExtra` method checked whether `getType`
for the argument to `renderExtra` was present:

```es6
function renderExtra(prop) {
  const type = getType(prop);
  if (!type) {
    return null;
  }
  ...
}
```

However, in ef4c109b, this method was replaced with `renderExtra.tsx`
and the condition was changed to:

```typescript
export default function renderExtra(prop: PropDescriptorWithFlow): React.ReactNode {
  const type = getType(prop);
  if (!prop.type || !type) {
    return null;
  }
```

Unfortunately, this extra condition has resulted in this method always returning `null` for a Flow typed prop as `prop.type` is always `null` as `prop.type` is never set.

This commit reverts the condition to what it was before the migration to TypeScript.

Fixes #1234

````

## Pull requests

Maintainers merge pull requests by squashing all commits and editing the commit message if necessary using the GitHub user interface.

Use an appropriate commit type. Be especially careful with breaking changes. See _Commit message conventions_ above for details.

## Releases

We’re doing automated releases with semantic-release. We’re using [milestones](https://github.com/styleguidist/react-styleguidist/milestones) to group approved pull requests that should be released together (most useful for major releases).

### Patch releases

Any commit of a `fix` type merged into the master branch, is published as a _patch_ release as soon as CI passes.

![](https://d3vv6lp55qjaqc.cloudfront.net/items/1T3v1z0c3f1I1E3l0B3s/patch-commit.png)

### Minor releases

Any commit of a `feat` type merged into the master branch, is published as a _minor_ release as soon as CI passes.

### Major releases

Any commit of a `feat` type with a breaking change section merged into the master branch, is published as a _major_ release as soon as CI passes.

1. Merge all pull requests from a milestone. If a milestone has more than one pull request, they should be merged and released together:
   1. Create a new branch.
   2. Merge all pull requests into this new branch (you can change the target branch on the pull request page and merge it using the GitHub user interface).
   3. Resolve possible merge conflicts.
2. Wait until semantic-release publishes the release.
3. Edit the release notes on GitHub (see _Changelogs_ below).
4. Tweet the release!

## Changelogs

### What is a good changelog

- Changelogs are written for users, not developers.
- Changelog should show new features with code examples or GIFs.
- Changelog should make all breaking changes clear.
- Changelog should explain how to migrate to a new version if there are breaking changes.
- Commit log **is not** a changelog but can be a base for it.

Here’s a [good example of a changelog](https://github.com/styleguidist/react-styleguidist/releases/tag/v7.1.0). Check out [Keep a Changelog](https://keepachangelog.com/) for more details on good changelogs.

### What should be in a changelog

- Information about pull request authors:<br> `(#1040 by @rafaesc)`
- Open Collective link at the very top:<br> `👋 **[Support Styleguidist](https://opencollective.com/styleguidist) on Open Collective** 👋`

---

# React Styleguidist Documentation
# Source: https://raw.githubusercontent.com/styleguidist/react-styleguidist/master/docs/Readme.md
# Path: docs/Readme.md

# React Styleguidist Documentation

- **[Getting Started](https://react-styleguidist.js.org/docs/getting-started): install and run Styleguidist**
- [Documenting components](https://react-styleguidist.js.org/docs/documenting): how to write documentation
- [Locating components](https://react-styleguidist.js.org/docs/components): point Styleguidist to your React components
- [Configuring webpack](https://react-styleguidist.js.org/docs/webpack): tell Styleguidist how to load your code
- [Cookbook](https://react-styleguidist.js.org/docs/cookbook): how to solve common tasks with Styleguidist

---

- [Configuration](https://react-styleguidist.js.org/docs/configuration)
- [CLI commands and options](https://react-styleguidist.js.org/docs/cli)
- [Node.js API](https://react-styleguidist.js.org/docs/api)

---

# React Styleguidist Documentation
# Source: https://raw.githubusercontent.com/styleguidist/react-styleguidist/master/docs/Thirdparties.md
# Path: docs/Thirdparties.md

# Working with third-party libraries

## How Styleguidist works

Styleguidist _loads_ your components (see [Loading and exposing components](Components.md#loading-and-exposing-components) for more) but it uses [react-docgen](https://github.com/reactjs/react-docgen) to _generate documentation_ which may require changes in your code to work properly.

React-docgen reads your components as static text files and looks for patterns like class or function declarations that look like React components. It does not run any JavaScript code, so, if your component is dynamically generated, is wrapped in a higher-order component, or is split into several files, then react-docgen may not understand it.

It supports components defined via `React.createClass`, ES6 classes and function components, with optional Flow and TypeScript type annotations.

In many cases you may trick Styleguidist and react-docgen by exporting both components: an enhanced component as the default export and a base component as a named export:

```javascript
import React from 'react'
import CSSModules from 'react-css-modules'
import styles from './Button.css'

// Base component will be used by react-docgen to generate documentation
export function Button({ color, size, children }) {
  /* ... */
}

// Enhanced component will be used when you write <Button /> in your example files
export default CSSModules(Button, styles)
```

Each example is rendered in an independent React root. You can control React Context by defining a custom Wrapper component like this:

```javascript
// styleguide.config.js
const path = require('path')
module.exports = {
  styleguideComponents: {
    Wrapper: path.join(__dirname, 'src/styleguide/Wrapper')
  }
}
```

Please see our [examples](https://github.com/styleguidist/react-styleguidist/tree/master/examples) and refer to [react-docgen](https://github.com/reactjs/react-docgen) documentation for more information about what types of syntax are supported.

While Styleguidist supports TypeScript out of the box, thanks to `react-docgen`, this support is limited. Consider this example:

```javascript
import Button from 'antd/es/button'

export default Button
```

Here we’re reexporting a third-party component from `node_modules`. Styleguidist won’t be able to render prop types of this component, unless we’re using `react-docgen-typescript`:

1. Install [react-docgen-typescript](https://github.com/styleguidist/react-docgen-typescript).
2. Create a `styleguide.config.js`, see [configuration](Configuration.md) reference.
3. Update your `styleguide.config.js`:

```javascript
   module.exports = {
     propsParser: require('react-docgen-typescript').withCustomConfig(
       './tsconfig.json'
     ).parse
   }
   ```

## Using Styleguidist with other libraries

### Redux

To use Redux store with one component, import it from your Markdown example:

````jsx
// ```jsx inside Markdown
import { Provider } from 'react-redux'
import configureStore from '../utils/configureStore'
const initialState = {
  app: {
    name: 'Pizza Delivery'
  }
}
const store = configureStore({ initialState })
;<Provider store={store}>
  <App greeting="Choose your pizza!" />
</Provider>
````

To use Redux store in every component, redefine the `Wrapper` component:

```javascript
// styleguide.config.js
const path = require('path')
module.exports = {
  styleguideComponents: {
    Wrapper: path.join(__dirname, 'src/styleguide/Wrapper')
  }
}
```

```jsx
// src/styleguide/Wrapper.js
import React, { Component } from 'react'
import { Provider } from 'react-redux'
import configureStore from '../utils/configureStore'
const initialState = {
  app: {
    name: 'Pizza Delivery'
  }
}
const store = configureStore({ initialState })
export default class Wrapper extends Component {
  render() {
    return <Provider store={store}>{this.props.children}</Provider>
  }
}
```

### Relay

**First, mock out Relay.** You’ll need the content from [this Gist](https://gist.github.com/mikberg/07b4006e22aacf31ffe6) for your mocked-out Relay replacement.

```js
// styleguide.config.js
const path = require('path')
const merge = require('webpack-merge')
module.exports = {
  webpackConfig: merge(require('./webpack.config'), {
    resolve: {
      alias: {
        'react-relay': path.join(
          __dirname,
          'src/styleguide/FakeRelay'
        ),
        'real-react-relay': require.resolve('react-relay')
      }
    }
  })
}
```

```js
// src/styleguide/FakeRelay.js
import Relay from 'real-react-relay'
// Copy contents from https://gist.github.com/mikberg/07b4006e22aacf31ffe6
```

**Second, provide sample data to your React components** to send actual results from your GraphQL backend:

```js
// styleguide.config.js
module.exports = {
  context: {
    sample: path.join(__dirname, 'src/styleguide/sample_data')
  }
}
```

```js
// src/styleguide/sample_data.js
module.exports = {
  object: {
    // Something similar to your GraphQL results
  }
}
```

````jsx
// ```jsx inside Markdown
<MyComponent object={sample.object} />
````

_Based on @mikberg’s [blog post](https://medium.com/@mikaelberg/writing-simple-unit-tests-with-relay-707f19e90129)._

### Styled-components

To show PropTypes documentation for [styled-components](https://www.styled-components.com/), you need to add the `@component` JSDoc annotation to the component export:

```jsx
import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'

const SalmonButton = styled.button`
  background-color: salmon;
  border: 1px solid indianred;
  color: snow;
`

Button.propTypes = {
  children: PropTypes.node
}

/** @component */
export default SalmonButton
```

> **Caution:** Object notation isn’t supported yet, use string literals instead:

```diff
- const Button = styled.button({
-  color: 'tomato'
- })
+ const Button = styled.button`
+  color: tomato;
+ `
```

> **Caution:** Other use case for calling the `styled` factory as a function, like styled-system, aren’t supported too:

```diff
- const Input = styled.input(
-  css({
- 		boxSizing: 'border-box',
-     // ...
- 	})
- );
```

#### Adding styled-components `ThemeProvider`

If your styled-components require a theme to render properly, add a `ThemeProvider` to your style guide.

First, create a `Provider` component:

```jsx
// src/Provider.js
import React from 'react'
import { ThemeProvider } from 'styled-components'
import theme from './theme'

export default function Provider({ children }) {
  return <ThemeProvider theme={theme}>{children}</ThemeProvider>
}
```

Next, add `Provider` to your `styleguide.config.js`:

```javascript
// styleguide.config.js
const path = require('path')
module.exports = {
  styleguideComponents: {
    Wrapper: path.join(__dirname, 'src/Provider.js')
  }
}
```

This will automatically apply your theme to your styled-components. When you open the style guide by running `npx styleguidist server`, you should see your components render as expected.

### Emotion

The usage is similar to [styled-components](#styled-components).

### Theme UI

The usage is similar to [Adding styled-components `ThemeProvider`](#adding-styled-components-themeprovider).

### Fela

Check out the [official example](https://github.com/rofrischmann/fela/tree/master/examples/example-with-styleguidist).

### CSS Modules with react-css-modules

You need to export two components: (1) unstyled React component as named export and (2) enhanced component as a default export:

```javascript
import React from 'react'
import CSSModules from 'react-css-modules'
import styles from './Button.css'

export function Button({ color, size, children }) {
  /* ... */
}

export default CSSModules(Button, styles)
```

This approach will also work with [react-css-themr](https://github.com/javivelasco/react-css-themr) and other similar libraries.

### Styletron

To use Styletron store with one component, require it from your example:

````jsx
// ```jsx inside Markdown
import Styletron from 'styletron-client'
import { StyletronProvider } from 'styletron-react'
;<StyletronProvider styletron={new Styletron()}>
  <App greeting="Choose your pizza!" />
</StyletronProvider>
````

To use Styletron in every component redefine the Wrapper component:

```javascript
// styleguide.config.js
const path = require('path')
module.exports = {
  styleguideComponents: {
    Wrapper: path.join(__dirname, 'src/styleguide/Wrapper')
  }
}
```

```jsx
// src/styleguide/Wrapper.js
import React, { Component } from 'react'
import Styletron from 'styletron-client'
import { StyletronProvider } from 'styletron-react'
export default class Wrapper extends Component {
  render() {
    return (
      <StyletronProvider styletron={new Styletron()}>
        {this.props.children}
      </StyletronProvider>
    )
  }
}
```

---

# React Styleguidist Documentation
# Source: https://raw.githubusercontent.com/styleguidist/react-styleguidist/master/docs/Webpack.md
# Path: docs/Webpack.md

# Configuring webpack

Styleguidist uses [webpack](https://webpack.js.org/) under the hood and it needs to know how to load your project’s files.

_Webpack is required to run Styleguidist but your project doesn’t have to use it._

> **Note:** See [cookbook](Cookbook.md) for more examples.

## Reusing your project’s webpack config

By default, Styleguidist will try to find `webpack.config.js` in your project’s root directory and use it.

If your webpack config is located somewhere else, you need to load it manually:

```javascript
module.exports = {
  webpackConfig: require('./configs/webpack.js')
}
```

Or, merge it with other options:

```javascript
module.exports = {
  webpackConfig: Object.assign({}, require('./configs/webpack.js'), {
    /* Custom config options */
  })
}
```

> **Caution:** `entry`, `externals`, `output`, `watch`, and `stats` options will be ignored. For production builds, `devtool` will also be ignored.

> **Caution:** `CommonsChunkPlugins`, `HtmlWebpackPlugin`, `MiniHtmlWebpackPlugin`, `UglifyJsPlugin`, `TerserPlugin`, `HotModuleReplacementPlugin` plugins will be ignored because Styleguidist already includes them or they may break Styleguidist.

> **Tip:** If your loaders don’t work with Styleguidist try to make `include` and `exclude` absolute paths.

> **Note:** Babelified webpack configs (like `webpack.config.babel.js`) are not supported. We recommend to convert your config to native Node — Node 6 supports [many ES6 features](http://node.green/).

> **Tip:** Use [webpack-merge](https://github.com/survivejs/webpack-merge) for easier config merging.

## Custom webpack config

Add a `webpackConfig` section to your `styleguide.config.js`:

```javascript
module.exports = {
  webpackConfig: {
    module: {
      rules: [
        // Babel loader will use your project’s babel.config.js
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          loader: 'babel-loader'
        },
        // Other loaders that are needed for your components
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader']
        }
      ]
    }
  }
}
```

> **Caution:** This option disables config load from `webpack.config.js`, see above how to load your config manually.

> **Caution:** `entry`, `externals`, `output`, `watch`, and `stats` options will be ignored. For production builds, `devtool` will also be ignored.

## Create React App

[Create React App](https://github.com/facebook/create-react-app) is supported out of the box, you don’t even need to create a style guide config if your components could be found using a default pattern: all files with `.js` or `.jsx` extensions inside `src/components` or `src/Components` folders.

## Next.js

The [Next.js](https://nextjs.org/) framework abstracts away webpack for you, but it still uses webpack under the hood.

After configuring your webpack loaders in `styleguide.config.js` you will need to also configure Babel. First install all the required Babel dependencies:

```bash
npm install --save-dev babel-loader @babel/core @babel/preset-react
```

Next, you'll want to configure Babel to use the appropriate presets, here is an example `.babelrc` file:

```json
{
  "presets": ["@babel/preset-react"]
}
```

That's it, notice that we don't need to install webpack as it's already included by Next.js.

## Non-webpack projects

To use features, not supported by browsers, like JSX, you’ll need to compile your code with Babel or another tool.

Let’s configure Styleguidist with Babel.

> **Info:** Babel is not required for Styleguidist or React, but likely you’ll want to use it to run your code.

First, install the Babel webpack loader:

```bash
npm install --save-dev babel-loader
```

> **Caution:** If your project doesn’t use webpack you still need to add webpack loaders for your files, otherwise Styleguidist won’t be able to load your code.

Then, add a `webpackConfig` section to your `styleguide.config.js`

```js
module.exports = {
  webpackConfig: {
    module: {
      rules: [
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          loader: 'babel-loader'
        }
      ]
    }
  }
}
```

or create a webpack config, `webpack.config.js`:

```js
module: {
  rules: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel-loader'
    }
  ]
}
```

If you don’t have Babel in your project, you need to install it with two presets — [env](https://babeljs.io/docs/en/babel-preset-env) and [react](https://babeljs.io/docs/en/babel-preset-react):

```bash
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react
```

And create a config file in your project’s root folder, `babel.config.js`:

```js
module.exports = {
  presets: [
    [
      '@babel/env',
      {
        modules: false,
        useBuiltIns: 'usage'
      }
    ],
    '@babel/react'
  ]
}
```

We also recommend to add a [browserslist](https://github.com/browserslist/browserslist) config to your `package.json` file like this:

```diff
+  "browserslist": [
+    ">1%",
+    "last 1 version",
+    "Firefox ESR",
+    "not dead"
+  ]
```

This will tell Babel (and some other tools) which browsers you support, so it won’t apply unnecessary transformations, making code smaller and faster.

## When nothing else works

In very rare cases, like using legacy or third-party libraries, you may need to change webpack options that Styleguidist doesn’t allow you to change via `webpackConfig` options. In this case, you can use [dangerouslyUpdateWebpackConfig](Configuration.md#dangerouslyupdatewebpackconfig) option.

> **Danger:** You may break Styleguidist using this option, use it at your own risk.

---

# React Styleguidist Documentation
# Source: https://raw.githubusercontent.com/styleguidist/react-styleguidist/master/Readme.md
# Path: Readme.md

**Isolated React component development environment with a living style guide**

[![npm](https://img.shields.io/npm/v/react-styleguidist.svg)](https://www.npmjs.com/package/react-styleguidist) [![CI status](https://github.com/styleguidist/react-styleguidist/workflows/CI/badge.svg)](https://github.com/styleguidist/react-styleguidist.git/actions) [![Codecov](https://codecov.io/gh/styleguidist/react-styleguidist/branch/master/graph/badge.svg)](https://codecov.io/gh/styleguidist/react-styleguidist) [![Join the chat at https://gitter.im/styleguidist/styleguidist](https://badges.gitter.im/styleguidist/styleguidist.svg)](https://gitter.im/styleguidist/styleguidist?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
<a href="https://discord.gg/QWsybqJDTA">![Discord](https://img.shields.io/discord/842832186914635806?logo=discord)</a> [![Open Source Helpers](https://www.codetriage.com/styleguidist/react-styleguidist/badges/users.svg)](https://www.codetriage.com/styleguidist/react-styleguidist)

</div>

React Styleguidist is a component development environment with hot reloaded dev server and a living style guide that you can share with your team. It lists component `propTypes` and shows live, editable usage examples based on Markdown files. Check out [**the demo style guide**](https://react-styleguidist.js.org/examples/basic/).

![React Styleguidist in action](https://user-images.githubusercontent.com/1703219/74945569-51c6ad00-543b-11ea-8351-f4d86860893a.gif)

[![Washing your code. A book on clean code for frontend developers](https://sapegin.me/images/washing-code-github.jpg)](https://sapegin.me/book/)

## Usage

## Advanced documentation

## Examples

- [Basic style guide](https://react-styleguidist.js.org/examples/basic/), [source](./examples/basic)
- Style guide with sections, [source](./examples/sections)
- Style guide with customized styles, [source](./examples/customised)
- Style guide with custom express endpoints, [source](./examples/express)
- Create React App integration, [source](./examples/cra)

## Showcase

Real projects using React Styleguidist:

- [Rumble Charts](https://rumble-charts.github.io/rumble-charts/)
- [better-react-spinkit](http://better-react-spinkit.benjamintatum.com/)
- [Semantic UI Components for React](https://hallister.github.io/semantic-react/)
- [Dialog Components](https://dialogs.github.io/dialog-web-components/)
- [Bulma Components](https://bokuweb.github.io/re-bulma/)
- [Yammer Components](https://microsoft.github.io/YamUI/)
- [More projects…](https://github.com/styleguidist/react-styleguidist/issues/127)

## Integration with other tools

- Create React App — supported out of the box, see the [Getting Started](https://react-styleguidist.js.org/docs/getting-started) guide
- Vue, see [Vue Styleguidist](https://github.com/vue-styleguidist/vue-styleguidist)

## Third-party tools

- [snapguidist](https://github.com/styleguidist/snapguidist): snapshot testing for React Styleguidist
- [react-styleguidist-visual](https://github.com/unindented/react-styleguidist-visual): automated visual testing for React Styleguidist, using Puppeteer and pixelmatch
- [styleguidist-scrapper](https://github.com/livechat/styleguidist-scrapper): scrapper script for documentation generated by React Styleguidist

## Resources

- [The Dream of Styleguide Driven Development](https://www.youtube.com/watch?v=JjXnmhNW8Cs) talk by [Sara Vieira](https://github.com/saravieira)
- [Building React Components Library](https://skillsmatter.com/skillscasts/8140-building-react-components-library) talk by [Robert Haritonov](https://github.com/operatino)
- [Say Cheese: Snapshots and Visual Testing](https://developers.livechatinc.com/blog/snapshots-visual-testing/)
- [Interview with Artem Sapegin](https://survivejs.com/blog/styleguidist-interview/) about React Styleguidist.

## Change log

The change log can be found on the [Releases page](https://github.com/styleguidist/react-styleguidist/releases).

## Contributing

Everyone is welcome to contribute. Please take a moment to read the [contributing guidelines](.github/Contributing.md) and the [developer guide](https://react-styleguidist.js.org/docs/development).

## Sponsoring

[Become a sponsor](https://opencollective.com/styleguidist#sponsor) and get your logo on our Readme on GitHub with a link to your site.

<a href="https://opencollective.com/styleguidist/sponsor/0/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/0/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/sponsor/1/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/1/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/sponsor/2/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/2/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/sponsor/3/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/3/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/sponsor/4/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/4/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/sponsor/5/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/5/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/sponsor/6/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/6/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/sponsor/7/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/7/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/sponsor/8/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/8/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/sponsor/9/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/9/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/sponsor/10/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/10/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/sponsor/11/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/11/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/sponsor/12/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/12/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/sponsor/13/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/13/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/sponsor/14/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/14/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/sponsor/15/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/15/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/sponsor/16/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/16/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/sponsor/17/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/17/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/sponsor/18/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/18/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/sponsor/19/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/19/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/sponsor/20/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/20/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/sponsor/21/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/21/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/sponsor/22/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/22/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/sponsor/23/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/23/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/sponsor/24/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/24/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/sponsor/25/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/25/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/sponsor/26/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/26/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/sponsor/27/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/27/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/sponsor/28/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/28/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/sponsor/29/website" target="_blank"><img src="https://opencollective.com/styleguidist/sponsor/29/avatar.svg"></a>

[Become a backer](https://opencollective.com/styleguidist#backer) get your image on our Readme on GitHub with a link to your site.

<a href="https://opencollective.com/styleguidist/backer/0/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/0/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/backer/1/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/1/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/backer/2/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/2/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/backer/3/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/3/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/backer/4/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/4/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/backer/5/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/5/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/backer/6/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/6/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/backer/7/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/7/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/backer/8/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/8/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/backer/9/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/9/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/backer/10/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/10/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/backer/11/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/11/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/backer/12/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/12/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/backer/13/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/13/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/backer/14/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/14/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/backer/15/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/15/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/backer/16/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/16/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/backer/17/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/17/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/backer/18/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/18/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/backer/19/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/19/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/backer/20/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/20/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/backer/21/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/21/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/backer/22/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/22/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/backer/23/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/23/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/backer/24/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/24/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/backer/25/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/25/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/backer/26/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/26/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/backer/27/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/27/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/backer/28/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/28/avatar.svg"></a>
<a href="https://opencollective.com/styleguidist/backer/29/website" target="_blank"><img src="https://opencollective.com/styleguidist/backer/29/avatar.svg"></a>

## Authors and license

[Artem Sapegin](http://sapegin.me) and [contributors](https://github.com/styleguidist/react-styleguidist/graphs/contributors).

Logo by [Sara Vieira](https://github.com/SaraVieira) and [Andrey Okonetchnikov](https://github.com/okonet).

MIT License, see the included [License.md](License.md) file.