[onDeviceUI] Add ability to render addons in React Native #3903

Gongreg · 2018-07-20T11:26:04Z

Issue

Currently the only way to use addons in React Native is to display them in browser (that means you need to have a server running). This PR allows users to create addons which work in RN app itself.

You can test out the new functionality here! https://expo.io/@gongreg/crna-kitchen-sink.

This is the main PRs for this functionality. Relevant PRs:

#4326
#4327
#4328
#4340

Changes

Updated the UI.
- Moved top bar to the bottom, added border to make it more distinct.
- Bar now has three buttons: Navigator, preview, addons. Clicking on either navigator or addons makes the preview minimized.
- You can swipe on the bar to select different panels.
- You can press on minimized preview to maximize it.
- Added a button on the right to hide the bar completely.
onDeviceUI is now true by default.

You can disable it by passing onDeviceUI as false.

Two new options for initial UI display
- isUIOpen - display bottom bar initially (default - true).
- tabOpen - which panel to display initially (navigator(-1), preview(0) or addons(1) (default is 0).
Safe area view hack (for iphone x) removed.

Now it uses SafeAreaView component. It requires RN 0.50.

Reduced amount of rerenders happening when using onDeviceUI.

Before using onDeviceUI made two rerenders on story change events.

Channel is created immediately.

Before it was impossible to use addons channel if you didn't render storybookUI component. Now the channel is created as soon as you call getStorybookUI.

Testing

I've updated CRNA example to support on device addons.
I've also published expo example: https://expo.io/@gongreg/crna-kitchen-sink

Part of other PR's

Addon registration

cli now creates rn-addons.js file and imports it in entry storybook file.

Current storybook architecture works in two parts. Manager and preview. Adding addons to onDeviceUI removes this separation.

This separation was necessary to support emitting events inside decorators.
Without it now we get warning that renders are not "pure" (they are calling setState while setState is already happening).

By using async channel we avoid this issue since events are emitted only after render has finished.

Handles websocket error without crashing.

If storybook tries to connect to non existing storybook server it will not throw red screen anymore.

Created new on device addons
- Backgrounds
- Knobs
- Notes
Unified template for Storybook installation in React Native.

Both CRNA and RN Vanilla will use same template when installing storybook.

storybook-safe-bot · 2018-07-20T11:40:43Z

	Fails
🚫	PR is marked with "do not merge" label.

Generated by 🚫 dangerJS

orta · 2018-07-20T18:36:24Z

This is a very clever idea 👍

igor-dv · 2018-07-25T08:33:29Z

app/react-native/src/index.js

@@ -1,3 +1,4 @@
+import { AddonStore } from '@storybook/addons';


Web part of storybook uses addons.js file. Maybe we should have rn-addons.js file for RN part? Currently I just register the addons next to the stories.

I think having addon.js for RN will consolidate the API.

shilman · 2018-07-26T20:13:26Z

examples/crna-kitchen-sink/storybook/index.js

@@ -3,12 +3,28 @@ import React, { Component } from 'react';
 import { getStorybookUI, configure } from '@storybook/react-native';
 import { setOptions } from '@storybook/addon-options';

+// TODO temp disable till I find a way to fix usage addon
+console.disableYellowBox = true;


Disabled it in case people wanted to try things out. The usage addon has an issue. It tries to update during a render and thas is a warning. I will fix it :)

isUIOpen - whether to initially show top bar - default true. isStoryMenuOpen - should show story menu open by default - default false.

codecov · 2018-08-02T13:57:22Z

Codecov Report

❗ No coverage uploaded for pull request base (on-device-ui-all-prs@6db1f75). Click here to learn what that means.
The diff coverage is 0%.

@@                   Coverage Diff                   @@
##             on-device-ui-all-prs    #3903   +/-   ##
=======================================================
  Coverage                        ?   36.85%           
=======================================================
  Files                           ?      538           
  Lines                           ?     6441           
  Branches                        ?      839           
