[addon-knobs] Issue with select options type, does not support array of objects

[jasongerbes]

Bug or support request summary

The select knob's type is incorrect, as it does not support using an array of option objects, as per the example in the readme file.

const label = 'Dogs';
const arrayOfObjects = [
  {
    label: 'Sparky',
    dogParent: 'Matthew',
    location: 'Austin',
  },
  {
    label: 'Juniper',
    dogParent: 'Joshua',
    location: 'Austin',
  },
];
const defaultValue = arrayOfObjects[0];
const groupId = 'GROUP-ID3';
const value = select(label, options, defaultValue, groupId);

Side note: the example needs to be fixed
options needs to be changed to arrayOfObjects.

Typescript complains with the following error:

Argument of type '{ label: string; dogParent: string; location: string; }[]' is not assignable to parameter of type 'SelectTypeOptionsProp<SelectTypeKnobValue>'.
  Type '{ label: string; dogParent: string; location: string; }[]' is not assignable to type 'ReactText[]'.
    Type '{ label: string; dogParent: string; location: string; }' is not assignable to type 'ReactText'.
      Type '{ label: string; dogParent: string; location: string; }' is not assignable to type 'number'.ts(2345)

Steps to reproduce

Try the above example.

Please specify which version of Storybook and optionally any affected addons that you're running

• @storybook/react 5.3.10 (as 5.3.11 has an open issue)
• @storybook/addon-knob 5.3.11

Affected platforms

• VSCode with Typescript v3.7.3

[stale]

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. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[jasongerbes]

@shilman do you think this issue will be resolved?

[shilman]

@jasongerbes it will if somebody from the community picks it up

[stale]

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. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[gausie]

This is still an issue, can we keep it open?

[stale]

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. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[shilman]

We've just released zero-config typescript support in 6.0-beta. Please upgrade and test it!

• Release 6.0.0-beta.12+
• Migration instructions
• Updated docs

Thanks for your help and support getting this stable for release!

[rohan-paul]

Facing the same problem after upgrading to 6.0-beta.

So I first upgraded to 6.0.0-beta.13 and then followed this part of the doc for main.js configuration and now my .storybook/main.js looks like below, but the same problem persists.

module.exports = {
  stories: ["../stories/**/*.stories.[tj]s"],
  addons: [
    "@storybook/addon-knobs/register",   
  ],
  typescript: {
    check: false,
    checkOptions: {}
  }
};

And was trying to implement a simple Angular storybook component with [ng-select](https://ng-select.github.io/ng-select#/data-sources) using storybookjs/addons/knobs

So here's the prop data I am passing

const countries = [
  { id: 1, countryId: "L", name: "Lithuania" },
  { id: 2, countryId: "U", name: "USA" },
  { id: 3, countryId: "A", name: "Australia" }
];

to be consumed by the knobs with the below line

props: {
    items: select("items", countries, countries[0], groupId)
  }

And getting

Argument of type '{ id: number; countryId: string; name: string; }[]' is not assignable to parameter of type 'SelectTypeOptionsProp<SelectTypeKnobValue>'.
  Type '{ id: number; countryId: string; name: string; }[]' is not assignable to type '(string | number)[]'.
    Type '{ id: number; countryId: string; name: string; }' is not assignable to type 'string | number'.
      Type '{ id: number; countryId: string; name: string; }' is not assignable to type 'number'.

   items: select("items", countries, countries, groupId),                              

Was not sure, if there's some implementation details that I am missing here, so have already raised a StackOverflow question.

[shilman]

Hi gang, We’ve just released addon-controls in 6.0-beta!

Controls are portable, auto-generated knobs that are intended to replace addon-knobs long term.

• Controls README
• Migration instructions

Please upgrade and try them out today. Thanks for your help and support getting this stable for release!

[shilman]

For anybody who is interested in Controls but don't know where to start, I've created a quick & dirty step-by-step walkthrough to go from a fresh CRA project to a working demo. Check it out:

=> Storybook Controls w/ CRA & TypeScript

There are also some "knobs to controls" migration docs in the Controls README:

=> How do I migrate from addon-knobs?

[stale]

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. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[piemasters]

@shilman I don't think controls currently supports a list of objects as a select type. Whenever I've tried it only displays one option listed as [object Object]. Eg setup:

  argTypes: {
    color: {
      control: {
        type: "select",
        options: [
          { main: "#00B869", background: "#F5FFFB" },
          { main: "#4FB800", background: "#F9FFF5" },
          { main: "#EB7600", background: "#FFFAF5" },
        ],
      },
    },
  },

I could be wrong but I think knobs added support for this earlier in the year, although it could have been only in the 6.0-beta.

[shilman]

@piemasters controls does not support an array of objects. You can pass it an object whose keys are the labels and whose values are the corresponding data (in any form). Or an array of strings.

[akshaykn-bh]

@piemasters controls does not support an array of objects. You can pass it an object whose keys are the labels and whose values are the corresponding data (in any form). Or an array of strings.

thanks bro