Angular storybook withKnobs (storybookjs/addons/knobs) array of objects with select() is not working

Question

I am relatively new to Angular, and here I am trying to implement a very basic storybook component with ng-select and storybook in an Angular project and using storybookjs/addons/knobs

The storybook ng-select selection is named as common-ng-select and this component is getting rendered good, but its options of data, passed as a prop named items are not coming to the storybook component.

The items is an input to the ng-select component and well-documented in its API Doc. Its supposed to take any array or array of objects. (And in this case below I am passing an array of objects).

And I am following the boilerplate guideline from this storybook documentation to pass an array of objects, as a prop to the ng-select component as the items to render.

Here's my code in the reusable storybook component (ng-select.component.ts)

import { Component, Input, ViewEncapsulation } from "@angular/core";

@Component({
  selector: `common-ng-select`,
  template: `<ng-select class="common-ng-select" [items]="items" ></ng-select>`,
  styleUrls: ["./ng-select.component.scss"],
  encapsulation: ViewEncapsulation.None
})
export class NgSelectComponent {
  @Input()
  items: any;

  constructor() {}
}

And below is my code in the stories directory of the project (index.stories.ts).

stories/ng-select/index.stories.ts

import {
  NgSelectComponent,
  CommonNgSelectModule
} from "../../../projects/src/public-api";
import { moduleMetadata } from "@storybook/angular";
import { withKnobs } from "@storybook/addon-knobs";
import { select } from "@storybook/addon-knobs";


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

const groupId = "GROUP-ID3";

export default {
  title: "Common Ng Select",
  decorators: [
    withKnobs,
    moduleMetadata({
      imports: [CommonNgSelectModule ]
    })
  ]
};

export const SimpleNgSelect = () => ({
  component: NgSelectComponent,
  template: `
  <common-ng-select [items]="items" >
  </common-ng-select> `,
  props: {
    items: select("items", countries, countries[0], groupId)
  }

});

But on the above line

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

I am getting the below type assignment error on the second variable countries from my vscode. Althouh this I am almost exactly following this official guide

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

Update - After I raised this question here at SO, figured there's an open bug in ng-select repo

Answer 1

I saw you already found the issue for this in GitHub https://github.com/storybookjs/storybook/issues/9751

This is a known bug that will be fixed in the future so there is nothing wrong with your current approach. As a workaround, you could try to do this

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

or

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

I could not test it, please let me know if it works.