You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
To add automatically generated React props docs use [sourcejs-react-docgen](https://github.com/sourcejs/sourcejs-react-docgen) plugin. Check [SourceJS React bundle example](http://github.com/sourcejs/react-styleguidist-example) for more insights.
13
+
11
14
## Installation
12
15
13
16
```
14
-
npm install --save-dev react-styleguidist
17
+
cd sourcejs-project
18
+
npm install sourcejs-react-styleguidist --save
15
19
```
16
20
17
-
Add a `styleguide.config.js` file into your project’s root folder:
21
+
After re-running your SourceJS app, plugin will be loaded automatically.
22
+
23
+
### Important configs
24
+
25
+
Configure path to components in SourceJS `options.js` file:
18
26
19
27
```javascript
28
+
var path =require('path');
29
+
20
30
module.exports= {
21
-
rootDir:'./lib',
22
-
components:'./components/**/*.js'
31
+
plugins: {
32
+
reactStyleguidist: {
33
+
rootDir:path.join(global.userPath, 'specs'),
34
+
components:'./**/*.js'
35
+
}
36
+
}
23
37
};
24
38
```
25
39
26
40
See Configuration section below for the list of available options.
27
41
28
-
Add these scripts to your `package.json`:
29
-
30
-
```json
31
-
"scripts": {
32
-
"styleguide-server": "styleguidist server",
33
-
"styleguide-build": "styleguidist build"
34
-
},
35
-
```
36
-
37
-
And run `npm run styleguide-server` to start styleguide dev server.
38
-
39
42
## Documenting components
40
43
41
-
Styleguidist generates documentation from 2 sources:
42
-
43
-
### PropTypes and component description
44
-
45
-
Components' `PropTypes` and documentation comments are parsed by the [react-docgen](https://github.com/reactjs/react-docgen) library. Have a look at [their example](https://github.com/reactjs/react-docgen#example) of a component documentation.
46
-
47
-
### Usage examples and further documentation
48
-
49
-
Examples are written in Markdown where any code blocks will be rendered as a react components. By default any `Readme.md` in the component folder is treated as an examples file but you can change it with the `getExampleFilename` option.
44
+
Examples are written in Markdown where any code blocks will be rendered as a react components. By default any `readme.md` in the component folder is treated as an examples file but you can change it with the `getExampleFilename` option.
50
45
51
46
```markdown
52
47
React component example:
53
48
54
-
<Button size="large">Push Me</Button>
49
+
```jsx
50
+
<Button size="large">Push Me</Button>
51
+
```
55
52
56
53
Any [Markdown](http://daringfireball.net/projects/markdown/):
57
54
@@ -62,14 +59,14 @@ Any [Markdown](http://daringfireball.net/projects/markdown/):
62
59
63
60
## Configuration
64
61
65
-
You can change some settings in the `styleguide.config.js`file in your project’s root folder.
62
+
Use SourceJS `options.js`for deep plugin configuration.
66
63
67
-
***`rootDir`**
68
-
Type: `String`, required
69
-
Your app’s frontend root folder (eg. `./lib`). Should not point to a folder with the Styleguidist config and`node_modules` folder.
64
+
***`rootDir`**
65
+
Type: `String`, required
66
+
Your components sources root folder (eg. `./lib`). Should not point to a folder with the `node_modules` folder.
70
67
71
-
***`components`**
72
-
Type: `String` or `Function`, required
68
+
***`components`**
69
+
Type: `String` or `Function`, required
73
70
- when `String`: a [glob pattern](https://github.com/isaacs/node-glob#glob-primer) that matches all your component modules. Relative to the `rootDir`.
74
71
- when `Function`: function that returns an array of modules.
75
72
@@ -89,44 +86,24 @@ You can change some settings in the `styleguide.config.js` file in your project
89
86
},
90
87
```
91
88
92
-
***`styleguideDir`**
93
-
Type: `String`, default: `styleguide`
94
-
Folder for static HTML style guide generated with `styleguidist build` command.
0 commit comments