[addon-docs] TS code generation for a story doesn't render if a JSX element is typed
See original GitHub issueDescribe the bug Typing a JSX element will prevent the documentation to render the story code.
To Reproduce
https://github.com/lgraziani2712/sb-8827
Steps to reproduce the behavior:
- Create a story in a TSX file.
- Type a generic JSX element.
- Open storybook and see the error.
Expected behavior To render the story code the same way as if the JSX element wouldn’t have been typed.
Code snippets
// Wrapper
interface Props<P> {
initial?: P;
children(val: P): JSX.Element;
}
function Wrapper<P>({ initial, children }: Props<P>) {
const [state, setState] = useState(initial || null);
return children({state, setState });
}
// Story
import Component, { ComponentProps } from '.';
export const someStory = () => (
// Since I'm not setting a default value, TS doesn't know the type.
// Typing the element makes TS stop complaining but the story code doesn't render.
// If I delete the typing, the code starts rendering but TS complains.
<Wrapper<ComponentProps>>
{(props) => (<Component {...props} />)}
</Wrapper>
);
System:
System:
OS: Linux 4.15 Ubuntu 18.04.3 LTS (Bionic Beaver)
CPU: (4) x64 Intel(R) Core(TM) i7-4510U CPU @ 2.00GHz
Binaries:
Node: 10.16.0 - ~/.nvm/versions/node/v10.16.0/bin/node
Yarn: 1.19.1 - /usr/bin/yarn
npm: 6.9.0 - ~/.nvm/versions/node/v10.16.0/bin/npm
Browsers:
Chrome: 78.0.3904.97
Firefox: 71.0b8
npmPackages:
@storybook/addon-actions: 5.2.5 => 5.2.5
@storybook/addon-docs: 5.2.5 => 5.2.5
@storybook/addon-knobs: 5.2.5 => 5.2.5
@storybook/preset-typescript: 1.1.0 => 1.1.0
@storybook/react: 5.2.5 => 5.2.5
Issue Analytics
- State:
- Created 4 years ago
- Comments:7 (6 by maintainers)
Top Results From Across the Web
storybook-addon-react-docgen
A storybook addon to display react docgen info. This addon is a drop in replacement for the "info" addon's prop table functionality. Rather...
Read more >Next-level component showcasing with Storybook controls
Learn about controls, a new Storybook addon that lets you dynamically interact with your React components for demo and testing purposes.
Read more >Documenting design systems with Storybook Docs
title specifies the name of the story that will show up in the navigation UI. Multiple stories can be grouped under a category...
Read more >Scaffolding a React Component Library with Storybook (Using ...
Additionally, if you need functionality that Storybook doesn't already provide, then you can create addons to extend Storybook.
Read more >React v18.0 – React Blog
Many of the features in React 18 are built on top of our new concurrent renderer, ... In a concurrent render, this is...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
We’ve just released zero-config typescript support in 6.0-beta. Please upgrade and test it!
Thanks for your help and support getting this stable for release!
I can confirm this is partially fixed in v6-beta (I’m using beta-25). It’s partially fixed because although it renders the code now, most of the code is being grayed out:
Specifying the generic:
Without specifying it: