storybook: Storybook not rendering all React props in the controls and docs when using imported types

Describe the bug Storybook is not showing all the props in controls and docs. It happens when I import a Typescript type from another file.

To Reproduce

Create a file with some typing:

// colors.ts
export type TextColor = 'red' | 'blue';

Then use the created type in a component

// Text.tsx
import React, { FC } from 'react';
import TextColor from './colors';

export type Props = {
  textColor: TextColor;
  text: string;
};

const Text: FC<Props> = ({ textColor, text }) => (
  <div style{{ color: textColor }}>{ text }</div>
)

If I do that, only text appears in the controls and docs.

Expected behavior All props should appear in the controls and docs panels.

Screenshots This is my props definition:

This is what appears in controls. It is missing iconColor and color.

This is what appears in docs. Also missing iconColor and color and icon has no description.

This is the typing of Icons, TextColor and ButtonColor:

Code snippets See to reproduce section

System: System: OS: Windows 10 10.0.19041 CPU: (4) x64 Intel® Core™ i7-4500U CPU @ 1.80GHz Binaries: Node: 12.13.0 - C:\Program Files\nodejs\node.EXE npm: 6.12.0 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: 85.0.4183.102 Edge: Spartan (44.19041.423.0), Chromium (85.0.564.51) npmGlobalPackages: @storybook/cli: 6.0.21

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 5
Comments: 17 (8 by maintainers)

Most upvoted comments

I am having this issue, all my other components work fine, but all of a sudden this new one doesnt? And i cant figure out why.

// storybook
import React from 'react'
import { ComponentStory } from '@storybook/react'

import IconText from '../../components/theme/Diageo/DIconText'
import LocationIcon from '../../components/icons/LocationIcon'

// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
  title: 'Base/IconText',
  component: IconText,
}

// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
const Template: ComponentStory<typeof IconText> = (args) => <IconText {...args} />

export const Base = Template.bind({})

// IconText component
import React from 'react'

type IconTextProps = {
  icon: JSX.Element
  text: string
  reversed?: boolean
  className?: string
}

export default function IconText({ icon, text, reversed, className, ...props }: IconTextProps) {
  return (
    <div className={`icon-text ${className} ${reversed ? 'icon-text-reversed' : null}`} {...props}>
      <span className="icon-text-icon">{icon}</span>
      <span className="icon-text-text">{text}</span>
    </div>
  )
}

output:

gregg-cbs on Mar 29, 2022

I was having this issue and couldn’t find an answer anywhere. So just in case there’s someone who had the same problem that I had.

I found that by altering the way I declare my component, the issue was resolved. It appears that if the component is declared using const, the autodoc is unable to produce anything, changing the declaration to function resolved the problem.

felahgs on Aug 13, 2023

@shilman Thanks for the response. It turns out that my issue revolved around components imported from an external library, which I found a fix for here. I believe this can be closed.

jmpolitzer on Feb 25, 2021