Storybook generator creates stories for stories

[Brian-McBride]

Current Behavior

Storybook npx nx generate @nrwl/react:stories is creating stories for files that have .stories in the name.

Expected Behavior

Stories should only be created for actual component files.

Steps to Reproduce

`npx nx generate @nrwl/react:stories --project=

Environment

Node : 16.13.1
   OS   : darwin x64
   npm  : 8.10.0
   
   nx : 14.1.5
   @nrwl/angular : Not Found
   @nrwl/cypress : 14.1.5
   @nrwl/detox : Not Found
   @nrwl/devkit : 14.1.5
   @nrwl/eslint-plugin-nx : 14.1.5
   @nrwl/express : 14.1.5
   @nrwl/jest : 14.1.5
   @nrwl/js : 14.1.5
   @nrwl/linter : 14.1.5
   @nrwl/nest : Not Found
   @nrwl/next : 14.1.5
   @nrwl/node : 14.1.5
   @nrwl/nx-cloud : 14.0.3
   @nrwl/nx-plugin : 14.1.5
   @nrwl/react : 14.1.5
   @nrwl/react-native : Not Found
   @nrwl/schematics : Not Found
   @nrwl/storybook : 14.1.5
   @nrwl/web : 14.1.5
   @nrwl/workspace : 14.1.5
   typescript : 4.6.4
   rxjs : 6.6.7
   ---------------------------------------
   Community plugins:
         @nx-extend/gcp-cloud-run: 3.4.0
         @nx-extend/gcp-functions: 6.2.0

[Brian-McBride]

I don't have time to open a PR, on a tight deadline. But I did trace down the problem.

Affected code: packages/react/src/generators/stories.ts

Existing code link

nx/packages/react/src/generators/stories/stories.ts

Lines 79 to 92 in 38809f1

	visitNotIgnoredFiles(tree, projectPath, (path) => {
	if (
	(path.endsWith('.tsx') && !path.endsWith('.spec.tsx')) ||
	(path.endsWith('.js') && !path.endsWith('.spec.js')) ||
	(path.endsWith('.jsx') && !path.endsWith('.spec.jsx'))
	) {
	const ext = path.slice(path.lastIndexOf('.'));
	const storyPath = `${path.split(ext)[0]}.stories${ext}`;
	// only add component if a stories file doesnt already exist
	if (!tree.exists(storyPath)) {
	componentPaths.push(path);
	}
	}
	});

Suggestion for updated code

  visitNotIgnoredFiles(tree, projectPath, (path) => {
    if (
      (path.endsWith('.tsx') && !path.endsWith('.spec.tsx')) ||
      (path.endsWith('.js') && !path.endsWith('.spec.js')) ||
      (path.endsWith('.jsx') && !path.endsWith('.spec.jsx'))
    ) {
      const ext = path.slice(path.lastIndexOf('.'));
      const storyPath = `${path.split(ext)[0]}.stories${ext}`;
      // Use the new path using endsWith
      const isStory = storyPath.endsWith(`.stories.stories${ext}`)
      // Optionally use the org path as a comparison
      // const isStory = path.slice(-ext.length - 7, -ext.length) === 'stories'

      // Updating this line with set check
      if (!isStory && !tree.exists(storyPath)) {
        componentPaths.push(path);
      }
    }
  });

Conclusion

Honestly, I think there is a deeper problem with tree.exists() function. Apparently, that should be grabbing the fact that a file exists in that tree. In my case I am using subfolders. libs/client/components/src/lib/ so maybe that is causing issues.

Still, if we know the path of the file we are going to generate, it is easy enough to check if it exists in any number of ways.

The way I see the code currently, it will tag the .stories extension on everything and then check to see if it exists. Which will keep causing recursive creations.

[Brian-McBride]

@Coly010 It looks like you fixed this before. I didn't have this issue an update or two ago (can't remember when).

[Balance8]

Bump, I can confirm this is occurring on my repo as well. It is generating stories for story files as well as double-generating cypress specs.

[mandarini]

Oops that sounds frustrating. Looking into it now, thanks @Brian-McBride @Balance8 !

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.