Uses filename, rather than component name

[IanVS]

This was originally reported in https://github.com/storybookjs/builder-vite/issues/79#issuecomment-1105487705.

It seems that the docgen info is being created based on the filename, not the name of the component in the file. In this case, the component is something like:

// BaseButton.tsx
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(...);

export default Button;

But, the docgen info is added like this:

const Button = React.forwardRef(_c = ({
...
});
export default Button;
...
try {
    // @ts-ignore
    BaseButton.displayName = "BaseButton";
    // @ts-ignore
    BaseButton.__docgenInfo = { "description": "", "displayName": "BaseButton", "props": { "disabled": { "defaultValue": null, "description": "Disabled state", "name": "disabled", "required": false, "type": { "name": "boolean" } }, "color": { "defaultValue": { value: "brand" }, "description": "Button colors", "name": "color", "required": false, "type": { "name": "enum", "value": [{ "value": "\"brand\"" }, { "value": "\"gray\"" }, { "value": "\"green\"" }, { "value": "\"red\"" }, { "value": "\"yellow\"" }] } }, "children": { "defaultValue": null, "description": "React element children", "name": "children", "required": false, "type": { "name": "ReactNode" } }, "block": { "defaultValue": null, "description": "Choose between normal or full-width button", "name": "block", "required": false, "type": { "name": "boolean" } }, "isLoading": { "defaultValue": null, "description": "Show loading indicator if set to `true`", "name": "isLoading", "required": false, "type": { "name": "boolean" } }, "icon": { "defaultValue": null, "description": "Set icon to be rendered in the button", "name": "icon", "required": false, "type": { "name": "ComponentType<SVGProps<SVGSVGElement>>" } }, "iconPosition": { "defaultValue": null, "description": "Position of the icon to be rendered", "name": "iconPosition", "required": false, "type": { "name": "enum", "value": [{ "value": "\"left\"" }, { "value": "\"right\"" }] } }, "loadingText": { "defaultValue": { value: "Loading . . ." }, "description": "Set loading text", "name": "loadingText", "required": false, "type": { "name": "string" } }, "size": { "defaultValue": { value: "md" }, "description": "Button sizes", "name": "size", "required": false, "type": { "name": "enum", "value": [{ "value": "\"sm\"" }, { "value": "\"md\"" }, { "value": "\"lg\"" }] } }, "variant": { "defaultValue": { value: "primary" }, "description": "Button variants", "name": "variant", "required": false, "type": { "name": "enum", "value": [{ "value": "\"primary\"" }, { "value": "\"secondary\"" }, { "value": "\"ghost\"" }] } } } };
    // @ts-ignore
    if (typeof STORYBOOK_REACT_CLASSES !== "undefined")
        // @ts-ignore
        STORYBOOK_REACT_CLASSES["src/components/Button/BaseButton/BaseButton.tsx#BaseButton"] = { docgenInfo: BaseButton.__docgenInfo, name: "BaseButton", path: "src/components/Button/BaseButton/BaseButton.tsx#BaseButton" };
}
catch (__react_docgen_typescript_loader_error) { }

Note that __docgenInfo is being added to BaseButton, which doesn't exist, but is the name of the file.

I tried removing the React.forwardRef, but that had no effect. Only when I changed the name of the const to BaseButton did the argsTable get generated correctly.