More detailed props table #1485

billyvg · 2017-07-18T23:04:37Z

Issue:
PropTypes for shape, oneOf, and arrayOf could be more specific. There's lots of useful data missing for these types. Since this is a WIP, there's probably some better work to be done for other prop types as well.

Ex:

What I did

Changed PropTable to be more detailed by inspecting__docgenInfo and recursively formatting certain prop types.

How to test

Open a component in storybook that has these proptypes: oneOf, shape, arrayOf

codecov · 2017-07-19T21:58:48Z

Codecov Report

Merging #1485 into release/3.3 will decrease coverage by 0.4%.
The diff coverage is 12.09%.

@@               Coverage Diff               @@
##           release/3.3    #1485      +/-   ##
===============================================
- Coverage        23.05%   22.65%   -0.41%     
===============================================
  Files              248      264      +16     
  Lines             5703     5906     +203     
  Branches           673      690      +17     
===============================================
+ Hits              1315     1338      +23     
- Misses            3901     4069     +168     
- Partials           487      499      +12

Impacted Files	Coverage Δ
addons/info/src/components/PropTable.js	`22% <0%> (+0.99%)`	⬆️
lib/components/src/index.js	`0% <0%> (ø)`	⬆️
lib/components/src/highlight_button.js	`0% <0%> (ø)`
addons/info/src/components/types/Object.js	`0% <0%> (ø)`
lib/components/src/table/table.js	`0% <0%> (ø)`
lib/components/src/table/cell.js	`0% <0%> (ø)`
addons/info/src/components/types/Enum.js	`0% <0%> (ø)`
addons/info/src/components/types/PrettyPropType.js	`10.41% <14.28%> (ø)`
addons/info/src/components/types/OneOfType.js	`11.11% <14.28%> (ø)`
addons/info/src/components/types/ArrayOf.js	`15.38% <22.22%> (ø)`
... and 52 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 40c652d...f2a9b66. Read the comment docs.

shilman · 2017-07-22T16:46:04Z

@billyvg awesome--thanks so much for putting this together? Is there any chance you can add this to the examples/cra-kitchen-sink example as part of this PR? We're starting to make sure that all PRs have good examples there.

To get the example running on your machine:

yarn && yarn bootstrap
cd examples/cra-kitchen-sink
yarn storybook

Many thanks again and please let me know if you have any questions!

ndelangen · 2017-07-28T09:39:24Z

Added the do-not-merge tag because it's a WIP.
Rebased unto master.

@billyvg Please ask us anything if you need help! Thank you for this PR!

ndelangen · 2017-08-18T11:38:14Z

@billyvg Are you still working on this?

ndelangen · 2017-08-18T11:38:47Z

related: #1147

billyvg · 2017-08-18T16:47:59Z

I am! I'm having trouble deciding how to design nested arrayOf/shape types. I have another branch that flattens the props like

property	proptype
shape	shape
shape.nested	array
shape.nested[]	string
shape.foo	shape
shape.foo.bar	string

Any suggestions?

ndelangen · 2017-08-22T09:32:24Z

Good to hear, looking forward to this PR completing! 🎈

Here's an out of the box suggestion: https://github.com/xyc/react-inspector
Could that be a nice UI for this?

Otherwise I'm liking the original screen quite a lot actually!

* more details for arrayOf, objectOf, shape, oneOf, oneOfType * refactored into cleaner code + many smaller components

billyvg · 2017-08-23T22:43:38Z

@ndelangen Cleaned up the code a bunch as well as improve the formatting:

https://cl.ly/151I0X3Q0O34/Screen%20Recording%202017-08-23%20at%2003.40%20PM.gif

ndelangen · 2017-08-24T08:14:34Z

@billyvg That looks fantastic!

I rebased this to release 3.3 branch. I hope this doesn't influence you in a bad way.

ndelangen · 2017-08-28T22:29:56Z

This PR is going to be awesome! The move to lib/components and glamorous is fantastic @billyvg

Just as a FYI: @marchdoe ;)

Hypnosphi · 2017-08-30T18:16:28Z

lib/components/src/highlight_button.js

+import React from 'react';
+import glamorous from 'glamorous';
+
+const Button = props => <span role="button" tabIndex={-1} {...props} />;


Why span not button?

I did not want to have to reset/restyle a button

Native buttons have some advantages like automatically triggering click event on Enter. I believe it’s worth a bit of extra styling

ndelangen · 2017-08-30T20:40:36Z

addons/info/src/components/types/ObjectOf.js

+import { TypeInfo } from './proptypes';
+
+const ObjectOf = ({ propType }) =>
+  <span>


Hypnosphi

Please use native buttons

Hypnosphi

LGTM

…tainer.propTypes

ndelangen · 2017-09-06T06:06:37Z

@billyvg Is this still a WIP?

If not, remove the [WIP] in the header and we can do a final review and get this merged!
I've just tested this, and added a few usages in cra-kitchen-sink, all green here.

billyvg · 2017-09-06T12:51:10Z

@ndelangen I think it's no longer a WIP, I've removed the tag.

ndelangen · 2017-09-06T13:12:36Z

Congrats on your first merged PR @billyvg ! 🎉

I hope more will follow!

billyvg added 2 commits July 18, 2017 15:58

Detailed formatting of arrayOf, shape, oneOf

bc63adf

Add babel watch task

1d54f15

usulpro added addon: info feature request labels Jul 18, 2017

Merge branch 'master' into prop-table-detailed

aa44f18

shilman added the needs example label Jul 22, 2017

ndelangen changed the title ~~[addon-info] [WIP] More detailed props table~~ [WIP] More detailed props table Jul 28, 2017

