Maintenance: extract shared helpers from new-story-templates

[mixelburg]

Closes #34456

What I did

The three new-story-file template generators (javascript.ts, typescript.ts, csf-factory-template.ts) contained near-identical component-import resolution and args serialization logic (~18 lines duplicated across all three). Any change to import generation logic had to be applied in three places.

Extracted shared helpers into a new helpers.ts file:

• BaseTemplateData interface — common fields shared by all three templates
• resolveComponentImport(data) — resolves importName + importStatement (with trailing semicolon) from template data
• serializeArgs(args) — serializes story args to args: {...}, or '' when empty

Each template interface now extends BaseTemplateData and delegates the shared logic to these helpers.

Also fixed a pre-existing inconsistency: the TS template omitted the trailing semicolon from the import statement string and added it in the outer template literal, while the JS and CSF templates included it directly. resolveComponentImport now always includes the semicolon so all three templates are consistent.

All 7 existing unit tests pass unchanged.

Summary by CodeRabbit

• Refactor
  • Consolidated component import resolution and story arguments serialization logic across story template generators. Common utilities have been extracted and standardized to improve code maintainability and consistency in how new story files are generated.

[coderabbitai]

📝 Walkthrough

Walkthrough

A new shared helpers module extracts common template data fields into BaseTemplateData and introduces resolveComponentImport and serializeArgs functions. Multiple template files are refactored to use these helpers instead of duplicating inline component import and args serialization logic.

Changes

Cohort / File(s)	Summary
New Shared Helpers helpers.ts	Introduces BaseTemplateData interface and two utility functions: resolveComponentImport generates consistent import statements based on export type, and serializeArgs formats story arguments into a string fragment.
Template Files Refactoring csf-factory-template.ts, javascript.ts, typescript.ts	Updated to delegate component import resolution and args serialization to shared helpers instead of inline duplication.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

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

16-19: Intentional divergence from serializeArgs helper due to different output format.

The CSF factory template correctly uses its own args serialization because the output format differs from the CSF3 templates:

• CSF factory needs: meta.story({ args: {...} }) or meta.story({})
• CSF3 needs: { args: {...}, } as a property inside an object literal

This is a valid reason not to use serializeArgs. However, for completeness and to fully realize the PR objective of centralizing args serialization, consider adding a helper for this format as well (e.g., serializeArgsAsObject). This is optional since the current implementation is correct.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@code/core/src/core-server/utils/new-story-templates/csf-factory-template.ts`
around lines 16 - 19, The current CSF factory template builds argsString inline
(variable argsString) instead of using the shared serializeArgs helper because
it needs a different shape; to centralize serialization add a new helper (e.g.,
serializeArgsAsObject) that returns either "{ args: <serializedArgs> }" or "{}"
and replace the inline argsString construction with a call to
serializeArgsAsObject(data.args), updating the CSF factory template to import
and use serializeArgsAsObject while leaving the existing serializeArgs for CSF3
unchanged.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@code/core/src/core-server/utils/new-story-templates/csf-factory-template.ts`:
- Around line 16-19: The current CSF factory template builds argsString inline
(variable argsString) instead of using the shared serializeArgs helper because
it needs a different shape; to centralize serialization add a new helper (e.g.,
serializeArgsAsObject) that returns either "{ args: <serializedArgs> }" or "{}"
and replace the inline argsString construction with a call to
serializeArgsAsObject(data.args), updating the CSF factory template to import
and use serializeArgsAsObject while leaving the existing serializeArgs for CSF3
unchanged.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 97ba4a6d-6330-4c4c-91a9-893c2b040d61

📥 Commits

Reviewing files that changed from the base of the PR and between 75fa10a and 2e00ffa.

📒 Files selected for processing (4)

• code/core/src/core-server/utils/new-story-templates/csf-factory-template.ts
• code/core/src/core-server/utils/new-story-templates/helpers.ts
• code/core/src/core-server/utils/new-story-templates/javascript.ts
• code/core/src/core-server/utils/new-story-templates/typescript.ts

[valentinpalkovic]

Closing due to #34453 (comment)