@storybook/react-native-ui-lite 10.2.0 → 10.2.2-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-ui-lite",
-  "version": "10.2.0",
+  "version": "10.2.2-alpha.0",
   "description": "lightweight ui components for react native storybook",
   "keywords": [
     "react",
@@ -39,10 +39,11 @@
   },
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@storybook/react": "10.2.0-beta.1",
-    "@storybook/react-native-theming": "^10.2.0",
-    "@storybook/react-native-ui-common": "^10.2.0",
-    "fuse.js": "^7.1.0",
+    "@legendapp/list": "3.0.0-beta.31",
+    "@nozbe/microfuzz": "^1.0.0",
+    "@storybook/react": "^10.2.2",
+    "@storybook/react-native-theming": "^10.2.2-alpha.0",
+    "@storybook/react-native-ui-common": "^10.2.2-alpha.0",
     "polished": "^4.3.1",
     "react-native-safe-area-context": "^5"
   },
@@ -57,5 +58,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "eca4a572e630d6536b62685bdd62114994c7515d"
+  "gitHead": "5e99a2f9de73aa3b88e6517f1016e933cac67c19"
 }

package/src/Explorer.tsx

@@ -2,7 +2,9 @@ import type { FC } from 'react';
 import React, { useRef } from 'react';
 import { Ref } from './Refs';
 import type { CombinedDataset, Selection } from '@storybook/react-native-ui-common';
