storybook: Actions don't show up in panel when using `argTypesRegex`

Shall we prioritize this? @shilman @vanessayuenn

same issue here with third party types

I can confirm that this is a bug. Typing it with Pick<ComponentProps<SomeComponent>, “onChange”> does not work, putting onChange in directly does. Apparently the Typescript support is a bit broken.

I had the same problem. It seems to happen when picking from a third party types.

type GoodComponentProps = { onClick: VoidFunction };  // OK
type GoodComponentProps2 = Pick<GoodComponentProps, 'onClick'>;  // OK


// e.g.
import { ButtonProps as MUIButtonProps } from '@mui/material/Button';

type BadComponentProps = Pick<MUIButtonProps, 'onClick'>;  // NG: Not work

I would like this to be reopened if possible. I can confirm that this is a bug. Typing it with Pick<ComponentProps<SomeComponent>, "onChange"> does not work, putting onChange in directly does. Apparently the Typescript support is a bit broken.

@yannbf Will try to make reproduction on playground!

I have a component configured like below where I have the same issue. Note the actions: { argTypesRegex: "^on.*" } setting in the default export in the story.js file doesn’t wire up the prop onChange in the component to the actions tab in storybook. Weirdly it only happens for a component configured like this… where there is a context wrapped version of the component that I’m actually trying to use in Storybook.

export interface ComponentAProps = {
   ... // excluded for brevity
   onChange?: (newValue: string) => void;
}

const ComponentA = () => {
  const { ... } = useComponentAContext();
}

const ComponentAWithContext = (props: ComponentAProps) => <ComponentAContextProvider>
<ComponentA /></ComponentAContextProvider>;

export default ComponentAWithContext;

import ComponentA from "./ComponentA"; // should import the context wrapped default export

const Template = (args) => {
  // debugging - you can see here that Storybook isn't passing an `onChange` handler of it's own because of `argTypesRegex`. If it worked, you'll see it here.
  console.log(args);

  return <ComponentA {...args} />;
};

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

export default {
  title: "ComponentA",
  component: ComponentA,
  parameters: {
    componentSubtitle:
      "A neat subtitle",
    viewMode: "story",
    actions: { argTypesRegex: "^on.*" },
  },
};

I’m using Storybook (@storybook:react@6.5.16).

I’ve done some digging online and I found that making the following change to the default export is the only thing that worked (see https://storybook.js.org/docs/6.5/react/essentials/actions#action-args)

const Template = (args) => {
  // debugging - shows an `onChange` that Storybook passed in called `actionHandler`. So actions work!
  console.log(args);

  return <ComponentA {...args} />;
};

export default {
  title: "ComponentA",
  component: ComponentA,
  parameters: {
    componentSubtitle:
      "A neat subtitle",
    viewMode: "story",
    // doesn't wire up to the `onChange` prop sadly
    actions: { argTypesRegex: "^on.*" },
  },
 // explicitly specifying argTypes works!
 argTypes: {
    onChange: {
      action: "changed",
    },
  },
};

Any news?

@kasperpeulen could you check the aforementioned use cases? thanks ❤️

Also not working for me in React when the underlying component is typed like

export const Button = forwardRef<HTMLButtonElement, Props>(({children, ...props}, ref) => {
  // ...
  return (
    <BaseButton {...props} ref={ref}>
      {children}
    </BaseButton>
  );
})

Same here with union types

I have a modal component with

export type ModalProps = {
  ...

  /**
   * Callback called when a dismissed action is taken
   * @default undefined
   */
  onClose?: () => void;
}

and other modal components that use this one, their types are similar to this:

export type DialogProps = Omit<ModalProps, 'children' | 'actionRequired' | 'message'>;

On the Modal stories, the argTypesRegex works perfectly, on the Dialog or any other modal, it doesn’t.

@jonathanhuang13 , can we reopen this?

@yannbf Thanks for taking a look at this. I’ve confirmed that how you’ve typed it works. It’s strange how the other way of typing a component causes issues. I’ll go ahead and close this though. Thanks!