Feat: Add showSidebar config option #310
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Added docs. Added schema and loader `showSidebar` option. Added tests for all use cases.
Codecov Report@@ Coverage Diff @@
## next #310 +/- ##
==========================================
+ Coverage 91.76% 91.78% +0.02%
==========================================
Files 70 70
Lines 959 962 +3
Branches 192 195 +3
==========================================
+ Hits 880 883 +3
Misses 79 79
Continue to review full report at Codecov.
|
|
Awesome! Thank you! 🦄 |
sapegin
added a commit
that referenced
this pull request
Mar 31, 2017
[link to medium article]() ## Highlights 1. create-react-app support out of the box. 2. New webpack configuration options + user config auto load. ## Breaking changes ### create-react-app support Now Styleguidst works with [create-react-app](https://github.com/facebookincubator/create-react-app) even without config. It will load components from `src/components/**/*.js`. And example files from `Component/Readme.md` or `Component/Component.md`. ### User webpack config auto load By default Styleguidist will try to find `webpack.config.js` in your project’s root directory and use it. If your webpack config is located somewhere else, you need to load it manually: ```javascript module.exports = { webpackConfig: require('./configs/webpack.js') }; ``` > **Note:** `entry`, `externals`, `output`, `watch`, `stats` and `devtool` options will be ignored. > **Note:** `CommonsChunkPlugins`, `HtmlWebpackPlugin`, `UglifyJsPlugin`, `HotModuleReplacementPlugin` plugins will be ignored because Styleguidist already includes them or they may break Styleguidist. > **Note:** Babelified webpack configs (like `webpack.config.babel.js`) are not supported. We recommend to convert your config to native Node — Node 6 supports [many ES6 features](http://node.green/). ### Easier webpack configuration With the new [webpackConfig](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#webpackconfig): ```javascript 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', }, ], }, }, }; ``` See the new [webpack configuration guide](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Webpack.md) for more examples. Also: * `include`/`exclude` options in you webpack loaders are no longer required. * JSON loader will be added automatically if needed. ### No global Lodash in examples Lodash will not be available in examples as `_`. You can load function you need with the new [context](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#context) option: ```javascript module.exports = { context: { forEach: 'lodash/forEach', map: 'lodash/map', }, }; ``` Or replicate previous behavior though it’s not recommended: ```javascript module.exports = { context: { _: 'lodash', }, }; ``` ### Use JSS for styling instead of CSS Modules Use config option [theme](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#theme) to change fonts, colors, etc. and option [styles](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#styles) to tweak style of particular Styleguidist’s components: ```javascript 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](http://cssinjs.org/) under the hoood. ### New default config options * `components`: `src/components/**/*.js` * `getExampleFilename`: `Component/Readme.md` or `Component/Component.md` * `title`: `<app name from package.json> Style Guide` ### New default dev-server port Default port is now 6060 because create-react-app uses 3000 too. ### Use findAllExportedComponentDefinitions as a default resolver Fixes #260. ### Drop npm2 support ## Other changes and new features * New config option [require](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#require) to add new webpack entries like polyfills and custom styles * New config option [ignore](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#ignore) to exclude components from the style guide. * New config option [showSidebar](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#showsidebar) (#310) * Ignoring props with `@ignore` JSDoc tag (#353) * `objectOf` propType support (#347) * `updateWebpackConfig` option was renamed to `dangerouslyUpdateWebpackConfig` and should be used in very rare cases when `webpackConfig` isn’t enough * Style guide config validation * Reduced build size ## Bug fixes * Path for `template` config option should be relative to style guide config (#211) * Do not show isolated links on Markdown examples (#251) * Show function PropType.func’s source in a tooltip (#343) * Escape and highlight code in Markdown in descriptions (#284) * Do not change level of Markdown headings (#329) * Search should work for subsections (#245) * Better anchors navigation with unique slugs (#318) * User’s html-loader should not affect Styleguidist (#312) * Show webpack build errors and warnings * Exit with error code when build fails * Show error when no components found on style guide start * Do not fail when one of the files doesn’t export a component --- https://github.com/n1313 https://github.com/okonet https://github.com/kof
sapegin
added a commit
that referenced
this pull request
Mar 31, 2017
Huge thanks to @n1313, @okonet and @kof for help with this release! ## Highlights 1. create-react-app support out of the box. 2. New webpack configuration options + user config auto load. ## Breaking changes ### create-react-app support Now Styleguidst works with [create-react-app](https://github.com/facebookincubator/create-react-app) even without config. It will load components from `src/components/**/*.js`. And example files from `Component/Readme.md` or `Component/Component.md`. ### User webpack config auto load By default Styleguidist will try to find `webpack.config.js` in your project’s root directory and use it. If your webpack config is located somewhere else, you need to load it manually: ```javascript module.exports = { webpackConfig: require('./configs/webpack.js') }; ``` > **Note:** `entry`, `externals`, `output`, `watch`, `stats` and `devtool` options will be ignored. > **Note:** `CommonsChunkPlugins`, `HtmlWebpackPlugin`, `UglifyJsPlugin`, `HotModuleReplacementPlugin` plugins will be ignored because Styleguidist already includes them or they may break Styleguidist. > **Note:** Babelified webpack configs (like `webpack.config.babel.js`) are not supported. We recommend to convert your config to native Node — Node 6 supports [many ES6 features](http://node.green/). ### Easier webpack configuration With the new [webpackConfig](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#webpackconfig): ```javascript 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', }, ], }, }, }; ``` See the new [webpack configuration guide](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Webpack.md) for more examples. Also: * `include`/`exclude` options in you webpack loaders are no longer required. * JSON loader will be added automatically if needed. ### No global Lodash in examples Lodash will not be available in examples as `_`. You can load function you need with the new [context](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#context) option: ```javascript module.exports = { context: { forEach: 'lodash/forEach', map: 'lodash/map', }, }; ``` Or replicate previous behavior though it’s not recommended: ```javascript module.exports = { context: { _: 'lodash', }, }; ``` ### Use JSS for styling instead of CSS Modules Use config option [theme](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#theme) to change fonts, colors, etc. and option [styles](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#styles) to tweak style of particular Styleguidist’s components: ```javascript 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](http://cssinjs.org/) under the hoood. ### New default config options * `components`: `src/components/**/*.js` * `getExampleFilename`: `Component/Readme.md` or `Component/Component.md` * `title`: `<app name from package.json> Style Guide` ### New default dev-server port Default port is now 6060 because create-react-app uses 3000 too. ### Use findAllExportedComponentDefinitions as a default resolver Fixes #260. ### Drop npm2 support ## Other changes and new features * New config option [require](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#require) to add new webpack entries like polyfills and custom styles * New config option [ignore](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#ignore) to exclude components from the style guide. * New config option [showSidebar](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#showsidebar) (#310) * Ignoring props with `@ignore` JSDoc tag (#353) * `objectOf` propType support (#347) * `updateWebpackConfig` option was renamed to `dangerouslyUpdateWebpackConfig` and should be used in very rare cases when `webpackConfig` isn’t enough * Style guide config validation * Reduced build size ## Bug fixes * Path for `template` config option should be relative to style guide config (#211) * Do not show isolated links on Markdown examples (#251) * Show function PropType.func’s source in a tooltip (#343) * Escape and highlight code in Markdown in descriptions (#284) * Do not change level of Markdown headings (#329) * Search should work for subsections (#245) * Better anchors navigation with unique slugs (#318) * User’s html-loader should not affect Styleguidist (#312) * Show webpack build errors and warnings * Exit with error code when build fails * Show error when no components found on style guide start * Do not fail when one of the files doesn’t export a component
sapegin
added a commit
that referenced
this pull request
Mar 31, 2017
Huge thanks to @n1313, @okonet and @kof for help with this release! ## Highlights 1. create-react-app support out of the box. 2. New webpack configuration options + user config auto load. ## Breaking changes ### create-react-app support Now Styleguidst works with [create-react-app](https://github.com/facebookincubator/create-react-app) even without config. It will load components from `src/components/**/*.js`. And example files from `Component/Readme.md` or `Component/Component.md`. ### User webpack config auto load By default Styleguidist will try to find `webpack.config.js` in your project’s root directory and use it. If your webpack config is located somewhere else, you need to load it manually: ```javascript module.exports = { webpackConfig: require('./configs/webpack.js') }; ``` > **Note:** `entry`, `externals`, `output`, `watch`, `stats` and `devtool` options will be ignored. > **Note:** `CommonsChunkPlugins`, `HtmlWebpackPlugin`, `UglifyJsPlugin`, `HotModuleReplacementPlugin` plugins will be ignored because Styleguidist already includes them or they may break Styleguidist. > **Note:** Babelified webpack configs (like `webpack.config.babel.js`) are not supported. We recommend to convert your config to native Node — Node 6 supports [many ES6 features](http://node.green/). ### Easier webpack configuration With the new [webpackConfig](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#webpackconfig): ```javascript 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', }, ], }, }, }; ``` See the new [webpack configuration guide](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Webpack.md) for more examples. Also: * `include`/`exclude` options in you webpack loaders are no longer required. * JSON loader will be added automatically if needed. ### No global Lodash in examples Lodash will not be available in examples as `_`. You can load function you need with the new [context](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#context) option: ```javascript module.exports = { context: { forEach: 'lodash/forEach', map: 'lodash/map', }, }; ``` Or replicate previous behavior though it’s not recommended: ```javascript module.exports = { context: { _: 'lodash', }, }; ``` ### Use JSS for styling instead of CSS Modules Use config option [theme](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#theme) to change fonts, colors, etc. and option [styles](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#styles) to tweak style of particular Styleguidist’s components: ```javascript 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](http://cssinjs.org/) under the hoood. ### New default config options * `components`: `src/components/**/*.js` * `getExampleFilename`: `Component/Readme.md` or `Component/Component.md` * `title`: `<app name from package.json> Style Guide` ### New default dev-server port Default port is now 6060 because create-react-app uses 3000 too. ### Use findAllExportedComponentDefinitions as a default resolver Fixes #260. ### Drop npm2 support ## Other changes and new features * New config option [require](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#require) to add new webpack entries like polyfills and custom styles * New config option [ignore](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#ignore) to exclude components from the style guide. * New config option [showSidebar](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#showsidebar) (#310) * Ignoring props with `@ignore` JSDoc tag (#353) * `objectOf` propType support (#347) * `updateWebpackConfig` option was renamed to `dangerouslyUpdateWebpackConfig` and should be used in very rare cases when `webpackConfig` isn’t enough * Style guide config validation * Reduced build size ## Bug fixes * Path for `template` config option should be relative to style guide config (#211) * Do not show isolated links on Markdown examples (#251) * Show function PropType.func’s source in a tooltip (#343) * Escape and highlight code in Markdown in descriptions (#284) * Do not change level of Markdown headings (#329) * Search should work for subsections (#245) * Better anchors navigation with unique slugs (#318) * User’s html-loader should not affect Styleguidist (#312) * Show webpack build errors and warnings * Exit with error code when build fails * Show error when no components found on style guide start * Do not fail when one of the files doesn’t export a component
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR adds a new configuration option
showSidebar. If set tofalsesidebar will never appear. By default it is set totrueto preserve the original behavior.Additionally, this PR refactors:
isolatedComponentpropsidebar->isolatedComponentsidebar->hasSidebarsingleExample->isolatedExample