Property 'args' does not exist on type (args: Props)

user_13025362 0
Viewed 5998

I can't understand why I'm receiving this error Property 'args' does not exist on type (args: Props) => Element

I'm trying to add args to my Storybook component. This is how my .stories.tsx file looks like

import React from "react";
import { Story, Meta } from "@storybook/react";

import { Props, Button } from ".";

export default {
  title: "General/Button",
  component: Button
} as Meta;

const Template = (args: Props) => <Button {...args} />;

export const PrimaryA = Template.bind({});

PrimaryA.args = {  <-- ERROR
  variant: "primary"
};

And simple .tsx file of Button component

import { css } from "@emotion/react";
import React from "react";

export interface Props {
   args: {
     variant: string;
    children?: React.ReactNode;
  },
}

const style = css`
  .primary {
    background: #0082ff;
    border-radius: 8px;
    width: 150px;
    height: 50px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;
  }
`;

export function Button(props: Props) {
  const { variant = "primary", children = "Primary", ...rest } = props.args;
  return (
    <div css={style} className={`button ${variant}`} {...rest}>
      {children}
    </div>
  );
}

How you can see I have there is already .args property in the interface Props. I have no idea how to fix it. Thanks :))

Edit.

I edited interface

export interface Props {
  variant: string;
  children?: React.ReactNode;
}

As well as PrimaryA object

const Template = (props: Props) => <Button {...props} />;

export const PrimaryA = Template({
  variant: "disabled"
});

And still nothing. I can't see component at the Storybook

storybook typescript reactjs
2 Answers

You need to use the Typescript version, it's an option in the docs now (https://storybook.js.org/docs/react/get-started/whats-a-story), but the relevant code is below:

import {Meta, Story} from "@storybook/react";

export default {
  title: "Button",
  component: Button,
} as Meta;

// We create a “template” of how args map to rendering
const Template: Story<ButtonProps> = (args) => <Button {...args} />;

export const Primary = Template.bind({});

Primary.args = {
  primary: true,
  label: 'Primary',
};
user_2283690

If you are using vue3

import Button from '../components/Button.vue'
import { IButtonProps } from '../types/types'
import { Meta, Story } from '@storybook/vue3'

export default {
  title: 'Example/Button',
  component: Button,
  argTypes:{
    backgroundColor: { control: 'color' },
    size: {
      control: { type: 'select', options: ['small', 'medium', 'large'] },
    },
    onClick: {},
  },
} as Meta;


    const Template: Story<IButtonProps>  = (args ) => ({
  components: { Button },
  setup() {
    return { args }
  },
  template: '<Button v-bind="args" />',
})

export const Primary = Template.bind({})
Primary.args = {
  primary: true,
  title: '\u{1F9D1}\u{200D}\u{1F3A8}',
  backgrounColor: 'red'
}
user_143508580
Related