[Bug]: React TS: Properties with inline functions getting replaced with noop function.

[0x00000001A]

Describe the bug

If component has inline functions in property (like prop={ () => console.log('ok') } it will be replaced with () => {} function. I did't expect that. Is there is any setting to change this behaviour?

Given story

export const Formatter: ComponentStory = (args) => {
  const formatterMoney = (value: string | number) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')

  const formatterPercentage = (value: string) => `${value}%`

  return (
    <UpSpace>
      <UpInputNumber
        defaultValue={1000}
        formatter={formatterMoney}
        parser={(value) => value?.replace(/\$\s?|(,*)/g, '') || ''}
      />
      <UpInputNumber
        defaultValue={100}
        min={0}
        max={100}
        formatter={formatterPercentage}
        parser={(value) => value?.replace('%', '') || ''}
      />
    </UpSpace>
  )
}

Produces the following source code in docs:

<UpSpace>
  <UpInputNumber
    defaultValue={1000}
    formatter={() => {}}
    parser={() => {}}
  />
  <UpInputNumber
    defaultValue={100}
    formatter={() => {}}
    max={100}
    min={0}
    parser={() => {}}
  />
</UpSpace>

To Reproduce

Check the Button component story.

https://stackblitz.com/edit/github-tu5l3f?file=src%2Fstories%2FButton.stories.tsx%3AL27&preset=node

System

Storybook Environment Info:

  System:
    OS: macOS 14.2.1
    CPU: (10) arm64 Apple M2 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm <----- active
  Browsers:
    Chrome: 120.0.6099.234
    Safari: 17.2.1
  npmPackages:
    @storybook/addon-actions: ^8.0.0-alpha.12 => 8.0.0-alpha.12 
    @storybook/addon-docs: ^8.0.0-alpha.12 => 8.0.0-alpha.12 
    @storybook/addon-essentials: ^8.0.0-alpha.12 => 8.0.0-alpha.12 
    @storybook/addon-links: ^8.0.0-alpha.12 => 8.0.0-alpha.12 
    @storybook/addon-mdx-gfm: ^8.0.0-alpha.12 => 8.0.0-alpha.12 
    @storybook/manager-api: ^8.0.0-alpha.12 => 8.0.0-alpha.12 
    @storybook/preset-create-react-app: ^8.0.0-alpha.12 => 8.0.0-alpha.12 
    @storybook/react: ^8.0.0-alpha.12 => 8.0.0-alpha.12 
    @storybook/react-vite: ^8.0.0-alpha.12 => 8.0.0-alpha.12 
    @storybook/react-webpack5: ^8.0.0-alpha.12 => 8.0.0-alpha.12 
    @storybook/theming: ^8.0.0-alpha.12 => 8.0.0-alpha.12 
    eslint-plugin-storybook: 0.6.15 => 0.6.15 
    storybook: ^8.0.0-alpha.12 => 8.0.0-alpha.12

Additional context

If I change the story code to this:

export const Formatter: StoryObj<UpInputNumberProps> = {
  render: (args) => (
    <UpSpace>
      <UpInputNumber defaultValue={1000} parser={(value) => value?.replace(/\$\s?|(,*)/g, '') || ''} />
      <UpInputNumber defaultValue={100} min={0} max={100} parser={(value) => value?.replace('%', '') || ''} />
    </UpSpace>
  )
}

The problem stays. I've tried both @latest and @next storybook versions, tried vite and webpack.

And even if I add the following config:

const UpInputNumberStories: Meta<UpInputNumberProps> = {
  title: 'Inputs/UpInputNumber',
  component: UpInputNumber,
  tags: ['autodocs'],
  parameters: {
    docs: {
      source: {
        type: 'code'
      }
    }
  }
}

Then code looks strange:

// in case of StoryObj
{
  render: args => <UpSpace>
      <UpInputNumber defaultValue={1000} parser={value => value?.replace(/\$\s?|(,*)/g, '') || ''} />
      <UpInputNumber defaultValue={100} min={0} max={100} parser={value => value?.replace('%', '') || ''} />
    </UpSpace>
}

// in case of StoryFn
args => <UpSpace>
    <UpInputNumber defaultValue={1000} parser={value => value?.replace(/\$\s?|(,*)/g, '') || ''} />
    <UpInputNumber defaultValue={100} min={0} max={100} parser={value => value?.replace('%', '') || ''} />
  </UpSpace>

[shilman]

As a workaround you can set the docs.source.type story parameter to 'code' and specify the source by hand yourself:

const UpInputNumberStories: Meta<UpInputNumberProps> = {
  title: 'Inputs/UpInputNumber',
  component: UpInputNumber,
  tags: ['autodocs'],
  parameters: {
    docs: {
      source: {
        type: 'code',
        code: `any string you want here`
      }
    }
  }
}