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

Props description not rendering as expected #137

Open
aturner-zengenti opened this issue Mar 20, 2019 · 26 comments
Open

Props description not rendering as expected #137

aturner-zengenti opened this issue Mar 20, 2019 · 26 comments

Comments

@aturner-zengenti
Copy link

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?

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import Label from '../Partials/Label/Label';

const Textfield = styled(({ type, label, id, required, placeholder, defaultValue }) => (
  <div>
    <Label id={id} text={label} />
    <input
      type={type}
      defaultValue={defaultValue ? defaultValue : null}
      placeholder={placeholder ? placeholder : null}
      required={required ? true : false}
      id={id}
    />
  </div>
))`
  margin: 0;
  border: 1px solid #ccc;
  padding: 0;
  display: inline-block;
  vertical-align: middle;
  white-space: normal;
  background: none;
  line-height: 1;
  font-size: 13px;
  font-family: Arial;
  box-sizing: content-box;
`;

Textfield.propTypes = {
  /* Type of text field, this will grow as we progress */
  type: PropTypes.oneOf(['text']),
  /* Label for text field, this is required for accessibiity reasons */
  label: PropTypes.string.isRequired,
  /** Unique ID for field, this allows the label to reference the input field */
  id: PropTypes.string.isRequired,
  /** Is the form required? if true a required attribute will be added to the input */
  required: PropTypes.bool,
  /** Placeholder text to appear within the input field, probably best not to put instructions in here as they disappear on change */
  placeholder: PropTypes.string,
  /** A default value for the form when it is first loaded, useful if you are a logged in user etc. */
  defaultValue: PropTypes.string,
};

export default Textfield;

The output is as follows:
storybook-readme

@tuchk4 tuchk4 changed the title Description not rendering as expected Props description not rendering as expected Mar 20, 2019
@jnhooper
Copy link

I have a similar issue only for me the table renders, but adds extra rows on coment line breaks

 /**
   * statusColor dictates the color of the button
   * can be.
   */
  statusColor: ButtonStatusColor,
  

with it rendering like so
image

@jephjohnson
Copy link

jephjohnson commented Mar 27, 2019

Hi @tuchk4 - What's the correct implementation for "Type" and "Description" to be returned properly?

What is being returned:


MicrosoftTeams-image

Config.js

storiesOf(componentName, module)
.addDecorator(withKnobs)
.addDecorator(addReadme)
.addParameters({
options: {
 panelPosition: 'right',
},
readme: {
  sidebar: readme,
 }
 })

 .add(name, () => {
 return useMyContentWrapper ? (
 <MyContentWrapper>
 <Example />
 </MyContentWrapper>
 ) : (
 <Example />
 );
 });

Button.js

....

Checkbox.propTypes = {
  /** Any extra CSS classes for the component */
  className: string,
  /** Name for the input field */
  name: string,
  /** Any extra CSS id for the component */
  id: string,
  /** Text displayed with the Checkbox */
  label: string,
  /** Function to trigger when value changes */
  onChange: func,
  /** Value for input */
  value: string,
  /** Testing Key for Jest */
  testId: string,
  /** HTML `checked` attribute */
  checked: bool
};  

@tuchk4
Copy link
Owner

tuchk4 commented Mar 28, 2019

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 babel-plugin-react-docgen PR storybookjs/babel-plugin-react-docgen#68 (Add forward ref support) is related to my issues but not sure it is common problem with props info generation.

Trying to find some bugs at storytbook-readme codebase but still cant see errors. Still looking for.

@Zyzle
Copy link

Zyzle commented Apr 1, 2019

Just a quick bit of info, in addition to the problem with newlines in the prop description comments, I'm seeing something similar in shape props with a default value:
Screenshot 2019-04-01 at 16 13 27

@jephjohnson
Copy link

@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

@tuchk4 tuchk4 reopened this Apr 9, 2019
@tuchk4 tuchk4 mentioned this issue Apr 9, 2019
8 tasks
@tuchk4
Copy link
Owner

tuchk4 commented Apr 9, 2019

@jephjohnson yes, will add to examples with next release

@redders6600
Copy link

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;

tuchk4 added a commit that referenced this issue Apr 9, 2019
@tuchk4
Copy link
Owner

tuchk4 commented Apr 9, 2019

@jephjohnson

NOTE: not published yet

@tuchk4
Copy link
Owner

tuchk4 commented Apr 9, 2019

published 5.0.2

Leave this issue open for few day. Maybe some bugs or feedback

@jephjohnson
Copy link

@jephjohnson

NOTE: not published yet

