@storybook/react-native-ui 8.5.5-alpha.2 → 8.5.5-alpha.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-ui",
-  "version": "8.5.5-alpha.2",
+  "version": "8.5.5-alpha.4",
   "description": "ui components for react native storybook",
   "keywords": [
     "react",
@@ -60,7 +60,7 @@
   "dependencies": {
     "@storybook/core": "^8.5.1",
     "@storybook/react": "^8.5.1",
-    "@storybook/react-native-theming": "^8.5.5-alpha.2",
+    "@storybook/react-native-theming": "^8.5.5-alpha.4",
     "fuse.js": "^7.0.0",
     "memoizerific": "^1.11.3",
     "polished": "^4.3.1",
@@ -81,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "08215ac1fa39a7c2105d03fc861e4f6a138030c8"
+  "gitHead": "1d84b44bf483612cdb27f8bf9b36dfd931776511"
 }

package/src/Layout.tsx

@@ -19,6 +19,7 @@ import { CloseFullscreenIcon } from './icon/CloseFullscreenIcon';
 import { FullscreenIcon } from './icon/FullscreenIcon';
 import { MenuIcon } from './icon/MenuIcon';
 import { useStyle } from './util/useStyle';
+import { SelectedNodeProvider } from './SelectedNodeProvider';
 
 const desktopLogoContainer = {
   flexDirection: 'row',
@@ -249,23 +250,25 @@ export const Layout = ({
       ) : null}
 
       {isDesktop ? null : (
-        <MobileMenuDrawer ref={mobileMenuDrawerRef}>
-          <View style={mobileMenuDrawerContentStyle}>
-            <StorybookLogo theme={theme} />
-          </View>
-
-          <Sidebar
-            extra={placeholderArray}
-            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
+              extra={placeholderArray}
+              previewInitialized
+              indexError={undefined}
+              refs={placeholderObject}
+              setSelection={setSelection}
+              status={placeholderObject}
+              index={storyHash}
+              storyId={story?.id}
+              refId={DEFAULT_REF_ID}
+            />
+          </MobileMenuDrawer>
+        </SelectedNodeProvider>
       )}
 
       {isDesktop ? null : <MobileAddonsPanel ref={addonPanelRef} storyId={story?.id} />}

package/src/MobileMenuDrawer.tsx

@@ -3,11 +3,12 @@ import BottomSheet, {
   BottomSheetBackdropProps,
   BottomSheetScrollView,
 } from '@gorhom/bottom-sheet';
-import { ReactNode, forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
+import { useTheme } from '@storybook/react-native-theming';
+import { forwardRef, memo, ReactNode, useImperativeHandle, useMemo, useRef } from 'react';
 import { Keyboard } from 'react-native';
 import { useReducedMotion } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useTheme } from '@storybook/react-native-theming';
+import { useSelectedNode } from './SelectedNodeProvider';
 
 interface MobileMenuDrawerProps {
   children: ReactNode | ReactNode[];
@@ -34,18 +35,18 @@ export const MobileMenuDrawer = memo(
     const reducedMotion = useReducedMotion();
     const insets = useSafeAreaInsets();
     const theme = useTheme();
-
     const menuBottomSheetRef = useRef<BottomSheet>(null);
+    const { scrollToSelectedNode, scrollRef } = useSelectedNode();
 
     useImperativeHandle(ref, () => ({
       setMobileMenuOpen: (open: boolean) => {
         if (open) {
-          // menuBottomSheetRef.current?.present();
           menuBottomSheetRef.current?.snapToIndex(1);
+
+          scrollToSelectedNode();
         } else {
           Keyboard.dismiss();
 
-          // menuBottomSheetRef.current?.dismiss();
           menuBottomSheetRef.current?.close();
         }
       },
@@ -82,6 +83,7 @@ export const MobileMenuDrawer = memo(
         handleIndicatorStyle={handleIndicatorStyle}
       >
         <BottomSheetScrollView
+          ref={scrollRef}
           keyboardShouldPersistTaps="handled"
           contentContainerStyle={contentContainerStyle}
         >

package/src/Search.tsx

@@ -18,6 +18,7 @@ import {
 } from './types';
 import { getGroupStatus, getHighestStatus } from './util/status';
 import { searchItem } from './util/tree';
+import { useSelectedNode } from './SelectedNodeProvider';
 
 const DEFAULT_MAX_SEARCH_RESULTS = 50;
 
@@ -111,6 +112,7 @@ export const Search = React.memo<{
   const [isOpen, setIsOpen] = useState(false);
   const [allComponents, showAllComponents] = useState(false);
   const { isMobile } = useLayout();
+  const { scrollToSelectedNode } = useSelectedNode();
 
   const selectStory = useCallback(
     (id: string, refId: string) => {
@@ -121,8 +123,10 @@ export const Search = React.memo<{
       setIsOpen(false);
 
       showAllComponents(false);
+
+      scrollToSelectedNode();
     },
-    [setSelection]
+    [scrollToSelectedNode, setSelection]
   );
 
   const getItemProps: GetSearchItemProps = useCallback(

package/src/SelectedNodeProvider.tsx

@@ -0,0 +1,58 @@
+import { BottomSheetScrollViewMethods } from '@gorhom/bottom-sheet/lib/typescript/components/bottomSheetScrollable/types';
+import type { FC, PropsWithChildren } from 'react';
+import { createContext, useCallback, useContext, useRef } from 'react';
+import type { View } from 'react-native';
+
+type SelectedNodeContextType = {
+  nodeRef: React.RefObject<View>;
+  setNodeRef: (node: View | null) => void;
+  scrollToSelectedNode: () => void;
+  scrollRef: React.RefObject<BottomSheetScrollViewMethods>;
+};
+
+const SelectedNodeContext = createContext<SelectedNodeContextType>({
+  nodeRef: { current: null },
+  setNodeRef: () => {},
+  scrollToSelectedNode: () => {},
+  scrollRef: null,
+});
+
+export const SelectedNodeProvider: FC<PropsWithChildren> = ({ children }) => {
+  const nodeRef = useRef<View | null>(null);
+
+  const setNodeRef = useCallback((node: View | null) => {
+    nodeRef.current = node;
+  }, []);
+
+  const scrollRef = useRef<BottomSheetScrollViewMethods>(null);
+
+  const scrollToSelectedNode = useCallback(() => {
+    // maybe later we can improve on this to not use setTimeout but right now it seems like the simplest solution
+    setTimeout(() => {
+      if (nodeRef?.current && scrollRef?.current) {
+        // im just not sure if older versions would error here,
+        // since measure layout probably changed since new arch
+        try {
+          nodeRef.current.measureLayout?.(scrollRef.current as any, (_x, y) => {
+            scrollRef.current?.scrollTo({ y: y - 100, animated: true });
+          });
+        } catch (error) {}
+      }
+    }, 500);
+  }, []);
+
+  return (
+    <SelectedNodeContext.Provider
+      value={{
+        nodeRef,
+        setNodeRef,
+        scrollToSelectedNode,
+        scrollRef,
+      }}
+    >
+      {children}
+    </SelectedNodeContext.Provider>
+  );
+};
+
+export const useSelectedNode = () => useContext(SelectedNodeContext);

package/src/Tree.tsx

@@ -18,6 +18,7 @@ import type { ExpandAction, ExpandedState } from './hooks/useExpanded';
 import { useExpanded } from './hooks/useExpanded';
 import { getGroupStatus, statusMapping } from './util/status';
 import { createId, getAncestorIds, getDescendantIds, isStoryHoistable } from './util/tree';
+import { useSelectedNode } from './SelectedNodeProvider';
 
 interface NodeProps {
   item: Item;
@@ -52,6 +53,17 @@ export const Node = React.memo<NodeProps>(function Node({
   setExpanded,
   onSelectStoryId,
 }) {
+  const { setNodeRef } = useSelectedNode();
+
+  const setRef = useCallback(
+    (node: View | null) => {
+      if (isSelected && node) {
+        setNodeRef(node);
+      }
+    },
+    [isSelected, setNodeRef]
+  );
+
   if (!isDisplayed) {
     return null;
   }
@@ -59,11 +71,10 @@ export const Node = React.memo<NodeProps>(function Node({
   const id = createId(item.id, refId);
 
   if (item.type === 'story') {
-    const LeafNode = StoryNode;
-
     return (
       <LeafNodeStyleWrapper>
-        <LeafNode
+        <StoryNode
+          ref={setRef}
           selected={isSelected}
           key={id}
           id={id}
@@ -73,7 +84,7 @@ export const Node = React.memo<NodeProps>(function Node({
           }}
         >
           {(item.renderLabel as (i: typeof item) => React.ReactNode)?.(item) || item.name}
-        </LeafNode>
+        </StoryNode>
       </LeafNodeStyleWrapper>
     );
   }

package/src/TreeNode.tsx

@@ -1,11 +1,12 @@
 import { styled, useTheme } from '@storybook/react-native-theming';
 import { ComponentIcon } from './icon/ComponentIcon';
 import { GroupIcon } from './icon/GroupIcon';
-
 import { StoryIcon } from './icon/StoryIcon';
 import { CollapseIcon } from './icon/CollapseIcon';
-import React, { ComponentProps, FC, useMemo } from 'react';
+import { ComponentProps, FC, forwardRef, useMemo } from 'react';
 import { transparentize } from 'polished';
+import { View } from 'react-native';
+import React from 'react';
 
 export interface NodeProps {
   children: React.ReactNode | React.ReactNode[];
@@ -131,22 +132,26 @@ export const ComponentNode: FC<ComponentProps<typeof BranchNode>> = React.memo(
   }
 );
 
-export const StoryNode: FC<ComponentProps<typeof LeafNode>> = React.memo(function StoryNode({
-  children,
-  ...props
-}) {
-  const theme = useTheme();
+export const StoryNode = React.memo(
+  forwardRef<View, ComponentProps<typeof LeafNode>>(function StoryNode(
+    { children, ...props },
+    ref
+  ) {
+    const theme = useTheme();
 
-  const color = useMemo(() => {
-    return props.selected ? theme.color.lightest : theme.color.seafoam;
-  }, [props.selected, theme.color.lightest, theme.color.seafoam]);
+    const color = useMemo(() => {
+      return props.selected ? theme.color.lightest : theme.color.seafoam;
+    }, [props.selected, theme.color.lightest, theme.color.seafoam]);
 
-  return (
-    <LeafNode {...props}>
-      <Wrapper>
-        <StoryIcon width={14} height={14} color={color} />
-      </Wrapper>
-      <LeafNodeText selected={props.selected}>{children}</LeafNodeText>
-    </LeafNode>
-  );
-});
+    return (
+      <LeafNode {...props} ref={ref}>
+        <Wrapper>
+          <StoryIcon width={14} height={14} color={color} />
+        </Wrapper>
+        <LeafNodeText selected={props.selected}>{children}</LeafNodeText>
+      </LeafNode>
+    );
+  })
+);
+
+StoryNode.displayName = 'StoryNode';