=======================================================
  Hits                            ?     2374           
  Misses                          ?     3645           
  Partials                        ?      422

Impacted Files	Coverage Δ
...-native/src/preview/components/OnDeviceUI/style.js	`0% <ø> (ø)`
app/react-native/src/bin/storybook-start.js	`0% <0%> (ø)`
...rc/preview/components/OnDeviceUI/addons/wrapper.js	`0% <0%> (ø)`
...ve/src/preview/components/OnDeviceUI/tabs/panel.js	`0% <0%> (ø)`
...e/src/preview/components/OnDeviceUI/tabs/consts.js	`0% <0%> (ø)`
...e/src/preview/components/OnDeviceUI/addons/list.js	`0% <0%> (ø)`
...-native/src/preview/components/OnDeviceUI/index.js	`0% <0%> (ø)`
...ve/src/preview/components/OnDeviceUI/addons/tab.js	`0% <0%> (ø)`
...tive/src/preview/components/StoryListView/index.js	`0% <0%> (ø)`
.../src/preview/components/OnDeviceUI/addons/index.js	`0% <0%> (ø)`
... and 4 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 6db1f75...18fccca. Read the comment docs.

We cannot use modal since addons expect to be rendered all the time. So now we display the wrapper as position absolute and make it 0 0 size when it is not visible.

# Conflicts: # lib/cli/lib/initiate.js

Gongreg · 2018-10-09T08:39:28Z

app/react-native/docs/addons.md

