feat: 8.4 beta preparation (#634)

* feat: 8.4 beta preparation

* fix: sheet shows below container

* fix: remove unused state

* v8.4.0-alpha.0

* fix: broken tests

* fix: more accurate minimum version

* fix: more accurate minimum version

* fix: versions

* fix: versions

* v8.4.0-alpha.1

examples/expo-example/package.json

@@ -1,6 +1,6 @@
 {
   "name": "expo-example",
-  "version": "8.3.10",
+  "version": "8.4.0-alpha.1",
   "private": true,
   "main": "index.js",
   "scripts": {
@@ -20,56 +20,56 @@
   },
   "dependencies": {
     "@babel/preset-env": "^7.25.4",
-    "@expo/metro-runtime": "~3.2.3",
-    "@gorhom/bottom-sheet": "^5.0.2",
+    "@expo/metro-runtime": "~4.0.0-preview.0",
+    "@gorhom/bottom-sheet": "^5.0.5",
     "@react-native-async-storage/async-storage": "1.23.1",
-    "@react-native-community/datetimepicker": "8.0.1",
-    "@react-native-community/slider": "4.5.2",
-    "@storybook/addon-essentials": "^8.3.5",
-    "@storybook/addon-interactions": "^8.3.5",
-    "@storybook/addon-links": "^8.3.5",
-    "@storybook/addon-ondevice-actions": "^8.3.10",
-    "@storybook/addon-ondevice-backgrounds": "^8.3.10",
-    "@storybook/addon-ondevice-controls": "^8.3.10",
-    "@storybook/addon-ondevice-notes": "^8.3.10",
+    "@react-native-community/datetimepicker": "8.2.0",
+    "@react-native-community/slider": "4.5.5",
+    "@storybook/addon-essentials": "^8.4.0",
+    "@storybook/addon-interactions": "^8.4.0",
+    "@storybook/addon-links": "^8.4.0",
+    "@storybook/addon-ondevice-actions": "^8.4.0-alpha.1",
+    "@storybook/addon-ondevice-backgrounds": "^8.4.0-alpha.1",
+    "@storybook/addon-ondevice-controls": "^8.4.0-alpha.1",
+    "@storybook/addon-ondevice-notes": "^8.4.0-alpha.1",
     "@storybook/addon-react-native-server": "0.0.6",
     "@storybook/addon-react-native-web": "^0.0.22",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/blocks": "^8.3.5",
-    "@storybook/builder-webpack5": "^8.3.5",
+    "@storybook/blocks": "^8.4.0",
+    "@storybook/builder-webpack5": "^8.4.0",
     "@storybook/global": "^5.0.0",
-    "@storybook/react": "^8.3.5",
-    "@storybook/react-native": "^8.3.10",
-    "@storybook/react-native-theming": "^8.3.10",
-    "@storybook/react-webpack5": "^8.3.5",
-    "@storybook/test": "^8.3.5",
-    "expo": "^51.0.34",
+    "@storybook/react": "^8.4.0",
+    "@storybook/react-native": "^8.4.0-alpha.1",
+    "@storybook/react-native-theming": "^8.4.0-alpha.1",
+    "@storybook/react-webpack5": "^8.4.0",
+    "@storybook/test": "^8.4.0",
+    "expo": "52.0.0-preview.18",
     "history": "^5.3.0",
     "querystring": "^0.2.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-native": "0.74.5",
-    "react-native-gesture-handler": "~2.16.1",
-    "react-native-reanimated": "~3.10.1",
-    "react-native-safe-area-context": "4.10.5",
-    "react-native-svg": "15.2.0",
-    "react-native-web": "~0.19.10",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-native": "0.76.1",
+    "react-native-gesture-handler": "~2.20.2",
+    "react-native-reanimated": "~3.16.1",
+    "react-native-safe-area-context": "4.12.0",
+    "react-native-svg": "15.8.0",
+    "react-native-web": "~0.19.13",
     "react-router": "^6.26.2",
-    "storybook": "^8.3.5",
+    "storybook": "^8.4.0",
     "ws": "^8.18.0"
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",
     "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
     "@react-native/babel-preset": "^0.74.0",
     "@testing-library/react-native": "12.4.3",
-    "@types/react": "~18.2.79",
-    "@types/react-test-renderer": "18.0.7",
+    "@types/react": "~18.3.12",
+    "@types/react-test-renderer": "^18.3.0",
     "@types/ws": "^8.5.10",
     "babel-loader": "^9.1.3",
     "babel-plugin-react-docgen-typescript": "^1.5.1",
-    "jest": "29.7.0",
-    "jest-expo": "~51.0.4",
+    "jest": "^29.7.0",
+    "jest-expo": "~52.0.0-preview.3",
     "metro-react-native-babel-preset": "^0.77.0",
     "typescript": "^5.3.3"
   }

lerna.json

@@ -1,5 +1,5 @@
 {
   "npmClient": "yarn",
   "registry": "https://registry.npmjs.org",
-  "version": "8.3.10"
+  "version": "8.4.0-alpha.1"
 }

packages/ondevice-actions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-actions",
-  "version": "8.3.10",
+  "version": "8.4.0-alpha.1",
   "description": "Action Logger addon for react-native storybook",
   "keywords": [
     "storybook"
@@ -27,8 +27,8 @@
     "prepare": "tsc"
   },
   "dependencies": {
-    "@storybook/addon-actions": "^8.3.5",
-    "@storybook/core": "^8.3.5",
+    "@storybook/addon-actions": "^8.4.0",
+    "@storybook/core": "^8.4.0",
     "@storybook/global": "^5.0.0",
     "fast-deep-equal": "^2.0.1"
   },

packages/ondevice-backgrounds/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-backgrounds",
-  "version": "8.3.10",
+  "version": "8.4.0-alpha.1",
   "description": "A react-native storybook addon to show different backgrounds for your preview",
   "keywords": [
     "addon",
@@ -32,8 +32,8 @@
     "dev": "tsc --watch"
   },
   "dependencies": {
-    "@storybook/core": "^8.3.5",
-    "@storybook/react-native-theming": "^8.3.10"
+    "@storybook/core": "^8.4.0",
+    "@storybook/react-native-theming": "^8.4.0-alpha.1"
   },
   "devDependencies": {
     "typescript": "^5.3.3"

packages/ondevice-controls/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-controls",
-  "version": "8.3.10",
+  "version": "8.4.0-alpha.1",
   "description": "Display storybook controls on your device.",
   "keywords": [
     "addon",
@@ -30,10 +30,10 @@
     "copyimages": "cross-env-shell cp -r src/components/color-picker/resources dist/components/color-picker/resources"
   },
   "dependencies": {
-    "@storybook/addon-controls": "^8.3.5",
-    "@storybook/core": "^8.3.5",
-    "@storybook/react-native-theming": "^8.3.10",
-    "@storybook/react-native-ui": "^8.3.10",
+    "@storybook/addon-controls": "^8.4.0",
+    "@storybook/core": "^8.4.0",
+    "@storybook/react-native-theming": "^8.4.0-alpha.1",
+    "@storybook/react-native-ui": "^8.4.0-alpha.1",
     "deep-equal": "^1.0.1",
     "prop-types": "^15.7.2",
     "react-native-modal-datetime-picker": "^14.0.0",

packages/ondevice-notes/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-notes",
-  "version": "8.3.10",
+  "version": "8.4.0-alpha.1",
   "description": "Write notes for your react-native Storybook stories.",
   "keywords": [
     "addon",
@@ -29,8 +29,8 @@
     "dev": "tsc --watch"
   },
   "dependencies": {
-    "@storybook/core": "^8.3.5",
-    "@storybook/react-native-theming": "^8.3.10",
+    "@storybook/core": "^8.4.0",
+    "@storybook/react-native-theming": "^8.4.0-alpha.1",
     "react-native-markdown-display": "^7.0.2"
   },
   "devDependencies": {

packages/react-native-theming/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-theming",
-  "version": "8.3.10",
+  "version": "8.4.0-alpha.1",
   "description": "A wrapper library around emotion 11 to provide theming support for react-native storybook",
   "keywords": [
     "react",

packages/react-native-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-ui",
-  "version": "8.3.10",
+  "version": "8.4.0-alpha.1",
   "description": "ui components for react native storybook",
   "keywords": [
     "react",
@@ -49,18 +49,18 @@
   },
   "devDependencies": {
     "@types/jest": "^29.4.3",
-    "@types/react": "~18.2.79",
-    "babel-jest": "^29.4.3",
-    "jest": "29.7.0",
-    "react-test-renderer": "18.2.0",
+    "@types/react": "~18.3.12",
+    "babel-jest": "^29.7.0",
+    "jest": "^29.7.0",
+    "react-test-renderer": "^18.3.1",
+    "ts-dedent": "^2.2.0",
     "tsup": "^7.2.0",
-    "typescript": "^5.3.3",
-    "ts-dedent": "^2.2.0"
+    "typescript": "^5.3.3"
   },
   "dependencies": {
-    "@storybook/core": "^8.3.5",
-    "@storybook/react": "^8.3.5",
-    "@storybook/react-native-theming": "^8.3.10",
+    "@storybook/core": "^8.4.0",
+    "@storybook/react": "^8.4.0",
+    "@storybook/react-native-theming": "^8.4.0-alpha.1",
     "fuse.js": "^7.0.0",
     "memoizerific": "^1.11.3",
     "polished": "^4.3.1",

packages/react-native-ui/src/Button.tsx

@@ -1,6 +1,6 @@
 import { styled, useTheme } from '@storybook/react-native-theming';
 import { ReactElement, forwardRef, useEffect, useMemo, useState } from 'react';
-import { TouchableOpacity, TouchableOpacityProps } from 'react-native';
+import type { TouchableOpacityProps } from 'react-native';
 import { SvgProps } from 'react-native-svg';
 
 export interface ButtonProps extends TouchableOpacityProps {
@@ -15,7 +15,8 @@ export interface ButtonProps extends TouchableOpacityProps {
   Icon?: (props: SvgProps) => ReactElement;
 }
 
-export const Button = forwardRef<TouchableOpacity, ButtonProps>(
+// TODO fix this type
+export const Button = forwardRef<any, ButtonProps>(
   (
     {
       Icon,
@@ -29,7 +30,7 @@ export const Button = forwardRef<TouchableOpacity, ButtonProps>(
       children,
       text,
       ...props
-    },
+    }: ButtonProps,
     ref
   ) => {
     // let Comp: 'button' | 'a' | typeof Slot = 'button';

packages/react-native-ui/src/IconButton.tsx

@@ -1,9 +1,8 @@
-import { TouchableOpacity } from 'react-native';
 import { Button, ButtonProps } from './Button';
 import { forwardRef } from 'react';
 
-export const IconButton = forwardRef<TouchableOpacity, ButtonProps>(
-  ({ padding = 'small', variant = 'ghost', ...props }, ref) => {
+export const IconButton = forwardRef(
+  ({ padding = 'small', variant = 'ghost', ...props }: ButtonProps, ref) => {
     return <Button padding={padding} variant={variant} ref={ref} {...props} />;
   }
 );

packages/react-native-ui/src/Layout.tsx

@@ -4,7 +4,7 @@ import { type API_IndexHash, type Args, type StoryContext } from '@storybook/cor
 import type { ReactRenderer } from '@storybook/react';
 import { styled, useTheme } from '@storybook/react-native-theming';
 import { ReactNode, useRef, useState } from 'react';
-import { Platform, ScrollView, Text, View } from 'react-native';
+import { ScrollView, Text, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { IconButton } from './IconButton';
 import { useLayout } from './LayoutProvider';
@@ -28,8 +28,6 @@ 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();
   const { isDesktop } = useLayout();
@@ -135,7 +133,29 @@ export const Layout = ({
     <View style={{ flex: 1, paddingTop: insets.top, backgroundColor: theme.background.content }}>
       <View style={{ flex: 1, overflow: 'hidden' }}>{children}</View>
 
-      <MobileMenuDrawer ref={mobileMenuDrawerRef} onStateChange={setDrawerOpen}>
+      <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, color: theme.color.defaultText }} numberOfLines={1}>
+              {story?.title}/{story?.name}
+            </Text>
+          </Button>
+
+          <IconButton
+            onPress={() => addonPanelRef.current.setAddonsPanelOpen(true)}
+            Icon={BottomBarToggleIcon}
+          />
+        </Nav>
+      </Container>
+
+      <MobileMenuDrawer ref={mobileMenuDrawerRef}>
         <View style={{ paddingLeft: 16, paddingTop: 4, paddingBottom: 4 }}>
           {theme.base === 'light' ? (
             <Logo height={25} width={125} />
@@ -160,30 +180,7 @@ export const Layout = ({
         />
       </MobileMenuDrawer>
 
-      <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, color: theme.color.defaultText }} numberOfLines={1}>
-                {story?.title}/{story?.name}
-              </Text>
-            </Button>
-
-            <IconButton
-              onPress={() => addonPanelRef.current.setAddonsPanelOpen(true)}
-              Icon={BottomBarToggleIcon}
-            />
-          </Nav>
-        </Container>
-      )}
+      <MobileAddonsPanel ref={addonPanelRef} storyId={story?.id} />
     </View>
   );
 };
@@ -201,7 +198,6 @@ const Nav = styled.View({
 const Container = styled.View(({ theme }) => ({
   alignSelf: 'flex-end',
   width: '100%',
-  zIndex: 10,
   backgroundColor: theme.barBg,
   borderTopColor: theme.appBorderColor,
   borderTopWidth: 1,