Storybook: [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[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. 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[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. 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[bot]]

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

[piemasters]

@shamin yup that's how I'm doing it. I've found it's generally better practice to pass primitives rather than objects where possible when creating reusable components and using controls has helped me stick with that.

I just thought i'd note that because of that using controls over knobs doesn't really help the original problem, although I still recommend switching over because controls is much nicer to use than knobs. Maybe support will be added in a future update?

[shilman]

@piemasters yeah, I understand the confusion. I posted that notice to all open addon-knobs issues regardless of whether controls solves the problem, and will continue to do so. I want everybody who uses knobs to knob about controls and upgrade as soon as it's convenient. The sooner people upgrade, the sooner we can deprecate knobs, which doesn't have any maintainers.

[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. 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[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. 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[bot]]

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!