Storybook: Add support for array of objects

[shilman]

Issue by royair
_Wednesday Mar 29, 2017 at 18:09 GMT_
_Originally opened as https://github.com/storybooks/storybook-addon-knobs/issues/94_

---

[shilman]

Comment by UsulPro
_Wednesday Mar 29, 2017 at 18:19 GMT_

---

@royair isn't object what are you looking for?

[shilman]

Comment by royair
_Wednesday Mar 29, 2017 at 18:27 GMT_

---

my options param looks like this:

var OPTIONS = [
  {
    eventKey: "1",
    label: "Banana",
    subtext: "they are tasty"
  },
  {
    eventKey: "2",
    label: "Apple",
    subtext: "they are healthy"
  },
  {
    eventKey: "3",
    label: "Peach",
    subtext: "they are beautiful"
  }
];

[mcmunder]

Is anyone working on this? Seems like such an obvious feature to support?!

[ndelangen]

Related: #799 #1296 #805

I agree this should be addressed, it would make knobs a lot more valuable!

Would you be interested in making a PR @royair @mcmunder ?

[mcmunder]

I'll give it a try!

[ndelangen]

AWESOME, let me know if there's something I can help with 👍

[byrekt]

I think you can actually just use object to handle an array of objects:
e.g.
const footnotes = object('Footnotes', [{symbol: 1, content: 'sample'}]);

seems to work for me

[ndelangen]

@byrekt I can imagine that's good for lots of cases!

[tibbus]

You can use it as @byrekt suggest, but React will complain about the types :
**Warning**: Failed prop type: Invalid prop **knob.value** of type **array** supplied to **ObjectType**, expected **object**

A workaround is to create a wrapper component:

const optionsWrapper = {
  options: [
    {
      eventKey: '1',
      label: 'Banana',
      subtext: 'they are tasty'
    },
    {
      eventKey: '2',
      label: 'Apple',
      subtext: 'they are healthy'
    },
    {
      eventKey: '3',
      label: 'Peach',
      subtext: 'they are beautiful'
    }
  ]
};

class MyComponentWrapper extends React.Component {
  render() {
    return <Header {...{ ...this.props, options: this.props.optionsWrapper.options }} />;
  }
}

storiesOf('MyComponent', module).add('default', () => {
  return <MyComponentWrapper options={object('options', optionsWrapper)} />
});

[Hypnosphi]

Yeah, I think we should update the propType

[vipulbhavsar94]

@mcmunder Any updates on this, kind of critical thing for me.

[tibbus]

@vipulbhavsar94 Should not be critical, you can use my workaround until is fixed.

[ilyaskhametov]

I found another way to make array of objects, don't know if it's a right way. This is an example of story for Socials component, which takes an array of objects with information about each social (name, href) and displays it as list:

const socials = [
    {
        name: 'twitter',
        href: 'https://twitter.com/',
    },
    {
        name: 'facebook',
        href: 'https://facebook.com/',
    }
]

const props = {
    socials: [
        object('Twitter', socials[0]),
        object('Facebook', socials[1])
    ]
}

return <Socials {...props} />

[Hypnosphi]

@illyon nice solution! Works good when you have a fixed set of expected objects

[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 60 days. Thanks!

[Hypnosphi]

Fixed in 3.2.15

[shilman]

Great Caesar's ghost!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.0-alpha.45 containing PR #7957 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

[HoplaGeiss]

Naive question - Is this fix also implemented for @storybook/angular?

[shilman]

@HoplaGeiss yeah, it's a knob thing, so should be framework-independent