+
+## On device addons
+On device addons are addons that are displayed in your app in addons panel. You register them in a file called 
+`rn-addons.js` and you also have to import `rn-addons.js` file somewhere in your entry file (it is done by default 


Needs better usage explanation

Gongreg · 2018-10-09T08:39:58Z

app/react-native/docs/addons.md

+app, they are also rerendered on every change.
+
+## Writing the app addons
+On device addons use same addon store and api as web addons. The only difference in api is that you don't have api prop 


api prop in quotes

app/react-native/docs/manual-setup.md

Gongreg · 2018-10-09T08:41:33Z

app/react-native/docs/server.md

+
+
+* ### Web addons
+There are addons that work on React Native but don't have on device implementation yet.


And some addons simply make sense only on the web.

Gongreg · 2018-10-09T08:41:52Z

app/react-native/docs/server.md

+# Storybook server
+The default usage of React native storybook till version 5 involved starting storybook server.
+
+The reason it has changed is that in most cases it is not really necessary.


Explain more here.

igor-dv · 2018-10-09T09:24:24Z

app/react-native/src/preview/components/OnDeviceUI/addons/index.js

+    if (Object.keys(panels).length === 0) {
+      return (
+        <View style={[style.flex, style.center]}>
+          <Text style={style.text}>No on device addons loaded</Text>


igor-dv · 2018-10-09T09:26:15Z

app/react-native/src/preview/components/OnDeviceUI/addons/index.js

+import style from '../style';
+
+export default class Addons extends PureComponent {
+  static propTypes = {


Some of the components are having props as a static member, while others are defined outside 🤔

igor-dv · 2018-10-09T09:34:18Z

app/react-native/src/preview/components/OnDeviceUI/index.js

+      style={style.hideButton}
+      hitSlop={{ top: 5, left: 5, bottom: 5, right: 5 }}
+    >
+      <Text style={[style.hideButtonText]}>o</Text>


o

🤣 I am not a fan of this. maybe at least some other ascii? ☰ 🡙 ⥯

(Or swiping down 🤐)

app/react-native/src/preview/components/OnDeviceUI/index.js

igor-dv · 2018-10-09T09:41:06Z

app/react-native/src/preview/components/OnDeviceUI/tabs/panel.js

+}
+
+Panel.propTypes = {
+  // eslint-disable-next-line react/forbid-prop-types


What is wrong with the prop types here?

app/react-native/src/preview/index.js

Gongreg · 2018-10-09T15:53:48Z

app/react-native/docs/addons.md

+
+This step is done automatically when you install Storybook for the first time and also described in [Manual Setup](https://github.com/storybooks/storybook/blob/master/app/react-native/docs/manual-setup.md)
+
+## Compactibility


compatibility

Gongreg · 2018-10-09T15:53:58Z

app/react-native/docs/addons.md

+## Performance of on device addons
+Because on device addons are inside the app, they are also rerendered on every change. This can reduce performance a lot.
+
+## Writing the app addons


app/react-native/docs/addons.md

app/react-native/src/preview/components/OnDeviceUI/absolute-positioned-keyboard-aware-view.js

Gongreg · 2018-10-09T16:04:14Z

app/react-native/src/preview/components/OnDeviceUI/absolute-positioned-keyboard-aware-view.js

+    }
+  };
+
+  onLayout = ({ nativeEvent }) => {


onLayoutHandler

app/react-native/src/preview/index.js

app/react-native/src/preview/components/OnDeviceUI/addons/index.js

Gongreg · 2018-10-09T16:46:59Z

app/react-native/src/preview/components/OnDeviceUI/addons/tab.js

+import style from '../style';
+
+export default class Tab extends PureComponent {
+  onPress = () => {


Updated readme, Renamed handlers.

Gongreg · 2018-10-10T14:11:26Z

This can move forward! @ndelangen, @igor-dv.

slorber · 2018-11-19T12:40:01Z

hey,

This works great, but just wondering if it wouldn't be possible to attach plugins to a chrome extension? The app can already connect to chrome debugger so maybe we could also support showing plugin interfaces like knobs here without needing a server?

Gongreg · 2018-11-22T14:58:50Z

Hey @slorber, I don't have enough knowledge with debugger to comment on that one. But if you have any interest in trying to do that you are definitely welcome.

Gongreg added 7 commits July 19, 2018 17:38

Reducing the size of the ui.

8bf63f5

Addon scrollview with addon names

2a6fe0f

Updated style, shows addons list with loaded addons.

233f369

Updated status bar, so content would not be drawn below it on android.

f745fdb

Added some addons to example.

676c110

Moved out of state

dc3b8a4

Fixed event on android.

07b502d

Gongreg added feature request ci: do not merge react-native labels Jul 20, 2018

Gongreg requested review from orta, shilman, danielduan and ndelangen July 20, 2018 11:26

Gongreg requested review from rmevans9 and tmeasday as code owners July 20, 2018 11:26

Temporary disabled yellow box.

a8af427

igor-dv reviewed Jul 25, 2018

View reviewed changes

shilman reviewed Jul 26, 2018

View reviewed changes

Adding two options for storybook ui:

e5ca681

isUIOpen - whether to initially show top bar - default true. isStoryMenuOpen - should show story menu open by default - default false.

Creating rn-addons.js file inside generators.

8d31f83

Gongreg requested review from Hypnosphi and stijnkoopal as code owners August 2, 2018 14:05

Gongreg added 4 commits August 2, 2018 17:52

Removed separate addon store.

838748e

Using active prop.

d62e440

Rewrote addons wrapper without using modal.

cd0f98a

We cannot use modal since addons expect to be rendered all the time. So now we display the wrapper as position absolute and make it 0 0 size when it is not visible.

Fixing yellow box warnings.

20969ec

Gongreg changed the title ~~Add ability to render addons in React Native~~ [onDeviceUI] Add ability to render addons in React Native Oct 9, 2018

Merge branch 'addons-async-option' into rn-storybook-new-ui

11e8f87

Gongreg mentioned this pull request Oct 9, 2018

[onDeviceUI] Adding on device addons. #4327

Merged

Merge branch 'on-device-addons' into rn-storybook-new-ui

4012044

Gongreg mentioned this pull request Oct 9, 2018

[onDeviceUI] Unifying React Native template. #4328

Merged

Merge branch 'react-native-cli-template' into rn-storybook-new-ui

7d98112

# Conflicts: # lib/cli/lib/initiate.js

Gongreg changed the base branch from master to on-device-ui-all-prs October 9, 2018 08:00

Gongreg added 3 commits October 9, 2018 11:16

Reverted back fixtures change.

fb68670

Reverting file change

75cabdf

Merge branch 'on-device-ui-all-prs' into rn-storybook-new-ui

667785a

Gongreg commented Oct 9, 2018

View reviewed changes

Gongreg added 2 commits October 9, 2018 12:12

Updating readmes.

f622a08

Updated readme about server.

30d0fd2

igor-dv reviewed Oct 9, 2018

View reviewed changes

Gongreg added 7 commits October 9, 2018 13:48

Reverted yarn.lock

afe1b5f

Fixing propTypes.

85e8742

Splitting out onDeviceUI/index to smaller components.

8eba6b2

Splitting up onDeviceUI.

748a9c9

Removed unused dependency.

2adbce8

Properly uses whole screen for preview.

755f552

Updated visibility button.

36bd66d

ndelangen approved these changes Oct 9, 2018

View reviewed changes

Gongreg commented Oct 10, 2018

View reviewed changes

Few code review fixes

18fccca

Updated readme, Renamed handlers.

igor-dv approved these changes Oct 10, 2018

View reviewed changes

ndelangen merged commit d32952d into on-device-ui-all-prs Oct 11, 2018

Gongreg mentioned this pull request Oct 12, 2018

[onDeviceUI] Add ability to render addons in React Native #4381

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[onDeviceUI] Add ability to render addons in React Native #3903

[onDeviceUI] Add ability to render addons in React Native #3903

Gongreg commented Jul 20, 2018 •

edited

storybook-safe-bot commented Jul 20, 2018 •

edited

orta commented Jul 20, 2018

igor-dv Jul 25, 2018

shilman Jul 26, 2018

Gongreg Jul 26, 2018

codecov bot commented Aug 2, 2018 •

edited

Gongreg Oct 9, 2018

Gongreg Oct 9, 2018

Gongreg Oct 9, 2018

Gongreg Oct 9, 2018

igor-dv Oct 9, 2018

igor-dv Oct 9, 2018

igor-dv Oct 9, 2018

igor-dv Oct 9, 2018

Gongreg Oct 9, 2018

Gongreg Oct 9, 2018

Gongreg Oct 9, 2018

Gongreg Oct 9, 2018

Gongreg commented Oct 10, 2018

slorber commented Nov 19, 2018

Gongreg commented Nov 22, 2018

		@@ -1,3 +1,4 @@
		import { AddonStore } from '@storybook/addons';



		* ### Web addons
		There are addons that work on React Native but don't have on device implementation yet.


		This step is done automatically when you install Storybook for the first time and also described in [Manual Setup](https://github.com/storybooks/storybook/blob/master/app/react-native/docs/manual-setup.md)

		## Compactibility

[onDeviceUI] Add ability to render addons in React Native #3903

[onDeviceUI] Add ability to render addons in React Native #3903

Conversation

Gongreg commented Jul 20, 2018 • edited

Issue

Changes

Updated the UI.

onDeviceUI is now true by default.

Two new options for initial UI display

Safe area view hack (for iphone x) removed.

Reduced amount of rerenders happening when using onDeviceUI.

Channel is created immediately.

Testing

Part of other PR's

Addon registration

Handles websocket error without crashing.

Created new on device addons

Unified template for Storybook installation in React Native.

storybook-safe-bot commented Jul 20, 2018 • edited

orta commented Jul 20, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

codecov bot commented Aug 2, 2018 • edited

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Gongreg commented Oct 10, 2018

slorber commented Nov 19, 2018

Gongreg commented Nov 22, 2018

Gongreg commented Jul 20, 2018 •

edited

`onDeviceUI` is now true by default.

storybook-safe-bot commented Jul 20, 2018 •

edited

codecov bot commented Aug 2, 2018 •

edited