Storybook: Storybook 5.0.6 react-docgen propTypes uknown !

[y0c]

Describe the bug
I tried storybook 5.0.6 migration progress react-docgen is not working!
Am i using wrong? working in storybook 4.1

webpack.config.js

// load the default config generator.
const path = require('path');

module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    use: [
      {
        loader: require.resolve('awesome-typescript-loader'),
      },
      // Optional
      {
        loader: require.resolve('react-docgen-typescript-loader'),
      },
    ],
  });

  config.module.rules.push({
    test: /\.scss$/,
    use: [
      require.resolve('style-loader'),
      require.resolve('css-loader'),
      require.resolve('sass-loader'),
    ],
  });

  config.resolve.modules.push(path.join(__dirname, '../'));
  config.resolve.extensions.push('.ts', '.tsx');
  return config;
};

[leoyli]

As far as I know the current implementation only able to capture the default export info with its propTypes. If you wrap your component with HOC and then export directly, then it is not working as you may expected.

[shilman]

@leoyli something changed if it was working in 4.x. @y0c can you check if it works in 5.0.0?

[y0c]

@shilman I'll check to see if it's working on version 5.0.0 and leave you a comment after I check it out.

[leoyli]

Oh sorry my bad, don't aware that it was working on 4.1... I was also trying to get it working on v5 but I thought it just because I export my component along with wrapping in HOC. If remove the HOC wrapping, the typing info is working as expected.

[y0c]

@shilman I tried in version 5.0.0 but the results were the same.
The typescript interface is as follows:

interface RangeDatePickerProps {
  /** To display input format (Day.js format) */
  dateFormat: string;
  /** Initial Calendar base date(if start date not set) */
  initialDate: dayjs.Dayjs;
  /** Initial Start Date */
  initialStartDate?: dayjs.Dayjs;
  /** Initial End Date */
  initialEndDate?: dayjs.Dayjs;
  /** RangeDatePicker change event */
  onChange?: (start?: dayjs.Dayjs, end?: dayjs.Dayjs) => void;
  /** start day display this prop(optional) */
  startText: string;
  /** end day display this prop(optional) */
  endText: string;
  /** calendar wrapping element */
  wrapper?: (calendar: JSX.Element) => JSX.Element;
}

In 4.x version working perfect.
As shown in the code below, several "Prop"s were combined to function normally.
but 5.x version combine prop and propTypes is not working.

export type Props = RangeDatePickerProps & CalendarProps & InputProps & PickerProps;

https://github.com/y0c/react-datepicker
is my repository url

[shilman]

Thanks for following up @y0c. I'm on vacation this week (but obsessively checking github .. FML) and I plan to look into this once I get back

[y0c]

Thank you for your reply on vacation @shilman.

[y0c]

I solved the problem, but I couldn't figure out the exact cause.
when updating version 5.0.6 it executed the command rm -rf node_modules yarn.lock && yarn
this part seems to be a problem. It seems that there was a problem among some submodules.

This is the yarn.lock file that fixes the problem.
https://github.com/y0c/react-datepicker/commit/204a1ab70d9b151829ec16b71814cab96aab6a43

[leoyli]

@y0c, that is kind of surprising but useful! Thank you for finding where is the source of bugs 🙈!

[shilman]

@leoyli FYI we have a yarn / npm label for exactly these kinds of problems 😖

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!