Feat: Better anchors navigation with unique slugs #318

okonet · 2017-02-12T12:41:53Z

This PR:

Fixes anchors for sections with multiple words in name
Fixes the case when components or sections with the same name could not be resolved by anchor
Adds anchor navigation to the title of section/component

- Fixes anchors for sections with multiple words in name - Fixes the case when components or sections with same name could not be resolved by anchor - Adds anchor navigation to the tittle of section/component

codecov-io · 2017-02-12T12:52:34Z

Codecov Report

Merging #318 into next will increase coverage by 2.17%.
The diff coverage is 96.72%.

@@            Coverage Diff             @@
##             next     #318      +/-   ##
==========================================
+ Coverage   92.58%   94.75%   +2.17%     
==========================================
  Files          75       75              
  Lines         998      992       -6     
  Branches      203      201       -2     
==========================================
+ Hits          924      940      +16     
+ Misses         74       52      -22

Impacted Files	Coverage Δ
...omponents/ReactComponent/ReactComponentRenderer.js	`100% <ø> (ø)`	✅
...rc/rsg-components/StyleGuide/StyleGuideRenderer.js	`85.71% <ø> (ø)`	✅
...rc/rsg-components/ReactComponent/ReactComponent.js	`100% <100%> (ø)`	✅
src/rsg-components/Section/SectionRenderer.js	`100% <100%> (ø)`	✅
src/rsg-components/Section/Section.js	`100% <100%> (ø)`	✅
scripts/schemas/config.js	`96.96% <100%> (+0.09%)`	✅
src/rsg-components/Heading/HeadingRenderer.js	`100% <100%> (ø)`
.../rsg-components/TableOfContents/TableOfContents.js	`95.65% <100%> (ø)`	✅
loaders/utils/getExamples.js	`100% <100%> (ø)`	✅
loaders/utils/filterComponentsWithExample.js	`100% <100%> (ø)`	✅
... and 8 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 0d47028...476fea4. Read the comment docs.

tizmagik · 2017-02-13T00:35:58Z

This LGTM, although I wonder if the slug can be derived from name instead of requiring folks to explicitly define it? E.g. maybe it can be as simple as:

const genSlug = (name) => name.replace(/\s/g, '_').toLowerCase()

In most cases that should do it, maybe if there's special characters or something we can put in a regex for that, etc? Just a thought!

okonet · 2017-02-13T06:58:38Z

It is derived! Not sure what do you mean by explicitly requiring it.

sapegin

Thank you very much!

sapegin · 2017-02-13T08:00:23Z

src/utils/utils.js

@@ -16,6 +20,22 @@ export function setComponentsNames(components) {
 	return components;
 }

+export function setSlugs(sections) {


Probably better to extract this to a separate method like sectionSlugs to make its singletonnes more clear. Also completely hide slugger and export two methods: reset and slugifySections (since it’s not generic).

Can we do it in the styleguide-loader?

I’m thinking more about this: can we avoid singleton at all if we move it somewhere to utils/getSections.js. But I’m not sure I’d work and make code better?

Yes, that would be great. As a follow up question: do we even need to transform components and sections in the index.js? Can this also be moved to the loader's code?

react-styleguidist/src/index.js

Lines 28 to 36 in 808fd34

let components = processComponents(styleguide.components);

let sections = styleguide.sections;

// If root `components` isn't empty, make it a first section

if (components.length) {

sections.unshift({ components });

}

sections = processSections(sections);

Ideally index.js should not be concerned about it IMO.

Yeah, I think this can be moved to loader / simplified. The only things that should be done there is globalization and name intospection.

Hmm, why can't this also be done in the loader? Can we pass the reference to window to it to make it work from one place? I assume the loader isn't a part of API so we can just use imports-plugin for that, right?

You can communicate with a loader only via query parameters and loaders return JS code as a string.

sapegin · 2017-02-13T08:15:31Z

src/rsg-components/Heading/HeadingRenderer.js

+});
+
+export function HeadingRenderer({ classes, children, slug, hierarchy, ...props }) {
+	return React.createElement(`h${hierarchy}`, {


Any reason not to use JSX?

const Tag = `h${hierarchy}`; return ( <Tag>...</Tag> );

Additional variable allocation. Not even sure it's more readable. But sure, why not.

Yeah, it’s wasn’t a request to change, just my opinion ;-)

I tried and it actually looks better in code.

sapegin · 2017-02-13T08:32:12Z

src/rsg-components/Heading/HeadingRenderer.js

+	className: PropTypes.string,
+	classes: PropTypes.object.isRequired,
+	slug: PropTypes.string.isRequired,
+	hierarchy: PropTypes.oneOf([1, 2, 3, 4, 5, 6]).isRequired,


Maybe level would be a better name.

It is a better name indeed!

sapegin · 2017-02-13T21:42:44Z

Wow, this GitHub conflict merging really works! ;-)

n1313 · 2017-02-14T04:07:55Z

This doesn't bring any changes to public configurations, right?

okonet · 2017-02-14T08:44:46Z

Yes, no changes to config.

… name 1. Do not try to detect component name at runtime. 2. Remove nameFallback. 3. Put examples inside props. 4. Pass actual component name to default example instead of fallback. 5. Explicitly support only one component in props-loader. BREAKING CHANGE: handlers config option is now function instead of array.

okonet

I'm wondering if this should part of this PR? Seems a bit out of scope to me or what am I missing?

sapegin · 2017-02-17T09:46:04Z

@okonet You asked me to do that ;-)

