@storybook/react-native-ui 9.0.0-alpha.8 → 9.0.0-beta.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-ui",
-  "version": "9.0.0-alpha.8",
+  "version": "9.0.0-beta.10",
   "description": "ui components for react native storybook",
   "keywords": [
     "react",
@@ -49,17 +49,17 @@
   },
   "devDependencies": {
     "@types/jest": "^29.4.3",
-    "@types/react": "~18.3.12",
+    "@types/react": "~19.0.10",
     "babel-jest": "^29.7.0",
     "jest": "^29.7.0",
-    "react-test-renderer": "^18.3.1",
+    "react-test-renderer": "^19.1.0",
     "ts-dedent": "^2.2.0",
     "tsup": "^7.2.0",
-    "typescript": "^5.3.3"
+    "typescript": "~5.8.3"
   },
   "dependencies": {
-    "@storybook/react": "9.0.0-alpha.8",
-    "@storybook/react-native-theming": "^9.0.0-alpha.8",
+    "@storybook/react": "9.0.0-beta.10",
+    "@storybook/react-native-theming": "^9.0.0-beta.10",
     "fuse.js": "^7.0.0",
     "memoizerific": "^1.11.3",
     "polished": "^4.3.1",
@@ -73,7 +73,7 @@
     "react-native-reanimated": ">=3",
     "react-native-safe-area-context": "*",
     "react-native-svg": ">=14",
-    "storybook": "9.0.0-alpha.8"
+    "storybook": "9.0.0-beta.10"
   },
   "engines": {
     "node": ">=18.0.0"
@@ -81,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "16659266d8aa9816490af41d0a840579a2f96805"
+  "gitHead": "bce7f35509d03e5a5efabb8862e993ea98e201d6"
 }

package/src/Layout.tsx

@@ -30,14 +30,13 @@ const desktopLogoContainer = {
   paddingRight: 10,
   justifyContent: 'space-between',
 } satisfies ViewStyle;
