[Bug]: 7.0.18 and newer broke custom non-prop args with Vue3 and Typescript

[johanvanhelden]

Describe the bug

In Storybook 7.0.17 and below I had the following list of args:

args: {
        withError: true,
        withHelpText: true,
        value: ['user'],
        
        label: 'Check group label',
        helpText: 'I am a helpful text that gives clear insight in what to do with this input.',
        disabled: false,
        autofocus: false,
        colSpan: '2/4',

        options: [
            { value: 'admin', label: 'Admin' },
            { value: 'user', label: 'User' },
            { value: '-', label: '-' },
        ],
    },

Where withError, withHelpText and value are custom controls. They are not props on the component in the story but used to make some reactive functionality work in the story itself. This worked great.

After updating to 7.0.18 or newer (tried the latest v8.0.5) they stopped working and the story completely broke.

I assume it's either because of this: #22814 or this #22717 but that's just a guess.

I get the following typescript error:

Type '<snip>' is not assignable to type 'Partial<ComponentPropsAndSlots<DefineComponent<snip>>>'.
  Object literal may only specify known properties, and 'withError' does not exist in type 'Partial<ComponentPropsAndSlots<DefineComponent<snip>>>'.

To Reproduce

Here is a fresh new reproduction environment with Storybook 8.0:
https://stackblitz.com/edit/github-vrknd1-cwcnes?file=package.json

See that the story is now broken and the withFooter is not functional and the footer is also not visible.

If you want to see it working, here is a reproduction environment running Storybook 7.0.17 where it worked:
https://stackblitz.com/edit/github-vrknd1-jpfa6f?file=package.json

The repro files can also be found here: https://gist.github.com/johanvanhelden/59abcf104c03d07e08d34eb11fd51511

System

Storybook Environment Info:

  System:
    OS: Linux 5.15 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700H
    Shell: 5.8.1 - /usr/bin/zsh
  Binaries:
    Node: 18.19.0 - ~/.nvm/versions/node/v18.19.0/bin/node
    npm: 10.2.3 - ~/.nvm/versions/node/v18.19.0/bin/npm <----- active
  Browsers:
    Chrome: 118.0.5993.70
  npmPackages:
    @storybook/addon-essentials: ^8.0.5 => 8.0.5
    @storybook/addon-interactions: ^8.0.5 => 8.0.5
    @storybook/addon-links: ^8.0.5 => 8.0.5
    @storybook/manager-api: ^8.0.5 => 8.0.5
    @storybook/testing-library: ^0.2.2 => 0.2.2
    @storybook/theming: ^8.0.5 => 8.0.5
    @storybook/vue3: ^8.0.5 => 8.0.5
    @storybook/vue3-vite: ^8.0.5 => 8.0.5
    storybook: ^8.0.5 => 8.0.5

Additional context

No response

[ChazUK]

I am also seeing a similar issue when using Angular when trying to add an additional custom control.

The error:

Type '{ label: { control: string; value: string; }; }' is not assignable to type 'Partial<ArgTypes<BunkButtonComponent>>'.
  Object literal may only specify known properties, and 'label' does not exist in type 'Partial<ArgTypes<BunkButtonComponent>>'.ts(2322)
index.d.ts(1153, 5): The expected type comes from property 'argTypes' which is declared here on type 'Meta<BunkButtonComponent>'

Story with custom control

import { Meta, StoryObj } from '@storybook/angular';

import { BunkButtonComponent } from './button.component';

const meta: Meta<BunkButtonComponent> = {
  title: 'Components/Button',
  component: BunkButtonComponent,
  parameters: {
    docs: false,
  },
  argTypes: {
    label: {
      control: 'string',
      value: 'Button',
    },
  },
};

export default meta;
type Story = StoryObj<BunkButtonComponent>;

const Template: Story = {
  render: (args) => {
    const { label, ...props } = args;
    return {
      props,
      template: `
      <bunk-button>
        ${label}
      </bunk-button>
    `,
    };
  },
};

export const Default: Story = {
  ...Template,
  args: {
    disabled: false,
    type: 'button',
    color: 'primary',
  },
};

