Addon-docs: Typescript inherited prop types

[atanasster]

Issue: #7943

What I did

• added ability for Sections to manage expanded/collapsed state and hide/show "child" rows
• extract parent property from react typescript docgen. If the parent prop is available, will collapse the property rows into propSections (sections of properties)
• added example for typescript in officialy-storybook
• added webpack-react-docgen-typescript to main.js in official-storybook

How to test

replace webpack-react-docgen-typescript with react-docgen-typescript-loader in official-storybook/main.js

cc @shilman @domyen @patricklafrance

[vercel]

This pull request is being automatically deployed with ZEIT Now (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://zeit.co/storybook/monorepo/i1w06ypdk
✅ Preview: https://monorepo-git-fork-atanasster-collapse-typescript-props.storybook.now.sh

[ndelangen]

@domyen this could use your design eye I think.

[domyen]

Thanks @ndelangen! @atanasster we chatted about the design in the other issue.

Notes:

• Expandable prop "groups" should look similar to props except with an arrow beside them
• The nested props should be indented to illustrate the parent-child relationship
• When a prop group is collapsed show how many props are nested inside

All of the UI patterns are built atop existing designs with the exception of the expandable/collapsable pattern and the row indentation.

Zeplin link

[atanasster]

Thanks @domyen - what about this:

[domyen]

I think we need to strip the letter-spacing and other styling from the expander items so that they look more like the default row items.

Right now it seems like the expander item uses styling left over from the section separator when it should use the styling of the table row.

Check the Zeplin link to inspect the styles 👍

[atanasster]

thanks @domyen , got the link and I think its getting close :)

[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!

[johnnyBira]

@atanasster I came here from this gist and it's not clear to me how I would edit .storybook/main.js to work the way you describe.
https://gist.github.com/shilman/bc9cbedb2a7efb5ec6710337cbd20c0c

Could you please provide an example based on the config used in the gist?

const path = require("path");

module.exports = {
  stories: ["../src/stories/**/*.stories.(ts|tsx|js|jsx)"],
  addons: [
    "@storybook/addon-actions",
    "@storybook/addon-links",
    {
      name: "@storybook/preset-create-react-app",
      options: {
        tsDocgenLoaderOptions: {
          tsconfigPath: path.resolve(__dirname, "../tsconfig.json")
        }
      }
    },
    {
      name: "@storybook/addon-docs",
      options: {
        configureJSX: true
      }
    }
  ]
};

Thank you.

[ndelangen]

@shilman what's going to happen with this PR?

I can't resolve the merge-conflicts. Are these changes already applied? Are we missing this feature?

[shilman]

@ndelangen I'll take care of it

[ajkl2533]

Hi @shilman what's the state of this PR?

[mlg87]

any updates on this? would be a fantastic feature

[ndelangen]

@shilman please re-open if you think this is useful to keep.