Render a Section in Isolated mode

[Knorcedger]

Hello,

I noticed that while it is possible to open a Component in Isolated mode, that's not possible for a Section.

With a slight modification in index.js to provide a single Section and no Components for ReactDOM.render I was able to render just a Section.

I believe that this feature should have the same arrow that someone can see in each component to open in Isolated mode and a specific url (/#!/SECTION_NAME).

If you guys agree, I think I could work on a pull request to make this possible.

[okonet]

I can't see a use case for that, to be honest. What's your use case?

[Knorcedger]

@okonet
We are building a huge styleguide that will feature lots of components organised in different Sections. The styleguide will be a tool for colleagues of different backgrounds (lot's of them non-technical) that will be able to see and select the components they want to use in order to display the data they want to present to clients. Based on their needs, we want to guide them to a specific Section, and not show them every available component.

Additionally, we have lots of heavy components (HTML and SVG based) and the initial loading time on the browser can be longer that what we would want.

And finally, the scrolling from the first component to the last one is massive. Too much information on a single page.

[sapegin]

I think we need to improve routing than hacking a feature for developers ;-)

Show only the first section by default and and make links in the sidebar open sections in isolated mode.

[Knorcedger]

@sapegin
If I understand correctly you are suggesting a proper routing system that can display both components and sections in Isolated mode and maybe have even more features, right?

If that's the plan, I think I will create a fork for our needs for now, as I described in my initial comment, and will move back to the original styleguidist once the routing is implemented :)

[sapegin]

It’s not a plan you but something that would be nice to have. So any help is very appreciated ;-)

Would you mind sending a pull request with your changes?

[Knorcedger]

@sapegin Sure, I will work on this the next few days and will create the Pull Request :)

[okonet]

+1 for a better routing system. I think https://github.com/router5/router5 is worth looking at.

As for me, I still don't see a lot of value to render sections isolated. What I can imagine though is an introduction of "pages" that could be rendered separately (== isolated) using the better routing system. Each page could consist of "sections".

[sapegin]

Actually I have a use case for isolated sections: I have a UI guidelines page with complex examples of different UI patterns composed of many components. So I spend a lot of time writing examples on this page and it would be nice to have just this page in a browser and not the whole style guide.

[sapegin]

So if anyone wants to send a pull request for that it would be super cool ;-)

[Knorcedger]

@sapegin I'm working on this. Hopefully a PR will come in late next week :)

[sapegin]

@Knorcedger Awesome! 🍕

[Knorcedger]

Created a PR here #394

Need some help to run the tests, looks like react-addons-test-utils is no more.

[mshwery]

I agree that there are reasons one may want to display only one section (and/or component) at a time. This encapsulates the focus and provides visual boundaries to the documentation a user may care about at one time.

Many component libraries with a similar layout (sidebar navigation for sections & components) will only display one thing at a time. I think this could be exposed as a simple styleguide.config.js option.

This might be a request slightly different than what currently represents "isolated mode" since what I'm describing would include the navigation elements and the currently selected section or component documentation.

[n1313]

I have a potentially similar use case: I have a bunch of simple components and a smaller number of more complex components and currently I keep them separated in two sections of a single RSG document. I would very much like to be able to split it into two separate (but cross-linked in the sidebar) RSGs with separate bundle files.

[sapegin]

@n1313 So you want the sidebar to show a combined tree of two independent style guides?

[n1313]

This would be the perfect goal, yes. My team is considering splitting our big project into separate smaller packages and moving to a mono-repo structure, and having something that would allow developers to focus on one small thing at a time while being able to travel to another small thing reasonably quickly would be fantastic. At the moment the rough plan is to run separate styleguidist instances in each of the packages and create a "gateway" page that links all of them manually, which is kinda meh.

[chrisdrackett]

I also would love a way to show a single component at a time. We've run into the issue where our styleguide is so large that it won't even load unless you go directly to an isolated component.

[mshwery]

Sounds like a lot of people might benefit from a simple way to have more control over the router to help achieve this.

[n1313]

The question is not just about routing, this is about splitting a massive multi-megabyte js bundle into smaller chunks so that the browser doesn't die trying to parse it, and then either showing these chunks one by one or loading them on demand.

[mshwery]

You are right that it may not be solved wholly by routing, although that might be a logical split point for async on-demand bundles (when using webpack). Each route for a component or section would load it's bundle and the common/shared bundles.

splitting our big project into separate smaller packages and moving to a mono-repo structure

You are also right @n1313 that routing wouldn't necessarily solve anything for your goals, outright.

[sapegin]

Yeah, both features would be great (I’ll try to create an issue to track it and discuss possible implementation). I think proper routing would be the first step to achieve that.

[sapegin]

Here it is: #494 ;-)

[sapegin]

Was released in 5.3.0.