[英]Show all variations of a component on a single page in React Storybook but still have Knobs?
I have a button component that can be of different types eg primary
, secondary
, etc:我有一个可以是不同类型的按钮组件,例如
primary
, secondary
等:
export const buttonTypes = [
'primary',
'secondary',
'tertiary',
'positive',
'negative',
]
const Button = ({ text, type }) => {
return(
<button className={type}>{text}</button>
)
}
Button.propTypes = {
text: PropTypes.string,
type: PropTypes.oneOf(buttonTypes),
}
In my Storybook file I'm mapping through the options.在我的 Storybook 文件中,我正在映射选项。 This means you can see all the variants on a single page and if another string was added to the
buttonTypes
array it would automatically be added to the style guide:这意味着您可以在单个页面上查看所有变体,并且如果将另一个字符串添加到
buttonTypes
数组,它将自动添加到样式指南中:
import ButtonComponent, { buttonTypes } from './Button';
const Button = () => {
return(
<div>
{
buttonTypes.map(type=>(
<ButtonComponent key={type} text={type} type={type} />
))
}
</div>
)
}
export default {
title: 'Components',
component: Button,
};
The problem is that this doens't work with with many of the add-ons eg knobs.问题是这不适用于许多附加组件,例如旋钮。 For knobs to work you need
Button
to be the actual component, not a wrapper as I did above.要使旋钮起作用,您需要
Button
作为实际组件,而不是像我上面那样的包装器。
import ButtonComponent, { buttonTypes } from './Button';
const Button = () => {
return (
<ButtonComponent
type={select('type', buttonTypes, buttonTypes.primary)}
text="Button"
/>
);
};
Is there a way to use knobs and show all the variations on a single page?有没有办法使用旋钮并在单个页面上显示所有变化? Ideally without having to create each component manually as this is more work and then won't automatically update if a new string is added to
buttonTypes
.理想情况下,不必手动创建每个组件,因为这是更多的工作,如果将新字符串添加到
buttonTypes
则不会自动更新。
Use the grouping feature of knobs, that way each instance of your component will get its own knob instance instead of all the knob instances being shared between all of the component instances.使用旋钮的分组功能,这样您的组件的每个实例都将获得自己的旋钮实例,而不是在所有组件实例之间共享所有旋钮实例。 You can even mix grouped knobs with non-grouped nobs if you want certain things to be shared and other not to be.
如果您希望共享某些内容而其他内容不共享,您甚至可以将分组旋钮与非分组旋钮混合。
In the following example, I have a <Button/>
story where each instance has its own copy of the type
and disabled
properties, but the text
is shared between them all.在下面的示例中,我有一个
<Button/>
故事,其中每个实例都有自己的type
和disabled
属性副本,但text
在它们之间共享。
Each button type gets its own panel where you can set its type
and disabled
.每个按钮类型都有自己的面板,您可以在其中设置其
type
和disabled
。 The "Other" group contains any knobs that didn't have their group set (such as text
). “其他”组包含没有设置组的任何旋钮(例如
text
)。
src/Button/Button.component.jsx src/Button/Button.component.jsx
import * as React from "react";
import "./Button.style.css";
export const Button = ({
text,
type,
disabled,
onClick
}) => (
<button
className={`button button--${type} ${disabled ? "button--disabled" : ""}`}
disabled={disabled}
onClick={onClick}
children={text}
/>
);
src/Button/Button.stories.jsx src/Button/Button.stories.jsx
import * as React from "react";
import {withKnobs, text, boolean, select} from "@storybook/addon-knobs";
import {action} from "@storybook/addon-actions";
import {Button, buttonTypes} from "./";
export default {
title: "Button",
component: Button,
decorators: [withKnobs]
};
export const ButtonStory = () => {
const buttontext = text("Text", "Click Me");
return (
<div>
{buttonTypes.map(buttonType => (
<div key={buttonType}>
<Button
type={select("Type", buttonTypes, buttonType, buttonType)}
disabled={boolean("Disabled", false, buttonType)}
onClick={action(`${buttonType} clicked`)}
text={buttontext}
/>
</div>
))}
</div>
);
};
ButtonStory.story = {
name: "All"
}
src/Button/Button.types.js src/Button/Button.types.js
export const buttonTypes = [
"primary",
"secondary",
"tertiary"
];
src/Button/Button.style.css src/Button/Button.style.css
.button {
padding: 0.5em;
font-size: 1.25em;
border-radius: 10px;
border-width: 2px;
border-style: solid;
border-color: black;
}
.button--primary {
background-color: rgb(132, 198, 106);
color: black;
border-color: black;
}
.button--secondary {
background-color: rgb(194, 194, 194);
color: black;
border-color: black;
}
.button--tertiary {
background-color: transparent;
color: inherit;
border-color: transparent;
}
.button--disabled {
background-color: rgb(194, 194, 194);
color: rgb(105, 102, 102);
border-color: rgb(105, 102, 102);
}
src/Button/index.js src/按钮/index.js
export {Button} from "./Button.component";
export {buttonTypes} from "./Button.types";
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.