From 3d34bdb384bf66f92413d82b53d6aee7f2ca8830 Mon Sep 17 00:00:00 2001 From: Daniel Williams Date: Sun, 13 Aug 2023 16:24:08 +0100 Subject: [PATCH] setstory fix/hack --- .vscode/settings.json | 5 +-- examples/expo-example/App.tsx | 44 +++++++++++++++++++++ packages/react-native/package.json | 5 ++- packages/react-native/src/preview/View.tsx | 18 ++++++++- packages/react-native/src/preview/start.tsx | 27 +++++-------- yarn.lock | 3 +- 6 files changed, 76 insertions(+), 26 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index ee9a32bb93..25fa6215fd 100644 --- 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 index e752b20208..b253662704 100644 --- 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 index 31f1e70ec7..2631fd6f08 100644 --- 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 index 2eaad3a5b3..6c91974589 100644 --- 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 index 747e4b483c..5e0ee80cd8 100644 --- 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(); 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 index 9f86cae78c..8ce7d3aef6 100644 --- 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