@nx/react 0.0.0-pr-22179-271588f

package/src/generators/component/files/__fileName__.tsx__tmpl__

@@ -0,0 +1,88 @@
+<% if (classComponent) { %>
+import { Component } from 'react';
+<% } %>
+
+<% if (routing) { %>
+import { Route, Link } from 'react-router-dom';
+<% } %>
+
+<% if (hasStyles) {
+   if (styledModule && styledModule !== 'styled-jsx') {
+    var wrapper = 'Styled' + className;
+    var extras = '';
+  %>
+  import styled from '<%= styledModule %>';
+  <% } else {
+    var wrapper = 'div';
+    var extras = globalCss || styledModule === 'styled-jsx' ? '' : " className={styles['container']}";
+  %>
+  <%- style !== 'styled-jsx' ? globalCss ? `import './${fileName}.${style}';` : `import styles from './${fileName}.module.${style}';`: '' %>
+  <% }
+} else {
+    var wrapper = 'div';
+    var extras = '';
+} %>
+
+/* eslint-disable-next-line */
+export interface <%= className %>Props {
+}
+
+<% if (styledModule && styledModule !== 'styled-jsx') { %>
+const Styled<%= className %> = styled.div`
+  color: pink;
+`;
+<% }%>
+<% if(!isNextPage) { %>
+  <% if (classComponent) { %>
+  export class <%= className %> extends Component<<%= className %>Props> {
+    override render() {
+      return (
+        <<%= wrapper %><%- extras %>>
+          <%= styledModule === 'styled-jsx' ? `<style jsx>{\`div { color: pink; }\`}</style>` : `` %>
+          <p>Welcome to <%= className %>!</p>
+          <% if (routing) { %>
+            <ul>
+              <li><Link to="/"><%= name %> root</Link></li>
+            </ul>
+            <Route path="/" element={<div>This is the <%= name %> root route.</div>} />
+          <% } %>
+        </<%= wrapper %>>
+      );
+    }
+  }
+  <% } else { %>
+  export function <%= className %>(props: <%= className %>Props) {
+    return (
+      <<%= wrapper %><%- extras %>>
+        <% if (styledModule === 'styled-jsx') { %><style jsx>{`div { color: pink; }`}</style><% } %>
+        <h1>Welcome to <%= className %>!</h1>
+        <% if (routing) { %>
+          <ul>
+            <li><Link to="/"><%= name %> root</Link></li>
+          </ul>
+          <Route path="/" element={<div>This is the <%= name %> root route.</div>} />
+        <% } %>
+      </<%= wrapper %>>
+    );
+  }
+  <% } %>
+
+  export default <%= className %>;
+<% } else { %>
+  export default function <%= className %>(props: <%= className %>Props) {
+    return (
+      <<%= wrapper %><%- extras %>>
+        <% if (styledModule === 'styled-jsx') { %><style jsx>{`div { color: pink; }`}</style><% } %>
+        <h1>Welcome to <%= className %>!</h1>
+        <% if (routing) { %>
+          <ul>
+            <li><Link to="/"><%= name %> root</Link></li>
+          </ul>
+          <Route path="/" element={<div>This is the <%= name %> root route.</div>} />
+        <% } %>
+      </<%= wrapper %>>
+    );
+  };
+<% } %>
+
+<% if (inSourceTests === true) { %> <%- inSourceVitestTests %> <% } %>

package/src/generators/component/lib/get-component-tests.d.ts

@@ -0,0 +1,2 @@
+import { NormalizedSchema } from '../schema';
+export declare function getComponentTests(schema: NormalizedSchema): string;

package/src/generators/component/lib/get-component-tests.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getComponentTests = void 0;
+function getComponentTests(schema) {
+    return `
+  it('should render successfully', () => {
+    const { baseElement } = render(<${schema.className} />);
+    expect(baseElement).toBeTruthy();
+  });
+  `;
+}
+exports.getComponentTests = getComponentTests;

package/src/generators/component/lib/normalize-options.d.ts

@@ -0,0 +1,3 @@
+import { Tree } from '@nx/devkit';
+import { NormalizedSchema, Schema } from '../schema';
+export declare function normalizeOptions(tree: Tree, options: Schema): Promise<NormalizedSchema>;

