feat: upgrade everything to latest alpha version

examples/expo-example/.storybook/main.ts

@@ -9,8 +9,6 @@ const main: ServerStorybookConfig = {
   stories: ['../components/**/*.stories.?(ts|tsx|js|jsx)'],
 
   addons: [
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
     // note why does this break with get absolute?
     '@storybook/addon-react-native-server',
     'storybook-addon-deep-controls',

examples/expo-example/components/ActionExample/Actions.stories.tsx

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react';
-
 import { ActionButton } from './Actions';
 
 const meta = {
@@ -9,6 +8,8 @@ const meta = {
   },
   args: {
     text: 'Press me!',
+    // FIXME: something is wrong with the fn() since the latest alpha
+    // onPress: fn(),
   },
   parameters: {
     notes: `

examples/expo-example/package.json

@@ -1,6 +1,6 @@
 {
   "name": "expo-example",
-  "version": "9.0.0-alpha.8",
+  "version": "9.0.0-alpha.10",
   "private": true,
   "main": "index.js",
   "scripts": {
@@ -29,33 +29,31 @@
     "@react-native-async-storage/async-storage": "1.23.1",
     "@react-native-community/datetimepicker": "8.2.0",
     "@react-native-community/slider": "4.5.5",
-    "@storybook/addon-essentials": "9.0.0-alpha.8",
-    "@storybook/addon-interactions": "9.0.0-alpha.8",
-    "@storybook/addon-links": "9.0.0-alpha.8",
-    "@storybook/addon-ondevice-actions": "^9.0.0-alpha.8",
-    "@storybook/addon-ondevice-backgrounds": "^9.0.0-alpha.8",
-    "@storybook/addon-ondevice-controls": "^9.0.0-alpha.8",
-    "@storybook/addon-ondevice-notes": "^9.0.0-alpha.8",
+    "@storybook/addon-links": "9.0.0-alpha.17",
+    "@storybook/addon-ondevice-actions": "^9.0.0-alpha.10",
+    "@storybook/addon-ondevice-backgrounds": "^9.0.0-alpha.10",
+    "@storybook/addon-ondevice-controls": "^9.0.0-alpha.10",
+    "@storybook/addon-ondevice-notes": "^9.0.0-alpha.10",
     "@storybook/addon-react-native-server": "0.0.6",
-    "@storybook/blocks": "9.0.0-alpha.8",
+    "@storybook/blocks": "9.0.0-alpha.17",
     "@storybook/global": "^5.0.0",
-    "@storybook/react": "9.0.0-alpha.8",
-    "@storybook/react-native": "^9.0.0-alpha.8",
-    "@storybook/react-native-theming": "^9.0.0-alpha.8",
-    "@storybook/react-native-web-vite": "9.0.0-alpha.8",
-    "expo": "~52.0.39",
+    "@storybook/react": "9.0.0-alpha.17",
+    "@storybook/react-native": "^9.0.0-alpha.10",
+    "@storybook/react-native-theming": "^9.0.0-alpha.10",
+    "@storybook/react-native-web-vite": "9.0.0-alpha.17",
+    "expo": "~52.0.43",
     "history": "^5.3.0",
     "querystring": "^0.2.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-native": "0.76.7",
+    "react-native": "0.76.9",
     "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": "9.0.0-alpha.8",
+    "storybook": "9.0.0-alpha.17",
     "storybook-addon-deep-controls": "^0.9.2",
     "ws": "^8.18.0"
   },

lerna.json

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

packages/ondevice-actions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-actions",
-  "version": "9.0.0-alpha.8",
+  "version": "9.0.0-alpha.10",
   "description": "Action Logger addon for react-native storybook",
   "keywords": [
     "storybook"
@@ -36,7 +36,7 @@
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
-    "storybook": "9.0.0-alpha.8"
+    "storybook": "9.0.0-alpha.17"
   },
   "publishConfig": {
     "access": "public"

packages/ondevice-backgrounds/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-backgrounds",
-  "version": "9.0.0-alpha.8",
+  "version": "9.0.0-alpha.10",
   "description": "A react-native storybook addon to show different backgrounds for your preview",
   "keywords": [
     "addon",
@@ -32,15 +32,15 @@
     "dev": "tsc --watch"
   },
   "dependencies": {
-    "@storybook/react-native-theming": "^9.0.0-alpha.8"
+    "@storybook/react-native-theming": "^9.0.0-alpha.10"
   },
   "devDependencies": {
     "typescript": "^5.3.3"
   },
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
-    "storybook": "9.0.0-alpha.8"
+    "storybook": "9.0.0-alpha.17"
   },
   "publishConfig": {
     "access": "public"

packages/ondevice-controls/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-controls",
-  "version": "9.0.0-alpha.8",
+  "version": "9.0.0-alpha.10",
   "description": "Display storybook controls on your device.",
   "keywords": [
     "addon",
@@ -30,9 +30,8 @@
     "copyimages": "cross-env-shell cp -r src/components/color-picker/resources dist/components/color-picker/resources"
   },
   "dependencies": {
-    "@storybook/addon-controls": "9.0.0-alpha.8",
-    "@storybook/react-native-theming": "^9.0.0-alpha.8",
-    "@storybook/react-native-ui": "^9.0.0-alpha.8",
+    "@storybook/react-native-theming": "^9.0.0-alpha.10",
+    "@storybook/react-native-ui": "^9.0.0-alpha.10",
     "deep-equal": "^1.0.1",
     "prop-types": "^15.7.2",
     "react-native-modal-datetime-picker": "^18.0.0",
@@ -48,7 +47,7 @@
     "@react-native-community/slider": "*",
     "react": "*",
     "react-native": "*",
-    "storybook": "9.0.0-alpha.8"
+    "storybook": "9.0.0-alpha.17"
   },
   "publishConfig": {
     "access": "public"

packages/ondevice-notes/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-notes",
-  "version": "9.0.0-alpha.8",
+  "version": "9.0.0-alpha.10",
   "description": "Write notes for your react-native Storybook stories.",
   "keywords": [
     "addon",
@@ -29,7 +29,7 @@
     "dev": "tsc --watch"
   },
   "dependencies": {
-    "@storybook/react-native-theming": "^9.0.0-alpha.8",
+    "@storybook/react-native-theming": "^9.0.0-alpha.10",
     "react-native-markdown-display": "^7.0.2"
   },
   "devDependencies": {
@@ -38,7 +38,7 @@
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
-    "storybook": "9.0.0-alpha.8"
+    "storybook": "9.0.0-alpha.17"
   },
   "publishConfig": {
     "access": "public"

packages/react-native-theming/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-theming",
-  "version": "9.0.0-alpha.8",
+  "version": "9.0.0-alpha.10",
   "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": "9.0.0-alpha.8",
+  "version": "9.0.0-alpha.10",
   "description": "ui components for react native storybook",
   "keywords": [
     "react",
@@ -58,8 +58,8 @@
     "typescript": "^5.3.3"
   },
   "dependencies": {
-    "@storybook/react": "9.0.0-alpha.8",
-    "@storybook/react-native-theming": "^9.0.0-alpha.8",
+    "@storybook/react": "9.0.0-alpha.17",
+    "@storybook/react-native-theming": "^9.0.0-alpha.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-alpha.17"
   },
   "engines": {
     "node": ">=18.0.0"

packages/react-native-ui/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}

packages/react-native-ui/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

packages/react-native-ui/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;

packages/react-native/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "9.0.0-alpha.8",
+  "version": "9.0.0-alpha.10",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -48,9 +48,9 @@
   "dependencies": {
     "@storybook/csf": "^0.1.13",
     "@storybook/global": "^5.0.0",
-    "@storybook/react": "9.0.0-alpha.8",
-    "@storybook/react-native-theming": "^9.0.0-alpha.8",
-    "@storybook/react-native-ui": "^9.0.0-alpha.8",
+    "@storybook/react": "9.0.0-alpha.17",
+    "@storybook/react-native-theming": "^9.0.0-alpha.10",
+    "@storybook/react-native-ui": "^9.0.0-alpha.10",
     "commander": "^8.2.0",
     "dedent": "^1.5.1",
     "deepmerge": "^4.3.0",
@@ -70,9 +70,9 @@
     "jest-expo": "~52.0.6",
     "jotai": "^2.6.2",
     "react": "18.3.1",
-    "react-native": "0.76.7",
+    "react-native": "0.76.9",
     "react-test-renderer": "^18.3.1",
-    "storybook": "9.0.0-alpha.8",
+    "storybook": "9.0.0-alpha.17",
     "tsup": "^7.2.0",
     "typescript": "^5.3.3"
   },
@@ -82,7 +82,7 @@
     "react-native": ">=0.72.0",
     "react-native-gesture-handler": ">=2",
     "react-native-safe-area-context": "*",
-    "storybook": "9.0.0-alpha.8"
+    "storybook": "9.0.0-alpha.17"
   },
   "engines": {
     "node": ">=8.0.0"

packages/react-native/src/View.tsx

@@ -328,7 +328,7 @@ export class View {
         }
 
         return transformStoryIndexToStoriesHash(this._storyIndex, {
-          docsOptions: { docsMode: false, autodocs: false, defaultName: '' },
+          docsOptions: { docsMode: false, defaultName: '' },
           filters: {},
           status: {},
           provider: {