Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Type generation of single-choice element wrong #121

Open
TwoBee opened this issue Sep 24, 2024 · 1 comment
Open

Type generation of single-choice element wrong #121

TwoBee opened this issue Sep 24, 2024 · 1 comment
Assignees
Labels
pending-author [Issue] Awaiting further information or action from the issue author

Comments

@TwoBee
Copy link

TwoBee commented Sep 24, 2024

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
Screenshot of the described datasource
  1. Use as data for a single-choice element
  1. 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:

@TwoBee TwoBee added the bug Something isn't working label Sep 24, 2024
@alvarosabu alvarosabu added pending-triage [Issue] Ticket is pending to be prioritised bug Something isn't working and removed bug Something isn't working labels Oct 1, 2024
@Edo-San Edo-San self-assigned this Oct 2, 2024
@Edo-San
Copy link
Contributor

Edo-San commented Oct 2, 2024

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 🤗

@Edo-San Edo-San added pending-author [Issue] Awaiting further information or action from the issue author and removed bug Something isn't working pending-triage [Issue] Ticket is pending to be prioritised labels Oct 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
pending-author [Issue] Awaiting further information or action from the issue author
Projects
None yet
Development

No branches or pull requests

3 participants