feat: update to 9.0.9 (#749)

dannyhw · web-flow · commit 83e0138bc87a · 2025-06-13T00:04:57.000+01:00
* feat: update to 9.0.9

* feat: use rn types instead

* v9.0.7-alpha.1
diff --git a/docs/package.json b/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "docs",
-  "version": "9.0.7-alpha.0",
+  "version": "9.0.7-alpha.1",
   "private": true,
   "scripts": {
     "docusaurus": "docusaurus",
diff --git a/examples/expo-example/.rnstorybook/index.tsx b/examples/expo-example/.rnstorybook/index.tsx
@@ -13,7 +13,7 @@ const StorybookUIRoot = view.getStorybookUI({
     getItem: AsyncStorage.getItem,
     setItem: AsyncStorage.setItem,
   },
-  enableWebsockets: true,
+  enableWebsockets: false,
   // onDeviceUI: !isScreenshotTesting,
   host: 'localhost',
   port: 7007,
diff --git a/examples/expo-example/.rnstorybook/preview.tsx b/examples/expo-example/.rnstorybook/preview.tsx
@@ -1,6 +1,6 @@
 import { View, Appearance } from 'react-native';
 import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds';
-import type { Preview } from '@storybook/react';
+import type { Preview } from '@storybook/react-native';
 
 const preview: Preview = {
   decorators: [
diff --git a/examples/expo-example/components/ActionExample/Actions.stories.tsx b/examples/expo-example/components/ActionExample/Actions.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-native';
 import { ActionButton } from './Actions';
 import { fn } from 'storybook/test';
 
diff --git a/examples/expo-example/components/BackgroundExample/BackgroundCsf.stories.tsx b/examples/expo-example/components/BackgroundExample/BackgroundCsf.stories.tsx
@@ -1,4 +1,4 @@
-import type { StoryObj, Meta } from '@storybook/react';
+import type { StoryObj, Meta } from '@storybook/react-native';
 import { Text, StyleSheet } from 'react-native';
 
 const Background = () => (
diff --git a/examples/expo-example/components/ControlExamples/Array/Array.stories.tsx b/examples/expo-example/components/ControlExamples/Array/Array.stories.tsx
@@ -1,4 +1,4 @@
-import type { StoryObj, Meta } from '@storybook/react';
+import type { StoryObj, Meta } from '@storybook/react-native';
 import { Array } from './Array';
 
 const meta = {
diff --git a/examples/expo-example/components/ControlExamples/Boolean/Boolean.stories.tsx b/examples/expo-example/components/ControlExamples/Boolean/Boolean.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-native';
 import { Switch } from './Boolean';
 
 const meta = {
diff --git a/examples/expo-example/components/ControlExamples/Color/Color.stories.tsx b/examples/expo-example/components/ControlExamples/Color/Color.stories.tsx
@@ -1,4 +1,4 @@
-import type { StoryObj, Meta } from '@storybook/react';
+import type { StoryObj, Meta } from '@storybook/react-native';
 import { Color } from './Color';
 
 const meta = {
diff --git a/examples/expo-example/components/ControlExamples/ControlExample/ControlExample.stories.tsx b/examples/expo-example/components/ControlExamples/ControlExample/ControlExample.stories.tsx
@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-native';
 import { ControlExample } from './ControlExample';
 
 const meta = {
diff --git a/examples/expo-example/components/ControlExamples/Date/Date.stories.tsx b/examples/expo-example/components/ControlExamples/Date/Date.stories.tsx
@@ -1,4 +1,4 @@
-import type { StoryObj, Meta } from '@storybook/react';
+import type { StoryObj, Meta } from '@storybook/react-native';
 import { DateString } from './Date';
 
 const date = new Date(1983, 1, 25);
diff --git a/examples/expo-example/components/ControlExamples/Number/Number.stories.tsx b/examples/expo-example/components/ControlExamples/Number/Number.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-native';
 import { Multiply } from './Number';
 
 const meta = {
diff --git a/examples/expo-example/components/ControlExamples/Object/Object.stories.tsx b/examples/expo-example/components/ControlExamples/Object/Object.stories.tsx
@@ -1,4 +1,4 @@
-import type { StoryObj, Meta } from '@storybook/react';
+import type { StoryObj, Meta } from '@storybook/react-native';
 import { Movie } from './Object';
 
 const meta = {
diff --git a/examples/expo-example/components/ControlExamples/Radio/Radio.stories.tsx b/examples/expo-example/components/ControlExamples/Radio/Radio.stories.tsx
@@ -1,4 +1,4 @@
-import type { StoryObj, Meta } from '@storybook/react';
+import type { StoryObj, Meta } from '@storybook/react-native';
 import { Radio } from './Radio';
 
 const radio_stations = ['104.8MHz', '909 kHz', '90FM'];
diff --git a/examples/expo-example/components/ControlExamples/Reproductions/SelectWithNumber.stories.tsx b/examples/expo-example/components/ControlExamples/Reproductions/SelectWithNumber.stories.tsx
@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-native';
 
 import { MyButton } from './SelectWithNumber';
 
diff --git a/examples/expo-example/components/ControlExamples/Select/Select.stories.tsx b/examples/expo-example/components/ControlExamples/Select/Select.stories.tsx
@@ -1,4 +1,4 @@
-import type { StoryObj, Meta } from '@storybook/react';
+import type { StoryObj, Meta } from '@storybook/react-native';
 import { SelectExample } from './Select';
 
 const arrows = { ArrowUp: '⬆', ArrowDown: '⬇', ArrowLeft: '⬅️', ArrowRight: '➡️' };
diff --git a/examples/expo-example/components/ControlExamples/Text/Text.stories.tsx b/examples/expo-example/components/ControlExamples/Text/Text.stories.tsx
@@ -1,4 +1,4 @@
-import type { StoryObj, Meta } from '@storybook/react';
+import type { StoryObj, Meta } from '@storybook/react-native';
 import { Heading } from './Text';
 
 const meta = {
diff --git a/examples/expo-example/components/DeepControls/DeepControls.stories.tsx b/examples/expo-example/components/DeepControls/DeepControls.stories.tsx
@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-native';
 import { Text, View } from 'react-native';
 
 const DeepControls = ({
diff --git a/examples/expo-example/components/HiddenControls/HiddenControls.stories.tsx b/examples/expo-example/components/HiddenControls/HiddenControls.stories.tsx
@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-native';
 import { Text, View } from 'react-native';
 
 type HiddenControlsProps = {
diff --git a/examples/expo-example/components/InputExample/TextInput.stories.tsx b/examples/expo-example/components/InputExample/TextInput.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-native';
 import { Input } from './TextInput';
 
 const meta = {
diff --git a/examples/expo-example/components/InteractionExample/InteractionExample.stories.tsx b/examples/expo-example/components/InteractionExample/InteractionExample.stories.tsx
@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-native';
 import { useReducer } from 'react';
 import { View, ScrollView, Text, TextInput, TouchableOpacity } from 'react-native';
 
diff --git a/examples/expo-example/components/LoginDocsExample/Button/Button.stories.tsx b/examples/expo-example/components/LoginDocsExample/Button/Button.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-native';
 import { fn } from 'storybook/test';
 import { Button } from './Button';
 
diff --git a/examples/expo-example/components/LoginDocsExample/LoginForm/LoginForm.stories.tsx b/examples/expo-example/components/LoginDocsExample/LoginForm/LoginForm.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-native';
 import { fn } from 'storybook/test';
 import { LoginForm } from './LoginForm';
 
diff --git a/examples/expo-example/components/LoginDocsExample/TextInput/TextInput.stories.tsx b/examples/expo-example/components/LoginDocsExample/TextInput/TextInput.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-native';
 import { TextInput } from './TextInput';
 
 const meta = {
diff --git a/examples/expo-example/components/NestingExample/ChatMessage.stories.tsx b/examples/expo-example/components/NestingExample/ChatMessage.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-native';
 import { Text } from 'react-native';
 
 const MyComponent = ({ text }) => <Text>{text}</Text>;
diff --git a/examples/expo-example/components/NestingExample/ChatMessageBubble.stories.tsx b/examples/expo-example/components/NestingExample/ChatMessageBubble.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-native';
 import { Text } from 'react-native';
 
 const MyComponent = ({ text }) => <Text>{text}</Text>;
diff --git a/examples/expo-example/components/NestingExample/ChatMessageBubbleAgain.stories.tsx b/examples/expo-example/components/NestingExample/ChatMessageBubbleAgain.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-native';
 import { Text } from 'react-native';
 
 const MyComponent = ({ text }) => <Text>{text}</Text>;
diff --git a/examples/expo-example/components/NestingExample/ChatMessageMessageInput.stories.tsx b/examples/expo-example/components/NestingExample/ChatMessageMessageInput.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-native';
 import { Text } from 'react-native';
 
 const MyComponent = ({ text }) => <Text>{text}</Text>;
diff --git a/examples/expo-example/components/NestingExample/ChatMessageReactions.stories.tsx b/examples/expo-example/components/NestingExample/ChatMessageReactions.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-native';
 import { Text } from 'react-native';
 
 const MyComponent = ({ text }) => <Text>{text}</Text>;
diff --git a/examples/expo-example/components/NotesExample/NotesExample.stories.tsx b/examples/expo-example/components/NotesExample/NotesExample.stories.tsx
@@ -1,4 +1,4 @@
-import type { StoryObj, Meta } from '@storybook/react';
+import type { StoryObj, Meta } from '@storybook/react-native';
 import { View, StyleSheet, Text } from 'react-native';
 
 const NotesExampleMeta: Meta<any> = {
diff --git a/examples/expo-example/components/SafeAreaExample/SafeAreaInside.stories.tsx b/examples/expo-example/components/SafeAreaExample/SafeAreaInside.stories.tsx
@@ -1,4 +1,4 @@
-import type { StoryObj, Meta } from '@storybook/react';
+import type { StoryObj, Meta } from '@storybook/react-native';
 import { AButton } from './AButton';
 import { ScrollView } from 'react-native';
 
diff --git a/examples/expo-example/components/SafeAreaExample/SafeAreaOutside.stories.tsx b/examples/expo-example/components/SafeAreaExample/SafeAreaOutside.stories.tsx
@@ -1,4 +1,4 @@
-import type { StoryObj, Meta } from '@storybook/react';
+import type { StoryObj, Meta } from '@storybook/react-native';
 import { AButton } from './AButton';
 import { ScrollView } from 'react-native';
 
diff --git a/examples/expo-example/components/SafeAreaExample/UsableArea.stories.tsx b/examples/expo-example/components/SafeAreaExample/UsableArea.stories.tsx
@@ -1,4 +1,4 @@
-import type { StoryObj, Meta } from '@storybook/react';
+import type { StoryObj, Meta } from '@storybook/react-native';
 import { View, StyleSheet, Text } from 'react-native';
 
 function UsableAreaContent() {
diff --git a/examples/expo-example/other_components/TestCase/TestCase.stories.tsx b/examples/expo-example/other_components/TestCase/TestCase.stories.tsx
@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-native';
 import { useRef } from 'react';
 import { Text } from 'react-native';
 
diff --git a/examples/expo-example/other_components/TestCase2/TestCase2.stories.tsx b/examples/expo-example/other_components/TestCase2/TestCase2.stories.tsx
@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-native';
 import { Text } from 'react-native';
 
 const TestCase2 = () => {
diff --git a/examples/expo-example/package.json b/examples/expo-example/package.json
@@ -1,6 +1,6 @@
 {
   "name": "expo-example",
-  "version": "9.0.7-alpha.0",
+  "version": "9.0.7-alpha.1",
   "private": true,
   "main": "index.js",
   "scripts": {
@@ -30,18 +30,18 @@
     "@react-native-async-storage/async-storage": "2.1.2",
     "@react-native-community/datetimepicker": "8.3.0",
     "@react-native-community/slider": "4.5.6",
-    "@storybook/addon-links": "^9",
-    "@storybook/addon-ondevice-actions": "^9.0.7-alpha.0",
-    "@storybook/addon-ondevice-backgrounds": "^9.0.7-alpha.0",
-    "@storybook/addon-ondevice-controls": "^9.0.7-alpha.0",
-    "@storybook/addon-ondevice-notes": "^9.0.7-alpha.0",
+    "@storybook/addon-links": "^9.0.9",
+    "@storybook/addon-ondevice-actions": "^9.0.7-alpha.1",
+    "@storybook/addon-ondevice-backgrounds": "^9.0.7-alpha.1",
+    "@storybook/addon-ondevice-controls": "^9.0.7-alpha.1",
+    "@storybook/addon-ondevice-notes": "^9.0.7-alpha.1",
     "@storybook/addon-react-native-server": "^1.0.0",
     "@storybook/global": "^5.0.0",
-    "@storybook/react": "^9",
-    "@storybook/react-native": "^9.0.7-alpha.0",
-    "@storybook/react-native-theming": "^9.0.7-alpha.0",
-    "@storybook/react-native-ui-lite": "^9.0.7-alpha.0",
-    "@storybook/react-native-web-vite": "^9",
+    "@storybook/react": "^9.0.9",
+    "@storybook/react-native": "^9.0.7-alpha.1",
+    "@storybook/react-native-theming": "^9.0.7-alpha.1",
+    "@storybook/react-native-ui-lite": "^9.0.7-alpha.1",
+    "@storybook/react-native-web-vite": "^9.0.9",
     "babel-plugin-react-compiler": "^19.1.0-rc.2",
     "expo": "~53.0.9",
     "react": "19.0.0",
@@ -53,7 +53,7 @@
     "react-native-safe-area-context": "5.4.0",
     "react-native-svg": "15.11.2",
     "react-native-web": "^0.20.0",
-    "storybook": "^9",
+    "storybook": "^9.0.9",
     "storybook-addon-deep-controls": "^0.9.2",
     "ws": "^8.18.0"
   },
diff --git a/examples/expo-example/scripts/generatePerfTests.ts b/examples/expo-example/scripts/generatePerfTests.ts
@@ -1,7 +1,7 @@
 import * as fs from 'fs';
 import * as path from 'path';
 
-const template = (num: number) => `import { Meta, StoryObj } from '@storybook/react'
+const template = (num: number) => `import { Meta, StoryObj } from '@storybook/react-native'
 import { View } from 'react-native'
 
 const Test${num} = () => {
diff --git a/lerna.json b/lerna.json
@@ -1,5 +1,5 @@
 {
   "npmClient": "yarn",
   "registry": "https://registry.npmjs.org",
-  "version": "9.0.7-alpha.0"
+  "version": "9.0.7-alpha.1"
 }
diff --git a/packages/ondevice-actions/package.json b/packages/ondevice-actions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-actions",
-  "version": "9.0.7-alpha.0",
+  "version": "9.0.7-alpha.1",
   "description": "Action Logger addon for react-native storybook",
   "keywords": [
     "storybook"
@@ -36,7 +36,7 @@
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
-    "storybook": "^9"
+    "storybook": "^9.0.9"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/ondevice-actions/preview.js b/packages/ondevice-actions/preview.js
@@ -1,2 +1 @@
-// eslint-disable-next-line import/export
-export * from 'storybook/actions/preview';
+module.exports = require('./dist/preview.js');
diff --git a/packages/ondevice-actions/src/addArgs.ts b/packages/ondevice-actions/src/addArgs.ts
@@ -0,0 +1,8 @@
+import type { ArgsEnhancer } from 'storybook/internal/types';
+
+import { addActionsFromArgTypes, inferActionsFromArgTypesRegex } from './addArgsHelpers';
+
+export const argsEnhancers: ArgsEnhancer[] = [
+  addActionsFromArgTypes,
+  inferActionsFromArgTypesRegex,
+];
diff --git a/packages/ondevice-actions/src/addArgsHelpers.ts b/packages/ondevice-actions/src/addArgsHelpers.ts
@@ -0,0 +1,56 @@
+import type { Args, ArgsEnhancer, Renderer } from 'storybook/internal/types';
+
+import { action } from 'storybook/actions';
+
+const isInInitialArgs = (name: string, initialArgs: Args) =>
+  typeof initialArgs[name] === 'undefined' && !(name in initialArgs);
+
+/**
+ * Automatically add action args for argTypes whose name matches a regex, such as `^on.*` for
+ * react-style `onClick` etc.
+ */
+
+export const inferActionsFromArgTypesRegex: ArgsEnhancer<Renderer> = (context) => {
+  const {
+    initialArgs,
+    argTypes,
+    id,
+    parameters: { actions },
+  } = context;
+  if (!actions || actions.disable || !actions.argTypesRegex || !argTypes) {
+    return {};
+  }
+
+  const argTypesRegex = new RegExp(actions.argTypesRegex);
+  const argTypesMatchingRegex = Object.entries(argTypes).filter(
+    ([name]) => !!argTypesRegex.test(name)
+  );
+
+  return argTypesMatchingRegex.reduce((acc, [name, argType]) => {
+    if (isInInitialArgs(name, initialArgs)) {
+      acc[name] = action(name, { implicit: true, id });
+    }
+    return acc;
+  }, {} as Args);
+};
+
+/** Add action args for list of strings. */
+export const addActionsFromArgTypes: ArgsEnhancer<Renderer> = (context) => {
+  const {
+    initialArgs,
+    argTypes,
+    parameters: { actions },
+  } = context;
+  if (actions?.disable || !argTypes) {
+    return {};
+  }
+
+  const argTypesWithAction = Object.entries(argTypes).filter(([name, argType]) => !!argType.action);
+
+  return argTypesWithAction.reduce((acc, [name, argType]) => {
+    if (isInInitialArgs(name, initialArgs)) {
+      acc[name] = action(typeof argType.action === 'string' ? argType.action : name);
+    }
+    return acc;
+  }, {} as Args);
+};
diff --git a/packages/ondevice-actions/src/loaders.ts b/packages/ondevice-actions/src/loaders.ts
diff --git a/packages/ondevice-actions/src/preview.ts b/packages/ondevice-actions/src/preview.ts
diff --git a/packages/ondevice-backgrounds/package.json b/packages/ondevice-backgrounds/package.json
diff --git a/packages/ondevice-controls/package.json b/packages/ondevice-controls/package.json
diff --git a/packages/ondevice-notes/package.json b/packages/ondevice-notes/package.json
diff --git a/packages/react-native-theming/package.json b/packages/react-native-theming/package.json
diff --git a/packages/react-native-ui-common/package.json b/packages/react-native-ui-common/package.json
diff --git a/packages/react-native-ui-lite/package.json b/packages/react-native-ui-lite/package.json
diff --git a/packages/react-native-ui/package.json b/packages/react-native-ui/package.json
diff --git a/packages/react-native/package.json b/packages/react-native/package.json
diff --git a/packages/react-native/src/index.ts b/packages/react-native/src/index.ts
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "docs",`
`3`		`- "version": "9.0.7-alpha.0",`
	`3`	`+ "version": "9.0.7-alpha.1",`
`4`	`4`	`"private": true,`
`5`	`5`	`"scripts": {`
`6`	`6`	`"docusaurus": "docusaurus",`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import type { Meta, StoryObj } from '@storybook/react';`
	`1`	`+import type { Meta, StoryObj } from '@storybook/react-native';`
`2`	`2`	`import { ActionButton } from './Actions';`
`3`	`3`	`import { fn } from 'storybook/test';`
`4`	`4`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import type { StoryObj, Meta } from '@storybook/react';`
	`1`	`+import type { StoryObj, Meta } from '@storybook/react-native';`
`2`	`2`	`import { Text, StyleSheet } from 'react-native';`
`3`	`3`
`4`	`4`	`const Background = () => (`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { Meta, StoryObj } from '@storybook/react';`
	`1`	`+import { Meta, StoryObj } from '@storybook/react-native';`
`2`	`2`	`import { ControlExample } from './ControlExample';`
`3`	`3`
`4`	`4`	`const meta = {`