-import { View } from 'react-native';
+import { View, ViewStyle } from 'react-native';
+
+const containerStyle: ViewStyle = { flex: 1 };
 
 export interface ExplorerProps {
   isLoading: boolean;
@@ -22,7 +24,7 @@ export const Explorer: FC<ExplorerProps> = React.memo(function Explorer({
   const containerRef = useRef<View>(null);
 
   return (
-    <View ref={containerRef} id="storybook-explorer-tree">
+    <View ref={containerRef} style={containerStyle}>
       {dataset.entries.map(([refId, ref]) => (
         <Ref
           {...ref}

package/src/Layout.tsx

@@ -11,7 +11,7 @@ import {
   useStyle,
 } from '@storybook/react-native-ui-common';
 import { ReactElement, ReactNode, useCallback, useLayoutEffect, useRef, useState } from 'react';
-import { ScrollView, Text, TouchableOpacity, View, ViewStyle } from 'react-native';
+import { Text, TouchableOpacity, View, ViewStyle } from 'react-native';
 import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';
 import { SET_CURRENT_STORY } from 'storybook/internal/core-events';
 import type { Args, StoryContext } from 'storybook/internal/csf';
@@ -48,30 +48,35 @@ const placeholderObject = {};
 
 const iconFloatRightStyle = { marginLeft: 'auto' } satisfies ViewStyle;
 
-const navButtonStyle = { flexShrink: 1 } satisfies ViewStyle;
+const navButtonStyle = { flex: 1 } satisfies ViewStyle;
 
-const navButtonHitSlop = { bottom: 10, left: 10, right: 10, top: 10 };
+const navButtonHitSlop = { bottom: 10, left: 10, top: 10 };
+
+const addonButtonHitSlop = { bottom: 10, left: 10, right: 10, top: 10 };
 
 const mobileMenuDrawerContentStyle = {
   paddingLeft: 16,
-  paddingTop: 4,
   paddingBottom: 4,
 } satisfies ViewStyle;
 
+const flexStyle = { flex: 1 } satisfies ViewStyle;
+
 export const LiteUI: SBUI = ({ storage, theme, storyHash, story, children }): ReactElement => (
-  <SafeAreaProvider style={{ flex: 1 }}>
-    <ThemeProvider theme={theme}>
-      <StorageProvider storage={storage}>
-        <LayoutProvider>
-          <PortalProvider shouldAddRootHost={false}>
-            <Layout storyHash={storyHash} story={story}>
-              {children}
-            </Layout>
-            <PortalHost name="storybook-lite-ui-root" />
-          </PortalProvider>
-        </LayoutProvider>
-      </StorageProvider>
-    </ThemeProvider>
+  <SafeAreaProvider style={flexStyle}>
+    <SelectedNodeProvider>
+      <ThemeProvider theme={theme}>
+        <StorageProvider storage={storage}>
+          <LayoutProvider>
+            <PortalProvider shouldAddRootHost={false}>
+              <Layout storyHash={storyHash} story={story}>
+                {children}
+              </Layout>
+              <PortalHost name="storybook-lite-ui-root" />
+            </PortalProvider>
+          </LayoutProvider>
+        </StorageProvider>
+      </ThemeProvider>
+    </SelectedNodeProvider>
   </SafeAreaProvider>
 );
 
@@ -186,24 +191,26 @@ export const Layout = ({
       {isDesktop ? (
         <View style={desktopSidebarStyle}>
           {desktopSidebarOpen ? (
-            <ScrollView keyboardShouldPersistTaps="handled">
+            <>
               <View style={desktopLogoContainer}>
                 <StorybookLogo theme={theme} />
 
                 <IconButton onPress={() => setDesktopSidebarOpen(false)} Icon={MenuIcon} />
               </View>
 
-              <Sidebar
-                previewInitialized
-                indexError={undefined}
-                refs={placeholderObject}
-                setSelection={setSelection}
-                status={placeholderObject}
-                index={storyHash}
-                storyId={story?.id}
-                refId={DEFAULT_REF_ID}
-              />
-            </ScrollView>
+              <View style={flexStyle}>
+                <Sidebar
+                  previewInitialized
+                  indexError={undefined}
+                  refs={placeholderObject}
+                  setSelection={setSelection}
+                  status={placeholderObject}
+                  index={storyHash}
+                  storyId={story?.id}
+                  refId={DEFAULT_REF_ID}
+                />
+              </View>
+            </>
           ) : (
             <IconButton onPress={() => setDesktopSidebarOpen(true)} Icon={MenuIcon} />
           )}
@@ -216,6 +223,7 @@ export const Layout = ({
         {story?.parameters?.hideFullScreenButton || isDesktop ? null : (
           <TouchableOpacity
             style={fullScreenButtonStyle}
+            hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
             onPress={() => setUiHidden((prev) => !prev)}
           >
             {uiHidden ? (
@@ -258,6 +266,7 @@ export const Layout = ({
 
             <IconButton
               testID="mobile-addons-button"
+              hitSlop={addonButtonHitSlop}
               onPress={() => addonPanelRef.current.setAddonsPanelOpen(true)}
               Icon={BottomBarToggleIcon}
             />
@@ -266,24 +275,22 @@ export const Layout = ({
       ) : null}
 
       {isDesktop ? null : (
-        <SelectedNodeProvider>
-          <MobileMenuDrawer ref={mobileMenuDrawerRef}>
-            <View style={mobileMenuDrawerContentStyle}>
-              <StorybookLogo theme={theme} />
-            </View>
-
-            <Sidebar
-              previewInitialized
-              indexError={undefined}
-              refs={placeholderObject}
-              setSelection={setSelection}
-              status={placeholderObject}
-              index={storyHash}
-              storyId={story?.id}
-              refId={DEFAULT_REF_ID}
-            />
-          </MobileMenuDrawer>
-        </SelectedNodeProvider>
+        <MobileMenuDrawer ref={mobileMenuDrawerRef}>
+          <View style={mobileMenuDrawerContentStyle}>
+            <StorybookLogo theme={theme} />
+          </View>
+
+          <Sidebar
+            previewInitialized
+            indexError={undefined}
+            refs={placeholderObject}
+            setSelection={setSelection}
+            status={placeholderObject}
+            index={storyHash}
+            storyId={story?.id}
+            refId={DEFAULT_REF_ID}
+          />
+        </MobileMenuDrawer>
       )}
 
       {isDesktop ? null : <MobileAddonsPanel ref={addonPanelRef} storyId={story?.id} />}

package/src/MobileMenuDrawer.tsx

@@ -1,30 +1,43 @@
+import { Portal } from '@gorhom/portal';
 import { useTheme } from '@storybook/react-native-theming';
 import {
   forwardRef,
   memo,
   ReactNode,
+  useCallback,
   useEffect,
   useImperativeHandle,
   useMemo,
-  useRef,
   useState,
 } from 'react';
 import {
   Animated,
+  Easing,
   Keyboard,
   useWindowDimensions,
-  Modal,
   PanResponder,
-  PanResponderInstance,
   Pressable,
-  ScrollView,
   View,
+  ViewStyle,
   KeyboardEventListener,
   Platform,
 } from 'react-native';
+
 import { useSelectedNode } from './SelectedNodeProvider';
 import useAnimatedValue from './useAnimatedValue';
 
+const flexStyle: ViewStyle = { flex: 1 };
+
+const portalContainerStyle: ViewStyle = {
+  flex: 1,
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  zIndex: 1000,
+};
+
 interface MobileMenuDrawerProps {
   children: ReactNode | ReactNode[];
 }
@@ -45,6 +58,7 @@ export const useAnimatedModalHeight = () => {
       Animated.timing(animatedHeight, {
         toValue: maxModalHeight,
         duration,
+        easing: Easing.out(Easing.quad),
         useNativeDriver: false,
       }).start();
 
@@ -52,6 +66,7 @@ export const useAnimatedModalHeight = () => {
       Animated.timing(animatedHeight, {
         toValue: modalHeight,
         duration,
+        easing: Easing.out(Easing.quad),
         useNativeDriver: false,
       }).start();
 
@@ -96,53 +111,90 @@ export const useAnimatedModalHeight = () => {
 
 export const MobileMenuDrawer = memo(
   forwardRef<MobileMenuDrawerRef, MobileMenuDrawerProps>(({ children }, ref) => {
-    const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
-    const { scrollToSelectedNode, scrollRef } = useSelectedNode();
+    // const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+    const [isVisible, setIsVisible] = useState(false);
+    const { scrollCallback } = useSelectedNode();
     const theme = useTheme();
+    const { height } = useWindowDimensions();
     const animatedHeight = useAnimatedModalHeight();
 
+    // Slide animation for drawer entrance/exit
+    const slideAnim = useAnimatedValue(height);
+
     // Create a reference for the drag handle animation
     const dragY = useAnimatedValue(0);
 
+    const openDrawer = useCallback(() => {
+      dragY.setValue(0);
+      slideAnim.setValue(height);
+      setIsVisible(true);
+      // setMobileMenuOpen(true);
+      Animated.timing(slideAnim, {
+        toValue: 0,
+        duration: 300,
+        easing: Easing.out(Easing.quad),
+        useNativeDriver: true,
+      }).start(({ finished }) => {
+        if (finished) {
+          // go to the selected story and don't animate
+          scrollCallback({ animated: false, id: undefined });
+        }
+      });
+    }, [dragY, height, scrollCallback, slideAnim]);
+
+    const closeDrawer = useCallback(() => {
+      Keyboard.dismiss();
+      // setMobileMenuOpen(false);
+      Animated.timing(slideAnim, {
+        toValue: height,
+        duration: 300,
+        easing: Easing.in(Easing.quad),
+        useNativeDriver: true,
+      }).start(({ finished }) => {
+        if (finished) {
+          setIsVisible(false);
+        }
+      });
+    }, [height, slideAnim]);
+
     // Create the pan responder for handling drag gestures
-    const panResponder = useRef<PanResponderInstance>(
-      PanResponder.create({
-        onStartShouldSetPanResponder: () => true,
-        onMoveShouldSetPanResponder: (_, gestureState) => {
-          // Only capture downward dragging motions
-          return gestureState.dy > 0;
-        },
-        onPanResponderMove: (_, gestureState) => {
-          // Update dragY based on the gesture
-          if (gestureState.dy > 0) {
-            dragY.setValue(gestureState.dy);
-          }
-        },
-        onPanResponderRelease: (_, gestureState) => {
-          // If dragged down enough, close the drawer
-          if (gestureState.dy > 50) {
-            Keyboard.dismiss();
-            setMobileMenuOpen(false);
-          }
-          // Reset the drag position
-          Animated.timing(dragY, {
-            toValue: 0,
-            duration: 300,
-            useNativeDriver: true,
-          }).start();
-        },
-      })
-    ).current;
+    const panResponder = useMemo(
+      () =>
+        PanResponder.create({
+          onStartShouldSetPanResponder: () => true,
+          onMoveShouldSetPanResponder: (_, gestureState) => {
+            // Only capture downward dragging motions
+            return gestureState.dy > 0;
+          },
+          onPanResponderMove: (_, gestureState) => {
+            // Update dragY based on the gesture
+            if (gestureState.dy > 0) {
+              dragY.setValue(gestureState.dy);
+            }
+          },
+          onPanResponderRelease: (_, gestureState) => {
+            if (gestureState.dy > 50) {
+              closeDrawer();
+            } else {
+              // Only snap back if not closing
+              Animated.timing(dragY, {
+                toValue: 0,
+                duration: 300,
+                easing: Easing.out(Easing.quad),
+                useNativeDriver: true,
+              }).start();
+            }
+          },
+        }),
+      [closeDrawer, dragY]
+    );
 
     useImperativeHandle(ref, () => ({
       setMobileMenuOpen: (open: boolean) => {
         if (open) {
-          dragY.setValue(0);
-          scrollToSelectedNode();
-          setMobileMenuOpen(true);
+          openDrawer();
         } else {
-          Keyboard.dismiss();
-          setMobileMenuOpen(false);
+          closeDrawer();
         }
       },
     }));
@@ -154,68 +206,70 @@ export const MobileMenuDrawer = memo(
         height: 5,
         backgroundColor: theme.color.mediumdark,
         borderRadius: 2.5,
-        alignSelf: 'center' as const, // TypeScript needs this to recognize 'center' as a valid FlexAlignType
-        marginVertical: 8,
+        alignSelf: 'center' as const,
       }),
       [theme.color.mediumdark]
     );
 
+    const drawerContainerStyle = useMemo(
+      () =>
+        ({
+          flex: 1,
+          borderTopColor: theme.appBorderColor,
+          borderTopWidth: 1,
+          borderStyle: 'solid' as const,
+          backgroundColor: theme.background.content,
+          elevation: 8,
+          boxShadow: `0 16px 32px 0 ${theme.color.border}`,
+        }) satisfies ViewStyle,
+      [theme.appBorderColor, theme.background.content, theme.color.border]
+    );
+
+    const dragHandleWrapperStyle = useMemo(
+      () => ({
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        paddingBottom: 16,
+        paddingTop: 10,
+        backgroundColor: theme.background.content,
+      }),
+      [theme.background.content]
+    );
+
+    const childrenWrapperStyle = useMemo(
+      () => ({
+        flex: 1,
+        backgroundColor: theme.background.content,
+      }),
+      [theme.background.content]
+    );
+
     return (
-      <Modal
-        visible={mobileMenuOpen}
-        animationType="slide"
-        transparent
-        statusBarTranslucent
-        onRequestClose={() => setMobileMenuOpen(false)}
-      >
-        <Animated.View style={{ flex: 1 }}>
-          <View style={{ flex: 1 }}>
-            <Pressable style={{ flex: 1 }} onPress={() => setMobileMenuOpen(false)}></Pressable>
+      <Portal hostName="storybook-lite-ui-root">
+        <Animated.View
+          style={[portalContainerStyle, { transform: [{ translateY: slideAnim }] }]}
+          pointerEvents={isVisible ? 'auto' : 'none'}
+        >
+          <View style={flexStyle}>
+            <Pressable style={flexStyle} onPress={closeDrawer} />
           </View>
 
-          <Animated.View style={{ height: animatedHeight }}>
-            <Animated.View
-              style={[
-                {
-                  flex: 1,
-                  borderTopColor: theme.appBorderColor,
-                  borderTopWidth: 1,
-                  borderStyle: 'solid',
-                  backgroundColor: theme.background.content,
-                  elevation: 8,
-                },
-                { transform: [{ translateY: dragY }] },
-              ]}
-            >
+          <Animated.View
+            style={{
+              height: animatedHeight,
+            }}
+          >
+            <Animated.View style={[drawerContainerStyle, { transform: [{ translateY: dragY }] }]}>
               {/* Drag handle */}
-              <View
-                {...panResponder.panHandlers}
-                style={{
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  backgroundColor: theme.background.content,
-                }}
-              >
+              <View {...panResponder.panHandlers} style={dragHandleWrapperStyle}>
                 <View style={handleStyle} />
               </View>
 
-              <ScrollView
-                ref={scrollRef}
-                keyboardShouldPersistTaps="handled"
-                style={{
-                  flex: 1,
-                  paddingBottom: 150,
-                  alignSelf: 'flex-end',
-                  width: '100%',
-                  backgroundColor: theme.background.content,
-                }}
-              >
-                {children}
-              </ScrollView>
+              <View style={childrenWrapperStyle}>{children}</View>
             </Animated.View>
           </Animated.View>
         </Animated.View>
-      </Modal>
+      </Portal>
     );
   })
 );

package/src/Refs.tsx

@@ -14,7 +14,7 @@ export interface RefProps {
 }
 
 const Wrapper = styled.View<{ isMain: boolean }>(() => ({
-  position: 'relative',
+  flex: 1,
 }));
 
 export const Ref: FC<RefType & RefProps & { status?: State['status'] }> = React.memo(