npm install react-styleguidist@5.0.0-beta-8`
This release incorporates a lot of rethinking and rewriting. But most of the changes was done to make initial configuration easier.
- New Webpack configuration options + user config auto load.
- create-react-app support out of the box.
By default React Styleguidist will try to find Webpack config (webpack.config.dev.js
or webpack.config.js
) anywhere in your project and use it.
There’s the new webpackConfigFile option to specify a custom path:
module.exports = {
webpackConfigFile: './configs/webpack.js',
};
Note::
entry
,externals
andoutput
options will be ignored, usewebpackConfig
option to change them.
Note:: it may not work with your project, see below for other options.
Now Styleguidst works with create-react-app even without config.
It will load components from src/components/**/*.js
. And example file sfrom Component/Readme.md
or Component/Component.md
.
With the new webpackConfig:
module.exports = {
webpackConfig: {
module: {
loaders: [
// Babel loader, will use your project’s .babelrc
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
// Other loaders that is needed for your components
{
test: /\.css$/,
loader: 'style-loader!css-loader?modules',
},
],
},
},
};
You can also use loaders module if your project doesn’t use Webpack:
npm install --save-dev loaders
const loaders = require('loaders');
module.exports = {
webpackConfig: {
module: {
// Enable all loaders
loaders: loaders.all,
// OR only needed loaders
loaders: [
loaders.babel,
loaders.css,
loaders.json,
loaders.url,
// Other loaders for your style guide
],
},
},
};
include
/exclude
options in you Webpack loaders are no longer required.- JSON loader will be added automatically if needed.
Note: this option disables Webpack config auto load, use
webpackConfigFile
option to load your project’s Webpack config from file.
Lodash will not be available in examples as _
. You can load function you need with the new context option:
module.exports = {
context: {
forEach: 'lodash/forEach',
map: 'lodash/map',
},
};
Or replicate previous behavior though it’s not recommended:
module.exports = {
context: {
_: 'lodash',
},
};
Use config option theme to change fonts, colors, etc. and option styles to tweak style of particular Styleguidist’s components:
module.exports = {
theme: {
link: 'firebrick',
linkHover: 'salmon',
font: '"Comic Sans MS", "Comic Sans", cursive',
},
styles: {
Logo: {
logo: {
animation: 'blink ease-in-out 300ms infinite',
},
'@keyframes blink': {
to: { opacity: 0 },
},
},
},
};
We now use JSS under the hoood.
components
:src/components/**/*.js
getExampleFilename
:Component/Readme.md
orComponent/Component.md
title
:<app name from package.json> Style Guide
Fixes #260.
File an issue if you have a use case that isn’t covered by new options.
- Path for
template
config option should be relative to style guide config (#211) - Do not show isolated links on Markdown examples (#251)
- Escape and highlight code in Markdown in descriptions (#284)
- Show Webpack build errors and warnings
- Exit with error code when build fails
- Show error when no components found on style guide start
Nope, and I’m not really sure you can import this files since we’re not using babel. Would be nice if you can try if it works, so we at least know and document this. If we can’t find any solution.