search

pocotan001 / react-styleguide-generator

Easily generate a good-looking styleguide by adding some documentation to your React project.
http://pocotan001.github.io/react-styleguide-generator
MIT License
700 stars 76 forks source link

Many new features (v1.1?) #3

Closed theogravity closed 9 years ago

theogravity commented 9 years ago
screenshot

(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-docgen would 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-docgen directly.

Additions made:

How prop documentation works:

How automatic code generation works:

properties

see src/Text input.js for example

autodoc

see: example/ReactDocgen/Text input example.js (es5) example/components/Panels/Basic example.js (es6)

panel
theogravity commented 9 years ago

Issues related to this PR: https://github.com/FormidableLabs/radium/issues/271 https://github.com/reactjs/react-docgen/issues/10 https://github.com/reactjs/react-docgen/issues/16 https://github.com/pedronauck/react-simpletabs/issues/26

pocotan001 commented 9 years ago

@theogravity That's great idea, thanks. But it does't work... :cry:

Output is:

$ node -v

v0.10.33

$ npm run styleguide

> react-styleguide-generator@1.0.7 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

> react-styleguide-generator@1.0.7 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)
theogravity commented 9 years ago

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

http://stackoverflow.com/questions/22920497/git-mountain-lion-dyld-lazy-symbol-binding-failed-symbol-not-found-str

Also you will want to pull the project again as I've fixed a failing unit test.

theogravity commented 9 years ago

@pocotan001

Here is my output, I used nvm to switch to v0.12.1 (was running iojs on 2.3.3) and removed/reinstalled node_modules:

theogravity:react-styleguide-generator theo$ node -v
v0.12.1
theogravity:react-styleguide-generator theo$ npm i
npm WARN engine img-stats@0.4.2: wanted: {"node":"~0.10"} (current: {"node":"0.12.1","npm":"2.5.1"})

> fsevents@0.3.6 install /Volumes/sixfive-cs/react-styleguide-generator/node_modules/babel/node_modules/chokidar/node_modules/fsevents
> node-gyp rebuild

child_process: customFds option is deprecated, use stdio instead.
  SOLINK_MODULE(target) Release/.node
  SOLINK_MODULE(target) Release/.node: Finished
  CXX(target) Release/obj.target/fse/fsevents.o
  SOLINK_MODULE(target) Release/fse.node
  SOLINK_MODULE(target) Release/fse.node: Finished

> fsevents@0.3.6 install /Volumes/sixfive-cs/react-styleguide-generator/node_modules/watchify/node_modules/chokidar/node_modules/fsevents
> node-gyp rebuild

child_process: customFds option is deprecated, use stdio instead.
  SOLINK_MODULE(target) Release/.node
  SOLINK_MODULE(target) Release/.node: Finished
  CXX(target) Release/obj.target/fse/fsevents.o
  SOLINK_MODULE(target) Release/fse.node
  SOLINK_MODULE(target) Release/fse.node: Finished

> fsevents@0.3.6 install /Volumes/sixfive-cs/react-styleguide-generator/node_modules/cssnext/node_modules/chokidar/node_modules/fsevents
> node-gyp rebuild

child_process: customFds option is deprecated, use stdio instead.
  SOLINK_MODULE(target) Release/.node
  SOLINK_MODULE(target) Release/.node: Finished
  CXX(target) Release/obj.target/fse/fsevents.o
  SOLINK_MODULE(target) Release/fse.node
  SOLINK_MODULE(target) Release/fse.node: Finished

> dtrace-provider@0.5.0 install /Volumes/sixfive-cs/react-styleguide-generator/node_modules/bunyan/node_modules/dtrace-provider
> node scripts/install.js

> caniuse-api@1.3.2 postinstall /Volumes/sixfive-cs/react-styleguide-generator/node_modules/cssnext/node_modules/caniuse-api
> node -e "require('shelljs/global');if(test('-d', 'dist'))exec('node dist/generate-features.js')"

object-assign@3.0.0 node_modules/object-assign

