Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
lobaak opened this issue Sep 24, 2020 · 1 comment

Comments

@lobaak
Copy link

lobaak commented Sep 24, 2020

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 
@lobaak lobaak changed the title Incorrect description in args table when using named export for shared prop type in V6 Incorrect description in args table when using named export for shared object prop type in V6 Sep 24, 2020
@NathanTrost
Copy link

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.

@shilman shilman removed the P3 label Oct 18, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants