{"id":13630998,"url":"https://github.com/pocotan001/react-styleguide-generator","last_synced_at":"2025-04-17T17:32:12.989Z","repository":{"id":33712678,"uuid":"37366203","full_name":"pocotan001/react-styleguide-generator","owner":"pocotan001","description":"Easily generate a good-looking styleguide by adding some documentation to your React project.","archived":true,"fork":false,"pushed_at":"2017-05-04T16:30:35.000Z","size":5121,"stargazers_count":701,"open_issues_count":9,"forks_count":76,"subscribers_count":18,"default_branch":"master","last_synced_at":"2025-03-15T01:36:22.135Z","etag":null,"topics":["generator","react","styleguide"],"latest_commit_sha":null,"homepage":"http://pocotan001.github.io/react-styleguide-generator","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pocotan001.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-06-13T09:48:39.000Z","updated_at":"2024-12-16T09:46:35.000Z","dependencies_parsed_at":"2022-09-13T02:32:05.776Z","dependency_job_id":null,"html_url":"https://github.com/pocotan001/react-styleguide-generator","commit_stats":null,"previous_names":[],"tags_count":33,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pocotan001%2Freact-styleguide-generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pocotan001%2Freact-styleguide-generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pocotan001%2Freact-styleguide-generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pocotan001%2Freact-styleguide-generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pocotan001","download_url":"https://codeload.github.com/pocotan001/react-styleguide-generator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249349450,"owners_count":21255402,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["generator","react","styleguide"],"created_at":"2024-08-01T22:02:06.467Z","updated_at":"2025-04-17T17:32:12.304Z","avatar_url":"https://github.com/pocotan001.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","📦 Legacy \u0026 Inactive Projects"],"sub_categories":[],"readme":"# React Styleguide Generator\n\n[![CircleCI](https://img.shields.io/circleci/project/pocotan001/react-styleguide-generator.svg)](https://circleci.com/gh/pocotan001/react-styleguide-generator)\n[![npm](https://img.shields.io/npm/v/react-styleguide-generator.svg)](https://npmjs.org/package/react-styleguide-generator)\n[![Join the chat at https://gitter.im/pocotan001/react-styleguide-generator](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/pocotan001/react-styleguide-generator?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n\nEasily generate a good-looking styleguide by adding some documentation to your React project.\n\n![preview](https://cloud.githubusercontent.com/assets/869065/8392279/7f3811ae-1d20-11e5-9707-864d5994ba49.png)  \n[Demo](http://pocotan001.github.io/react-styleguide-generator/) using the [React-Bootstrap](http://react-bootstrap.github.io/).\n\n## Installation\n\n``` sh\nnpm install react-styleguide-generator\n```\n\nWhich requires **React 15.x.x** or newer. To install it `npm install react`.\n\n## Quick Start\n\n**NOTE:** By default Babel's `static` keyword is disabled. You can turn them on individually by passing `stage 0` as a [babelrc](https://babeljs.io/docs/usage/babelrc/) or [options.babelConfig](#babelconfig).\n\n### Documenting your React components\n\nCreate file for the styleguide, and then add some documentation to a static field named `styleguide`. You can use the [ES6 syntax](https://github.com/lukehoban/es6features) by [Babel](https://babeljs.io/).\n\n``` js\nimport React from 'react'\nimport Button from './Button'\n\nexport default class extends React.Component {\n  static styleguide = {\n    index: '1.1',\n    category: 'Elements',\n    title: 'Button',\n    description: 'You can use **Markdown** within this `description` field.',\n    code: `\u003cButton size='small|large' onClick={Function}\u003eCool Button\u003c/Button\u003e`,\n    className: 'apply the css class'\n  }\n\n  onClick () {\n    alert('Alo!')\n  }\n\n  render () {\n    return (\n      \u003cButton size='large' onClick={this.onClick}\u003eCool Button\u003c/Button\u003e\n    )\n  }\n}\n```\n\n- `index`: Reference to the element's position in the styleguide (optional)\n- `category`: Components category name\n- `title`: Components title\n- `description`: Components description (optional)\n- `code`: Code example (optional). Not specifying this will not auto-generate an example.\n- `className`: CSS class name (optional)\n\n#### Additional examples in tabs (optional) [Demo](http://pocotan001.github.io/react-styleguide-generator/#!/Features!/Additional%20examples%20in%20tabs)\n\nYou can optionally use tabs to segment out examples for a component:\n\n``` js\nimport React from 'react'\nimport Button from './Button'\n\nexport default class extends React.Component {\n  static styleguide = {\n    …\n    // Component to use for generating additional examples\n    exampleComponent: Button,\n    // Array of additional example tabs\n    examples: [{\n      tabTitle: 'Default',\n      props: {\n        children: 'Default'\n      }\n    }, {\n      tabTitle: 'Primary',\n      props: {\n        kind: 'primary',\n        children: 'Primary',\n        onClick () {\n          alert('o hay!')\n        }\n      }\n    }]\n  }\n}\n```\n\n- `exampleComponent`: `ReactElement` to use to generate the examples.\n- `examples`: Array of examples, which generates additional tabs of example components and sample code\n- `examples[].tabTitle`: Title of example tab\n- `examples[].props`: Properties to assign to the rendered example component\n- `examples[].props.children`: (optional) Child elements to assign to the example component\n- `examples[].code`: (optional) Code example. Omitting this will attempt to auto-generate a code example using the `examples[].props`\n\n#### Additional examples via doc comment (optional) [Demo](http://pocotan001.github.io/react-styleguide-generator/#!/Features!/Additional%20examples%20via%20doc%20comment)\n\nDoc comment support example is:\n\n``` js\n/**\n * Substitute this description for `styleguide.description`.\n */\nexport default class extends Component {\n  // required for prop documentation\n  static displayName = 'ExampleButton'\n\n  static styleguide = {\n    …\n  }\n\n  // Document the props via react-docgen\n  static propTypes = {\n    /**\n     * Block level\n     */\n    block: React.PropTypes.bool,\n    /**\n     * Style types\n     */\n    kind: React.PropTypes.oneOf(['default', 'primary', 'success', 'info'])\n  }\n\n  render () {\n    return \u003cButton block kind='primary'\u003eCool Button\u003c/Button\u003e\n  }\n}\n```\n\nIf necessary, visit [react-styleguide-generator/example](https://github.com/pocotan001/react-styleguide-generator/tree/master/example) to see more complete examples for the documenting syntax.\n\n### Generating the documentation\n\n#### Command line tool\n\nA common usage example is below.\n\n``` sh\n# The default output to `styleguide` directory\nrsg 'example/**/*.js'\n```\n\nType `rsg -h` or `rsg --help` to get all the available options.\n\n```\nUsage: rsg [input] [options]\n\nOptions:\n  -o, --output     Output directory            ['styleguide']\n  -t, --title      Used as a page title        ['Style Guide']\n  -r, --root       Set the root path           ['.']\n  -f, --files      Inject references to files  ['']\n  -c, --config     Use the config file         ['styleguide.json']\n  -p, --pushstate  Enable HTML5 pushState      [false]\n  -v, --verbose    Verbose output              [false]\n  -w, --watch      Watch mode using `browserifyConfig`\n\nExamples:\n  rsg 'example/**/*.js' -t 'Great Style Guide' -f 'a.css, a.js' -v\n\n  # Necessary to use a config file if you want to enable react-docgen\n  rsg 'example/**/*.js' -c 'styleguide.json' -v\n```\n\n#### Gulp\n\n``` js\nconst gulp = require('gulp')\nconst rsg = require('react-styleguide-generator').rsg\n\ngulp.task('styleguide', function (done) {\n  rsg('example/**/*.js', {\n    output: 'path/to/dir',\n    files: ['a.css', 'a.js']\n  }).generate()\n    .then(() =\u003e done())\n    .catch(err =\u003e {\n      console.error(err)\n      done()\n    })\n})\n```\n\n#### Grunt\n\n``` js\nconst rsg = require('react-styleguide-generator').rsg\n\ngrunt.registerTask('rsg', 'React style guide', function () {\n  const done = this.async()\n\n  try {\n    const conf = grunt.config.get('rsg')\n\n    rsg(conf.input, {\n      config: conf.configFile,\n      watch: false,\n      verbose: true\n    }).generate()\n      .then(() =\u003e {\n        grunt.log.ok('react styleguide generation complete')\n        done()\n      })\n      .catch(err =\u003e {\n        grunt.log.error('Error: ' + err + ' ' + err.stack())\n        done(false)\n      })\n  } catch (e) {\n    grunt.log.error('Error: ' + e + ' ' + e.stack)\n    done(false)\n  }\n})\n```\n\n## API\n\n### RSG(input, [options])\n\nReturns a new RSG instance.\n\n#### input\n\nType: `String`\n\nRefers to [glob syntax](https://github.com/isaacs/node-glob) or it can be a direct file path.\n\n#### options\n\n##### output\n\nType: `String`  \nDefault: `'styleguide'`\n\nOutput directory path.\n\n##### title\n\nType: `String`  \nDefault: `'Style Guide'`\n\nUsed as a page title and in the page header.\n\n##### reactDocgen.files\n\nType: `Array`\nDefault: `input`\n\nAn array of `glob`-able file/paths for `react-docgen` to parse. If not specified, will default the value to `input`.\n\n##### root\n\nType: `String`  \nDefault: `'.'`\n\nSet the root path. For example, if the styleguide is hosted at `http://example.com/styleguide` the `options.root` should be `styleguide`.\n\n##### files\n\nType: `Array`  \nDefault: `null`\n\nInject references to files. A usage example is:\n\n``` js\n{\n  files: [\n    '//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css',\n    'a.css',\n    'a.js',\n    'icon.svg'\n  ]\n}\n```\n\nCheck for the existence of the files and only copy the files if it exists.\n\n```\nstyleguide/files\n├─ a.css\n├─ a.js\n└─ icon.svg\n```\n\nInject file references into index.html if the files with the extension `.css` or `.js`.\n\n``` html\n\u003c!doctype html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    …\n    \u003clink rel=\"stylesheet\" href=\"//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css\"\u003e\n    \u003clink rel=\"stylesheet\" href=\"files/a.css\"\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    …\n    \u003cscript src=\"files/a.js\"\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n##### config\n\nType: `String|Object`  \nDefault: `styleguide.json`\n\nThe entire range of RSG API options is allowed. [Usage example](https://github.com/pocotan001/react-styleguide-generator/blob/master/example/styleguide.json).\n\nAn object can be passed instead of a filename that contains the RSG API options.\n\n##### pushstate\n\nType: `String`  \nDefault: `false`\n\nEnable HTML5 pushState. When this option is enabled, styleguide will use history API.\n\n##### babelConfig\n\nType: `Object`  \nDefault: `null`\n\nA usage example is below. See the [babel docs](http://babeljs.io/docs/usage/options/) for the complete list.\n\n``` js\n{\n  babelConfig: {\n    stage: 0\n  }\n}\n```\n\n##### browserifyConfig\n\nType: `Object`  \nDefault: `{ standalone: 'Contents', debug: true }`\n\nA usage example is below. See the [browserify docs](https://github.com/substack/node-browserify#browserifyfiles--opts) for the complete list.\n\n``` js\n{\n  extensions: ['', '.js', '.jsx']\n}\n```\n\n### watch\n\nType: `String`\nDefault: `false`\n\nEnables `watchify` for when the `input` files change, speeding up rebuild time.\n\n### rsg.generate()\n\nGenerate the files and their dependencies into a styleguide output.\n\n## Demo\n\nGet the demo running locally:\n\n``` sh\ngit clone git@github.com:pocotan001/react-styleguide-generator.git\ncd react-styleguide-generator/example/\nnpm install\nnpm start\n```\n\nVisit [http://localhost:3000/](http://localhost:3000/) in your browser.\n\n## Troubleshooting\n\n### Error: No suitable component definition found.\n\nMake sure your component contains `displayName` and `render()`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpocotan001%2Freact-styleguide-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpocotan001%2Freact-styleguide-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpocotan001%2Freact-styleguide-generator/lists"}