rimraf@2.4.2 node_modules/rimraf

minimist@1.1.1 node_modules/minimist

marked@0.3.3 node_modules/marked

mustache@2.1.2 node_modules/mustache

react-simpletabs@0.6.1 node_modules/react-simpletabs
└── classnames@1.2.2

fs-extra@0.20.1 node_modules/fs-extra
├── jsonfile@2.2.1
└── graceful-fs@3.0.8

page@1.6.3 node_modules/page
└── path-to-regexp@1.0.3 (isarray@0.0.1)

mocha@2.2.5 node_modules/mocha
├── escape-string-regexp@1.0.2
├── supports-color@1.2.1
├── growl@1.8.1
├── commander@2.3.0
├── diff@1.4.0
├── mkdirp@0.5.0 (minimist@0.0.8)
├── jade@0.26.3 (commander@0.6.1, mkdirp@0.3.0)
├── debug@2.0.0 (ms@0.6.2)
└── glob@3.2.3 (inherits@2.0.1, graceful-fs@2.0.3, minimatch@0.2.14)

highlight.js@8.6.0 node_modules/highlight.js

glob@5.0.14 node_modules/glob
├── path-is-absolute@1.0.0
├── inherits@2.0.1
├── once@1.3.2 (wrappy@1.0.1)
├── inflight@1.0.4 (wrappy@1.0.1)
└── minimatch@2.0.9 (brace-expansion@1.1.0)

react-bootstrap@0.23.5 node_modules/react-bootstrap
└── classnames@2.1.3

uglify-js@2.4.23 node_modules/uglify-js
├── uglify-to-browserify@1.0.2
├── async@0.2.10
├── source-map@0.1.34 (amdefine@1.0.0)
└── yargs@3.5.4 (decamelize@1.0.0, camelcase@1.1.0, window-size@0.1.0, wordwrap@0.0.2)

gh-pages@0.3.1 node_modules/gh-pages
├── graceful-fs@2.0.1
├── async@0.2.9
├── wrench@1.5.1
├── q@1.0.1
├── commander@2.8.1 (graceful-readlink@1.0.1)
├── lodash@2.4.2
├── glob@4.0.6 (inherits@2.0.1, graceful-fs@3.0.8, once@1.3.2, minimatch@1.0.0)
└── q-io@1.11.6 (mimeparse@0.1.4, url2@0.0.0, mime@1.3.4, qs@1.2.2, collections@0.2.2)

react-docgen@1.3.0 node_modules/react-docgen
├── node-dir@0.1.8
├── async@0.9.2
├── nomnom@1.8.1 (underscore@1.6.0, chalk@0.4.0)
└── recast@0.10.21 (private@0.1.6, ast-types@0.8.3, source-map@0.4.4, esprima-fb@15001.1.0-dev-harmony-fb)

