CLI ignores .jsx .js Storybook files because the stories glob is hardcoded to **/*.stories.tsx

[nickskupien]

Description

Been trying to implement what is described here:
https://developers.figma.com/docs/code-connect/storybook/ with react components.

Was stuck for a while trying to get it to work. Found that when using the Code Connect Storybook integration, the CLI fails to discover Storybook files that use the .jsx or .js extension (e.g., index.stories.jsx, index.stories.js).

Even when explicitly configuring the include array in figma.config.json to match .jsx or .js files, the CLI reports No Code Connect files found.

To Reproduce

Steps to reproduce the behavior:

1. Create a React project with a Storybook setup.
2. Create a story file using the .jsx extension: Button.stories.jsx.
3. Add the figma design parameters to the story default export.
4. Configure figma.config.json to look for .jsx files:

{
  "codeConnect": {
    "parser": "react",
    "language": "jsx",
    "include": ["**/*.stories.jsx"]
  }
}

5. Run npx figma connect publish --verbose.
6. See the error: No Code Connect files found in [directory] - Make sure you have configured include and exclude...

Expected behavior

The CLI should respect the include glob pattern defined in figma.config.json and parse .jsx Storybook files successfully.

Additional context

Looking into the source code (dist/storybook/convert.js), it appears the glob pattern is hardcoded to **/*.stories.tsx instead of reading from the user configuration or supporting .jsx / .js as a fallback:

// dist/storybook/convert.js
export async function convertStorybookFiles({
  projectInfo,
  storiesGlob = '**/*.stories.tsx',
  isForMigration = false,
}) {
  // ...
  const storyFiles = files.filter((file) => minimatch(file, storiesGlob, { matchBase: true }))
  // ...
}

The storiesGlob parameter defaults to **/*.stories.tsx and it doesn't look like it's being passed the include glob from figma.config.json.

Renaming the files to .tsx and updating figma.config.json to include: ["**/*.stories.tsx"] resolves the issue and allows the CLI to publish successfully. However, native support for .jsx or respecting the config would be highly appreciated.

[nickskupien]

Temporary Workaround for Yarn Users (Yarn Berry / v2+)

If you're using Yarn and don't want to rename all your .jsx, .js, or .ts story files to .tsx while waiting for an official fix, you can use Yarn's built-in patching feature to quickly fix the hardcoded glob pattern locally.

Run the following commands:

yarn patch @figma/code-connect

This will extract the package to a temporary folder and print the path to your terminal (e.g., /private/var/folders/.../user).

Open that temporary folder, navigate to dist/storybook/convert.js, and change this line (around line 24):

// Change this:
async function convertStorybookFiles({ projectInfo, storiesGlob = '**/*.stories.tsx', isForMigration = false, }) {

// To this:
async function convertStorybookFiles({ projectInfo, storiesGlob = '**/*.stories.{tsx,jsx,ts,js}', isForMigration = false, }) {

Then, commit the patch back to your repository by running the command Yarn gave you earlier:

yarn patch-commit -s <path_to_the_temporary_folder>

This will generate a .patch file in your .yarn/patches directory and automatically update your package.json to apply this fix on every install, allowing Code Connect to successfully discover .jsx, .js, and .ts story files!

[islobodiuk-figma]

Thanks @nickskupien for the thorough report!
We fixed this and will be available in the next release.