Maintenance: extract shared helpers from new-story-templates

code/core/src/core-server/utils/new-story-templates/csf-factory-template.ts

@@ -1,27 +1,14 @@
 import { dedent } from 'ts-dedent';
 
-import { getComponentVariableName } from '../get-component-variable-name.ts';
-
-interface CsfFactoryTemplateData {
-  /** The components file name without the extension */
-  basenameWithoutExtension: string;
-  componentExportName: string;
-  componentIsDefaultExport: boolean;
-  /** The exported name of the default story */
-  exportedStoryName: string;
+import { type BaseTemplateData, resolveComponentImport } from './helpers.ts';
+
+interface CsfFactoryTemplateData extends BaseTemplateData {
   /** The import path for the preview config (if not provided, uses '#.storybook/preview') */
   previewImportPath?: string;
-  /** The args to include in the story */
-  args?: Record<string, any>;
 }
 
 export async function getCsfFactoryTemplateForNewStoryFile(data: CsfFactoryTemplateData) {
-  const importName = data.componentIsDefaultExport
-    ? await getComponentVariableName(data.basenameWithoutExtension)
-    : data.componentExportName;
-  const importStatement = data.componentIsDefaultExport
-    ? `import ${importName} from './${data.basenameWithoutExtension}';`
-    : `import { ${importName} } from './${data.basenameWithoutExtension}';`;
+  const { importName, importStatement } = await resolveComponentImport(data);
   const previewImport = data.previewImportPath
     ? `import preview from '${data.previewImportPath}';`
     : `import preview from '#.storybook/preview';`;

code/core/src/core-server/utils/new-story-templates/helpers.ts

@@ -0,0 +1,38 @@
+import { getComponentVariableName } from '../get-component-variable-name.ts';
+
+export interface BaseTemplateData {
+  /** The components file name without the extension */
+  basenameWithoutExtension: string;
+  componentExportName: string;
+  componentIsDefaultExport: boolean;
+  /** The exported name of the default story */
+  exportedStoryName: string;
+  /** The args to include in the story */
+  args?: Record<string, any>;
+}
+
+/**
+ * Resolves the component import name and statement from template data.
+ * Returns an importStatement that always includes a trailing semicolon.
+ */
+export async function resolveComponentImport(
+  data: Pick<
+    BaseTemplateData,
+    'componentIsDefaultExport' | 'componentExportName' | 'basenameWithoutExtension'
+  >
+): Promise<{ importName: string; importStatement: string }> {
+  const importName = data.componentIsDefaultExport
+    ? await getComponentVariableName(data.basenameWithoutExtension)
+    : data.componentExportName;
+  const importStatement = data.componentIsDefaultExport
+    ? `import ${importName} from './${data.basenameWithoutExtension}';`
+    : `import { ${importName} } from './${data.basenameWithoutExtension}';`;
+  return { importName, importStatement };
+}
+
+/**
+ * Serializes story args into a `args: { ... },` string, or empty string if no args.
+ */
+export function serializeArgs(args: Record<string, any> | undefined): string {
+  return args && Object.keys(args).length > 0 ? `args: ${JSON.stringify(args, null, 2)},` : '';
+}

code/core/src/core-server/utils/new-story-templates/javascript.ts

@@ -1,29 +1,14 @@
 import { dedent } from 'ts-dedent';
 
-import { getComponentVariableName } from '../get-component-variable-name.ts';
-
-interface JavaScriptTemplateData {
-  /** The components file name without the extension */
-  basenameWithoutExtension: string;
-  componentExportName: string;
-  componentIsDefaultExport: boolean;
-  /** The exported name of the default story */
-  exportedStoryName: string;
-  /** The args to include in the story */
-  args?: Record<string, any>;
-}
+import { type BaseTemplateData, resolveComponentImport, serializeArgs } from './helpers.ts';
+
+interface JavaScriptTemplateData extends BaseTemplateData {}
 
 export async function getJavaScriptTemplateForNewStoryFile(data: JavaScriptTemplateData) {
-  const importName = data.componentIsDefaultExport
-    ? await getComponentVariableName(data.basenameWithoutExtension)
-    : data.componentExportName;
-  const importStatement = data.componentIsDefaultExport
-    ? `import ${importName} from './${data.basenameWithoutExtension}';`
-    : `import { ${importName} } from './${data.basenameWithoutExtension}';`;
-
-  const hasArgs = Boolean(data.args && Object.keys(data.args).length > 0);
-  const argsString = hasArgs ? `args: ${JSON.stringify(data.args, null, 2)},` : '';
-  const storyExport = hasArgs
+  const { importName, importStatement } = await resolveComponentImport(data);
+
+  const argsString = serializeArgs(data.args);
+  const storyExport = argsString
     ? dedent`
       export const ${data.exportedStoryName} = {
         ${argsString}

code/core/src/core-server/utils/new-story-templates/typescript.ts

@@ -1,31 +1,17 @@
 import { dedent } from 'ts-dedent';
 
-import { getComponentVariableName } from '../get-component-variable-name.ts';
+import { type BaseTemplateData, resolveComponentImport, serializeArgs } from './helpers.ts';
 
-interface TypeScriptTemplateData {
-  /** The components file name without the extension */
-  basenameWithoutExtension: string;
-  componentExportName: string;
-  componentIsDefaultExport: boolean;
+interface TypeScriptTemplateData extends BaseTemplateData {
   /** The framework package name, e.g. @storybook/nextjs */
   frameworkPackage: string;
-  /** The exported name of the default story */
-  exportedStoryName: string;
-  /** The args to include in the story */
-  args?: Record<string, any>;
 }
 
 export async function getTypeScriptTemplateForNewStoryFile(data: TypeScriptTemplateData) {
-  const importName = data.componentIsDefaultExport
-    ? await getComponentVariableName(data.basenameWithoutExtension)
-    : data.componentExportName;
-  const importStatement = data.componentIsDefaultExport
-    ? `import ${importName} from './${data.basenameWithoutExtension}'`
-    : `import { ${importName} } from './${data.basenameWithoutExtension}'`;
-
-  const hasArgs = Boolean(data.args && Object.keys(data.args).length > 0);
-  const argsString = hasArgs ? `args: ${JSON.stringify(data.args, null, 2)},` : '';
-  const storyExport = hasArgs
+  const { importName, importStatement } = await resolveComponentImport(data);
+
+  const argsString = serializeArgs(data.args);
+  const storyExport = argsString
     ? dedent`
       export const ${data.exportedStoryName}: Story = {
         ${argsString}
@@ -36,7 +22,7 @@ export async function getTypeScriptTemplateForNewStoryFile(data: TypeScriptTempl
   return dedent`
   import type { Meta, StoryObj } from '${data.frameworkPackage}';
 
-  ${importStatement};
+  ${importStatement}
 
   const meta = {
     component: ${importName},