feat: scroll to selected story (#684)

dannyhw · web-flow · commit bf05573aa2cb · 2025-02-13T16:52:18.000Z
* feat: scroll to selected story

* fix: avoid state for this

* v8.5.5-alpha.3

* feat: also scroll when selecting in search

* v8.5.5-y.0

* v8.5.5-alpha.4
diff --git a/examples/expo-example/package.json b/examples/expo-example/package.json
@@ -1,6 +1,6 @@
 {
   "name": "expo-example",
-  "version": "8.5.5-alpha.2",
+  "version": "8.5.5-alpha.4",
   "private": true,
   "main": "index.js",
   "scripts": {
@@ -28,19 +28,19 @@
     "@storybook/addon-essentials": "^8.5.1",
     "@storybook/addon-interactions": "^8.5.1",
     "@storybook/addon-links": "^8.5.1",
-    "@storybook/addon-ondevice-actions": "^8.5.5-alpha.2",
-    "@storybook/addon-ondevice-backgrounds": "^8.5.5-alpha.2",
-    "@storybook/addon-ondevice-controls": "^8.5.5-alpha.2",
-    "@storybook/addon-ondevice-notes": "^8.5.5-alpha.2",
+    "@storybook/addon-ondevice-actions": "^8.5.5-alpha.4",
+    "@storybook/addon-ondevice-backgrounds": "^8.5.5-alpha.4",
+    "@storybook/addon-ondevice-controls": "^8.5.5-alpha.4",
+    "@storybook/addon-ondevice-notes": "^8.5.5-alpha.4",
     "@storybook/addon-react-native-server": "0.0.6",
     "@storybook/addon-react-native-web": "^0.0.26",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
     "@storybook/blocks": "^8.5.1",
     "@storybook/builder-webpack5": "^8.5.1",
     "@storybook/global": "^5.0.0",
     "@storybook/react": "^8.5.1",
-    "@storybook/react-native": "^8.5.5-alpha.2",
-    "@storybook/react-native-theming": "^8.5.5-alpha.2",
+    "@storybook/react-native": "^8.5.5-alpha.4",
+    "@storybook/react-native-theming": "^8.5.5-alpha.4",
     "@storybook/react-webpack5": "^8.5.1",
     "@storybook/test": "^8.5.1",
     "expo": "~52.0.11",
diff --git a/lerna.json b/lerna.json
@@ -1,5 +1,5 @@
 {
   "npmClient": "yarn",
   "registry": "https://registry.npmjs.org",
-  "version": "8.5.5-alpha.2"
+  "version": "8.5.5-alpha.4"
 }
diff --git a/packages/ondevice-actions/package.json b/packages/ondevice-actions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-actions",
-  "version": "8.5.5-alpha.2",
+  "version": "8.5.5-alpha.4",
   "description": "Action Logger addon for react-native storybook",
   "keywords": [
     "storybook"
diff --git a/packages/ondevice-backgrounds/package.json b/packages/ondevice-backgrounds/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-backgrounds",
-  "version": "8.5.5-alpha.2",
+  "version": "8.5.5-alpha.4",
   "description": "A react-native storybook addon to show different backgrounds for your preview",
   "keywords": [
     "addon",
@@ -33,7 +33,7 @@
   },
   "dependencies": {
     "@storybook/core": "^8.5.1",
-    "@storybook/react-native-theming": "^8.5.5-alpha.2"
+    "@storybook/react-native-theming": "^8.5.5-alpha.4"
   },
   "devDependencies": {
     "typescript": "^5.3.3"
diff --git a/packages/ondevice-controls/package.json b/packages/ondevice-controls/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-controls",
-  "version": "8.5.5-alpha.2",
+  "version": "8.5.5-alpha.4",
   "description": "Display storybook controls on your device.",
   "keywords": [
     "addon",
@@ -32,8 +32,8 @@
   "dependencies": {
     "@storybook/addon-controls": "^8.5.1",
     "@storybook/core": "^8.5.1",
-    "@storybook/react-native-theming": "^8.5.5-alpha.2",
-    "@storybook/react-native-ui": "^8.5.5-alpha.2",
+    "@storybook/react-native-theming": "^8.5.5-alpha.4",
+    "@storybook/react-native-ui": "^8.5.5-alpha.4",
     "deep-equal": "^1.0.1",
     "prop-types": "^15.7.2",
     "react-native-modal-datetime-picker": "^18.0.0",
diff --git a/packages/ondevice-notes/package.json b/packages/ondevice-notes/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-notes",
-  "version": "8.5.5-alpha.2",
+  "version": "8.5.5-alpha.4",
   "description": "Write notes for your react-native Storybook stories.",
   "keywords": [
     "addon",
@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@storybook/core": "^8.5.1",
-    "@storybook/react-native-theming": "^8.5.5-alpha.2",
+    "@storybook/react-native-theming": "^8.5.5-alpha.4",
     "react-native-markdown-display": "^7.0.2"
   },
   "devDependencies": {
diff --git a/packages/react-native-theming/package.json b/packages/react-native-theming/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-theming",
-  "version": "8.5.5-alpha.2",
+  "version": "8.5.5-alpha.4",
   "description": "A wrapper library around emotion 11 to provide theming support for react-native storybook",
   "keywords": [
     "react",
diff --git a/packages/react-native-ui/package.json b/packages/react-native-ui/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",
diff --git a/packages/react-native-ui/src/Layout.tsx b/packages/react-native-ui/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} />}
diff --git a/packages/react-native-ui/src/MobileMenuDrawer.tsx b/packages/react-native-ui/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}
         >
diff --git a/packages/react-native-ui/src/Search.tsx b/packages/react-native-ui/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(
diff --git a/packages/react-native-ui/src/SelectedNodeProvider.tsx b/packages/react-native-ui/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);
diff --git a/packages/react-native-ui/src/Tree.tsx b/packages/react-native-ui/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,18 +53,28 @@ 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;
   }
 
   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>
     );
   }
diff --git a/packages/react-native-ui/src/TreeNode.tsx b/packages/react-native-ui/src/TreeNode.tsx
diff --git a/packages/react-native/package.json b/packages/react-native/package.json
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`	`2`	`"npmClient": "yarn",`
`3`	`3`	`"registry": "https://registry.npmjs.org",`
`4`		`- "version": "8.5.5-alpha.2"`
	`4`	`+ "version": "8.5.5-alpha.4"`
`5`	`5`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@storybook/addon-ondevice-actions",`
`3`		`- "version": "8.5.5-alpha.2",`
	`3`	`+ "version": "8.5.5-alpha.4",`
`4`	`4`	`"description": "Action Logger addon for react-native storybook",`
`5`	`5`	`"keywords": [`
`6`	`6`	`"storybook"`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@storybook/react-native-theming",`
`3`		`- "version": "8.5.5-alpha.2",`
	`3`	`+ "version": "8.5.5-alpha.4",`
`4`	`4`	`"description": "A wrapper library around emotion 11 to provide theming support for react-native storybook",`
`5`	`5`	`"keywords": [`
`6`	`6`	`"react",`