[Bug]: v7 -> v8 controls tab is missing a lot of information

[StephanBijzitter]

Describe the bug

v7: (7.6.17)

v8: (8.0.0)

To Reproduce

Removed a LOT of bloat, but this should do:

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

const meta: Meta<typeof MarkdownEditor> = {
    component: MarkdownEditor
};

export default meta;

type Story = StoryObj<typeof MarkdownEditor>;

export const Default: Story = {};

export const Collapsed: Story = {
    args: {
        initialState: 'collapsed'
    }
};

export const Expanded: Story = {
    args: {
        initialState: 'expanded'
    }
};

import React, {useRef, useState} from 'react';
import type {ReactElement, FunctionComponent, FormEventHandler} from 'react';

type MarkdownEditorProps = {

    /**
     * Custom description
     */
    initialState?: 'collapsed' | 'expanded';
    onInput?: FormEventHandler<HTMLDivElement>;
    value?: string;
    initialValue?: string;
};

type MarkdownEditorComponent = FunctionComponent<MarkdownEditorProps>;
type MarkdownEditorElement = ReactElement<MarkdownEditorProps>;

export const MarkdownEditor: MarkdownEditorComponent = ({
    initialState = 'collapsed'
}): MarkdownEditorElement => null;

System

Storybook Environment Info:

  System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i7-3820 CPU @ 3.60GHz
  Binaries:
    Node: 20.11.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 4.1.1 - C:\Program Files\nodejs\yarn.CMD <----- active
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (122.0.2365.80)
  npmPackages:
    @storybook/addon-a11y: ^7.6.17 => 7.6.17
    @storybook/addon-console: ^3.0.0 => 3.0.0
    @storybook/addon-essentials: ^7.6.17 => 7.6.17
    @storybook/addon-interactions: ^7.6.17 => 7.6.17
    @storybook/addon-knobs: ^7.0.2 => 7.0.2
    @storybook/addon-links: ^7.6.17 => 7.6.17
    @storybook/addon-toolbars: ^7.6.17 => 7.6.17
    @storybook/blocks: ^7.6.17 => 7.6.17
    @storybook/jest: ^0.2.3 => 0.2.3
    @storybook/react: ^7.6.17 => 7.6.17
    @storybook/react-vite: ^7.6.17 => 7.6.17
    @storybook/test: ^7.6.17 => 7.6.17
    @storybook/test-runner: ^0.17.0 => 0.17.0
    @storybook/testing-library: ^0.2.2 => 0.2.2
    @storybook/testing-react: ^2.0.1 => 2.0.1
    msw-storybook-addon: 2.0.0-beta.1 => 2.0.0-beta.1
    storybook: ^7.6.17 => 7.6.17

Additional context

Switching between the two versions (and restarting storybook dev) is enough to trigger this issue - config and code remains untouched

[Astarosa]

@StephanBijzitter

It seems the autodocs shows only the args that you use in your first story or defined is the Meta object. All args are not displayed by default anymore. Try to add and set a value in one of your stories you will see it.

But for the controls options the problem occurs since they switch from react-docgen-typescript to react-docgen by default.
You can set it dirrectly in your main config under the typescript object but on my side when i do so it's worst ! Options which should be displayed as a select by default are displayed as string and setting up directly with argTypes in the Meta remove the field...

A curious choice...

[federico-ntr]

@Astarosa explained why you see just an arg, but there are still issues with Description, Default and Control. I managed to get back my Descriptions (which I wrote as JSDocs to my interfaces) by switching to the old react-docgen-typescript

[Astarosa]

@federico-ntr

With no args specified except children by default in the Meta :

