Есть ли способ иметь «главный файл» для сборника рассказов? - PullRequest
Новая
       20

Есть ли способ иметь «главный файл» для сборника рассказов?

0 голосов
/ 13 января 2020

Мне было интересно, есть ли способ иметь один «главный» файл для сборника рассказов?

Вот как я представляю иерархию файлов: 

•
└── stories
    └── button
        ├── Button.js
        └── Button.stories.js
    └── SearchBox
        └──  SearchBox.js
        └──  SearchBox.story.js
    index.stories.js

Где index.stories.js будет содержать импорт всех других историй.

Button.stories.js

import React from 'react''

export const withText = () => <Button>Hello Button</Button>;

export const withEmoji = () => (
  <Button>
    <span role="img" aria-label="so cool">
      ? ? ? ?
    </span>
  </Button>
);

export default { title: 'Button' };

Теперь это будет работать, если Я вставил код в index.stories.js, но я просто хочу импортировать отдельные истории в основной файл, и я не могу понять, как. Я попытался выполнить следующее безрезультатно:

index.stories.js

import React from 'react'
import Button from './button/Button.stories'

export const Main = <Button/>
export default = { title: 'Main-Testing' }

Это, однако, не работает и просто приводит к babel-loader ошибкам синтаксического анализа. Также кажется неправильным импортировать React.Component, когда я должен импортировать историю здесь.

PS: я знаю, что мог бы просто импортировать все файлы истории отдельно в preview.js или main.js, но я думал о решении, имеющем конкретный «главный» файл.

Итак, как этого достичь?

1 Ответ

0 голосов
/ 14 января 2020

Вы можете попробовать экспортировать каждый вариант истории в виде именованного экспорта из его собственного файла истории, а затем импортировать каждый из них в index.stories. js и экспортировать их все вместе снова.

Например:

index.stories. js: 

import React from 'react';
import { First, Second } from './components/component.stories.js';
// First and Second are named exports from their own stories

export default {
  title: 'Show All Stories Here'
}

const AllComponents = () => <div><First /><Second /></div>

export  {First, Second, AllComponents}; 
// export all components individually, and then export them all together

Ваша итоговая структура в пользовательском интерфейсе сборника рассказов будет выглядеть следующим образом: 

- Show All Stories Here
   - First // First would be displayed here
   - Second // Second would be displayed here
   - Allstuff // both First and Second would be displayed here
...