Storybook: Addon Info - Prop Types wrong infos on static bundle

Created on 26 Mar 2019  路  5Comments  路  Source: storybookjs/storybook

Describe the bug
After running static build the Prop Types table misses informations

To Reproduce
Steps to reproduce the behavior:

  1. Go to https://components.helixa.ai/?path=/story/atoms--button
  2. Scroll down to Prop Types
  3. See error

Expected behavior
Should look the same as on dev mode

Screenshots
Local
Schermata 2019-03-26 alle 11 21 01

Static bundle
Schermata 2019-03-26 alle 11 21 08

The difference inspecting react table component

Schermata 2019-03-26 alle 12 52 50

On static bundle the 'propTypes' object is missing.

Code snippets

import PropTypes from 'prop-types';
import React from 'react';
import { StyledButton } from './StyledButton';

const Button = ({
  disabled,
  tag,
  as,
  onClick,
  onMouseOver,
  onMouseOut,
  ...rest
}) => (
  <StyledButton
    as={!as && tag ? tag : as}
    disabled={disabled}
    onClick={onClick}
    onMouseOver={onMouseOver}
    onMouseOut={onMouseOut}
    {...rest}
  />
);

// This is to work around: https://github.com/kadirahq/react-storybook-addon-info/issues/26#issuecomment-229029177
Button.displayName = 'Button';

Button.propTypes = {
  /** The html tag of the button to render with */
  tag: PropTypes.oneOf(['button', 'a']),
  /** The html type of the button, tip: use submit in forms */
  type: PropTypes.oneOf(['button', 'submit']),
  /** The variant colors of the button  */
  variant: PropTypes.oneOf(['primary', 'standard', 'outlined', 'subtle']),
  /** The size of the button  */
  size: PropTypes.oneOf(['small', 'medium', 'large']),
  /** Sets the disabled prop  */
  disabled: PropTypes.bool,
  /** On click callback function  */
  onClick: PropTypes.func,
  /** On Mouse Over callback function  */
  onMouseOver: PropTypes.func,
  /** On Mouse Out callback function  */
  onMouseOut: PropTypes.func,
};

Button.defaultProps = {
  tag: 'button',
  type: 'button',
  variant: 'standard',
  size: 'medium',
  disabled: false,
};

export default Button;

System:

  • OS: MacOS
  • Device: Macbook Pro 2018
  • Browser: chrome
  • Framework: react
  • Addons: info
  • Version: [e.g. 5.0.5]

Additional infos

    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.3.4",
    "@storybook/addon-actions": "^5.0.5",
    "@storybook/addon-info": "^5.0.5",
    "@storybook/addon-jest": "^5.0.5",
    "@storybook/addon-knobs": "^5.0.5",
    "@storybook/addon-links": "^5.0.5",
    "@storybook/addon-options": "^5.0.5",
    "@storybook/addons": "^5.0.5",
    "@storybook/react": "^5.0.5",
info question / support

Most helpful comment

I think there is a point here concerning static build issues. https://github.com/storybooks/storybook/tree/next/addons/info#the-faq

Also, this worked for me to get around the issue as well
"storybook:build": "NODE_ENV=development build-storybook -c .storybook -o build"

All 5 comments

Any news on this ?

I think there is a point here concerning static build issues. https://github.com/storybooks/storybook/tree/next/addons/info#the-faq

Also, this worked for me to get around the issue as well
"storybook:build": "NODE_ENV=development build-storybook -c .storybook -o build"

Fixed, thanks a lot @joeycozza !

Still not working for PropTypes.oneOf(...)

Still not working for PropTypes.oneOf(...)

Hey Andre, it works for me:

https://components.helixa.ai/?path=/story/atoms-button--button
Storybook version : 5.1.9

Was this page helpful?
0 / 5 - 0 ratings