With an arg specified in THE FIRST story (won't shows up if specified in the second and not in the first) :

With default react-docgen :

With react-docgen-typescript :

All these screenshots are V8 based.
In V7 everything works perfectly so i assume that using react-docgen or react-docgen-typescript is only part of the problem.

[vanessayuenn]

Thanks for reporting this. We switched to using react-docgen for performance reasons. What is the remaining issue that is not solved by specifying to use react-docgen-typescript for docgen?

[Astarosa]

Thanks for reporting this. We switched to using react-docgen for performance reasons. What is the remaining issue that is not solved by specifying to use react-docgen-typescript for docgen?

For some reasons controls are broken since V8. Change the version of react-docgen doesn't fix it and on my side when i switch back to react-docgen-typescript it interpret my button as this weird _c

[fastndead]

Hey! This issue happened to me too, luckily switching to react-docgen-typescript solved the problem

[narcecl]

Having the same issue after upgrading to 8.0.4 from 7.6.17 :(

[loujonker]

I'm facing the same issue. It's also hiding the type descriptions. I can manually add them by adding argtypes.field.description but it would be nice if this would be auto generated.

[code-jongleur]

We have a similar issue, but already on the usual component's documentation page. Our project is based on Storybook 8.0.8, Vite, React, TypeScript.

Here is an example:
MyComponent.tsx:

export interface MyComponentProps {
  /** The name that should be displayed */
  name: string;
}

export const MyComponent = ({ name }: MyComponentProps) => {
  return <div>Hello {name}</div>;
};

MyComponent.story.tsx:

import { Meta, StoryObj } from "@storybook/react";
import { MyComponent } from "./MyComponent";
import { action } from "@storybook/addon-actions";
import { useArgs } from "@storybook/preview-api";

const meta: Meta<typeof MyComponent> = {
  title: "MyComponent",
  component: MyComponent,
  tags: ["autodocs"],
};

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

export const Preview: Story = {
  args: {
    name: "Fred",
  },
};

Result: there is "string" instead of my JSDoc description "The name that should be displayed" inside the Storybook component's table

Adding reactDocgen: "react-docgen-typescript" in the main.ts does not help.

main.ts:

import { resolve } from "path";
const componentsDir = resolve(__dirname, "../src/components");
const globalDir = resolve(__dirname, "../src/global");
const config = {
  stories: ["../CONTRIBUTING.mdx", "../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
    "@storybook/addon-essentials",
    "@storybook/addon-links",
    "@storybook/addon-storysource",
    "@storybook/addon-a11y",
  ],
  core: {},
  reactDocgen: "react-docgen-typescript",
  framework: {
    name: "@storybook/react-vite",
    options: {},
  },
  docs: {
    autodocs: "tag",
    defaultName: "Usage",
  },
  staticDirs: [{ from: "../public/images", to: "/images" }],
  loader: { ".js": "jsx" },
};
export default config;

Any ideas?

[code-jongleur]

Update: I just found out that I did not configure reactDocgen correctly in the main.ts. It must be

  typescript: {
    reactDocgen: "react-docgen-typescript",
  },

With this, I can confirm that the documentation is generated properly.

[Zver64]

Adding reactDocgen: "react-docgen-typescript" in the main.ts does not help.

I noticed that with react-docgen-typescript generates controls only once, when you start storybook. That means that if you change your type annotations in your component props - it will not update controls. You will have to manually restart storybook. Maybe that will help.

[FumbaCloud]

Same for me. When using react-docgen-typescript, the control seems correct, but it no longer reflects changes in types until rebuilt

[efoken]

There is some stuff that I found out recently, that might help somebody.

When using forwardRef or memo or HOC, it must be used like this:

export const Button = forwardRef<'button', ButtonProps>((props: ButtonProps) => {

Even if the second ButtonProps is not needed, it has to be props: ButtonProps, otherwise no controls show up.

The declaration of props have to be in a plain interface with no magic:

export interface ButtonProps {
  color?: 'primary' | 'error';
}

This works as expected. But in one big project I use polymorphic components and the props are not declared using a simple interface, they are defined like this:

export interface ButtonOwnProps {
  color?: 'primary' | 'error';
}

export interface ButtonTypeMap<C extends React.ElementType = 'button', P = {}> {
  defaultAs: C;
  props: P & ButtonOwnProps;
}

export type ButtonProps<
  C extends React.ElementType = ButtonTypeMap['defaultAs'],
  P = {},
> = OverrideProps<ButtonTypeMap<C, P>, C>;

This was working with v7 but does not work with Storybook 8 anymore.

Storybook config in main.ts:

For one project I was using docs: false in the config to disable the "Docs" tab completely (because there's an extra documentation website for this).

  addons: [
    '@storybook/addon-a11y',
    {
      name: '@storybook/addon-essentials',
      options: {
        docs: false,
      },
    },
  ],

In v7 this was fine, but if you use the same in Storybook 8 no controls show up. Also it's not needed anymore, so just remove it or set docs: true (which is the default).

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

[daylesalmon]

There is some stuff that I found out recently, that might help somebody.

When using forwardRef or memo or HOC, it must be used like this:

export const Button = forwardRef<'button', ButtonProps>((props: ButtonProps) => {

Can we get this issue re-opened? As this issue still persists.

I am using forwardRef components, and the only way to get react-docgen to display the descriptions is to do what is mentioned in the above comment (declare the prop types in two places). We shouldn't have to do this though, as the type exists and you should be able to access it via an abstract syntax tree or similar. I'm guessing this is how it was working in v7 with react-docgen-typescript?

For additional context, I expect:

export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {...}

to show the correct prop descriptions.