@storybook/react-native-ui 8.0.0-alpha.3 → 8.2.0-alpha.0

package/src/MobileMenuDrawer.tsx

@@ -1,19 +1,20 @@
 import {
+  BottomSheetBackdrop,
   BottomSheetBackdropProps,
   BottomSheetModal,
   BottomSheetScrollView,
-  BottomSheetBackdrop,
 } from '@gorhom/bottom-sheet';
-import { ReactNode, forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import { ReactNode, forwardRef, useImperativeHandle, useRef } from 'react';
 import { Keyboard } from 'react-native';
 import { useReducedMotion } from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 interface MobileMenuDrawerProps {
   children: ReactNode | ReactNode[];
+  onStateChange: (isOpen: boolean) => void;
 }
 
 export interface MobileMenuDrawerRef {
-  isMobileMenuOpen: boolean;
   setMobileMenuOpen: (isOpen: boolean) => void;
 }
 
@@ -28,22 +29,21 @@ export const BottomSheetBackdropComponent = (backdropComponentProps: BottomSheet
 );
 
 export const MobileMenuDrawer = forwardRef<MobileMenuDrawerRef, MobileMenuDrawerProps>(
-  ({ children }, ref) => {
-    const [isMobileMenuOpen, setMobileMenuOpen] = useState(false);
+  ({ children, onStateChange }, ref) => {
     const reducedMotion = useReducedMotion();
+    const insets = useSafeAreaInsets();
 
     const menuBottomSheetRef = useRef<BottomSheetModal>(null);
 
     useImperativeHandle(ref, () => ({
-      isMobileMenuOpen,
       setMobileMenuOpen: (open: boolean) => {
         if (open) {
-          setMobileMenuOpen(true);
+          onStateChange(true);
 
           menuBottomSheetRef.current?.present();
         } else {
           Keyboard.dismiss();
-          setMobileMenuOpen(false);
+          onStateChange(false);
           menuBottomSheetRef.current?.dismiss();
         }
       },
@@ -55,7 +55,7 @@ export const MobileMenuDrawer = forwardRef<MobileMenuDrawerRef, MobileMenuDrawer
         index={1}
         animateOnMount={!reducedMotion}
         onDismiss={() => {
-          setMobileMenuOpen(false);
+          onStateChange(false);
         }}
         snapPoints={['50%', '75%']}
         enableDismissOnClose
@@ -66,7 +66,12 @@ export const MobileMenuDrawer = forwardRef<MobileMenuDrawerRef, MobileMenuDrawer
         stackBehavior="replace"
         backdropComponent={BottomSheetBackdropComponent}
       >
-        <BottomSheetScrollView keyboardShouldPersistTaps="handled">
+        <BottomSheetScrollView
+          keyboardShouldPersistTaps="handled"
+          contentContainerStyle={{
+            paddingBottom: insets.bottom,
+          }}
+        >
           {children}
         </BottomSheetScrollView>
       </BottomSheetModal>

package/src/Refs.tsx

@@ -1,82 +1,25 @@
 import type { FC } from 'react';
 import React, { useMemo, useCallback, useEffect, useState } from 'react';
-import type { State } from '@storybook/manager-api';
-import { useStorybookApi, useStorybookState } from '@storybook/manager-api';
+import type { State } from '@storybook/core/manager-api';
 import { styled } from '@storybook/react-native-theming';
-// import { transparentize } from 'polished';
-
-// import { AuthBlock, ErrorBlock, LoaderBlock, EmptyBlock } from './RefBlocks';
-
-// import { RefIndicator } from './RefIndicator';
-
 import { Tree } from './Tree';
-
 import type { RefType } from './types';
 import { getStateType } from './util/tree';
-import { DEFAULT_REF_ID } from './constants';
-
-// import { CollapseIcon } from './icon/CollapseIcon';
-
-// import { getStateType } from '../../utils/tree';
-// import { CollapseIcon } from './components/CollapseIcon';
 
 export interface RefProps {
   isLoading: boolean;
   isBrowsing: boolean;
   selectedStoryId: string | null;
   setSelection: (selection: { refId: string; storyId: string }) => void;
-  //   highlightedRef: MutableRefObject<Highlight>;
-  //   setHighlighted: (highlight: Highlight) => void;
 }
 
 const Wrapper = styled.View<{ isMain: boolean }>(({}) => ({
   position: 'relative',
 }));
 
-// const RefHead = styled.View(({ theme }) => ({
-//   display: 'flex',
-//   alignItems: 'center',
-//   justifyContent: 'space-between',
-//   background: 'transparent',
-
-//   width: '100%',
-//   marginTop: 20,
-//   paddingTop: 16,
-//   paddingBottom: 12,
-//   borderTopColor: theme.appBorderColor,
-//   borderTopWidth: 1,
-// }));
-
-// const RefTitle = styled.Text(({ theme }) => ({
-//   //   textOverflow: 'ellipsis',
-//   //   whiteSpace: 'nowrap',
-//   flex: 1,
-//   flexDirection: 'row',
-//   overflow: 'hidden',
-//   marginLeft: 2,
-//   fontWeight: theme.typography.weight.bold,
-//   fontSize: theme.typography.size.s2,
-//   lineHeight: 16,
-//   color:
-//     theme.base === 'light' ? theme.color.defaultText : transparentize(0.2, theme.color.defaultText),
-// }));
-
-// const CollapseButton = styled.TouchableOpacity(({}) => ({
-//   display: 'flex',
-//   flexDirection: 'row',
-//   paddingVertical: 0,
-//   paddingHorizontal: 8,
-//   gap: 6,
-//   alignItems: 'center',
-//   cursor: 'pointer',
-//   overflow: 'hidden',
-// }));
-
 export const Ref: FC<RefType & RefProps & { status?: State['status'] }> = React.memo(function Ref(
   props
 ) {
-  const { docsOptions } = useStorybookState();
-  const api = useStorybookApi();
   const {
     index,
     id: refId,
@@ -84,8 +27,6 @@ export const Ref: FC<RefType & RefProps & { status?: State['status'] }> = React.
     isLoading: isLoadingMain,
     isBrowsing,
     selectedStoryId,
-    // highlightedRef,
-    // setHighlighted,
     loginUrl,
     type,
     expanded = true,
@@ -114,9 +55,8 @@ export const Ref: FC<RefType & RefProps & { status?: State['status'] }> = React.
   const onSelectStoryId = useCallback(
     (storyId: string) => {
       setSelection({ refId, storyId });
-      return api && api.selectStory(storyId, DEFAULT_REF_ID);
     },
-    [api, refId, setSelection]
+    [refId, setSelection]
   );
 
   return (
@@ -130,7 +70,7 @@ export const Ref: FC<RefType & RefProps & { status?: State['status'] }> = React.
               isMain={true}
               refId={refId}
               data={index}
-              docsMode={docsOptions?.docsMode}
+              docsMode={false}
               selectedStoryId={selectedStoryId}
               onSelectStoryId={onSelectStoryId}
             />

package/src/Search.tsx

@@ -1,32 +1,21 @@
-import { useStorybookApi /* shortcutToHumanString */ } from '@storybook/manager-api';
 import { styled } from '@storybook/react-native-theming';
-// import type { DownshiftState, StateChangeOptions } from 'downshift';
-// import Downshift from 'downshift';
 import type { IFuseOptions } from 'fuse.js';
 import Fuse from 'fuse.js';
-// import { global } from '@storybook/global';
 import React, { useRef, useState, useCallback } from 'react';
-// import { CloseIcon, SearchIcon } from '@storybook/icons';
-// import { DEFAULT_REF_ID } from './constants';
 import {
   type CombinedDataset,
   type SearchItem,
   type SearchResult,
-  // DownshiftItem,
   type SearchChildrenFn,
   type Selection,
   type GetSearchItemProps,
   isExpandType,
 } from './types';
-// import { isSearchResult, isExpandType } from './types';
-
-import { /* scrollIntoView */ searchItem } from './util/tree';
+import { searchItem } from './util/tree';
 import { getGroupStatus, getHighestStatus } from './util/status';
-// import { useLayout } from './LayoutProvider';
 import { SearchIcon } from './icon/SearchIcon';
 import { CloseIcon } from './icon/CloseIcon';
 import { TextInput, View } from 'react-native';
-import { DEFAULT_REF_ID } from './constants';
 import { BottomSheetTextInput } from '@gorhom/bottom-sheet';
 
 const DEFAULT_MAX_SEARCH_RESULTS = 50;
@@ -65,11 +54,9 @@ const SearchField = styled.View({
   display: 'flex',
   flexDirection: 'column',
   position: 'relative',
-  // marginBottom: 16,
 });
 
 const Input = styled(BottomSheetTextInput)(({ theme }) => ({
-  // appearance: 'none',
   height: 32,
   paddingLeft: 28,
   paddingRight: 28,
@@ -78,59 +65,10 @@ const Input = styled(BottomSheetTextInput)(({ theme }) => ({
   backgroundColor: 'transparent',
   borderRadius: 4,
   fontSize: theme.typography.size.s1 + 1,
-  // transition: 'all 150ms',
   color: theme.color.defaultText,
   width: '100%',
-
-  // '&:focus, &:active': {
-  //   outline: 0,
-  //   borderColor: theme.color.secondary,
-  //   background: theme.background.app,
-  // },
-  // '&::placeholder': {
-  //   color: theme.textMutedColor,
-  //   opacity: 1,
-  // },
-  // '&:valid ~ code, &:focus ~ code': {
-  //   display: 'none',
-  // },
-  // '&:invalid ~ svg': {
-  //   display: 'none',
-  // },
-  // '&:valid ~ svg': {
-  //   display: 'block',
-  // },
-  // '&::-ms-clear': {
-  //   display: 'none',
-  // },
-  // '&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button, &::-webkit-search-results-decoration':
-  //   {
-  //     display: 'none',
-  //   },
 }));
 
-// const FocusKey = styled.Text(({ theme }) => ({
-//   position: 'absolute',
-//   top: 8,
-//   right: 9,
-//   height: 16,
-//   zIndex: 1,
-//   lineHeight: 16,
-//   textAlign: 'center',
-//   fontSize: 11,
-//   color: theme.base === 'light' ? theme.color.dark : theme.textMutedColor,
-//   userSelect: 'none',
-//   pointerEvents: 'none',
-//   display: 'flex',
-//   flexDirection: 'row',
-//   alignItems: 'center',
-//   gap: 4,
-// }));
-
-// const FocusKeyCmd = styled.Text({
-//   fontSize: 14,
-// });
-
 const ClearIcon = styled.TouchableOpacity(({ theme }) => ({
   position: 'absolute',
   top: 0,
@@ -145,53 +83,32 @@ const ClearIcon = styled.TouchableOpacity(({ theme }) => ({
   height: '100%',
 }));
 
-// const FocusContainer = styled.View({});
-
 export const Search = React.memo<{
   children: SearchChildrenFn;
   dataset: CombinedDataset;
-  // enableShortcuts?: boolean;
   setSelection: (selection: Selection) => void;
   getLastViewed: () => Selection[];
   initialQuery?: string;
-}>(function Search({
-  children,
-  dataset,
-  setSelection,
-  // enableShortcuts = true,
-  getLastViewed,
-  initialQuery = '',
-}) {
-  const api = useStorybookApi();
-  // const inputRef = useRef<HTMLInputElement>(null);
-  // const [inputPlaceholder, setPlaceholder] = useState('Find components');
-  // const isFocused = useRef(false);
+}>(function Search({ children, dataset, setSelection, getLastViewed, initialQuery = '' }) {
   const inputRef = useRef<TextInput>(null);
   const [inputValue, setInputValue] = useState(initialQuery);
   const [isOpen, setIsOpen] = useState(false);
   const [allComponents, showAllComponents] = useState(false);
-  // const searchShortcut = api ? shortcutToHumanString(api.getShortcutKeys().search) : '/';
 
   const selectStory = useCallback(
     (id: string, refId: string) => {
-      if (api) {
-        api.selectStory(id, undefined, { ref: refId !== DEFAULT_REF_ID && refId });
-      }
       setSelection({ storyId: id, refId });
       inputRef.current?.blur();
-      // inputRef.current?.clear();
-      // setInputValue('');
 
       showAllComponents(false);
     },
-    [api, setSelection]
+    [setSelection]
   );
 
   const getItemProps: GetSearchItemProps = useCallback(
     ({ item: result }) => {
       return {
         icon: result?.item?.type === 'component' ? 'component' : 'story',
-        // isHighlighted:
         result,
         onPress: () => {
           if (result?.item?.type === 'story') {
@@ -201,16 +118,12 @@ export const Search = React.memo<{
           } else if (isExpandType(result) && result.showAll) {
             result.showAll();
           }
-
-          // selectStory(result.item.id, result.item.refId);
         },
         score: result.score,
         refIndex: result.refIndex,
         item: result.item,
         matches: result.matches,
         isHighlighted: false,
-        // isHighlighted: searchItem.
-        // isHighlighted: searchItem.item.
       };
     },
     [selectStory]
@@ -289,17 +202,12 @@ export const Search = React.memo<{
     [allComponents, dataset.hash, getLastViewed, makeFuse]
   );
 
-  // const { isMobile } = useLayout();
-
   const input = inputValue ? inputValue.trim() : '';
   const results = input ? getResults(input) : [];
 
   return (
     <View style={{ flex: 1 }}>
-      <SearchField
-      // {...getRootProps({ refKey: '' }, { suppressRefError: true })}
-      // className="search-field"
-      >
+      <SearchField>
         <SearchIconWrapper>
           <SearchIcon />
         </SearchIconWrapper>
@@ -327,7 +235,6 @@ export const Search = React.memo<{
         results,
         isBrowsing: !isOpen || !inputValue.length,
         closeMenu: () => {},
-        // getMenuProps,
         getItemProps,
         highlightedIndex: null,
       })}

package/src/SearchResults.tsx

@@ -1,12 +1,7 @@
 import { styled } from '@storybook/react-native-theming';
 import type { FC, PropsWithChildren, ReactNode } from 'react';
 import React, { useCallback } from 'react';
-// import type { ControllerStateAndHelpers } from 'downshift';
-
-// import { useStorybookApi } from '@storybook/manager-api';
-// import { PRELOAD_ENTRIES } from '@storybook/core-events';
 import { transparentize } from 'polished';
-// import { TrashIcon } from '@storybook/icons';
 import type { GetSearchItemProps, SearchResult, SearchResultProps } from './types';
 import { isExpandType } from './types';
 
@@ -17,7 +12,6 @@ import { IconButton } from './IconButton';
 import { ComponentIcon } from './icon/ComponentIcon';
 import { StoryIcon } from './icon/StoryIcon';
 import { statusMapping } from './util/status';
-// import { UseSymbol } from './IconSymbols';
 
 const ResultsList = styled.View({
   margin: 0,
@@ -67,15 +61,10 @@ const NoResults = styled.View(({ theme }) => ({
   fontSize: theme.typography.size.s2,
   lineHeight: 18,
   color: theme.color.defaultText,
-  // small: {
-  //   color: theme.barTextColor,
-  //   fontSize: theme.typography.size.s1,
-  // },
 }));
 
 const Mark = styled.Text(({ theme }) => ({
   backgroundColor: 'transparent',
-  // fontSize: theme.typography.size.s1 - 1,
   color: theme.color.secondary,
 }));
 
@@ -96,16 +85,6 @@ const RecentlyOpenedTitle = styled.View(({ theme }) => ({
   marginTop: 16,
   marginBottom: 4,
   alignItems: 'center',
-
-  // '.search-result-recentlyOpened-clear': {
-  //   visibility: 'hidden',
-  // },
-
-  // '&:hover': {
-  //   '.search-result-recentlyOpened-clear': {
-  //     visibility: 'visible',
-  //   },
-  // },
 }));
 
 const Highlight: FC<PropsWithChildren<{ match?: FuseResultMatch }>> = React.memo(
@@ -129,41 +108,17 @@ const Highlight: FC<PropsWithChildren<{ match?: FuseResultMatch }>> = React.memo
 );
 
 const Title = styled.Text(({ theme }) => ({
-  // display: 'grid',
   justifyContent: 'flex-start',
-  // gridAutoColumns: 'auto',
-  // gridAutoFlow: 'column',
   color: theme.textMutedColor,
   fontSize: theme.typography.size.s2,
-  // '& > span': {
-  //   display: 'block',
-  //   whiteSpace: 'nowrap',
-  //   overflow: 'hidden',
-  //   textOverflow: 'ellipsis',
-  // },
 }));
 
 const Path = styled.View(({ theme }) => ({
-  // display: 'grid',
   justifyContent: 'flex-start',
   marginVertical: 2,
-  // gridAutoColumns: 'auto',
-  // gridAutoFlow: 'column',
   color: theme.textMutedColor,
   fontSize: theme.typography.size.s1 - 1,
   flexDirection: 'row',
-  // '& > span': {
-  //   display: 'block',
-  //   whiteSpace: 'nowrap',
-  //   overflow: 'hidden',
-  //   textOverflow: 'ellipsis',
-  // },
-
-  // '& > span + span': {
-  //   '&:before': {
-  //     content: "' / '",
-  //   },
-  // },
 }));
 
 const PathText = styled.Text(({ theme }) => ({
@@ -186,13 +141,6 @@ const Result: FC<SearchResultProps> = React.memo(function Result({
     [onPress]
   );
 
-  // const api = useStorybookApi();
-  // useEffect(() => {
-  //   if (api && props.isHighlighted && item.type === 'component') {
-  //     // api.emit(PRELOAD_ENTRIES, { ids: [item.children[0]] }, { options: { target: item.refId } });
-  //   }
-  // }, [props.isHighlighted, item]);
-
   const nameMatch = matches.find((match: FuseResultMatch) => match.key === 'name');
   const pathMatches = matches.filter((match: FuseResultMatch) => match.key === 'path');
 
@@ -217,7 +165,6 @@ const Result: FC<SearchResultProps> = React.memo(function Result({
                 <Highlight
                   match={pathMatches.find((match: FuseResultMatch) => match.refIndex === index)}
                 >
-                  {/* {index === 0 ? '' : '/'} */}
                   {group}
                 </Highlight>
               </PathText>
@@ -230,13 +177,10 @@ const Result: FC<SearchResultProps> = React.memo(function Result({
   );
 });
 
-// type SearchResult = { item: API_HashEntry; matches: FuseResultMatch[]; score: number };
-
 export const SearchResults: FC<{
   query: string;
   results: SearchResult[];
   closeMenu: (cb?: () => void) => void;
-  // getMenuProps: any;
   getItemProps: GetSearchItemProps;
   highlightedIndex: number | null;
   isLoading?: boolean;
@@ -246,38 +190,27 @@ export const SearchResults: FC<{
   query,
   results,
   closeMenu,
-  // getMenuProps,
   getItemProps,
   highlightedIndex,
-  // isLoading = false,
-  // enableShortcuts = true,
   clearLastViewed,
 }) {
-  // const api = useStorybookApi();
-
   const handleClearLastViewed = () => {
     clearLastViewed();
     closeMenu();
   };
 
   return (
-    <ResultsList /* {...getMenuProps()} */>
+    <ResultsList>
       {results.length > 0 && !query && (
-        <RecentlyOpenedTitle /* className="search-result-recentlyOpened" */>
+        <RecentlyOpenedTitle>
           Recently opened
-          <IconButton
-            // className="search-result-recentlyOpened-clear"
-            onPress={handleClearLastViewed}
-          >
-            {/* <TrashIcon /> */}
-          </IconButton>
+          <IconButton onPress={handleClearLastViewed} />
         </RecentlyOpenedTitle>
       )}
       {results.length === 0 && query && (
         <View>
           <NoResults>
             <Text style={{ marginBottom: 8 }}>No components found</Text>
-            {/* <br /> */}
             <Text>Find components by name or path.</Text>
           </NoResults>
         </View>
@@ -304,9 +237,6 @@ export const SearchResults: FC<{
             {...getItemProps({ key, index, item: result })}
             isHighlighted={highlightedIndex === index}
             key={item.id}
-            // data-id={result.item.id}
-            // data-refid={result.item.refId}
-            // className="search-result-item"
           />
         );
       })}

package/src/Sidebar.stories.tsx

@@ -1,12 +1,9 @@
 import React from 'react';
-
-import type { IndexHash, State } from '@storybook/manager-api';
-import { /* ManagerContext */ types } from '@storybook/manager-api';
+import type { IndexHash, State } from '@storybook/core/manager-api';
+import { types } from '@storybook/core/manager-api';
 import type { StoryObj, Meta } from '@storybook/react';
-import type { Addon_SidebarTopType } from '@storybook/types';
-
+import type { Addon_SidebarTopType } from '@storybook/core/types';
 import { Sidebar } from './Sidebar';
-// import { standardData as standardHeaderData } from './Heading.stories';
 import { mockDataset } from './mockdata';
 import type { RefType } from './types';
 import { LayoutProvider } from './LayoutProvider';
@@ -15,18 +12,9 @@ import { IconButton } from './IconButton';
 import { FaceHappyIcon } from './icon/FaceHappyIcon';
 import { DEFAULT_REF_ID } from './constants';
 
-// const menuItems = [
-//   { title: 'Menu Item 1', onClick: () => console.log('onActivateMenuItem'), id: '1' },
-//   { title: 'Menu Item 2', onClick: () => console.log('onActivateMenuItem'), id: '2' },
-//   { title: 'Menu Item 3', onClick: () => console.log('onActivateMenuItem'), id: '3' },
-// ];
-// export const menu = menuItems;
 const index = mockDataset.withRoot as IndexHash;
 const storyId = 'root-1-child-a2--grandchild-a1-1';
 
-// export const simpleData = { menu, index, storyId };
-// export const loadingData = { menu };
-
 const meta = {
   component: Sidebar,
   title: 'UI/Sidebar/Sidebar',
@@ -34,7 +22,6 @@ const meta = {
   parameters: { layout: 'fullscreen' },
   args: {
     previewInitialized: true,
-    // menu,
     extra: [] as Addon_SidebarTopType[],
     index: index,
     storyId,
@@ -43,31 +30,7 @@ const meta = {
     status: {},
     setSelection: () => {},
   },
-  decorators: [
-    (storyFn) => (
-      //   <ManagerContext.Provider
-      //     value={
-      //       {
-      //         state: {
-      //           docsOptions: {
-      //             defaultName: 'Docs',
-      //             autodocs: 'tag',
-      //             docsMode: false,
-      //           },
-      //         },
-      //         api: {
-      //           emit: () => {},
-      //           on: () => {},
-      //           off: () => {},
-      //           getShortcutKeys: () => ({ search: ['control', 'shift', 's'] }),
-      //         },
-      //       } as any
-      //     }
-      //   >
-      <LayoutProvider>{storyFn()}</LayoutProvider>
-      //   </ManagerContext.Provider>
-    ),
-  ],
+  decorators: [(storyFn) => <LayoutProvider>{storyFn()}</LayoutProvider>],
 } satisfies Meta<typeof Sidebar>;
 
 export default meta;
@@ -98,7 +61,6 @@ const refsError = {
 const refsEmpty = {
   optimized: {
     ...refs.optimized,
-    // type: 'auto-inject',
     index: {} as IndexHash,
   },
 };