@nx/react:library - Add simpleName option to remove dir name from generated file names (#17226)

docs/generated/packages/react/generators/library.json

@@ -183,6 +183,11 @@
         "description": "Create a React library with a minimal setup, no separate test files.",
         "type": "boolean",
         "default": false
+      },
+      "simpleName": {
+        "description": "Don't include the directory in the name of the module of the library.",
+        "type": "boolean",
+        "default": false
       }
     },
     "required": ["name"],

packages/react/src/generators/library/lib/create-files.ts

@@ -21,6 +21,7 @@ export function createFiles(host: Tree, options: NormalizedSchema) {
     ...names(options.name),
     tmpl: '',
     offsetFromRoot: offsetFromRoot(options.projectRoot),
+    fileName: options.fileName,
   };
 
   generateFiles(

packages/react/src/generators/library/lib/normalize-options.ts

@@ -26,7 +26,7 @@ export function normalizeOptions(
     : name;
 
   const projectName = fullProjectDirectory.replace(new RegExp('/', 'g'), '-');
-  const fileName = projectName;
+  const fileName = options.simpleName ? name : projectName;
   const { libsDir: defaultLibsDir } = getWorkspaceLayout(host);
   const libsDir = layoutDirectory ?? defaultLibsDir;
   const projectRoot = joinPathFragments(libsDir, fullProjectDirectory);

packages/react/src/generators/library/library.spec.ts

@@ -29,6 +29,7 @@ describe('lib', () => {
     style: 'css',
     component: true,
     strict: true,
+    simpleName: false,
   };
 
   beforeEach(() => {
@@ -736,6 +737,30 @@ describe('lib', () => {
     });
   });
 
+  describe('--simpleName', () => {
+    it('should generate a library with a simple name', async () => {
+      await libraryGenerator(tree, {
+        ...defaultSchema,
+        simpleName: true,
+        directory: 'myDir',
+      });
+
+      const indexFile = tree.read('libs/my-dir/my-lib/src/index.ts', 'utf-8');
+
+      expect(indexFile).toContain(`export * from './lib/my-lib';`);
+
+      expect(
+        tree.exists('libs/my-dir/my-lib/src/lib/my-lib.module.css')
+      ).toBeTruthy();
+
+      expect(
+        tree.exists('libs/my-dir/my-lib/src/lib/my-lib.spec.tsx')
+      ).toBeTruthy();
+
+      expect(tree.exists('libs/my-dir/my-lib/src/lib/my-lib.tsx')).toBeTruthy();
+    });
+  });
+
   it.each`
     style
     ${'styled-components'}

packages/react/src/generators/library/library.ts

@@ -129,7 +129,7 @@ export async function libraryGenerator(host: Tree, schema: Schema) {
 
   if (options.component) {
     const componentTask = await componentGenerator(host, {
-      name: options.name,
+      name: options.fileName,
       project: options.name,
       flat: true,
       style: options.style,

packages/react/src/generators/library/schema.d.ts

@@ -26,6 +26,7 @@ export interface Schema {
   tags?: string;
   unitTestRunner?: 'jest' | 'vitest' | 'none';
   minimal?: boolean;
+  simpleName?: boolean;
 }
 
 export interface NormalizedSchema extends Schema {

packages/react/src/generators/library/schema.json

@@ -186,6 +186,11 @@
       "description": "Create a React library with a minimal setup, no separate test files.",
       "type": "boolean",
       "default": false
+    },
+    "simpleName": {
+      "description": "Don't include the directory in the name of the module of the library.",
+      "type": "boolean",
+      "default": false
     }
   },
   "required": ["name"]