[docs] Generate proptypes from typescript demos #16521

merceyz · 2019-07-08T20:33:35Z

I have followed (at least) the PR section of the contributing guide.

Generates proptypes for the javascript demos from the typescript version

mui-pr-bot · 2019-07-08T20:40:56Z

Details of bundle changes.

Comparing: 8d8a8dd...50b57dd

bundle	parsed diff	gzip diff	prev parsed	current parsed	prev gzip	current gzip
@material-ui/core	0.00%	0.00%	327,435	327,435	90,317	90,317
@material-ui/core/Paper	0.00%	0.00%	68,477	68,477	20,410	20,410
@material-ui/core/Paper.esm	0.00%	0.00%	61,761	61,761	19,177	19,177
@material-ui/core/Popper	0.00%	0.00%	28,896	28,896	10,394	10,394
@material-ui/core/Textarea	0.00%	0.00%	5,505	5,505	2,362	2,362
@material-ui/core/TrapFocus	0.00%	0.00%	3,753	3,753	1,577	1,577
@material-ui/core/styles/createMuiTheme	0.00%	0.00%	16,156	16,156	5,816	5,816
@material-ui/core/useMediaQuery	0.00%	0.00%	3,098	3,098	1,310	1,310
@material-ui/lab	0.00%	0.00%	141,740	141,740	43,809	43,809
@material-ui/styles	0.00%	0.00%	51,886	51,886	15,380	15,380
@material-ui/system	0.00%	0.00%	15,576	15,576	4,445	4,445
Button	0.00%	0.00%	79,713	79,713	24,354	24,354
Modal	0.00%	0.00%	14,548	14,548	5,102	5,102
Portal	0.00%	0.00%	3,471	3,471	1,568	1,568
Rating	0.00%	0.00%	70,267	70,267	22,068	22,068
Slider	0.00%	0.00%	75,098	75,098	23,309	23,309
colorManipulator	0.00%	0.00%	3,904	3,904	1,543	1,543
docs.landing	0.00%	0.00%	54,338	54,338	13,762	13,762
docs.main	0.00%	0.00%	647,615	647,631	204,234	204,236
packages/material-ui/build/umd/material-ui.production.min.js	0.00%	0.00%	299,850	299,850	86,091	86,091

Generated by 🚫 dangerJS against 50b57dd

eps1lon · 2019-07-09T05:56:55Z

Source of truth should be typescript but you can be less strict most of the time e.g. you can used PropTypes.object over some complex PropTypes.shape.

Formatting? (prettier compacts small objects)

Prettier is used for formatting not our personal opinion. So if it does compact small objects then we stick with it.

About future work: Do you think we could make this work for our own components? It's been a long term goal to move props documentation to the .d.ts files (for in-editor docs) and generate docs and propTypes from it.

merceyz · 2019-07-09T11:52:48Z

Prettier is used for formatting not our personal opinion. So if it does compact small objects then we stick with it.

I'm aware, just pointing out that they were not compact before.
Reason: Babel removes line info when I inject the proptypes, so prettier has nothing to go off

About future work: Do you think we could make this work for our own components?

Yes, might work already if the definition is changed to look like a function, otherwise it will need some work
export default function Button(props: type): JSX.Element

package.json

eps1lon

Really hyped about this for core components. Just some minor polish needed.

docs/src/pages/components/autocomplete/IntegrationDownshift.js

docs/src/pages/components/dialogs/SimpleDialog.js

docs/src/pages/components/drawers/ResponsiveDrawer.js

docs/src/pages/components/hidden/BreakpointDown.js

docs/src/pages/components/tables/ReactVirtualizedTable.tsx

docs/src/pages/components/tabs/NavTabs.js

package.json

oliviertassinari · 2019-07-10T11:29:22Z

@merceyz I have heard feedback from TypeScript users behind confused by the presence of the prop-types in the demos. I'm really happy to see this problem worked on, you know how to pick your fights 👍.

merceyz · 2019-07-10T16:50:38Z

That should cover it for now.

I can update it to be more detailed, if that's wanted.

merceyz · 2019-07-13T00:44:40Z

@eps1lon @oliviertassinari Is this too much? Feels like overkill.
5ba34d0

oliviertassinari · 2019-07-13T10:02:45Z

@merceyz withStyles has its own runtime checks to warn against wrong input. 👍 for keeping PropTypes.object. As for the other prop "object to shape" migrations. I would say that yes, it hits the point of diminishing returns. We have disabled https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/forbid-prop-types.md in our eslint config file. Not using shape would be aligned with it.

eps1lon · 2019-07-13T10:19:28Z

Yeah it's overkill for classes. I think making it configurable with a simple allow-list would be sufficient for a start. As far as I know any classes prop is injected from withStyles. We should be able to safely skip it by prop name.

merceyz · 2019-07-13T14:39:46Z

So the requested changes are

Omit props with the name ref
Don't use shape for props with the name classes
?

eps1lon · 2019-07-13T14:54:27Z

Omit props with the name ref

Yes, always.

Don't use shape for props with the name classes

Yes, preferably via explicit configuration.

merceyz · 2019-07-15T12:41:04Z

@eps1lon Done

docs/src/pages/components/drawers/ResponsiveDrawer.js

docs/src/pages/components/autocomplete/IntegrationReactSelect.js

updated

eps1lon · 2019-07-18T11:53:56Z

