Storybook: Calling a component inside select knob

[themanupstairs]

Hey guys,
I'm trying to create a component (Button) which uses one of its properties to call other component (icon).

Ex:
Component
import { arrow, star } from './icons'; <Button icon={arrow} />

Story
storiesOf('Components', module) .add('Button', () => ( <Button icon={ select(label, options, default) } </Button> ))

I wanted to create a story with a select knob in order to change the component. Any ideas on how to do it?

[UsulPro]

HI @josefarfetch

I'm afraid it's impossible to pass React Component by Knobs Addon!
It's because all data sent from stories (which executes in iframe) to UI panel should be serialized/deserialized.

But you can send a type of icon:

<Button iconType="arrow1" />

And then use Knobs to select this type

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. We do try to do some housekeeping every once in a while so inactive issues will get closed after 90 days. Thanks!

[Hypnosphi]

You can do this:

import { arrow, star } from './icons'

const icons = { arrow, star }

storiesOf('Components', module)
  .add('Button', () => {
    const iconName = select(label, Object.keys(icons), 'arrow')
    return <Button icon={icons[iconName]} />))
  }

[ColeTownsend]

Seems like you can do this know

import StackedBarChart from 'shared/components/Chart/StackedBarChart';
import HorizontalBarChart from 'shared/components/Chart/HorizontalBarChart';
import HorizontalBarChartData from './fixtures/horizontalChartData';
import StackedChartData from './fixtures/stackedChartData';

...

.add('Content with Chart', () => {
    const title = text('Title', 'Title Ipsum');

    const COMPONENT_CHOICES = {
      BarChart: {
        type: HorizontalBarChart,
        props: {
          ...HorizontalBarChartData
        }
      },
      StackedBarChart: {
        type: StackedBarChart,
        props: {
          data: StackedChartData
        }
      }
    };

    const componentName = select('Child component', Object.keys(COMPONENT_CHOICES), 'BarChart');
    const description = text('Description', 'Lorem ipsum dolor sit amet');

    return (
      <Content title={title} description={description}>
      {React.createElement(
        COMPONENT_CHOICES[componentName].type,
        COMPONENT_CHOICES[componentName].props
      )}
      </Content>
    );

[Hypnosphi]

@ColeTownsend this will work as well:

<...>
const COMPONENT_CHOICES = {
  BarChart: <HorizontalBarChart {...HorizontalBarChartData} />,
  StackedBarChart: <StackedBarChart {...StackedChartData} />
};
<...>
return (
  <Content title={title} description={description}>
  {COMPONENT_CHOICES[componentName]}
  </Content>
);

[maurice-mf]

Just to add a flavour or a different approach.
This worked for me specifically;

`<...>
const animalOptions = {
Monkey: ,
Elephant:
};

interface IImageWrapper {
image: any;
}

const ImageWrapper = ({ image }: IImageWrapper) => {
return {animalOptions[image]};
};

export const AnimalTypeWorking = () => {
return ;
};
<...>`

Verbose Gist here: https://gist.github.com/mephysto/ab2731d90eb113dfefa5dd9815022242