"StyledComponent" Component - No propTypes defined!

[rwieruch]

After upgrading from Storybook 4.x.x to 5.0.6., I am not able anymore to see the assigned propTypes for Styled Components in Storybook anymore.

That's what I see in Storybook:

---

---

That's what I have coded:

const TabBar = styled.div`
  display: flex;
  flex-direction: column;
`;

TabBar.displayName = 'TabBar';

TabBar.propTypes = {
  children: PropTypes.arrayOf(
    PropTypes.shape({
      type: PropTypes.oneOf([TabBar.ContentTab]),
    }),
  ).isRequired,
};

And I would expect to see the children prop types instead.

Note: It works for other components which haven't defined with styled components though.

[shilman]

So this worked as is in 4.x and then just broke in 5.0? Are you using a custom webpack config?

[rwieruch]

I checked again and it worked with 4.1.11. @shilman It looked at least like this:

---

---

That's my custom webpack config:

module.exports = ({ config }) => {
  config.module.rules.push(
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: ['babel-loader'],
    },
    {
      test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
      use: ['file-loader'],
    },
    {
      test: /stories\.(js|jsx)?$/,
      loaders: [require.resolve('@storybook/addon-storysource/loader')],
      enforce: 'pre',
    },
  );

  return config;
};

[shilman]

Thanks for confirming @rwieruch. I'm working on a replacement for addon-info, and will keep my eyes out for this. I'll also fix it in addon-info assuming that it's an easy fix.

[rwieruch]

Perfect! Thank you @shilman 👍

[liamross]

@shilman This may also be related to the bug I logged for the missing prop table in TypeScript: #6345

[oknoorap]

it's fixed already and published? @shilman

[shilman]

@oknoorap Nope, will comment here when it is. If anybody else wants to take a crack at it, they're more than welcome!

[stale]

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!

[stale]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[cyrus-za]

Please let me know when this gets fixed. Quite annoying to see all these unknown styled components

Not using a custom webpack. Using CRA with typescript

[rwieruch]

Not sure how to keep issues open when the stale bot comes along 😄

[shilman]

FYI you might want to check out Storybook Docs which is designed to replace addon-info.

Here's the project description: https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a
And here's the guide to technical preview alpha you can use today: https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing

[rwieruch]

Thanks for sharing! Looks super promising and I will try it this week 👍

[shilman]

@rwieruch Great! Github issues welcome + we also have a discussion going in the #docs-mode channel in our discord around design feedback & support https://discord.gg/UUt2PJb

[stale]

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!

[stale]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!