@storybook/react-native-ui 9.0.0-beta.9 → 9.0.0-rc.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-ui",
-  "version": "9.0.0-beta.9",
+  "version": "9.0.0-rc.4",
   "description": "ui components for react native storybook",
   "keywords": [
     "react",
@@ -58,8 +58,10 @@
     "typescript": "~5.8.3"
   },
   "dependencies": {
-    "@storybook/react": "9.0.0-beta.9",
-    "@storybook/react-native-theming": "^9.0.0-beta.9",
+    "@storybook/react": "9.0.0-rc.4",
+    "@storybook/react-native-theming": "^9.0.0-rc.4",
+    "@storybook/react-native-ui-common": "^9.0.0-rc.4",
+    "es-toolkit": "^1.38.0",
     "fuse.js": "^7.0.0",
     "memoizerific": "^1.11.3",
     "polished": "^4.3.1",
@@ -73,7 +75,7 @@
     "react-native-reanimated": ">=3",
     "react-native-safe-area-context": "*",
     "react-native-svg": ">=14",
-    "storybook": "9.0.0-beta.9"
+    "storybook": "9.0.0-rc.4"
   },
   "engines": {
     "node": ">=18.0.0"
@@ -81,5 +83,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7e1611cf3e1a2ede212f10b6dfacd3a5384e13f9"
+  "gitHead": "1d0249371caed6a6a90f42530d722040eb18c9dc"
 }

package/src/Explorer.stories.tsx

@@ -1,6 +1,6 @@
 import { Explorer } from './Explorer';
 import { mockDataset } from './mockdata';
