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