feat(vue): clean-up storybook generators for vue

nrwl · Sep 20, 2023 · 027bace · 027bace
1 parent 5f8abf1
commit 027bace
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 59 deletions.
diff --git a/packages/vue/src/generators/stories/__snapshots__/stories.app.spec.ts.snap b/packages/vue/src/generators/stories/__snapshots__/stories.app.spec.ts.snap
@@ -2,14 +2,14 @@
 
 exports[`vue:stories for applications should create the stories with interaction tests 1`] = `
 "import type { Meta, StoryObj } from '@storybook/vue3';
-import NxWelcome from './NxWelcome.vue';
+import nxWelcome from './NxWelcome.vue';
 
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
-const meta: Meta<typeof NxWelcome> = {
-  component: NxWelcome,
-  title: 'NxWelcome',
+const meta: Meta<typeof nxWelcome> = {
+  component: nxWelcome,
+  title: 'nxWelcome',
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -22,7 +22,7 @@ export const Heading: Story = {
   args: {},
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    await expect(canvas.getByText(/Welcome to NxWelcome!/gi)).toBeTruthy();
+    await expect(canvas.getByText(/Welcome to nxWelcome!/gi)).toBeTruthy();
   },
 };
 "
@@ -66,11 +66,11 @@ export const Heading: Story = {
 
 exports[`vue:stories for applications should create the stories without interaction tests 1`] = `
 "import type { Meta, StoryObj } from '@storybook/vue3';
-import NxWelcome from './NxWelcome.vue';
+import nxWelcome from './NxWelcome.vue';
 
-const meta: Meta<typeof NxWelcome> = {
-  component: NxWelcome,
-  title: 'NxWelcome',
+const meta: Meta<typeof nxWelcome> = {
+  component: nxWelcome,
+  title: 'nxWelcome',
 };
 export default meta;
 type Story = StoryObj<typeof meta>;

diff --git a/packages/vue/src/generators/stories/lib/component-story.ts b/packages/vue/src/generators/stories/lib/component-story.ts
@@ -1,17 +1,15 @@
+import { parse } from 'path';
 import {
   generateFiles,
   getProjects,
   joinPathFragments,
+  names,
   normalizePath,
   Tree,
 } from '@nx/devkit';
 import { ensureTypescript } from '@nx/js/src/utils/typescript/ensure-typescript';
 import { StorybookStoriesSchema } from '../stories';
-import {
-  camelCase,
-  createDefautPropsObject,
-  getDefinePropsObject,
-} from './utils';
+import { createDefaultPropsObject, getDefinePropsObject } from './utils';
 
 let tsModule: typeof import('typescript');
 
@@ -28,16 +26,8 @@ export function createComponentStories(
 
   const componentFilePath = joinPathFragments(sourceRoot, componentPath);
 
-  const componentDirectory = componentFilePath.replace(
-    componentFilePath.slice(componentFilePath.lastIndexOf('/')),
-    ''
-  );
-
-  const componentFileName = componentFilePath
-    .slice(componentFilePath.lastIndexOf('/') + 1)
-    .replace('.vue', '');
-
-  const name = componentFileName;
+  const { name: componentFileName, dir: componentDirectory } =
+    parse(componentFilePath);
   const contents = host.read(componentFilePath, 'utf-8');
   const propsObject = getDefinePropsObject(contents);
 
@@ -47,10 +37,10 @@ export function createComponentStories(
     normalizePath(componentDirectory),
     {
       tmpl: '',
-      componentFileName: name,
-      componentImportFileName: `${name}.vue`,
-      props: createDefautPropsObject(propsObject),
-      componentName: camelCase(name),
+      componentFileName: componentFileName,
+      componentImportFileName: `${componentFileName}.vue`,
+      props: createDefaultPropsObject(propsObject),
+      componentName: names(componentFileName).propertyName,
       interactionTests,
     }
   );

diff --git a/packages/vue/src/generators/stories/lib/utils.ts b/packages/vue/src/generators/stories/lib/utils.ts
@@ -1,37 +1,24 @@
-export function camelCase(input: string): string {
-  if (input.indexOf('-') > 1) {
-    return input
-      .toLowerCase()
-      .replace(/-(.)/g, (_match, group1) => group1.toUpperCase())
-      .replace('.', '');
-  } else {
-    return input;
-  }
-}
-
-export function createDefautPropsObject(propsObject: {
+export function createDefaultPropsObject(propsObject: {
   [key: string]: string;
 }): {
   name: string;
   defaultValue: any;
 }[] {
   const props = [];
-  for (const key in propsObject) {
-    if (Object.prototype.hasOwnProperty.call(propsObject, key)) {
-      let defaultValueOfProp;
-      const element = propsObject[key];
-      if (element === 'string') {
-        defaultValueOfProp = `'${key}'`;
-      } else if (element === 'boolean') {
-        defaultValueOfProp = false;
-      } else if (element === 'number') {
-        defaultValueOfProp = 0;
-      }
-      props.push({
-        name: key,
-        defaultValue: defaultValueOfProp,
-      });
+  for (const key of Object.keys(propsObject)) {
+    let defaultValueOfProp: string | boolean | number;
+    const element = propsObject[key];
+    if (element === 'string') {
+      defaultValueOfProp = `'${key}'`;
+    } else if (element === 'boolean') {
+      defaultValueOfProp = false;
+    } else if (element === 'number') {
+      defaultValueOfProp = 0;
     }
+    props.push({
+      name: key,
+      defaultValue: defaultValueOfProp,
+    });
   }
   return props;
 }

diff --git a/packages/vue/src/generators/stories/stories.lib.spec.ts b/packages/vue/src/generators/stories/stories.lib.spec.ts
@@ -1,10 +1,10 @@
-import { Tree } from '@nx/devkit';
+import { readJson, Tree } from '@nx/devkit';
 import storiesGenerator from './stories';
 import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
 import { Linter } from '@nx/linter';
 import libraryGenerator from '../library/library';
 
-const componentContent = `<script setup lang="ts">
+const componentContent = `<script setup lang='ts'>
 defineProps<{
   name: string;
   displayAge: boolean;
@@ -51,7 +51,7 @@ describe('vue:stories for libraries', () => {
       )
     ).toMatchSnapshot();
 
-    const packageJson = JSON.parse(appTree.read('package.json', 'utf-8'));
+    const packageJson = readJson(appTree, 'package.json');
     expect(
       packageJson.devDependencies['@storybook/addon-interactions']
     ).toBeDefined();
@@ -75,7 +75,7 @@ describe('vue:stories for libraries', () => {
         'utf-8'
       )
     ).toMatchSnapshot();
-    const packageJson = JSON.parse(appTree.read('package.json', 'utf-8'));
+    const packageJson = readJson(appTree, 'package.json');
     expect(
       packageJson.devDependencies['@storybook/addon-interactions']
     ).toBeUndefined();