browserify@10.2.6 node_modules/browserify
├── https-browserify@0.0.0
├── tty-browserify@0.0.0
├── htmlescape@1.1.0
├── builtins@0.0.7
├── constants-browserify@0.0.1
├── path-browserify@0.0.0
├── os-browserify@0.1.2
├── isarray@0.0.1
├── inherits@2.0.1
├── commondir@0.0.1
├── string_decoder@0.10.31
├── through2@1.1.1
├── process@0.11.1
├── stream-browserify@1.0.0
├── shell-quote@0.0.1
├── has@1.0.0
├── defined@1.0.0
├── subarg@1.0.0
├── punycode@1.3.2
├── domain-browser@1.1.4
├── xtend@4.0.0
├── duplexer2@0.0.2
├── querystring-es3@0.2.1
├── assert@1.3.0
├── timers-browserify@1.4.1
├── deps-sort@1.3.9
├── util@0.10.3
├── concat-stream@1.4.10 (typedarray@0.0.6)
├── parents@1.0.1 (path-platform@0.11.15)
├── events@1.0.2
├── vm-browserify@0.0.4 (indexof@0.0.1)
├── read-only-stream@1.1.1 (readable-wrap@1.0.0)
├── console-browserify@1.1.0 (date-now@0.1.4)
├── http-browserify@1.7.0 (Base64@0.2.1)
├── readable-stream@1.1.13 (core-util-is@1.0.1)
├── shasum@1.0.1 (sha.js@2.3.6, json-stable-stringify@0.0.1)
├── url@0.10.3 (querystring@0.2.0)
├── labeled-stream-splicer@1.0.2 (stream-splicer@1.3.2)
├── buffer@3.3.1 (ieee754@1.1.6, is-array@1.0.1, base64-js@0.0.8)
├── resolve@1.1.6
├── browser-resolve@1.9.0
├── glob@4.5.3 (once@1.3.2, inflight@1.0.4, minimatch@2.0.9)
├── browser-pack@5.0.1 (umd@3.0.1, combine-source-map@0.6.1)
├── JSONStream@1.0.4 (through@2.3.8, jsonparse@1.0.0)
├── syntax-error@1.1.4 (acorn@1.2.2)
├── crypto-browserify@3.9.14 (randombytes@2.0.1, create-hmac@1.1.3, pbkdf2@3.0.4, create-hash@1.1.1, diffie-hellman@3.0.2, create-ecdh@2.0.1, browserify-aes@1.0.2, public-encrypt@2.0.1, browserify-sign@3.0.2)
├── insert-module-globals@6.5.2 (combine-source-map@0.6.1, lexical-scope@1.1.1)
├── browserify-zlib@0.1.4 (pako@0.2.7)
└── module-deps@3.8.1 (stream-combiner2@1.0.2, detective@4.1.1)

react@0.13.3 node_modules/react
└── envify@3.4.0 (through@2.3.8, jstransform@10.1.0)

standard@4.5.4 node_modules/standard
├── get-stdin@4.0.1
├── find-root@0.1.1
├── eslint-config-standard-react@1.0.1
├── eslint-config-standard@3.4.1
├── xtend@4.0.0
├── eslint-plugin-react@2.7.1
├── pkg-config@1.1.0 (debug-log@1.0.0)
├── dezalgo@1.0.3 (wrappy@1.0.1, asap@2.0.3)
├── deglob@1.0.1 (uniq@1.0.1, path@0.11.14, run-parallel@1.1.2, ignore@2.2.15)
├── standard-format@1.5.0 (esformatter-spaced-lined-comment@2.0.1, stdin@0.0.1, esformatter-quotes@1.0.2, esformatter-eol-last@1.0.0, esformatter-semicolon-first@1.1.0, esformatter-literal-notation@1.0.1, esformatter@0.7.2)
└── eslint@0.24.1 (escape-string-regexp@1.0.3, object-assign@2.1.1, path-is-absolute@1.0.0, strip-json-comments@1.0.2, xml-escape@1.0.0, user-home@1.1.1, estraverse-fb@1.3.1, globals@8.2.0, estraverse@4.1.0, text-table@0.2.0, debug@2.2.0, chalk@1.1.0, mkdirp@0.5.1, optionator@0.5.0, minimatch@2.0.9, espree@2.2.2, concat-stream@1.5.0, doctrine@0.6.4, is-my-json-valid@2.12.0, js-yaml@3.3.1, escope@3.2.0, inquirer@0.8.5)

