feat: start v10

.github/workflows/docs.yml

@@ -22,7 +22,7 @@ jobs:
       - name: Set node version
         uses: actions/setup-node@v4
         with:
-          node-version: 22.18.0
+          node-version: 24
 
       - name: Install
         shell: 'bash'

.github/workflows/test.yml

@@ -16,7 +16,7 @@ jobs:
       - name: Set node version
         uses: actions/setup-node@v4
         with:
-          node-version: 22.18.0
+          node-version: 24
       - name: install and compile
         run: yarn
       - name: build

ROADMAP.md

@@ -1,3 +1,8 @@
 # Roadmap
 
-TBD
+For v11:
+
+- backgrounds with globals
+- addons into core
+- make lite ui the default and remove dependencies from controls
+- simple docs implementation

docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "docs",
-  "version": "9.1.4",
+  "version": "10.0.0-beta.9",
   "private": true,
   "scripts": {
     "docusaurus": "docusaurus",
@@ -44,6 +44,6 @@
     ]
   },
   "engines": {
-    "node": ">=18.0"
+    "node": ">=22.18.0"
   }
 }

examples/expo-example/App.tsx

@@ -1,39 +1,4 @@
 // fixes fast refresh on web
 import '@expo/metro-runtime';
-import { Text, View } from 'react-native';
 
