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

Addon-docs: Typescript inherited prop types #9110

Closed

Conversation

atanasster
Copy link
Member

@atanasster atanasster commented Dec 10, 2019

Issue: #7943

grab24

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
Copy link

vercel bot commented Dec 10, 2019

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

@shilman shilman changed the title typescript inherited prop types Addon-docs: Typescript inherited prop types Dec 10, 2019
@ndelangen
Copy link
Member

@domyen this could use your design eye I think.

@domyen
Copy link
Member

domyen commented Dec 10, 2019

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

image

@atanasster
Copy link
Member Author

Thanks @domyen - what about this:

prop-table-design

@domyen
Copy link
Member

domyen commented Dec 10, 2019

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.

image

Check the Zeplin link to inspect the styles 👍

@atanasster
Copy link
Member Author

atanasster commented Dec 10, 2019

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

collapse-props

@vercel vercel bot temporarily deployed to staging December 10, 2019 17:36 Inactive
@stale
Copy link

stale bot commented Feb 18, 2020

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 stale bot added the inactive label Feb 18, 2020
@stale stale bot removed the inactive label Feb 18, 2020
@johnnyBira
Copy link

@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.

@shilman shilman modified the milestones: 6.0, 6.0 docs Mar 26, 2020
@shilman shilman added the react label May 23, 2020
@ndelangen ndelangen self-assigned this Jun 4, 2020
@ndelangen
Copy link
Member

ndelangen commented Jun 4, 2020

@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
Copy link
Member

shilman commented Jun 5, 2020

@ndelangen I'll take care of it

@ajkl2533
Copy link
Contributor

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

@mlg87
Copy link

mlg87 commented Mar 9, 2021

any updates on this? would be a fantastic feature

@shilman shilman removed this from the 6.2 docs milestone Jun 8, 2021
@shilman shilman added this to the 6.4 PRs milestone Jul 22, 2021
@shilman shilman removed this from the 6.4 PRs milestone May 20, 2022
@ndelangen
Copy link
Member

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

@ndelangen ndelangen closed this Jun 30, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

9 participants