👋 Support Styleguidist on Open Collective 👋
New features
Page per section 🚧
This is a huge improvement for large style guides: now you can show only one component at a page instead of all components.
To enable:
module.exports = {
pagePerSection: true
};This is an experimental feature and we need your feedback to make it better and really useful. For example, right now there’s no isolated mode. So feel free to share your ideas in issues.
(#835 by @bitionaire and @stepancar, closes #494 and #768)
“Fork me” ribbon
One more step to make Styleguidist usable for documenting open source projects:
New config option to enable the ribbon, define the URL and change the label:
module.exports = {
ribbon: {
url: 'http://example.com/',
text: 'Fork me on GitHub'
}
};And two new theme variables to change colors: color.ribbonBackground and color.ribbonText.
(#861 by @glebez and @wkwiatek, part of #195, closes #647)
Options to change CLI output on server start and build
Two new options, printServerInstructions and printBuildInstructions:
module.exports = {
printBuildInstructions(config) {
console.log(
`Style guide published to ${
config.styleguideDir
}. Something else interesting.`
);
}
};(#878 by @roblevintennis, closes #876)
Option to modify props
A new option, updateDocs to modify props before rendering. For example, you can load a component version number from a JSON file:
module.exports = {
updateDocs(docs) {
if (docs.doclets.version) {
const versionFilePath = path.resolve(
path.dirname(file),
docs.doclets.version
);
const version = require(versionFilePath).version;
docs.doclets.version = version;
docs.tags.version[0].description = version;
}
return docs;
}
};(#868 by @ryanoglesby08)
Limited support for named exports
Styleguidist used to require default exports for components. Now you can use named exports too, though Styleguidist still supports only one component per file. I hope this change will make some users happier, see more details in the docs.
(#825 by @marcdavi-es, closes #820 and #633)
Allow arrays of component paths in sections
More flexibility in structuring your style guide:
module.exports = {
sections: [
{
name: 'Forms',
components: [
'lib/components/ui/Button.js',
'lib/components/ui/Input.js'
]
}
]
};(#794 by @glebez, closes #774)
Sort properties by required and name attributes
This change should make props tables more predictable for the users. Instead of relying on developers to sort props in a meaningful way, Styleguidist will show required props first, and sort props in each group alphabetically.
To disable sorting, use the identity function:
module.exports = {
sortProps: props => props
};