[Bug]: @storybook/blocks > <Canvas> > 'Show code' doesn't display props that have false

[josephmarkus]

Describe the bug

A component with boolean prop <Button isInvalid> and <Button isInvalid={false}> relies on Canvas from @storybook/blocks to auto-generate code example needed for users to copy/paste.

For <Button isInvalid /> generated code example is:
<Button isInvalid />

For <Button isInvalid={false} /> generated code example is:
<Button />
but it should be
<Button isInvalid={false} />

To Reproduce

https://stackblitz.com/edit/github-ehbp3d?file=src%2Fstories%2FButton.tsx,src%2Fstories%2FButton.stories.ts,src%2Fstories%2FConfigure.mdx&preset=node

System

Storybook Environment Info:
(node:26201) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)

  System:
    OS: macOS 14.4.1
    CPU: (10) arm64 Apple M1 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.1.0 - /opt/homebrew/bin/node
    Yarn: 4.1.1 - /opt/homebrew/bin/yarn <----- active
    npm: 10.7.0 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 124.0.6367.207
    Safari: 17.4.1
  npmPackages:
    @storybook/addon-a11y: ^8.1.0 => 8.1.0 
    @storybook/addon-docs: ^8.1.0 => 8.1.0 
    @storybook/addon-essentials: ^8.1.0 => 8.1.0 
    @storybook/addon-webpack5-compiler-babel: ^3.0.3 => 3.0.3 
    @storybook/blocks: ^8.1.0 => 8.1.0 
    @storybook/manager-api: ^8.1.0 => 8.1.0 
    @storybook/react: ^8.1.0 => 8.1.0 
    @storybook/react-webpack5: ^8.1.0 => 8.1.0 
    @storybook/theming: ^8.1.0 => 8.1.0 
    chromatic: ^11.3.0 => 11.3.0 
    msw-storybook-addon: ^2.0.0 => 2.0.0 
    storybook: ^8.1.0 => 8.1.0

Additional context

No response

[shilman]

Thanks @josephmarkus. Your Stackblitz example errors for me but I was able to reproduce it locally.

Looks like a bug in the library we use to render the string algolia/react-element-to-jsx-string#732