@storybook/react-native 9.0.0-beta.1 → 9.0.0-beta.11

package/dist/index.d.ts

@@ -1,12 +1,13 @@
 import * as storybook_internal_types from 'storybook/internal/types';
-import { StoryIndex, PreparedStory, NormalizedStoriesSpecifier, Addon_StorySortParameterV7, StorybookConfig as StorybookConfig$1 } from 'storybook/internal/types';
+import { API_IndexHash, StoryIndex, PreparedStory, NormalizedStoriesSpecifier, Addon_StorySortParameterV7, StorybookConfig as StorybookConfig$1 } from 'storybook/internal/types';
 import { ReactRenderer } from '@storybook/react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Channel } from 'storybook/internal/channels';
 import { PreviewWithSelection } from 'storybook/internal/preview-api';
-import { StoryContext } from '@storybook/csf';
+import { StoryContext, Args } from '@storybook/csf';
 import { Theme } from '@storybook/react-native-theming';
 export { Theme, darkTheme, theme } from '@storybook/react-native-theming';
+import { ReactElement } from 'react';
 
 interface Storage {
     getItem: (key: string) => Promise<string | null>;
@@ -39,6 +40,14 @@ type Params = {
     shouldPersistSelection?: boolean;
     theme: ThemePartial;
     storage?: Storage;
+    CustomUIComponent?: (props: {
+        story: StoryContext<ReactRenderer, Args>;
+        storyHash: API_IndexHash;
+        setStory: (storyId: string) => void;
+        storage: Storage;
+        theme: Theme;
+        children: ReactElement;
+    }) => ReactElement;
 };
 declare class View {
     _storyIndex: StoryIndex;
@@ -70,9 +79,9 @@ interface ReactNativeOptions {
     playFn?: boolean;
 }
 declare function prepareStories({ storyEntries, options, storySort, }: {
-    storyEntries: Array<NormalizedStoriesSpecifier & {
+    storyEntries: (NormalizedStoriesSpecifier & {
         req: any;
-    }>;
+    })[];
     options?: ReactNativeOptions;
     storySort?: Addon_StorySortParameterV7;
 }): {
@@ -84,15 +93,15 @@ declare function prepareStories({ storyEntries, options, storySort, }: {
 };
 declare const getProjectAnnotations: (view: View, annotations: any[]) => () => Promise<storybook_internal_types.NormalizedProjectAnnotations<ReactRenderer>>;
 declare function start({ annotations, storyEntries, options, }: {
-    storyEntries: Array<NormalizedStoriesSpecifier & {
+    storyEntries: (NormalizedStoriesSpecifier & {
         req: any;
-    }>;
+    })[];
     annotations: any[];
     options?: ReactNativeOptions;
 }): View;
-declare function updateView(viewInstance: View, annotations: any[], normalizedStories: Array<NormalizedStoriesSpecifier & {
+declare function updateView(viewInstance: View, annotations: any[], normalizedStories: (NormalizedStoriesSpecifier & {
     req: any;
-}>, options?: ReactNativeOptions): void;
+})[], options?: ReactNativeOptions): void;
 
 interface StorybookConfig {
     stories: StorybookConfig$1['stories'];

package/dist/index.js

@@ -49,7 +49,7 @@ var import_channels2 = require("storybook/internal/channels");
 // src/View.tsx
 var import_bottom_sheet = require("@gorhom/bottom-sheet");
 var import_channels = require("storybook/internal/channels");
-var import_core_events = __toESM(require("storybook/internal/core-events"));
+var import_core_events = require("storybook/internal/core-events");
 var import_manager_api = require("storybook/internal/manager-api");
 var import_preview_api = require("storybook/internal/preview-api");
 var import_csf = require("@storybook/csf");
@@ -954,7 +954,8 @@ var View3 = class {
       shouldPersistSelection = true,
       onDeviceUI = true,
       enableWebsockets = false,
-      storage
+      storage,
+      CustomUIComponent
     } = params;
     this._storage = storage;
     const initialStory = this._getInitialStory(params);
@@ -965,7 +966,7 @@ var View3 = class {
       this._channel = channel;
       this._preview.channel = channel;
       this._preview.setupListeners();
-      channel.emit(import_core_events.default.CHANNEL_CREATED);
+      channel.emit(import_core_events.CHANNEL_CREATED);
       this._preview.ready().then(() => this._preview.onStoryIndexChanged());
     }
     import_manager_api.addons.loadAddons({
@@ -999,10 +1000,10 @@ var View3 = class {
             const urlObj = new URL(url);
             const storyId = urlObj.searchParams.get("STORYBOOK_STORY_ID");
             const hasStoryId = storyId && typeof storyId === "string";
-            const storyExists = hasStoryId && this._storyIdExists(storyId);
-            if (storyExists && this._ready) {
+            const storyExists = hasStoryId && self._storyIdExists(storyId);
+            if (storyExists && self._ready) {
               console.log(`STORYBOOK: Linking event received, navigating to story: ${storyId}`);
-              this._channel.emit(import_core_events.default.SET_CURRENT_STORY, { storyId });
+              self._channel.emit(import_core_events.SET_CURRENT_STORY, { storyId });
             }
             if (hasStoryId && !storyExists) {
               console.log(
@@ -1016,15 +1017,15 @@ var View3 = class {
         };
       }, []);
       (0, import_react4.useEffect)(() => {
-        this.createPreparedStoryMapping().then(() => {
-          this._ready = true;
+        self.createPreparedStoryMapping().then(() => {
+          self._ready = true;
           setReady(true);
           return import_react_native3.Linking.getInitialURL().then((url) => {
             if (url && typeof url === "string") {
               const urlObj = new URL(url);
               const storyId = urlObj.searchParams.get("STORYBOOK_STORY_ID");
               const hasStoryId = storyId && typeof storyId === "string";
-              const storyExists = hasStoryId && this._storyIdExists(storyId);
+              const storyExists = hasStoryId && self._storyIdExists(storyId);
               if (hasStoryId && !storyExists) {
                 console.log(
                   `STORYBOOK: Initial Linking event received, but story does not exist: ${storyId}`
@@ -1064,8 +1065,8 @@ var View3 = class {
               });
             `);
           }
-          if (shouldPersistSelection && !!this._storage) {
-            this._storage.setItem(STORAGE_KEY, newStory.id).catch((e) => {
+          if (shouldPersistSelection && !!self._storage) {
+            self._storage.setItem(STORAGE_KEY, newStory.id).catch((e) => {
               console.warn("storybook-log: error writing to async storage", e);
             });
           }
@@ -1076,7 +1077,7 @@ var View3 = class {
         if (!ready) {
           return {};
         }
-        return (0, import_react_native_ui.transformStoryIndexToStoriesHash)(this._storyIndex, {
+        return (0, import_react_native_ui.transformStoryIndexToStoriesHash)(self._storyIndex, {
           docsOptions: { docsMode: false, defaultName: "" },
           filters: {},
           status: {},
@@ -1101,6 +1102,18 @@ var View3 = class {
       }
       if (onDeviceUI) {
         return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_theming2.ThemeProvider, { theme: appliedTheme, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_safe_area_context.SafeAreaProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_gesture_handler.GestureHandlerRootView, { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_bottom_sheet.BottomSheetModalProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_ui.StorageProvider, { storage, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_ui.LayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_ui.Layout, { storyHash, story, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StoryView_default, {}) }) }) }) }) }) }) });
+      } else if (CustomUIComponent) {
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          CustomUIComponent,
+          {
+            story,
+            storyHash,
+            setStory: (newStoryId) => self._channel.emit(import_core_events.SET_CURRENT_STORY, { storyId: newStoryId }),
+            storage,
+            theme: appliedTheme,
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StoryView_default, {})
+          }
+        );
       } else {
         return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StoryView_default, {});
       }
@@ -1218,10 +1231,13 @@ function prepareStories({
     storySort,
     Object.values(index.entries).map((entry) => entry.importPath)
   );
-  const sorted = sortableStories.reduce((acc, item) => {
-    acc[item.id] = item;
-    return acc;
-  }, {});
+  const sorted = sortableStories.reduce(
+    (acc, item) => {
+      acc[item.id] = item;
+      return acc;
+    },
+    {}
+  );
   return { index: { v: 5, entries: sorted }, importMap };
 }
 var getProjectAnnotations = (view, annotations) => async () => (0, import_preview_api2.composeConfigs)([

package/dist/metro/withStorybook.js

@@ -75,14 +75,14 @@ var require_common = __commonJS({
         const basePath = `${addon}/${file}`;
         require.resolve(basePath);
         return basePath;
-      } catch (error) {
+      } catch (_error) {
       }
       for (const ext of extensions) {
         try {
           const filePath = `${addon}/${file}.${ext}`;
           require.resolve(filePath);
           return filePath;
-        } catch (error) {
+        } catch (_error) {
         }
       }
       if (addon.startsWith("./") || addon.startsWith("../")) {
@@ -91,7 +91,7 @@ var require_common = __commonJS({
           if (extension) {
             return `${addon}/${file}`;
           }
-        } catch (error) {
+        } catch (_error) {
         }
       }
       return null;
@@ -130,7 +130,6 @@ var require_generate = __commonJS({
     } = require_common();
     var { normalizeStories, globToRegexp } = require("storybook/internal/common");
     var fs = require("fs");
-    var prettier = require("prettier");
     var path2 = require("path");
     var cwd = process.cwd();
     function generate2({ configPath, absolute = false, useJs = false }) {
@@ -150,13 +149,13 @@ var require_generate = __commonJS({
         const { path: p, recursive: r, match: m } = toRequireContext(specifier);
         const pathToStory = ensureRelativePathHasDot(path2.posix.relative(configPath, p));
         return `{
-      titlePrefix: "${specifier.titlePrefix}",
-      directory: "${specifier.directory}",
-      files: "${specifier.files}",
-      importPathMatcher: /${reg.source}/,
-      ${useJs ? "" : "// @ts-ignore"}
-      req: require.context('${pathToStory}', ${r}, ${m})
-    }`;
+    titlePrefix: "${specifier.titlePrefix}",
+    directory: "${specifier.directory}",
+    files: "${specifier.files}",
+    importPathMatcher: /${reg.source}/,
+    ${useJs ? "" : "// @ts-ignore"}
+    req: require.context('${pathToStory}', ${r}, ${m})
+  }`;
       });
       let registerAddons = "";
       for (const addon of main.addons) {
@@ -189,54 +188,55 @@ var require_generate = __commonJS({
       let optionsVar = "";
       const reactNativeOptions = main.reactNative;
       if (reactNativeOptions && typeof reactNativeOptions === "object") {
-        optionsVar = `const options = ${JSON.stringify(reactNativeOptions)}`;
+        optionsVar = `const options = ${JSON.stringify(reactNativeOptions, null, 4)}`;
         options = "options";
       }
       const previewExists = getPreviewExists({ configPath });
       if (previewExists) {
         enhancers.unshift("require('./preview')");
       }
-      const annotations = `[${enhancers.join(", ")}]`;
+      const annotations = `[
+  ${enhancers.join(",\n  ")}
+]`;
       const globalTypes = `
-    declare global {
-      var view: View;
-      var STORIES: typeof normalizedStories;
-    }
+declare global {
+  var view: View;
+  var STORIES: typeof normalizedStories;
+}
   `;
-      const fileContent = `
-  /* do not change this file, it is auto generated by storybook. */
+      const fileContent = `/* do not change this file, it is auto generated by storybook. */
+import { start, updateView${useJs ? "" : ", View"} } from '@storybook/react-native';
 
-  import { start, updateView${useJs ? "" : ", View"} } from '@storybook/react-native';
+${registerAddons}
 
-  ${registerAddons}
+const normalizedStories = [
+  ${normalizedStories.join(",\n  ")}
+];
 
-  const normalizedStories = [${normalizedStories.join(",")}];
+${useJs ? "" : globalTypes}
 
-  ${useJs ? "" : globalTypes}
+const annotations = ${annotations};
 
-  const annotations = ${annotations};
+global.STORIES = normalizedStories;
 
-  global.STORIES = normalizedStories;
-  
-  ${useJs ? "" : "// @ts-ignore"}
-  module?.hot?.accept?.();
+${useJs ? "" : "// @ts-ignore"}
+module?.hot?.accept?.();
 
-  ${optionsVar}
+${optionsVar}
 
-  if (!global.view) {
-    global.view = start({
-      annotations,
-      storyEntries: normalizedStories,
-      ${options}
-    });
-  } else {
-    updateView(global.view, annotations, normalizedStories, ${options});
-  }
+if (!global.view) {
+  global.view = start({
+    annotations,
+    storyEntries: normalizedStories,
+    ${options}
+  });
+} else {
+  updateView(global.view, annotations, normalizedStories, ${options});
+}
 
-  export const view${useJs ? "" : ": View"} = global.view;
+export const view${useJs ? "" : ": View"} = global.view;
 `;
-      const formattedFileContent = prettier.format(fileContent, { parser: "babel-ts" });
-      fs.writeFileSync(storybookRequiresLocation, formattedFileContent, {
+      fs.writeFileSync(storybookRequiresLocation, fileContent, {
         encoding: "utf8",
         flag: "w"
       });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "9.0.0-beta.1",
+  "version": "9.0.0-beta.11",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -48,13 +48,12 @@
   "dependencies": {
     "@storybook/csf": "^0.1.13",
     "@storybook/global": "^5.0.0",
-    "@storybook/react": "9.0.0-beta.4",
-    "@storybook/react-native-theming": "^9.0.0-beta.1",
-    "@storybook/react-native-ui": "^9.0.0-beta.1",
+    "@storybook/react": "9.0.0-beta.10",
+    "@storybook/react-native-theming": "^9.0.0-beta.11",
+    "@storybook/react-native-ui": "^9.0.0-beta.11",
     "commander": "^8.2.0",
     "dedent": "^1.5.1",
     "deepmerge": "^4.3.0",
-    "prettier": "^2.4.1",
     "react-native-url-polyfill": "^2.0.0",
     "setimmediate": "^1.0.5",
     "type-fest": "~2.19",
@@ -63,18 +62,18 @@
   },
   "devDependencies": {
     "@types/jest": "^29.4.3",
-    "@types/react": "~18.3.12",
+    "@types/react": "~19.0.10",
     "babel-jest": "^29.7.0",
     "babel-preset-expo": "^12.0.9",
     "jest": "^29.7.0",
-    "jest-expo": "~52.0.6",
+    "jest-expo": "~53.0.5",
     "jotai": "^2.6.2",
-    "react": "18.3.1",
-    "react-native": "0.76.9",
-    "react-test-renderer": "^18.3.1",
-    "storybook": "9.0.0-beta.4",
+    "react": "19.0.0",
+    "react-native": "0.79.2",
+    "react-test-renderer": "^19.1.0",
+    "storybook": "9.0.0-beta.10",
     "tsup": "^7.2.0",
-    "typescript": "^5.3.3"
+    "typescript": "~5.8.3"
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": ">=4",
@@ -82,7 +81,7 @@
     "react-native": ">=0.72.0",
     "react-native-gesture-handler": ">=2",
     "react-native-safe-area-context": "*",
-    "storybook": "9.0.0-beta.4"
+    "storybook": "9.0.0-beta.10"
   },
   "engines": {
     "node": ">=8.0.0"
@@ -90,5 +89,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "41dd93e39512d4df2258fd68055b54fc361962f3"
+  "gitHead": "531ed8a758adc98bb436d0ccb32efcb369572ffe"
 }

package/readme.md

@@ -1,16 +1,14 @@
 # Storybook for React Native
 
-> [!IMPORTANT]  
-> This readme is for v8, for v7 docs see the [v7.6 docs](https://github.com/storybookjs/react-native/tree/v7.6.20-stable).
+> This readme is for v9 beta, for v8 docs see the [v8.6 docs](https://github.com/storybookjs/react-native/tree/v8.6.0-stable).
 
 With Storybook for React Native you can design and develop individual React Native components without running your app.
 
-If you are migrating from 7.6 to 8.3 you can find the migration guide [here](https://github.com/storybookjs/react-native/blob/next/MIGRATION.md#from-version-76x-to-83x)
+If you are migrating from 8 to 9 you can find the migration guide [here](https://github.com/storybookjs/react-native/blob/next/MIGRATION.md#from-version-8-to-9)
 
 For more information about storybook visit: [storybook.js.org](https://storybook.js.org)
 
-> [!NOTE]  
-> `@storybook/react-native` requires atleast 8.3.1, if you install other storybook core packages they should be `^8.3.1` or newer.
+> Make sure you align your storybook dependencies to the same major version or you will see broken behaviour.
 
 ![picture of storybook](https://github.com/user-attachments/assets/cf98766d-8b90-44ab-b718-94ab16e63205)
 
@@ -139,6 +137,15 @@ module.exports = withStorybook(finalConfig, {
 });
 ```
 
+#### Reanimated setup
+
+Make sure you have `react-native-reanimated` in your project and the plugin setup in your babel config.
+
+```js
+// babel.config.js
+plugins: ['react-native-reanimated/plugin'],
+```
+
 ## Writing stories
 
 In storybook we use a syntax called CSF that looks like this:
@@ -376,8 +383,6 @@ You can pass these parameters to getStorybookUI call in your storybook entry poi
     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.
     onDeviceUI?: boolean;
         -- show the ondevice ui
     enableWebsockets?: boolean;

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

@@ -1,251 +1,270 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`loader writeRequires when there are different file extensions writes the story imports 1`] = `
-"
-  /* do not change this file, it is auto generated by storybook. */
-
-  import { start, updateView, View } from '@storybook/react-native';
+"/* do not change this file, it is auto generated by storybook. */
+import { start, updateView, View } from '@storybook/react-native';
 
-  import "@storybook/addon-ondevice-notes/register";
+import "@storybook/addon-ondevice-notes/register";
 import "@storybook/addon-ondevice-controls/register";
 import "@storybook/addon-ondevice-backgrounds/register";
 import "@storybook/addon-ondevice-actions/register";
 
 
-  const normalizedStories = [{
-      titlePrefix: "",
-      directory: "./scripts/mocks/file-extensions",
-      files: "FakeStory.stories.tsx",
-      importPathMatcher: /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/,
-      // @ts-ignore
-      req: require.context('./', false, /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/)
-    }];
+const normalizedStories = [
+  {
+    titlePrefix: "",
+    directory: "./scripts/mocks/file-extensions",
+    files: "FakeStory.stories.tsx",
+    importPathMatcher: /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/,
+    // @ts-ignore
+    req: require.context('./', false, /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/)
+  }
+];
 
-  
-    declare global {
-      var view: View;
-      var STORIES: typeof normalizedStories;
-    }
+
+declare global {
+  var view: View;
+  var STORIES: typeof normalizedStories;
+}
   
 
-  const annotations = [require('./preview'), require("@storybook/react-native/preview"), require('@storybook/addon-ondevice-actions/preview')];
+const annotations = [
+  require('./preview'),
+  require("@storybook/react-native/preview"),
+  require('@storybook/addon-ondevice-actions/preview')
+];
 
-  global.STORIES = normalizedStories;
-  
-  // @ts-ignore
-  module?.hot?.accept?.();
+global.STORIES = normalizedStories;
 
-  
+// @ts-ignore
+module?.hot?.accept?.();
 
-  if (!global.view) {
-    global.view = start({
-      annotations,
-      storyEntries: normalizedStories,
-      
-    });
-  } else {
-    updateView(global.view, annotations, normalizedStories, );
-  }
 
-  export const view: View = global.view;
+
+if (!global.view) {
+  global.view = start({
+    annotations,
+    storyEntries: normalizedStories,
+    
+  });
+} else {
+  updateView(global.view, annotations, normalizedStories, );
+}
+
+export const view: View = global.view;
 "
 `;
 
 exports[`loader writeRequires when there is a configuration object writes the story imports 1`] = `
-"
-  /* do not change this file, it is auto generated by storybook. */
-
-  import { start, updateView, View } from '@storybook/react-native';
+"/* do not change this file, it is auto generated by storybook. */
+import { start, updateView, View } from '@storybook/react-native';
 
-  import "@storybook/addon-ondevice-notes/register";
+import "@storybook/addon-ondevice-notes/register";
 import "@storybook/addon-ondevice-controls/register";
 import "@storybook/addon-ondevice-backgrounds/register";
 import "@storybook/addon-ondevice-actions/register";
 
 
-  const normalizedStories = [{
-      titlePrefix: "ComponentsPrefix",
-      directory: "./scripts/mocks/configuration-objects/components",
-      files: "**/*.stories.tsx",
-      importPathMatcher: /^\\.(?:(?:^|\\/|(?:(?:(?!(?:^|\\/)\\.).)*?)\\/)(?!\\.)(?=.)[^/]*?\\.stories\\.tsx)$/,
-      // @ts-ignore
-      req: require.context('./components', true, /^\\.(?:(?:^|\\/|(?:(?:(?!(?:^|\\/)\\.).)*?)\\/)(?!\\.)(?=.)[^/]*?\\.stories\\.tsx)$/)
-    }];
+const normalizedStories = [
+  {
+    titlePrefix: "ComponentsPrefix",
+    directory: "./scripts/mocks/configuration-objects/components",
+    files: "**/*.stories.tsx",
+    importPathMatcher: /^\\.(?:(?:^|\\/|(?:(?:(?!(?:^|\\/)\\.).)*?)\\/)(?!\\.)(?=.)[^/]*?\\.stories\\.tsx)$/,
+    // @ts-ignore
+    req: require.context('./components', true, /^\\.(?:(?:^|\\/|(?:(?:(?!(?:^|\\/)\\.).)*?)\\/)(?!\\.)(?=.)[^/]*?\\.stories\\.tsx)$/)
+  }
+];
+
 
-  
-    declare global {
-      var view: View;
-      var STORIES: typeof normalizedStories;
-    }
+declare global {
+  var view: View;
+  var STORIES: typeof normalizedStories;
+}
   
 
-  const annotations = [require('./preview'), require("@storybook/react-native/preview"), require('@storybook/addon-ondevice-actions/preview')];
+const annotations = [
+  require('./preview'),
+  require("@storybook/react-native/preview"),
+  require('@storybook/addon-ondevice-actions/preview')
+];
 
-  global.STORIES = normalizedStories;
-  
-  // @ts-ignore
-  module?.hot?.accept?.();
+global.STORIES = normalizedStories;
 
-  
+// @ts-ignore
+module?.hot?.accept?.();
 
-  if (!global.view) {
-    global.view = start({
-      annotations,
-      storyEntries: normalizedStories,
-      
-    });
-  } else {
-    updateView(global.view, annotations, normalizedStories, );
-  }
 
-  export const view: View = global.view;
+
+if (!global.view) {
+  global.view = start({
+    annotations,
+    storyEntries: normalizedStories,
+    
+  });
+} else {
+  updateView(global.view, annotations, normalizedStories, );
+}
+
+export const view: View = global.view;
 "
 `;
 
 exports[`loader writeRequires when there is a story glob writes the story imports 1`] = `
-"
-  /* do not change this file, it is auto generated by storybook. */
-
-  import { start, updateView, View } from '@storybook/react-native';
+"/* do not change this file, it is auto generated by storybook. */
+import { start, updateView, View } from '@storybook/react-native';
 
-  import "@storybook/addon-ondevice-notes/register";
+import "@storybook/addon-ondevice-notes/register";
 import "@storybook/addon-ondevice-controls/register";
 import "@storybook/addon-ondevice-backgrounds/register";
 import "@storybook/addon-ondevice-actions/register";
 
 
-  const normalizedStories = [{
-      titlePrefix: "",
-      directory: "./scripts/mocks/all-config-files",
-      files: "FakeStory.stories.tsx",
-      importPathMatcher: /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/,
-      // @ts-ignore
-      req: require.context('./', false, /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/)
-    }];
+const normalizedStories = [
+  {
+    titlePrefix: "",
+    directory: "./scripts/mocks/all-config-files",
+    files: "FakeStory.stories.tsx",
+    importPathMatcher: /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/,
+    // @ts-ignore
+    req: require.context('./', false, /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/)
+  }
+];
+
 
-  
-    declare global {
-      var view: View;
-      var STORIES: typeof normalizedStories;
-    }
+declare global {
+  var view: View;
+  var STORIES: typeof normalizedStories;
+}
   
 
-  const annotations = [require('./preview'), require("@storybook/react-native/preview"), require('@storybook/addon-ondevice-actions/preview')];
+const annotations = [
+  require('./preview'),
+  require("@storybook/react-native/preview"),
+  require('@storybook/addon-ondevice-actions/preview')
+];
 
-  global.STORIES = normalizedStories;
-  
-  // @ts-ignore
-  module?.hot?.accept?.();
+global.STORIES = normalizedStories;
 
-  
+// @ts-ignore
+module?.hot?.accept?.();
 
-  if (!global.view) {
-    global.view = start({
-      annotations,
-      storyEntries: normalizedStories,
-      
-    });
-  } else {
-    updateView(global.view, annotations, normalizedStories, );
-  }
 
-  export const view: View = global.view;
+
+if (!global.view) {
+  global.view = start({
+    annotations,
+    storyEntries: normalizedStories,
+    
+  });
+} else {
+  updateView(global.view, annotations, normalizedStories, );
+}
+
+export const view: View = global.view;
 "
 `;
 
 exports[`loader writeRequires when there is no preview does not add preview related stuff 1`] = `
-"
-  /* do not change this file, it is auto generated by storybook. */
-
-  import { start, updateView, View } from '@storybook/react-native';
+"/* do not change this file, it is auto generated by storybook. */
+import { start, updateView, View } from '@storybook/react-native';
 
-  import "@storybook/addon-ondevice-notes/register";
+import "@storybook/addon-ondevice-notes/register";
 import "@storybook/addon-ondevice-controls/register";
 import "@storybook/addon-ondevice-backgrounds/register";
 import "@storybook/addon-ondevice-actions/register";
 
 
-  const normalizedStories = [{
-      titlePrefix: "",
-      directory: "./scripts/mocks/no-preview",
-      files: "FakeStory.stories.tsx",
-      importPathMatcher: /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/,
-      // @ts-ignore
-      req: require.context('./', false, /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/)
-    }];
+const normalizedStories = [
+  {
+    titlePrefix: "",
+    directory: "./scripts/mocks/no-preview",
+    files: "FakeStory.stories.tsx",
+    importPathMatcher: /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/,
+    // @ts-ignore
+    req: require.context('./', false, /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/)
+  }
+];
 
-  
-    declare global {
-      var view: View;
-      var STORIES: typeof normalizedStories;
-    }
+
+declare global {
+  var view: View;
+  var STORIES: typeof normalizedStories;
+}
   
 
-  const annotations = [require("@storybook/react-native/preview"), require('@storybook/addon-ondevice-actions/preview')];
+const annotations = [
+  require("@storybook/react-native/preview"),
+  require('@storybook/addon-ondevice-actions/preview')
+];
 
-  global.STORIES = normalizedStories;
-  
-  // @ts-ignore
-  module?.hot?.accept?.();
+global.STORIES = normalizedStories;
+
+// @ts-ignore
+module?.hot?.accept?.();
 
-  
 
-  if (!global.view) {
-    global.view = start({
-      annotations,
-      storyEntries: normalizedStories,
-      
-    });
-  } else {
-    updateView(global.view, annotations, normalizedStories, );
-  }
 
-  export const view: View = global.view;
+if (!global.view) {
+  global.view = start({
+    annotations,
+    storyEntries: normalizedStories,
+    
+  });
+} else {
+  updateView(global.view, annotations, normalizedStories, );
+}
+
+export const view: View = global.view;
 "
 `;
 
 exports[`loader writeRequires when using js writes the story imports without types 1`] = `
-"
-  /* do not change this file, it is auto generated by storybook. */
+"/* do not change this file, it is auto generated by storybook. */
+import { start, updateView } from '@storybook/react-native';
 
-  import { start, updateView } from '@storybook/react-native';
-
-  import "@storybook/addon-ondevice-notes/register";
+import "@storybook/addon-ondevice-notes/register";
 import "@storybook/addon-ondevice-controls/register";
 import "@storybook/addon-ondevice-backgrounds/register";
 import "@storybook/addon-ondevice-actions/register";
 
 
-  const normalizedStories = [{
-      titlePrefix: "",
-      directory: "./scripts/mocks/all-config-files",
-      files: "FakeStory.stories.tsx",
-      importPathMatcher: /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/,
-      
-      req: require.context('./', false, /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/)
-    }];
+const normalizedStories = [
+  {
+    titlePrefix: "",
+    directory: "./scripts/mocks/all-config-files",
+    files: "FakeStory.stories.tsx",
+    importPathMatcher: /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/,
+    
+    req: require.context('./', false, /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/)
+  }
+];
 
-  
 
-  const annotations = [require('./preview'), require("@storybook/react-native/preview"), require('@storybook/addon-ondevice-actions/preview')];
 
-  global.STORIES = normalizedStories;
-  
-  
-  module?.hot?.accept?.();
+const annotations = [
+  require('./preview'),
+  require("@storybook/react-native/preview"),
+  require('@storybook/addon-ondevice-actions/preview')
+];
 
-  
+global.STORIES = normalizedStories;
 
-  if (!global.view) {
-    global.view = start({
-      annotations,
-      storyEntries: normalizedStories,
-      
-    });
-  } else {
-    updateView(global.view, annotations, normalizedStories, );
-  }
 
-  export const view = global.view;
+module?.hot?.accept?.();
+
+
+
+if (!global.view) {
+  global.view = start({
+    annotations,
+    storyEntries: normalizedStories,
+    
+  });
+} else {
+  updateView(global.view, annotations, normalizedStories, );
+}
+
+export const view = global.view;
 "
 `;

package/scripts/common.js

@@ -67,7 +67,7 @@ function resolveAddonFile(addon, file, extensions = ['js', 'mjs', 'ts'], configP
     require.resolve(basePath);
 
     return basePath;
-  } catch (error) {}
+  } catch (_error) {}
 
   for (const ext of extensions) {
     try {
@@ -76,7 +76,7 @@ function resolveAddonFile(addon, file, extensions = ['js', 'mjs', 'ts'], configP
       require.resolve(filePath);
 
       return filePath;
-    } catch (error) {}
+    } catch (_error) {}
   }
 
   // attempt to resolve as a relative path for local addons
@@ -87,7 +87,7 @@ function resolveAddonFile(addon, file, extensions = ['js', 'mjs', 'ts'], configP
       if (extension) {
         return `${addon}/${file}`;
       }
-    } catch (error) {}
+    } catch (_error) {}
   }
 
   return null;

package/scripts/generate.js

@@ -8,7 +8,7 @@ const {
 } = require('./common');
 const { normalizeStories, globToRegexp } = require('storybook/internal/common');
 const fs = require('fs');
-const prettier = require('prettier');
+
 const path = require('path');
 
 const cwd = process.cwd();
@@ -39,13 +39,13 @@ function generate({ configPath, absolute = false, useJs = false }) {
 
     const pathToStory = ensureRelativePathHasDot(path.posix.relative(configPath, p));
     return `{
-      titlePrefix: "${specifier.titlePrefix}",
-      directory: "${specifier.directory}",
-      files: "${specifier.files}",
-      importPathMatcher: /${reg.source}/,
-      ${useJs ? '' : '// @ts-ignore'}
-      req: require.context('${pathToStory}', ${r}, ${m})
-    }`;
+    titlePrefix: "${specifier.titlePrefix}",
+    directory: "${specifier.directory}",
+    files: "${specifier.files}",
+    importPathMatcher: /${reg.source}/,
+    ${useJs ? '' : '// @ts-ignore'}
+    req: require.context('${pathToStory}', ${r}, ${m})
+  }`;
   });
 
   let registerAddons = '';
@@ -86,7 +86,7 @@ function generate({ configPath, absolute = false, useJs = false }) {
   const reactNativeOptions = main.reactNative;
 
   if (reactNativeOptions && typeof reactNativeOptions === 'object') {
-    optionsVar = `const options = ${JSON.stringify(reactNativeOptions)}`;
+    optionsVar = `const options = ${JSON.stringify(reactNativeOptions, null, 4)}`;
     options = 'options';
   }
 
@@ -96,51 +96,51 @@ function generate({ configPath, absolute = false, useJs = false }) {
     enhancers.unshift("require('./preview')");
   }
 
-  const annotations = `[${enhancers.join(', ')}]`;
+  const annotations = `[
+  ${enhancers.join(',\n  ')}
+]`;
 
   const globalTypes = `
-    declare global {
-      var view: View;
-      var STORIES: typeof normalizedStories;
-    }
+declare global {
+  var view: View;
+  var STORIES: typeof normalizedStories;
+}
   `;
 
-  const fileContent = `
-  /* do not change this file, it is auto generated by storybook. */
+  const fileContent = `/* do not change this file, it is auto generated by storybook. */
+import { start, updateView${useJs ? '' : ', View'} } from '@storybook/react-native';
 
-  import { start, updateView${useJs ? '' : ', View'} } from '@storybook/react-native';
+${registerAddons}
 
-  ${registerAddons}
+const normalizedStories = [
+  ${normalizedStories.join(',\n  ')}
+];
 
-  const normalizedStories = [${normalizedStories.join(',')}];
+${useJs ? '' : globalTypes}
 
-  ${useJs ? '' : globalTypes}
+const annotations = ${annotations};
 
-  const annotations = ${annotations};
+global.STORIES = normalizedStories;
 
-  global.STORIES = normalizedStories;
-  
-  ${useJs ? '' : '// @ts-ignore'}
-  module?.hot?.accept?.();
+${useJs ? '' : '// @ts-ignore'}
+module?.hot?.accept?.();
 
-  ${optionsVar}
+${optionsVar}
 
-  if (!global.view) {
-    global.view = start({
-      annotations,
-      storyEntries: normalizedStories,
-      ${options}
-    });
-  } else {
-    updateView(global.view, annotations, normalizedStories, ${options});
-  }
+if (!global.view) {
+  global.view = start({
+    annotations,
+    storyEntries: normalizedStories,
+    ${options}
+  });
+} else {
+  updateView(global.view, annotations, normalizedStories, ${options});
+}
 
-  export const view${useJs ? '' : ': View'} = global.view;
+export const view${useJs ? '' : ': View'} = global.view;
 `;
 
-  const formattedFileContent = prettier.format(fileContent, { parser: 'babel-ts' });
-
-  fs.writeFileSync(storybookRequiresLocation, formattedFileContent, {
+  fs.writeFileSync(storybookRequiresLocation, fileContent, {
     encoding: 'utf8',
     flag: 'w',
   });

package/scripts/generate.test.js

@@ -14,12 +14,6 @@ jest.mock('fs', () => ({
   },
 }));
 
-jest.mock('prettier', () => ({
-  format(s, opts) {
-    return s;
-  },
-}));
-
 describe('loader', () => {
   describe('writeRequires', () => {
     describe('when there is a story glob', () => {

package/scripts/mocks/preview-files/tsx/preview.tsx

@@ -1,9 +1,9 @@
 export const decorators: any = [];
 export const parameters = {
-    my_param: 'anything',
-    backgrounds: [
-        { name: 'plain', value: 'white', default: true },
-        { name: 'warm', value: 'hotpink' },
-        { name: 'cool', value: 'deepskyblue' },
-    ],
+  my_param: 'anything',
+  backgrounds: [
+    { name: 'plain', value: 'white', default: true },
+    { name: 'warm', value: 'hotpink' },
+    { name: 'cool', value: 'deepskyblue' },
+  ],
 };