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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-ui",
-  "version": "8.0.0-alpha.4",
+  "version": "8.2.0-alpha.0",
   "description": "ui components for react native storybook",
   "keywords": [
     "react",
@@ -48,23 +48,22 @@
     "preset": "react-native"
   },
   "devDependencies": {
-    "@storybook/react": "^8",
-    "@storybook/types": "^8",
     "@types/jest": "^29.4.3",
-    "@types/react": "~18.2.14",
+    "@types/react": "~18.2.79",
     "babel-jest": "^29.4.3",
-    "jest": "^29.7.0",
+    "jest": "29.7.0",
     "react-test-renderer": "18.2.0",
     "tsup": "^7.2.0",
-    "typescript": "^5.3.3"
+    "typescript": "~5.3.3"
   },
   "dependencies": {
-    "@storybook/core-events": "^8",
-    "@storybook/manager-api": "^8",
-    "@storybook/react-native-theming": "^8.0.0-alpha.4",
+    "@storybook/core": "8.2.0-beta.0",
+    "@storybook/react": "8.2.0-beta.0",
+    "@storybook/react-native-theming": "^8.2.0-alpha.0",
     "fuse.js": "^7.0.0",
     "memoizerific": "^1.11.3",
-    "polished": "^4.3.1"
+    "polished": "^4.3.1",
+    "store2": "^2.14.3"
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": ">=4",
@@ -81,5 +80,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "01c91fd5e53822bcbc1350a154d609c7c0092e69"
+  "gitHead": "56cad3ccee28ceae70cc7e2fc9b63ec28384eecf"
 }

package/src/Button.tsx

