[Hosted RN Storybook] Added addon for pairing device (with qr code).

[Gongreg]

Issue: If user has hosted react native storybook version, it needs to manually enter code to the phone to connect it to server.

This addon solves the issue by displaying qr code, so user can simply point the phone to it to pair.

What I did

Added new event when new channel is created. This addon listens to it and uses the pairedId code for qr component.

Example

https://expo.io/@gongreg/rn-storybook-hosted-client-example

Server: https://vast-eyrie-45947.herokuapp.com/ (takes ~30s to load because heroku shuts it down).

---

This change is 

[codecov]

Codecov Report

Merging #1639 into master will decrease coverage by 71.31%.
The diff coverage is 0%.

@@             Coverage Diff             @@
##           master    #1639       +/-   ##
===========================================
- Coverage    92.5%   21.18%   -71.32%     
===========================================
  Files           6      263      +257     
  Lines          40     5777     +5737     
  Branches        2      689      +687     
===========================================
+ Hits           37     1224     +1187     
- Misses          2     4029     +4027     
- Partials        1      524      +523

Impacted Files	Coverage Δ
addons/rn-pair/register.js	0% <0%> (ø)
addons/rn-pair/src/containers/QRCodePanel/index.js	0% <0%> (ø)
app/react-native/src/manager/provider.js	0% <0%> (ø)
addons/rn-pair/src/manager.js	0% <0%> (ø)
addons/rn-pair/src/components/QRCode/style.js	0% <0%> (ø)
addons/rn-pair/src/index.js	0% <0%> (ø)
addons/rn-pair/src/components/QRCode/index.js	0% <0%> (ø)
...tive-vanilla/storybook/stories/Button/index.ios.js
...tive-vanilla/storybook/stories/CenterView/index.js
...-native-vanilla/storybook/stories/Welcome/index.js
... and 266 more

---

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 34b98a8...29fe2a4. Read the comment docs.

[ndelangen]

@Gongreg is this still something you're working on?

[Gongreg]

@ndelangen, yes. I am working with it internally, trying it out, before moving forward here.

[Gongreg]

Hey, I still want to do some cleanup. But here is an example project: https://expo.io/@gongreg/rn-storybook-hosted-client-example

Server: https://vast-eyrie-45947.herokuapp.com/ (takes ~30s to load because heroku shuts it down).

[ndelangen]

@Gongreg What's the next step for this? After 3.3 is merged and released, what's you plan?

[ndelangen]

Title is incorrect

[ndelangen]

Please provide a fenced code format with a language

[ndelangen]

If this is an addon, it's package should be named accordingly: @storybook/addon-<name>

I'd say maybe QR-Pair is a better name for this addon, what do you think?
@storybook/addon-qrpair

[ndelangen]

Please do not include a 'embedded' storybook example. Place storybook examples, in the <root>/examples/.

[ndelangen]

Please use glamorous for styling components.

[AhmadEl-Banna]

you can use now for publishing instead of Heroku, it's much better

[Hypnosphi]

@ndelangen is there anything else to do here?

[Gongreg]

Hey, I've thought about this for quite some time. The more I think about it the more I realise that there is almost no need for this functionality.
This functionality doesn't really bring anything for the developer. He will still use locally running storybook server + app.
If we are talking about user who is just playing around in a storybook, why would he want to open both app and browser? First question is going to be, why do I even need browser? What we should focus on is making onDeviceUI support a lot better. It should have option to display all the addons (that are possible) user wants to use. It should have a proper hierarchy of stories just like there is one in browser. I know that I spent lots of time trying to make it work, but I think it is better to not clutter storybook more with functionality, that is not really going to be used.
I've tried to write a medium post explaining what I did here and I showed it for few people, but they were not really sure why do we need to do this all complex thing.

So instead I am going to close this PR and update the medium blogpost into something more of "Trying to create static React Native Storybook and steps forward" where I will share experience in creating this and look into what we can actually achieve with onDeviceUI instead of this.

Sorry that I kept this open for so long, but I will try to be more useful while working onDeviceUI part.

[ndelangen]

@Gongreg I imagine a feature that shows a full screen on-device navigator (with hierarchy) when you some gesture or hold the phone a certain way.

I do think the web UI makes sense for documentation purposes also for RN. And i also would ask how to make use of things like addon-knobs for RN if there's no web UI connected to it.

Hoping to see some PR's improving the on-device navigator from you ;)