Реагируйте: Как поместить Storybook .stories в каталог каждого компонента? - PullRequest
Новая
       11

Реагируйте: Как поместить Storybook .stories в каталог каждого компонента?

0 голосов
/ 17 апреля 2020

В настоящее время все мои .stories файлы хранятся в каталоге stories. Поскольку я добавляю больше компонентов, это будет расти.

Вместо этого я хочу добавить файл .stories каждого компонента на уровне компонента в соответствии с документацией на сайте сборника рассказов здесь: https://storybook.js.org/docs/basics/writing-stories/#loading -stories-динамически

Дело в том, что я не знаю, как на самом деле это сделать.

Я установил следующий простой компонент (все файлы в одном каталоге):

PageTitle.tsx 

import React from 'react'
import { Typography } from '@material-ui/core';
import { makeStyles } from "@material-ui/styles";

const useStyles = makeStyles(() => ({
  typographyStyles: {
    flex: 1
  }
}));

interface PageTitleProps {
  title: string;
}

const PageTitle = ({ title }: PageTitleProps) => {
  const classes = useStyles()
  return (
    <Typography className={classes.typographyStyles} variant="h1" component="h2">
      {title}
    </Typography>
  )
};

export default PageTitle;

index.tsx 

import PageTitle from './PageTitle';
export default PageTitle;

index.stories.tsx 

import React from 'react';
import { storiesOf } from '@storybook/react'
import FormPageTitle from './index';

export default {
  title: 'Titles|PageTitle',
  component: PageTitle,
};

export const withText = () => {
  return <PageTitle title="Hello World" />;
};

В моем Каталог .storybook У меня есть файл main.js, который просто содержит: 

module.exports = {
  stories: ['../src/**/*.stories.tsx'],
  addons: [
    '@storybook/preset-create-react-app',
    '@storybook/addon-actions',
    '@storybook/addon-links',
    {
      name: '@storybook/addon-docs',
      options: {
        configureJSX: true,
      },
    },
  ],
};

Но я просто получаю сообщение об ошибке:

Модуль не найден: Ошибка: Не удается разрешить «./index» в «/ myApp / src / Stories»

Это происходит независимо от того, как я называю файл .stories.

Кто-нибудь знает, как правильно установить этот параметр? до

...