我想抽象Storybook的CSF默认导出对象,如下所示:
MetaFunction。js
export const getMeta = (title, component) => ({
title: `Example/${title}`,
component: component,
tags: ['autodocs'],
argTypes: {
backgroundColor: { control: 'color' },
},
});
Button.stories.js:
import { Button } from './Button';
import { getMeta } from './metaFunction';
// This works 👇
// const meta = {
// title: 'Example/Button',
// component: Button,
// tags: ['autodocs'],
// argTypes: {
// backgroundColor: { control: 'color' },
// },
// };
// This doesn't 👇
const meta = getMeta('Button', Button);
export default meta;
export const Primary = {
args: {
primary: true,
label: 'Button',
},
};
export const Secondary = {
args: {
label: 'Button',
},
};
export const Large = {
args: {
size: 'large',
label: 'Button',
},
};
export const Small = {
args: {
size: 'small',
label: 'Button',
},
};
问题是,当我使用getMeta
函数时,Storybook崩溃并显示错误“CSF:缺少默认导出”。看起来我必须声明一个对象,根本不能抽象它,甚至不能在初始 meta对象中使用扩展对象。
有没有办法用函数抽象CSF默认导出对象?
复制:
转到this repo and the function_debug branch,运行npm install
,然后运行npm run storybook
。
1条答案
按热度按时间gojuced71#
你能做到的