Storybook can't import docs from a package

Describe the bug I have written a story for a component from an imported package. While the story loads up in Storybook, it doesn’t automatically import documentation from the package.

To Reproduce Steps to reproduce the behavior:

1. Create a story for a component from an imported package e.g. @blueprintjs/core
2. Click on Docs on the storybook
3. Scroll down to args table
4. See no description, no default values

Expected behavior See description and default values coming from the package

Code snippets

import React from 'react';
import { Breadcrumbs, IBreadcrumbProps, IBreadcrumbsProps } from '@blueprintjs/core';

export default {
  title: 'Components/Breadcrumbs/Breadcrumbs',
  component: Breadcrumbs,
};

const items: IBreadcrumbProps[] = [
  { href: '/folder', text: 'Folder One' },
  { href: '/folder/one', text: 'Folder Two' },
  { text: 'Document.xls' },
];

export const Default = (args: IBreadcrumbsProps) => <Breadcrumbs {...args} />;

Default.args = {
  items,
  collapseFrom: 'start',
} as IBreadcrumbsProps;

Screenshots See the Storybook Docs below

Even though the code in node_modules/@blueprintjs/core/lib/esm/components/breadcrumbs/breadcrumbs.d.ts has included descriptions for props

export interface IBreadcrumbsProps extends IProps {
    /**
     * Callback invoked to render visible breadcrumbs. Best practice is to
     * render a `<Breadcrumb>` element. If `currentBreadcrumbRenderer` is also
     * supplied, that callback will be used for the current breadcrumb instead.
     * @default Breadcrumb
     */
    breadcrumbRenderer?: (props: IBreadcrumbProps) => JSX.Element;
    /**
     * Which direction the breadcrumbs should collapse from: start or end.
     * @default Boundary.START
     */
    collapseFrom?: Boundary;
    /**
     * Callback invoked to render the current breadcrumb, which is the last
     * element in the `items` array.
     *
     * If this prop is omitted, `breadcrumbRenderer` will be invoked for the
     * current breadcrumb instead.
     */
    currentBreadcrumbRenderer?: (props: IBreadcrumbProps) => JSX.Element;
    /**
     * All breadcrumbs to display. Breadcrumbs that do not fit in the container
     * will be rendered in an overflow menu instead.
     */
    items: IBreadcrumbProps[];
    /**
     * The minimum number of visible breadcrumbs that should never collapse into
     * the overflow menu, regardless of DOM dimensions.
     * @default 0
     */
    minVisibleItems?: number;
    /**
     * Props to spread to `OverflowList`. Note that `items`,
     * `overflowRenderer`, and `visibleItemRenderer` cannot be changed.
     */
    overflowListProps?: Partial<IOverflowListProps<IBreadcrumbProps>>;
    /**
     * Props to spread to the `Popover` showing the overflow menu.
     */
    popoverProps?: IPopoverProps;
}

System

Environment Info:

  System:
    OS: macOS 11.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Binaries:
    Node: 12.18.1 - ~/.nvm/versions/node/v12.18.1/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.5 - ~/.nvm/versions/node/v12.18.1/bin/npm
  Browsers:
    Chrome: 87.0.4280.88
    Edge: 87.0.664.66
    Safari: 14.0.2

Additional context In our design system we would like to use components from Blueprint and display documentation accordingly on Storybook

[dessskris]

Eek! Thank you @shilman, I finally got it to load up the docs!

~Solution:~

~1) Import and extend PureBreadcrumbs as you did, but with FC instead of React.FC (If I change it back, it won’t work)~

~2) In Breadcrumbs.stories.tsx don’t specify Default.args explicitly. (If I change it back, it generates the error you mentioned: this.props.breadcrumbRenderer is not a function)~

~It’s strange, but I’m glad we’ve found a working solution! Must be a new year’s miracle… Thank you so much for your help.~

EDIT: I just had to supply the breadcrumbRenderer function and it worked right away as per your recommendation. Changed it back to React.FC and it worked fine too

I’ve updated the repro repo here https://github.com/dessskris/sb-extends-props for anyone’s future reference.

Happy New Year!

[shilman]

I think the reason MUI is working and Blueprint is failing is because the Button component extends MUI, whereas the Blueprint code is using Blueprint components directly.

The main.js override says “allow types coming from MUI/blueprint”. But there is another configuration that runs react-docgen-typescript-plugin on "**/*.tsx". This extracts the docgen information and adds it to the component like Button.__docgenInfo = { some extracted json data }, which gets transformed into what’s seen in the table.

I tried creating the following in Breadcrumbs.tsx:

import React from "react";
import {
  Breadcrumbs as PureBreadcrumbs,
  IBreadcrumbsProps,
} from "@blueprintjs/core";

export const Breadcrumbs: React.FC<IBreadcrumbsProps> = (props) => (
  <PureBreadcrumbs {...props} />
);

It failed with the error:

breadcrumbs.js:66 Uncaught TypeError: this.props.breadcrumbRenderer is not a function
    at Breadcrumbs.push../node_modules/@blueprintjs/core/lib/esm/components/breadcrumbs/breadcrumbs.js.Breadcrumbs.renderBreadcrumb (breadcrumbs.js:66)
...

In the short term, if your components extend/wrap existing components I’d expect that to work. Maybe you’ll have better luck with Blueprint than I did.

The longer-term fix is to restructure the code so that it’s possible to import type information directly from the type files distributed in node_modules. Pretty sure there’s already an open issue for this.