Storybook: Addon-Info not showing props in stories.

[amittkSharma]

Hi Team,

I am facing an issue with addon-info, I am having an external react components package and I created a separate package of the storybook with webpack depending on components package.

In the components there are no prop types and interface are defined in typescript, and now props and component names are not appearing in the stories, instead, components name is "Unknown" and props section is empty.

package.json looks following:

"dependencies": {
"antd": "3.7.0",
"EXTERNAL_PACKAGE": "*",
"react": "16.4.1",
"react-apollo": "2.1.9",
"react-dom": "16.4.1",
"react-router": "4.3.1",
"react-router-dom": "4.3.1",
"tslib": "1.9.3"
},
"devDependencies": {
"@sambego/storybook-state": "1.0.7",
"@storybook/addon-actions": "3.4.8",
"@storybook/addon-console": "1.0.4",
"@storybook/addon-info": "3.4.8",
"@storybook/addon-knobs": "3.4.8",
"@storybook/addon-notes": "3.4.8",
"@storybook/addon-options": "3.4.8",
"@storybook/react": "3.4.8",
"@types/node": "8.9.1",
"@types/react": "16.4.6",
"@types/react-dom": "16.0.6",
"@types/react-router": "4.0.29",
"@types/react-router-dom": "4.2.7",
"@types/storybook__addon-actions": "3.0.3",
"@types/storybook__addon-info": "3.2.3",
"@types/storybook__addon-knobs": "3.3.1",
"@types/storybook__addon-notes": "3.3.2",
"@types/storybook__react": "3.0.8",
"babel-core": "6.26.3",
"concurrently": "3.6.0",
"cpx": "1.5.0",
"fork-ts-checker-webpack-plugin": "0.4.3",
"html-loader": "0.5.5",
"http-proxy-middleware": "0.18.0",
"markdown-loader": "3.0.0",
"react-docgen-typescript-loader": "2.1.1",
"storybook-addon-apollo-graphql": "2.1.0",
"storybook-readme": "3.3.0",
"style-loader": "0.21.0",
"thread-loader": "1.1.5",
"ts-loader": "4.4.2",
"tslint-checker": "2.0.2",
"typescript": "2.9.2"
}

please let me know how it can work with separate packages.

Thanks in advance
Amit

[fredcido]

+1

[stale[bot]]

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!

[gabrielcsapo]

@amittkSharma would you be able to provide an example repo for us to reproduce?

[haldunanil]

I'm having the same issue, here is some code:

config.ts

import { configure, addDecorator } from "@storybook/react";
import { setDefaults, withInfo } from "@storybook/addon-info";
import { setOptions } from "@storybook/addon-options";
import { withDocs } from "storybook-readme";
import styled from "styled-components";

// addon-info
setDefaults({
  inline: false // Displays info inline vs click button to view
});

addDecorator(withInfo);

// addon-options
setOptions({
  addonPanelInRight: true,
});

export const withMarkup = withDocs({
  PreviewComponent: styled.div`
    text-align: left;
    padding: 25px;
    margin: 25px 0;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.1);
  `
});

function loadStories() {
  require("../src/index.stories.ts");
}

configure(loadStories, module);

Tooltip.tsx

import React from "react";
import "./Tooltip.scss";

import { Tooltip as ReactstrapTooltip } from "reactstrap";

import { withStyleClassName } from "../../../util";

type delayObject = {
  show?: number;
  hide?: number;
};

interface TooltipProps {
  // boundaries for popper, can be scrollParent, window, viewport, or any DOM element
  boundariesElement?: string | React.DOMElement<any, any>;
  // boolean to control the state of the tooltip
  isOpen?: boolean;
  hideArrow?: boolean;
  // callback for toggling isOpen in the controlling component.
  // It will receive an object with info about the event that triggered it
  toggle?: Function;
  // target element or element ID, popover is attached to this element
  target: string | Function | React.DOMElement<any, any>;
  // Where to inject the popper DOM node, default to body
  container?: string | Function | React.DOMElement<any, any>;
  // optionally override show/hide delays - default { show: 0, hide: 250 }
  delay?: delayObject | number;
  className?: string;
  // Apply class to the inner-tooltip
  innerClassName?: string;
  // Apply class to the arrow-tooltip ('arrow' by default)
  arrowClassName?: string;
  // optionally hide tooltip when hovering over tooltip content - default true
  autohide?: boolean;
  // convenience attachments for popover
  placement?:
    | "auto"
    | "auto-start"
    | "auto-end"
    | "top"
    | "top-start"
    | "top-end"
    | "right"
    | "right-start"
    | "right-end"
    | "bottom"
    | "bottom-start"
    | "bottom-end"
    | "left"
    | "left-start"
    | "left-end";
  // Custom modifiers that are passed to Popper.js, see https://popper.js.org/popper-documentation.html#modifiers
  modifiers?: object;
  offset?: string | number;
  // Custom ref handler that will be assigned to the "ref" of the <div> wrapping the tooltip elements
  innerRef?: Function | string | React.Ref<HTMLElement>;
  trigger?: string;
}

