From 027bace9590ee1b0ae38282a3711298039b372c5 Mon Sep 17 00:00:00 2001 From: Jack Hsu Date: Mon, 18 Sep 2023 13:18:17 -0400 Subject: [PATCH] feat(vue): clean-up storybook generators for vue --- .../__snapshots__/stories.app.spec.ts.snap | 18 ++++---- .../generators/stories/lib/component-story.ts | 28 ++++--------- .../vue/src/generators/stories/lib/utils.ts | 41 +++++++------------ .../generators/stories/stories.lib.spec.ts | 8 ++-- 4 files changed, 36 insertions(+), 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 index 198399979a1d2..574928406fb9f 100644 --- 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 = { - component: NxWelcome, - title: 'NxWelcome', +const meta: Meta = { + component: nxWelcome, + title: 'nxWelcome', }; export default meta; type Story = StoryObj; @@ -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 = { - component: NxWelcome, - title: 'NxWelcome', +const meta: Meta = { + component: nxWelcome, + title: 'nxWelcome', }; export default meta; type Story = StoryObj; diff --git a/packages/vue/src/generators/stories/lib/component-story.ts b/packages/vue/src/generators/stories/lib/component-story.ts index de91aafdbbbf0..fcc89166fee20 100644 --- 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 index 61a9dcd1be8a7..8b98d7f69898a 100644 --- 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 index 5b58dd3d40a9a..c1eb5f5fd2ff1 100644 --- 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 = `