package/src/generators/component/lib/normalize-options.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeOptions = void 0;
+const devkit_1 = require("@nx/devkit");
+const artifact_name_and_directory_utils_1 = require("@nx/devkit/src/generators/artifact-name-and-directory-utils");
+const assertion_1 = require("../../../utils/assertion");
+async function normalizeOptions(tree, options) {
+    (0, assertion_1.assertValidStyle)(options.style);
+    const { artifactName: name, directory, fileName, filePath, project: projectName, } = await (0, artifact_name_and_directory_utils_1.determineArtifactNameAndDirectoryOptions)(tree, {
+        artifactType: 'component',
+        callingGenerator: '@nx/react:component',
+        name: options.name,
+        directory: options.directory,
+        derivedDirectory: options.derivedDirectory ?? options.directory,
+        flat: options.flat,
+        nameAndDirectoryFormat: options.nameAndDirectoryFormat,
+        project: options.project,
+        fileExtension: 'tsx',
+        fileName: options.fileName,
+        pascalCaseFile: options.pascalCaseFiles,
+        pascalCaseDirectory: options.pascalCaseDirectory,
+    });
+    const project = (0, devkit_1.readProjectConfiguration)(tree, projectName);
+    const { className } = (0, devkit_1.names)(name);
+    const { sourceRoot: projectSourceRoot, root: projectRoot, projectType, } = project;
+    const styledModule = /^(css|scss|less|none)$/.test(options.style)
+        ? null
+        : options.style;
+    if (options.export && projectType === 'application') {
+        devkit_1.logger.warn(`The "--export" option should not be used with applications and will do nothing.`);
+    }
+    options.classComponent = options.classComponent ?? false;
+    options.routing = options.routing ?? false;
+    options.globalCss = options.globalCss ?? false;
+    options.inSourceTests = options.inSourceTests ?? false;
+    //TODO (nicholas): Remove when Next page generator is removed
+    options.isNextPage = options.isNextPage ?? false;
+    return {
+        ...options,
+        projectName,
+        directory,
+        styledModule,
+        hasStyles: options.style !== 'none',
+        className,
+        fileName,
+        filePath,
+        projectSourceRoot: projectSourceRoot ?? projectRoot,
+    };
+}
+exports.normalizeOptions = normalizeOptions;

package/src/generators/component/schema.d.ts

@@ -0,0 +1,48 @@
+import { SupportedStyles } from '../../../typings/style';
+
+export interface Schema {
+  name: string;
+  /**
+   * @deprecated Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v19.
+   */
+  project?: string;
+  style: SupportedStyles;
+  skipTests?: boolean;
+  directory?: string;
+  export?: boolean;
+  /**
+   * @deprecated Provide the `name` in pascal-case and use the `as-provided` format. This option will be removed in Nx v19.
+   */
+  pascalCaseFiles?: boolean;
+  /**
+   * @deprecated Provide the `directory` in pascal-case and use the `as-provided` format. This option will be removed in Nx v19.
+   */
+  pascalCaseDirectory?: boolean;
+  classComponent?: boolean;
+  routing?: boolean;
+  js?: boolean;
+  /**
+   * @deprecated Provide the `directory` option instead and use the `as-provided` format. This option will be removed in Nx v19.
+   */
+  flat?: boolean;
+  globalCss?: boolean;
+  fileName?: string;
+  inSourceTests?: boolean;
+  skipFormat?: boolean;
+  nameAndDirectoryFormat?: 'as-provided' | 'derived';
+  // Used by other wrapping generators to preserve previous behavior
+  // e.g. @nx/next:component
+  derivedDirectory?: string;
+  // Used by Next.js to determine how React should generate the page
+  isNextPage?: boolean;
+}
+
+export interface NormalizedSchema extends Schema {
+  projectSourceRoot: string;
+  projectName: string;
+  fileName: string;
+  filePath: string;
+  className: string;
+  styledModule: null | string;
+  hasStyles: boolean;
+}

package/src/generators/component/schema.json

