doc update for typescript props config #1514

thecodejack · 2020-01-07T17:19:26Z

documentation update for #1508

sapegin

Thanks!

docs/Thirdparties.md

sapegin

Looks like I wrote a comment here a long time ago and didn't send it ;-/

sapegin · 2020-01-10T15:05:37Z

docs/Thirdparties.md

@@ -54,6 +54,20 @@ module.exports = {

 Please see our [examples](https://github.com/styleguidist/react-styleguidist/tree/master/examples) and refer to [react-docgen](https://github.com/reactjs/react-docgen) documentation for more information about what types of syntax are supported.

+But if components are written with typescript and extending other components (which are also written using typescript), You may use `react-docgen-typescript` module for fetching extended component prop definitions automatically. Follow the steps to configure same.


Still confusing for me: what exactly isn't working — extension or import from another file? A code example would be very good here too.

context was set in before para. Example of how it doesn't work probably unrelated.

It is very much "related". I still don't understand what's the problem exactly, and, looking at the comments, you probably don't understand either. We can't expect users to understand it.

Have done the changes. Sorry for resolving bit late.

Thanks, but it still doesn't answer my question: what exactly isn't working — importing any component or specifically from node_modules. From what you've said before I understood it's the former, but from the text it looks like the latter.

actually issue seems to be from both any component and node_modules. React doc gen doesn't support. But with react-docgen-typescript, both will work.

So something like this also won't work?

import Button from './AnotherButton' export default Button

My bad. I was initially discussing with what I am aware of. So I spent sometime around this. So here is a detailed info.

First it's surely not working with extended third party components.

Example: Please check #1508 (comment)

Second, components which are extended from internal ones are working fine.

Example: https://github.com/styleguidist/react-styleguidist/tree/11/examples/styled-components/src/components/Heading

But I was checking wrong example which didn't work.

Example: https://github.com/styleguidist/react-styleguidist/tree/11/examples/styled-components/src/components/Button

This one didn't work most probably coz it is using style component declaration which is not a standard React component creating pattern.

Now checked above directly using react-docgen-typescript as well. Apart from displaying the 3 declared props, it also displayed props of styled component which is again 3rd party component.

There are lot of ifs/buts around this. But what I can summarize from this, is to inform user that for fetching props of third party components only, we should recommend users to use react-docgen-typescript.

Let know your thoughts around this.

First it's surely not working with extended third party components.

That's clear now, but let's not call then "third-party", since it might be ambiguous. "Components rexeported from node_modules" would be more precise.

Second, components which are extended from internal ones are working fine.
Example: https://github.com/styleguidist/react-styleguidist/tree/11/examples/styled-components/src/components/Heading

This component doesn't extend another component.

Now checked above directly using react-docgen-typescript as well. Apart from displaying the 3 declared props, it also displayed props of styled component which is again 3rd party component.

There's a way to filter props in react-docgen-typescript:

https://github.com/tamiadev/tamia/blob/038390016cbe62480dc385c1656c6f5b4e1fe53f/styleguide.config.js#L10-L18

This component doesn't extend another component.

index.ts of Heading Component is importing component from Heading.tsx. So something like below will also work.

import Button from './AnotherButton' export default Button

Have done the changes as suggested by you.

sapegin

I thinks something like this may work.

sapegin · 2020-02-10T13:30:08Z

docs/Thirdparties.md

@@ -54,6 +54,28 @@ module.exports = {

 Please see our [examples](https://github.com/styleguidist/react-styleguidist/tree/master/examples) and refer to [react-docgen](https://github.com/reactjs/react-docgen) documentation for more information about what types of syntax are supported.

+But while writing components using typescript and re-exporting a component from node_modules, You can still be able to fetch prop definitions of the parent component using `react-docgen-typescript`.


Suggested change

But while writing components using typescript and re-exporting a component from node_modules, You can still be able to fetch prop definitions of the parent component using `react-docgen-typescript`.

While Styleguidist supports TypeScript out of the box, thanks to `react-docgen`, this support is limited. Consider this example:```

sapegin · 2020-02-10T13:31:56Z

docs/Thirdparties.md

+export default Button
+```
+
+In the above example, we were trying to extend a component which is from node_modules. Now if we want prop definitions of the parent component, `react-docgen` won't be able to fetch them. For same you can setup `react-docgen-typescript` with `styleguidist` by following below steps.


Suggested change

In the above example, we were trying to extend a component which is from node_modules. Now if we want prop definitions of the parent component, `react-docgen` won't be able to fetch them. For same you can setup `react-docgen-typescript` with `styleguidist` by following below steps.

Here we’re reexporting a third-party component from `node_modules`. Styleguidist won’t be able to render prop types of this component, unless we’re using `react-docgen-typescript`:

Yep. Suggestions totally right. Updated with suggestions.

sapegin · 2020-02-10T17:39:34Z

Thanks, merging!

styleguidist-bot · 2020-03-07T14:38:58Z

🎉 This PR is included in version 11.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

doc update for typescript props config

9b48a89

sapegin requested changes Jan 9, 2020

View reviewed changes

docs/Thirdparties.md Outdated Show resolved Hide resolved

review change about typescript documentation

fe72f38

thecodejack requested a review from sapegin January 10, 2020 03:15

sapegin reviewed Jan 21, 2020

View reviewed changes

Resolve review comments

544d5f8

thecodejack requested a review from sapegin February 1, 2020 04:32

thecodejack and others added 2 commits January 31, 2020 23:43

fix doc react-docgen-typescript

6d1fbfa

review changes

d7c83a5

sapegin requested changes Feb 10, 2020

View reviewed changes

review suggestions

dbdcb5d

thecodejack requested a review from sapegin February 10, 2020 17:26

sapegin merged commit cb3c00f into styleguidist:11 Feb 10, 2020

styleguidist-bot added the released label Mar 7, 2020

poteirard mentioned this pull request Mar 7, 2020

Upgrade react styleguidist ZopaPublic/react-components#250

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

doc update for typescript props config #1514

doc update for typescript props config #1514

thecodejack commented Jan 7, 2020

sapegin left a comment

sapegin left a comment

sapegin Jan 10, 2020

thecodejack Jan 26, 2020 •

edited

Loading

sapegin Jan 27, 2020

thecodejack Feb 1, 2020 •

edited

Loading

sapegin Feb 3, 2020

thecodejack Feb 5, 2020

sapegin Feb 5, 2020

thecodejack Feb 6, 2020 •

edited

Loading

sapegin Feb 6, 2020

thecodejack Feb 7, 2020

sapegin left a comment

sapegin Feb 10, 2020

sapegin Feb 10, 2020

thecodejack Feb 10, 2020

sapegin commented Feb 10, 2020

styleguidist-bot commented Mar 7, 2020

		@@ -54,6 +54,20 @@ module.exports = {

		Please see our [examples](https://github.com/styleguidist/react-styleguidist/tree/master/examples) and refer to [react-docgen](https://github.com/reactjs/react-docgen) documentation for more information about what types of syntax are supported.

		But if components are written with typescript and extending other components (which are also written using typescript), You may use `react-docgen-typescript` module for fetching extended component prop definitions automatically. Follow the steps to configure same.

		@@ -54,6 +54,28 @@ module.exports = {

		Please see our [examples](https://github.com/styleguidist/react-styleguidist/tree/master/examples) and refer to [react-docgen](https://github.com/reactjs/react-docgen) documentation for more information about what types of syntax are supported.

		But while writing components using typescript and re-exporting a component from node_modules, You can still be able to fetch prop definitions of the parent component using `react-docgen-typescript`.

	But while writing components using typescript and re-exporting a component from node_modules, You can still be able to fetch prop definitions of the parent component using `react-docgen-typescript`.
	While Styleguidist supports TypeScript out of the box, thanks to `react-docgen`, this support is limited. Consider this example:```

	In the above example, we were trying to extend a component which is from node_modules. Now if we want prop definitions of the parent component, `react-docgen` won't be able to fetch them. For same you can setup `react-docgen-typescript` with `styleguidist` by following below steps.
	Here we’re reexporting a third-party component from `node_modules`. Styleguidist won’t be able to render prop types of this component, unless we’re using `react-docgen-typescript`:

doc update for typescript props config #1514

doc update for typescript props config #1514

Conversation

thecodejack commented Jan 7, 2020

sapegin left a comment

Choose a reason for hiding this comment

sapegin left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

thecodejack Jan 26, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

thecodejack Feb 1, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

thecodejack Feb 6, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sapegin left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sapegin commented Feb 10, 2020

styleguidist-bot commented Mar 7, 2020

thecodejack Jan 26, 2020 •

edited

Loading

thecodejack Feb 1, 2020 •

edited

Loading

thecodejack Feb 6, 2020 •

edited

Loading