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

[MineiToshio]

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

1. Create a file with some typing:

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

2. 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(R) Core(TM) 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

[shilman]

can you share your .storybook/main.js configuration? or, better yet, a public repro repo?

[MineiToshio]

can you share your .storybook/main.js configuration? or, better yet, a public repro repo?

Hey @shilman! This is the .storybook/main.js.

module.exports = {
  stories: [
    '../**/*.stories.mdx',
    '../**/*.stories.@(js|jsx|ts|tsx)'
  ],
  addons: ['@storybook/addon-essentials'],
};

Sorry the repo is private, but if anything else is needed I'm happy to help.

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[jmpolitzer]

I am experiencing this same issue, and it looks like others are as well. See #13548. Can we reactivate this?

[shilman]

@jmpolitzer Do you have a repro repo you can share?

[jmpolitzer]

@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.

[gregg-cbs]

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:

[The-Code-Monkey]

I think a good fix for this would be possibly having another field in the default export for the story for the props interface to be added to rather than trying to find it from the component itself.

For me it doesnt seem to be picking up extended types.

import {
    ColorProps,
    ExtendedFlexboxProps,
    LayoutProps
} from "@aw-web-design/styled-system";

export type StyledButtonProps = ColorProps & ExtendedFlexboxProps & LayoutProps;

export interface ButtonProps extends StyledButtonProps {
    children: ReactNode;
}

The storybook only contains the children control but non of the controls within the other interfaces

[stembrino]

Same with me.
To additionally. the Actions also stopped working: parameters: { actions: { argTypesRegex: "^on.*" } },

import SlotButton from "..";
import type { Meta, StoryObj } from "@storybook/react";

const meta: Meta<typeof SlotButton> = {
  title: "SlotButton",
  component: SlotButton,
  parameters: { actions: { argTypesRegex: "^on.*" } },
};

export default meta;
type Story = StoryObj<typeof SlotButton>;

export const Primary: Story = { args: { label: "BUTTON" } };

[felahgs]

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.

[github-actions]

Hi there! Thank you for opening this issue, but it has been marked as stale because we need more information to move forward. Could you please provide us with the requested reproduction or additional information that could help us better understand the problem? We'd love to resolve this issue, but we can't do it without your help!

[github-actions]

I'm afraid we need to close this issue for now, since we can't take any action without the requested reproduction or additional information. But please don't hesitate to open a new issue if the problem persists – we're always happy to help. Thanks so much for your understanding.

[valentinpalkovic]

We have upgraded react-docgen recently to version 7. You can try to activate it and see whether your issues get resolved. Please make sure to install at least Storybook 7.6.0-alpha.2 and configure using react-docgen instead of react-docgen-typescript. See the appropriate documentation for more information: https://storybook.js.org/docs/react/api/main-config-typescript#reactdocgen

[github-actions]

Hi there! Thank you for opening this issue, but it has been marked as stale because we need more information to move forward. Could you please provide us with the requested reproduction or additional information that could help us better understand the problem? We'd love to resolve this issue, but we can't do it without your help!

[github-actions]

I'm afraid we need to close this issue for now, since we can't take any action without the requested reproduction or additional information. But please don't hesitate to open a new issue if the problem persists – we're always happy to help. Thanks so much for your understanding.

[basickarl]

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.

This is also the reason why some of my component properties won't display, changing to function declaration fixed it.

[philatcd]

I'm able to replicate this by writing a very basic component using MUI TextField.

As a functional component written as a const, the story renders but shows the customProp as the only control. I would expect this to show a lot more.

// TextInput.tsx

import TextField, {TextFieldProps} from '@mui/material/TextField';

export type CustomTextFieldProps = TextFieldProps & {customProp?: string};

const CustomTextInput = ({customProp = '', ...rest}: CustomTextFieldProps) => <TextField {...rest} defaultValue={customProp} />;

export default CustomTextInput;

When rewriting the functional component as a function, the story shows the customProp as a control along with all the ones extended in TextFieldProps.

// TextInput.tsx

import TextField, {TextFieldProps} from '@mui/material/TextField';

export type CustomTextFieldProps = TextFieldProps & {customProp?: string};

function CustomTextInput({customProp = '', ...rest}: CustomTextFieldProps) {
  return <TextField {...rest} defaultValue={customProp} />;
}

export default CustomTextInput;

The story is the same in both situations.

// TextInput.stories.tsx

import type {Meta, StoryObj} from '@storybook/react';

import TextInput from './TextInput';

const meta = {
  title: 'TextInput',
  component: TextInput,
} satisfies Meta<typeof TextInput>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Example: Story = {
  args: {
    customProp: 'Custom Prop',
  },
};

[hosseini44444]

For those who are using Material UI:

Add the following to your main.ts config:

typescript: {
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      // Speeds up Storybook build time
      compilerOptions: {
        allowSyntheticDefaultImports: false,
        esModuleInterop: false,
      },
      // Makes union prop types like variant and size appear as select controls
      shouldExtractLiteralValuesFromEnum: true,
      // Makes string and boolean types that can be undefined appear as inputs and switches
      shouldRemoveUndefinedFromOptional: true,
      // The magic: Filter out third-party props from node_modules except @mui packages
      propFilter: (prop) => true,
    },
  },

important line (worked for me since I'm using a monorepo):
propFilter: (prop) => true

It's better to use this if it works for your setup:

propFilter: (prop) =>
        prop.parent ? !/node_modules\/(?!@mui)/.test(prop.parent.fileName) : true,

Source: https://storybook.js.org/recipes/@mui/material