fix: allow react element

storybookjs · Nov 28, 2024 · a2b6bb2 · a2b6bb2
1 parent 58c9850
commit a2b6bb2
Show file tree

Hide file tree

Showing 6 changed files with 379 additions and 146 deletions.
diff --git a/examples/expo-example/.storybook/index.tsx b/examples/expo-example/.storybook/index.tsx
@@ -1,3 +1,4 @@
+import { Text } from 'react-native';
 import { view } from './storybook.requires';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 
@@ -14,15 +15,15 @@ const StorybookUIRoot = view.getStorybookUI({
   // initialSelection: { kind: 'TextInput', name: 'Basic' },
   // onDeviceUI: false,
   // host: '192.168.1.69',
-  // theme: {
-  //   brand: {
-  //     image: {
-  //       uri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/512px-React-icon.svg.png',
-  //       width: 25,
-  //       height: 25,
-  //     },
-  //   },
-  // },
+  /*   theme: {
+    brand: {
+      image: {
+        uri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/512px-React-icon.svg.png',
+        width: 25,
+        height: 25,
+      } ,
+    },
+  }, */
 });
 
 export default StorybookUIRoot;
diff --git a/examples/expo-example/package.json b/examples/expo-example/package.json
@@ -21,7 +21,7 @@
   "dependencies": {
     "@babel/preset-env": "^7.25.4",
     "@expo/metro-runtime": "~4.0.0",
-    "@gorhom/bottom-sheet": "^5.0.5",
+    "@gorhom/bottom-sheet": "^5.0.6",
     "@react-native-async-storage/async-storage": "1.23.1",
     "@react-native-community/datetimepicker": "8.2.0",
     "@react-native-community/slider": "4.5.5",
@@ -33,7 +33,7 @@
     "@storybook/addon-ondevice-controls": "^8.4.3-alpha.1",
     "@storybook/addon-ondevice-notes": "^8.4.3-alpha.1",
     "@storybook/addon-react-native-server": "0.0.6",
-    "@storybook/addon-react-native-web": "^0.0.22",
+    "@storybook/addon-react-native-web": "^0.0.26",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
     "@storybook/blocks": "^8.4.2",
     "@storybook/builder-webpack5": "^8.4.2",
@@ -43,12 +43,12 @@
     "@storybook/react-native-theming": "^8.4.3-alpha.1",
     "@storybook/react-webpack5": "^8.4.2",
     "@storybook/test": "^8.4.2",
-    "expo": "~52.0.5",
+    "expo": "~52.0.11",
     "history": "^5.3.0",
     "querystring": "^0.2.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-native": "0.76.1",
+    "react-native": "0.76.3",
     "react-native-gesture-handler": "~2.20.2",
     "react-native-reanimated": "~3.16.1",
     "react-native-safe-area-context": "4.12.0",
@@ -70,7 +70,7 @@
     "babel-loader": "^9.1.3",
     "babel-plugin-react-docgen-typescript": "^1.5.1",
     "jest": "^29.7.0",
-    "jest-expo": "~52.0.0",
+    "jest-expo": "~52.0.2",
     "metro-react-native-babel-preset": "^0.77.0",
     "typescript": "^5.3.3"
   }

diff --git a/packages/react-native-theming/src/web-theme.ts b/packages/react-native-theming/src/web-theme.ts
@@ -1,5 +1,6 @@
 import type { ImageProps, ImageSourcePropType, TextStyle } from 'react-native';
 import { transparentize } from 'polished';
+import { ReactElement } from 'react';
 
 export const color = {
   // Official color palette
@@ -176,7 +177,7 @@ export interface Brand {
   // This url we be opened when clicking the branded logo or title
   url?: string | null | undefined;
   // Define a an image source to replace storybook logo with
-  image?: ImageSourcePropType | null | undefined;
+  image?: ImageSourcePropType | ReactElement | null | undefined;
   resizeMode?: ImageProps['resizeMode'] | null | undefined;
   target?: string | null | undefined;
 }

diff --git a/packages/react-native-ui/src/StorybookLogo.tsx b/packages/react-native-ui/src/StorybookLogo.tsx
@@ -1,5 +1,5 @@
 import { Theme } from '@storybook/react-native-theming';
-import { FC, useEffect, useMemo } from 'react';
+import { FC, isValidElement, ReactElement, useEffect, useMemo } from 'react';
 import { Image, Linking, StyleProp, Text, TextStyle, TouchableOpacity } from 'react-native';
 import { DarkLogo } from './icon/DarkLogo';
 import { Logo } from './icon/Logo';
@@ -14,6 +14,10 @@ const NoBrandLogo: FC<{ theme: Theme }> = ({ theme }) =>
     <DarkLogo height={HEIGHT} width={WIDTH} />
   );
 
+function isElement(value: unknown): value is ReactElement {
+  return isValidElement(value);
+}
+
 const BrandLogo: FC<{ theme: Theme }> = ({ theme }) => {
   const imageHasNoWidthOrHeight =
     typeof theme.brand.image === 'object' &&
@@ -33,6 +37,10 @@ const BrandLogo: FC<{ theme: Theme }> = ({ theme }) => {
     return null;
   }
 
+  if (isElement(theme.brand.image)) {
+    return theme.brand.image;
+  }
+
   const image = (
     <Image
       source={theme.brand.image}

diff --git a/packages/react-native/src/View.tsx b/packages/react-native/src/View.tsx
@@ -16,7 +16,7 @@ import type { API_IndexHash, PreparedStory, StoryId, StoryIndex } from '@storybo
 import dedent from 'dedent';
 import deepmerge from 'deepmerge';
 import { useEffect, useMemo, useReducer, useState } from 'react';
-import { ActivityIndicator, View as RNView, StyleSheet, useColorScheme } from 'react-native';
+import { View as RNView, StyleSheet, useColorScheme } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import StoryView from './components/StoryView';
@@ -275,9 +275,7 @@ export class View {
               alignItems: 'center',
               justifyContent: 'center',
             }}
-          >
-            <ActivityIndicator animating size={'large'} />
-          </RNView>
+          />
         );
       }