storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
83.49k stars 9.13k forks source link

Incorrect description in args table when using named export for shared object prop type in V6 #12559

Open lobaak opened 3 years ago

lobaak commented 3 years ago

I'm experiencing an issue when using named exports for a type that is shared among multiple components. The description does not seem to be detected by Storybook and instead displays

{
  0: undefined,
  1: undefined,
  2: undefined,
  ...
}

If I include the prop type object directly it is displayed as expected.

{ title: string, content: string }

I thought initially it may be a Webpack issue but I've tried starting a new storybook project with the same result.

Contrived example

Screen Shot 2020-09-24 at 3 00 27 pm

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

import {itemType} from './types';

const Block = ({item}) => {
  return (
    <div>
      <h2>{item.title}</h2>
      <p>{item.content}</p>
    </div>
  );
};

Block.propTypes = {
  item: PropTypes.shape(itemType),
};

export default Block;
// Block.stories.js
import React from 'react';
import Block from './Block';

export default {
  component: Block,
  title: 'Design System/Base/Block',
};

const Template = (args) => <Block {...args} />;

export const Basic = Template.bind({});
Basic.args = {item: {title: 'Some title', content: 'testing'}};
// types.js
import PropTypes from 'prop-types';

export const itemType = {
  title: PropTypes.string,
  content: PropTypes.string,
};
System:
    OS: macOS 10.15.6
    CPU: (8) x64 Intel(R) Core(TM) i7-1060NG7 CPU @ 1.20GHz
  Binaries:
    Node: 14.10.1 - /usr/local/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 6.14.8 - /usr/local/bin/npm
  Browsers:
    Chrome: 85.0.4183.121
    Edge: 85.0.564.60
    Firefox: 80.0.1
    Safari: 14.0
  npmPackages:
    @storybook/addon-actions: ^6.0.21 => 6.0.21 
    @storybook/addon-docs: ^6.0.21 => 6.0.21 
    @storybook/addon-info: ^5.3.21 => 5.3.21 
    @storybook/addon-knobs: ^6.0.21 => 6.0.21 
    @storybook/addon-links: ^6.0.21 => 6.0.21 
    @storybook/addon-viewport: ^6.0.21 => 6.0.21 
    @storybook/addons: ^6.0.21 => 6.0.21 
    @storybook/react: ^6.0.21 => 6.0.21 
NathanTrost commented 3 years ago

Anyone come up with a solution for this? I also would like to have shared propTypes, but it looks like storybook can't view any props criteria unless it's in the same file as the component. I wonder if there could be a plugin that helps to apply your propTypes and descriptions to the custom argTypes in your story, even if I had to import that same propTypes object in to the story, it'd be valuable for centralizing propTypes.