Split docs into pages, update examples and other details

[silvenon]

Hi! This is a work in progress, but I'm opening it now to start a discussion. Basically I would like to help a lot with the documentation. My idea would be to first split the documentation into separate pages so it's easier to navigate. Afterwards I would like to improve some examples and recommend using CSSTransition instead of Transition for animating CSS properties because of the reflow hack, I wrote a blog post about it because I noticed quite a few of issues like this one.

Here's a preview of what I got so far.

I also wanted to update the development environment:

• I renamed .eslintrc files to .eslintrc.yml to get syntax highlighting (they were already written in YAML)
• I fixed some ESLint errors and added some more based on conventions of the existing code
• more changes to come to make development and contribution easier

What do you think?

[jquense]

Hey this is awesome! Thanks for taking the time to work on this. I think your plan sounds great

[silvenon]

Great! Would you be ok if I potentially switched Bootstrap with Semantic UI? The reason I'm asking is primarily because we have to add tons of classes and other attributes which could otherwise be abstracted away, for example look at the code required for one toggle button for mobile navigation:

<button className='navbar-toggler' type='button' data-toggle='collapse' data-target='#navbarSupportedContent' aria-controls='navbarSupportedContent' aria-expanded='false' aria-label='Toggle navigation'>
  <span className='navbar-toggler-icon' />
</button>

Also, we would need to add global jQuery for any JS functionality, like the toggle button above.

[jquense]

I'm not familiar with semantic ui other than I know it's a ui library, I am a maintainer if react-bootstrap tho so I'm a lot more familiar with it.

Are we using RB here it did I just slap on normal bootstrap? RB should equally abstract a lot a way, including many a11y bits

[silvenon]

We currently have normal Bootstrap. I initially went for your react-bootstrap, but it uses Bootstrap 3, understandably, because v4 isn't stable yet. However, Bootstrap 3 looks… old. 😅😅😅 Would you be ok with reactstrap which implements Bootstrap 4? React Transition Group's documentation is a really simple site, so I don't think we can go wrong here, I just want to make the code as readable as possible while keeping the same look.

[jquense]

I here that, however as it's a docs page I think we should optimize for maintainability and thats best achieved for me by using react-bootstrap and maybe some css tweaks on the style, all things being equal :)

[silvenon]

You're right! I realized how silly I was, I'll switch to React Bootstrap and send you and update soon.

[silvenon]

Done! It's not perfect, but it should be much clearer and easier to navigate now. Examples now use react-bootstrap and are more complex.

I strongly recommend forking my CodeSandbox examples into your own account and updating <iframe> URLs, to ensure stability.

[jquense]

awesome! thanks so much

[jquense]

this is a really great note, i've wanted to add for a while. It might be off tho in the Transition component, since that's the one folks use incorrectly all the time, so may be likely to see it.

I'd also smooth the recommendation out a bit. I think it is ok and often appropriate to use Transition directly for css animations, but it's fraught if you don't know what you're doing. It might be worth noting that this is a common problem, and if you wnat to use Transtion you need to work around it, or use CSSTransition if it fits your needs.

[silvenon]

Good point. I modified it a bit and added it to Transition page instead.

[jquense]

thanks a ton!