watchify@3.3.0 node_modules/watchify
├── defined@1.0.0
├── xtend@4.0.0
├── through2@0.6.5 (readable-stream@1.0.33)
├── outpipe@1.1.1 (shell-quote@1.4.3)
├── anymatch@1.3.0 (arrify@1.0.0, micromatch@2.1.6)
├── browserify@11.0.0 (https-browserify@0.0.0, htmlescape@1.1.0, tty-browserify@0.0.0, builtins@0.0.7, constants-browserify@0.0.1, path-browserify@0.0.0, os-browserify@0.1.2, isarray@0.0.1, inherits@2.0.1, commondir@0.0.1, string_decoder@0.10.31, process@0.11.1, stream-browserify@2.0.0, has@1.0.0, shell-quote@0.0.1, punycode@1.3.2, subarg@1.0.0, domain-browser@1.1.4, querystring-es3@0.2.1, assert@1.3.0, timers-browserify@1.4.1, deps-sort@1.3.9, util@0.10.3, events@1.0.2, parents@1.0.1, vm-browserify@0.0.4, console-browserify@1.1.0, url@0.10.3, shasum@1.0.1, through2@1.1.1, duplexer2@0.0.2, concat-stream@1.4.10, stream-http@1.3.0, readable-stream@2.0.2, read-only-stream@1.1.1, resolve@1.1.6, browser-resolve@1.9.0, buffer@3.3.1, labeled-stream-splicer@1.0.2, glob@4.5.3, JSONStream@1.0.4, syntax-error@1.1.4, browser-pack@5.0.1, crypto-browserify@3.9.14, insert-module-globals@6.5.2, browserify-zlib@0.1.4, module-deps@3.8.1)
└── chokidar@1.0.5 (arrify@1.0.0, path-is-absolute@1.0.0, is-glob@1.1.3, glob-parent@1.2.0, async-each@0.1.6, is-binary-path@1.0.1, readdirp@1.4.0, fsevents@0.3.6)

babel-eslint@3.1.23 node_modules/babel-eslint
├── lodash.pick@3.1.0 (lodash._pickbyarray@3.0.2, lodash._bindcallback@3.0.1, lodash.restparam@3.6.1, lodash._baseflatten@3.1.4, lodash._pickbycallback@3.0.0)
├── lodash.assign@3.2.0 (lodash._baseassign@3.2.0, lodash._createassigner@3.1.1, lodash.keys@3.1.2)
└── babel-core@5.8.3 (slash@1.0.0, babel-plugin-remove-debugger@1.0.1, babel-plugin-remove-console@1.0.1, babel-plugin-property-literals@1.0.1, babel-plugin-jscript@1.0.1, babel-plugin-inline-environment-variables@1.0.1, babel-plugin-eval@1.0.1, babel-plugin-member-expression-literals@1.0.1, babel-plugin-undefined-to-void@1.1.6, babel-plugin-react-constant-elements@1.0.3, to-fast-properties@1.0.1, shebang-regex@1.0.0, trim-right@1.0.1, babel-plugin-react-display-name@1.0.3, path-exists@1.0.0, path-is-absolute@1.0.0, babel-plugin-constant-folding@1.0.1, fs-readdir-recursive@0.1.2, babel-plugin-proto-to-assign@1.0.3, babel-plugin-dead-code-elimination@1.0.2, strip-json-comments@1.0.2, babel-plugin-runtime@1.0.7, private@0.1.6, globals@6.4.1, esutils@2.0.2, convert-source-map@1.1.1, home-or-tmp@1.0.0, babel-plugin-undeclared-variables-check@1.0.2, detect-indent@3.0.1, js-tokens@1.0.1, line-numbers@0.2.0, debug@2.2.0, repeating@1.1.3, chalk@1.1.0, babylon@5.8.3, source-map@0.4.4, output-file-sync@1.1.1, resolve@1.1.6, is-integer@1.0.4, minimatch@2.0.9, bluebird@2.9.34, source-map-support@0.2.10, regexpu@1.2.0, regenerator@0.8.34, lodash@3.10.0, core-js@0.9.18)

