storybook component registration when using constant metadata export

[0xa3k5]

Hi, we've recently kicked off a project to implement the code-connect for our design system. We have already been using the Storybook and thought it would be straight forward to implement the code-connect, but we ran into an issue with the component registration when using different export styles on our *.stories.tsx files

The anonymous default object literal export works seamlessly:

export default {
  argTypes: {},
  parameters: {
    design: {}
  }
}

but, when the default export is assigned to a constant, Storybook correctly includes the Figma embed, but the component fails to register in dev-mode:

// This configuration does not appear in dev mode
// There are no CLI errors or warnings, but Storybook displays the Figma embed.

const metadata: Meta<typeof Button> = {
  title: 'Button',
  component: Button,
  argTypes: {
    variant: {
      control: 'radio',
      options: ['primary', 'secondary', 'tertiary', 'danger'],
    }
  },
  parameters: {
    design: {
      type: 'figma',
      url: 'https://www.figma.com',
      examples: [Default],
      props: {
        variant: figma.enum('variant', {
          primary: 'primary',
          secondary: 'secondary',
          tertiary: 'tertiary',
          danger: 'danger',
        }),
      },
    },
  },
}

export default metadata

It seems like code-connect fails to recognize the component when the Storybook files deviate from a certain pattern, which seems like a restrictive limitation. Documenting this behavior could save time for others facing similar issues. Additionally, any insights into why this happens or potential fixes would be greatly appreciated, if there is anything we can do on our side?

our storybook dependencies:

"@storybook/addon-designs": "^8.0.0",
"storybook": "^8.0.8",

[efoken]

Yes, this would be super good, I also stumbled upon this. Anonymous default exports are not a good practice and also not what Storybook recommends. See: https://storybook.js.org/docs/writing-stories/typescript

We always write stories with TypeScript 4.9 syntax like mentioned in the Storybook docs.

[tomduncalf-figma]

Hey, thanks for the input on this! We're definitely aware that we don't support every Storybook syntax and so your feedback is really helpful. I think in this case, our parser isn't following the metadata reference – hopefully this is quite an easy fix. We'll take a look and get back to you once we have a solution.

[ptomas-figma]

This should be fixed in the latest release (0.1.2). Please reopen this issue if the problem persist.