@@ -0,0 +1,150 @@
+{
+  "$schema": "https://json-schema.org/schema",
+  "cli": "nx",
+  "$id": "NxReactComponent",
+  "title": "Create a React Component",
+  "description": "Create a React Component for Nx.",
+  "type": "object",
+  "properties": {
+    "project": {
+      "type": "string",
+      "description": "The name of the project.",
+      "alias": "p",
+      "$default": {
+        "$source": "projectName"
+      },
+      "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v19."
+    },
+    "name": {
+      "type": "string",
+      "description": "The name of the component.",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
+      "x-prompt": "What name would you like to use for the component?",
+      "x-priority": "important"
+    },
+    "style": {
+      "description": "The file extension to be used for style files.",
+      "type": "string",
+      "alias": "s",
+      "default": "css",
+      "x-prompt": {
+        "message": "Which stylesheet format would you like to use?",
+        "type": "list",
+        "items": [
+          {
+            "value": "css",
+            "label": "CSS"
+          },
+          {
+            "value": "scss",
+            "label": "SASS(.scss)       [ https://sass-lang.com          ]"
+          },
+          {
+            "value": "less",
+            "label": "LESS              [ https://lesscss.org            ]"
+          },
+          {
+            "value": "styled-components",
+            "label": "styled-components [ https://styled-components.com ]"
+          },
+          {
+            "value": "@emotion/styled",
+            "label": "emotion           [ https://emotion.sh            ]"
+          },
+          {
+            "value": "styled-jsx",
+            "label": "styled-jsx        [ https://www.npmjs.com/package/styled-jsx ]"
+          },
+          {
+            "value": "none",
+            "label": "None"
+          }
+        ]
+      }
+    },
+    "js": {
+      "type": "boolean",
+      "description": "Generate JavaScript files rather than TypeScript files.",
+      "default": false
+    },
+    "skipTests": {
+      "type": "boolean",
+      "description": "When true, does not create `spec.ts` test files for the new component.",
+      "default": false,
+      "x-priority": "internal"
+    },
+    "directory": {
+      "type": "string",
+      "description": "The directory at which to create the component file. When `--nameAndDirectoryFormat=as-provided`, it will be relative to the current working directory. Otherwise, it will be relative to the project root.",
+      "alias": "dir",
+      "x-priority": "important"
+    },
+    "nameAndDirectoryFormat": {
+      "description": "Whether to generate the component in the directory as provided, relative to the current working directory and ignoring the project (`as-provided`) or generate it using the project and directory relative to the workspace root (`derived`).",
+      "type": "string",
+      "enum": ["as-provided", "derived"]
+    },
+    "flat": {
+      "type": "boolean",
+      "description": "Create component at the source root rather than its own directory.",
+      "default": false,
+      "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. This option will be removed in Nx v19."
+    },
+    "export": {
+      "type": "boolean",
+      "description": "When true, the component is exported from the project `index.ts` (if it exists).",
+      "alias": "e",
+      "default": false,
+      "x-prompt": "Should this component be exported in the project?"
+    },
+    "pascalCaseFiles": {
+      "type": "boolean",
+      "description": "Use pascal case component file name (e.g. `App.tsx`).",
+      "alias": "P",
+      "default": false,
+      "x-deprecated": "Provide the `name` in pascal-case and use the `as-provided` format. This option will be removed in Nx v19."
+    },
+    "pascalCaseDirectory": {
+      "type": "boolean",
+      "description": "Use pascal case directory name (e.g. `App/App.tsx`).",
+      "alias": "R",
+      "default": false,
+      "x-deprecated": "Provide the `directory` in pascal-case and use the `as-provided` format. This option will be removed in Nx v19."
+    },
+    "classComponent": {
+      "type": "boolean",
+      "alias": "C",
+      "description": "Use class components instead of functional component.",
+      "default": false
+    },
+    "routing": {
+      "type": "boolean",
+      "description": "Generate a library with routes."
+    },
+    "globalCss": {
+      "type": "boolean",
+      "description": "Default is `false`. When `true`, the component is generated with `*.css`/`*.scss` instead of `*.module.css`/`*.module.scss`.",
+      "default": false
+    },
+    "fileName": {
+      "type": "string",
+      "description": "Create a component with this file name."
+    },
+    "inSourceTests": {
+      "type": "boolean",
+      "default": false,
+      "description": "When using Vitest, separate spec files will not be generated and instead will be included within the source files. Read more on the Vitest docs site: https://vitest.dev/guide/in-source.html"
+    },
+    "skipFormat": {
+      "description": "Skip formatting files.",
+      "type": "boolean",
+      "default": false,
+      "x-priority": "internal"
+    }
+  },
+  "required": ["name"],
+  "examplesFile": "../../../docs/component-examples.md"
+}

package/src/generators/component-cypress-spec/component-cypress-spec.d.ts

