storybook 找不到基于 chakra-ui 的组件

Question

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

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 { 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 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. 此时配置您的文件非常重要

   ./storybook/preview.js

   。感谢这个提交chakra-ui提交我想出了如何将主题提供者包含在每个故事书组件中

   import {addDecorator} from '@storybook/react'
   import {ThemeProvider, CSSReset} from '@chakra-ui/core'
   
   addDecorator((storyFn) => (
     <ThemeProvider>
       <CSSReset />
       {storyFn()}
     </ThemeProvider>
   ))
   
   

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