diff --git a/Readme.md b/Readme.md index 428aeedde..fb45e186a 100644 --- a/Readme.md +++ b/Readme.md @@ -16,6 +16,7 @@ React Styleguidist is a style guide generator for React components. It lists com * **[Getting Started](./docs/GettingStarted.md): install and run Styleguidist** * [Locating components](./docs/Components.md): point Styleguidist to your React components * [Configuring webpack](./docs/Webpack.md): tell Styleguidist how to load your code +* [Documenting components](./docs/Documenting.md): how to write documentation * [Cookbook](./docs/Cookbook.md): how to solve common tasks with Styleguidist ## Examples diff --git a/docs/CLI.md b/docs/CLI.md index 8976f88ba..e3df1f39d 100644 --- a/docs/CLI.md +++ b/docs/CLI.md @@ -1,6 +1,6 @@ # CLI commands and options -These commands supposed to be placed in `package.json` `scripts` (see Installation section above). If you want to run them directly, use `./node_modules/.bin/styleguidist`. +These commands are supposed to be placed in `package.json` `scripts` (see [Getting Started](GettingStarted.md)). If you want to run them directly, use `./node_modules/.bin/styleguidist`. `styleguidist server`: Run dev server. diff --git a/docs/Components.md b/docs/Components.md index 642c38c7c..bfe592275 100644 --- a/docs/Components.md +++ b/docs/Components.md @@ -2,17 +2,9 @@ ## Components -By default Styleguidist will search components using this [glob pattern](https://github.com/isaacs/node-glob#glob-primer): `src/components/**/*.js`. If it doesn’t work for you, create a `styleguide.config.js` file in your project’s root folder. +By default Styleguidist will search components using this [glob pattern](https://github.com/isaacs/node-glob#glob-primer): `src/components/**/*.js`. It will pick up paths like `src/components/Button.js`, `src/components/Button/Button.js` or `src/components/Button/index.js`. If it doesn’t work for you, create a `styleguide.config.js` file in your project’s root folder and configure the pattern to fit your project structure. -If your components look like `components/Button.js` or `components/Button/Button.js` or `components/Button/index.js` (it’s the default behavior, change only if your components are not in `src/components` or files are not `.js`): - -```javascript -module.exports = { - components: 'src/components/**/*.js' -}; -``` - -If your components look like `components/Button/Button.js` + `components/Button/index.js` (you need to skip `index.js`, otherwise component will be loaded twice): +For example, if your components look like `components/Button/Button.js` + `components/Button/index.js` (meaning you need to skip `index.js`, otherwise the component will be loaded twice): ```javascript module.exports = { @@ -24,7 +16,7 @@ Or you need to skip test specs (`components/Button/Button.test.js`): ```javascript module.exports = { - components: 'components/**/!(*.test).js' + components: 'src/components/**/!(*.test).js' }; ``` @@ -38,8 +30,8 @@ Each section consists of (all fields are optional): - `name` — section title. - `content` — location of a Markdown file containing the overview content. -- `components` — a string or function returning a list of components. The same rules apply as for the root `components` option. -- `sections` — array of subsections. +- `components` — a glob pattern string or a function returning a list of components. The same rules apply as for the root `components` option. +- `sections` — array of subsections (can be nested). Configuring a style guide with textual documentation section and a list of components would look like: diff --git a/docs/Configuration.md b/docs/Configuration.md index 247636289..32246897d 100644 --- a/docs/Configuration.md +++ b/docs/Configuration.md @@ -1,6 +1,6 @@ # Configuration -You can change settings in the `styleguide.config.js` file in your project’s root folder. +By default, Styleguidist will look for `styleguide.config.js` file in your project’s root folder. You can change the location of the config file using `--config` [CLI](CLI.md) option. #### `assetsDir` @@ -194,7 +194,7 @@ module.exports = { Type: `Array`, optional -Allows components to be grouped into sections with a title and overview content. Sections can also be content only, with no associated components (for example, a textual introduction). +Allows components to be grouped into sections with a title and overview content. Sections can also be content only, with no associated components (for example, a textual introduction). Sections can be nested. See examples in the [Sections section](Components.md#sections). @@ -220,7 +220,7 @@ Show or hide example code initially. It can be toggled in the UI by clicking the Type: `Boolean`, default: `true` -Toggle sidebar initially. Sidebar is being hidden when opening components or examples in the isolation mode even if this value is set to `true`. When set to `false`, sidebar will always be hidden. +Toggle sidebar visibility. Sidebar will be hidden when opening components or examples in isolation mode even if this value is set to `true`. When set to `false`, sidebar will always be hidden. #### `skipComponentsWithoutExample` @@ -359,11 +359,11 @@ module.exports = { }; ``` -> **Note:**: `output` option will be ignored. +> **Note:** `output` option will be ignored. -> **Note:**: These plugins will be ignored: `CommonsChunkPlugins`, `HtmlWebpackPlugin`, `OccurrenceOrderPlugin`, `DedupePlugin`, `UglifyJsPlugin`, `HotModuleReplacementPlugin`. +> **Note:** These plugins will be ignored: `CommonsChunkPlugins`, `HtmlWebpackPlugin`, `OccurrenceOrderPlugin`, `DedupePlugin`, `UglifyJsPlugin`, `HotModuleReplacementPlugin`. -> **Note:** This option disables webpack config auto load, use `webpackConfigFile` option to load your project’s webpack config from file. +> **Note:** This option disables webpack config file autoload, use `webpackConfigFile` option to load your project’s webpack config from file. > **Note:** Run style guide in verbose mode to see the actual webpack config used by Styleguidist: `npm run styleguide -- --verbose`. @@ -381,6 +381,6 @@ module.exports = { }; ``` -> **Note:**: `entry`, `externals` and `output` options will be ignored, use `webpackConfig` option to change them. +> **Note:** `entry`, `externals` and `output` options will be ignored, use `webpackConfig` option to change them. -> **Note:**: These plugins will be ignored: `CommonsChunkPlugins`, `HtmlWebpackPlugin`, `OccurrenceOrderPlugin`, `DedupePlugin`, `UglifyJsPlugin`, `HotModuleReplacementPlugin`. +> **Note:** These plugins will be ignored: `CommonsChunkPlugins`, `HtmlWebpackPlugin`, `OccurrenceOrderPlugin`, `DedupePlugin`, `UglifyJsPlugin`, `HotModuleReplacementPlugin`. diff --git a/docs/Documenting.md b/docs/Documenting.md index 8b976a73c..54a6180f2 100644 --- a/docs/Documenting.md +++ b/docs/Documenting.md @@ -1,16 +1,18 @@ # Documenting components -Styleguidist generates documentation from three sources: +Styleguidist generates documentation for your components based on the comments in your source code, propTypes declarations and Readme files. > **Note:** [See examples](../examples/basic/lib/components) of documented components in our demo style guide. -## PropTypes and component description in the source code +## Code comments and propTypes + +Styleguidist will display your components’ JSDoc comment blocks. Also, it will pick up props from propTypes declarations and display them in a table. ```javascript import React, { PropTypes } from 'react'; /** - * General component description. + * General component description in JSDoc format. Markdown is *supported*. */ export default class Button extends React.Component { static propTypes = { @@ -38,9 +40,9 @@ export default class Button extends React.Component { > **Note:** Component’s `PropTypes` and documentation comments are parsed by the [react-docgen](https://github.com/reactjs/react-docgen) library. -## Usage examples and further documentation in Markdown +## Usage examples and Readme files -Examples are written in Markdown where any code block without a language tag will be rendered as a React component. By default any `Readme.md` or `ComponentName.md` in the component’s folder is treated as an examples file. +Styleguidist will look for any `Readme.md` or `ComponentName.md` files in the component’s folder and display them. Any code block without a language tag will be rendered as a React component with live editable preview. React component example: @@ -58,7 +60,7 @@ Examples are written in Markdown where any code block without a language tag wil ``` - This example rendered only as highlighted source code: + This example is rendered only as highlighted source code, not an actual component: ```html @@ -66,13 +68,13 @@ Examples are written in Markdown where any code block without a language tag wil Any [Markdown](http://daringfireball.net/projects/markdown/) is **allowed** _here_. -> **Note:** You can change documentation file name with the [getExampleFilename](Configuration.md#getexamplefilename) option. +> **Note:** You can configure examples file name with the [getExampleFilename](Configuration.md#getexamplefilename) option. ## External examples using doclet tags -Additional example files can be associated with components using doclet (`@example`) syntax. +Additional example files can be associated with components using `@example` doclet syntax. -The following component will also have an example as loaded from the `extra.examples.md` file: +The following component will also have an example loaded from the `extra.examples.md` file: ```javascript /** @@ -85,9 +87,9 @@ export default class Button extends React.Component { } ``` -## Documenting component public methods +## Public methods -Mark you public methods with [JSDoc `@public` tag](http://usejsdoc.org/tags-public.html): +By default, any methods your components have are considered to be private and are not published. Mark your public methods with JSDoc [`@public`](http://usejsdoc.org/tags-public.html) tag to get them published in the docs: ```javascript /** diff --git a/docs/Webpack.md b/docs/Webpack.md index fe68bf6a3..12e0b0ee2 100644 --- a/docs/Webpack.md +++ b/docs/Webpack.md @@ -1,14 +1,14 @@ # Configuring webpack -Styleguidist uses webpack under the hood and needs to know how to load your project’s files. +Styleguidist uses [webpack](https://webpack.js.org/) under the hood and it needs to know how to load your project’s files. *Webpack is a peer dependency but your project doesn’t have to use it. React Styleguidist works with webpack 1 and webpack 2.* -> **Note:** [See Cookbook](Cookbook.md) for more examples. +> **Note:** See [cookbook](Cookbook.md) for more examples. ## Reusing your project’s webpack config -By default Styleguidist will try to find webpack config (`webpack.config.dev.js` or `webpack.config.js`) anywhere in your project and use it. +By default Styleguidist will recursively try to find an existing webpack config (`webpack.config.dev.js` or `webpack.config.js`) in your project and use it. If your webpack config is located somewhere else, add its location to your `styleguide.config.js`: @@ -18,11 +18,11 @@ module.exports = { }; ``` -> **Note:**: It may not work with your project, see below for other options. +> **Note:** It may not work with your project, see below for other options. -> **Note:**: `entry`, `externals` and `output` options will be ignored, use `webpackConfig` option to change them. +> **Note:** `entry`, `externals` and `output` options will be ignored, use `webpackConfig` option to change them. -> **Note:**: These plugins will be ignored: `CommonsChunkPlugins`, `HtmlWebpackPlugin`, `OccurrenceOrderPlugin`, `DedupePlugin`, `UglifyJsPlugin`, `HotModuleReplacementPlugin`. +> **Note:** These plugins will be ignored: `CommonsChunkPlugins`, `HtmlWebpackPlugin`, `OccurrenceOrderPlugin`, `DedupePlugin`, `UglifyJsPlugin`, `HotModuleReplacementPlugin`. ## Custom webpack config @@ -50,9 +50,9 @@ module.exports = { }; ``` -> **Warning:** This option disable webpack config auto load, use `webpackConfigFile` option to load your project’s webpack config from a file. +> **Warning:** Using this option disables webpack config file autoload, use `webpackConfigFile` option to load your project’s webpack config from a file. -> **Note:**: These plugins will be ignored: `CommonsChunkPlugins`, `HtmlWebpackPlugin`, `OccurrenceOrderPlugin`, `DedupePlugin`, `UglifyJsPlugin`, `HotModuleReplacementPlugin`. +> **Note:** These plugins will be ignored: `CommonsChunkPlugins`, `HtmlWebpackPlugin`, `OccurrenceOrderPlugin`, `DedupePlugin`, `UglifyJsPlugin`, `HotModuleReplacementPlugin`. ## Non-webpack projects