@storybook/react-native 7.6.10-alpha.0 → 7.6.10-alpha.3

package/dist/V6.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { P as Params } from './View-0aedc31a.js';
+import { P as Params } from './View-090d9c8b.js';
 import { ClientApi } from '@storybook/preview-api';
-import { L as LoaderFunction, A as Addon_StoryApi } from './index.d-cff8c6fa.js';
+import { L as LoaderFunction, A as Addon_StoryApi } from './index.d-48fbc63a.js';
 import { ReactNode } from 'react';
 import { ReactRenderer } from '@storybook/react';
 export { Theme, darkTheme, theme } from '@storybook/react-native-theming';

package/dist/V6.js

@@ -80,14 +80,21 @@ var import_preview_api3 = require("@storybook/preview-api");
 var import_preview_web = require("@storybook/preview-web");
 
 // src/View.tsx
-var import_async_storage = __toESM(require("@react-native-async-storage/async-storage"));
 var import_csf = require("@storybook/csf");
-var import_preview_api2 = require("@storybook/preview-api");
 var import_manager_api2 = require("@storybook/manager-api");
+var import_preview_api2 = require("@storybook/preview-api");
 var import_react_native_theming12 = require("@storybook/react-native-theming");
 var import_react16 = require("react");
 var import_react_native_safe_area_context3 = require("react-native-safe-area-context");
 
+// src/components/OnDeviceUI/OnDeviceUI.tsx
+var import_react_native_theming10 = require("@storybook/react-native-theming");
+var import_react15 = __toESM(require("react"));
+var import_react_native14 = require("react-native");
+
+// src/constants.ts
+var ANIMATION_DURATION_TRANSITION = 400;
+
 // src/hooks.tsx
 var import_react2 = __toESM(require("react"));
 
@@ -841,14 +848,6 @@ function useSelectedAddon(initialValue) {
   return result;
 }
 
-// src/components/OnDeviceUI/OnDeviceUI.tsx
-var import_react_native_theming10 = require("@storybook/react-native-theming");
-var import_react15 = __toESM(require("react"));
-var import_react_native14 = require("react-native");
-
-// src/constants.ts
-var ANIMATION_DURATION_TRANSITION = 400;
-
 // src/components/StoryListView/StoryListView.tsx
 var import_core_events = __toESM(require("@storybook/core-events"));
 var import_react_native_theming = require("@storybook/react-native-theming");
@@ -1952,6 +1951,7 @@ var OnDeviceUI_default = import_react15.default.memo(OnDeviceUI);
 // src/View.tsx
 var import_channels = require("@storybook/channels");
 var import_core_events2 = __toESM(require("@storybook/core-events"));
+var import_dedent = __toESM(require("dedent"));
 var import_deepmerge = __toESM(require("deepmerge"));
 var import_react_native16 = require("react-native");
 
