controls and @storybook/web-components-vite

[flipkickmedia]

Summary

The documentation at https://storybook.js.org/docs/essentials/controls#choosing-the-control-type provides an example:

// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
import type { Meta, StoryObj } from '@storybook/your-framework';
 
import { Button } from './Button';
 
const meta = {
  component: Button,
} satisfies Meta<typeof Button>;
 
export default meta;
type Story = StoryObj<typeof meta>;
 
export const Primary: Story = {
  args: {
    variant: 'primary',
  },
};

This doesnt work as there are errors on lines 6 and 14.

Additional information

The errors are:

const meta = {
  component: Button,
} satisfies Meta<typeof Button>;

Here component is not defined on Meta

TS2322: Type
({primary, backgroundColor, size, label, onClick}: ButtonProps) => TemplateResult<1>
is not assignable to type string
index.d.ts(642, 5): The expected type comes from property component which is declared here on type
Meta<({primary, backgroundColor, size, label, onClick}: ButtonProps) => TemplateResult<1>>

and

export const Primary: Story = {
  args: {
    variant: 'primary',
  },
};

The error here is that variant does not exist in Partial

S2353: Object literal may only specify known properties, and variant does not exist in type
Partial<{
    component: ({primary, backgroundColor, size, label, onClick}: ButtonProps) => TemplateResult<1>;
}>
index.d.ts(533, 5): The expected type comes from property args which is declared here on type Story

Im not sure what Im missing here. any help would be appreciated.

Create a reproduction

No response

[pascalduez]

Hello @flipkickmedia,

be sure to switch to "Web Components" while browsing the documentation, from the code you pasted it seems your still looking a React examples.

Not sure what your Button.js file is looking like but the gist of it should be:

import { html } from 'lit';

import './Button';
 
const meta = {
  title: 'Button',
  component: 'x-button',
  render: args => html`
    <x-button variant=${args.variant}></x-button>
  `
};
 
export default meta;
 
export const Primary = {
  args: {
    variant: 'primary',
  },
};

You'll also be able to find some examples in the sources directly.