reactjs - 故事书找不到基于 chakra-ui 的组件

Question

我正在尝试故事书和脉轮 ui。下面是我如何构建我的文件夹，

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app"
  ]
}

这是我的故事书配置。不幸的是我收到一个错误，好像故事书没有找到我的组件。

有人可以帮我理解有什么问题吗？为什么故事书找不到我的组件？

- - - - - -更新 - - - - - -

这是我试图添加的故事

import React from 'react';
import {
  Menu,
  MenuButton,
} from '@chakra-ui/core';

export function MenuComp() {
  return (
    <Menu>
      <MenuButton>Games</MenuButton>
    </Menu>
  );
}

MenuComp.storyName = 'test';

Answer 1

我从一个更简单的组件开始，并严格按照教程

我将在这里写一个小指南，希望能简化读者的生活。

1.我在路径“src/components/CustomButton”中写了一个简单的组件

import React, { FC } from 'react';
import { Button } from '@chakra-ui/core';

interface ButtonProps {
    size: string | any;
    variantColor: string;
}

const CustomButton: FC<ButtonProps> = ({ size, variantColor }) => (
  <Button variantColor={variantColor} size={size}>
    Button
  </Button>
);

export default CustomButton;

2.我在“src/stories/CustomButton.stories.tsx”中添加了相关故事组件

import React from 'react';
import CustomButton from 'components/CustomButton/index';

export default {
  component: CustomButton,
  title: 'CustomButton',
};

const Template = (args:any) => <CustomButton {...args} />;

export const Default: any = Template.bind({});
Default.args = {
  size: 'md',
  variantColor: 'green',
};

3.此时配置文件 preview.js 非常重要，您将找到文件夹“.storybook”，感谢这个提交chakraUiCommit我想出了如何在每个故事书组件中包含主题提供程序

import React from 'react'
import {addDecorator} from '@storybook/react'
import {ThemeProvider, CSSReset} from '@chakra-ui/core'

addDecorator((storyFn) => (
  <ThemeProvider>
    <CSSReset />
    {storyFn()}
  </ThemeProvider>
))

4. 好吧，此时我解决了我的问题，这是我的最终结果