[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

@n1313

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

@n1313

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

okonet added 3 commits February 10, 2017 16:43

Use <section> tag for sections

a59d20e

Style: Use describe in utils tests

73a0e16

Feat: Better anchors navigation with unique slugs

808fd34

- Fixes anchors for sections with multiple words in name - Fixes the case when components or sections with same name could not be resolved by anchor - Adds anchor navigation to the tittle of section/component

sapegin requested changes Feb 13, 2017

View reviewed changes

Merge branch 'next' into feat-heading-anchors

46d91af

okonet and others added 4 commits February 16, 2017 16:00

fixup! Feat: Better anchors navigation with unique slugs

087e648

Merge branch 'next' into feat-heading-anchors

92dbbd7

Test: Fix tests after merge

476fea4

okonet commented Feb 17, 2017

View reviewed changes

sapegin merged commit 468cf75 into next Feb 17, 2017

n1313 mentioned this pull request Mar 2, 2017

Hiding heading anchors breaks sidebar navigation #339

Closed

sapegin deleted the feat-heading-anchors branch March 2, 2017 15:58

konsumer mentioned this pull request Apr 18, 2019

Headers conflict with navigation link IDs #1342

Closed

snyk-bot mentioned this pull request Jul 10, 2020

[Snyk] Fix for 1 vulnerabilities Bhanditz/react-styleguidist#41

Open

snyk-bot mentioned this pull request Aug 17, 2020

[Snyk] Fix for 1 vulnerabilities Bhanditz/react-styleguidist#52

Open

snyk-bot mentioned this pull request Aug 28, 2020

[Snyk] Fix for 1 vulnerabilities Bhanditz/react-styleguidist#60

Open

Bhanditz mentioned this pull request Feb 23, 2021

[Snyk] Fix for 2 vulnerabilities Bhanditz/react-styleguidist#88

Open

Bhanditz mentioned this pull request Oct 19, 2022

[Snyk] Security upgrade react-docgen from 3.0.0-beta9 to 3.0.0 Bhanditz/react-styleguidist#160

Open

Bhanditz mentioned this pull request Apr 15, 2024

[Snyk] Fix for 1 vulnerabilities Bhanditz/react-styleguidist#214

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat: Better anchors navigation with unique slugs #318

Feat: Better anchors navigation with unique slugs #318

okonet commented Feb 12, 2017

codecov-io commented Feb 12, 2017 •

edited

Loading

tizmagik commented Feb 13, 2017

okonet commented Feb 13, 2017

sapegin left a comment

sapegin Feb 13, 2017

sapegin Feb 13, 2017 •

edited

Loading

okonet Feb 13, 2017 •

edited

Loading

sapegin Feb 13, 2017

okonet Feb 13, 2017 •

edited

Loading

sapegin Feb 13, 2017

sapegin Feb 13, 2017

okonet Feb 13, 2017

sapegin Feb 13, 2017

okonet Feb 13, 2017

sapegin Feb 13, 2017

okonet Feb 13, 2017

sapegin commented Feb 13, 2017 •

edited

Loading

n1313 commented Feb 14, 2017

okonet commented Feb 14, 2017

okonet left a comment

sapegin commented Feb 17, 2017

	let components = processComponents(styleguide.components);
	let sections = styleguide.sections;

	// If root `components` isn't empty, make it a first section
	if (components.length) {
	sections.unshift({ components });
	}

	sections = processSections(sections);

Feat: Better anchors navigation with unique slugs #318

Feat: Better anchors navigation with unique slugs #318

Conversation

okonet commented Feb 12, 2017

codecov-io commented Feb 12, 2017 • edited Loading

Codecov Report

tizmagik commented Feb 13, 2017

okonet commented Feb 13, 2017

sapegin left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sapegin Feb 13, 2017 • edited Loading

Choose a reason for hiding this comment

okonet Feb 13, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

okonet Feb 13, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sapegin commented Feb 13, 2017 • edited Loading

n1313 commented Feb 14, 2017

okonet commented Feb 14, 2017

okonet left a comment

Choose a reason for hiding this comment

sapegin commented Feb 17, 2017

codecov-io commented Feb 12, 2017 •

edited

Loading

sapegin Feb 13, 2017 •

edited

Loading

okonet Feb 13, 2017 •

edited

Loading

okonet Feb 13, 2017 •

edited

Loading

sapegin commented Feb 13, 2017 •

edited

Loading