Addon adds actionHandler function to every function prop

[javiergbas]

Hey, let's say I have the following component:

const Box = ({ onEditClick }) => (
  <div className="Box">
    This is a Box
    {onEditClick && <button onClick={onEditClick}>Edit</button>}
  </div>
)

Box.propTypes = {
  onEditClick: PropTypes.func,
}

Box.defaultProps = {
  onEditClick: null,
}

and my Box.stories.js

import React from 'react'
import { storiesOf } from '@storybook/react'
import '../../../postcss-generated.css'
import './Box.stories.css'
import Box from 'components/atoms/Box/index'
import { withKnobs } from '@storybook/addon-knobs'
import { withSmartKnobs } from 'storybook-addon-smart-knobs'

const stories = storiesOf('Box', module).addParameters({
  component: Box,
})

stories.addDecorator(withSmartKnobs).addDecorator(withKnobs)

stories.add('Playground', () => <Box />)

This works great, I can see the component but it always display the edit button even if I'm not passing anything in onEditClick prop.

When inspecting it I can see that there is a nactionHandler function automatically passed (and can't see there when I stop using storybook-addon-smart-knobs.

I would like to have the possibility of showing every combination of props, including a version without the edit button. Is there anything that I can do? Is there any configuration/option that I'm missing?

Love the addon, thanks in advance!

[QingLeiLi]

You can add a new props to resolve this:

const Box = ({ canEdit, onEditClick }) => (
  <div className="Box">
    This is a Box
    {canEdit && <button onClick={onEditClick}>Edit</button>}
  </div>
)

This will be fine but not perfect.

[javiergbas]

Hi @QingLeiLi , thanks for the answer. That'd work but then I'd have to add a new prop just to make the component work with smart addons. I'm not saying that adding that prop is a good practice or not, but I think we shouldn't change the way we code our components in order to make them work with storybook.

If this is not possible for now I'd like this to be seen as (positive) feedback for next versions.

Thanks again!

[nekitk]

@javiergbas In 6.0.0 you can pass a list of props to ignore. In your case you can pass onEditClick there and action will not be automatically generated for it. https://github.com/storybookjs/addon-smart-knobs#options

[tremby]

I just hit this problem.

Is there a way to set that per story, in the Meta I export as default from my story file?

[tremby]

Oh... I think I was hitting a different issue.

I was doing, in my template,

<MyComponent myFunctionProp={myTestImplementation} {...props} />

not realizing that Storybook was adding a myFunctionProp to the props being passed in to the template. It was overriding the one I was explicitly passing.

All I had to do was reorder:

<MyComponent {...props} myFunctionProp={myTestImplementation} />

[hernanfarruggia]

@tremby running into the same issue discovered the exact same thing that happened to you, I wish I have found you comment earlier :laughing:

[andrejilderda]

If you use Storybook 6 or higher you can override the argTypesRegex-setting you may have in your .preview.js per story like so:

// in ComponentName.stories.tsx

export default {
  component: ComponentName,
  title: 'Components/ComponentName',
  // override the default behavior of passing action-props for every prop that
  // starts with 'on' (see the Storybook config 'preview.js')
  parameters: { actions: { argTypesRegex: null } },
};