-import type { RefType } from './types';
+import type { RefType } from '@storybook/react-native-ui-common';
 import { View } from 'react-native';
 
 export default {

package/src/Explorer.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React, { useRef } from 'react';
 import { Ref } from './Refs';
-import type { CombinedDataset, Selection } from './types';
+import type { CombinedDataset, Selection } from '@storybook/react-native-ui-common';
 import { View } from 'react-native';
 
 export interface ExplorerProps {

package/src/Layout.stories.tsx

@@ -4,7 +4,7 @@ import { mockDataset } from './mockdata';
 import { Text, View } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
-import { LayoutProvider } from './LayoutProvider';
+import { LayoutProvider } from '@storybook/react-native-ui-common';
 
 const meta = {
   component: Layout,

package/src/Layout.tsx

@@ -1,25 +1,33 @@
-import { SET_CURRENT_STORY } from 'storybook/internal/core-events';
-import { addons } from 'storybook/internal/manager-api';
-import { type API_IndexHash, type Args, type StoryContext } from 'storybook/internal/types';
+import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
+import type { Args, StoryContext } from '@storybook/csf';
 import type { ReactRenderer } from '@storybook/react';
-import { styled, useTheme } from '@storybook/react-native-theming';
-import { ReactNode, useRef, useState, useCallback } from 'react';
+import { styled, ThemeProvider, useTheme } from '@storybook/react-native-theming';
+import {
+  IconButton,
+  LayoutProvider,
+  StorageProvider,
+  useLayout,
+  useStoreBooleanState,
+  useStyle,
+  type SBUI,
+} from '@storybook/react-native-ui-common';
+import { ReactNode, useCallback, useRef, useState } 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';
-import { AddonsTabs, MobileAddonsPanel, MobileAddonsPanelRef } from './MobileAddonsPanel';
-import { MobileMenuDrawer, MobileMenuDrawerRef } from './MobileMenuDrawer';
-import { Sidebar } from './Sidebar';
-import { StorybookLogo } from './StorybookLogo';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';
+import { SET_CURRENT_STORY } from 'storybook/internal/core-events';
+import { addons } from 'storybook/internal/manager-api';
+import type { API_IndexHash } from 'storybook/internal/types';
 import { DEFAULT_REF_ID } from './constants';
-import { useStoreBooleanState } from './hooks/useStoreState';
 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';
+import { AddonsTabs, MobileAddonsPanel, MobileAddonsPanelRef } from './MobileAddonsPanel';
+import { MobileMenuDrawer, MobileMenuDrawerRef } from './MobileMenuDrawer';
 import { SelectedNodeProvider } from './SelectedNodeProvider';
+import { Sidebar } from './Sidebar';
+import { StorybookLogo } from './StorybookLogo';
 
 const desktopLogoContainer = {
   flexDirection: 'row',
@@ -49,6 +57,28 @@ const mobileMenuDrawerContentStyle = {
   paddingBottom: 4,
 } satisfies ViewStyle;
 
+const flex1 = { flex: 1 } satisfies ViewStyle;
+
+export const FullUI: SBUI = ({ storage, theme, storyHash, story, children }) => {
+  return (
+    <ThemeProvider theme={theme}>
+      <SafeAreaProvider>
+        <GestureHandlerRootView style={flex1}>
+          <BottomSheetModalProvider>
+            <StorageProvider storage={storage}>
+              <LayoutProvider>
+                <Layout storyHash={storyHash} story={story}>
+                  {children}
+                </Layout>
+              </LayoutProvider>
+            </StorageProvider>
+          </BottomSheetModalProvider>
+        </GestureHandlerRootView>
+      </SafeAreaProvider>
+    </ThemeProvider>
+  );
+};
+
 export const Layout = ({
   storyHash,
   story,

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,10 +12,8 @@ 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 { IconButton, useStyle } from '@storybook/react-native-ui-common';
 import { CloseIcon } from './icon/CloseIcon';
-import { useStyle } from './util/useStyle';
 
 export interface MobileAddonsPanelRef {
   setAddonsPanelOpen: (isOpen: boolean) => void;
@@ -56,9 +54,9 @@ export const MobileAddonsPanel = forwardRef<MobileAddonsPanelRef, { storyId?: st
     const { height } = useWindowDimensions();
 
     const adjustedBottomSheetSize = useAnimatedStyle(() => {
-      const extraPadding = Platform.OS === 'android' ? 32 : 16;
+      const extraPadding = Platform.OS === 'android' ? 32 : 16 + insets.bottom;
       return {
-        maxHeight: height - animatedPosition.value - insets.bottom - extraPadding,
+        maxHeight: height - animatedPosition.value - extraPadding,
       };
     }, [animatedPosition, height, insets.bottom]);
 
@@ -108,6 +106,8 @@ export const MobileAddonsPanel = forwardRef<MobileAddonsPanelRef, { storyId?: st
   }
 );
 
+MobileAddonsPanel.displayName = 'MobileAddonsPanel';
+
 const addonsTabsContainerStyle = {
   flex: 1,
 } satisfies StyleProp<ViewStyle>;

package/src/Refs.tsx

@@ -3,8 +3,8 @@ import React, { useMemo, useCallback, useEffect, useState } from 'react';
 import type { State } from 'storybook/internal/manager-api';
 import { styled } from '@storybook/react-native-theming';
 import { Tree } from './Tree';
-import type { RefType } from './types';
-import { getStateType } from './util/tree';
+import type { RefType } from '@storybook/react-native-ui-common';
+import { getStateType } from '@storybook/react-native-ui-common';
 
 export interface RefProps {
   isLoading: boolean;
@@ -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,
@@ -15,9 +15,8 @@ import {
   type SearchItem,
   type SearchResult,
   type Selection,
-} from './types';
-import { searchItem } from './util/tree';
-import { useSelectedNode } from './SelectedNodeProvider';
+  searchItem,
+} from '@storybook/react-native-ui-common';
 
 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/SearchResults.tsx

@@ -2,16 +2,20 @@ import { styled } from '@storybook/react-native-theming';
 import type { FC, PropsWithChildren, ReactNode } from 'react';
 import React, { useCallback } from 'react';
 import { transparentize } from 'polished';
-import type { GetSearchItemProps, SearchResult, SearchResultProps } from './types';
-import { isExpandType } from './types';
+import {
+  isExpandType,
+  IconButton,
+  type GetSearchItemProps,
+  type SearchResult,
+  type SearchResultProps,
+  Button,
+} from '@storybook/react-native-ui-common';
 
 import { FuseResultMatch } from 'fuse.js';
 import { PressableProps, View } from 'react-native';
-import { Button } from './Button';
-import { IconButton } from './IconButton';
+
 import { ComponentIcon } from './icon/ComponentIcon';
 import { StoryIcon } from './icon/StoryIcon';
-import { statusMapping } from './util/status';
 
 const ResultsList = styled.View({
   margin: 0,
@@ -144,8 +148,6 @@ const Result: FC<SearchResultProps> = React.memo(function Result({
   const nameMatch = matches.find((match: FuseResultMatch) => match.key === 'name');
   const pathMatches = matches.filter((match: FuseResultMatch) => match.key === 'path');
 
-  const [i] = item.status ? statusMapping[item.status] : [];
-
   return (
     <ResultRow {...props} onPress={press}>
       <IconWrapper>
@@ -175,7 +177,6 @@ const Result: FC<SearchResultProps> = React.memo(function Result({
           })}
         </Path>
       </ResultRowContent>
-      {item.status ? i : null}
     </ResultRow>
   );
 });

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,12 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import type { IndexHash, State } from 'storybook/internal/manager-api';
-import { Button } from './Button';
-import { LayoutProvider } from './LayoutProvider';
+import { Button, LayoutProvider, type RefType } from '@storybook/react-native-ui-common';
 import { Sidebar } from './Sidebar';
 import { DEFAULT_REF_ID } from './constants';
 import { mockDataset } from './mockdata';
-import type { RefType } from './types';
 
 const index = mockDataset.withRoot as IndexHash;
 const storyId = 'root-1-child-a2--grandchild-a1-1';

package/src/Sidebar.tsx

@@ -5,8 +5,8 @@ import type { API_LoadedRefData } from 'storybook/internal/types';
 import { Explorer } from './Explorer';
 import { Search } from './Search';
 import { SearchResults } from './SearchResults';
-import type { CombinedDataset, Selection } from './types';
-import { useLastViewed } from './hooks/useLastViewed';
+import type { CombinedDataset, Selection } from '@storybook/react-native-ui-common';
+import { useLastViewed } from '@storybook/react-native-ui-common';
 import { DEFAULT_REF_ID } from './constants';
 import { View } from 'react-native';
 

package/src/Tree.stories.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import type { ComponentEntry, IndexHash } from 'storybook/internal/manager-api';
 import type { StoryObj, Meta } from '@storybook/react';
 import { Tree } from './Tree';
-import type { Dataset } from './types';
+import type { Dataset } from '@storybook/react-native-ui-common';
 import { index } from './mockdata.large';
 import { DEFAULT_REF_ID } from './constants';
 import { ScrollView, Text } from 'react-native';

package/src/Tree.tsx

@@ -8,16 +8,21 @@ import type {
 import { styled } from '@storybook/react-native-theming';
 import React, { useCallback, useMemo, useRef } from 'react';
 import { View } from 'react-native';
-import { IconButton } from './IconButton';
+import {
+  IconButton,
+  ExpandAction,
+  ExpandedState,
+  useExpanded,
+  createId,
+  getAncestorIds,
+  getDescendantIds,
+  isStoryHoistable,
+} from '@storybook/react-native-ui-common';
 import { ComponentNode, GroupNode, StoryNode } from './TreeNode';
 import { CollapseAllIcon } from './icon/CollapseAllIcon';
 import { CollapseIcon } from './icon/CollapseIcon';
 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 type { Item } from '@storybook/react-native-ui-common';
 import { useSelectedNode } from './SelectedNodeProvider';
 
 interface NodeProps {
@@ -158,7 +163,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 +182,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/index.tsx

@@ -1,11 +1,5 @@
 export * from './TreeNode';
 export * from './Tree';
-export * from './Button';
-export * from './IconButton';
-export * from './LayoutProvider';
 export * from './Explorer';
 export * from './Sidebar';
-export * from './types';
 export * from './Layout';
-export * from './util/StoryHash';
-export * from './StorageProvider';

package/src/mockdata.large.ts

@@ -11,7 +11,7 @@
  *     }, {}), null, 2)
  */
 
-import type { Dataset } from './types';
+import type { Dataset } from '@storybook/react-native-ui-common';
 
 // @ts-expect-error
 export const index = {