Integrate crna-kitchen-sink examples app into the monorepo

.circleci/config.yml

@@ -194,7 +194,7 @@ jobs:
           at: .
       - run:
           name: Bootstrap
-          command: yarn bootstrap --reactnativeapp
+          command: yarn bootstrap --core
       - run:
           name: Run React-Native-App example
           command: |

.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_NativeSmokeTests.kt

@@ -28,7 +28,7 @@ object OpenSourceProjects_Storybook_NativeSmokeTests : BuildType({
                 set -e -x
 
                 yarn
-                yarn bootstrap --reactnativeapp
+                yarn bootstrap --core
                 cd examples-native/crna-kitchen-sink
                 yarn storybook --smoke-test
             """.trimIndent()

addons/knobs/src/index.js

@@ -100,6 +100,8 @@ export const withKnobs = makeDecorator({
   },
 });
 
+export * from './shared';
+
 if (module && module.hot && module.hot.decline) {
   module.hot.decline();
 }

addons/ondevice-knobs/package.json

@@ -32,7 +32,7 @@
     "react-native-switch": "^1.5.0"
   },
   "peerDependencies": {
-    "@storybook/addon-knobs": "5.1.0-alpha.6",
+    "@storybook/addon-knobs": "5.1.0-alpha.7",
     "react": "*",
     "react-native": "*"
   },

addons/ondevice-knobs/src/panel.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { View, Text, TouchableOpacity } from 'react-native';
 import PropTypes from 'prop-types';
 import { SELECT_STORY, FORCE_RE_RENDER } from '@storybook/core-events';
-import { SET, SET_OPTIONS, RESET, CHANGE, CLICK } from '@storybook/addon-knobs/events';
+import { SET, SET_OPTIONS, RESET, CHANGE, CLICK } from '@storybook/addon-knobs';
 import GroupTabs from './GroupTabs';
 import PropForm from './PropForm';
 

app/react-native-server/src/client/manager/provider.js

@@ -41,13 +41,15 @@ export default class ReactProvider extends Provider {
     if (state.storiesHash[state.storyId]) {
       const { kind, story } = state.storiesHash[state.storyId];
 
-      this.selection = { kind, story };
-      api.emit(Events.SET_CURRENT_STORY, { kind, story });
-      // FIXME: getPreview not implemented yet.
-      if (addons.getPreview) {
-        const renderPreview = addons.getPreview();
-        if (renderPreview) {
-          return renderPreview(kind, story);
+      if (!this.selection || this.selection.kind !== kind || this.selection.story !== story) {
+        this.selection = { kind, story };
+        api.emit(Events.SET_CURRENT_STORY, { kind, story });
+        // FIXME: getPreview not implemented yet.
+        if (addons.getPreview) {
+          const renderPreview = addons.getPreview();
+          if (renderPreview) {
+            return renderPreview(kind, story);
+          }
         }
       }
     }

app/react-native/package.json

@@ -23,7 +23,6 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@react-native-community/async-storage": "^1.2.1",
     "@storybook/addons": "5.1.0-alpha.7",
     "@storybook/channel-websocket": "5.1.0-alpha.7",
     "@storybook/channels": "5.1.0-alpha.7",

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

@@ -1,7 +1,7 @@
 /* eslint-disable no-underscore-dangle */
 
 import React from 'react';
-import AsyncStorage from '@react-native-community/async-storage';
+import { AsyncStorage } from 'react-native';
 import getHost from 'rn-host-detect';
 import addons from '@storybook/addons';
 import Events from '@storybook/core-events';
@@ -135,9 +135,12 @@ export default class Preview {
 
   _sendSetStories() {
     const channel = addons.getChannel();
-    const stories = this._stories.dumpStoryBook();
+    const stories = this._stories.extract();
     channel.emit(Events.SET_STORIES, { stories });
     channel.emit(Events.STORIES_CONFIGURED);
+    if (this.currentStory) {
+      channel.emit(Events.SET_CURRENT_STORY, this.currentStory);
+    }
   }
 
   _sendGetCurrentStory() {
@@ -196,6 +199,7 @@ export default class Preview {
   }
 
   _selectStory(story) {
+    this.currentStory = story;
     const channel = addons.getChannel();
     channel.emit(Events.SELECT_STORY, story);
   }

examples-native/crna-kitchen-sink/README.md

@@ -4,11 +4,6 @@ This project was bootstrapped wit [Expo](https://github.com/expo/expo-cli) and s
 
 ## Getting started
 
-1. Install dependencies: `yarn install`
-2. Delete node_modules/@storybook
-3. Run the storybook server: `yarn storybook`
-4. Run the app: `yarn start`
-
-## Iterate on app/react-native
-
-Changes to the yarn workspace do not currently reflect live in this app. To iterate on the react native pieces of storybook, use `scripts/update-crna-kitchen-sink`.
+1. Install dependencies: `yarn install` at the root
+2. Run the storybook server: `yarn storybook`
+3. Run the app: `yarn start`

examples-native/crna-kitchen-sink/app.json

@@ -7,6 +7,9 @@
       "barStyle": "light-content",
       "backgroundColor": "#C2185B"
     },
-    "assetBundlePatterns": ["**/*"]
+    "assetBundlePatterns": ["**/*"],
+    "packagerOpts": {
+      "config": "metro.config.js"
+    }
   }
 }

examples-native/crna-kitchen-sink/metro.config.js

@@ -0,0 +1,22 @@
+const path = require('path');
+const blacklist = require('metro-config/src/defaults/blacklist');
+
+module.exports = {
+  watchFolders: [
+    // The monorepo
+    path.resolve(__dirname, '../..'),
+  ],
+  resolver: {
+    blacklistRE: blacklist([
+      // exclude react-native modules outside of this package
+      /app\/.*\/node_modules\/react-native\/.*/,
+      /node_modules\/.*\/node_modules\/react-native\/.*/,
+      // duplicate packages in server mocks. We don't need them so it's safe to exclude.
+      /__mocks__\/.*/,
+    ]),
+    extraNodeModules: {
+      // resolve react-native to this package's node_modules
+      'react-native': path.resolve(__dirname, 'node_modules/react-native'),
+    },
+  },
+};

examples-native/crna-kitchen-sink/package.json

@@ -24,34 +24,24 @@
   "devDependencies": {
     "@babel/core": "^7.2.2",
     "@babel/plugin-transform-react-jsx-source": "^7.2.0",
-    "@storybook/addon-actions": "file:../../packs/storybook-addon-actions.tgz",
-    "@storybook/addon-knobs": "file:../../packs/storybook-addon-knobs.tgz",
-    "@storybook/addon-links": "file:../../packs/storybook-addon-links.tgz",
-    "@storybook/addon-options": "file:../../packs/storybook-addon-options.tgz",
-    "@storybook/addons": "file:../../packs/storybook-addons.tgz",
-    "@storybook/channel-postmessage": "file:../../packs/storybook-channel-postmessage.tgz",
-    "@storybook/channel-websocket": "file:../../packs/storybook-channel-websocket.tgz",
-    "@storybook/channels": "file:../../packs/storybook-channels.tgz",
-    "@storybook/client-api": "file:../../packs/storybook-client-api.tgz",
-    "@storybook/client-logger": "file:../../packs/storybook-client-logger.tgz",
-    "@storybook/components": "file:../../packs/storybook-components.tgz",
-    "@storybook/router": "file:../../packs/storybook-router.tgz",
-    "@storybook/core": "file:../../lib/core",
-    "@storybook/core-events": "file:../../packs/storybook-core-events.tgz",
-    "@storybook/node-logger": "file:../../packs/storybook-node-logger.tgz",
-    "@storybook/react-native": "file:../../packs/storybook-react-native.tgz",
-    "@storybook/react-native-server": "file:../../packs/storybook-react-native-server.tgz",
-    "@storybook/addon-notes": "file:../../packs/storybook-addon-notes.tgz",
-    "@storybook/addon-ondevice-backgrounds": "file:../../packs/storybook-addon-ondevice-backgrounds.tgz",
-    "@storybook/addon-ondevice-knobs": "file:../../packs/storybook-addon-ondevice-knobs.tgz",
-    "@storybook/addon-ondevice-notes": "file:../../packs/storybook-addon-ondevice-notes.tgz",
-    "@storybook/ui": "file:../../packs/storybook-ui.tgz",
-    "@storybook/theming": "file:../../packs/storybook-theming.tgz",
+    "@storybook/addon-knobs": "5.1.0-alpha.7",
+    "@storybook/addon-ondevice-knobs": "^5.1.0-alpha.7",
+    "@storybook/addon-ondevice-notes": "5.1.0-alpha.7",
+    "@storybook/addons": "5.1.0-alpha.7",
+    "@storybook/react-native": "5.1.0-alpha.7",
     "core-js": "^2.5.7",
     "babel-loader": "^8.0.4",
     "babel-preset-expo": "^5.0.0",
+    "babel-plugin-module-resolver": "^3.2.0",
     "jest-expo": "^32.0.0",
     "schedule": "^0.4.0",
     "react-test-renderer": "16.5.1"
+  },
+  "workspaces": {
+    "nohoist": [
+      "react-native/**",
+      "**/app/react-native*",
+      "expo"
+    ]
   }
 }