React-dates: Docs for "Getting Started"

[jzaefferer]

Trying to use this package I ran into very similar problems as described in #140. Since that's locked down, I'm hoping I can provide some additional, constructive feedback from a first-time user here (free usability test results!).

The How To Use section is obviously pretty important, but also pretty confusing. This is the first package with this type of install, so a hint at why this approach is used would help a lot.

From there I was pretty much lost, until I read the comments in the issue linked above. Pointing out examples/SingleDatePickerWrapper.jsx as port of How to use (or rename to "Getting Started") would help a ton. Its already there. Maybe it can even be inlined in the readme, to make it even more obvious.

If those suggestions sound good, I might be able to help with a PR 👋

[jzaefferer]

For the storybook it would be extremely useful to be able to show the code for each story. I think https://github.com/storybooks/react-storybook-addon-info can provide that.

[majapw]

You are definitely right. These are good improvements that could help immediately. :) I will try to add this as soon as I can, but would also be super happy to take a PR for these things. :D

[jpollard-cs]

@jzaefferer let me know if you need help with this - happy to submit this PR if you don't have the bandwidth

[jzaefferer]

Would be good if you go ahead. If you ping me on the PR, I can help with reviewing, but beyond that I indeed don't have the bandwidth.

[jpollard-cs]

@jzaefferer just now seeing this - I should be able to get around to this sometime this weekend

[jpollard-cs]

@majapw I've put the code together for this (https://github.com/jpollard-cs/react-dates/commit/6061a339a386e7033ac8ee9bdf8d987cfaacbe94), but there's one issue - since this project uses a non-standard format for prop types, prop type info can't be provided:

this can be fixed by simply removing the props table by adding { propTables: false } to every addWithInfo call like so:

storiesOf('DateRangePicker', module)
  .addWithInfo('default', () => (
    <DateRangePickerWrapper />
  ), { propTables: false })

but that would add a lot of clutter/boilerplate to the code (relatively, at least)

there are other ways we could work around this (perhaps by wrapping the info add-on), but wanted to gauge your thoughts on this?