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

【问题标题】：storybook doesn't find components based on chakra-ui故事书找不到基于 chakra-ui 的组件
【发布时间】：2020-12-31 01:43:39
【问题描述】：

我正在尝试故事书和脉轮 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';

【问题讨论】：

你在Menu.stories.tsx里面写过什么故事吗？

标签： reactjs configuration storybook chakra

【解决方案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>
))

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

【讨论】：