Upgrade to Storybook 8.3.5

.ondevice/storybook.requires.ts

@@ -1,10 +1,6 @@
 /* do not change this file, it is auto generated by storybook. */
 
-import {
-  start,
-  prepareStories,
-  getProjectAnnotations,
-} from "@storybook/react-native";
+import { start, updateView } from "@storybook/react-native";
 
 import "@storybook/addon-ondevice-controls/register";
 import "@storybook/addon-ondevice-backgrounds/register";
@@ -48,15 +44,7 @@ if (!global.view) {
     storyEntries: normalizedStories,
   });
 } else {
-  const { importMap } = prepareStories({ storyEntries: normalizedStories });
-
-  global.view._preview.onStoriesChanged({
-    importFn: async (importPath: string) => importMap[importPath],
-  });
-
-  global.view._preview.onGetProjectAnnotationsChanged({
-    getProjectAnnotations: getProjectAnnotations(global.view, annotations),
-  });
+  updateView(global.view, annotations, normalizedStories);
 }
 
 export const view = global.view;

.storybook/main.ts

@@ -8,7 +8,6 @@ module.exports = {
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-react-native-web',
-    '@storybook/addon-react-native-server',
     './preset',
   ],
   framework: {

.storybook/preset.ts

@@ -1,6 +1,6 @@
-import type { Indexer } from '@storybook/types';
-import { loadCsf } from '@storybook/csf-tools';
-import { serverRequire } from '@storybook/core-common';
+import type { Indexer } from '@storybook/core/types';
+import { loadCsf } from '@storybook/core/csf-tools';
+import { serverRequire } from '@storybook/core/common';
 import { compile } from './compile.ts';
 import { vite, webpack, STORIES_REGEX } from './unplugin';
 

.storybook/unplugin.ts

@@ -1,5 +1,5 @@
 import { createUnplugin } from 'unplugin';
-import { serverRequire } from '@storybook/core-common';
+import { serverRequire } from '@storybook/core/common';
 import { compile, CompileOptions } from './compile';
 
 export const STORIES_REGEX = /\.dynamic\.[tj]sx?/;

README.md

@@ -4,19 +4,13 @@
 
 Screenshotting your RN app requires a few steps:
 
-1. Start the web version of Storybook. You should see the string "websocket connection established".
-
-```sh
-npm run storybook:web
-```
-
-1. After the web version is running, start the RN version with `EXPO_PUBLIC_STORYBOOK_SNAPSHOT=1`. `EXPO_PUBLIC_STORYBOOK_SNAPSHOT` removes Storybook's UI for cleaner screenshots.
+1. Start the RN version with `EXPO_PUBLIC_STORYBOOK_SNAPSHOT=1`. `EXPO_PUBLIC_STORYBOOK_SNAPSHOT` removes Storybook's UI for cleaner screenshots.
 
 ```sh
 EXPO_PUBLIC_STORYBOOK_SNAPSHOT=1 npm run storybook:ios
 ```
 
-3. After the RN version is running, run the snapshot tool, which will loop over the stories and save them into the `screenshots` directory.
+2. After the RN version is running, run the snapshot tool, which will loop over the stories and save them into the `screenshots` directory.
 
 ```sh
 npm run snapshot-storybook

components/Button/ButtonSynthetic.stories.tsx

@@ -0,0 +1,122 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { View } from 'react-native';
+import { MyButton } from './Button';
+
+const meta = {
+  title: 'MyButton',
+  component: MyButton,
+  args: {
+    text: 'Hello world',
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ padding: 16 }}>
+        <Story />
+      </View>
+    ),
+  ],
+} satisfies Meta<typeof MyButton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Button0: Story = { args: { text: 'Button 0' } };
+export const Button1: Story = { args: { text: 'Button 1' } };
+export const Button2: Story = { args: { text: 'Button 2' } };
+export const Button3: Story = { args: { text: 'Button 3' } };
+export const Button4: Story = { args: { text: 'Button 4' } };
+export const Button5: Story = { args: { text: 'Button 5' } };
+export const Button6: Story = { args: { text: 'Button 6' } };
+export const Button7: Story = { args: { text: 'Button 7' } };
+export const Button8: Story = { args: { text: 'Button 8' } };
+export const Button9: Story = { args: { text: 'Button 9' } };
+export const Button10: Story = { args: { text: 'Button 10' } };
+export const Button11: Story = { args: { text: 'Button 11' } };
+export const Button12: Story = { args: { text: 'Button 12' } };
+export const Button13: Story = { args: { text: 'Button 13' } };
+export const Button14: Story = { args: { text: 'Button 14' } };
+export const Button15: Story = { args: { text: 'Button 15' } };
+export const Button16: Story = { args: { text: 'Button 16' } };
+export const Button17: Story = { args: { text: 'Button 17' } };
+export const Button18: Story = { args: { text: 'Button 18' } };
+export const Button19: Story = { args: { text: 'Button 19' } };
+export const Button20: Story = { args: { text: 'Button 20' } };
+export const Button21: Story = { args: { text: 'Button 21' } };
+export const Button22: Story = { args: { text: 'Button 22' } };
+export const Button23: Story = { args: { text: 'Button 23' } };
+export const Button24: Story = { args: { text: 'Button 24' } };
+export const Button25: Story = { args: { text: 'Button 25' } };
+export const Button26: Story = { args: { text: 'Button 26' } };
+export const Button27: Story = { args: { text: 'Button 27' } };
+export const Button28: Story = { args: { text: 'Button 28' } };
+export const Button29: Story = { args: { text: 'Button 29' } };
+export const Button30: Story = { args: { text: 'Button 30' } };
+export const Button31: Story = { args: { text: 'Button 31' } };
+export const Button32: Story = { args: { text: 'Button 32' } };
+export const Button33: Story = { args: { text: 'Button 33' } };
+export const Button34: Story = { args: { text: 'Button 34' } };
+export const Button35: Story = { args: { text: 'Button 35' } };
+export const Button36: Story = { args: { text: 'Button 36' } };
+export const Button37: Story = { args: { text: 'Button 37' } };
+export const Button38: Story = { args: { text: 'Button 38' } };
+export const Button39: Story = { args: { text: 'Button 39' } };
+export const Button40: Story = { args: { text: 'Button 40' } };
+export const Button41: Story = { args: { text: 'Button 41' } };
+export const Button42: Story = { args: { text: 'Button 42' } };
+export const Button43: Story = { args: { text: 'Button 43' } };
+export const Button44: Story = { args: { text: 'Button 44' } };
+export const Button45: Story = { args: { text: 'Button 45' } };
+export const Button46: Story = { args: { text: 'Button 46' } };
+export const Button47: Story = { args: { text: 'Button 47' } };
+export const Button48: Story = { args: { text: 'Button 48' } };
+export const Button49: Story = { args: { text: 'Button 49' } };
+export const Button50: Story = { args: { text: 'Button 50' } };
+export const Button51: Story = { args: { text: 'Button 51' } };
+export const Button52: Story = { args: { text: 'Button 52' } };
+export const Button53: Story = { args: { text: 'Button 53' } };
+export const Button54: Story = { args: { text: 'Button 54' } };
+export const Button55: Story = { args: { text: 'Button 55' } };
+export const Button56: Story = { args: { text: 'Button 56' } };
+export const Button57: Story = { args: { text: 'Button 57' } };
+export const Button58: Story = { args: { text: 'Button 58' } };
+export const Button59: Story = { args: { text: 'Button 59' } };
+export const Button60: Story = { args: { text: 'Button 60' } };
+export const Button61: Story = { args: { text: 'Button 61' } };
+export const Button62: Story = { args: { text: 'Button 62' } };
+export const Button63: Story = { args: { text: 'Button 63' } };
+export const Button64: Story = { args: { text: 'Button 64' } };
+export const Button65: Story = { args: { text: 'Button 65' } };
+export const Button66: Story = { args: { text: 'Button 66' } };
+export const Button67: Story = { args: { text: 'Button 67' } };
+export const Button68: Story = { args: { text: 'Button 68' } };
+export const Button69: Story = { args: { text: 'Button 69' } };
+export const Button70: Story = { args: { text: 'Button 70' } };
+export const Button71: Story = { args: { text: 'Button 71' } };
+export const Button72: Story = { args: { text: 'Button 72' } };
+export const Button73: Story = { args: { text: 'Button 73' } };
+export const Button74: Story = { args: { text: 'Button 74' } };
+export const Button75: Story = { args: { text: 'Button 75' } };
+export const Button76: Story = { args: { text: 'Button 76' } };
+export const Button77: Story = { args: { text: 'Button 77' } };
+export const Button78: Story = { args: { text: 'Button 78' } };
+export const Button79: Story = { args: { text: 'Button 79' } };
+export const Button80: Story = { args: { text: 'Button 80' } };
+export const Button81: Story = { args: { text: 'Button 81' } };
+export const Button82: Story = { args: { text: 'Button 82' } };
+export const Button83: Story = { args: { text: 'Button 83' } };
+export const Button84: Story = { args: { text: 'Button 84' } };
+export const Button85: Story = { args: { text: 'Button 85' } };
+export const Button86: Story = { args: { text: 'Button 86' } };
+export const Button87: Story = { args: { text: 'Button 87' } };
+export const Button88: Story = { args: { text: 'Button 88' } };
+export const Button89: Story = { args: { text: 'Button 89' } };
+export const Button90: Story = { args: { text: 'Button 90' } };
+export const Button91: Story = { args: { text: 'Button 91' } };
+export const Button92: Story = { args: { text: 'Button 92' } };
+export const Button93: Story = { args: { text: 'Button 93' } };
+export const Button94: Story = { args: { text: 'Button 94' } };
+export const Button95: Story = { args: { text: 'Button 95' } };
+export const Button96: Story = { args: { text: 'Button 96' } };
+export const Button97: Story = { args: { text: 'Button 97' } };

metro.config.js

@@ -1,32 +1,31 @@
-const path = require("path");
-const { getDefaultConfig } = require("expo/metro-config");
-const { generate } = require("@storybook/react-native/scripts/generate");
-
-generate({
-  configPath: path.resolve(__dirname, "./.ondevice"),
-});
+const path = require('path');
+const { getDefaultConfig } = require('expo/metro-config');
+const withStorybook = require('@storybook/react-native/metro/withStorybook');
 
 const defaultConfig = getDefaultConfig(__dirname);
 
-defaultConfig.transformer.unstable_allowRequireContext = true;
+// defaultConfig.transformer.unstable_allowRequireContext = true;
 
-defaultConfig.resolver.resolveRequest = (context, moduleName, platform) => {
-  const defaultResolveResult = context.resolveRequest(
-    context,
-    moduleName,
-    platform
-  );
+// defaultConfig.resolver.resolveRequest = (context, moduleName, platform) => {
+//   const defaultResolveResult = context.resolveRequest(context, moduleName, platform);
 
-  if (
-    process.env.STORYBOOK_ENABLED !== "true" &&
-    defaultResolveResult?.filePath?.includes?.(".ondevice/")
-  ) {
-    return {
-      type: "empty",
-    };
-  }
+//   if (
+//     process.env.STORYBOOK_ENABLED !== 'true' &&
+//     defaultResolveResult?.filePath?.includes?.('.ondevice/')
+//   ) {
+//     return {
+//       type: 'empty',
+//     };
+//   }
 
-  return defaultResolveResult;
-};
+//   return defaultResolveResult;
+// };
 
-module.exports = defaultConfig;
+module.exports = withStorybook(defaultConfig, {
+  enabled: true,
+  configPath: path.resolve(__dirname, './.ondevice'),
+  websockets: {
+    port: 7007,
+    hostname: 'localhost',
+  },
+});