问题描述
我正在尝试故事书和脉轮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';
解决方法
我从一个简单的组件开始,严格遵循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>
))