Typescript CSF Format Docs do not display props

Description I am converting my component library to typescript and when I update to typescript doc’s props no longer show up

To Reproduce Adding prop type comments and type comments do not display for props in the table on the docs page. This works for my non typescript components. I added comments for my type as well.

Expected behavior Props to display

Screenshots If applicable, add screenshots to help explain your problem.

Code snippets

Label.tsx 
------------------
import React, { useContext } from "react";
import { ThemeContext } from "styled-components";
import PropTypes from "prop-types";
import { AsteriskStyled, LabelStyled, LabelStyles } from "./LabelStyles";

export interface LabelProps {
  /** content to display in label */
  children: React.ReactNode
  /** ID the label is for */
  htmlFor: string,
  /** if the label is required */
  required?: boolean,
  /** Overrideable styles */
  styles?: LabelStyles,
  rest?: object
}

/**
 * Label for an input
 */
export const Label: React.FC<LabelProps> = ({ children, htmlFor, required, styles, ...rest }) => {
  const Theme = useContext(ThemeContext);
  const StylesOverride = { ...Theme.label, ...styles };

  return (
    <>
      <LabelStyled htmlFor={htmlFor} styles={StylesOverride} {...rest}>
        {children}
      </LabelStyled>
      {required && <AsteriskStyled styles={StylesOverride}>*</AsteriskStyled>}
    </>
  );
};

Label.propTypes = {
  /** content to display in label */
  children: PropTypes.oneOfType([PropTypes.node, PropTypes.string, PropTypes.element, PropTypes.number]).isRequired,
  /** ID the label is for */
  htmlFor: PropTypes.string.isRequired,
  /** if the label is required */
  required: PropTypes.bool,
  /** Overrideable styles */
  styles: PropTypes.shape({
    color: PropTypes.string,
    "font-weight": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    "asterisk-color": PropTypes.string
  })
};

Label.defaultProps = {
  required: false,
  styles: {}
};

export default Label;

Label.stories.tsx
---------------------
import React from "react";
import { Description, Primary, Props, Subtitle, Title } from "@storybook/addon-docs/dist/blocks";
import { boolean } from "@storybook/addon-knobs";
import Label from "./Label";
import { SlotContext, StoryData } from "@storybook/addon-docs/dist/blocks/shared";

export default { title: "Form|Inputs" };

export const LabelExample = () => {
  return (
    <Label required={boolean("required",true)} htmlFor="hello-world-1">
      Hello World
    </Label>
  );
};

LabelExample.story = {
  name: "Label",
  title: "Label",
  component: Label,
  parameters: {
    docs: {
      page: () => (
        <>
          <Title>Label</Title>
          <Subtitle />
          <Description />
          <Primary slot={
            (stories: StoryData[], context: SlotContext) =>  stories.find((story: StoryData) => story.id === context.id) || stories[0]
          }/>
          <Props
            components={{
              "Label": Label
            }}
          />
        </>
      ),
    },
  },
};

System: Environment Info:

System: OS: macOS 10.15.3 CPU: (4) x64 Intel® Core™ i7-6567U CPU @ 3.30GHz Binaries: Node: 11.15.0 - ~/.nvm/versions/node/v11.15.0/bin/node Yarn: 1.22.4 - /usr/local/bin/yarn npm: 6.7.0 - ~/.nvm/versions/node/v11.15.0/bin/npm Browsers: Chrome: 80.0.3987.163 Firefox: 74.0.1 Safari: 13.0.5 npmPackages: @storybook/addon-a11y: 5.3.18 => 5.3.18 @storybook/addon-actions: 5.3.18 => 5.3.18 @storybook/addon-backgrounds: 5.3.18 => 5.3.18 @storybook/addon-docs: 5.3.18 => 5.3.18 @storybook/addon-knobs: 5.3.18 => 5.3.18 @storybook/addon-links: 5.3.18 => 5.3.18 @storybook/addon-storysource: 5.3.18 => 5.3.18 @storybook/addon-viewport: 5.3.18 => 5.3.18 @storybook/addons: 5.3.18 => 5.3.18 @storybook/preset-typescript: ^3.0.0 => 3.0.0 @storybook/react: 5.3.18 => 5.3.18 @storybook/theming: 5.3.18 => 5.3.18

Additional context I am using storybook 5.3.18 and the preset typescript to compile typescript with a typescript config of

{
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ],
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "jsx": "preserve",
    "lib": ["es5", "es6", "es7", "es2017", "dom"],
    "module": "commonjs",
    "moduleResolution": "node",
    "noImplicitAny": true,
    "noImplicitThis": true,
    "outDir": "./dist/",
    "sourceMap": true,
    "strictNullChecks": true,
    "target": "es5",
    "strict": true,
    "rootDirs": ["src"],
    "baseUrl": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "declaration": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "skipLibCheck": true
  }
}

I messed with jsx between preserve and react

[whatwg6]

Terrible Code snippets！😒

[stale[bot]]

Hey there, it’s me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!