故事书找不到基于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

我从一个简单的组件开始，严格遵循tutorial

我会在这里写一些指南，希望可以简化读者的生活。

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

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