-function App() {
-  return (
-    <View
-      style={{
-        flex: 1,
-        backgroundColor: '#fff',
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
-    >
-      <Text>{"didn't get storybook enabled flag"}</Text>
-    </View>
-  );
-}
-
-const StorybookSwitcher = ({
-  enabled,
-  requireFunction,
-  App,
-}: {
-  requireFunction: () => ReturnType<typeof require>;
-  enabled: boolean;
-  App: React.ComponentType<any>;
-}) => {
-  if (enabled) {
-    return requireFunction().default;
-  }
-  return App;
-};
-
-export default StorybookSwitcher({
-  App,
-  requireFunction: () => require('./.rnstorybook'),
-  enabled: process.env.EXPO_PUBLIC_STORYBOOK_ENABLED === 'true',
-});
+export { default } from './.rnstorybook';

examples/expo-example/metro.config.js

@@ -20,9 +20,11 @@ defaultConfig.resolver.nodeModulesPaths = [
   path.resolve(workspaceRoot, 'node_modules'),
 ];
 
-const { withStorybookConfig } = require('@storybook/react-native/metro/withStorybookConfig');
+const { withStorybook } = require('@storybook/react-native/metro/withStorybook');
 
-module.exports = withStorybookConfig(defaultConfig);
+module.exports = withStorybook(defaultConfig, {
+  enabled: process.env.EXPO_PUBLIC_STORYBOOK_ENABLED === 'true',
+});
 
 /* , {
   enabled: process.env.STORYBOOK_ENABLED === 'true',

examples/expo-example/package.json

@@ -1,6 +1,6 @@
 {
   "name": "expo-example",
-  "version": "9.1.4",
+  "version": "10.0.0-beta.9",
   "private": true,
   "main": "index.js",
   "scripts": {
@@ -20,7 +20,7 @@
     "test": "jest",
     "test:ci": "jest --runInBand",
     "test:screenshots": "screenshot-stories --ignore-regions '376,2512,428,24' --html-report",
-    "postinstall": "cd ../.. && yarn build"
+    "eas-build-post-install": "cd ../.. && yarn build"
   },
   "dependencies": {
     "@babel/plugin-transform-class-static-block": "^7.27.1",
@@ -29,20 +29,20 @@
     "@react-native-async-storage/async-storage": "2.2.0",
     "@react-native-community/datetimepicker": "8.4.4",
     "@react-native-community/slider": "5.0.1",
-    "@storybook/addon-ondevice-actions": "^9.1.4",
-    "@storybook/addon-ondevice-backgrounds": "^9.1.4",
-    "@storybook/addon-ondevice-controls": "^9.1.4",
-    "@storybook/addon-ondevice-notes": "^9.1.4",
+    "@storybook/addon-ondevice-actions": "^10.0.0-beta.9",
+    "@storybook/addon-ondevice-backgrounds": "^10.0.0-beta.9",
+    "@storybook/addon-ondevice-controls": "^10.0.0-beta.9",
+    "@storybook/addon-ondevice-notes": "^10.0.0-beta.9",
     "@storybook/addon-react-native-server": "^1.0.0",
     "@storybook/global": "^5.0.0",
-    "@storybook/react": "^9.1.8",
-    "@storybook/react-native": "^9.1.4",
-    "@storybook/react-native-theming": "^9.1.4",
-    "@storybook/react-native-ui-lite": "^9.1.4",
-    "@storybook/react-native-web-vite": "^9.1.8",
-    "babel-plugin-react-compiler": "^19.1.0-rc.3",
-    "expo": "^54.0.10",
-    "expo-updates": "~29.0.11",
+    "@storybook/react": "10.0.0-beta.9",
+    "@storybook/react-native": "^10.0.0-beta.9",
+    "@storybook/react-native-theming": "^10.0.0-beta.9",
+    "@storybook/react-native-ui-lite": "^10.0.0-beta.9",
+    "@storybook/react-native-web-vite": "10.0.0-beta.9",
+    "babel-plugin-react-compiler": "^19.1.0-rc.2",
+    "expo": "^54.0.12",
+    "expo-updates": "~29.0.12",
     "react": "19.1.0",
     "react-compiler-runtime": "^19.1.0-rc.3",
     "react-dom": "19.1.0",
@@ -52,8 +52,8 @@
     "react-native-safe-area-context": "~5.6.0",
     "react-native-svg": "15.12.1",
     "react-native-web": "^0.21.0",
-    "react-native-worklets": "0.5.1",
-    "storybook": "^9.1.8",
+    "react-native-worklets": "^0.5.1",
+    "storybook": "10.0.0-beta.9",
     "storybook-addon-deep-controls": "^0.9.5",
     "ws": "^8.18.0"
   },

lerna.json

@@ -1,5 +1,5 @@
 {
   "npmClient": "yarn",
   "registry": "https://registry.npmjs.org",
-  "version": "9.1.4"
+  "version": "10.0.0-beta.9"
 }

package.json

@@ -68,8 +68,7 @@
     "react-native-web": "^0.21.0"
   },
   "engines": {
-    "node": ">=16",
-    "yarn": ">=1.3.2"
+    "node": ">=22.18.0"
   },
   "collective": {
     "type": "opencollective",

packages/ondevice-actions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-actions",
-  "version": "9.1.4",
+  "version": "10.0.0-beta.9",
   "description": "Action Logger addon for react-native storybook",
   "keywords": [
     "storybook"
@@ -36,7 +36,7 @@
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
-    "storybook": ">=9"
+    "storybook": ">=10 || 10.0.0-beta.0 || ^10"
   },
   "publishConfig": {
     "access": "public"

packages/ondevice-actions/src/containers/ActionLogger/index.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import deepEqual from 'fast-deep-equal';
-import { addons } from 'storybook/internal/manager-api';
+import { addons } from 'storybook/manager-api';
 import { SET_CURRENT_STORY } from 'storybook/internal/core-events';
 import { ActionDisplay, EVENT_ID } from 'storybook/actions';
 import { ActionLogger as ActionLoggerComponent } from '../../components/ActionLogger';

packages/ondevice-actions/src/index.tsx

@@ -1,5 +1,5 @@
 import { ADDON_ID, PANEL_ID, PARAM_KEY } from 'storybook/actions';
-import { addons, types } from 'storybook/internal/manager-api';
+import { addons, types } from 'storybook/manager-api';
 import ActionLogger from './containers/ActionLogger';
 
 export function register() {

packages/ondevice-backgrounds/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-backgrounds",
-  "version": "9.1.4",
+  "version": "10.0.0-beta.9",
   "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.1.4"
+    "@storybook/react-native-theming": "^10.0.0-beta.9"
   },
   "devDependencies": {
     "typescript": "~5.9.2"
   },
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
-    "storybook": ">=9"
+    "storybook": ">=10 || 10.0.0-beta.0 || ^10"
   },
   "publishConfig": {
     "access": "public"

packages/ondevice-backgrounds/src/BackgroundPanel.tsx

@@ -1,4 +1,4 @@
-import type { AddonStore, API } from 'storybook/internal/manager-api';
+import type { AddonStore, API } from 'storybook/manager-api';
 import { StyleSheet, Text, View } from 'react-native';
 
 import Swatch from './Swatch';

packages/ondevice-backgrounds/src/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { makeDecorator } from 'storybook/internal/preview-api';
-import { addons } from 'storybook/internal/manager-api';
+import { addons } from 'storybook/manager-api';
 
 import Events from './constants';
 import Container from './container';

packages/ondevice-backgrounds/src/register.tsx

@@ -1,4 +1,4 @@
-import { addons, types } from 'storybook/internal/manager-api';
+import { addons, types } from 'storybook/manager-api';
 import BackgroundPanel from './BackgroundPanel';
 import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';
 

packages/ondevice-controls/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-controls",
-  "version": "9.1.4",
+  "version": "10.0.0-beta.9",
   "description": "Display storybook controls on your device.",
   "keywords": [
     "addon",
@@ -30,8 +30,8 @@
     "copyimages": "cross-env-shell cp -r src/components/color-picker/resources dist/components/color-picker/resources"
   },
   "dependencies": {
-    "@storybook/react-native-theming": "^9.1.4",
-    "@storybook/react-native-ui-common": "^9.1.4",
+    "@storybook/react-native-theming": "^10.0.0-beta.9",
+    "@storybook/react-native-ui-common": "^10.0.0-beta.9",
     "deep-equal": "^1.0.1",
     "prop-types": "^15.7.2",
     "react-native-modal-datetime-picker": "^18.0.0",
@@ -47,7 +47,7 @@
     "@react-native-community/slider": "*",
     "react": "*",
     "react-native": "*",
-    "storybook": ">=9"
+    "storybook": ">=10 || 10.0.0-beta.0 || ^10"
   },
   "peerDependenciesMeta": {
     "@gorhom/bottom-sheet": {

packages/ondevice-controls/src/ControlsPanel.tsx

@@ -1,4 +1,4 @@
-import type { API } from 'storybook/internal/manager-api';
+import type { API } from 'storybook/manager-api';
 import { Channel } from 'storybook/internal/channels';
 import {
   type Args,

packages/ondevice-controls/src/index.tsx

@@ -1,4 +1,4 @@
-import { addons, types } from 'storybook/internal/manager-api';
+import { addons, types } from 'storybook/manager-api';
 
 import ControlsPanel from './ControlsPanel';
 import { AddonPanel } from './Panel';

packages/ondevice-notes/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-notes",
-  "version": "9.1.4",
+  "version": "10.0.0-beta.9",
   "description": "Write notes for your react-native Storybook stories.",
   "keywords": [
     "addon",
@@ -29,7 +29,7 @@
     "dev": "tsup --watch"
   },
   "dependencies": {
-    "@storybook/react-native-theming": "^9.1.4"
+    "@storybook/react-native-theming": "^10.0.0-beta.9"
   },
   "devDependencies": {
     "react-native-markdown-display": "^7.0.2",
@@ -39,7 +39,7 @@
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
-    "storybook": ">=9"
+    "storybook": ">=10 || 10.0.0-beta.0 || ^10"
   },
   "publishConfig": {
     "access": "public"

packages/ondevice-notes/src/components/Notes.tsx

@@ -5,7 +5,7 @@ import Markdown from 'react-native-markdown-display';
 
 import { RNAddonApi, StoryFromId } from '../register';
 import { ErrorBoundary } from '../ErrorBoundary';
-import { addons } from 'storybook/internal/manager-api';
+import { addons } from 'storybook/manager-api';
 import { useTheme } from '@storybook/react-native-theming';
 
 export const PARAM_KEY = 'notes';

packages/ondevice-notes/src/register.tsx

@@ -1,4 +1,4 @@
-import { type API, addons, types } from 'storybook/internal/manager-api';
+import { type API, addons, types } from 'storybook/manager-api';
 import { Notes } from './components/Notes';
 
 import type { Args, StoryContext } from 'storybook/internal/csf';

packages/react-native-theming/package.json

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

packages/react-native-ui-common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-ui-common",
-  "version": "9.1.4",
+  "version": "10.0.0-beta.9",
   "description": "common ui components for react native storybook",
   "keywords": [
     "react",
@@ -57,8 +57,8 @@
     "typescript": "~5.9.2"
   },
   "dependencies": {
-    "@storybook/react": "^9.1.8",
-    "@storybook/react-native-theming": "^9.1.4",
+    "@storybook/react": "10.0.0-beta.9",
+    "@storybook/react-native-theming": "^10.0.0-beta.9",
     "es-toolkit": "^1.38.0",
     "fuse.js": "^7.0.0",
     "memoizerific": "^1.11.3",
@@ -69,10 +69,10 @@
   "peerDependencies": {
     "react": "*",
     "react-native": ">=0.57.0",
-    "storybook": ">=9"
+    "storybook": ">=10 || 10.0.0-beta.0 || ^10"
   },
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=20.0.0"
   },
   "publishConfig": {
     "access": "public"

packages/react-native-ui-common/src/hooks/useExpanded.ts

@@ -1,4 +1,4 @@
-import type { StoriesHash } from 'storybook/internal/manager-api';
+import type { StoriesHash } from 'storybook/manager-api';
 import type { Dispatch } from 'react';
 import { useCallback, useEffect, useReducer } from 'react';
 import { getAncestorIds } from '../util/tree';

packages/react-native-ui-common/src/types.ts

@@ -5,7 +5,7 @@ import { Storage } from './StorageProvider';
 import * as Fuse from 'fuse.js';
 import { ReactElement, ReactNode } from 'react';
 import { PressableProps } from 'react-native';
-import type { State, StoriesHash } from 'storybook/internal/manager-api';
+import type { State, StoriesHash } from 'storybook/manager-api';
 import type {
   API_IndexHash,
   StatusesByStoryIdAndTypeId,

packages/react-native-ui-common/src/util/StoryHash.ts

@@ -1,5 +1,5 @@
 import { sanitize } from 'storybook/internal/csf';
-import type { API, State } from 'storybook/internal/manager-api';
+import type { API, State } from 'storybook/manager-api';
 import type {
   API_ComponentEntry,
   API_DocsEntry,