@nx/react 16.6.0-beta.1 → 16.6.0-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "16.6.0-beta.1",
+  "version": "16.6.0-beta.3",
   "private": false,
   "description": "The React plugin for Nx contains executors and generators for managing React applications and libraries within an Nx workspace. It provides:\n\n\n- Integration with libraries such as Jest, Cypress, and Storybook.\n\n- Generators for applications, libraries, components, hooks, and more.\n\n- Library build support for publishing packages to npm or other registries.\n\n- Utilities for automatic workspace refactoring.",
   "repository": {
@@ -31,11 +31,11 @@
     "migrations": "./migrations.json"
   },
   "dependencies": {
-    "@nrwl/react": "16.6.0-beta.1",
-    "@nx/devkit": "16.6.0-beta.1",
-    "@nx/js": "16.6.0-beta.1",
-    "@nx/linter": "16.6.0-beta.1",
-    "@nx/web": "16.6.0-beta.1",
+    "@nrwl/react": "16.6.0-beta.3",
+    "@nx/devkit": "16.6.0-beta.3",
+    "@nx/js": "16.6.0-beta.3",
+    "@nx/linter": "16.6.0-beta.3",
+    "@nx/web": "16.6.0-beta.3",
     "@phenomnomnominal/tsquery": "~5.0.1",
     "@svgr/webpack": "^8.0.1",
     "chalk": "^4.1.0",
@@ -46,5 +46,5 @@
     "access": "public"
   },
   "types": "./index.d.ts",
-  "gitHead": "cf9f5cbe6a7ce3b916ec6505dc8488f669cbc52b"
+  "gitHead": "cd8c61d7a3b8ab9bc7bab068f5ca49bbf14abbf5"
 }

package/src/executors/module-federation-dev-server/module-federation-dev-server.impl.js

@@ -9,19 +9,37 @@ const chalk = require("chalk");
 const wait_for_port_open_1 = require("@nx/web/src/utils/wait-for-port-open");
 const find_matching_projects_1 = require("nx/src/utils/find-matching-projects");
 const child_process_1 = require("child_process");