@@ -0,0 +1,13 @@
+import { Tree } from '@nx/devkit';
+import type * as ts from 'typescript';
+export interface CreateComponentSpecFileSchema {
+    project: string;
+    componentPath: string;
+    js?: boolean;
+    cypressProject?: string;
+    skipFormat?: boolean;
+}
+export declare function componentCypressGenerator(host: Tree, schema: CreateComponentSpecFileSchema): Promise<void>;
+export declare function getArgsDefaultValue(property: ts.SyntaxKind): string;
+export declare function createComponentSpecFile(tree: Tree, { project, componentPath, js, cypressProject }: CreateComponentSpecFileSchema): void;
+export default componentCypressGenerator;

package/src/generators/component-cypress-spec/component-cypress-spec.js

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createComponentSpecFile = exports.getArgsDefaultValue = exports.componentCypressGenerator = void 0;
+const devkit_1 = require("@nx/devkit");
+const path_1 = require("path");
+const ast_utils_1 = require("../../utils/ast-utils");
+const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
+let tsModule;
+async function componentCypressGenerator(host, schema) {
+    createComponentSpecFile(host, schema);
+    if (!schema.skipFormat) {
+        await (0, devkit_1.formatFiles)(host);
+    }
+}
+exports.componentCypressGenerator = componentCypressGenerator;
+// TODO: candidate to refactor with the angular component story
+function getArgsDefaultValue(property) {
+    if (!tsModule) {
+        tsModule = (0, ensure_typescript_1.ensureTypescript)();
+    }
+    const typeNameToDefault = {
+        [tsModule.SyntaxKind.StringKeyword]: '',
+        [tsModule.SyntaxKind.NumberKeyword]: 0,
+        [tsModule.SyntaxKind.BooleanKeyword]: false,
+    };
+    const resolvedValue = typeNameToDefault[property];
+    if (typeof resolvedValue === undefined) {
+        return '';
+    }
+    else if (typeof resolvedValue === 'string') {
+        return resolvedValue.replace(/\s/g, '+');
+    }
+    else {
+        return resolvedValue;
+    }
+}
+exports.getArgsDefaultValue = getArgsDefaultValue;
+function createComponentSpecFile(tree, { project, componentPath, js, cypressProject }) {
+    if (!tsModule) {
+        tsModule = (0, ensure_typescript_1.ensureTypescript)();
+    }
+    const e2eProjectName = cypressProject || `${project}-e2e`;
+    const projects = (0, devkit_1.getProjects)(tree);
+    const e2eProject = projects.get(e2eProjectName);
+    // cypress >= v10 will have a cypress.config.ts < v10 will have a cypress.json
+    const isCypressV10 = tree.exists((0, path_1.join)(e2eProject.root, 'cypress.config.ts'));
+    const e2eLibIntegrationFolderPath = (0, path_1.join)(e2eProject.sourceRoot, isCypressV10 ? 'e2e' : 'integration');
+    const proj = projects.get(project);
+    const componentFilePath = (0, devkit_1.joinPathFragments)(proj.sourceRoot, componentPath);
+    const componentName = componentFilePath
+        .slice(componentFilePath.lastIndexOf('/') + 1)
+        .replace('.tsx', '')
+        .replace('.jsx', '')
+        .replace('.js', '');
+    const contents = tree.read(componentFilePath, 'utf-8');
+    if (contents === null) {
+        throw new Error(`Failed to read ${componentFilePath}`);
+    }
+    const sourceFile = tsModule.createSourceFile(componentFilePath, contents, tsModule.ScriptTarget.Latest, true);
+    const cmpDeclaration = (0, ast_utils_1.getComponentNode)(sourceFile);
+    if (!cmpDeclaration) {
+        const componentNodes = (0, ast_utils_1.findExportDeclarationsForJsx)(sourceFile);
+        if (componentNodes?.length) {
+            componentNodes.forEach((declaration) => {
+                findPropsAndGenerateFileForCypress(tree, sourceFile, declaration, e2eLibIntegrationFolderPath, componentName, project, js, true);
+            });
+        }
+        else {
+            throw new Error(`Could not find any React component in file ${componentFilePath}`);
+        }
+    }
+    else {
+        findPropsAndGenerateFileForCypress(tree, sourceFile, cmpDeclaration, e2eLibIntegrationFolderPath, componentName, project, js);
+    }
+}
+exports.createComponentSpecFile = createComponentSpecFile;
+function findPropsAndGenerateFileForCypress(tree, sourceFile, cmpDeclaration, e2eLibIntegrationFolderPath, componentName, project, js, fromNodeArray) {
+    const propsInterface = (0, ast_utils_1.getComponentPropsInterface)(sourceFile, cmpDeclaration);
+    let props = [];
+    if (propsInterface) {
+        props = propsInterface.members.map((member) => {
+            return {
+                name: member.name.text,
+                defaultValue: getArgsDefaultValue(member.type.kind),
+            };
+        });
+    }
+    const isCypressV10 = (0, path_1.basename)(e2eLibIntegrationFolderPath) === 'e2e';
+    const cyFilePrefix = isCypressV10 ? 'cy' : 'spec';
+    (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, './files'), `${e2eLibIntegrationFolderPath}/${fromNodeArray
+        ? componentName + '--' + cmpDeclaration.name.text
+        : componentName}`, {
+        projectName: project,
+        componentName,
+        componentSelector: cmpDeclaration.name.text,
+        props,
+        fileExt: js ? `${cyFilePrefix}.js` : `${cyFilePrefix}.ts`,
+    });
+}
+exports.default = componentCypressGenerator;

