反应:如何将Storybook .stories放在每个组件的目录中？

Question

目前，我的所有.stories文件都保存在stories目录中。当我添加更多的组件时，这种情况会增加。

相反，我想在组件级别上添加每个组件的.stories文件，如这里的Storybook站点上的文档：https://storybook.js.org/docs/basics/writing-stories/#loading-stories-dynamically

问题是我不知道该怎么做。

我已经设置了以下简单组件(所有文件都位于同一个目录中)：

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,
      },
    },
  ],
};

但我只知道一个错误：

未找到

模块:错误:无法解析/myApp/src/中的“./index”

无论我称之为.stories文件，都会发生这种情况。

有谁知道设置这个的正确方法吗？

Answer 1

在config.js目录中创建一个.storybook

使用

import React from 'react';
import { configure, addDecorator } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import styled from 'styled-components';

const Wrapper = styled.div`
  display: flex;
  flex: 1;
  height: 100vh;
  align-items: center;
  justify-content: center;
`;

const Decorator = (storyFn) => <Wrapper>{storyFn()}</Wrapper>;

addDecorator(Decorator);

global.___loader = {
  enqueue: () => {},
  hovering: () => {},
};

global.__PATH_PREFIX__ = '';
window.___navigate = (pathname) => {
  action('NavigateTo:')(pathname);
};

const req = require.context('../src/components/', true, /\.stories\.js$/);

function loadStories() {
  req.keys().forEach((filename) => req(filename));
}

configure(loadStories, module);