(complib) Add dev server for component docs

[mcous]

overview

This PR adds a live-reloading documentation + playground dev server to the components library. Uses react-styleguidist. To use it:

cd components
make install
make dev

To keep this PR a little smaller, I've only added documentation for Buttons and Icons, and intend to follow up with the rest in separate PRs.

Fixes #546

changelog

• (Chore) Add react-styleguidist-based dev server for component docs
• (Docs) Document Button, PrimaryButton, and Icon components

review requests

Try this out on your own machine! It's pretty cool. This PR also required refactoring of the Button components as discussed in #546, but I think they ended up in a better place, anyway. Just please make sure I didn't break the app or PD

[mcous]

So I noticed flow typechecking in PD failed in CI for some reason (which was super weird because I didn't touch PD) and realized:

• This is the same problem I mentioned in (app) Kickoff robot discovery on app launch #547
• It was caused by installing react-styleguidist

Some Googling led me to facebook/flow#2364. Turns out, react-styleguidist has a dependency called findup that has some empty json files in its test fixtures (which are not npm ignored). So what happens is:

• The flow server starts and tries to parse the JSON
  • These files were coincidentally ignored in app and complib, but not pd
  • Why is flow parsing node_modules in separate projects?
    • Saw this behavior in app and pd
    • Willing to bet it's because @opentrons/components is symlinked in
• Flow chokes on empty (i.e. malformed) JSON

To work around this, I added an ignore rule for JSON in node_modules. We should keep an eye on this in case it messes with @opentrons/components which is either inside or outside node_modules depending how symlinks are being followed.

[mcous]

Ugh, yup, pretty sure ignoring JSON under node_modules broke the Windows build. Removing "Ready for Review" until this is fixed

[codecov]

Codecov Report

Merging #555 into v3a will not change coverage.
The diff coverage is 100%.

@@           Coverage Diff           @@
##              v3a     #555   +/-   ##
=======================================
  Coverage   71.07%   71.07%           
=======================================
  Files         156      157    +1     
  Lines        5318     5318           
  Branches       89       89           
=======================================
  Hits         3780     3780           
  Misses       1508     1508           
  Partials       30       30

Impacted Files	Coverage Δ
components/src/icons/Icon.js	100% <ø> (ø)	⬆️
components/src/buttons/PrimaryButton.js	100% <100%> (ø)
components/src/buttons/Button.js	100% <100%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update d85f924...208796e. Read the comment docs.

[btmorr]

On Windows (cygwin) after make install, I run make dev and get this:

⇒  make dev
node_modules/.bin/cross-env NODE_ENV=development node_modules/.bin/styleguidist server
Error: Cannot find module 'extract-text-webpack-plugin'
Error: Cannot find module 'extract-text-webpack-plugin'
    at Function.Module._resolveFilename (module.js:536:15)
    at Function.Module._load (module.js:466:25)
    at Module.require (module.js:579:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\cygwin64\home\bmorr\opentrons\opentrons\app\webpack\rules.js:4:27)
    at Module._compile (module.js:635:30)
    at Object.Module._extensions..js (module.js:646:10)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)
    at Function.Module._load (module.js:489:3)
make: *** [Makefile:39: dev] Error 1

Not sure if it's my environment, but I did npm install extract-text-webpack-plugin and still got the same error.

[IanLondon]

works on Linux. Looks good! Any clues about why it fails on Windows?

Do you have any thoughts about deploying v3a/develop/master to S3 so design team can see it more easily without noodling around on the command line?

[mcous]

Do you have any thoughts about deploying v3a/develop/master to S3 so design team can see it more easily without noodling around on the command line?

@IanLondon I think that's the logical next step. I know Netlify has some great features for deploying static sites automatically based on branch names

[IanLondon]

Weird, extract-text-webpack-plugin only appears in app/ not in components/

I am getting linting errors in make test / make lint, but they are all "no-undef" and "no-unused-vars" about types, not the weird 0:0 error Parsing error: Cannot set property '0' of undefined null that Travis has

[mcous]

Given the weird issues we've been seeing here, I'm going to call this PR blocked by #576 because it really seems like lockfiles are misbehaving (missing dependency installs, etc)

[mcous]

With the latest version that uses yarn, I am able to run the dev server on Windows without problems!