Nicely done. Thanks!

joshwooding added docs Improvements or additions to the documentation new feature New feature or request labels Jul 8, 2019

merceyz commented Jul 9, 2019

View reviewed changes

package.json Outdated Show resolved Hide resolved

merceyz marked this pull request as ready for review July 9, 2019 14:25

eps1lon previously requested changes Jul 10, 2019

View reviewed changes

merceyz force-pushed the proptypes branch from 6a1a14b to 3ab27a1 Compare July 11, 2019 13:00

merceyz force-pushed the proptypes branch from 10a615f to 6b7b3e5 Compare July 15, 2019 12:39

oliviertassinari reviewed Jul 16, 2019

View reviewed changes

docs/src/pages/components/drawers/ResponsiveDrawer.js Outdated Show resolved Hide resolved

docs/src/pages/components/autocomplete/IntegrationReactSelect.js Outdated Show resolved Hide resolved

merceyz mentioned this pull request Jul 16, 2019

[core] Deduplicate packages #16608

Merged

1 task

merceyz and others added 10 commits July 17, 2019 21:14

remove proptypes from typescript demos

ea1b4af

docs:typescript:formatted

940d120

sort literals

455f7f2

const, memo, and class components

53b6e5e

[docs] Generate proptypes from typescript demos

7a72752

[docs] Update ReactVirtualizedTable demo

20d8d3c

Upgrade typescript-to-proptypes

f38a9a3

docs:typescript:formatted

f4a81df

Upgrade typescript-to-proptypes

72d02bc

dedupe babel/core

b250d7c

merceyz added 6 commits July 17, 2019 21:16

SimpleDialog - use open directly

c30d450

Upgrade typescript-to-proptypes

76b5270

Omit null if optional and make props with React.ReactNode optional

4c5f785

Detailed proptypes

fa2526c

Omit ref, don't resolve classes

96de520

Throw if typescript demo contains proptypes

e405ede

merceyz force-pushed the proptypes branch from c03ee69 to e405ede Compare July 17, 2019 19:19

merceyz added 3 commits July 17, 2019 21:21

docs:typescript:formatted

55c166a

IntegrationReactSelect - Make innerProps optional

fc497d3

ResponsiveDrawerProps - Make container optional

689c912

merceyz force-pushed the proptypes branch from 101df67 to 689c912 Compare July 17, 2019 20:07

oliviertassinari approved these changes Jul 17, 2019

View reviewed changes

oliviertassinari requested a review from eps1lon July 17, 2019 22:38

eps1lon approved these changes Jul 18, 2019

View reviewed changes

joshwooding added the PR: good for merge label Jul 18, 2019

Merge branch 'master' into proptypes

50b57dd

eps1lon merged commit 2c5d99e into mui:master Jul 18, 2019

merceyz deleted the proptypes branch July 18, 2019 11:58

snyk-bot mentioned this pull request Sep 4, 2019

[Snyk] Upgrade @material-ui/styles from 4.3.0 to 4.3.3 iliutastoica/React-Discord-Clone#5

Open

merceyz mentioned this pull request Mar 5, 2020

[Pagination] Add TypeScript types #19933

Merged

1 task

merceyz mentioned this pull request Apr 24, 2020

End-user instructions? merceyz/typescript-to-proptypes#19

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[docs] Generate proptypes from typescript demos #16521

[docs] Generate proptypes from typescript demos #16521

merceyz commented Jul 8, 2019 •

edited

Loading

mui-pr-bot commented Jul 8, 2019 •

edited

Loading

eps1lon commented Jul 9, 2019

merceyz commented Jul 9, 2019

eps1lon left a comment

oliviertassinari commented Jul 10, 2019

merceyz commented Jul 10, 2019 •

edited

Loading

merceyz commented Jul 13, 2019 •

edited

Loading

oliviertassinari commented Jul 13, 2019 •

edited

Loading

eps1lon commented Jul 13, 2019

merceyz commented Jul 13, 2019 •

edited

Loading

eps1lon commented Jul 13, 2019

merceyz commented Jul 15, 2019

eps1lon commented Jul 18, 2019

[docs] Generate proptypes from typescript demos #16521

[docs] Generate proptypes from typescript demos #16521

Conversation

merceyz commented Jul 8, 2019 • edited Loading

mui-pr-bot commented Jul 8, 2019 • edited Loading

eps1lon commented Jul 9, 2019

merceyz commented Jul 9, 2019

eps1lon left a comment

Choose a reason for hiding this comment

oliviertassinari commented Jul 10, 2019

merceyz commented Jul 10, 2019 • edited Loading

merceyz commented Jul 13, 2019 • edited Loading

oliviertassinari commented Jul 13, 2019 • edited Loading

eps1lon commented Jul 13, 2019

merceyz commented Jul 13, 2019 • edited Loading

eps1lon commented Jul 13, 2019

merceyz commented Jul 15, 2019

eps1lon commented Jul 18, 2019

merceyz commented Jul 8, 2019 •

edited

Loading

mui-pr-bot commented Jul 8, 2019 •

edited

Loading

merceyz commented Jul 10, 2019 •

edited

Loading

merceyz commented Jul 13, 2019 •

edited

Loading

oliviertassinari commented Jul 13, 2019 •

edited

Loading

merceyz commented Jul 13, 2019 •

edited

Loading