babelify@6.1.3 node_modules/babelify
├── object-assign@2.1.1
├── through2@0.6.5 (xtend@4.0.0, readable-stream@1.0.33)
└── babel-core@5.8.3 (slash@1.0.0, babel-plugin-remove-console@1.0.1, babel-plugin-remove-debugger@1.0.1, babel-plugin-jscript@1.0.1, babel-plugin-eval@1.0.1, babel-plugin-property-literals@1.0.1, babel-plugin-inline-environment-variables@1.0.1, babel-plugin-member-expression-literals@1.0.1, babel-plugin-undefined-to-void@1.1.6, babel-plugin-react-constant-elements@1.0.3, to-fast-properties@1.0.1, trim-right@1.0.1, shebang-regex@1.0.0, path-exists@1.0.0, path-is-absolute@1.0.0, babel-plugin-react-display-name@1.0.3, babel-plugin-constant-folding@1.0.1, fs-readdir-recursive@0.1.2, babel-plugin-proto-to-assign@1.0.3, babel-plugin-dead-code-elimination@1.0.2, strip-json-comments@1.0.2, babel-plugin-runtime@1.0.7, private@0.1.6, globals@6.4.1, esutils@2.0.2, convert-source-map@1.1.1, home-or-tmp@1.0.0, babel-plugin-undeclared-variables-check@1.0.2, detect-indent@3.0.1, js-tokens@1.0.1, line-numbers@0.2.0, debug@2.2.0, repeating@1.1.3, chalk@1.1.0, babylon@5.8.3, source-map@0.4.4, output-file-sync@1.1.1, resolve@1.1.6, is-integer@1.0.4, minimatch@2.0.9, bluebird@2.9.34, source-map-support@0.2.10, regexpu@1.2.0, regenerator@0.8.34, lodash@3.10.0, core-js@0.9.18)

babel@5.8.3 node_modules/babel
├── slash@1.0.0
├── path-is-absolute@1.0.0
├── path-exists@1.0.0
├── fs-readdir-recursive@0.1.2
├── convert-source-map@1.1.1
├── commander@2.8.1 (graceful-readlink@1.0.1)
├── source-map@0.4.4 (amdefine@1.0.0)
├── output-file-sync@1.1.1 (xtend@4.0.0, mkdirp@0.5.1)
├── lodash@3.10.0
├── chokidar@1.0.5 (arrify@1.0.0, is-glob@1.1.3, glob-parent@1.2.0, async-each@0.1.6, is-binary-path@1.0.1, anymatch@1.3.0, readdirp@1.4.0, fsevents@0.3.6)
└── babel-core@5.8.3 (babel-plugin-remove-console@1.0.1, babel-plugin-remove-debugger@1.0.1, babel-plugin-property-literals@1.0.1, babel-plugin-jscript@1.0.1, babel-plugin-inline-environment-variables@1.0.1, babel-plugin-member-expression-literals@1.0.1, babel-plugin-eval@1.0.1, babel-plugin-react-constant-elements@1.0.3, babel-plugin-undefined-to-void@1.1.6, to-fast-properties@1.0.1, shebang-regex@1.0.0, trim-right@1.0.1, babel-plugin-react-display-name@1.0.3, babel-plugin-constant-folding@1.0.1, babel-plugin-proto-to-assign@1.0.3, babel-plugin-dead-code-elimination@1.0.2, strip-json-comments@1.0.2, babel-plugin-runtime@1.0.7, private@0.1.6, globals@6.4.1, detect-indent@3.0.1, home-or-tmp@1.0.0, babel-plugin-undeclared-variables-check@1.0.2, esutils@2.0.2, line-numbers@0.2.0, js-tokens@1.0.1, chalk@1.1.0, repeating@1.1.3, debug@2.2.0, babylon@5.8.3, minimatch@2.0.9, is-integer@1.0.4, resolve@1.1.6, bluebird@2.9.34, source-map-support@0.2.10, regexpu@1.2.0, regenerator@0.8.34, core-js@0.9.18)

bunyan@1.4.0 node_modules/bunyan
├── safe-json-stringify@1.0.3
├── mv@2.1.1 (ncp@2.0.0, mkdirp@0.5.1)
└── dtrace-provider@0.5.0 (nan@1.8.4)

