Type generation of single-choice element wrong

[TwoBee]

Current behavior: In my Storyblok instance I declared a Button-blok which has a color option. This option is a single-choice element which gets its data from a datasource called "Colors". This datasource containst key-value-pairs like this:

[
  Green: primary,
  Gold: secondary,
  White: white,
  Accent: accent,
  Transparent: transparent
]

This now generates in a Button-blok to this:

export interface ButtonStoryblok {
  label?: string;
  to?: Exclude<MultilinkStoryblok, {linktype?: "email"} | {linktype?: "asset"}>;
  variant?: "" | "primary" | "secondary" | "link" | "navigation" | "download";
  newTab?: boolean;
  icon?: string;
  iconSize?: "" | "s" | "m" | "l" | "xl";
  iconPosition?: "" | "left" | "right";
  color?: "" | "primary" | "secondary" | "accent" | "black" | "white" | "transparent";
  fontColor?: number | string;
  download?: AssetStoryblok;
  component: "Button";
  _uid: string;
  [k: string]: any;
}

Interestingly, the fontColor prop is also the exact same constellation and this gets generated as number | string. This also happens whenever I use this Datasource anywhere else.

Expected behavior: This should consistently result in a type like this:

type colors = "primary" | "secondary" | "white" | "accent" | "transparent"

Steps to reproduce:

1. Setup datasource

   

2. Use as data for a single-choice element

   

3. Execute type generation npx storyblok pull-components --space={YOUR_ID} && npx storyblok generate-typescript-typedefs --sourceFilePaths ./components.{YOUR_ID}.json --destinationFilePath ./types/storyblok-component-types.d.ts

Other information:

[Edo-San]

Hi @TwoBee The generate-typescript-typedefs utility does not provide union types for Datasources (yet! 😄). Every Datasource is typed as string | number by default.

In your example, you state that the color and fontColor properties share the same field type, which is Single Option with a Datasource as a source. I re-created the example and I just got two number | string types, as expected. I can assure you that Datasources are not typed by our utility.

Could it be that you initially added a self-contained source to the color property, and then you moved it to a Datasource so that you could share it with other properties? 🤔 You can easily check it in two ways:

• have a look at the bloks JSON schema, locate the button component and look for the color property. My guess is that you'll find a hard-coded list of colors, alongside the usual Datasource binding, which is represented by the properties source: internal and datasource_slug: [your_slug]
• locate the blok on the Storyblok blok library: what happens if you change the source of the color property from Datasource to Self? My guess is that you should see the list of colours you previously configured as a Self source

Thank you in advance 🤗