Addon-knobs: Add object[] support for select

[matthewliuswims]

Issue: #810 (was closed long ago). I may be misinterpreting the post, but when OP said he desired his options to look like below

I thought that was for (or included) the select knob. However, I was surprised to see that the select knob still could NOT take options as an array of objects (only an array of strings). Thus....

What I did

1. I made it so that the select knob can take in an array OF objects.
2. modified README to document this change

How to test

in official-storybook/stories/addon-knobs/with-knobs.stories.js I added an example for testing purposes and documentation.

[vercel]

This pull request is being automatically deployed with ZEIT Now (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://zeit.co/storybook/monorepo/f59tdv1gj
🌍 Preview: https://monorepo-git-fork-matthewliuswims-addon-knobs-array-of-objects.storybook.now.sh

[matthewliuswims]

@shilman I was wondering why there is a do not merge label. I'm happy to make changes to fix it.

[shilman]

@matthewliuswims Sorry I forgot to explain. We're in the final stages of 5.2 release, so we're not merging any features until that's out (Sep 16 target). Making this explicit with the label since we're a distributed team and it's hard to coordinate.

[matthewliuswims]

@shilman understood. Thank you :)

[matthewliuswims]

@shilman congrats on the 5.2 release! now that it's out, would it be possible to get this PR reviewed + remove the do not merge tag?

edit: I see there was a merge conflict, let me resolve it real quick first
edit2: build pipeline is now failing :s I don't really understand the errors, going to post in the discord!

[duhseekoh]

Ah, right good point, the knob functions return values can be reached into / manipulated before using that data as a prop. 👍

…

On Thu, Dec 5, 2019 at 10:28 PM matthewliuswims ***@***.***> wrote: ***@***.**** commented on this pull request. ------------------------------ In addons/knobs/src/components/types/Select.tsx <#7957 (comment)> : > - const selectedKey = Object.keys(entries).find(k => { - if (Array.isArray(knob.value)) { - return JSON.stringify(entries[k]) === JSON.stringify(knob.value); + const callbackReduceArrayOptions = (acc: any, option: any, i: number) => { + if (typeof option !== 'object') return { ...acc, [option]: option }; + const label = option.label || option.key || i; + return { ...acc, [label]: option }; + }; Does this mean that my objects need to have a label or key attribute to have a display value? 1. there's a fallback const label = option.label || option.key || i; to the index (i.e. i). So it'll always work (label might just not look very nice) if a user chooses to not pass a label or key. 2. Also, the label or key would just need to be passed in on the storybook level (react logic does NOT need to have a label). In fact: you show a great example of how to do this in your code snippet! // using your `arrayOfObjects` example const dogInfo = select(<label>, arrayOfObjects).data // notice we use.data` // pass dogInfo to react object. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#7957?email_source=notifications&email_token=AAHDOBAKRX227N235U2CZNDQXHIHBA5CNFSM4ISZUY5KYY3PNVWWK3TUL52HS4DFWFIHK3DMKJSXC5LFON2FEZLWNFSXPKTDN5WW2ZLOORPWSZGOCOGMIWQ#discussion_r354661699>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAHDOBD6S5GD6PGM5V4AJK3QXHIHBANCNFSM4ISZUY5A> .