package/src/generators/component-cypress-spec/files/__componentName__.__fileExt__

@@ -0,0 +1,13 @@
+describe('<%=projectName%>: <%= componentSelector %> component', () => {
+  beforeEach(() => cy.visit('/iframe.html?id=<%= componentSelector.toLowerCase() %>--primary<% if ( props && props.length > 0 ) { %>&args=<% } %><%
+    for(let prop of props) {
+      %><%=prop.name%><%
+      if(prop.defaultValue !== undefined && (prop.defaultValue || prop.defaultValue === false)) {
+        %>:<%=prop.defaultValue%><%
+      } %>;<%
+    }%>'));
+    
+    it('should render the component', () => {
+      cy.get('h1').should('contain', 'Welcome to <%=componentSelector%>!');
+    });
+});

package/src/generators/component-cypress-spec/schema.json

@@ -0,0 +1,44 @@
+{
+  "$schema": "https://json-schema.org/schema",
+  "cli": "nx",
+  "$id": "NxReactComponentCypressSpec",
+  "title": "Create component Cypress spec",
+  "description": "Create a Cypress spec for a UI component that has a story.",
+  "type": "object",
+  "properties": {
+    "project": {
+      "type": "string",
+      "description": "The project name for which to generate tests.",
+      "examples": ["shared-ui-component"],
+      "$default": {
+        "$source": "projectName",
+        "index": 0
+      },
+      "x-prompt": "What's name of the project for which to generate tests?",
+      "x-priority": "important"
+    },
+    "componentPath": {
+      "type": "string",
+      "description": "Relative path to the component file from the library root?",
+      "examples": ["lib/components"],
+      "x-prompt": "What's path of the component relative to the project's lib root for which to generate a test?",
+      "x-priority": "important"
+    },
+    "js": {
+      "type": "boolean",
+      "description": "Generate JavaScript files rather than TypeScript files.",
+      "default": false
+    },
+    "cypressProject": {
+      "type": "string",
+      "description": "The Cypress project to generate the stories under. By default, inferred from `project`."
+    },
+    "skipFormat": {
+      "description": "Skip formatting files.",
+      "type": "boolean",
+      "default": false,
+      "x-priority": "internal"
+    }
+  },
+  "required": ["project", "componentPath"]
+}

package/src/generators/component-story/component-story.d.ts

@@ -0,0 +1,12 @@
+import { Tree } from '@nx/devkit';
+import type * as ts from 'typescript';
+export interface CreateComponentStoriesFileSchema {
+    project: string;
+    componentPath: string;
+    interactionTests?: boolean;
+    skipFormat?: boolean;
+}
+export declare function createComponentStoriesFile(host: Tree, { project, componentPath, interactionTests }: CreateComponentStoriesFileSchema): void;
+export declare function findPropsAndGenerateFile(host: Tree, sourceFile: ts.SourceFile, cmpDeclaration: ts.Node, componentDirectory: string, name: string, interactionTests: boolean, isPlainJs: boolean, fromNodeArray?: boolean): void;
+export declare function componentStoryGenerator(host: Tree, schema: CreateComponentStoriesFileSchema): Promise<void>;
+export default componentStoryGenerator;

package/src/generators/component-story/component-story.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentStoryGenerator = exports.findPropsAndGenerateFile = exports.createComponentStoriesFile = void 0;
+const devkit_1 = require("@nx/devkit");
+const ast_utils_1 = require("../../utils/ast-utils");
+const component_props_1 = require("../../utils/component-props");
+const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
+let tsModule;
+function createComponentStoriesFile(host, { project, componentPath, interactionTests }) {
+    if (!tsModule) {
+        tsModule = (0, ensure_typescript_1.ensureTypescript)();
+    }
+    const proj = (0, devkit_1.getProjects)(host).get(project);
+    const sourceRoot = proj.sourceRoot;
+    const componentFilePath = (0, devkit_1.joinPathFragments)(sourceRoot, componentPath);
+    const componentDirectory = componentFilePath.replace(componentFilePath.slice(componentFilePath.lastIndexOf('/')), '');
+    const isPlainJs = componentFilePath.endsWith('.jsx') || componentFilePath.endsWith('.js');
+    const componentFileName = componentFilePath
+        .slice(componentFilePath.lastIndexOf('/') + 1)
+        .replace('.tsx', '')
+        .replace('.jsx', '')
+        .replace('.js', '');
+    const name = componentFileName;
+    const contents = host.read(componentFilePath, 'utf-8');
+    if (contents === null) {
+        throw new Error(`Failed to read ${componentFilePath}`);
+    }
+    const sourceFile = tsModule.createSourceFile(componentFilePath, contents, tsModule.ScriptTarget.Latest, true);
+    const cmpDeclaration = (0, ast_utils_1.getComponentNode)(sourceFile);
+    if (!cmpDeclaration) {
+        const componentNodes = (0, ast_utils_1.findExportDeclarationsForJsx)(sourceFile);
+        if (componentNodes?.length) {
+            componentNodes.forEach((declaration) => {
+                findPropsAndGenerateFile(host, sourceFile, declaration, componentDirectory, name, interactionTests, isPlainJs, componentNodes.length > 1);
+            });
+        }
+        else {
+            throw new Error(`Could not find any React component in file ${componentFilePath}`);
+        }
+    }
+    else {
+        findPropsAndGenerateFile(host, sourceFile, cmpDeclaration, componentDirectory, name, interactionTests, isPlainJs);
+    }
+}
+exports.createComponentStoriesFile = createComponentStoriesFile;
+function findPropsAndGenerateFile(host, sourceFile, cmpDeclaration, componentDirectory, name, interactionTests, isPlainJs, fromNodeArray) {
+    const { propsTypeName, props, argTypes } = (0, component_props_1.getDefaultsForComponent)(sourceFile, cmpDeclaration);
+    (0, devkit_1.generateFiles)(host, (0, devkit_1.joinPathFragments)(__dirname, `./files${isPlainJs ? '/jsx' : '/tsx'}`), (0, devkit_1.normalizePath)(componentDirectory), {
+        tmpl: '',
+        componentFileName: fromNodeArray
+            ? `${name}--${cmpDeclaration.name.text}`
+            : name,
+        componentImportFileName: name,
+        propsTypeName,
+        props,
+        argTypes,
+        componentName: cmpDeclaration.name.text,
+        interactionTests,
+    });
+}
+exports.findPropsAndGenerateFile = findPropsAndGenerateFile;
+async function componentStoryGenerator(host, schema) {
+    createComponentStoriesFile(host, {
+        ...schema,
+        interactionTests: schema.interactionTests ?? true,
+    });
+    if (!schema.skipFormat) {
+        await (0, devkit_1.formatFiles)(host);
+    }
+}
+exports.componentStoryGenerator = componentStoryGenerator;
+exports.default = componentStoryGenerator;

package/src/generators/component-story/files/jsx/__componentFileName__.stories.jsx__tmpl__

@@ -0,0 +1,29 @@
+import componentName from './<%= componentImportFileName %>';
+<% if ( interactionTests ) { %>
+import { within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+<% } %>
+
+export default {
+  component: <%= componentName %>,
+  title: '<%= componentName %>',<% if ( argTypes && argTypes.length > 0 ) { %> 
+  argTypes: {<% for (let argType of argTypes) { %>
+    <%= argType.name %>: { <%- argType.type %> : "<%- argType.actionText %>" },<% } %>
+}
+   <% } %> 
+};
+
+export const Primary = {
+  args: {<% for (let prop of props) { %>
+    <%= prop.name %>:  <%- prop.defaultValue %>,<% } %>
+  },
+};
+
+<% if ( interactionTests ) { %>
+export const Heading: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    expect(canvas.getByText(/Welcome to <%=componentName%>!/gi)).toBeTruthy();
+  },
+};
+<% } %>