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

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

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

•
└── 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, но я думал о решении, специфичном для одного «главного» файла.

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


reactjs javascript babeljs babel-loader storybook
person Samuel Hulla    schedule 13.01.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете попробовать экспортировать каждый вариант истории как именованный экспорт из собственного файла истории, а затем импортировать каждый из них в 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
person Jonny    schedule 14.01.2020