storybook: Controls not working

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({})

@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. 🤯

Even though the doc doesn’t say so.

Wow. I was banging my head against the wall, went through all the docs but stumbled upon your post. I’ve changed my code to:

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

and voila … it works.

Does anybody have any idea how to annotate Angular components for Storybook to pick up the fields on its own?

For me the problem is solved when I give my component a named export:

As the docs of react-docgen-typescript mention: Warning: only named exports are supported. If your project uses default exports, you still need to include named exports for react-docgen-typescript.

export interface IconButtonProps {
  onClick?: () => void;
  type?: 'button' | 'submit' | 'reset';
  dataTestId?: string;
  disabled?: boolean;
  size?: 'small' | 'normal' | 'large' | 'compact';
  variant?: 'default' | 'borderless' | 'primary';
  border?: 'square' | 'rounded';
  children: {
    icon?: SVGElement;
  };
}

export const IconButtonComp: FC<IconButtonProps> = ({
  children,
  type = 'button',
  onClick,
  dataTestId = 'button',
  variant = 'default',
  border = 'square',
  disabled = false,
  size = 'normal',
}) => (
  <Button
    onClick={onClick}
    variant={variant}
    border={border}
    size={size}
    type={type}
    disabled={disabled}
    data-testid={dataTestId}
  >
    {children}
  </Button>
);

So add a named export and you are good to go 👍

Thank you @shilman, excellent!

@astorije For historical reasons, the docs addon contains the code that does the auto-inference. So in 6.0 you’ll need to add that to get auto-generated controls. You can disable the docs tab if you don’t want it to be part of your UI.

You can also specify argTypes by hand: https://github.com/storybookjs/storybook/blob/next/addons/controls/README.md#my-controls-arent-being-auto-generated-what-should-i-do

It’s not required to specify .args–you typically use those to specify the initial value of the args in the stories, since each story will have different settings.

Reverting back to 6.0.0 for playbook-react, addon-controls and addon-docs fixed the issue for me!

 "@storybook/addon-controls": "^6.0.0",
  "@storybook/addon-docs": "^6.0.0",
  "@storybook/addon-info": "^5.3.19",
  "@storybook/addon-links": "^6.0.10",
  "@storybook/addons": "^6.0.10",
  "@storybook/react": "^6.0.0",

This currently works.