@tuchk4 - Thank you Legend!!!

@jephjohnson
Copy link

@tuchk4 - Were you able to receive the same output using the approach below? I copied your example exactly as is, but using this approach:
#83 (comment)

In your example, stories are inline and not global. Running into the same issue.
Screen Shot 2019-04-11 at 12 20 46 PM

@tuchk4
Copy link
Owner

tuchk4 commented Apr 11, 2019

@jephjohnson The latest versions are used?

@jephjohnson
Copy link

@jephjohnson The latest versions are used?

Yes, "@storybook/react": "^5.0.6", & "storybook-readme": "^5.0.2",

@jephjohnson
Copy link

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?

@tuchk4
Copy link
Owner

tuchk4 commented Apr 18, 2019

@jephjohnson sorry, this week I did not have time to work with storybook-readme.
Going to back to the project at the next week.

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

@jephjohnson
Copy link

Thanks @tuchk4: This is my setup and the approach where it does not render properly:

Reference:
#83 (comment)

Config.js

import React from 'react';
import path from 'path';
import {
  getStorybook,
  storiesOf,
  addDecorator,
  configure,
} from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs';
import { addReadme } from 'storybook-readme';

// register decorator
addDecorator(addReadme);

let getComponentName = filePath =>
  path
    .dirname(filePath)
    .split(path.sep)
    .reverse()[0];

let getPackageName = filePath =>
  path
    .dirname(filePath)
    .split(path.sep)
    .reverse()[1];

configure(() => {
  // Automatically import all examples
  const req = require.context(
    '../auto',
    true,
    /^((?!node_modules).)*\.example\.js$/,
  );

  const readMeReq = require.context(
    '../auto',
    true,
    /^((?!node_modules).)*\.README\.md$/,
  );

  req.keys().forEach(pathToExample => {
    const { name, Example } = req(pathToExample);
    const packageName = getPackageName(pathToExample);
    const componentName = `${packageName}.${getComponentName(pathToExample)}`;

    const readmePath = readMeReq.keys().find(rm => rm.includes(packageName));
    const readme = readMeReq(readmePath);

    storiesOf(componentName, module)
      .addParameters({
        readme: {
          content: '<!-- STORY --><!-- PROPS -->',
          sidebar: readme,
        },
      })
      .add(name, () => <Example dummy="test" />);
  });
}, module);

export { getStorybook };

Button.example.js

import React from 'react';
import Button from './';

export const name = 'Default';

export const Example = () => <Button label="Hi" />;

// copy proptypes so <!-- PROPS --> will work
Example.propTypes = Button.propTypes;

@leerob
Copy link

leerob commented Apr 29, 2019

I'm also seeing some weirdness here. I'm trying to update from v4 to v5 (so keeping withDocs) and here are the propTypes.

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'])
};

However, I'm seeing this.
image

@tuchk4
Copy link
Owner

tuchk4 commented May 2, 2019

@leerob just copied your prop-types:
image

Could you please show versions of storybook and storybook-readme?
Try to rm -rf node_modules and install deps again.

@tuchk4
Copy link
Owner

tuchk4 commented May 2, 2019

@jephjohnson Can you confirm you still have issue with prop-tables?
If yes could you please show versions of storybook and storybook-readme?
Try to rm -rf node_modules and install deps again.

Please check the version of storybook-readme like
cat node_modules/storybook-readme/package.json | grep version

@maxobaxo
Copy link

maxobaxo commented May 9, 2019

I'm having the same issue as @leerob with storybook-readme v.5.0.3 and storybook-react v.5.0.11

@renemn
Copy link

renemn commented Jul 3, 2019

I have the same issue too. Required and DefaultValue works as expected tho. I'm using storybook-readme 5.0.5, @storybook/react 5.1.9 and @storybook/addons 5.1.9

@lonyele
Copy link
Collaborator

lonyele commented Jul 3, 2019

@maxobaxo @renemn Hey guys, currently showing prop descriptions feature has some limitations(check more info on #177 ) We are trying to improve this so that it is more useful in an actual usage. Please wait until then~

@renemn
Copy link

renemn commented Jul 3, 2019

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!

@lonyele
Copy link
Collaborator

lonyele commented Jul 3, 2019

@renemn Thanks for more cases for investigation. So far, this problem is kind of intertwined... some limitations from react-docgen and we use datas from storybook Let's see how it can be solved from our side.

@tomitrescak
Copy link

Hi, is there any love for Typescript? My Prop table is not rendered at all as I do not specify PropTypes.

@smollweide
Copy link
Contributor

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?

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