Releases: styleguidist/react-styleguidist
2.0.0
Here is a list of changes since 1.3.2 (changes since 2.0.0-rc6: fixed npm2 compatibility, removed rootDir, added assetsDir, no params are passed to components function).
Breaking changes
No default Webpack loaders for your project’s code
Now you need to explicitly specify all Webpack loaders for your project’s code in styleguide.config.js
:
module.exports = {
// ...
updateWebpackConfig: function(webpackConfig, env) {
var sourceDir = path.resolve(__dirname, 'src'); // Affect only your project’s files
webpackConfig.module.loaders.push(
// Babel (will use your project’s .babelrc)
{
test: /\.jsx?$/,
include: sourceDir,
loader: 'babel'
},
// Sass
{
test: /\.scss$/,
include: sourceDir,
loader: 'style!css!sass?precision=10'
}
);
return webpackConfig;
}
};
Your project’s .babelrc
will not affect Styleguidist, only the loaders you define in styleguide.config.js
.
When you run dev-server NODE_ENV
is set to development
so if you use React Transform hot module replacement it will be enabled for your components. Otherwise you need to set it up manually. When you build style guide NODE_ENV
is set to production
.
This change should reduce the number of conflicts between your code and Styleguidist’s.
Babel 6
Babel 6 is required now.
No rootDir
config option
component
option is now relative to config file location.
// 1.3.2
module.exports = {
rootDir: './lib',
components: './components/**/*.js',
// ...
};
// 2.0.0
module.exports = {
components: './lib/components/**/*.js',
// ...
};
No params are passed to components
function
Less magic, just use your own glob:
// 1.3.2
module.exports = {
// ...
components: function(config, glob) {
return glob.sync(config.rootDir + '/components/**/*.js').filter(function(module) {
return /\/[A-Z]\w*\.js$/.test(module);
});
}
};
// 2.0.0
var path = require('path');
var glob = require('glob');
module.exports = {
// ...
components: function() {
return glob.sync(path.resolve(__dirname, 'lib/components/**/*.js')).filter(function(module) {
return /\/[A-Z]\w*\.js$/.test(module);
});
}
};
Code examples without React playground
If you define a fenced code block with a language flag like this:
```javascript
import React from 'react';
```
it will be rendered as a regular Markdown code snippet:
import React from 'react';
New features
assetsDir
config option. Serve this directory as static in dev-server, you can access any files at/
.
Other changes
Fixes
2.0.0-rc6
Breaking changes
Render fenced blocks with language flag as regular Markdown code snippets.
If you define a fenced code block with a language flag like this:
```javascript
import React from 'react';
```
it will be rendered as a regular Markdown code snippet:
import React from 'react';
Fixes
- Do not escape inline code blocks (#71).
2.0.0-rc5
2.0.0-rc4
Breaking changes
Now you need to explicitly specify all Webpack loaders for your project’s code in styleguide.config.js
:
module.exports = {
// ...
updateWebpackConfig: function(webpackConfig, env) {
var sourceDir = path.resolve(__dirname, 'src');
webpackConfig.module.loaders.push(
// Babel (will use your project’s .babelrc)
{
test: /\.jsx?$/,
include: sourceDir,
loader: 'babel'
},
// Sass
{
test: /\.scss$/,
include: sourceDir,
loader: 'style!css!sass?precision=10'
}
);
return webpackConfig;
}
};
Your project’s .babelrc
will not affect Styleguidist, only the loaders you define in styleguide.config.js
.
When you run dev-server NODE_ENV
is set to development
so if you use React Transform hot module replacement it will be enabled your components. Otherwise you need to set it up manually. When you build style guide NODE_ENV
is set to production
.
This is a big change so I’m looking forward for your feedback.
Other changes
- Remove postcss to reduce possible conflicts with project’s code: postcss-loader would share plugins.
- Fallback to file name or folder name if component name can’t be detected in runtime (#84).
2.0.0-rc3
2.0.0-rc2
2.0.0-rc
Breaking changes
Babel 6
(#81 by @oliverturner)
Custom Babel environment
- Set
NODE_ENV
todevelopment
orproduction
. - Set
BABEL_ENV
tostyleguidist
orproduction
. Move hot reload config intostyleguidist
environment to prevent collisions with project’s Babel configuration (#58).
Other changes
- react-docgen updated to 2.7.0 that support flow proptypes (#79 by @codemix).
- Serve root directory as static in dev-server (so you can access any files inside the root directory).
Please try it and report any issues or ideas how to improve it.
1.3.2
1.3.1
1.3.0
New features
Per examples state
Each example has its own state that you can access at the state
variable and change with the setState
function. Default state is {}
.
<div>
<button onClick={() => setState({isOpen: true})}>Open</button>
<Modal isOpen={state.isOpen}>
<h1>Hallo!</h1>
<button onClick={() => setState({isOpen: false})}>Close</button>
</Modal>
</div>
Related issue: #45.
Ability to style a style guide
Now you can change almost any piece of a style guide. For example you can change a font and a background color:
.ReactStyleguidist-common__font {
font-family: "Comic Sans MS", "Comic Sans", cursive;
}
.ReactStyleguidist-colors__base-bg {
background: hotpink;
}
More in the docs.
Related issue: #32
Other new features
- Table of contents (#28).
- Ability to use Markdown in components and props descriptions (#32).
PropTypes.shape
support (#20).- Ability to change path line via
getComponentPathLine
option (#41).
Bug fixes
- Improved styles isolation: Styleguidist styles should not interfer with your components styles.
- Removed sanitize.css that causes a lot of problems with component styles.
- Fixed issue when using components with the same names as component in Styleguidist.
Other changes
- Use markdown-it and Markdown React instead of Marked.
- A lot of documentation improvements and new examples in the demo style guide.