Addon-docs: Fix inline stories using react hooks

[atanasster]

Issue: #7924

What I did

Replaced the storyFn instead of direct call, to be rendered as a react element

How to test

added reactHook story to Stories.stories.tsx and can be tested in official-storybook

[vercel]

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

[shilman]

cc @Aaron-Pool can you take a quick look?

[shilman]

Thanks @atanasster! Good catch and great fix!

[Aaron-Pool]

@shilman as to if this will have any effect on inlining other frameworks--shouldn't be a problem. I can just set storyFn directly to the result of prepareForInline, rather than to a function that returns that result.

As for most everything else in this PR, my knowledge of React hooks and React rendering is pretty limited, so... LGTM? 🤷‍♂️

[atanasster]

@Aaron-Pool - my vue.js is like your react :) Can you help me - how do you test the vue.js integration, I can try to run some tests on my end.
On the other hand, I think the preview window was already using the react magic for rendering and the stories with hooks were not breaking there.

[Aaron-Pool]

@atanasster this almost certainly won't break any current Vue functionality. 5.2 only supports iframe-based stories for non-react frameworks (e.g. Vue), so changes to inline rendering shouldn't effect the Vue side of things yet. Shilman tagged me (I assume) because of a PR I'm doing for 5.3 to add inline rendering support for Vue, as well as a path to inline support for other frameworks.

But yes, like you said, story preview is already pretty tightly bound to react magic, so these changes shouldn't impede my project. Might have to make a few tiny tweaks, but it should be fine! 👍

[shilman]

You guys are awesome. 💯 Merging this!

Recategorizing as a bug since we're in RC mode and only merging bugfixes. We're claiming React hooks support in 5.2, so I think it's appropriate.