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

[Bug]: options: any[] in argTypes is not sufficient #26912

Closed
MatthijsBon opened this issue Apr 22, 2024 · 7 comments · Fixed by ComponentDriven/csf#85 or #26958
Closed

[Bug]: options: any[] in argTypes is not sufficient #26912

MatthijsBon opened this issue Apr 22, 2024 · 7 comments · Fixed by ComponentDriven/csf#85 or #26958

Comments

@MatthijsBon
Copy link

Describe the bug

I am defining a story with argTypes and using a control in which we want to reference an array of options for a certain prop like so:

// MyComponent.tsx
export const sizes = ['small', 'medium', 'large'] as const;
type Size = (typeof sizes)[number];

// MyComponent.stories.tsx
const meta: Meta = {
  ...
  argTypes: {
    size: { options: sizes },
  },
  ...
};

This worked fine before, but since v9, it's causing typescript issues for argTypes:

The type readonly ['small', 'medium', 'large'] is readonly and cannot be assigned to the mutable type any[]


The expected type comes from property `argTypes` which is declared here on type `ComponentAnnotations<ReactRenderer, Args>`

This seems incorrect to me, because options is not mutable AFAIK. This is causing a lot of issues in our whole codebase which I now have to solve or use @ts-expect-error xxx.

To Reproduce

Will add later

System

System:
    OS: macOS 14.4.1
    CPU: (10) arm64 Apple M1 Max
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.18.2 - /private/var/folders/d8/3cn5tl156v50k40922pwygm80000gp/T/xfs-09549afd/node
    Yarn: 4.1.1 - /private/var/folders/d8/3cn5tl156v50k40922pwygm80000gp/T/xfs-09549afd/yarn <----- active
    npm: 9.8.1 - ~/.nvm/versions/node/v18.18.2/bin/npm
  Browsers:
    Chrome: 124.0.6367.60
    Safari: 17.4.1
  npmPackages:
    eslint-plugin-storybook: 0.8.0 => 0.8.0

Additional context

No response

@asso1985
Copy link

Having same issues but with latest SB version you no longer need to set options as before. You will get those automatically.
You can still change the control type indeed.

@Cherry
Copy link
Contributor

Cherry commented Apr 22, 2024

I think simply making options a readonly any[] instead of just any[] should work, as per https://www.typescriptlang.org/play?#code/C4TwDgpgBAhgdiAKgCwJZwOZQLxQE4QwAmA9nADYiwIDaAugNwBQTAxmQM7BQckC2EYGkw4oNAEQAzEiXEAaKOIBGMPOLqwOUdnC7MdXHv0HCMAUXIdouGgEYFAJgUBmRiwPdeAoegwBBBAAuaiRTUS8TX31OT2MfTAsrAJBg+FDfcLjTRIgGIA

I'd make a PR for this and test it, but I'm struggling to find where this is defined. I can see it published in @storybook/types but can't quite find it in this repo. https://npmdiff.dev/%40storybook%2Ftypes/8.0.8/8.0.9/

EDIT: I found it. It's https://github.com/ComponentDriven/csf. I think this was introduced in ComponentDriven/csf@ab72fee

@Cherry
Copy link
Contributor

Cherry commented Apr 22, 2024

I've opened ComponentDriven/csf#85 which from my testing resolves this.

@MatthijsBon
Copy link
Author

I've opened ComponentDriven/csf#85 which from my testing resolves this.

Great! Do we also need a PR in storybook to address the dependency upgrade? I'm a bit of a OS / Storybook noob, so not completely sure what the best approach is.

@alicegherbison
Copy link

alicegherbison commented Apr 23, 2024

Hello,

We are also experiencing this issue with 8.0.9 when using an enum as the value for the options property against an argType.

Previously ok and now throwing same error as above:

export enum EStatus {
  ACCENT = "accent",
  DANGER = "danger",
  LOADING = "loading",
  NEUTRAL = "neutral",
  SUCCESS = "success",
  WARNING = "warning",
}

argTypes: {
    status: {
      options: EStatus,
      control: { type: "radio" },
    },
  },

Removing the options property does not automatically give the correct enum as options even through it is specified in the prop types for the component. Control in Storybook gives "-".

Manually specifying individual enum items in an array in the options property does still work e.g.

argTypes: {
  status: {
      control: { type: "radio" },
      options: [EStatus.ACCENT, EStatus.DANGER, EStatus.NEUTRAL, EStatus.SUCCESS, EStatus.WARNING],
    },
}

Do we need to change our technique for the options property or is this a bug with the new version? Many thanks.

@Cherry
Copy link
Contributor

Cherry commented Apr 23, 2024

I've opened ComponentDriven/csf#85 which from my testing resolves this.

Great! Do we also need a PR in storybook to address the dependency upgrade? I'm a bit of a OS / Storybook noob, so not completely sure what the best approach is.

There will need to be a PR here too yes, once that PR for @storybook/csf is merged and released.

@Cherry
Copy link
Contributor

Cherry commented Apr 25, 2024

@storybook/csf got a 0.1.5 release that fixes this: https://github.com/ComponentDriven/csf/releases/tag/v0.1.5

Once #26958 is merged and a storybook release is out, that should resolve this moving forward.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants