Many new features (v1.1?) #3
Conversation
- Adds the reactDocGenRefId propType to reference a property meta - Adds the examples propType to give a set of examples via a set of props
- if you have defualt props but they're not defined in proptypes, will not give error - example props were doing typeof on the key rather than the value, resulting in improper type being returned
- Rewrote how code generation worked - Update documentation - Made sure es5/es6 examples works
| "react": "^0.13.3", | ||
| "react-bootstrap": "^0.23.5", | ||
| "react-bootstrap": "0.23.5", |
There was a problem hiding this comment.
I pinned down the react-bootstrap version here because the current examples (which I have not really touched) break on the latest version.
|
Issues related to this PR: |
…o all exampleComponents which may/may not have prop docs
|
@theogravity That's great idea, thanks. But it does't work... 😢 Output is: $ node -v
v0.10.33
$ npm run styleguide
> [email protected] styleguide /react-styleguide-generator
> node bin/rsg 'example/**/*.js' -c 'styleguide.json' -v | bunyan -o short
dyld: lazy symbol binding failed: Symbol not found: _node_module_register
Referenced from: /react-styleguide-generator/node_modules/watchify/node_modules/chokidar/node_modules/fsevents/build/Release/fse.node
Expected in: dynamic lookup
dyld: Symbol not found: _node_module_register
Referenced from: /react-styleguide-generator/node_modules/watchify/node_modules/chokidar/node_modules/fsevents/build/Release/fse.node
Expected in: dynamic lookup$ node -v
v0.12.1
$ npm run styleguide
> [email protected] styleguide /react-styleguide-generator
> node bin/rsg 'example/**/*.js' -c 'styleguide.json' -v | bunyan -o short
[BABEL] Note: The code generator has deoptimised the styling of "/react-styleguide-generator/styleguide/src/contents-inter.js" as it exceeds the max of "100KB".
19:03:33.280Z ERROR rsg/rsg-lib: Unexpected token (2:7) while parsing /react-styleguide-generator/example/node_modules/react-styleguide-generator/node_modules/es6-promise/lib/es6-promise.umd.js while parsing file: /react-styleguide-generator/example/node_modules/react-styleguide-generator/node_modules/es6-promise/lib/es6-promise.umd.js
SyntaxError: Unexpected token (2:7) while parsing /react-styleguide-generator/example/node_modules/react-styleguide-generator/node_modules/es6-promise/lib/es6-promise.umd.js while parsing file: /react-styleguide-generator/example/node_modules/react-styleguide-generator/node_modules/es6-promise/lib/es6-promise.umd.js
at DestroyableTransform.end [as _flush] (/react-styleguide-generator/node_modules/browserify/node_modules/insert-module-globals/index.js:75:21)
at DestroyableTransform.<anonymous> (/react-styleguide-generator/node_modules/browserify/node_modules/readable-stream/lib/_stream_transform.js:135:12)
at DestroyableTransform.g (events.js:199:16)
at DestroyableTransform.emit (events.js:104:17)
at prefinish (/react-styleguide-generator/node_modules/browserify/node_modules/readable-stream/lib/_stream_writable.js:450:12)
at finishMaybe (/react-styleguide-generator/node_modules/browserify/node_modules/readable-stream/lib/_stream_writable.js:458:7)
at endWritable (/react-styleguide-generator/node_modules/browserify/node_modules/readable-stream/lib/_stream_writable.js:469:3)
at DestroyableTransform.Writable.end (/react-styleguide-generator/node_modules/browserify/node_modules/readable-stream/lib/_stream_writable.js:436:5)
at DestroyableTransform.onend (/react-styleguide-generator/node_modules/browserify/node_modules/readable-stream/lib/_stream_readable.js:537:10)
at DestroyableTransform.g (events.js:199:16)
19:03:33.281Z ERROR rsg/bin: Unexpected token (2:7) while parsing /react-styleguide-generator/example/node_modules/react-styleguide-generator/node_modules/es6-promise/lib/es6-promise.umd.js while parsing file: /react-styleguide-generator/example/node_modules/react-styleguide-generator/node_modules/es6-promise/lib/es6-promise.umd.js
SyntaxError: Unexpected token (2:7) while parsing /react-styleguide-generator/example/node_modules/react-styleguide-generator/node_modules/es6-promise/lib/es6-promise.umd.js while parsing file: /react-styleguide-generator/example/node_modules/react-styleguide-generator/node_modules/es6-promise/lib/es6-promise.umd.js
at DestroyableTransform.end [as _flush] (/react-styleguide-generator/node_modules/browserify/node_modules/insert-module-globals/index.js:75:21)
at DestroyableTransform.<anonymous> (/react-styleguide-generator/node_modules/browserify/node_modules/readable-stream/lib/_stream_transform.js:135:12)
at DestroyableTransform.g (events.js:199:16)
at DestroyableTransform.emit (events.js:104:17)
at prefinish (/react-styleguide-generator/node_modules/browserify/node_modules/readable-stream/lib/_stream_writable.js:450:12)
at finishMaybe (/react-styleguide-generator/node_modules/browserify/node_modules/readable-stream/lib/_stream_writable.js:458:7)
at endWritable (/react-styleguide-generator/node_modules/browserify/node_modules/readable-stream/lib/_stream_writable.js:469:3)
at DestroyableTransform.Writable.end (/react-styleguide-generator/node_modules/browserify/node_modules/readable-stream/lib/_stream_writable.js:436:5)
at DestroyableTransform.onend (/react-styleguide-generator/node_modules/browserify/node_modules/readable-stream/lib/_stream_readable.js:537:10)
at DestroyableTransform.g (events.js:199:16) |
|
Hi, @pocotan001 It seems that what you're seeing is an OS X build tools issue. Is your command line tools up to date? I am on OS X Yosemite (10.10.4) with the latest version of the build tools. http://railsapps.github.io/xcode-command-line-tools.html Also you will want to pull the project again as I've fixed a failing unit test. |
|
I'd love to accept it but could you please consider dividing this PR? I can see some of your code will directly improve this tool but some of them seem makes a little bit not-so-good from where I stand. For example I like:
On the other hand I don't like:
We're hoping to keep this tool as simple as possible. |
|
@pocotan001 the developer for For the documentation procedures, is having to define the Also how would you like the PR broken up? |
- Remove un-needed react-docgen specific examples - Remove requirement of the rsg-mixin
|
@pocotan001 Changes I've made:
I hope this helps you!
|
|
@pocotan001 and I (a collaborator of his) appreciate that you'd added es6 react-docgen support. We'd like to keep Now you don't need to break up the PR, but we'd like you to make some modifications before we merge it.
Plus, @pocotan001 will probably make some minor changes to the CSS later, but when you finish these 2 modifications above, we would like to merge the PR. |
- Simplify README
|
…ng the description field
|
@theogravity Thank you for updating tabs and the readme. We found a bug: When you move from
|
|
@ygoto3 @pocotan001 Fixed! Thanks for testing. |
|
@theogravity Thank you for your prompt response. |
|
The minor changes have been completed.
I'll probably release this new features tomorrow 🍻 |
|
looks awesome! great work y'all |
|
👍 |
|
@theogravity @marcello3d |
|
yay! thanks |
(That example code you see is actually auto-generated!)
We (@marcello3d and I) are trying to build an atomic framework for component development and decided that
react-styleguide-generator+react-docgenwould be great as a canvas for doing direct development and documentation.In trying out RSG, we've had some of our own requirements, one of which was we wanted to be able to specify multiple examples for a single example component (rather than having repeats of the same component) and integrate
react-docgendirectly.Additions made:
react-docgento document componentpropspropsfor multiple examples ifcodeis not filled inwatchifysupport to reduce repackage times (if you wanted to use the guide as the platform to test out your components)gruntusage examplebunyanlogging (was sometimes hard to debug issues without logging)How prop documentation works:
react-docgenparses these files and stores the generated JSON metadata inlib/rsg.jsunderthis.reactPropMetas[<displayName>], which is exposed aswindow.RSG.propMetasapp/components/Section/index.jsusingapp/utils/react-docgen-to-md.jsHow automatic code generation works:
styleguide.examples[], where propertiestabTitle,props, andcodecan be defined.styleguide.componentExamplemust be defined with a react component to use for rendering the concrete examplecodeis not defined andpropsis, thenrenderAutoCode()is involed inapp/components/Section/index.jsreact-docgensupport examplesee
src/Text input.jsfor examplesee:
example/ReactDocgen/Text input example.js(es5)example/components/Panels/Basic example.js(es6)