cssnext@1.8.1 node_modules/cssnext
├── postcss-font-variant@1.1.0
├── postcss-custom-media@4.1.0
├── postcss-messages@0.2.2
├── write-file-stdout@0.0.2
├── postcss-pseudoelements@2.2.0
├── postcss-media-minmax@1.2.0
├── commander@2.8.1 (graceful-readlink@1.0.1)
├── exit@0.1.2
├── read-file-stdin@0.2.0 (gather-stream@1.0.0)
├── postcss-selector-not@1.2.1 (balanced-match@0.2.0)
├── postcss-selector-matches@1.2.1 (balanced-match@0.2.0)
├── postcss-custom-selectors@2.3.0 (balanced-match@0.2.0)
├── postcss-custom-properties@4.2.0 (balanced-match@0.1.0)
├── mkdirp@0.5.1 (minimist@0.0.8)
├── chalk@1.1.0 (escape-string-regexp@1.0.3, supports-color@2.0.0, ansi-styles@2.1.0, has-ansi@2.0.0, strip-ansi@3.0.0)
├── postcss-calc@4.1.0 (postcss-message-helpers@2.0.0, reduce-css-calc@1.2.0)
├── postcss-color-rgba-fallback@1.3.1 (color-string@0.3.0)
├── pleeease-filters@1.0.1 (onecolor@2.4.2)
├── postcss-color-rebeccapurple@1.2.0 (color@0.9.0)
├── to-space-case@0.1.3 (to-no-case@0.1.2)
├── postcss-reporter@0.1.0 (lodash.difference@3.2.2)
├── postcss-pseudo-class-any-link@0.2.1 (postcss-selector-parser@1.1.2)
├── to-slug-case@0.1.2 (to-space-case@0.1.2)
├── postcss-color-gray@2.0.0 (postcss-message-helpers@2.0.0, reduce-function-call@1.0.1, color@0.7.3)
├── postcss-color-hwb@1.1.0 (postcss-message-helpers@1.1.1, reduce-function-call@1.0.1, color@0.7.3)
├── postcss-color-hex-alpha@1.2.0 (postcss-message-helpers@1.1.1, color@0.7.3)
├── postcss-color-function@1.3.2 (postcss-message-helpers@1.1.1, balanced-match@0.1.0, css-color-function@1.2.1)
├── cssnano@2.1.0 (flatten@0.0.1, indexes-of@1.0.1, postcss-minify-font-weight@1.0.1, postcss-discard-empty@1.1.1, postcss-minify-trbl@1.0.0, postcss-merge-idents@1.0.1, postcss-discard-duplicates@1.1.3, postcss-zindex@1.1.2, balanced-match@0.2.0, postcss-merge-rules@1.3.1, postcss-convert-values@1.2.3, css-list@0.1.2, postcss-discard-unused@1.0.0, postcss-font-family@1.1.1, postcss-reduce-idents@1.0.1, postcss-unique-selectors@1.0.0, postcss-discard-comments@1.2.0, postcss-minify-selectors@1.4.2, postcss-single-charset@0.3.0, postcss-normalize-url@2.1.0, postcss-colormin@1.2.3)
├── postcss@4.1.16 (js-base64@2.1.8, source-map@0.4.4, es6-promise@2.3.0)
├── postcss-import@6.2.0 (postcss-message-helpers@2.0.0, clone@0.1.19, resolve@1.1.6, es6-promise@2.3.0)
├── postcss-url@3.3.1 (path-is-absolute@1.0.0, mime@1.3.4, reduce-function-call@1.0.1, js-base64@2.1.8, directory-encoder@0.6.1)
├── pixrem@1.3.1 (reduce-css-calc@1.2.0, browserslist@0.5.0)
├── autoprefixer-core@5.2.1 (num2fraction@1.1.0, browserslist@0.4.0, caniuse-db@1.0.30000237)
├── chokidar@1.0.5 (arrify@1.0.0, path-is-absolute@1.0.0, is-glob@1.1.3, glob-parent@1.2.0, async-each@0.1.6, is-binary-path@1.0.1, anymatch@1.3.0, readdirp@1.4.0, fsevents@0.3.6)
└── caniuse-api@1.3.2 (browserslist@0.4.0, lodash.memoize@2.4.1, shelljs@0.3.0, lodash.uniq@3.2.2, caniuse-db@1.0.30000237)
theogravity:react-styleguide-generator theo$ npm run styleguide