@@ -18,7 +18,6 @@ export interface ButtonProps extends TouchableOpacityProps {
 export const Button = forwardRef<TouchableOpacity, ButtonProps>(
   (
     {
-      // asChild = false,
       Icon,
       animation = 'none',
       size = 'small',
@@ -54,23 +53,8 @@ export const Button = forwardRef<TouchableOpacity, ButtonProps>(
       return () => clearTimeout(timer);
     }, [isAnimating]);
 
-    // Match the old API with the new API.
-    // TODO: Remove this after 9.0.
-    // if (props.primary) {
-    //   localVariant = 'solid';
-    //   localSize = 'medium';
-    // }
-
-    // Match the old API with the new API.
-    // TODO: Remove this after 9.0.
-    // if (props.secondary || props.tertiary || props.gray || props.outline || props.inForm) {
-    //   localVariant = 'outline';
-    //   localSize = 'medium';
-    // }
-
     return (
       <StyledButton
-        // as={Comp}
         ref={ref}
         variant={variant}
         size={size}
@@ -96,19 +80,11 @@ export const Button = forwardRef<TouchableOpacity, ButtonProps>(
 
 Button.displayName = 'Button';
 
-// const StyledButton = styled('TouchableOpacity', {
-//   shouldForwardProp: (prop) => isPropValid(prop),
-// })<
-//   ButtonProps & {
-//     animating: boolean;
-//     animation: ButtonProps['animation'];
-//   }
-// >(({ theme, variant, size, disabled, active, animating, animation, padding }) => ({
 const StyledButton = styled.TouchableOpacity<
   ButtonProps & { animating: boolean; animation: ButtonProps['animation'] }
->(({ theme, variant, size, disabled, active, /* animating, animation, */ padding }) => ({
+>(({ theme, variant, size, disabled, active, padding }) => ({
   border: 0,
-  cursor: disabled ? 'not-allowed' : 'pointer',
+  // cursor: disabled ? 'not-allowed' : 'pointer',
   display: 'flex',
   flexDirection: 'row',
   gap: 6,
@@ -125,12 +101,9 @@ const StyledButton = styled.TouchableOpacity<
   paddingVertical: 0,
   height: size === 'small' ? 28 : 32,
   position: 'relative',
-
-  //   textDecoration: 'none',
   transitionProperty: 'background, box-shadow',
   transitionDuration: '150ms',
   transitionTimingFunction: 'ease-out',
-  // verticalAlign: 'top',
   whiteSpace: 'nowrap',
   userSelect: 'none',
   opacity: disabled ? 0.5 : 1,
@@ -148,40 +121,6 @@ const StyledButton = styled.TouchableOpacity<
   borderRadius: theme.input.borderRadius,
   // Making sure that the button never shrinks below its minimum size
   flexShrink: 0,
-
-  //   '&:hover': {
-  //     color: variant === 'ghost' ? theme.color.secondary : null,
-  //     background: (() => {
-  //       let bgColor = theme.color.secondary;
-  //       if (variant === 'solid') bgColor = theme.color.secondary;
-  //       if (variant === 'outline') bgColor = theme.button.background;
-
-  //       if (variant === 'ghost') return transparentize(0.86, theme.color.secondary);
-  //       return theme.base === 'light' ? darken(0.02, bgColor) : lighten(0.03, bgColor);
-  //     })(),
-  //   },
-
-  //   '&:active': {
-  //     color: variant === 'ghost' ? theme.color.secondary : null,
-  //     background: (() => {
-  //       let bgColor = theme.color.secondary;
-  //       if (variant === 'solid') bgColor = theme.color.secondary;
-  //       if (variant === 'outline') bgColor = theme.button.background;
-
-  //       if (variant === 'ghost') return theme.background.hoverable;
-  //       return theme.base === 'light' ? darken(0.02, bgColor) : lighten(0.03, bgColor);
-  //     })(),
-  //   },
-
-  //   '&:focus': {
-  //     boxShadow: `${rgba(theme.color.secondary, 1)} 0 0 0 1px inset`,
-  //     outline: 'none',
-  //   },
-
-  //   '> svg': {
-  //     animation:
-  //       animating && animation !== 'none' ? `${theme.animation[animation]} 1000ms ease-out` : '',
-  //   },
 }));
 
 export const ButtonText = styled.Text<{
@@ -198,7 +137,6 @@ export const ButtonText = styled.Text<{
   flexDirection: 'row',
   gap: 6,
   textAlign: 'center',
-  // lineHeight: theme.typography.size.s1,
   fontSize: theme.typography.size.s1,
   fontWeight: theme.typography.weight.bold,
 }));
@@ -231,13 +169,3 @@ export const ButtonIcon = ({
 
   return <Icon color={color} />;
 };
-
-// color: variant === 'ghost' ? theme.color.secondary : null,
-// background: (() => {
-//   let bgColor = theme.color.secondary;
-//   if (variant === 'solid') bgColor = theme.color.secondary;
-//   if (variant === 'outline') bgColor = theme.button.background;
-
-//   if (variant === 'ghost') return theme.background.hoverable;
-//   return theme.base === 'light' ? darken(0.02, bgColor) : lighten(0.03, bgColor);
-// })(),

package/src/Explorer.stories.tsx

@@ -1,4 +1,3 @@
-import { ManagerContext } from '@storybook/manager-api';
 import { Explorer } from './Explorer';
 import { mockDataset } from './mockdata';
 import type { RefType } from './types';
@@ -9,11 +8,6 @@ export default {
   title: 'UI/Sidebar/Explorer',
   parameters: { layout: 'fullscreen', theme: 'side-by-side' },
   decorators: [
-    (storyFn: any) => (
-      <ManagerContext.Provider value={{ state: { docsOptions: {} } } as any}>
-        {storyFn()}
-      </ManagerContext.Provider>
-    ),
     (storyFn: any) => <View style={{ paddingHorizontal: 20 }}>{storyFn()}</View>,
     (storyFn: any) => <View style={{ paddingHorizontal: 20 }}>{storyFn()}</View>,
   ],

package/src/Explorer.tsx

@@ -1,11 +1,7 @@
 import type { FC } from 'react';
 import React, { useRef } from 'react';
-
 import { Ref } from './Refs';
 import type { CombinedDataset, Selection } from './types';
-
-// import { useHighlighted } from './useHighlighted';
-// import { HighlightStyles } from './HighlightStyles';
 import { View } from 'react-native';
 
 export interface ExplorerProps {
@@ -25,18 +21,8 @@ export const Explorer: FC<ExplorerProps> = React.memo(function Explorer({
 }) {
   const containerRef = useRef<View>(null);
 
-  // Track highlighted nodes, keep it in sync with props and enable keyboard navigation
-  //   const [highlighted, setHighlighted, highlightedRef] = useHighlighted({
-  //     containerRef,
-  //     isLoading,
-  //     isBrowsing,
-  //     dataset,
-  //     selected,
-  //   });
-
   return (
     <View ref={containerRef} id="storybook-explorer-tree">
-      {/* {highlighted && <HighlightStyles {...highlighted} />} */}
       {dataset.entries.map(([refId, ref]) => (
         <Ref
           {...ref}
@@ -45,8 +31,6 @@ export const Explorer: FC<ExplorerProps> = React.memo(function Explorer({
           isBrowsing={isBrowsing}
           selectedStoryId={selected?.refId === ref.id ? selected.storyId : null}
           setSelection={setSelection}
-          //   highlightedRef={highlightedRef}
-          //   setHighlighted={setHighlighted}
         />
       ))}
     </View>

package/src/Layout.stories.tsx

@@ -1,11 +1,6 @@
-import { Meta, StoryObj } from '@storybook/react';
-
+import type { Meta, StoryObj } from '@storybook/react';
 import { Layout } from './Layout';
-// import { mockDataset } from './mockdata';
-// import { index } from './mockdata.large';
 import { mockDataset } from './mockdata';
-// import { GestureHandlerRootView } from 'react-native-gesture-handler';
-// import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
 import { Text } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';

package/src/Layout.tsx

@@ -1,9 +1,9 @@
-import { SET_CURRENT_STORY } from '@storybook/core-events';
-import { addons } from '@storybook/manager-api';
+import { SET_CURRENT_STORY } from '@storybook/core/core-events';
+import { addons } from '@storybook/core/manager-api';
 import { styled, useTheme } from '@storybook/react-native-theming';
-import { type API_IndexHash, type Args, type StoryContext } from '@storybook/types';
-import { ReactNode, useRef } from 'react';
-import { Text, View } from 'react-native';
+import { type API_IndexHash, type Args, type StoryContext } from '@storybook/core/types';
+import { ReactNode, useRef, useState } from 'react';
+import { Platform, Text, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { IconButton } from './IconButton';
 import { Sidebar } from './Sidebar';
@@ -11,7 +11,7 @@ import { DEFAULT_REF_ID } from './constants';
 import { BottomBarToggleIcon } from './icon/BottomBarToggleIcon';
 import { MenuIcon } from './icon/MenuIcon';
 
-import { ReactRenderer } from '@storybook/react';
+import type { ReactRenderer } from '@storybook/react';
 import { MobileMenuDrawer, MobileMenuDrawerRef } from './MobileMenuDrawer';
 import { MobileAddonsPanel, MobileAddonsPanelRef } from './MobileAddonsPanel';
 
@@ -26,13 +26,15 @@ export const Layout = ({
 }) => {
   const theme = useTheme();
   const mobileMenuDrawerRef = useRef<MobileMenuDrawerRef>(null);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [drawerOpen, setDrawerOpen] = useState(false);
   const addonPanelRef = useRef<MobileAddonsPanelRef>(null);
   const insets = useSafeAreaInsets();
 
   return (
     <View style={{ flex: 1, paddingTop: insets.top }}>
       <View style={{ flex: 1 }}>{children}</View>
-      <MobileMenuDrawer ref={mobileMenuDrawerRef}>
+      <MobileMenuDrawer ref={mobileMenuDrawerRef} onStateChange={setDrawerOpen}>
         <Sidebar
           extra={[]}
           previewInitialized
@@ -49,25 +51,30 @@ export const Layout = ({
           refId={DEFAULT_REF_ID}
         />
       </MobileMenuDrawer>
-      <MobileAddonsPanel ref={addonPanelRef} storyId={story?.id} />
-      <Container style={{ marginBottom: insets.bottom }}>
-        <Nav>
-          <Button
-            hitSlop={{ bottom: 10, left: 10, right: 10, top: 10 }}
-            onPress={() => mobileMenuDrawerRef.current.setMobileMenuOpen(true)}
-          >
-            <MenuIcon color={theme.color.mediumdark} />
-            <Text>
-              {story?.title}/{story?.name}
-            </Text>
-          </Button>
+      <MobileAddonsPanel ref={addonPanelRef} storyId={story?.id} onStateChange={setMenuOpen} />
+      {(Platform.OS !== 'android' || (!menuOpen && !drawerOpen)) && (
+        <Container style={{ marginBottom: insets.bottom }}>
+          <Nav>
+            <Button
+              style={{ flexShrink: 1 }}
+              hitSlop={{ bottom: 10, left: 10, right: 10, top: 10 }}
+              onPress={() => {
+                mobileMenuDrawerRef.current.setMobileMenuOpen(true);
+              }}
+            >
+              <MenuIcon color={theme.color.mediumdark} />
+              <Text style={{ flexShrink: 1 }} numberOfLines={1}>
+                {story?.title}/{story?.name}
+              </Text>
+            </Button>
 
-          <IconButton
-            onPress={() => addonPanelRef.current.setAddonsPanelOpen(true)}
-            Icon={BottomBarToggleIcon}
-          />
-        </Nav>
-      </Container>
+            <IconButton
+              onPress={() => addonPanelRef.current.setAddonsPanelOpen(true)}
+              Icon={BottomBarToggleIcon}
+            />
+          </Nav>
+        </Container>
+      )}
     </View>
   );
 };

package/src/MobileAddonsPanel.tsx

@@ -1,143 +1,159 @@
-import { BottomSheetModal, BottomSheetScrollView } from '@gorhom/bottom-sheet';
-import { addons } from '@storybook/manager-api';
+import { BottomSheetModal } from '@gorhom/bottom-sheet';
+import { addons } from '@storybook/core/manager-api';
 import { styled } from '@storybook/react-native-theming';
-import { Addon_TypesEnum } from '@storybook/types';
+import { Addon_TypesEnum } from '@storybook/core/types';
 import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
-import { Text, View } from 'react-native';
+import { Text, View, useWindowDimensions } from 'react-native';
 import { ScrollView } from 'react-native-gesture-handler';
-import { useReducedMotion } from 'react-native-reanimated';
+import Animated, {
+  useAnimatedKeyboard,
+  useAnimatedStyle,
+  useReducedMotion,
+  useSharedValue,
+} from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { IconButton } from './IconButton';
 import { CloseIcon } from './icon/CloseIcon';
 
 export interface MobileAddonsPanelRef {
-  isAddonsPanelOpen: boolean;
   setAddonsPanelOpen: (isOpen: boolean) => void;
 }
 
-export const MobileAddonsPanel = forwardRef<MobileAddonsPanelRef, { storyId?: string }>(
-  ({ storyId }, ref) => {
-    const [isAddonsPanelOpen, setAddonsPanelOpen] = useState(false);
-    const reducedMotion = useReducedMotion();
-
-    const addonsPanelBottomSheetRef = useRef<BottomSheetModal>(null);
-    const insets = useSafeAreaInsets();
-
-    const panels = addons.getElements(Addon_TypesEnum.PANEL);
-    const [addonSelected, setAddonSelected] = useState(Object.keys(panels)[0]);
-
-    useImperativeHandle(ref, () => ({
-      isAddonsPanelOpen,
-      setAddonsPanelOpen: (open: boolean) => {
-        if (open) {
-          setAddonsPanelOpen(true);
-          addonsPanelBottomSheetRef.current?.present();
-        } else {
-          setAddonsPanelOpen(false);
-          addonsPanelBottomSheetRef.current?.dismiss();
-        }
-      },
-    }));
-
-    return (
-      <BottomSheetModal
-        ref={addonsPanelBottomSheetRef}
-        index={1}
-        animateOnMount={!reducedMotion}
-        onDismiss={() => {
-          setAddonsPanelOpen(false);
-        }}
-        snapPoints={['25%', '50%']}
-        style={{
-          paddingTop: 8,
-        }}
-        containerStyle={{}}
-        backgroundStyle={{
-          borderRadius: 0,
-          borderTopColor: 'lightgrey',
-          borderTopWidth: 1,
-        }}
-        keyboardBehavior="interactive"
-        keyboardBlurBehavior="restore"
-        enableDismissOnClose
-        enableHandlePanningGesture={true}
-        enableContentPanningGesture={true}
-        // enablePanDownToClose={false}
-        stackBehavior="replace"
-      >
-        <View style={{ flex: 1 }}>
-          <View style={{ flexDirection: 'row' }}>
-            <ScrollView
-              horizontal
-              showsHorizontalScrollIndicator={false}
-              contentContainerStyle={{
-                paddingHorizontal: 8,
-                // alignItems: 'center',
-                justifyContent: 'center',
-              }}
-            >
-              {Object.values(panels).map(({ id, title }) => {
-                const resolvedTitle = typeof title === 'function' ? title({}) : title;
-
-                return (
-                  <Tab
-                    key={id}
-                    active={id === addonSelected}
-                    onPress={() => setAddonSelected(id)}
-                    text={resolvedTitle}
-                  />
-                );
-              })}
-            </ScrollView>
-            <IconButton
-              style={{
-                marginRight: 4,
-                marginBottom: 4,
-                alignItems: 'center',
-                justifyContent: 'center',
-              }}
-              hitSlop={{ top: 10, right: 10, bottom: 10, left: 10 }}
-              Icon={CloseIcon}
-              onPress={() => {
-                setAddonsPanelOpen(false);
-                addonsPanelBottomSheetRef.current?.dismiss();
-              }}
-            />
-          </View>
-          <BottomSheetScrollView
-            keyboardShouldPersistTaps="handled"
+export const MobileAddonsPanel = forwardRef<
+  MobileAddonsPanelRef,
+  { storyId?: string; onStateChange: (open: boolean) => void }
+>(({ storyId, onStateChange }, ref) => {
+  const reducedMotion = useReducedMotion();
+
+  const addonsPanelBottomSheetRef = useRef<BottomSheetModal>(null);
+  const insets = useSafeAreaInsets();
+
+  const panels = addons.getElements(Addon_TypesEnum.PANEL);
+  const [addonSelected, setAddonSelected] = useState(Object.keys(panels)[0]);
+  const animatedPosition = useSharedValue(0);
+
+  // bringing in animated keyboard disables android resizing
+  // TODO replicate functionality without this
+  useAnimatedKeyboard();
+
+  useImperativeHandle(ref, () => ({
+    setAddonsPanelOpen: (open: boolean) => {
+      if (open) {
+        onStateChange(true);
+        addonsPanelBottomSheetRef.current?.present();
+      } else {
+        onStateChange(false);
+        addonsPanelBottomSheetRef.current?.dismiss();
+      }
+    },
+  }));
+
+  const { height } = useWindowDimensions();
+
+  const adjustedBottomSheetSize = useAnimatedStyle(() => {
+    return {
+      maxHeight: height - animatedPosition.value - insets.bottom,
+    };
+  }, [animatedPosition.value, height, insets.bottom]);
+
+  return (
+    <BottomSheetModal
+      ref={addonsPanelBottomSheetRef}
+      index={1}
+      animateOnMount={!reducedMotion}
+      onDismiss={() => {
+        onStateChange(false);
+      }}
+      snapPoints={['25%', '50%', '75%']}
+      style={{
+        paddingTop: 8,
+      }}
+      animatedPosition={animatedPosition}
+      containerStyle={{}}
+      backgroundStyle={{
+        borderRadius: 0,
+        borderTopColor: 'lightgrey',
+        borderTopWidth: 1,
+      }}
+      keyboardBehavior="extend"
+      // keyboardBlurBehavior="restore"
+      enableDismissOnClose
+      enableHandlePanningGesture={true}
+      // enableContentPanningGesture={true}
+      stackBehavior="replace"
+    >
+      <Animated.View style={[{ flex: 1 }, adjustedBottomSheetSize]}>
+        <View style={{ flexDirection: 'row' }}>
+          <ScrollView
+            horizontal
+            showsHorizontalScrollIndicator={false}
             contentContainerStyle={{
-              paddingBottom: insets.bottom + 16,
-              marginTop: 10,
-              paddingHorizontal: 16,
+              paddingHorizontal: 8,
+              justifyContent: 'center',
             }}
           >
-            {(() => {
-              if (!storyId) {
-                return (
-                  <View style={{ alignItems: 'center', justifyContent: 'center' }}>
-                    <Text>No Story Selected</Text>
-                  </View>
-                );
-              }
-
-              if (Object.keys(panels).length === 0) {
-                return (
-                  <View style={{ alignItems: 'center', justifyContent: 'center' }}>
-                    <Text>No addons loaded.</Text>
-                  </View>
-                );
-              }
-
-              return panels[addonSelected].render({ active: true });
-            })()}
-          </BottomSheetScrollView>
+            {Object.values(panels).map(({ id, title }) => {
+              const resolvedTitle = typeof title === 'function' ? title({}) : title;
+
+              return (
+                <Tab
+                  key={id}
+                  active={id === addonSelected}
+                  onPress={() => setAddonSelected(id)}
+                  text={resolvedTitle}
+                />
+              );
+            })}
+          </ScrollView>
+          <IconButton
+            style={{
+              marginRight: 4,
+              marginBottom: 4,
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+            hitSlop={{ top: 10, right: 10, bottom: 10, left: 10 }}
+            Icon={CloseIcon}
+            onPress={() => {
+              onStateChange(false);
+              addonsPanelBottomSheetRef.current?.dismiss();
+            }}
+          />
         </View>
-      </BottomSheetModal>
-    );
-  }
-);
+        <ScrollView
+          style={{ flex: 1 }}
+          keyboardShouldPersistTaps="handled"
+          contentContainerStyle={{
+            paddingBottom: insets.bottom + 16,
+            marginTop: 10,
+            paddingHorizontal: 16,
+          }}
+        >
+          {(() => {
+            if (!storyId) {
+              return (
+                <View style={{ alignItems: 'center', justifyContent: 'center' }}>
+                  <Text>No Story Selected</Text>
+                </View>
+              );
+            }
+
+            if (Object.keys(panels).length === 0) {
+              return (
+                <View style={{ alignItems: 'center', justifyContent: 'center' }}>
+                  <Text>No addons loaded.</Text>
+                </View>
+              );
+            }
+
+            return panels[addonSelected].render({ active: true });
+          })()}
+        </ScrollView>
+      </Animated.View>
+    </BottomSheetModal>
+  );
+});
 
 const Tab = ({ active, onPress, text }: { active: boolean; onPress: () => void; text: string }) => {
   return (
@@ -150,7 +166,6 @@ const Tab = ({ active, onPress, text }: { active: boolean; onPress: () => void;
 const TabButton = styled.TouchableOpacity<{ active: boolean }>(({ theme, active }) => ({
   borderBottomWidth: active ? 2 : 0,
   borderBottomColor: active ? theme.barSelectedColor : undefined,
-
   overflow: 'hidden',
   paddingHorizontal: 15,
   justifyContent: 'center',
@@ -161,6 +176,6 @@ const TabText = styled.Text<{ active: boolean }>(({ theme, active }) => ({
   color: active ? theme.barSelectedColor : theme.color.mediumdark,
   textAlign: 'center',
   fontWeight: 'bold',
-  fontSize: 13,
+  fontSize: 12,
   lineHeight: 12,
 }));