reactjs - 在每个组件的目录中 react : How to place Storybook . 故事？

Question

目前我所有的 .stories 文件都保存在 stories 目录中。随着我添加更多组件，它会增长。

相反，我想根据 Storybook 站点上的文档在组件级别添加每个组件的 .stories 文件: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,
      },
    },
  ],
};

但我只是得到错误:

Module not found: Error: Can't resolve './index' in '/myApp/src/stories'

无论我如何称呼 .stories 文件，都会发生这种情况。

谁知道正确的设置方法？

Answer 1

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

与

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