Add storybook+theme-ui for the new design

[walaura]

This PR adds storybook and theme-ui to support the development of the redesign. there's some WIP components in new-components but they are more to test that storybook actually works than actual components at this stage so don't look at 'em too much.

this is how this looks like:

[acao]

merged #1107 and a few dependabot PRs, but it looks like its just a minor yarn.lock conflict here!

[walaura]

we good on this end!

[acao]

@walaura so do you want to add this to the netlify build? you’ll just want to add build-storybook to a new “build-demo” script in “packages/graphiql” that builds to somewhere like packages/graphiql/storybook (will need to be gitignored). Then netlify will build it as the last step. Then yoll be able to see it in the deploy preview on each commit

[codecov]

Codecov Report

Merging #1145 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master    #1145   +/-   ##
=======================================
  Coverage   46.22%   46.22%           
=======================================
  Files          64       64           
  Lines        3003     3003           
  Branches      650      650           
=======================================
  Hits         1388     1388           
  Misses       1363     1363           
  Partials      252      252

---

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 e90f243...e16a318. Read the comment docs.

[acao]

eyyyyy
https://deploy-preview-1145--graphiql-test.netlify.com/storybook/

looking nice!

[walaura]

yasss!!! whats shall we do about codecov? I can do snapshots for the components as they are now but I really don't think they'll last more than 2 PRs

[acao]

good question! i think we can exclude stories and the theme from coverage. as for components, snapshots make sense. codecov is annoying sometimes haha

[walaura]

@acao anything i should do on my end to make that happen?

[acao]

as for excluding coverage, you can just add more lines with exclamation points to the jest.config.js
for snapshots, there seems to be a few guides to using storybook 2 with jest snapshot testing, but also some RTL tests sound good if that makes sense? there is so little to test yet, haha

[walaura]

really can't imagine a use for real tests right now so what i can do is we either ignore this or I can delete some of the scrap components?

[acao]

lets just ignore all of new components and everything storybook related in the jest config. i agree this is where blocking on coverage seems unnecessary. also if its ready i can merge it anyways after doing a quick review?

[walaura]

yes! go for it ^^ i added snaps and blocked the theme and stories from coverage so this last build might actually go green. if it doesn't feel free to ignore the whole folder for now?

[acao]

ah, so close! can you just tweak that one jest config line to ignore the whole new-components for now? if not I can still force merge and create another PR to ignore the folder since I can't commit to this one

[acao]

oh also some kinda funky bug:

strange because there is definitely a theme.colors.border... hmm!

[walaura]

ooooh, gotta add the context inside the testing scaffold i guess! lemme figure this out on monday. also find out where's the 'allow contributors to push' checkbox

[walaura]

oh yeah you should be good to edit?

[acao]

oh awesome! thank you! i didnt know about that, handy! would you like me to take care of that today? jest ignore and context? monday is fine too, whatever’s clever

…

On Sun, Dec 22, 2019 at 12:43 PM Laura buns ***@***.***> wrote: oh yeah you should be good to edit? [image: Screenshot 2019-12-22 at 17 42 48] <https://user-images.githubusercontent.com/11539094/71325286-7f968080-24e2-11ea-8393-38b502a54e7e.png> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1145?email_source=notifications&email_token=AAKOFF6F2NEARXEVYVV6MHLQZ6RKRA5CNFSM4J6GQXC2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEHPV22Q#issuecomment-568286570>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAKOFF7ENUCQ6OA355IZX43QZ6RKRANCNFSM4J6GQXCQ> .

[walaura]

oh awesome! thank you! i didnt know about that, handy! would you like me to take care of that today? jest ignore and context? monday is fine too, whatever’s clever
…

kinda wanna look at context in tests myself! never done it before and i'm curious to see how jest handles this idiomatically. So I guess yeah let's do it on Monday!

[acao]

awesome, yeah have at it! there’s no huge rush. will be awesome if we can set some patterns for that, as we will have a few more contexts on the way soon! ill be around, let me know how it goes, I’ll be available here or on discord! thanks for helping! hope youve had a lovely weekend!

…

On Sun, Dec 22, 2019 at 9:20 PM Laura buns ***@***.***> wrote: oh awesome! thank you! i didnt know about that, handy! would you like me to take care of that today? jest ignore and context? monday is fine too, whatever’s clever … <#m_-4030061102289614228_> kinda wanna look at context in tests myself! never done it before and i'm curious to see how jest handles this idiomatically. So I guess yeah let's do it on Monday! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1145?email_source=notifications&email_token=AAKOFF2IJHUUM5NT2XPYAILQ2AN6NA5CNFSM4J6GQXC2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEHQAVEI#issuecomment-568330897>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAKOFF3A5V2GFQXOFYYBTHLQ2AN6NANCNFSM4J6GQXCQ> .

[acao]

Looks great for getting things set up!