How to add examples a component with dependencies in react-styleguidist

Question

I would like to document a ButtonGroup component rendering Button components within it using `react-styleguidist'.

I have a styleguidist webpack config which looks like this:

module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: [
          {
            loader: 'babel-loader'
          }
        ],
        exclude: /node_modules/
      }
    ]
  },
  devtool: 'cheap-module-eval-source-map'
}

I know that I dont need to define commonly used loaders and plugins because styleguidist already adds them internally

Inside the src/components/, the directory structure for allowing styleguidist to pick up my components looks a little like this:

 Button
   index.js
   Readme.md
   ButtonGroup
     index.js
     example.js (created for Case II after Case I failed)
     Readme.md 

Case I

In my Readme.md within the ButtonGroup directory:

```jsx
const Button = require('../index')

<ButtonGroup>
  <Button type='primary' size='lg'>Hello, World</Button>
  <Button type='primary' size='lg'>Hello, Doctor</Button>
</ButtonGroup>
```

When I do that, my styleguide has an error that says:

SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag (5:2)

Case II

I have tried enclosing the information in an example.js inside ButtonGroup directory as illustrated above, the file contains:

import React from 'react'

const ButtonGroup = require('./index')
const Button = require('../index')

export default function ButtonGroupExample (props) {
  return (
    <ButtonGroup>
      <Button>Hello, World</Button>
      <Button>Hello, Doctor</Button>
    </ButtonGroup>
  )
}

Now the example component is imported into the Readme.md:

```jsx
const Example = require('./example')
 (<Example />)
```

which throws the error:

TypeError: require(...) is not a function

Answer 1

I know that I dont need to define commonly used loaders and plugins because styleguidist already adds them internally

This is not true. Styleguidist doesn’t add any loaders to your code.

SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag (5:2)

Most likely you need a semicolon after ;. And probably you don’t need to require a Button component. It depends on your style guide config and whether you want to show your Button component in a style guide.

If you want to show both components in a style guide, point Styleguidist to all you components: components: 'src/components/**/index.js'.

If you want to hide some components from a style guide but be able to use them in examples, enable skipComponentsWithoutExample option an use require option to load your components:

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

// styleguide/setup.js
import Buttom from './src/components/Button';
global.Button = Button;

Case II

I’m not sure what you’re trying to do here.