@storybook/react-native-ui 8.5.2-alpha.1 → 8.5.2-alpha.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-ui",
-  "version": "8.5.2-alpha.1",
+  "version": "8.5.2-alpha.2",
   "description": "ui components for react native storybook",
   "keywords": [
     "react",
@@ -60,7 +60,7 @@
   "dependencies": {
     "@storybook/core": "^8.4.2",
     "@storybook/react": "^8.4.2",
-    "@storybook/react-native-theming": "^8.5.2-alpha.1",
+    "@storybook/react-native-theming": "^8.5.2-alpha.2",
     "fuse.js": "^7.0.0",
     "memoizerific": "^1.11.3",
     "polished": "^4.3.1",
@@ -81,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6829dc629b4ca18e2869267a9c9e0afed094f2f3"
+  "gitHead": "051e4d60e1274baab7bd81afd8414d55a5c41f4b"
 }

package/src/Layout.tsx

@@ -3,8 +3,8 @@ import { addons } from '@storybook/core/manager-api';
 import { type API_IndexHash, type Args, type StoryContext } from '@storybook/core/types';
 import type { ReactRenderer } from '@storybook/react';
 import { styled, useTheme } from '@storybook/react-native-theming';
-import { ReactNode, useRef, useState } from 'react';
-import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
+import { ReactNode, useRef, useState, useCallback } from 'react';
+import { ScrollView, Text, TouchableOpacity, View, ViewStyle } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { IconButton } from './IconButton';
 import { useLayout } from './LayoutProvider';
@@ -18,6 +18,39 @@ import { BottomBarToggleIcon } from './icon/BottomBarToggleIcon';
 import { CloseFullscreenIcon } from './icon/CloseFullscreenIcon';
 import { FullscreenIcon } from './icon/FullscreenIcon';
 import { MenuIcon } from './icon/MenuIcon';
+import { useStyle } from './util/useStyle';
+
+const desktopLogoContainer = {
+  flexDirection: 'row',
+  alignItems: 'center',
+  paddingTop: 10,
+  paddingLeft: 16,
+  paddingBottom: 4,
+  paddingRight: 10,
+  justifyContent: 'space-between',
+} satisfies ViewStyle;
+
+const desktopContentContainerStyle = { flex: 1 } satisfies ViewStyle;
+
+const desktopContentStyle = { flex: 1, overflow: 'hidden' } satisfies ViewStyle;
+
+const mobileContentStyle = { flex: 1, overflow: 'hidden' } satisfies ViewStyle;
+
+const placeholderObject = {};
+
+const placeholderArray = [];
+
+const iconFloatRightStyle = { marginLeft: 'auto' } satisfies ViewStyle;
+
+const navButtonStyle = { flexShrink: 1 } satisfies ViewStyle;
+
+const navButtonHitSlop = { bottom: 10, left: 10, right: 10, top: 10 };
+
+const mobileMenuDrawerContentStyle = {
+  paddingLeft: 16,
+  paddingTop: 4,
+  paddingBottom: 4,
+} satisfies ViewStyle;
 
 export const Layout = ({
   storyHash,
@@ -46,58 +79,114 @@ export const Layout = ({
 
   const [uiHidden, setUiHidden] = useState(false);
 
+  const desktopContainerStyle = useStyle(
+    () => ({
+      flex: 1,
+      paddingTop: insets.top,
+      backgroundColor: theme.background.content,
+      flexDirection: 'row',
+    }),
+    [theme.background.content, insets.top]
+  );
+
+  const desktopSidebarStyle = useStyle(
+    () => ({
+      width: desktopSidebarOpen ? 240 : undefined,
+      padding: desktopSidebarOpen ? 0 : 10,
+      borderColor: theme.appBorderColor,
+      borderRightWidth: 1,
+    }),
+    [desktopSidebarOpen, theme.appBorderColor]
+  );
+
+  const desktopScrollViewContentContainerStyle = useStyle(
+    () => ({
+      paddingBottom: insets.bottom,
+    }),
+    [insets.bottom]
+  );
+
+  const desktopAddonsPanelStyle = useStyle(
+    () => ({
+      height: desktopAddonsPanelOpen ? 300 : undefined,
+      borderTopWidth: 1,
+      borderColor: theme.appBorderColor,
+      paddingTop: desktopAddonsPanelOpen ? 4 : 0,
+      padding: desktopAddonsPanelOpen ? 0 : 10,
+    }),
+    [desktopAddonsPanelOpen, theme.appBorderColor]
+  );
+
+  const mobileContainerStyle = useStyle(
+    () => ({
+      flex: 1,
+      paddingTop: story?.parameters?.noSafeArea ? 0 : insets.top,
+      backgroundColor: theme.background.content,
+    }),
+    [theme.background.content, insets.top, story?.parameters?.noSafeArea]
+  );
+
+  const fullScreenButtonStyle = useStyle(
+    () => ({
+      position: 'absolute',
+      bottom: uiHidden ? 56 + insets.bottom : 16,
+      right: 16,
+      backgroundColor: theme.background.content,
+      padding: 4,
+      borderRadius: 4,
+      borderWidth: 1,
+      borderColor: theme.appBorderColor,
+    }),
+    [uiHidden, insets.bottom, theme.background.content, theme.appBorderColor]
+  );
+
+  const containerStyle = useStyle(
+    () => ({
+      marginBottom: insets.bottom,
+    }),
+    [insets.bottom]
+  );
+
+  const navButtonTextStyle = useStyle(
+    () => ({
+      flexShrink: 1,
+      color: theme.color.defaultText,
+    }),
+    [theme.color.defaultText]
+  );
+
+  const openMobileMenu = useCallback(() => {
+    mobileMenuDrawerRef.current.setMobileMenuOpen(true);
+  }, [mobileMenuDrawerRef]);
+
+  const setSelection = useCallback(({ storyId: newStoryId }: { storyId: string }) => {
+    const channel = addons.getChannel();
+
+    channel.emit(SET_CURRENT_STORY, { storyId: newStoryId });
+  }, []);
+
   if (isDesktop) {
     return (
-      <View
-        style={{
-          flex: 1,
-          paddingTop: insets.top,
-          backgroundColor: theme.background.content,
-          flexDirection: 'row',
-        }}
-      >
-        <View
-          style={{
-            width: desktopSidebarOpen ? 240 : undefined,
-            padding: desktopSidebarOpen ? 0 : 10,
-            borderColor: theme.appBorderColor,
-            borderRightWidth: 1,
-          }}
-        >
+      <View style={desktopContainerStyle}>
+        <View style={desktopSidebarStyle}>
           {desktopSidebarOpen ? (
             <ScrollView
               keyboardShouldPersistTaps="handled"
-              contentContainerStyle={{
-                paddingBottom: insets.bottom,
-              }}
+              contentContainerStyle={desktopScrollViewContentContainerStyle}
             >
-              <View
-                style={{
-                  flexDirection: 'row',
-                  alignItems: 'center',
-                  paddingTop: 10,
-                  paddingLeft: 16,
-                  paddingBottom: 4,
-                  paddingRight: 10,
-                  justifyContent: 'space-between',
-                }}
-              >
+              <View style={desktopLogoContainer}>
                 <StorybookLogo theme={theme} />
 
                 <IconButton onPress={() => setDesktopSidebarOpen(false)} Icon={MenuIcon} />
               </View>
 
               <Sidebar
-                extra={[]}
+                extra={placeholderArray}
                 previewInitialized
                 indexError={undefined}
-                refs={{}}
-                setSelection={({ storyId: newStoryId }) => {
-                  const channel = addons.getChannel();
-
-                  channel.emit(SET_CURRENT_STORY, { storyId: newStoryId });
-                }}
-                status={{}}
+                refs={placeholderObject}
+                setSelection={setSelection}
+                status={placeholderObject}
                 index={storyHash}
                 storyId={story?.id}
                 refId={DEFAULT_REF_ID}
@@ -108,23 +197,15 @@ export const Layout = ({
           )}
         </View>
 
-        <View style={{ flex: 1 }}>
-          <View style={{ flex: 1, overflow: 'hidden' }}>{children}</View>
-
-          <View
-            style={{
-              height: desktopAddonsPanelOpen ? 300 : undefined,
-              borderTopWidth: 1,
-              borderColor: theme.appBorderColor,
-              paddingTop: desktopAddonsPanelOpen ? 4 : 0,
-              padding: desktopAddonsPanelOpen ? 0 : 10,
-            }}
-          >
+        <View style={desktopContentContainerStyle}>
+          <View style={desktopContentStyle}>{children}</View>
+
+          <View style={desktopAddonsPanelStyle}>
             {desktopAddonsPanelOpen ? (
               <AddonsTabs storyId={story?.id} onClose={() => setDesktopAddonsPanelOpen(false)} />
             ) : (
               <IconButton
-                style={{ marginLeft: 'auto' }}
+                style={iconFloatRightStyle}
                 onPress={() => setDesktopAddonsPanelOpen(true)}
                 Icon={BottomBarToggleIcon}
               />
@@ -136,28 +217,13 @@ export const Layout = ({
   }
 
   return (
-    <View
-      style={{
-        flex: 1,
-        paddingTop: story?.parameters?.noSafeArea ? 0 : insets.top,
-        backgroundColor: theme.background.content,
-      }}
-    >
-      <View style={{ flex: 1, overflow: 'hidden' }}>
+    <View style={mobileContainerStyle}>
+      <View style={mobileContentStyle}>
         {children}
 
         {story?.parameters?.hideFullScreenButton ? null : (
           <TouchableOpacity
-            style={{
-              position: 'absolute',
-              bottom: uiHidden ? 56 + insets.bottom : 16,
-              right: 16,
-              backgroundColor: theme.background.content,
-              padding: 4,
-              borderRadius: 4,
-              borderWidth: 1,
-              borderColor: theme.appBorderColor,
-            }}
+            style={fullScreenButtonStyle}
             onPress={() => setUiHidden((prev) => !prev)}
           >
             {uiHidden ? (
@@ -170,18 +236,16 @@ export const Layout = ({
       </View>
 
       {!uiHidden ? (
-        <Container style={{ marginBottom: insets.bottom }}>
+        <Container style={containerStyle}>
           <Nav>
             <Button
               testID="mobile-menu-button"
-              style={{ flexShrink: 1 }}
-              hitSlop={{ bottom: 10, left: 10, right: 10, top: 10 }}
-              onPress={() => {
-                mobileMenuDrawerRef.current.setMobileMenuOpen(true);
-              }}
+              style={navButtonStyle}
+              hitSlop={navButtonHitSlop}
+              onPress={openMobileMenu}
             >
               <MenuIcon color={theme.color.mediumdark} />
-              <Text style={{ flexShrink: 1, color: theme.color.defaultText }} numberOfLines={1}>
+              <Text style={navButtonTextStyle} numberOfLines={1}>
                 {story?.title}/{story?.name}
               </Text>
             </Button>
@@ -196,21 +260,17 @@ export const Layout = ({
       ) : null}
 
       <MobileMenuDrawer ref={mobileMenuDrawerRef}>
-        <View style={{ paddingLeft: 16, paddingTop: 4, paddingBottom: 4 }}>
+        <View style={mobileMenuDrawerContentStyle}>
           <StorybookLogo theme={theme} />
         </View>
 
         <Sidebar
-          extra={[]}
+          extra={placeholderArray}
           previewInitialized
           indexError={undefined}
-          refs={{}}
-          setSelection={({ storyId: newStoryId }) => {
-            const channel = addons.getChannel();
-
-            channel.emit(SET_CURRENT_STORY, { storyId: newStoryId });
-          }}
-          status={{}}
+          refs={placeholderObject}
+          setSelection={setSelection}
+          status={placeholderObject}
           index={storyHash}
           storyId={story?.id}
           refId={DEFAULT_REF_ID}

package/src/MobileAddonsPanel.tsx

@@ -2,8 +2,8 @@ import { BottomSheetModal } from '@gorhom/bottom-sheet';
 import { addons } from '@storybook/core/manager-api';
 import { styled } from '@storybook/react-native-theming';
 import { Addon_TypesEnum } from '@storybook/core/types';
-import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
-import { Platform, Text, View, useWindowDimensions } from 'react-native';
+import { forwardRef, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { Platform, StyleProp, Text, View, ViewStyle, useWindowDimensions } from 'react-native';
 import { ScrollView } from 'react-native-gesture-handler';
 import Animated, {
   useAnimatedKeyboard,
@@ -15,11 +15,20 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTheme } from '@storybook/react-native-theming';
 import { IconButton } from './IconButton';
 import { CloseIcon } from './icon/CloseIcon';
+import { useStyle } from './util/useStyle';
 
 export interface MobileAddonsPanelRef {
   setAddonsPanelOpen: (isOpen: boolean) => void;
 }
 
+const bottomSheetStyle = {
+  paddingTop: 8,
+} satisfies StyleProp<ViewStyle>;
+
+const contentStyle = {
+  flex: 1,
+} satisfies StyleProp<ViewStyle>;
+
 export const MobileAddonsPanel = forwardRef<MobileAddonsPanelRef, { storyId?: string }>(
   ({ storyId }, ref) => {
     const theme = useTheme();
@@ -53,24 +62,31 @@ export const MobileAddonsPanel = forwardRef<MobileAddonsPanelRef, { storyId?: st
       };
     }, [animatedPosition, height, insets.bottom]);
 
+    const backgroundStyle = useStyle(() => {
+      return {
+        borderRadius: 0,
+        borderTopColor: theme.appBorderColor,
+        borderTopWidth: 1,
+        backgroundColor: theme.background.content,
+      };
+    });
+
+    const handleIndicatorStyle = useStyle(() => {
+      return {
+        backgroundColor: theme.textMutedColor,
+      };
+    });
+
     return (
       <BottomSheetModal
         ref={addonsPanelBottomSheetRef}
         index={1}
         animateOnMount={!reducedMotion}
         snapPoints={['25%', '50%', '75%']}
-        style={{
-          paddingTop: 8,
-        }}
+        style={bottomSheetStyle}
         animatedPosition={animatedPosition}
-        containerStyle={{}}
-        backgroundStyle={{
-          borderRadius: 0,
-          borderTopColor: theme.appBorderColor,
-          borderTopWidth: 1,
-          backgroundColor: theme.background.content,
-        }}
-        handleIndicatorStyle={{ backgroundColor: theme.textMutedColor }}
+        backgroundStyle={backgroundStyle}
+        handleIndicatorStyle={handleIndicatorStyle}
         keyboardBehavior="extend"
         // keyboardBlurBehavior="restore"
         enableDismissOnClose
@@ -79,7 +95,7 @@ export const MobileAddonsPanel = forwardRef<MobileAddonsPanelRef, { storyId?: st
         stackBehavior="replace"
         enableDynamicSizing={false}
       >
-        <Animated.View style={[{ flex: 1 }, adjustedBottomSheetSize]}>
+        <Animated.View style={[contentStyle, adjustedBottomSheetSize]}>
           <AddonsTabs
             onClose={() => {
               addonsPanelBottomSheetRef.current?.dismiss();
@@ -92,6 +108,38 @@ export const MobileAddonsPanel = forwardRef<MobileAddonsPanelRef, { storyId?: st
   }
 );
 
+const addonsTabsContainerStyle = {
+  flex: 1,
+} satisfies StyleProp<ViewStyle>;
+
+const addonsTabsStyle = {
+  flexDirection: 'row',
+  borderBottomWidth: 1,
+  borderBottomColor: 'lightgrey',
+} satisfies StyleProp<ViewStyle>;
+
+const addonsTabsContentContainerStyle = {
+  justifyContent: 'center',
+} satisfies StyleProp<ViewStyle>;
+
+const closeIconStyle = {
+  marginRight: 4,
+  marginBottom: 4,
+  alignItems: 'center',
+  justifyContent: 'center',
+} satisfies StyleProp<ViewStyle>;
+
+const addonsScrollStyle = {
+  flex: 1,
+} satisfies StyleProp<ViewStyle>;
+
+const centeredStyle = {
+  alignItems: 'center',
+  justifyContent: 'center',
+} satisfies StyleProp<ViewStyle>;
+
+const hitSlop = { top: 10, right: 10, bottom: 10, left: 10 };
+
 export const AddonsTabs = ({ onClose, storyId }: { onClose?: () => void; storyId?: string }) => {
   const panels = addons.getElements(Addon_TypesEnum.PANEL);
 
@@ -99,15 +147,39 @@ export const AddonsTabs = ({ onClose, storyId }: { onClose?: () => void; storyId
 
   const insets = useSafeAreaInsets();
 
+  const scrollContentContainerStyle = useStyle(() => {
+    return {
+      paddingBottom: insets.bottom + 16,
+    };
+  });
+
+  const panel = useMemo(() => {
+    if (!storyId) {
+      return (
+        <View style={centeredStyle}>
+          <Text>No Story Selected</Text>
+        </View>
+      );
+    }
+
+    if (Object.keys(panels).length === 0) {
+      return (
+        <View style={centeredStyle}>
+          <Text>No addons loaded.</Text>
+        </View>
+      );
+    }
+
+    return panels[addonSelected].render({ active: true });
+  }, [addonSelected, panels, storyId]);
+
   return (
-    <View style={{ flex: 1 }}>
-      <View style={{ flexDirection: 'row', borderBottomWidth: 1, borderBottomColor: 'lightgrey' }}>
+    <View style={addonsTabsContainerStyle}>
+      <View style={addonsTabsStyle}>
         <ScrollView
           horizontal
           showsHorizontalScrollIndicator={false}
-          contentContainerStyle={{
-            justifyContent: 'center',
-          }}
+          contentContainerStyle={addonsTabsContentContainerStyle}
         >
           {Object.values(panels).map(({ id, title }) => {
             const resolvedTitle = typeof title === 'function' ? title({}) : title;
@@ -124,43 +196,18 @@ export const AddonsTabs = ({ onClose, storyId }: { onClose?: () => void; storyId
         </ScrollView>
 
         <IconButton
-          style={{
-            marginRight: 4,
-            marginBottom: 4,
-            alignItems: 'center',
-            justifyContent: 'center',
-          }}
-          hitSlop={{ top: 10, right: 10, bottom: 10, left: 10 }}
+          style={closeIconStyle}
+          hitSlop={hitSlop}
           Icon={CloseIcon}
           onPress={() => onClose?.()}
         />
       </View>
       <ScrollView
-        style={{ flex: 1 }}
+        style={addonsScrollStyle}
         // keyboardShouldPersistTaps="handled"
-        contentContainerStyle={{
-          paddingBottom: insets.bottom + 16,
-        }}
+        contentContainerStyle={scrollContentContainerStyle}
       >
-        {(() => {
-          if (!storyId) {
-            return (
-              <View style={{ alignItems: 'center', justifyContent: 'center' }}>
-                <Text>No Story Selected</Text>
-              </View>
-            );
-          }
-
-          if (Object.keys(panels).length === 0) {
-            return (
-              <View style={{ alignItems: 'center', justifyContent: 'center' }}>
-                <Text>No addons loaded.</Text>
-              </View>
-            );
-          }
-
-          return panels[addonSelected].render({ active: true });
-        })()}
+        {panel}
       </ScrollView>
     </View>
   );

package/src/MobileMenuDrawer.tsx

@@ -1,10 +1,9 @@
 import BottomSheet, {
   BottomSheetBackdrop,
   BottomSheetBackdropProps,
-  BottomSheetModal,
   BottomSheetScrollView,
 } from '@gorhom/bottom-sheet';
-import { ReactNode, forwardRef, useImperativeHandle, useRef } from 'react';
+import { ReactNode, forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
 import { Keyboard } from 'react-native';
 import { useReducedMotion } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -28,19 +27,21 @@ export const BottomSheetBackdropComponent = (backdropComponentProps: BottomSheet
   />
 );
 
-export const MobileMenuDrawer = forwardRef<MobileMenuDrawerRef, MobileMenuDrawerProps>(
-  ({ children }, ref) => {
+const snapPoints = ['50%', '75%'];
+
+export const MobileMenuDrawer = memo(
+  forwardRef<MobileMenuDrawerRef, MobileMenuDrawerProps>(({ children }, ref) => {
     const reducedMotion = useReducedMotion();
     const insets = useSafeAreaInsets();
     const theme = useTheme();
 
-    const menuBottomSheetRef = useRef<BottomSheetModal>(null);
+    const menuBottomSheetRef = useRef<BottomSheet>(null);
 
     useImperativeHandle(ref, () => ({
       setMobileMenuOpen: (open: boolean) => {
         if (open) {
           // menuBottomSheetRef.current?.present();
-          menuBottomSheetRef.current?.expand();
+          menuBottomSheetRef.current?.snapToIndex(1);
         } else {
           Keyboard.dismiss();
 
@@ -50,32 +51,43 @@ export const MobileMenuDrawer = forwardRef<MobileMenuDrawerRef, MobileMenuDrawer
       },
     }));
 
+    const bgColorStyle = useMemo(() => {
+      return { backgroundColor: theme.background.content };
+    }, [theme.background.content]);
+
+    const handleIndicatorStyle = useMemo(() => {
+      return { backgroundColor: theme.textMutedColor };
+    }, [theme.textMutedColor]);
+
+    const contentContainerStyle = useMemo(() => {
+      return { paddingBottom: insets.bottom };
+    }, [insets.bottom]);
+
     return (
       <BottomSheet
         ref={menuBottomSheetRef}
         index={-1}
         animateOnMount={!reducedMotion}
-        snapPoints={['50%', '75%']}
+        snapPoints={snapPoints}
         // enableDismissOnClose
         enableHandlePanningGesture
         enableContentPanningGesture
         enableDynamicSizing={false}
         keyboardBehavior="extend"
         keyboardBlurBehavior="restore"
+        enablePanDownToClose
         // stackBehavior="replace"
         backdropComponent={BottomSheetBackdropComponent}
-        backgroundStyle={{ backgroundColor: theme.background.content }}
-        handleIndicatorStyle={{ backgroundColor: theme.textMutedColor }}
+        backgroundStyle={bgColorStyle}
+        handleIndicatorStyle={handleIndicatorStyle}
       >
         <BottomSheetScrollView
           keyboardShouldPersistTaps="handled"
-          contentContainerStyle={{
-            paddingBottom: insets.bottom,
-          }}
+          contentContainerStyle={contentContainerStyle}
         >
           {children}
         </BottomSheetScrollView>
       </BottomSheet>
     );
-  }
+  })
 );

package/src/Search.tsx

@@ -3,7 +3,7 @@ import { styled } from '@storybook/react-native-theming';
 import type { IFuseOptions } from 'fuse.js';
 import Fuse from 'fuse.js';
 import React, { useCallback, useDeferredValue, useRef, useState } from 'react';
-import { TextInput, View } from 'react-native';
+import { Platform, TextInput, View } from 'react-native';
 import { CloseIcon } from './icon/CloseIcon';
 import { SearchIcon } from './icon/SearchIcon';
 import { useLayout } from './LayoutProvider';
@@ -61,6 +61,8 @@ const BottomSheetInput = styled(BottomSheetTextInput)(({ theme }) => ({
   height: 32,
   paddingLeft: 28,
   paddingRight: 28,
+  paddingTop: Platform.OS === 'android' ? 0 : undefined,
+  paddingBottom: Platform.OS === 'android' ? 0 : undefined,
   borderWidth: 1,
   borderColor: theme.appBorderColor,
   backgroundColor: 'transparent',

package/src/StorybookLogo.tsx

@@ -96,9 +96,12 @@ const BrandTitle: FC<{ theme: Theme }> = ({ theme }) => {
 };
 
 export const StorybookLogo: FC<{ theme: Theme }> = ({ theme }) => {
-  if (theme.brand?.image) {
+  const image = useMemo(() => theme.brand?.image, [theme.brand?.image]);
+  const title = useMemo(() => theme.brand?.title, [theme.brand?.title]);
+
+  if (image) {
     return <BrandLogo theme={theme} />;
-  } else if (theme.brand?.title) {
+  } else if (title) {
     return <BrandTitle theme={theme} />;
   } else {
     return <NoBrandLogo theme={theme} />;