ndelangen added the ci: do not merge label Jul 28, 2017

Merge branch 'master' into prop-table-detailed

ba35434

ndelangen assigned billyvg Jul 28, 2017

ndelangen requested review from theinterned, z4o4z and shilman July 28, 2017 09:39

Merge branch 'master' into prop-table-detailed

bd7b139

billyvg added 2 commits August 23, 2017 10:38

Merge branch 'master' into prop-table-detailed

093dd01

addon info: make propTypes table better

7ce5673

* more details for arrayOf, objectOf, shape, oneOf, oneOfType * refactored into cleaner code + many smaller components

billyvg force-pushed the prop-table-detailed branch from 0119c23 to 7ce5673 Compare August 23, 2017 22:39

Merge branch 'master' into prop-table-detailed

2f62f90

ndelangen changed the base branch from master to release/3.3 August 24, 2017 08:11

Merge branch 'release/3.3' into prop-table-detailed

eda55b9

Merge branch 'release/3.3' into prop-table-detailed

e5152f5

billyvg and others added 2 commits August 28, 2017 15:24

add: styled components

34333bd

Merge branch 'release/3.3' into prop-table-detailed

ff6d332

removed in favor of glamorous component

2fdeff5

Hypnosphi reviewed Aug 30, 2017

View reviewed changes

Merge branch 'release/3.3' into prop-table-detailed

4c1ce1f

ndelangen reviewed Aug 30, 2017

View reviewed changes

addons/info/src/components/types/ObjectOf.js

import { TypeInfo } from './proptypes';

const ObjectOf = ({ propType }) =>

<span>

Copy link

Member

ndelangen Aug 30, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅

Merge branch 'release/3.3' into prop-table-detailed

81dae0b

storybookjs deleted a comment from billyvg Aug 30, 2017

billyvg and others added 2 commits September 5, 2017 09:53

Merge branch 'release/3.3' into prop-table-detailed

738a8c5

fix: add key for OneOfType

c90b09e

Hypnosphi requested changes Sep 5, 2017

View reviewed changes

fix: use native buttons

691771f

Hypnosphi approved these changes Sep 5, 2017

View reviewed changes

Hypnosphi and others added 3 commits September 6, 2017 02:31

Merge branch 'release/3.3' into prop-table-detailed

05e43d7

Merge branch 'release/3.3' into prop-table-detailed

569d3a2

ADD an example usage of complex PropType and add descriptions for Con…

e43d49b

…tainer.propTypes

billyvg changed the title ~~[WIP] More detailed props table~~ More detailed props table Sep 6, 2017

ndelangen approved these changes Sep 6, 2017

View reviewed changes

ndelangen removed ci: do not merge needs example labels Sep 6, 2017

Merge branch 'release/3.3' into prop-table-detailed

f2a9b66

ndelangen merged commit 54f01b0 into storybookjs:release/3.3 Sep 6, 2017

billyvg deleted the prop-table-detailed branch September 6, 2017 13:22

billyvg restored the prop-table-detailed branch December 9, 2017 00:09

Hypnosphi mentioned this pull request Feb 19, 2018

addon-info: docgen on PropTypes.shape() #3031

Closed

dependencies bot mentioned this pull request Apr 17, 2018

redux versions available: 4.0.0 #3436

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

More detailed props table #1485

More detailed props table #1485

billyvg commented Jul 18, 2017 •

edited

Loading

codecov bot commented Jul 19, 2017 •

edited

Loading

shilman commented Jul 22, 2017

ndelangen commented Jul 28, 2017

ndelangen commented Aug 18, 2017

ndelangen commented Aug 18, 2017

billyvg commented Aug 18, 2017

ndelangen commented Aug 22, 2017

billyvg commented Aug 23, 2017

ndelangen commented Aug 24, 2017

ndelangen commented Aug 28, 2017

Hypnosphi Aug 30, 2017

billyvg Sep 5, 2017

Hypnosphi Sep 5, 2017

ndelangen Aug 30, 2017

Hypnosphi left a comment

Hypnosphi left a comment

ndelangen commented Sep 6, 2017 •

edited

Loading

billyvg commented Sep 6, 2017

ndelangen commented Sep 6, 2017 •

edited

Loading

More detailed props table #1485

More detailed props table #1485

Conversation

billyvg commented Jul 18, 2017 • edited Loading

What I did

How to test

codecov bot commented Jul 19, 2017 • edited Loading

Codecov Report

shilman commented Jul 22, 2017

ndelangen commented Jul 28, 2017

ndelangen commented Aug 18, 2017

ndelangen commented Aug 18, 2017

billyvg commented Aug 18, 2017

ndelangen commented Aug 22, 2017

billyvg commented Aug 23, 2017

ndelangen commented Aug 24, 2017

ndelangen commented Aug 28, 2017

Hypnosphi Aug 30, 2017

Choose a reason for hiding this comment

billyvg Sep 5, 2017

Choose a reason for hiding this comment

Hypnosphi Sep 5, 2017

Choose a reason for hiding this comment

ndelangen Aug 30, 2017

Choose a reason for hiding this comment

Hypnosphi left a comment

Choose a reason for hiding this comment

Hypnosphi left a comment

Choose a reason for hiding this comment

ndelangen commented Sep 6, 2017 • edited Loading

billyvg commented Sep 6, 2017

ndelangen commented Sep 6, 2017 • edited Loading

billyvg commented Jul 18, 2017 •

edited

Loading

codecov bot commented Jul 19, 2017 •

edited

Loading

ndelangen commented Sep 6, 2017 •

edited

Loading

ndelangen commented Sep 6, 2017 •

edited

Loading