Controls not working

Describe the bug I followed the tutorial that is being described in this article. Controls tab is being displayed but there is a message saying that This story is not configured to handle controls. Learn how to add controls » and controls can’t be used.

To Reproduce Steps to reproduce the behavior:

1. Create a story and paste the following code (same code provided in the tutorial)

import React from 'react'
import { Button } from '@storybook/react/demo';
export default { title: 'Button/Controls', component: Button };
export const Basic = (args: any) => <Button {...args} />;
Basic.args = { children: 'hello' };

Expected behavior Able to edit controls

Screenshots

Additional context

"@storybook/addon-actions": "^6.0.13",
    "@storybook/addon-controls": "^6.0.13",
    "@storybook/addon-knobs": "^6.0.13",
    "@storybook/addon-links": "^6.0.13",
    "@storybook/addons": "^6.0.13",
    "@storybook/preset-create-react-app": "^3.1.4",
    "@storybook/react": "^6.0.13",

[astorije]

@astorije do you have a repro?

Thanks for replying! I was playing with this just now, and somehow got it to work by replacing:

  argTypes: {
    value: { control: 'text' },
  },

with:

  argTypes: {
    value: { control: { type: 'text' } },
  },

Even though the doc doesn’t say so. 🤯

[mohit242]

I am currently working with Gatsby + Storybook + Typescript and storybook is not auto-detecting controls for any of the components. eg-

import React from "react"
import { Story, Meta } from "@storybook/react"
// default import
import  StyledButton, {StyledButtonProps } from "./StyledButton.styles"

export default {
  title: "Components/StyledButton",
  component: StyledButton,
} as Meta

const Template: Story<StyledButtonProps> = args => <StyledButton {...args} />

// controls are not detected
export const Basic= Template.bind({})

But, everything starts working when I make the component into a named export, instead of a default export.

import React from "react"
import { Story, Meta } from "@storybook/react"
// named import
import {StyledButton, StyledButtonProps } from "./StyledButton.styles"

export default {
  title: "Components/StyledButton",
  component: StyledButton,
} as Meta

const Template: Story<StyledButtonProps> = args => <StyledButton {...args} />

// controls are auto-detected
export const Basic= Template.bind({})