Scope according to sections

[celiolatorraca]

Hi all!

First of all, thanks for this incredible lib! It is really making my life easier since I'm managing a UI toolkit for my company.

But, here is my question... Is there a way to scope the navigation according to sections?

My problem is that I have some components that have the same name (like a Button block component).

All my components are composed of a set of some block components.
Something like this:

├── components
│   ├── playkit-programs-list
│   │   └── src
│   │       ├── blocks
│   │       │   ├── button.js
│   │       │   ├── index.js
│   │       │   ├── map-programs-data.js
│   │       │   └── with-programs-data.js
│   │       ├── index.js
│   │       ├── programs-list.css
│   │       └── programs-list.js
├── libs
│   ├── playkit-buttons
│   │   └── src
│   │       ├── button.css
│   │       ├── button.js
│   │       ├── index.js
│   │       ├── outline-button.css
│   │       └── outline-button.js

But, when I click on Button link to see its documentation, react-styleguide filters components with the exact same name, but not scoped by the sections we build...

Do we have a way to get around it?

PS: I had to override the ComponentsListRenderer because it is still using the name as key, instead of filepath (as we can see here #33, I think you just changed the ComponentRenderer key prop isn't it?).

[sapegin]

I'm not sure there's an easy way to solve this. Right now all components are global (which isn't a good thing, a would be nice to fix that — #325).

As a workaround (though ugly) you may try to require the right component in the example code.

PS: I had to override the ComponentsListRenderer because it is still using the name as key, instead of filepath (as we can see here #33, I think you just changed the ComponentRenderer key prop isn't it?).

According to blame it uses name for over a year, if it was ever different ;-) Feel free to send a PR to fix this.

[celiolatorraca]

Thanks for you help @sapegin !!

I'm not sure there's an easy way to solve this. Right now all components are global (which isn't a good thing, a would be nice to fix that — #325).

Indeed that is the problem!
For now, I did a workaround scopping all my blocks with the package name...
Something like:

PlaykitProgramsList_Button
PlaykitButtons_Button

But with that ugly workaround, I have to require my own components in examples as you said before...

As a workaround (though ugly) you may try to require the right component in the example code.

Di you know if there is a way to use ES6 in example?

Thanks!

[sapegin]

You can use ES6, except modules ;-) because Buble doesn't support them.