setstory fix/hack

storybookjs · Aug 13, 2023 · 3d34bdb · 3d34bdb
1 parent 965a875
commit 3d34bdb
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 26 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,6 +1,3 @@
 {
-  "typescript.tsdk": "node_modules/typescript/lib",
-  "editor.codeActionsOnSave": {
-    "source.organizeImports": true
-  }
+  "typescript.tsdk": "node_modules/typescript/lib"
 }
diff --git a/examples/expo-example/App.tsx b/examples/expo-example/App.tsx
@@ -1 +1,45 @@
+// NOTE this fixes metro not logging correctly for some reason
+if (__DEV__) {
+  const primitiveTypes = ['string', 'number', 'boolean'];
+  const logLevels = ['log', 'debug', 'info', 'warn', 'error'];
+
+  const transformArgs = (args) => {
+    return args.map((arg) => {
+      if (arg === undefined) {
+        return 'undefined';
+      }
+      if (arg instanceof Error) {
+        if (arg.stack) {
+          return arg.stack;
+        }
+        return arg.toString();
+      }
+      if (arg instanceof Date) {
+        return arg.toString();
+      }
+      if (primitiveTypes.includes(typeof arg)) {
+        return arg.toString();
+      } else {
+        return JSON.stringify(arg);
+      }
+    });
+  };
+
+  const consoleProxy = new Proxy(console, {
+    get: (target, prop) => {
+      //@ts-ignore
+      if (logLevels.includes(prop)) {
+        return (...args) => {
+          // we proxy the call to itself, but we transform the arguments to strings before
+          // so that they are printed in the terminal
+          return target[prop].apply(this, transformArgs(args));
+        };
+      }
+      return target[prop];
+    },
+  });
+
+  console = consoleProxy;
+}
+
 export { default } from './.storybook';
diff --git a/packages/react-native/package.json b/packages/react-native/package.json
@@ -33,7 +33,7 @@
   ],
   "scripts": {
     "dev": "ts-node ./buildscripts/gentsdev.ts && tsup --watch",
-    "prepare": "tsup",
+    "prepare": "rm -rf dist/ && tsup",
     "test": "jest"
   },
   "jest": {
@@ -55,6 +55,7 @@
     "@storybook/channels": "^7",
     "@storybook/client-logger": "^7",
     "@storybook/core-client": "^7",
+    "@storybook/core-common": "^7",
     "@storybook/core-events": "^7",
     "@storybook/csf": "^0.1.1",
     "@storybook/global": "^5.0.0",
@@ -66,7 +67,6 @@
     "commander": "^8.2.0",
     "deepmerge": "^4.3.0",
     "glob": "^7.1.7",
-    "jotai": "^2.0.2",
     "prettier": "^2.4.1",
     "react-native-swipe-gestures": "^1.0.5",
     "util": "^0.12.4"
@@ -77,6 +77,7 @@
     "@types/react": "~18.2.14",
     "babel-jest": "^29.4.3",
     "jest": "^29.4.3",
+    "jotai": "^2.0.2",
     "react-test-renderer": "18.2.0",
     "ts-node": "^10.9.1",
     "tsup": "^7.2.0",

diff --git a/packages/react-native/src/preview/View.tsx b/packages/react-native/src/preview/View.tsx
@@ -12,7 +12,8 @@ import OnDeviceUI from './components/OnDeviceUI';
 import StoryView from './components/StoryView';
 // TODO check this
 import { createWebSocketChannel } from '@storybook/channels';
-import events from '@storybook/core-events';
+import Events from '@storybook/core-events';
+import { global } from '@storybook/global';
 import deepmerge from 'deepmerge';
 import { useColorScheme } from 'react-native';
 import getHost from './rn-host-detect';
@@ -147,7 +148,7 @@ export class View {
 
       this._preview.setupListeners();
 
-      channel.emit(events.CHANNEL_CREATED);
+      channel.emit(Events.CHANNEL_CREATED);
 
       this._preview.initializeWithStoryIndex(this._storyIndex);
     }
@@ -202,6 +203,19 @@ export class View {
           self._preview.selectSpecifiedStory();
         });
 
+        global.__STORYBOOK_ADDONS_CHANNEL__.on(Events.SET_CURRENT_STORY, ({ storyId }) => {
+          console.log(Events.SET_CURRENT_STORY);
+
+          self._preview.selectSpecifiedStory();
+
+          const newStoryContext = this._preview.storyStore.getStoryContext(
+            this._preview.storyStore.fromId(storyId)
+          );
+
+          //@ts-ignore
+          setContext(newStoryContext);
+        });
+
         // eslint-disable-next-line react-hooks/exhaustive-deps
       }, []);
 

diff --git a/packages/react-native/src/preview/start.tsx b/packages/react-native/src/preview/start.tsx
@@ -1,4 +1,4 @@
-import Channel from '@storybook/channels';
+import { Channel } from '@storybook/channels';
 import Events from '@storybook/core-events';
 import type { ArgsStoryFn } from '@storybook/csf';
 import { global } from '@storybook/global';
@@ -32,30 +32,23 @@ export function start() {
 
   addons.setChannel(channel);
 
+  channel.emit(Events.CHANNEL_CREATED);
+
   const clientApi = new ClientApi<ReactNativeFramework>();
 
   const previewView = {
     prepareForStory: () => {
-      return {};
+      return <></>;
     },
+    prepareForDocs: () => {},
+    showErrorDisplay: () => {},
+    showDocs: () => {},
+    showMain: () => {},
     showNoPreview: () => {},
+    showPreparingDocs: () => {},
     showPreparingStory: () => {},
-    applyLayout: () => {},
-    showErrorDisplay: (e) => {
-      console.log(e);
-    },
-    showStoryDuringRender: () => {},
-    showMain: () => {},
-    checkIfLayoutExists: () => {},
     showStory: () => {},
-    docsRoot: null,
-    prepareForDocs: () => null,
-    showDocs: () => {},
-    preparingTimeout: setTimeout(() => {}, 0),
-    showMode: () => {},
-    showPreparingDocs: () => {},
-    storyRoot: null,
-    testing: false,
+    showStoryDuringRender: () => {},
   };
 
   const urlStore = {

diff --git a/yarn.lock b/yarn.lock
@@ -5034,7 +5034,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/core-common@npm:7.2.1":
+"@storybook/core-common@npm:7.2.1, @storybook/core-common@npm:^7":
   version: 7.2.1
   resolution: "@storybook/core-common@npm:7.2.1"
   dependencies:
@@ -5303,6 +5303,7 @@ __metadata:
     "@storybook/channels": ^7
     "@storybook/client-logger": ^7
     "@storybook/core-client": ^7
+    "@storybook/core-common": ^7
     "@storybook/core-events": ^7
     "@storybook/csf": ^0.1.1
     "@storybook/global": ^5.0.0