Improve single-component usage

[sapegin]

React Styleguidist could be awesome for documenting components, like this, but now it’s not.

• [x] New option to disable sidebar.
• [x] New option, getComponentName(), to change the title. @visibleName JSDoc tag — #933
• [x] “Fork me” ribbon with customisable URL.
• [ ] New option to hide isolated link (needs discussion).
• [x] Hide path line if it’s empty.

Anything else? Any feedback?

[natearn]

Is this change still desired? I'd like to contribute and I'm looking for an easy place to start.

[sapegin]

@natearn Yes, please do it! Feel free to ping me on Gitter if you have any questions ;-)

[snmslavk]

@sapegin Hi, where do you want to add this "fork me" ribbon?

Hide path line if it’s empty.

I think it's done, could we make this checkbox checked?

[sapegin]

@snmslavk I think a new option in style guide config would work:

ribbon: {
  url: 'http://example.com/',
  text: 'Fork me on GitHub', // Default if the ribbon option passed
  color: '#fff', // Default if the ribbon option passed
  background: '#24292e' // Default if the ribbon option passed
}

You can use this CSS as a starting point:

https://github.com/sapegin/social-likes-next/blob/7018e8d51c05853eb04b437d8fce7bc0a34a663e/gh-pages/gh-pages.styl#L97-L123

[M-ZubairAhmed]

@sapegin are all tasks done? if not i would like to pick one

[sapegin]

@M-ZubairAhmed Only checked ones are done. And there’s an abandoned PR for the ribbon.

[kizu]

What I would love to have is to have some way to configure example both per example (maybe in a way the static keyword is done? i.e. in the first line after the language), and per section (so we could have one style of example in one part of docs, and another — at another).

Things I would like to configure:

1. The default state of the example: if the code is visible or folded. Right now we can control this option only globally.
2. To have some layouts to choose from: the current one, with full-width code, the side-by-side (see how it looks like there: http://kizu.ru/bemto-components/#html-structure), or in some other way.
3. I'd like to have a way to demonstrate generated code for the example in some way, like, the HTML you'd see in the browser's devtools.
4. I would like to not wrap multiple components with a wrapper all the time: when you need some items, it is kinda frustrating to have those empty <div>s.

[sapegin]

1. You can do it with showCode modifier, or { "showCode": false }.

2. Any ideas on the API?

3. That’s for plugins ;-)

4. It would be very hard to get rid or them, if possible. What’s the issue here?

[kizu]

1. Was that mentioned somewhere in the docs? If so, I have completely missed it :) Also, are all of the options that are available for configuration in styleguid.config.js could be used this way or just a subset?

2. Hmm, I'd need to think more about it, but it would be nice to have a way to register the different layout components as an object with different keys probably? And then use them as value of a new layout option?

3. Proooobably, yeah.

4. Just minor annoyance that when you need to have side-by-side comparison of two components in one example, right now we need to use that <div></div> that would be there in the CODE. What are the difficulties there? I think React allows to return arrays of components, and if you'd write an example like this:

   [
     <strong>aaa</strong>,
     <em>bbb</em>
   ]

   If would render it without problem. So maybe there'd be a way to either wrap examples that return multiple components in arrays? As they don't work already, I don't think it would break anything if some of the examples that throw error now would actually render sometimes :)

[sapegin]

1. Looks like no :-( Would be nice to fix that.

2. Yeah, something like that may work, we need to try something. Maybe something similar to CSS Grids? Not sure will be easy to use or implement ;-)

3. I’m going to release the very first draft to 6.1.0. It will be almost useless, but you’ll be able to try and tell me what’s missed ;-)

4. Do you mean a div that you have to use in examples to wrap multiple components or divs that Styleguidist adds around your examples (there are two or three of them)? If you mean the former than we can fix that but we’ll have to think about backward compatibility with React 15 because returning arrays is a new feature of React 16.

[catherinefromont]

Hi there, I would love to try and fix this issue, how did everyone else go about fixing it?

[sapegin]

@catherinefromont That’s awesome! But I’m not sure what exactly are you asking. Do you have question about specific task?

[glebez]

Hey, I wanna try to go on with this issue. Can you explain a little more on the "New option, getComponentName(), to change the title." part? What is the general idea behind it? Or if that has already been discussed somewhere, be so kind to point me in that direction. Thanks!

[sapegin]

@glebez The general idea is to be able to show anything instead of an actual component name in the style guide UI. I think #868 could be the first step, and the we'll need to split displayName into two properties: actual component name, and name visible in the UI. So probably we don't need a separate option for that, but we'll still need to do some refactoring.

[Dishantydv7]

@sapegin Hey are all the issues resolved , If that's not the case , i would love to work on some