Ability to not document components vs ability to ignore components

[AoDev]

Hello,

I'd like to make a difference between component I want to ignore completely vs not documenting them. Some components are "helpers" or "private" components. I'd like to be able to use them in code examples without documenting them.

But, I still need styleguide to load them which is not possible with the current ignore option and so the application will throw an error.

Other use case and way to think about it: how can I make some components available in the whole documentation so that they can be used in code examples, without documenting them?

[sapegin]

There’s no ignore option (#11) yet. What option do you mean?

[AoDev]

Right now it's possible to ignore them through the config.
edit: Sorry I pressed enter before pasting more of the config. It's in the sections for example.

sections: [
{name: 'React Components', components: function () {
    return glob
      .sync(path.resolve(FRAMEWORK_DIR, 'components', '**/*.js'))
      .filter(function shouldBeDocumented (module) {
        return (module.search(/someregex/) === -1)
      })
}}
...
]

[sapegin]

Then two options:

1. Use skipComponentsWithoutExample instead of filtering components.
2. require modules you need in examples.

Update: I was wrong about the first option: these components would be ignored.

[sapegin]

Please check the docs updates in the previous commit: I’ve added some examples.

[AoDev]

Regarding point 2. I am not able to import modules in the examples. Maybe it works through modules inside node_modules that are resolved by webpack but if I want to import a "local" module then, how?

Here is an example: in our docs, I've created a FakeBrowser component.

The way I've found to make it work is to

• include it in the styleguide as a separate section.
• play with CSS so that the last section is hidden

Like this:

section config (last section)

  {name: 'Docs components', components: function () {
    return glob
      .sync(path.resolve(FRAMEWORK_DIR, 'docs', 'components-for-docs', '**/*.js'))
      .filter(shouldBeDocumented)
  }}

// Hide the sections of components created for the docs
// We don't want people to see them
.ReactStyleguidist-TableOfContents__root >
.ReactStyleguidist-TableOfContents__list > li:last-child,
.ReactStyleguidist-Section__root:last-child {
  display: none;
}

.docs-fake-browser {
...
}

This is just an example. There are various different cases where I need components to be available to use in examples without them being documented, like private "helper components".

[mik01aj]

FYI: import statements are unfortunately not supported because PR #104 didn't make it to master branch. But oldschool ES5 require should work.