#StackBounty: #reactjs #storybook Show all variations of a component on a single page in React Storybook but still have Knobs?

Bounty: 150

I have a button component that can be of different types eg primary, secondary, etc:

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. 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:

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.

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.


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.