@@ -2012,7 +2012,9 @@ var View10 = class {
   _preview;
   _asyncStorageStoryId;
   _webUrl;
+  _storage;
   _channel;
+  _idToPrepared = {};
   constructor(preview, channel) {
     this._preview = preview;
     this._channel = channel;
@@ -2034,8 +2036,8 @@ var View10 = class {
     if (shouldPersistSelection) {
       try {
         let value = this._asyncStorageStoryId;
-        if (!value) {
-          value = await import_async_storage.default.getItem(STORAGE_KEY);
+        if (!value && this._storage != null) {
+          value = await this._storage.getItem(STORAGE_KEY);
           this._asyncStorageStoryId = value;
         }
         const exists = value && Object.keys(this._storyIndex.entries).includes(value);
@@ -2061,11 +2063,24 @@ var View10 = class {
       }
     });
   };
+  createPreparedStoryMapping = async () => {
+    await Promise.all(
+      Object.keys(this._storyIndex.entries).map(async (storyId) => {
+        this._idToPrepared[storyId] = await this._preview.storyStore.loadStory({ storyId });
+      })
+    );
+    console.log("Storybook: Finished building story index");
+  };
   getStorybookUI = (params = {}) => {
-    const { shouldPersistSelection = true, onDeviceUI = true, enableWebsockets = false } = params;
+    const {
+      shouldPersistSelection = true,
+      onDeviceUI = true,
+      enableWebsockets = false,
+      storage
+    } = params;
+    this._storage = storage;
     const initialStory = this._getInitialStory(params);
     if (enableWebsockets) {
-      console.log("websockets enabled");
       const channel = this._getServerChannel(params);
       import_manager_api2.addons.setChannel(channel);
       import_preview_api2.addons.setChannel(channel);
@@ -2077,13 +2092,15 @@ var View10 = class {
     }
     import_manager_api2.addons.loadAddons({
       store: () => ({
-        fromId: (id) => this._preview.storyStore.getStoryContext(this._preview.storyStore.fromId(id)),
+        fromId: (id) => {
+          if (!this._ready) {
+            throw new Error("Storybook is not ready yet");
+          }
+          return this._preview.storyStore.getStoryContext(this._idToPrepared[id]);
+        },
         getSelection: () => {
           return this._preview.currentSelection;
         },
-        // @ts-ignore :) FIXME
-        // _channel: this._preview.channel,
-        // global.__STORYBOOK_ADDONS_CHANNEL__,
         _channel: this._channel
       })
     });
@@ -2096,15 +2113,30 @@ var View10 = class {
       const setContext = useSetStoryContext();
       const colorScheme = (0, import_react_native16.useColorScheme)();
       const [, forceUpdate] = (0, import_react16.useReducer)((x) => x + 1, 0);
+      const [ready, setReady] = (0, import_react16.useState)(false);
       const appliedTheme = (0, import_react16.useMemo)(
         () => (0, import_deepmerge.default)(colorScheme === "dark" ? import_react_native_theming12.darkTheme : import_react_native_theming12.theme, params.theme ?? {}),
         [colorScheme]
       );
       (0, import_react16.useEffect)(() => {
+        this.createPreparedStoryMapping().then(() => {
+          this._ready = true;
+          setReady(true);
+        }).catch((e) => console.error(e));
         self._setStory = (newStory) => {
           setContext(newStory);
-          if (shouldPersistSelection) {
-            import_async_storage.default.setItem(STORAGE_KEY, newStory.id).catch((e) => {
+          if (shouldPersistSelection && !storage) {
+            console.warn(import_dedent.default`Please set storage in getStorybookUI like this:
+              const StorybookUIRoot = view.getStorybookUI({
+                storage: {
+                  getItem: AsyncStorage.getItem,
+                  setItem: AsyncStorage.setItem,
+                },
+              });
+            `);
+          }
+          if (shouldPersistSelection && !!this._storage) {
+            this._storage.setItem(STORAGE_KEY, newStory.id).catch((e) => {
               console.warn("storybook-log: error writing to async storage", e);
             });
           }
@@ -2115,6 +2147,19 @@ var View10 = class {
           self._preview.selectSpecifiedStory();
         });
       }, []);
+      if (!ready) {
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          import_react_native16.View,
+          {
+            style: {
+              ...import_react_native16.StyleSheet.absoluteFillObject,
+              alignItems: "center",
+              justifyContent: "center"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native16.ActivityIndicator, { animating: true, size: "large" })
+          }
+        );
+      }
       if (onDeviceUI) {
         return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native_safe_area_context3.SafeAreaProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native_theming12.ThemeProvider, { theme: appliedTheme, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           OnDeviceUI_default,

package/dist/{View-0aedc31a.d.ts → View-090d9c8b.d.ts}

@@ -1,11 +1,15 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { StoryContext } from '@storybook/csf';
 import { PreviewWithSelection } from '@storybook/preview-web';
-import { Theme } from '@storybook/react-native-theming';
-import { S as StoryIndex } from './index.d-cff8c6fa.js';
 import { ReactRenderer } from '@storybook/react';
+import { Theme } from '@storybook/react-native-theming';
+import { S as StoryIndex, P as PreparedStory } from './index.d-48fbc63a.js';
 import { Channel } from '@storybook/channels';
 
+interface Storage {
+    getItem: (key: string) => Promise<string | null>;
+    setItem: (key: string, value: string) => Promise<void>;
+}
 type StoryKind = string;
 type StoryName = string;
 type InitialSelection = `${StoryKind}--${StoryName}` | {
@@ -36,6 +40,7 @@ type Params = {
     shouldDisableKeyboardAvoidingView?: boolean;
     keyboardAvoidingViewVerticalOffset?: number;
     theme: DeepPartial<Theme>;
+    storage?: Storage;
 };
 declare class View {
     _storyIndex: StoryIndex;
@@ -45,13 +50,16 @@ declare class View {
     _preview: PreviewWithSelection<ReactRenderer>;
     _asyncStorageStoryId: string;
     _webUrl: string;
+    _storage: Storage;
     _channel: Channel;
+    _idToPrepared: Record<string, PreparedStory<ReactRenderer>>;
     constructor(preview: PreviewWithSelection<ReactRenderer>, channel: Channel);
     _getInitialStory: ({ initialSelection, shouldPersistSelection, }?: Partial<Params>) => Promise<{
         storySpecifier: string;
         viewMode: string;
     }>;
     _getServerChannel: (params?: Partial<Params>) => Channel;
+    createPreparedStoryMapping: () => Promise<void>;
     getStorybookUI: (params?: Partial<Params>) => () => react_jsx_runtime.JSX.Element;
 }
 

package/dist/{index.d-cff8c6fa.d.ts → index.d-48fbc63a.d.ts}

@@ -194,5 +194,16 @@ interface Addon_StoryApi<StoryFnReturnType = unknown> {
     [k: string]: string | Addon_ClientApiReturnFn<StoryFnReturnType>;
 }
 type Path = string;
+type ModuleExport = any;
+type PreparedStory<TRenderer extends Renderer = Renderer> = StoryContextForEnhancers<TRenderer> & {
+    moduleExport: ModuleExport;
+    originalStoryFn: StoryFn<TRenderer>;
+    undecoratedStoryFn: LegacyStoryFn<TRenderer>;
+    unboundStoryFn: LegacyStoryFn<TRenderer>;
+    applyLoaders: (context: StoryContextForLoaders<TRenderer>) => Promise<StoryContextForLoaders<TRenderer> & {
+        loaded: StoryContext<TRenderer>['loaded'];
+    }>;
+    playFunction?: (context: StoryContext<TRenderer>) => Promise<void> | void;
+};
 
-export { Addon_StoryApi as A, LoaderFunction as L, NormalizedStoriesSpecifier as N, Renderer as R, StoryIndex as S, StoryContextForEnhancers as a, Args as b, StrictArgTypes as c };
+export { Addon_StoryApi as A, LoaderFunction as L, NormalizedStoriesSpecifier as N, PreparedStory as P, Renderer as R, StoryIndex as S, StoryContextForEnhancers as a, Args as b, StrictArgTypes as c };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export { Theme, darkTheme, theme } from '@storybook/react-native-theming';
-import { V as View } from './View-0aedc31a.js';
-import { N as NormalizedStoriesSpecifier } from './index.d-cff8c6fa.js';
+import { V as View } from './View-090d9c8b.js';
+import { N as NormalizedStoriesSpecifier } from './index.d-48fbc63a.js';
 import 'react/jsx-runtime';
 import '@storybook/csf';
 import '@storybook/preview-web';

package/dist/index.js

@@ -73,14 +73,21 @@ var import_preview_web = require("@storybook/preview-api/dist/preview-web");
 var import_channels2 = require("@storybook/channels");
 
 // src/View.tsx
-var import_async_storage = __toESM(require("@react-native-async-storage/async-storage"));
 var import_csf = require("@storybook/csf");
-var import_preview_api2 = require("@storybook/preview-api");
 var import_manager_api2 = require("@storybook/manager-api");
+var import_preview_api2 = require("@storybook/preview-api");
 var import_react_native_theming12 = require("@storybook/react-native-theming");
 var import_react16 = require("react");
 var import_react_native_safe_area_context3 = require("react-native-safe-area-context");
 
+// src/components/OnDeviceUI/OnDeviceUI.tsx
+var import_react_native_theming10 = require("@storybook/react-native-theming");
+var import_react15 = __toESM(require("react"));
+var import_react_native14 = require("react-native");
+
+// src/constants.ts
+var ANIMATION_DURATION_TRANSITION = 400;
+
 // src/hooks.tsx
 var import_react2 = __toESM(require("react"));
 
@@ -834,14 +841,6 @@ function useSelectedAddon(initialValue) {
   return result;
 }
 
-// src/components/OnDeviceUI/OnDeviceUI.tsx
-var import_react_native_theming10 = require("@storybook/react-native-theming");
-var import_react15 = __toESM(require("react"));
-var import_react_native14 = require("react-native");
-
-// src/constants.ts
-var ANIMATION_DURATION_TRANSITION = 400;
-
 // src/components/StoryListView/StoryListView.tsx
 var import_core_events = __toESM(require("@storybook/core-events"));
 var import_react_native_theming = require("@storybook/react-native-theming");
@@ -1945,6 +1944,7 @@ var OnDeviceUI_default = import_react15.default.memo(OnDeviceUI);
 // src/View.tsx
 var import_channels = require("@storybook/channels");
 var import_core_events2 = __toESM(require("@storybook/core-events"));
+var import_dedent = __toESM(require("dedent"));
 var import_deepmerge = __toESM(require("deepmerge"));
 var import_react_native16 = require("react-native");
 
@@ -2005,7 +2005,9 @@ var View10 = class {
   _preview;
   _asyncStorageStoryId;
   _webUrl;
+  _storage;
   _channel;
+  _idToPrepared = {};
   constructor(preview, channel) {
     this._preview = preview;
     this._channel = channel;
@@ -2027,8 +2029,8 @@ var View10 = class {
     if (shouldPersistSelection) {
       try {
         let value = this._asyncStorageStoryId;
-        if (!value) {
-          value = await import_async_storage.default.getItem(STORAGE_KEY);
+        if (!value && this._storage != null) {
+          value = await this._storage.getItem(STORAGE_KEY);
           this._asyncStorageStoryId = value;
         }
         const exists = value && Object.keys(this._storyIndex.entries).includes(value);
@@ -2054,11 +2056,24 @@ var View10 = class {
       }
     });
   };
+  createPreparedStoryMapping = async () => {
+    await Promise.all(
+      Object.keys(this._storyIndex.entries).map(async (storyId) => {
+        this._idToPrepared[storyId] = await this._preview.storyStore.loadStory({ storyId });
+      })
+    );
+    console.log("Storybook: Finished building story index");
+  };
   getStorybookUI = (params = {}) => {
-    const { shouldPersistSelection = true, onDeviceUI = true, enableWebsockets = false } = params;
+    const {
+      shouldPersistSelection = true,
+      onDeviceUI = true,
+      enableWebsockets = false,
+      storage
+    } = params;
+    this._storage = storage;
     const initialStory = this._getInitialStory(params);
     if (enableWebsockets) {
-      console.log("websockets enabled");
       const channel = this._getServerChannel(params);
       import_manager_api2.addons.setChannel(channel);
       import_preview_api2.addons.setChannel(channel);
@@ -2070,13 +2085,15 @@ var View10 = class {
     }
     import_manager_api2.addons.loadAddons({
       store: () => ({
-        fromId: (id) => this._preview.storyStore.getStoryContext(this._preview.storyStore.fromId(id)),
+        fromId: (id) => {
+          if (!this._ready) {
+            throw new Error("Storybook is not ready yet");
+          }
+          return this._preview.storyStore.getStoryContext(this._idToPrepared[id]);
+        },
         getSelection: () => {
           return this._preview.currentSelection;
         },
-        // @ts-ignore :) FIXME
-        // _channel: this._preview.channel,
-        // global.__STORYBOOK_ADDONS_CHANNEL__,
         _channel: this._channel
       })
     });
@@ -2089,15 +2106,30 @@ var View10 = class {
       const setContext = useSetStoryContext();
       const colorScheme = (0, import_react_native16.useColorScheme)();
       const [, forceUpdate] = (0, import_react16.useReducer)((x) => x + 1, 0);
+      const [ready, setReady] = (0, import_react16.useState)(false);
       const appliedTheme = (0, import_react16.useMemo)(
         () => (0, import_deepmerge.default)(colorScheme === "dark" ? import_react_native_theming12.darkTheme : import_react_native_theming12.theme, params.theme ?? {}),
         [colorScheme]
       );
       (0, import_react16.useEffect)(() => {
+        this.createPreparedStoryMapping().then(() => {
+          this._ready = true;
+          setReady(true);
+        }).catch((e) => console.error(e));
         self._setStory = (newStory) => {
           setContext(newStory);
-          if (shouldPersistSelection) {
-            import_async_storage.default.setItem(STORAGE_KEY, newStory.id).catch((e) => {
+          if (shouldPersistSelection && !storage) {
+            console.warn(import_dedent.default`Please set storage in getStorybookUI like this:
+              const StorybookUIRoot = view.getStorybookUI({
+                storage: {
+                  getItem: AsyncStorage.getItem,
+                  setItem: AsyncStorage.setItem,
+                },
+              });
+            `);
+          }
+          if (shouldPersistSelection && !!this._storage) {
+            this._storage.setItem(STORAGE_KEY, newStory.id).catch((e) => {
               console.warn("storybook-log: error writing to async storage", e);
             });
           }
@@ -2108,6 +2140,19 @@ var View10 = class {
           self._preview.selectSpecifiedStory();
         });
       }, []);
+      if (!ready) {
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          import_react_native16.View,
+          {
+            style: {
+              ...import_react_native16.StyleSheet.absoluteFillObject,
+              alignItems: "center",
+              justifyContent: "center"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native16.ActivityIndicator, { animating: true, size: "large" })
+          }
+        );
+      }
       if (onDeviceUI) {
         return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native_safe_area_context3.SafeAreaProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native_theming12.ThemeProvider, { theme: appliedTheme, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           OnDeviceUI_default,
@@ -2135,8 +2180,8 @@ function prepareStories({
     entries: {}
   };
   let importMap = {};
-  const makeTitle = (fileName, userTitle) => {
-    const title = (0, import_preview_api3.userOrAutoTitle)(fileName, storyEntries, userTitle);
+  const makeTitle = (fileName, specifier, userTitle) => {
+    const title = (0, import_preview_api3.userOrAutoTitleFromSpecifier)(fileName, specifier, userTitle);
     if (title) {
       return title.replace("./", "");
     } else {
@@ -2151,7 +2196,8 @@ function prepareStories({
       throw new Error("Could not generate title");
     }
   };
-  storyEntries.forEach(({ req, directory: root }) => {
+  storyEntries.forEach((specifier) => {
+    const { req, directory: root } = specifier;
     req.keys().forEach((filename) => {
       try {
         const fileExports = req(filename);
@@ -2165,7 +2211,7 @@ function prepareStories({
           if (!exportValue)
             return;
           const name = (0, import_csf2.storyNameFromExport)(key);
-          const title = makeTitle(filename, meta.title);
+          const title = makeTitle(filename, specifier, meta.title);
           if (title) {
             const id = (0, import_csf2.toId)(title, name);
             index.entries[id] = {

package/dist/preview.d.ts

@@ -1,5 +1,5 @@
 import * as _storybook_docs_tools from '@storybook/docs-tools';
-import { R as Renderer, a as StoryContextForEnhancers, b as Args, c as StrictArgTypes } from './index.d-cff8c6fa.js';
+import { R as Renderer, a as StoryContextForEnhancers, b as Args, c as StrictArgTypes } from './index.d-48fbc63a.js';
 
 declare const _default: {
     argTypesEnhancers: (<TRenderer extends Renderer>(context: StoryContextForEnhancers<TRenderer, Args>) => StrictArgTypes<Args>)[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "7.6.10-alpha.0",
+  "version": "7.6.10-alpha.3",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -51,7 +51,6 @@
     "preset": "react-native"
   },
   "dependencies": {
-    "@storybook/channel-websocket": "^7.6.10",
     "@storybook/channels": "^7.6.10",
     "@storybook/client-logger": "^7.6.10",
     "@storybook/core-client": "^7.6.10",
@@ -64,9 +63,10 @@
     "@storybook/preview-api": "^7.6.10",
     "@storybook/preview-web": "^7.6.10",
     "@storybook/react": "^7.6.10",
-    "@storybook/react-native-theming": "^7.6.10-alpha.0",
+    "@storybook/react-native-theming": "^7.6.10-alpha.3",
     "chokidar": "^3.5.1",
     "commander": "^8.2.0",
+    "dedent": "^1.5.1",
     "deepmerge": "^4.3.0",
     "glob": "^7.1.7",
     "prettier": "^2.4.1",
@@ -87,7 +87,6 @@
     "typescript": "^5.3.3"
   },
   "peerDependencies": {
-    "@react-native-async-storage/async-storage": ">=1",
     "react": "*",
     "react-native": ">=0.57.0",
     "react-native-safe-area-context": "*"
@@ -98,5 +97,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d48243ffb345570962154e0bdf610e3699202bed"
+  "gitHead": "d0c275a9a09187b5f04e60c4d9170d7eae3a5437"
 }

package/readme.md

@@ -256,6 +256,11 @@ You can pass these parameters to getStorybookUI call in your storybook entry poi
         -- Disable KeyboardAvoidingView wrapping Storybook's view
     keyboardAvoidingViewVerticalOffset: Number (0)
         -- With shouldDisableKeyboardAvoidingView=true, this will set the keyboardverticaloffset (https://facebook.github.io/react-native/docs/keyboardavoidingview#keyboardverticaloffset) value for KeyboardAvoidingView wrapping Storybook's view
+    storage: Object (undefined)
+        -- {getItem: (key: string) => Promise<string | null>;setItem: (key: string, value: string) => Promise<void>;}
+        -- Custom storage to be used instead of AsyncStorage
+    shouldPersistSelection: Boolean (true)
+        -- Stores last selected story in your devices storage.
 }
 ```
 

package/scripts/__snapshots__/loader.test.js.snap

@@ -4,7 +4,7 @@ exports[`loader writeRequires when there are different file extensions writes th
 "
       /* do not change this file, it is auto generated by storybook. */
 
-      import { configure, addDecorator, addParameters, addArgsEnhancer } from '@storybook/react-native';
+      import { configure, addDecorator, addParameters, addArgsEnhancer } from '@storybook/react-native/V6';
 
       global.STORIES = [{"titlePrefix":"","directory":"./scripts/mocks/file-extensions","files":"FakeStory.stories.tsx","importPathMatcher":"^\\\\.[\\\\\\\\/](?:scripts\\\\/mocks\\\\/file-extensions\\\\/FakeStory\\\\.stories\\\\.tsx)$"}]
 
@@ -48,7 +48,7 @@ exports[`loader writeRequires when there is a configuration object writes the st
 "
       /* do not change this file, it is auto generated by storybook. */
 
-      import { configure, addDecorator, addParameters, addArgsEnhancer } from '@storybook/react-native';
+      import { configure, addDecorator, addParameters, addArgsEnhancer } from '@storybook/react-native/V6';
 
       global.STORIES = [{"titlePrefix":"ComponentsPrefix","files":"**/*.stories.tsx","directory":"./scripts/mocks/configuration-objects/components","importPathMatcher":"^\\\\.[\\\\\\\\/](?:scripts\\\\/mocks\\\\/configuration-objects\\\\/components(?:\\\\/(?!\\\\.)(?:(?:(?!(?:^|\\\\/)\\\\.).)*?)\\\\/|\\\\/|$)(?!\\\\.)(?=.)[^/]*?\\\\.stories\\\\.tsx)$"}]
 
@@ -92,7 +92,7 @@ exports[`loader writeRequires when there is a story glob and exclude paths globs
 "
       /* do not change this file, it is auto generated by storybook. */
 
-      import { configure, addDecorator, addParameters, addArgsEnhancer } from '@storybook/react-native';
+      import { configure, addDecorator, addParameters, addArgsEnhancer } from '@storybook/react-native/V6';
 
       global.STORIES = [{"titlePrefix":"","directory":"./scripts/mocks/exclude-config-files","files":"**/*.stories.tsx","importPathMatcher":"^\\\\.[\\\\\\\\/](?:scripts\\\\/mocks\\\\/exclude-config-files(?:\\\\/(?!\\\\.)(?:(?:(?!(?:^|\\\\/)\\\\.).)*?)\\\\/|\\\\/|$)(?!\\\\.)(?=.)[^/]*?\\\\.stories\\\\.tsx)$"}]
 
@@ -136,7 +136,7 @@ exports[`loader writeRequires when there is a story glob writes the story import
 "
       /* do not change this file, it is auto generated by storybook. */
 
-      import { configure, addDecorator, addParameters, addArgsEnhancer } from '@storybook/react-native';
+      import { configure, addDecorator, addParameters, addArgsEnhancer } from '@storybook/react-native/V6';
 
       global.STORIES = [{"titlePrefix":"","directory":"./scripts/mocks/all-config-files","files":"FakeStory.stories.tsx","importPathMatcher":"^\\\\.[\\\\\\\\/](?:scripts\\\\/mocks\\\\/all-config-files\\\\/FakeStory\\\\.stories\\\\.tsx)$"}]
 
@@ -180,7 +180,7 @@ exports[`loader writeRequires when there is no preview does not add preview rela
 "
       /* do not change this file, it is auto generated by storybook. */
 
-      import { configure, addDecorator, addParameters, addArgsEnhancer } from '@storybook/react-native';
+      import { configure, addDecorator, addParameters, addArgsEnhancer } from '@storybook/react-native/V6';
 
       global.STORIES = [{"titlePrefix":"","directory":"./scripts/mocks/no-preview","files":"FakeStory.stories.tsx","importPathMatcher":"^\\\\.[\\\\\\\\/](?:scripts\\\\/mocks\\\\/no-preview\\\\/FakeStory\\\\.stories\\\\.tsx)$"}]
 

package/scripts/loader.js

@@ -153,7 +153,7 @@ function writeRequires({ configPath, absolute = false, v6RequireContext = false
   const fileContent = `
       /* do not change this file, it is auto generated by storybook. */
 
-      import { configure, addDecorator, addParameters, addArgsEnhancer } from '@storybook/react-native';
+      import { configure, addDecorator, addParameters, addArgsEnhancer } from '@storybook/react-native/V6';
 
       ${globalStories}
 

package/scripts/mocks/exclude-config-files/exclude-components/FakeComponent.tsx

@@ -1 +1 @@
-export const FakeComponent = () => null;
+export const FakeComponentExcluded = () => null;

package/scripts/mocks/file-extensions/main.ts

@@ -1,6 +1,4 @@
-import type { StorybookConfig } from '@storybook/core-common';
-
-const config: StorybookConfig = {
+const config = {
   stories: ['./FakeStory.stories.tsx'],
   addons: [
     '@storybook/addon-ondevice-notes',

package/template/cli/index.ts

@@ -0,0 +1,13 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { view } from './storybook.requires';
+
+import './storybook.requires';
+
+const StorybookUIRoot = view.getStorybookUI({
+  storage: {
+    getItem: AsyncStorage.getItem,
+    setItem: AsyncStorage.setItem,
+  },
+});
+
+export default StorybookUIRoot;

package/template/cli/preview.tsx

@@ -0,0 +1,14 @@
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

package/template/cli/stories/Button/{Button.stories.js → Button.stories.tsx}

@@ -1,8 +1,8 @@
-import React from 'react';
 import { View } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react';
 import { MyButton } from './Button';
 
-const MyButtonMeta = {
+const MyButtonMeta: Meta<typeof MyButton> = {
   title: 'MyButton',
   component: MyButton,
   argTypes: {
@@ -22,9 +22,9 @@ const MyButtonMeta = {
 
 export default MyButtonMeta;
 
-export const Basic = {};
+export const Basic: StoryObj<typeof MyButton> = {};
 
-export const AnotherExample = {
+export const AnotherExample: StoryObj<typeof MyButton> = {
   args: {
     text: 'Another example',
   },

package/template/cli/stories/Button/{Button.js → Button.tsx}

@@ -1,7 +1,11 @@
-import React from 'react';
 import { TouchableOpacity, Text, StyleSheet } from 'react-native';
 
-export const MyButton = ({ onPress, text }) => {
+export type MyButtonProps = {
+  onPress: () => void;
+  text: string;
+};
+
+export const MyButton = ({ onPress, text }: MyButtonProps) => {
   return (
     <TouchableOpacity style={styles.container} onPress={onPress} activeOpacity={0.8}>
       <Text style={styles.text}>{text}</Text>

package/template/cli/storybook.requires.ts

@@ -0,0 +1,34 @@
+/* do not change this file, it is auto generated by storybook. */
+
+import { start } from '@storybook/react-native';
+
+import '@storybook/addon-ondevice-controls/register';
+import '@storybook/addon-ondevice-actions/register';
+
+const normalizedStories = [
+  {
+    titlePrefix: '',
+    directory: './stories',
+    files: '**/*.stories.?(ts|tsx|js|jsx)',
+    importPathMatcher:
+      /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/,
+    // @ts-ignore
+    req: require.context(
+      './stories',
+      true,
+      /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/
+    ),
+  },
+];
+
+// @ts-ignore
+global.STORIES = normalizedStories;
+
+export const view = start({
+  annotations: [
+    require('./preview'),
+    require('@storybook/react-native/dist/preview'),
+    require('@storybook/addon-actions/preview'),
+  ],
+  storyEntries: normalizedStories,
+});

package/template/cli/index.js

@@ -1,7 +0,0 @@
-import { getStorybookUI } from '@storybook/react-native';
-
-import './storybook.requires';
-
-const StorybookUIRoot = getStorybookUI({});
-
-export default StorybookUIRoot;

package/template/cli/preview.js

@@ -1,8 +0,0 @@
-export const parameters = {
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-};

package/template/cli/storybook.requires.js

@@ -1,54 +0,0 @@
-/* do not change this file, it is auto generated by storybook. */
-
-import {
-  configure,
-  addDecorator,
-  addParameters,
-  addArgsEnhancer,
-  clearDecorators,
-} from '@storybook/react-native';
-
-global.STORIES = [
-  {
-    titlePrefix: '',
-    directory: './.storybook/stories',
-    files: '**/*.stories.?(ts|tsx|js|jsx)',
-    importPathMatcher:
-      '^\\.[\\\\/](?:\\.storybook\\/stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(?:ts|tsx|js|jsx)?)$',
-  },
-];
-
-import '@storybook/addon-ondevice-controls/register';
-import '@storybook/addon-ondevice-actions/register';
-
-import { argsEnhancers } from '@storybook/addon-actions/dist/modern/preset/addArgs';
-
-import { decorators, parameters } from './preview';
-
-if (decorators) {
-  if (__DEV__) {
-    // stops the warning from showing on every HMR
-    require('react-native').LogBox.ignoreLogs([
-      '`clearDecorators` is deprecated and will be removed in Storybook 7.0',
-    ]);
-  }
-  // workaround for global decorators getting infinitely applied on HMR, see https://github.com/storybookjs/react-native/issues/185
-  clearDecorators();
-  decorators.forEach((decorator) => addDecorator(decorator));
-}
-
-if (parameters) {
-  addParameters(parameters);
-}
-
-try {
-  argsEnhancers.forEach((enhancer) => addArgsEnhancer(enhancer));
-} catch {}
-
-const getStories = () => {
-  return {
-    './.storybook/stories/Button/Button.stories.js': require('./stories/Button/Button.stories.js'),
-  };
-};
-
-configure(getStories, module, false);