Storybook: ForwardRef source code problem when using Args

[patricklafrance]

Describe the bug
When using Args my story source code seems to be some kind of stringify source code instead of the actual JSX code.

To Reproduce

<Canvas>
    <Story name="icon">
        {args =>
            <Button {...args}>
                <LightbulbIcon />
                <Text>Cutoff</Text>
            </Button>
        }
    </Story>
</Canvas>

Expected behavior
JSX soure code well indented :)

Screenshots
With Args:

Without Args:

Code snippets
If applicable, add code samples to help explain your problem.

System
Please paste the results of npx sb@next info here.

Additional context
Add any other context about the problem here.

[patricklafrance]

It seems to be caused by the fact that my component use forwardRef, does it make sense?

[shilman]

@andezzat mind taking a look at this?

@patricklafrance As a workaround, you can set the docs.source.type parameter to "code"

[patricklafrance]

Almost :)

[shilman]

Indentation issue is tracked here #8078

[andezzat]

I'm attempting to reproduce this but a little confused by the usage of Canvas, Story & the render function 🤔
Can you shed more light into your SB setup?

@patricklafrance

[patricklafrance]

@andezzat It's a default SB setup without TS. My stories are defined using MDX.

What is confusing? Isn't it Canvas the replacement for Preview in 6? The render function is to support Args in thestory.

How would you do it? I might use the wrong syntax.

[andezzat]

<Canvas>
  <Story name='testing'>
    {args =>
      <ForwardRefButtonOuterPropTypes {...args}>
        Stuff...
      </ForwardRefButtonOuterPropTypes>
    }
  </Story>
</Canvas>

I just tried it w/ our very own forwardRef Button but cannot replicate.
I know it's silly, but are you sure you're on the latest version of SB? This was fixed only a couple months ago!

[patricklafrance]

Hi @andezzat

Yes 6.1.4

"@storybook/addon-actions": "6.1.4",
"@storybook/addon-essentials": "6.1.4",
"@storybook/addon-links": "6.1.4",
"@storybook/react": "6.1.4",

Have you tried with sub-components?

In my case there are the <LightbulbIcon> and <Text> sub-components.

Thank you,

Patrick

[andezzat]

@patricklafrance I just tried w/ another forwardRef component as a subcomponent..
No luck 😕

[patricklafrance]

@andezzat here's a live example: https://5fc11202b9a514946ac633fe--sg-storybook.netlify.app/?path=/docs/button--test#test

My repository is public if you want to try it: https://github.com/gsoft-inc/sg-orbit/tree/storybook-6

To install & start Storybook

• git clone https://github.com/gsoft-inc/sg-orbit.git
• git checkout storybook-6
• yarn bootstrap (DO NOT do a yarn install)
• yarn build:pkg
• yarn start-sb

Hope this help.

Thank you

[andezzat]

@patricklafrance Thank you!

I tried cloning & installing but was met with a build error on yarn build:pkg

lerna ERR! yarn run build stderr:
(node:9472) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at C:\Users\Andrew\Sites\sg-orbit\node_modules\cssstats\node_modules\postcss\package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)
Error: Failed to find '../../foundation/dist/apricot.css'
  in [
    C:\Users\Andrew\Sites\sg-orbit\packages\tachyons\src
  ]
    at C:\Users\Andrew\Sites\sg-orbit\node_modules\postcss-import\lib\resolve-id.js:35:13
lerna ERR! yarn run build stderr:
(node:9472) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at C:\Users\Andrew\Sites\sg-orbit\node_modules\cssstats\node_modules\postcss\package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)
Error: Failed to find '../../foundation/dist/apricot.css'
  in [
    C:\Users\Andrew\Sites\sg-orbit\packages\tachyons\src
  ]
    at C:\Users\Andrew\Sites\sg-orbit\node_modules\postcss-import\lib\resolve-id.js:35:13

Regardless, I think I know what's going wrong :D

export const Button = slot("button", forwardRef((props, ref) => (
    <InnerButton {...props} forwardedRef={ref} />
)));

The current way the Button is exported for eg., doesn't actually assign a displayName to the forwardRef component, so SB can't find its name.
In order to fix this, try assigning the forwardRef component to a const first.

This may work?

// This assignment will do `Button.displayName = 'Button'`
const Button = forwardRef((props, ref) => (
    <InnerButton {...props} forwardedRef={ref} />
));

export { Button: slot("button", Button) };

[patricklafrance]

Oh sorry for the build error, still WIP hehe.

I'll give it a shot tomorrow, thank you very much for your help @andezzat

[patricklafrance]

It does fix the issues indeed :)

Howhever I had to specify manually a displayName instead since you can't that kind of exports export { Button: slot("button", Button) };

Thank you @andezzat

[andezzat]

Great to hear! 👏