+
 const contentContainerStyle = { 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;
@@ -177,7 +176,6 @@ export const Layout = ({
               </View>
 
               <Sidebar
-                extra={placeholderArray}
                 previewInitialized
                 indexError={undefined}
                 refs={placeholderObject}
@@ -257,7 +255,6 @@ export const Layout = ({
             </View>
 
             <Sidebar
-              extra={placeholderArray}
               previewInitialized
               indexError={undefined}
               refs={placeholderObject}

package/src/MobileAddonsPanel.tsx

@@ -1,6 +1,6 @@
 import { BottomSheetModal } from '@gorhom/bottom-sheet';
 import { addons } from 'storybook/internal/manager-api';
-import { styled } from '@storybook/react-native-theming';
+import { styled, useTheme } from '@storybook/react-native-theming';
 import { Addon_TypesEnum } from 'storybook/internal/types';
 import { forwardRef, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { Platform, StyleProp, Text, View, ViewStyle, useWindowDimensions } from 'react-native';
@@ -12,7 +12,6 @@ import Animated, {
   useSharedValue,
 } from 'react-native-reanimated';
 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';
@@ -108,6 +107,8 @@ export const MobileAddonsPanel = forwardRef<MobileAddonsPanelRef, { storyId?: st
   }
 );
 
+MobileAddonsPanel.displayName = 'MobileAddonsPanel';
+
 const addonsTabsContainerStyle = {
   flex: 1,
 } satisfies StyleProp<ViewStyle>;

package/src/Refs.tsx

@@ -13,70 +13,70 @@ export interface RefProps {
   setSelection: (selection: { refId: string; storyId: string }) => void;
 }
 
-const Wrapper = styled.View<{ isMain: boolean }>(({}) => ({
+const Wrapper = styled.View<{ isMain: boolean }>(() => ({
   position: 'relative',
 }));
 
-export const Ref: FC<RefType & RefProps & { status?: State['status'] }> = React.memo(function Ref(
-  props
-) {
-  const {
-    index,
-    id: refId,
-    title = refId,
-    isLoading: isLoadingMain,
-    isBrowsing,
-    selectedStoryId,
-    loginUrl,
-    type,
-    expanded = true,
-    indexError,
-    previewInitialized,
-    setSelection,
-  } = props;
-  const length = useMemo(() => (index ? Object.keys(index).length : 0), [index]);
+export const Ref: FC<RefType & RefProps & { status?: State['status'] }> = React.memo(
+  function Ref(props) {
+    const {
+      index,
+      id: refId,
+      title = refId,
+      isLoading: isLoadingMain,
+      isBrowsing,
+      selectedStoryId,
+      loginUrl,
+      type,
+      expanded = true,
+      indexError,
+      previewInitialized,
+      setSelection,
+    } = props;
+    const length = useMemo(() => (index ? Object.keys(index).length : 0), [index]);
 
-  const isLoadingInjected =
-    (type === 'auto-inject' && !previewInitialized) || type === 'server-checked';
-  const isLoading = isLoadingMain || isLoadingInjected || type === 'unknown';
-  const isError = !!indexError;
-  const isEmpty = !isLoading && length === 0;
-  const isAuthRequired = !!loginUrl && length === 0;
+    const isLoadingInjected =
+      (type === 'auto-inject' && !previewInitialized) || type === 'server-checked';
+    const isLoading = isLoadingMain || isLoadingInjected || type === 'unknown';
+    const isError = !!indexError;
+    const isEmpty = !isLoading && length === 0;
+    const isAuthRequired = !!loginUrl && length === 0;
 
-  const state = getStateType(isLoading, isAuthRequired, isError, isEmpty);
-  const [isExpanded, setExpanded] = useState<boolean>(expanded);
+    const state = getStateType(isLoading, isAuthRequired, isError, isEmpty);
+    const [isExpanded, setExpanded] = useState<boolean>(expanded);
 
-  useEffect(() => {
-    if (index && selectedStoryId && index[selectedStoryId]) {
-      setExpanded(true);
-    }
-  }, [setExpanded, index, selectedStoryId]);
+    useEffect(() => {
+      if (index && selectedStoryId && index[selectedStoryId]) {
+        setExpanded(true);
+      }
+    }, [setExpanded, index, selectedStoryId]);
 
-  const onSelectStoryId = useCallback(
-    (storyId: string) => {
-      setSelection({ refId, storyId });
-    },
-    [refId, setSelection]
-  );
+    const onSelectStoryId = useCallback(
+      (storyId: string) => {
+        setSelection({ refId, storyId });
+      },
+      [refId, setSelection]
+    );
 
-  return (
-    <>
-      {isExpanded && (
-        <Wrapper data-title={title} isMain={true}>
-          {state === 'ready' && (
-            <Tree
-              status={props.status}
-              isBrowsing={isBrowsing}
-              isMain={true}
-              refId={refId}
-              data={index}
-              docsMode={false}
-              selectedStoryId={selectedStoryId}
-              onSelectStoryId={onSelectStoryId}
-            />
-          )}
-        </Wrapper>
-      )}
-    </>
-  );
-});
+    return (
+      <>
+        {isExpanded && (
+          <Wrapper data-title={title} isMain={true}>
+            {state === 'ready' && (
+              <Tree
+                status={props.status}
+                isBrowsing={isBrowsing}
+                isMain={true}
+                refId={refId}
+                data={index}
+                docsMode={false}
+                selectedStoryId={selectedStoryId}
+                onSelectStoryId={onSelectStoryId}
+              />
+            )}
+          </Wrapper>
+        )}
+      </>
+    );
+  }
+);

package/src/Search.tsx

@@ -2,11 +2,11 @@ import { BottomSheetTextInput, useBottomSheetInternal } from '@gorhom/bottom-she
 import { styled } from '@storybook/react-native-theming';
 import type { IFuseOptions } from 'fuse.js';
 import Fuse from 'fuse.js';
-import React, { useCallback, useContext, useDeferredValue, useRef, useState } from 'react';
+import React, { useCallback, useDeferredValue, useRef, useState } from 'react';
 import { Platform, TextInput, View } from 'react-native';
 import { CloseIcon } from './icon/CloseIcon';
 import { SearchIcon } from './icon/SearchIcon';
-import { useLayout } from './LayoutProvider';
+import { useSelectedNode } from './SelectedNodeProvider';
 import {
   type CombinedDataset,
   type GetSearchItemProps,
@@ -17,7 +17,6 @@ import {
   type Selection,
 } from './types';
 import { searchItem } from './util/tree';
-import { useSelectedNode } from './SelectedNodeProvider';
 
 const DEFAULT_MAX_SEARCH_RESULTS = 50;
 
@@ -112,7 +111,7 @@ export const Search = React.memo<{
   const [inputValue, setInputValue] = useState(initialQuery);
   const [isOpen, setIsOpen] = useState(false);
   const [allComponents, showAllComponents] = useState(false);
-  const { isMobile } = useLayout();
+  // const { isMobile } = useLayout();
   const { scrollToSelectedNode } = useSelectedNode();
 
   const selectStory = useCallback(

package/src/SelectedNodeProvider.tsx

@@ -36,7 +36,8 @@ export const SelectedNodeProvider: FC<PropsWithChildren> = ({ children }) => {
           nodeRef.current.measureLayout?.(scrollRef.current as any, (_x, y) => {
             scrollRef.current?.scrollTo({ y: y - 100, animated: true });
           });
-        } catch (error) {}
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        } catch (_error) {}
       }
     }, 500);
   }, []);

package/src/Sidebar.stories.tsx

@@ -1,16 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import type { IndexHash, State } from 'storybook/internal/manager-api';
-import { types } from 'storybook/internal/manager-api';
-import type { StoryObj, Meta } from '@storybook/react';
-import type { Addon_SidebarTopType } from 'storybook/internal/types';
+import { Button } from './Button';
+import { LayoutProvider } from './LayoutProvider';
 import { Sidebar } from './Sidebar';
+import { DEFAULT_REF_ID } from './constants';
 import { mockDataset } from './mockdata';
 import type { RefType } from './types';
-import { LayoutProvider } from './LayoutProvider';
-import { Button } from './Button';
-import { IconButton } from './IconButton';
-import { FaceHappyIcon } from './icon/FaceHappyIcon';
-import { DEFAULT_REF_ID } from './constants';
 
 const index = mockDataset.withRoot as IndexHash;
 const storyId = 'root-1-child-a2--grandchild-a1-1';
@@ -22,7 +18,6 @@ const meta = {
   parameters: { layout: 'fullscreen' },
   args: {
     previewInitialized: true,
-    extra: [] as Addon_SidebarTopType[],
     index: index,
     storyId,
     refId: DEFAULT_REF_ID,
@@ -159,37 +154,6 @@ export const Searching: Story = {
   parameters: { chromatic: { delay: 2200 } },
 };
 
-export const Bottom: Story = {
-  args: {
-    bottom: [
-      {
-        id: '1',
-        type: types.experimental_SIDEBAR_BOTTOM,
-        render: () => (
-          <Button>
-            <FaceHappyIcon />
-            Custom addon A
-          </Button>
-        ),
-      },
-      {
-        id: '2',
-        type: types.experimental_SIDEBAR_BOTTOM,
-        render: () => <Button text="Custom addon B" Icon={FaceHappyIcon} />,
-      },
-      {
-        id: '3',
-        type: types.experimental_SIDEBAR_BOTTOM,
-        render: () => (
-          <IconButton>
-            <FaceHappyIcon />
-          </IconButton>
-        ),
-      },
-    ],
-  },
-};
-
 /**
  * Given the following sequence of events:
  * 1. Story is selected at the top of the sidebar

package/src/Sidebar.tsx

@@ -1,11 +1,7 @@
 import React, { useMemo } from 'react';
 import { styled } from '@storybook/react-native-theming';
 import type { State } from 'storybook/internal/manager-api';
-import type {
-  Addon_SidebarBottomType,
-  Addon_SidebarTopType,
-  API_LoadedRefData,
-} from 'storybook/internal/types';
+import type { API_LoadedRefData } from 'storybook/internal/types';
 import { Explorer } from './Explorer';
 import { Search } from './Search';
 import { SearchResults } from './SearchResults';
@@ -74,8 +70,6 @@ export const useCombination = (
 export interface SidebarProps extends API_LoadedRefData {
   refs: State['refs'];
   status: State['status'];
-  extra: Addon_SidebarTopType[];
-  bottom?: Addon_SidebarBottomType[];
   storyId?: string;
   refId?: string;
   menuHighlighted?: boolean;

package/src/Tree.tsx

@@ -16,7 +16,6 @@ import { ExpandAllIcon } from './icon/ExpandAllIcon';
 import { Item } from './types';
 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';
 
@@ -158,7 +157,7 @@ export const LeafNodeStyleWrapper = styled.View(({ theme }) => ({
   borderRadius: 4,
 }));
 
-export const RootNode = styled.View(({}) => ({
+export const RootNode = styled.View(() => ({
   display: 'flex',
   flexDirection: 'row',
   alignItems: 'center',
@@ -177,7 +176,7 @@ export const RootNodeText = styled.Text(({ theme }) => ({
   textTransform: 'uppercase',
 }));
 
-const CollapseButton = styled.TouchableOpacity(({}) => ({
+const CollapseButton = styled.TouchableOpacity(() => ({
   display: 'flex',
   flexDirection: 'row',
   paddingVertical: 0,

package/src/TreeNode.tsx

@@ -3,10 +3,9 @@ import { ComponentIcon } from './icon/ComponentIcon';
 import { GroupIcon } from './icon/GroupIcon';
 import { StoryIcon } from './icon/StoryIcon';
 import { CollapseIcon } from './icon/CollapseIcon';
-import { ComponentProps, FC, forwardRef, useMemo } from 'react';
+import React, { 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[];

package/src/hooks/useExpanded.ts

@@ -1,5 +1,5 @@
 import type { StoriesHash } from 'storybook/internal/manager-api';
-import type { Dispatch, Reducer } from 'react';
+import type { Dispatch } from 'react';
 import { useCallback, useEffect, useReducer } from 'react';
 import { getAncestorIds } from '../util/tree';
 
@@ -44,16 +44,8 @@ export const useExpanded = ({
 }: ExpandedProps): [ExpandedState, Dispatch<ExpandAction>] => {
   // Track the set of currently expanded nodes within this tree.
   // Root nodes are expanded by default.
-  const [expanded, setExpanded] = useReducer<
-    Reducer<ExpandedState, ExpandAction>,
-    {
-      refId: string;
-      data: StoriesHash;
-      rootIds: string[];
-      initialExpanded: ExpandedState;
-    }
-  >(
-    (state, { ids, value }) =>
+  const [expanded, setExpanded] = useReducer(
+    (state: ExpandedState, { ids, value }: ExpandAction) =>
       ids.reduce((acc, id) => Object.assign(acc, { [id]: value }), { ...state }),
     { refId, data, rootIds, initialExpanded },
     initializeExpanded

package/src/util/StoryHash.ts

@@ -17,6 +17,10 @@ import type {
 } from 'storybook/internal/types';
 import countBy from 'lodash/countBy.js';
 import { dedent } from 'ts-dedent';
+import isEqual from 'lodash/isEqual.js';
+import mergeWith from 'lodash/mergeWith.js';
+import { logger } from 'storybook/internal/client-logger';
+
 type ToStoriesHashOptions = {
   provider: API_Provider<API>;
   docsOptions: DocsOptions;
@@ -24,11 +28,6 @@ type ToStoriesHashOptions = {
   status: State['status'];
 };
 
-import isEqual from 'lodash/isEqual.js';
-import mergeWith from 'lodash/mergeWith.js';
-
-import { logger } from 'storybook/internal/client-logger';
-
 const merge = <TObj = any>(a: TObj, b: Partial<TObj>) =>
   mergeWith({}, a, b, (objValue: TObj, srcValue: Partial<TObj>) => {
     if (Array.isArray(srcValue) && Array.isArray(objValue)) {
@@ -202,16 +201,19 @@ export const transformStoryIndexToStoriesHash = (
 export const transformStoryIndexV2toV3 = (index: StoryIndexV2): StoryIndexV3 => {
   return {
     v: 3,
-    stories: Object.values(index.stories).reduce((acc, entry) => {
-      acc[entry.id] = {
-        ...entry,
-        title: entry.kind,
-        name: entry.name || entry.story,
-        importPath: entry.parameters.fileName || '',
-      };
-
-      return acc;
-    }, {} as StoryIndexV3['stories']),
+    stories: Object.values(index.stories).reduce(
+      (acc, entry) => {
+        acc[entry.id] = {
+          ...entry,
+          title: entry.kind,
+          name: entry.name || entry.story,
+          importPath: entry.parameters.fileName || '',
+        };
+
+        return acc;
+      },
+      {} as StoryIndexV3['stories']
+    ),
   };
 };
 
@@ -219,26 +221,29 @@ export const transformStoryIndexV3toV4 = (index: StoryIndexV3): API_PreparedStor
   const countByTitle = countBy(Object.values(index.stories), 'title');
   return {
     v: 4,
-    entries: Object.values(index.stories).reduce((acc, entry: any) => {
-      let type: IndexEntry['type'] = 'story';
-      if (
-        entry.parameters?.docsOnly ||
-        (entry.name === 'Page' && countByTitle[entry.title] === 1)
-      ) {
-        type = 'docs';
-      }
-      acc[entry.id] = {
-        type,
-        ...(type === 'docs' && { tags: ['stories-mdx'], storiesImports: [] }),
-        ...entry,
-      };
-
-      // @ts-expect-error (we're removing something that should not be there)
-      delete acc[entry.id].story;
-      // @ts-expect-error (we're removing something that should not be there)
-      delete acc[entry.id].kind;
-
-      return acc;
-    }, {} as API_PreparedStoryIndex['entries']),
+    entries: Object.values(index.stories).reduce(
+      (acc, entry: any) => {
+        let type: IndexEntry['type'] = 'story';
+        if (
+          entry.parameters?.docsOnly ||
+          (entry.name === 'Page' && countByTitle[entry.title] === 1)
+        ) {
+          type = 'docs';
+        }
+        acc[entry.id] = {
+          type,
+          ...(type === 'docs' && { tags: ['stories-mdx'], storiesImports: [] }),
+          ...entry,
+        };
+
+        // @ts-expect-error (we're removing something that should not be there)
+        delete acc[entry.id].story;
+        // @ts-expect-error (we're removing something that should not be there)
+        delete acc[entry.id].kind;
+
+        return acc;
+      },
+      {} as API_PreparedStoryIndex['entries']
+    ),
   };
 };

package/src/util/tree.ts

@@ -29,18 +29,20 @@ export const getAncestorIds = memoize(1000)((data: IndexHash, id: string): strin
   getParents(id, data).map((item) => item.id)
 );
 
-export const getDescendantIds = memoize(1000)(
-  (data: IndexHash, id: string, skipLeafs: boolean): string[] => {
-    const entry = data[id];
-    const children = entry.type === 'story' || entry.type === 'docs' ? [] : entry.children;
-    return children.reduce((acc, childId) => {
-      const child = data[childId];
-      if (!child || (skipLeafs && (child.type === 'story' || child.type === 'docs'))) return acc;
-      acc.push(childId, ...getDescendantIds(data, childId, skipLeafs));
-      return acc;
-    }, []);
-  }
-);
+export const getDescendantIds = memoize(1000)((
+  data: IndexHash,
+  id: string,
+  skipLeafs: boolean
+): string[] => {
+  const entry = data[id];
+  const children = entry.type === 'story' || entry.type === 'docs' ? [] : entry.children;
+  return children.reduce((acc, childId) => {
+    const child = data[childId];
+    if (!child || (skipLeafs && (child.type === 'story' || child.type === 'docs'))) return acc;
+    acc.push(childId, ...getDescendantIds(data, childId, skipLeafs));
+    return acc;
+  }, []);
+});
 
 export function getPath(item: Item, ref: RefType): string[] {
   const parent = item.type !== 'root' && item.parent ? ref.index[item.parent] : null;

package/src/util/useStyle.ts

@@ -19,7 +19,7 @@ import { ImageStyle, StyleProp, TextStyle, ViewStyle } from 'react-native';
  */
 export const useStyle = <
   TStyle extends ViewStyle | TextStyle | ImageStyle,
-  TOutput extends StyleProp<TStyle>
+  TOutput extends StyleProp<TStyle>,
 >(
   styleFactory: () => TOutput,
   deps?: DependencyList