question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[addon-docs] TS code generation for a story doesn't render if a JSX element is typed

See original GitHub issue

Describe 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:

  1. Create a story in a TSX file.
  2. Type a generic JSX element.
  3. 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:open
  • Created 4 years ago
  • Comments:7 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
shilmancommented, May 21, 2020

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!

0reactions
lgraziani2712commented, Jun 11, 2020

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: image

Without specifying it: image

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found