> react-styleguide-generator@1.0.7 styleguide /Volumes/sixfive-cs/react-styleguide-generator
> node bin/rsg 'example/**/*.js' -c 'styleguide.json' -v | bunyan -o short

20:10:47.251Z  INFO rsg/bin: Styleguide generation complete
    outputDir: /Volumes/sixfive-cs/react-styleguide-generator/styleguide

And using 0.10.33 (after removing node_modules and performing npm i):

theogravity:react-styleguide-generator theo$ node -v
v0.10.33
theogravity:react-styleguide-generator theo$ npm run styleguide

> react-styleguide-generator@1.0.7 styleguide /Volumes/sixfive-cs/react-styleguide-generator
> node bin/rsg 'example/**/*.js' -c 'styleguide.json' -v | bunyan -o short

20:17:57.660Z  INFO rsg/bin: Styleguide generation complete
    outputDir: /Volumes/sixfive-cs/react-styleguide-generator/styleguide
markdalgleish commented 9 years ago

:+1:

Came here looking to implement multiple examples using a named array of props myself. This looks great.

pocotan001 commented 9 years ago

@theogravity Thanks for the detailed explanation, it worked great!

pocotan001 commented 9 years ago

@theogravity

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:

  • Multiple examples can be defined in a single example component and is displayed via tabbed sections
  • Automatic example code generation using props for multiple examples if code is not filled in
  • Adds watchify support to reduce repackage times (if you wanted to use the guide as the platform to test out your components)
  • Adds grunt usage example
  • Adds bunyan logging (was sometimes hard to debug issues without logging)

On the other hand I don't like:

  • Adds react-docgen support (es5 only) to document component props

We're hoping to keep this tool as simple as possible. The thing that made us concerned when we actually tried the added features is the fact that the documentation procedures got complicated. In particular, we feel that the integration with react-docgen is making things more difficult.

theogravity commented 9 years ago

@pocotan001 the developer for react-docgen has implemented es6 support today and will most likely do an updated release tomorrow, which will allow support for classes with RSG. If that is possible, can react-docgen be kept?

For the documentation procedures, is having to define the reactDocgen field is what is complex? When es6 support is in for react-docgen, we can probably remove the reactDocgen property from configuration.

Also how would you like the PR broken up?

theogravity commented 9 years ago

@pocotan001 react-docgen has been updated to parse es6.

Changes I've made:

I hope this helps you!

screenshot

ygoto3 commented 9 years ago

@theogravity

@pocotan001 and I (a collaborator of his) appreciate that you'd added es6 react-docgen support. We'd like to keep react-docgen.

Now you don't need to break up the PR, but we'd like you to make some modifications before we merge it.

  1. We'd like no tab to be displayed when examples field is not specified.
  2. We'd like you to update the samples in the README to emphasize that most of the fields you've added are optional. We'd like to keep samples as simple as possible.

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.

theogravity commented 9 years ago

@ygoto3 @pocotan001

ygoto3 commented 9 years ago

@theogravity Thank you for updating tabs and the readme.

We found a bug: When you move from / to Tooltip, the highlighter doesn't work (like the animated GIF image below). Could you fix it?

fixme

theogravity commented 9 years ago

@ygoto3 @pocotan001 Fixed! Thanks for testing.

pocotan001 commented 9 years ago

@theogravity Thank you for your prompt response.

pocotan001 commented 9 years ago

The minor changes have been completed.

preview

I'll probably release this new features tomorrow :beers:

marcello3d commented 9 years ago

looks awesome! great work y'all

theogravity commented 9 years ago

:+1:

pocotan001 commented 9 years ago

@theogravity @marcello3d I've released v1.1.0. Thanks for the PR!

theogravity commented 9 years ago

yay! thanks