Environment info:

  System:
    OS: macOS 13.4.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Binaries:
    Node: 16.18.1 - ~/.nvm/versions/node/v16.18.1/bin/node
    Yarn: 1.22.19
    npm: 8.19.2 - ~/.nvm/versions/node/v16.18.1/bin/npm
  Browsers:
    Chrome: 114.0.5735.198
    Edge: 114.0.1823.55
    Safari: 16.5.1
  npmPackages:
    @storybook/addon-essentials: ^7.0.26 => 7.0.26 
    @storybook/addon-interactions: ^7.0.26 => 7.0.26 
    @storybook/addon-links: ^7.0.26 => 7.0.26 
    @storybook/angular: ^7.0.26 => 7.0.26 
    @storybook/blocks: ^7.0.26 => 7.0.26 
    @storybook/cli: ^7.0.26 => 7.0.26 
    @storybook/testing-library: ^0.2.0 => 0.2.0

[supuwoerc]

+1

[valentinpalkovic]

Pinging @kasperpeulen here because the mentioned PRs are from you. Maybe you have an idea of what's going on.

[vanessayuenn]

@kasperpeulen @chakAs3 any idea what's going on here?

[chakAs3]

hi @vanessayuenn this is an old issue i don't what is wrong or if it is on the new releases. need a repro to look at it

[johanvanhelden]

hi @vanessayuenn this is an old issue i don't what is wrong or if it is on the new releases. need a repro to look at it

In my main post is a repro sandbox

[chakAs3]

@johanvanhelden ok i will check it out and get back to you if i have some question

[K3TH3R]

I'm seeing this currently on Storybook 8.0.0 with my Vue/Vite repo as well. I'm trying to add argTypes/args for the actions/interactions features. The onClicked implementations work as expected in the actions/interactions panels though.

[kasperpeulen]

@K3TH3R Could you provide a reproduction with https://storybook.new/

We actually have a test for this scenario:

storybook/code/renderers/vue3/src/public-types.test.ts

Lines 38 to 58 in 021c101

	it('Events are inferred from component', () => {
	const meta: Meta<typeof Button> = {
	component: Button,
	args: {
	label: 'good',
	disabled: false,
	onMyChangeEvent: (value) => {
	expectTypeOf(value).toEqualTypeOf<number>();
	},
	},
	render: (args) => {
	return h(Button, {
	...args,
	onMyChangeEvent: (value) => {
	expectTypeOf(value).toEqualTypeOf<number>();
	},
	});
	},
	};
	expectTypeOf(meta).toMatchTypeOf<Meta<typeof Button>>();
	});

[johanvanhelden]

@kasperpeulen @chakAs3 @vanessayuenn

I can confirm it is still broken in Storybook 8.0.

Here is a fresh new reproduction environment with Storybook 8.0:
https://stackblitz.com/edit/github-vrknd1-cwcnes?file=package.json

If you want to see it working, here is a reproduction environment running Storybook 7.0.17 where it worked:
https://stackblitz.com/edit/github-vrknd1-jpfa6f?file=package.json

[kasperpeulen]

@johanvanhelden This is probably related to this PR:
#22229

Which rolled back an unexpected breaking change in 7.0.

The correct way to write this in 7 and 8 is:

const meta = {
  component: Component,
  render: (args) => ({
    components: { Component },
    data: () => ({ args }),
    template: `
      <Component v-bind="args">
          Card content
          <template #footer v-if="args.withFooter">
              Footer for the card
          </template>
      </Component>
        `,
  }),
  args: {
    withFooter: false,
  },
};

[github-actions]

Hi there! Thank you for opening this issue, but it has been marked as stale because we need more information to move forward. Could you please provide us with the requested reproduction or additional information that could help us better understand the problem? We'd love to resolve this issue, but we can't do it without your help!

[johanvanhelden]

const meta = {
  component: Component,
  render: (args) => ({
    components: { Component },
    data: () => ({ args }),
    template: `
      <Component v-bind="args">
          Card content
          <template #footer v-if="args.withFooter">
              Footer for the card
          </template>
      </Component>
        `,
  }),
  args: {
    withFooter: false,
  },
};

Thank you! I've tried this method and it works flawlessly.