### Describe the bug We have quite a couple of bugs reported for the csf-2-to-3 migration that seems to be related to inlining Template references when used with Template.bind. When the template is typed, we also loose the type reference: ![image](https://user-images.githubusercontent.com/1035299/223468706-8e397109-f6b0-4ee8-acb8-5a394580b84a.png) I actually don't know why we try to inline it. Here are some angular examples that had problems with this: ```ts import { StoryObj, StoryFn } from '@storybook/angular'; export default { title: "Component Library/Form/Field", component: BitFormFieldComponent, } as Meta; const AdvancedSelectTemplate: Story = (args: BitFormFieldComponent) => ({ props: args, template: `

Label

`, }); export const AdvancedSelect = AdvancedSelectTemplate.bind({}); AdvancedSelectTemplate.args = {}; const CustomTemplate: Story = (args) => ({ props: args, template: `

A-Z a-z 0-9

`, }); CustomTemplate.args = {}; export const Custom = CustomTemplate.bind({}); const Template: Story = (args) => ({ props: { createServiceAccount: false, importSecrets$: of(false), createSecret: false, createProject: false, ...args, }, template: `

`, }); export const Empty = Template.bind({}); export const Partial = Template.bind({}); Partial.args = { ...Template.args, createServiceAccount: true, createProject: true, }; export const Full = Template.bind({}); Full.args = { ...Template.args, createServiceAccount: true, createProject: true, createSecret: true, importSecrets$: of(true).pipe(delay(0), startWith(false)), }; ``` It gets transformed to the below. Leading to bugs and duplication of code: ```ts import { StoryObj, StoryFn } from '@storybook/angular'; export default { title: 'Component Library/Form/Field', component: BitFormFieldComponent, } as Meta; export const AdvancedSelect = { render: (args: BitFormFieldComponent) => ({ props: args, template: `

Label

`, }), }; AdvancedSelectTemplate.args = {}; CustomTemplate.args = {}; export const Custom = { render: (args) => ({ props: args, template: `

A-Z a-z 0-9

`, }), }; export const Empty = { render: (args) => ({ props: { createServiceAccount: false, importSecrets$: of(false), createSecret: false, createProject: false, ...args, }, template: `

`, }), }; export const Partial = { render: (args) => ({ props: { createServiceAccount: false, importSecrets$: of(false), createSecret: false, createProject: false, ...args, }, template: `

`, }), args: { ...Template.args, createServiceAccount: true, createProject: true, }, }; export const Full = { render: (args) => ({ props: { createServiceAccount: false, importSecrets$: of(false), createSecret: false, createProject: false, ...args, }, template: `

`, }), args: { ...Template.args, createServiceAccount: true, createProject: true, createSecret: true, importSecrets$: of(true).pipe(delay(0), startWith(false)), }, }; ``` cc @shilman ### To Reproduce _No response_ ### System ```shell Any system. ``` ### Additional context _No response_

[Bug]: csf-2-to-3 migration inlines Template references which is buggy and leads to duplicate code #21460

Company

Community

Support

Connect