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

[MatthijsBon]

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]

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]

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]

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

[MatthijsBon]

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]

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]

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]

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