+const fs_1 = require("fs");
+const tsnode_register_1 = require("@nx/js/src/utils/typescript/tsnode-register");
+function getBuildOptions(buildTarget, context) {
+    const target = (0, devkit_1.parseTargetString)(buildTarget, context.projectGraph);
+    const buildOptions = (0, devkit_1.readTargetOptions)(target, context);
+    return Object.assign({}, buildOptions);
+}
+function getModuleFederationConfig(tsconfigPath, workspaceRoot, projectRoot) {
+    const moduleFederationConfigPathJS = (0, path_1.join)(workspaceRoot, projectRoot, 'module-federation.config.js');
+    const moduleFederationConfigPathTS = (0, path_1.join)(workspaceRoot, projectRoot, 'module-federation.config.ts');
+    let moduleFederationConfigPath = moduleFederationConfigPathJS;
+    if ((0, fs_1.existsSync)(moduleFederationConfigPathTS)) {
+        (0, tsnode_register_1.tsNodeRegister)(moduleFederationConfigPathTS, tsconfigPath);
+        moduleFederationConfigPath = moduleFederationConfigPathTS;
+    }
+    try {
+        const config = require(moduleFederationConfigPath);
+        return config.default || config;
+    }
+    catch (_a) {
+        throw new Error(`Could not load ${moduleFederationConfigPath}. Was this project generated with "@nx/react:host"?\nSee: https://nx.dev/recipes/module-federation/faster-builds`);
+    }
+}
 function moduleFederationDevServer(options, context) {
     var _a, _b;
     return tslib_1.__asyncGenerator(this, arguments, function* moduleFederationDevServer_1() {
+        const nxBin = require.resolve('nx');
         const currIter = (0, dev_server_impl_1.default)(options, context);
         const p = context.projectsConfigurations.projects[context.projectName];
-        const moduleFederationConfigPath = (0, path_1.join)(context.root, p.root, 'module-federation.config.js');
-        let moduleFederationConfig;
-        try {
-            moduleFederationConfig = require(moduleFederationConfigPath);
-        }
-        catch (_c) {
-            throw new Error(`Could not load ${moduleFederationConfigPath}. Was this project generated with "@nx/react:host"?\nSee: https://nx.dev/recipes/module-federation/faster-builds`);
-        }
+        const buildOptions = getBuildOptions(options.buildTarget, context);
+        const moduleFederationConfig = getModuleFederationConfig(buildOptions.tsConfig, context.root, p.root);
         const remotesToSkip = new Set((_a = (0, find_matching_projects_1.findMatchingProjects)(options.skipRemotes, context.projectGraph.nodes)) !== null && _a !== void 0 ? _a : []);
         if (remotesToSkip.size > 0) {
             devkit_1.logger.info(`Remotes not served automatically: ${[...remotesToSkip.values()].join(', ')}`);
@@ -50,7 +68,6 @@ function moduleFederationDevServer(options, context) {
                 ? (0, find_matching_projects_1.findMatchingProjects)(options.devRemotes, context.projectGraph.nodes)
                 : (0, find_matching_projects_1.findMatchingProjects)([options.devRemotes], context.projectGraph.nodes);
         devkit_1.logger.info(`NX Starting module federation dev-server for ${chalk.bold(context.projectName)} with ${knownRemotes.length} remotes`);
-        const nxBin = require.resolve('nx');
         const devRemoteIters = [];
         let isCollectingStaticRemoteOutput = true;
         for (const app of knownRemotes) {
@@ -110,7 +127,7 @@ function moduleFederationDevServer(options, context) {
                 devkit_1.logger.info(`NX All remotes started, server ready at http://localhost:${options.port}`);
                 next({ success: true, baseUrl: `http://localhost:${options.port}` });
             }
-            catch (_d) {
+            catch (_c) {
                 throw new Error(`Timed out waiting for remote to start. Check above for any errors.`);
             }
             finally {

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

@@ -3,10 +3,11 @@ 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 }: CreateComponentStoriesFileSchema): void;
-export declare function findPropsAndGenerateFile(host: Tree, sourceFile: ts.SourceFile, cmpDeclaration: ts.Node, componentDirectory: string, name: string, isPlainJs: boolean, fileExt: string, fromNodeArray?: boolean): void;
+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;
 export declare const componentStorySchematic: (generatorOptions: CreateComponentStoriesFileSchema) => (tree: any, context: any) => Promise<any>;

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

@@ -7,7 +7,7 @@ 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 }) {
+function createComponentStoriesFile(host, { project, componentPath, interactionTests }) {
     if (!tsModule) {
         tsModule = (0, ensure_typescript_1.ensureTypescript)();
     }
@@ -16,13 +16,6 @@ function createComponentStoriesFile(host, { project, componentPath }) {
     const componentFilePath = (0, devkit_1.joinPathFragments)(sourceRoot, componentPath);
     const componentDirectory = componentFilePath.replace(componentFilePath.slice(componentFilePath.lastIndexOf('/')), '');
     const isPlainJs = componentFilePath.endsWith('.jsx') || componentFilePath.endsWith('.js');
-    let fileExt = 'tsx';
-    if (componentFilePath.endsWith('.jsx')) {
-        fileExt = 'jsx';
-    }
-    else if (componentFilePath.endsWith('.js')) {
-        fileExt = 'js';
-    }
     const componentFileName = componentFilePath
         .slice(componentFilePath.lastIndexOf('/') + 1)
         .replace('.tsx', '')
@@ -39,7 +32,7 @@ function createComponentStoriesFile(host, { project, componentPath }) {
         const componentNodes = (0, ast_utils_1.findExportDeclarationsForJsx)(sourceFile);
         if (componentNodes === null || componentNodes === void 0 ? void 0 : componentNodes.length) {
             componentNodes.forEach((declaration) => {
-                findPropsAndGenerateFile(host, sourceFile, declaration, componentDirectory, name, isPlainJs, fileExt, componentNodes.length > 1);
+                findPropsAndGenerateFile(host, sourceFile, declaration, componentDirectory, name, interactionTests, isPlainJs, componentNodes.length > 1);
             });
         }
         else {
@@ -47,13 +40,14 @@ function createComponentStoriesFile(host, { project, componentPath }) {
         }
     }
     else {
-        findPropsAndGenerateFile(host, sourceFile, cmpDeclaration, componentDirectory, name, isPlainJs, fileExt);
+        findPropsAndGenerateFile(host, sourceFile, cmpDeclaration, componentDirectory, name, interactionTests, isPlainJs);
     }
 }
 exports.createComponentStoriesFile = createComponentStoriesFile;
-function findPropsAndGenerateFile(host, sourceFile, cmpDeclaration, componentDirectory, name, isPlainJs, fileExt, fromNodeArray) {
+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'), (0, devkit_1.normalizePath)(componentDirectory), {
+    (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,
@@ -62,14 +56,14 @@ function findPropsAndGenerateFile(host, sourceFile, cmpDeclaration, componentDir
         props,
         argTypes,
         componentName: cmpDeclaration.name.text,
-        isPlainJs,
-        fileExt,
+        interactionTests,
     });
 }
 exports.findPropsAndGenerateFile = findPropsAndGenerateFile;
 function componentStoryGenerator(host, schema) {
+    var _a;
     return tslib_1.__awaiter(this, void 0, void 0, function* () {
-        createComponentStoriesFile(host, schema);
+        createComponentStoriesFile(host, Object.assign(Object.assign({}, schema), { interactionTests: (_a = schema.interactionTests) !== null && _a !== void 0 ? _a : true }));
         if (!schema.skipFormat) {
             yield (0, devkit_1.formatFiles)(host);
         }

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();
+  },
+};
+<% } %>

package/src/generators/component-story/files/tsx/__componentFileName__.stories.tsx__tmpl__

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { <%= componentName %>  } from './<%= componentImportFileName %>';
+<% if ( interactionTests ) { %>
+import { within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+<% } %>
+
+const meta: Meta<typeof <%= componentName %>> = {
+  component: <%= componentName %>,
+  title: '<%= componentName %>',<% if ( argTypes && argTypes.length > 0 ) { %> 
+  argTypes: {<% for (let argType of argTypes) { %>
+    <%= argType.name %>: { <%- argType.type %> : "<%- argType.actionText %>" },<% } %>
+}
+   <% } %> 
+};
+export default meta;
+type Story = StoryObj<typeof <%= componentName %>>;
+
+
+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();
+  },
+};
+<% } %>

package/src/generators/component-story/schema.json

@@ -30,6 +30,12 @@
       "type": "boolean",
       "default": false,
       "x-priority": "internal"
+    },
+    "interactionTests": {
+      "type": "boolean",
+      "description": "Set up Storybook interaction tests.",
+      "default": true,
+      "x-priority": "important"
     }
   },
   "required": ["project", "componentPath"]

package/src/generators/stories/schema.json

@@ -20,12 +20,19 @@
     "generateCypressSpecs": {
       "type": "boolean",
       "description": "Automatically generate `*.spec.ts` files in the cypress e2e app generated by the cypress-configure generator.",
-      "x-prompt": "Do you want to generate Cypress specs as well?",
-      "x-priority": "important"
+      "x-deprecated": "Please use Storybook interaction tests instead."
     },
     "cypressProject": {
       "type": "string",
-      "description": "The Cypress project to generate the stories under. This is inferred from `project` by default."
+      "description": "The Cypress project to generate the stories under. This is inferred from `project` by default.",
+      "x-deprecated": "Please use Storybook interaction tests instead."
+    },
+    "interactionTests": {
+      "type": "boolean",
+      "description": "Set up Storybook interaction tests.",
+      "x-prompt": "Do you want to set up Storybook interaction tests?",
+      "x-priority": "important",
+      "default": true
     },
     "js": {
       "type": "boolean",

package/src/generators/stories/stories.d.ts

@@ -1,15 +1,16 @@
 import { ProjectConfiguration, Tree } from '@nx/devkit';
 export interface StorybookStoriesSchema {
     project: string;
-    generateCypressSpecs: boolean;
+    interactionTests?: boolean;
     js?: boolean;
     cypressProject?: string;
+    generateCypressSpecs?: boolean;
     ignorePaths?: string[];
     skipFormat?: boolean;
 }
 export declare function projectRootPath(tree: Tree, config: ProjectConfiguration): Promise<string>;
 export declare function containsComponentDeclaration(tree: Tree, componentPath: string): boolean;
-export declare function createAllStories(tree: Tree, projectName: string, generateCypressSpecs: boolean, js: boolean, cypressProject?: string, ignorePaths?: string[]): Promise<void>;
+export declare function createAllStories(tree: Tree, projectName: string, interactionTests: boolean, js: boolean, generateCypressSpecs?: boolean, cypressProject?: string, ignorePaths?: string[]): Promise<void>;
 export declare function storiesGenerator(host: Tree, schema: StorybookStoriesSchema): Promise<void>;
 export default storiesGenerator;
 export declare const storiesSchematic: (generatorOptions: StorybookStoriesSchema) => (tree: any, context: any) => Promise<any>;

package/src/generators/stories/stories.js

@@ -47,7 +47,7 @@ function containsComponentDeclaration(tree, componentPath) {
         ((_a = (0, ast_utils_1.findExportDeclarationsForJsx)(sourceFile)) === null || _a === void 0 ? void 0 : _a.length));
 }
 exports.containsComponentDeclaration = containsComponentDeclaration;
-function createAllStories(tree, projectName, generateCypressSpecs, js, cypressProject, ignorePaths) {
+function createAllStories(tree, projectName, interactionTests, js, generateCypressSpecs, cypressProject, ignorePaths) {
     return tslib_1.__awaiter(this, void 0, void 0, function* () {
         const { isTheFileAStory } = yield Promise.resolve().then(() => require('@nx/storybook/src/utils/utilities'));
         const projects = (0, devkit_1.getProjects)(tree);
@@ -90,6 +90,7 @@ function createAllStories(tree, projectName, generateCypressSpecs, js, cypressPr
                 componentPath: relativeCmpDir,
                 project: projectName,
                 skipFormat: true,
+                interactionTests,
             });
             if (generateCypressSpecs && e2eProject) {
                 yield (0, component_cypress_spec_1.default)(tree, {
@@ -105,8 +106,9 @@ function createAllStories(tree, projectName, generateCypressSpecs, js, cypressPr
 }
 exports.createAllStories = createAllStories;
 function storiesGenerator(host, schema) {
+    var _a;
     return tslib_1.__awaiter(this, void 0, void 0, function* () {
-        yield createAllStories(host, schema.project, schema.generateCypressSpecs, schema.js, schema.cypressProject, schema.ignorePaths);
+        yield createAllStories(host, schema.project, (_a = schema.interactionTests) !== null && _a !== void 0 ? _a : true, schema.js, schema.generateCypressSpecs, schema.cypressProject, schema.ignorePaths);
         if (!schema.skipFormat) {
             yield (0, devkit_1.formatFiles)(host);
         }

package/src/generators/storybook-configuration/configuration.js

@@ -6,7 +6,9 @@ const stories_1 = require("../stories/stories");
 const devkit_1 = require("@nx/devkit");
 const versions_1 = require("../../utils/versions");
 function generateStories(host, schema) {
+    var _a;
     return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        // TODO(katerina): remove Cypress for Nx 18
         (0, devkit_1.ensurePackage)('@nx/cypress', versions_1.nxVersion);
         const { getE2eProjectName } = yield Promise.resolve().then(() => require('@nx/cypress/src/utils/project-name'));
         const projectConfig = (0, devkit_1.readProjectConfiguration)(host, schema.name);
@@ -18,19 +20,21 @@ function generateStories(host, schema) {
             cypressProject,
             ignorePaths: schema.ignorePaths,
             skipFormat: true,
+            interactionTests: (_a = schema.interactionTests) !== null && _a !== void 0 ? _a : true,
         });
     });
 }
 function storybookConfigurationGenerator(host, schema) {
-    var _a, _b;
+    var _a, _b, _c, _d, _e, _f;
     return tslib_1.__awaiter(this, void 0, void 0, function* () {
         const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/storybook', versions_1.nxVersion);
-        let bundler = 'vite';
+        let uiFramework = '@storybook/react-vite';
         const projectConfig = (0, devkit_1.readProjectConfiguration)(host, schema.name);
-        if (projectConfig.projectType === 'application' &&
-            (((_a = projectConfig.targets['build']) === null || _a === void 0 ? void 0 : _a.executor) === '@nx/webpack:webpack' ||
-                ((_b = projectConfig.targets['build']) === null || _b === void 0 ? void 0 : _b.executor) === '@nrwl/webpack:webpack')) {
-            bundler = 'webpack';
+        if (((_a = projectConfig.targets['build']) === null || _a === void 0 ? void 0 : _a.executor) === '@nx/webpack:webpack' ||
+            ((_b = projectConfig.targets['build']) === null || _b === void 0 ? void 0 : _b.executor) === '@nrwl/webpack:webpack' ||
+            ((_c = projectConfig.targets['build']) === null || _c === void 0 ? void 0 : _c.executor) === '@nx/rollup:rollup' ||
+            ((_d = projectConfig.targets['build']) === null || _d === void 0 ? void 0 : _d.executor) === '@nrwl/rollup:rollup') {
+            uiFramework = '@storybook/react-webpack5';
         }
         const installTask = yield configurationGenerator(host, {
             name: schema.name,
@@ -38,12 +42,10 @@ function storybookConfigurationGenerator(host, schema) {
             js: schema.js,
             linter: schema.linter,
             cypressDirectory: schema.cypressDirectory,
-            tsConfiguration: schema.tsConfiguration,
-            configureTestRunner: schema.configureTestRunner,
+            tsConfiguration: (_e = schema.tsConfiguration) !== null && _e !== void 0 ? _e : true,
+            interactionTests: (_f = schema.interactionTests) !== null && _f !== void 0 ? _f : true,
             configureStaticServe: schema.configureStaticServe,
-            uiFramework: bundler === 'vite'
-                ? '@storybook/react-vite'
-                : '@storybook/react-webpack5',
+            uiFramework: uiFramework,
             skipFormat: true,
         });
         if (schema.generateStories) {

package/src/generators/storybook-configuration/schema.d.ts

@@ -2,14 +2,14 @@ import { Linter } from '@nx/linter';
 
 export interface StorybookConfigureSchema {
   name: string;
-  configureCypress: boolean;
+  interactionTests?: boolean;
   generateStories?: boolean;
+  configureCypress?: boolean;
   generateCypressSpecs?: boolean;
   js?: boolean;
   tsConfiguration?: boolean;
   linter?: Linter;
   cypressDirectory?: string;
   ignorePaths?: string[];
-  configureTestRunner?: boolean;
   configureStaticServe?: boolean;
 }

package/src/generators/storybook-configuration/schema.json

@@ -18,12 +18,18 @@
       "x-dropdown": "projects",
       "x-priority": "important"
     },
+    "interactionTests": {
+      "type": "boolean",
+      "description": "Set up Storybook interaction tests.",
+      "x-prompt": "Do you want to set up Storybook interaction tests?",
+      "x-priority": "important",
+      "alias": ["configureTestRunner"],
+      "default": true
+    },
     "configureCypress": {
       "type": "boolean",
       "description": "Run the cypress-configure generator.",
-      "x-prompt": "Configure a cypress e2e app to run against the storybook instance?",
-      "default": true,
-      "x-priority": "important"
+      "x-deprecated": "Please use Storybook interaction tests instead."
     },
     "generateStories": {
       "type": "boolean",
@@ -35,9 +41,7 @@
     "generateCypressSpecs": {
       "type": "boolean",
       "description": "Automatically generate test files in the Cypress E2E app generated by the `cypress-configure` generator.",
-      "x-prompt": "Automatically generate test files in the Cypress E2E app generated by the cypress-configure generator?",
-      "default": true,
-      "x-priority": "important"
+      "x-deprecated": "Please use Storybook interaction tests instead."
     },
     "configureStaticServe": {
       "type": "boolean",
@@ -48,7 +52,8 @@
     },
     "cypressDirectory": {
       "type": "string",
-      "description": "A directory where the Cypress project will be placed. Placed at the root by default."
+      "description": "A directory where the Cypress project will be placed. Placed at the root by default.",
+      "x-deprecated": "Please use Storybook interaction tests instead."
     },
     "js": {
       "type": "boolean",
@@ -58,7 +63,7 @@
     "tsConfiguration": {
       "type": "boolean",
       "description": "Configure your project with TypeScript. Generate main.ts and preview.ts files, instead of main.js and preview.js.",
-      "default": false
+      "default": true
     },
     "linter": {
       "description": "The tool to use for running lint checks.",
@@ -80,10 +85,6 @@
         "**/**/src/**/*.other.*",
         "libs/my-lib/src/not-stories/**,**/**/src/**/*.other.*,apps/my-app/**/*.something.ts"
       ]
-    },
-    "configureTestRunner": {
-      "type": "boolean",
-      "description": "Add a Storybook Test-Runner target."
     }
   },
   "required": ["name"],

package/src/generators/component-story/files/__componentFileName__.stories.__fileExt__

@@ -1,32 +0,0 @@
-<% if ( !isPlainJs ) { %>import type { Meta } from '@storybook/react';<% } %>
-import<% if ( !isPlainJs ) { %> { <% } %> <%= componentName %> <% if ( !isPlainJs ) { %> } <% } %> from './<%= componentImportFileName %>';
-
-<% if ( isPlainJs ) { %>
-export default {
-  component: <%= componentName %>,
-  title: '<%= componentName %>',<% if ( argTypes && argTypes.length > 0 ) { %> 
-  argTypes: {<% for (let argType of argTypes) { %>
-    <%= argType.name %>: { <%- argType.type %> : "<%- argType.actionText %>" },<% } %>
-}
-   <% } %> 
-};
-<% } %>
-
-
-<% if ( !isPlainJs ) { %>
-const Story: Meta<typeof <%= componentName %>> = {
-  component: <%= componentName %>,
-  title: '<%= componentName %>',<% if ( argTypes && argTypes.length > 0 ) { %> 
-  argTypes: {<% for (let argType of argTypes) { %>
-    <%= argType.name %>: { <%- argType.type %> : "<%- argType.actionText %>" },<% } %>
-}
-   <% } %> 
-};
-export default Story;
-<% } %>
-
-export const Primary = {
-  args: {<% for (let prop of props) { %>
-    <%= prop.name %>:  <%- prop.defaultValue %>,<% } %>
-  },
-};