Comment ajouter des exemples d'un composant avec des dépendances dans react-styleguidist

Question

Je voudrais documenter un ButtonGroup rendu des composants Button en utilisant `react-styleguidist'.

J'ai une configuration webpack styleguidist qui ressemble à ceci :

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

Je sais qu'il n'est pas nécessaire de définir les chargeurs et les plugins les plus utilisés, car Styleguidist les ajoute déjà en interne.

A l'intérieur de la src/components/ la structure du répertoire pour permettre styleguidist pour récupérer mes composants ressemble un peu à ça :

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

Cas I

Dans mon Readme.md au sein de la ButtonGroup répertoire :

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

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

Quand je fais ça, mon styleguide a une erreur qui dit :

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

Cas II

J'ai essayé d'inclure l'information dans un fichier de type example.js en ButtonGroup comme illustré ci-dessus, le fichier contient :

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>
  )
}

Maintenant, le composant d'exemple est importé dans le Readme.md :

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

ce qui entraîne l'erreur :

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

Answer 1

Je sais que je n'ai pas besoin de définir les chargeurs et les plugins les plus utilisés, car Styleguidist les ajoute déjà en interne.

Ce n'est pas vrai. Styleguidist n'ajoute aucun chargeur à votre code.

Erreur de syntaxe : Les éléments JSX adjacents doivent être entourés d'une balise d'entourage (5:2)

Il est probable que vous ayez besoin d'un point-virgule après ; . Et probablement vous n'avez pas besoin d'exiger une Button composant. Cela dépend de la configuration de votre guide de style et si vous voulez montrer votre Button dans un guide de style.

Si vous souhaitez présenter les deux composants dans un guide de style, faites pointer Styleguidist vers tous vos composants : components: 'src/components/**/index.js' .

Si vous souhaitez masquer certains composants d'un guide de style mais pouvoir les utiliser dans des exemples, activez l'option skipComponentsWithoutExample option une utilisation require pour charger vos composants :

// 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;

Cas II

Je ne suis pas sûr de ce que vous essayez de faire ici.