[Bug]: sb migrate csf-2-to-3 doesn't work glob that uses multiple file extension

[kasperpeulen]

Describe the bug

For some reason this glob doesn't work:

npx sb@next migrate csf-2-to-3 --glob="**/src/**/*.stories.{ts,tsx,js,jsx}"

It crashes with:

SyntaxError: Unexpected token, expected "," (16:3)
  14 |   title: 'Components/RadioButton',
  15 |   component: Radio
> 16 | } as ComponentMeta<typeof Radio>);
     |   ^

Running the migrations on a specific file extension works:

npx sb@next migrate csf-2-to-3 --glob="**/src/**/*.stories.tsx"

To Reproduce

No response

System

No response

Additional context

No response

[shilman]

@kasperpeulen that's not a valid glob. i think you mean

npx sb@next migrate csf-2-to-3 --glob="**/src/**/*.stories.@(js|jsx|ts|tsx)"

[kasperpeulen]

@shilman bash/zsh think it is valid:

❯ ls -l .git{attributes,ignore}
-rw-r--r--  1 kasperpeulen  staff   32 Nov  4 13:59 .gitattributes
-rw-r--r--  1 kasperpeulen  staff  371 Dec  5 15:55 .gitignore

According Chat GPT, the one I used is more common and better supported across shells:

I also tested it with minimatch, the npm package we (indirectly) use for globs:

import minimatch from 'minimatch';

test('globs', () => {
  expect(minimatch('bar.foo1', '*.{foo1,foo2}')).toMatchInlineSnapshot(`true`);
  expect(minimatch('bar.foo2', '*.{foo1,foo2}')).toMatchInlineSnapshot(`true`);
  expect(minimatch('bar.foo1', '*.@(foo1|foo2)')).toMatchInlineSnapshot(`true`);
  expect(minimatch('bar.foo2', '*.@(foo1|foo2)')).toMatchInlineSnapshot(`true`);
});

The sb migrate script fails in the same way for both globs, and the mentioned PR, fixes both :)

[shilman]

¡Ay Caramba!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-beta.13 containing PR #20290 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.