-
-
Notifications
You must be signed in to change notification settings - Fork 249
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
Props description not rendering as expected #137
Comments
Hi @tuchk4 - What's the correct implementation for "Type" and "Description" to be returned properly? What is being returned: Config.js
Button.js
|
Trying to find the problem. Docs are generated by https://github.com/storybooks/babel-plugin-react-docgen. This addon comes with storybook. Issues with docs generation may relate to it. This Trying to find some bugs at |
@tuchk4 - Can you provide a working example with the implementation of all the fields being populated? (Type, DefaultValue, Description) You don't have them being displayed on your current live example. https://tuchk4.github.io/storybook-readme/?path=/story/propstable--button |
@jephjohnson yes, will add to examples with next release |
FYI if you guys are using styled components (or possibly glamorous?), you may find that the proptypes tables don't render properly. I think it's related to reactjs/react-docgen#256 Basically if you set propTypes on a styled component it doesn't work, so I use a workaround like this (not a real example, just edited for brevity): const StyledHeading = styled.h1`
color: red;
`;
// Make into a "normal" component so proptypes work.
const Heading = ({ children, ...props }) => (
<StyledHeading {...props}>{children}</StyledHeading>
);
Heading.propTypes = {
/** The heading level. This selects the appropriate tag, i.e. h1 - h6 */
level: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
};
Heading.defaultProps = {
level: 4
};
export default Heading; |
NOTE: not published yet |
published 5.0.2 Leave this issue open for few day. Maybe some bugs or feedback |
@tuchk4 - Thank you Legend!!! |
@tuchk4 - Were you able to receive the same output using the approach below? I copied your example exactly as is, but using this approach: In your example, stories are inline and not global. Running into the same issue. |
@jephjohnson The latest versions are used? |
Yes, |
Hi @tuchk4 - Sorry pest on this, just was wondering if it had anything to do with the approach or anything else you could think of? |
@jephjohnson sorry, this week I did not have time to work with storybook-readme. Anyway this is very strange that example don't work for you. If it possible could you please clone this repo and run yarn
lerna bootstrap
# not sure if need to run this
# yarn dev
cd packages/example-react
yarn storybook Confirm if you still have that problem please |
Thanks @tuchk4: This is my setup and the approach where it does not render properly: Reference: Config.js
Button.example.js
|
I'm also seeing some weirdness here. I'm trying to update from v4 to v5 (so keeping Button.propTypes = {
as: PropTypes.string,
block: PropTypes.bool,
children: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.node]),
disabled: PropTypes.bool,
href: PropTypes.string,
isLoading: PropTypes.bool,
onClick: PropTypes.func.isRequired,
size: PropTypes.oneOf(['small', 'medium', 'large'])
}; |
@leerob just copied your prop-types: Could you please show versions of |
@jephjohnson Can you confirm you still have issue with prop-tables? Please check the version of |
I'm having the same issue as @leerob with |
I have the same issue too. Required and DefaultValue works as expected tho. I'm using |
Right, I was trying to figure out the issue and my problem was that I'm using a custom hoc which I use in the component. But my tests showed some inconsistency. For instance, this example does not render the Props Table at all: const MyComponent = ({ someText }) => (
<div className="my-component">
{someText}
</div>
);
MyComponent = {
/** This is a text example */
someText: PropTypes.string.isRequired
};
MyComponent.defaultProps = {
someText: "My Text"
};
export default withPicker(MyComponent); While, in this other example, I can see the Props Table. But only Required and DefaultValue works: const MyComponent = withPicker({ someText }) => (
<div className="my-component">
{someText}
</div>
);
MyComponent = {
/** This is a text example */
someText: PropTypes.string.isRequired
};
MyComponent.defaultProps = {
someText: "My Text"
};
export default MyComponent; Hope this helped a little. Thanks for the quick reply! |
@renemn Thanks for more cases for investigation. So far, this problem is kind of intertwined... some limitations from |
Hi, is there any love for Typescript? My Prop table is not rendered at all as I do not specify PropTypes. |
@tomitrescak did you tried https://github.com/milesj/babel-plugin-typescript-to-proptypes? |
I've installed this module this morning and it all seems to be working as expected apart from rendering a description in the
<!-- PROPS -->
table. I wonder if I am doing something wrong for the props table to not recognise the description?The output is as follows:
The text was updated successfully, but these errors were encountered: