Have some level of API docs completeness

benwiley4000 / cassette

📼 A flexible media player component library for React that requires no up-front config

https://benwiley4000.github.io/cassette/styleguide

MIT License

184 stars 28 forks source link

Have some level of API docs completeness #405

Closed benwiley4000 closed 5 years ago

benwiley4000 commented 5 years ago

Maybe not all the examples will be perfect yet but we need to document all the exposed API including prop descriptions, for the beta release.

benwiley4000 commented 5 years ago

The main thing we need to add right now is prop descriptions. Go through this list:

[x] FullscreenContextProvider
[x] PlayerContextGroup
[x] PlayerContextProvider
[x] FullscreenContextConsumer
[x] PlayerContextConsumer
[x] Types (and make sure these are linked in the other relevant prop descriptions)
[x] MaybeMarquee
[x] MediaProgressBar
[x] MediaProgressBarDisplay
[x] ProgressBar
[x] ProgressBarDisplay
[x] VideoDisplay
[x] MediaPlayer
[x] MediaPlayerControls
[x] BackSkipButton
[x] ForwardSkipButton
[x] FullscreenButton
[x] MediaProgress
[x] MediaProgressDisplay
[x] MuteButton
[x] PlayPauseButton
[x] RepeatButton
[x] ShuffleButton
[x] Spacer
[x] VolumeControl

benwiley4000 commented 5 years ago

Stretch goal.. we should also take all the existing documentation that lives in other places (as far as I can tell this is limited to https://github.com/benwiley4000/cassette/blob/next/docs/playlist_in_progress.md and https://github.com/benwiley4000/cassette/blob/next/README.md) and move those to the docs site, so information is more centralized.

benwiley4000 commented 5 years ago

How to document propTypes

Add propType descriptions on line above propTypes declaration using /** Comments like this [markdown supported](#sectionInDocs)! */

Button.propTypes = {
    /** Button label */
    children: PropTypes.node.isRequired,
    /** The color for the button */
    color: PropTypes.string,
    /** The size of the button */
    size: PropTypes.oneOf(['small', 'normal', 'large']),
    /** Disable button */
    disabled: PropTypes.bool,
    /** Gets called when the user clicks on the button */
    onClick: PropTypes.func,
};

(taken from this example)

Run the styleguide server locally while in development:
```
npm run docs:serve
```
Open in browser (should be localhost:6060)