fix: Expo optional dependencies (#19)

package.json

@@ -55,7 +55,7 @@
     "react-docgen-typescript": "2.2.2"
   },
   "engines": {
-    "node": ">=10.24.1",
+    "node": ">=18.18.0",
     "yarn": ">=1.22.22"
   },
   "packageManager": "[email protected]"

packages/react-native-storybook/package.json

@@ -57,14 +57,8 @@
     "typescript": "^5.3.3"
   },
   "peerDependencies": {
-    "@storybook/core-events": ">=7.6.11",
     "@storybook/react-native": ">=7.6.11",
-    "react": "*",
-    "react-native": ">=0.60.0"
-  },
-  "optionalDependencies": {
-    "expo-constants": "*",
-    "expo-dev-menu": "*"
+    "react-native": ">=0.64.0"
   },
   "engines": {
     "node": ">=8.0.0"

packages/react-native-storybook/src/data/constants.ts

@@ -4,5 +4,3 @@ export const modes = {
 } as const;
 
 export type SnapshotMode = (typeof modes)[keyof typeof modes];
-
-export const TOGGLE_STORYBOOK_DEV_SETTINGS_MENU_ITEM = 'Toggle Storybook';

packages/react-native-storybook/src/hoc/withSherlo/hooks/index.ts

@@ -1,4 +1,4 @@
-export { default as useAddon } from './useAddon';
+// export { default as useAddon } from './useAddon';
 export { default as useKeyboardStatusEffect } from './useKeyboardStatusEffect';
 export { default as useOriginalMode } from './useOriginalMode';
 export { default as usePreviewMode } from './usePreviewMode';

packages/react-native-storybook/src/hoc/withSherlo/hooks/useAddon.tsx

@@ -1,3 +1,4 @@
+/*
 import { addons } from '@storybook/manager-api';
 import React, { useRef } from 'react';
 import AddonPanel from '../components/AddonPanel';
@@ -28,3 +29,4 @@ const useAddon = ({ onPreviewStoryPress }: RegisterAddonInput): void => {
 };
 
 export default useAddon;
+*/

packages/react-native-storybook/src/hoc/withSherlo/withSherlo.tsx

@@ -7,7 +7,7 @@ import ErrorBoundary from './components/ErrorBoundry';
 import SherloContext from './contexts/SherloContext';
 import generateStorybookComponent, { StorybookRenderMode } from './generateStorybookComponent';
 import {
-  useAddon,
+  // useAddon,
   useKeyboardStatusEffect,
   useOriginalMode,
   usePreviewMode,
@@ -44,12 +44,12 @@ const withSherlo = (view: StorybookView, params?: StorybookParams) => {
       setRenderedStoryId(id);
     });
 
-    useAddon({
-      onPreviewStoryPress: () => {
-        runnerBridge.log('setting preview mode');
-        setMode('preview');
-      },
-    });
+    // useAddon({
+    //   onPreviewStoryPress: () => {
+    //     runnerBridge.log('setting preview mode');
+    //     setMode('preview');
+    //   },
+    // });
 
     useEffect(() => {
       runnerBridge

packages/react-native-storybook/src/hoc/withStorybook/withStorybook.tsx

@@ -1,15 +1,14 @@
 import React, { ReactElement, useEffect, useState } from 'react';
 import { AppState, AppStateStatus, DevSettings, Platform } from 'react-native';
-import { TOGGLE_STORYBOOK_DEV_SETTINGS_MENU_ITEM } from '../../data/constants';
+import runnerBridge from '../../runnerBridge';
 import { StorybookParams } from '../../types';
 import ModeProvider from './ModeProvider';
-import runnerBridge from '../../runnerBridge/runnerBridge';
 
 let ExpoDevMenu: any;
 try {
   ExpoDevMenu = require('expo-dev-menu');
 } catch (error) {
-  // Do nothing
+  // Optional module is not installed
 }
 
 const MODE_STORAGE_KEY = 'sherloPersistedMode';
@@ -91,6 +90,8 @@ export default withStorybook;
 
 /* ========================================================================== */
 
+const TOGGLE_STORYBOOK_DEV_MENU_ITEM_NAME = 'Toggle Storybook';
+
 function addToggleStorybookToDevMenu({
   setMode,
   storage,
@@ -113,12 +114,11 @@ function addToggleStorybookToDevMenu({
   if (ExpoDevMenu) {
     ExpoDevMenu.registerDevMenuItems([
       {
-        name: TOGGLE_STORYBOOK_DEV_SETTINGS_MENU_ITEM,
-        toggleBetweenAppAndStorybook,
-        shouldCollapse: false,
+        name: TOGGLE_STORYBOOK_DEV_MENU_ITEM_NAME,
+        callback: toggleBetweenAppAndStorybook,
       },
     ]);
   }
 
-  DevSettings.addMenuItem(TOGGLE_STORYBOOK_DEV_SETTINGS_MENU_ITEM, toggleBetweenAppAndStorybook);
+  DevSettings.addMenuItem(TOGGLE_STORYBOOK_DEV_MENU_ITEM_NAME, toggleBetweenAppAndStorybook);
 }

packages/react-native-storybook/src/runnerBridge/actions/log.ts

@@ -15,7 +15,8 @@ const log =
 
     const logMsg = `${time}: ${key}${parameters ? ` : ${JSON.stringify(parameters)}` : ''}\n`;
 
-    console.log(`${logMsg}\n`);
+    if (!__DEV__) console.log(`${logMsg}\n`);
+
     appendFile(path, logMsg);
   };
 

packages/react-native-storybook/src/sherloModule/sherloModule.ts

@@ -2,14 +2,12 @@ import { NativeModules, Platform } from 'react-native';
 import base64 from 'base-64';
 import utf8 from 'utf8';
 
-import { normalizeFilePath } from './utils/normalizeFilePath';
-
 let isExpoGo = false;
 try {
-  const Constants = require('expo-constants');
+  const Constants = require('expo-constants').default;
   isExpoGo = Constants?.default?.appOwnership === 'expo';
 } catch (error) {
-  // Optional module is not installed.
+  // Optional module is not installed
 }
 
 const { RNSherlo } = NativeModules;
@@ -34,7 +32,7 @@ if (RNSherlo === null) {
     };
   } else {
     throw new Error(
-      '@sherlo/react-natve-storybook: Sherlo native module is not accessible. Rebuild the app to link it on the native side.'
+      '@sherlo/react-native-storybook: Sherlo native module is not accessible. Rebuild the app to link it on the native side.'
     );
   }
 } else {
@@ -74,3 +72,10 @@ if (RNSherlo === null) {
 }
 
 export default sherloModule;
+
+/* ========================================================================== */
+
+const filePathPrefix = 'file://';
+function normalizeFilePath(path: string): string {
+  return path.startsWith(filePathPrefix) ? path.slice(filePathPrefix.length) : path;
+}