export const Tooltip: React.SFC<TooltipProps> = (props: TooltipProps) => (
  <ReactstrapTooltip {...props} data-ut="tooltip" />
);

export default Tooltip;

Tooltip.stories.tsx

import React from "react";
import { storiesOf } from "@storybook/react";

import { Tooltip } from "./Tooltip";
import TooltipReadme from "./README.md";

import { withKnobs, select } from "@storybook/addon-knobs/react";
import { withMarkup } from "../../../../.storybook/config";

const TooltipStories = storiesOf("Tooltips/Tooltip", module);

// add the knobs as a decorator
TooltipStories.addDecorator(withKnobs);

type exampleState = {
  tooltipOpen: boolean;
};

class Example extends React.Component {
  public state: exampleState = {
    tooltipOpen: false
  };

  toggle = () => {
    this.setState({ tooltipOpen: !this.state.tooltipOpen });
  };

  render() {
    return (
      <div>
        <p>
          Somewhere in here is a{" "}
          <a href="#" id="TooltipExample">
            tooltip
          </a>.
        </p>

        <Tooltip
          placement={select("Tooltip placement", [
            "auto",
            "auto-start",
            "auto-end",
            "top",
            "top-start",
            "top-end",
            "right",
            "right-start",
            "right-end",
            "bottom",
            "bottom-start",
            "bottom-end",
            "left",
            "left-start",
            "left-end"
          ])}
          isOpen={this.state.tooltipOpen}
          toggle={this.toggle}
          target="TooltipExample"
        >
          Hello, world!
        </Tooltip>
      </div>
    );
  }
}

TooltipStories.add("basic use", withMarkup(TooltipReadme, () => <Example />));

export default TooltipStories;

I'm seeing this:

[thielium]

@haldunanil using import * as React from 'react'; instead of import React from 'react' worked for me. Can't find the issue to link, sorry for posting voodoo without an explanation.

[fabb]

Similar for me, import React, { Component } from „react“; and class Example extends Component worked for me. Some magic seems to be broken.

[stale[bot]]

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!

[jchiatt]

Anyone ever find a solution for this? I attempted import * as React from 'react' but that doesn't work for me.

Still seeing <Unknown> as the top-level component in Story Source, and I'm seeing "Unknown Component" and "no propTypes defined" at the bottom. Using Typescript and docgen plugin to see my props table (which is working fine), but I'm still seeing the Unknown message section underneath that section.

[kylegwalsh]

I'm not sure about the component being top-level in your Story Source, but I just solved the issue on my end. My issue was caused by using a Fragment as a wrapper for my stories.

I resolved it by adding the "Fragment" component to the propTablesExclude option in the withInfo function.

import React, { Fragment } from 'react';
import { configure, addDecorator } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import { GlobalStyle, ThemeProvider } from '../src/theme';
import { Container } from '../src/components';

// Attach design system styles/theme to all stories
addDecorator((story) => (
    <Fragment>
        <ThemeProvider>
            <Container>{story()}</Container>
        </ThemeProvider>
        <GlobalStyle />
    </Fragment>
));

// Add prop tables to components (based on component type interfaces)
addDecorator(
    withInfo({
        propTablesExclude: [ThemeProvider, GlobalStyle, Container, Fragment],
    })
);

// automatically import all files ending in *.stories.tsx
configure(require.context('../stories', true, /\.stories\.tsx$/), module);

Edit: I just found a better solution for my issue. By moving the bottom decorator to the top of the file, the wrappers no longer appear in Story Source or the Prop Tables.

import React, { Fragment } from 'react';
import { configure, addDecorator } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import { GlobalStyle, ThemeProvider } from '../src/theme';
import { Container } from '../src/components';

// Add prop tables to components (based on component type interfaces)
// This decorator must go first, or the Story Source generates incorrectly
addDecorator(withInfo());

// Attach design system styles/theme to all stories
addDecorator((story) => (
    <Fragment>
        <ThemeProvider>
            <Container>{story()}</Container>
        </ThemeProvider>
        <GlobalStyle />
    </Fragment>
));

// automatically import all files ending in *.stories.tsx
configure(require.context('../stories', true, /\.stories\.tsx$/), module);