@storybook/react-native 7.6.17 → 7.6.19

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import { N as NormalizedStoriesSpecifier, S as StoryIndex, P as ProjectAnnotations, a as StorybookConfig$1 } from './index.d-e107ed3d.js';
-export { Theme, darkTheme, theme } from '@storybook/react-native-theming';
 import { V as View } from './View-9ba91d66.js';
 import { ReactRenderer } from '@storybook/react';
+export { Theme, darkTheme, theme } from '@storybook/react-native-theming';
 import 'file-system-cache';
 import '@babel/core';
 import 'http';
@@ -10,25 +10,35 @@ import '@storybook/csf';
 import '@storybook/preview-web';
 import '@storybook/channels';
 
-declare function prepareStories({ storyEntries, }: {
+/** Configuration options that are needed at startup, only serialisable values are possible */
+interface ReactNativeOptions {
+    /**
+     * Note that this is for future and play functions are not yet fully supported on native.
+     */
+    playFn?: boolean;
+}
+declare function prepareStories({ storyEntries, options, }: {
     storyEntries: Array<NormalizedStoriesSpecifier & {
         req: any;
     }>;
+    options?: ReactNativeOptions;
 }): {
     index: StoryIndex;
     importMap: Record<string, any>;
 };
 declare const getProjectAnnotations: (view: View, annotations: any[]) => () => Promise<ProjectAnnotations<ReactRenderer>>;
-declare function start({ annotations, storyEntries, }: {
+declare function start({ annotations, storyEntries, options, }: {
     storyEntries: Array<NormalizedStoriesSpecifier & {
         req: any;
     }>;
     annotations: any[];
+    options?: ReactNativeOptions;
 }): View;
 
 interface StorybookConfig {
     stories: StorybookConfig$1['stories'];
     addons: string[];
+    reactNative?: ReactNativeOptions;
 }
 
 export { StorybookConfig, getProjectAnnotations, prepareStories, start };

package/dist/index.js

@@ -2196,7 +2196,8 @@ var View11 = class {
 // src/Start.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
 function prepareStories({
-  storyEntries
+  storyEntries,
+  options
 }) {
   let index = {
     v: 4,
@@ -2230,6 +2231,8 @@ function prepareStories({
         Object.keys(fileExports).forEach((key) => {
           if (key === "default")
             return;
+          if (!(0, import_csf2.isExportStory)(key, fileExports.default))
+            return;
           const exportValue = fileExports[key];
           if (!exportValue)
             return;
@@ -2246,7 +2249,21 @@ function prepareStories({
               // FIXME: use normalize function here
               tags: ["story"]
             };
-            importMap[`${root}/${filename.substring(2)}`] = req(filename);
+            const importedStories = req(filename);
+            const stories = Object.entries(importedStories).reduce(
+              (carry, [storyKey, story]) => {
+                if (!(0, import_csf2.isExportStory)(storyKey, fileExports.default))
+                  return carry;
+                if (story.play && !options?.playFn) {
+                  carry[storyKey] = { ...story, play: void 0 };
+                } else {
+                  carry[storyKey] = story;
+                }
+                return carry;
+              },
+              {}
+            );
+            importMap[`${root}/${filename.substring(2)}`] = stories;
           } else {
             console.log(`Unexpected error while loading ${filename}: could not find title`);
           }
@@ -2279,9 +2296,10 @@ var getProjectAnnotations = (view, annotations) => async () => (0, import_previe
 ]);
 function start({
   annotations,
-  storyEntries
+  storyEntries,
+  options
 }) {
-  const { index, importMap } = prepareStories({ storyEntries });
+  const { index, importMap } = prepareStories({ storyEntries, options });
   const channel = (0, import_channels2.createBrowserChannel)({ page: "preview" });
   import_manager_api3.addons.setChannel(channel);
   import_preview_api3.addons.setChannel(channel);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "7.6.17",
+  "version": "7.6.19",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -32,12 +32,15 @@
     "template/**/*"
   ],
   "scripts": {
-    "dev": "ts-node ./buildscripts/gentsdev.ts && tsup --watch",
+    "dev": "ts-node ./buildscripts/gendtsdev.ts && tsup --watch",
     "prepare": "rm -rf dist/ && tsup",
     "test": "jest",
     "test:ci": "jest"
   },
   "jest": {
+    "transformIgnorePatterns": [
+      "node_modules/(?!react-native|@react-native)"
+    ],
     "modulePathIgnorePatterns": [
       "dist/"
     ],
@@ -64,7 +67,7 @@
     "@storybook/preview-api": "^7.6.13",
     "@storybook/preview-web": "^7.6.13",
     "@storybook/react": "^7.6.13",
-    "@storybook/react-native-theming": "^7.6.17",
+    "@storybook/react-native-theming": "^7.6.19",
     "chokidar": "^3.5.1",
     "commander": "^8.2.0",
     "dedent": "^1.5.1",
@@ -98,5 +101,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "eabc8e9dfc361faa0a7b1c7f08fe85b8cf37725b"
+  "gitHead": "d47f71df982288c4be83de044f97b942e132328a"
 }

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

@@ -34,13 +34,16 @@ import "@storybook/addon-ondevice-actions/register";
   // @ts-ignore
   module?.hot?.accept?.();
 
+  
+
   if (!global.view) {
     global.view = start({
       annotations,
-      storyEntries: normalizedStories
+      storyEntries: normalizedStories,
+      
     });
   } else {
-    const { importMap } = prepareStories({ storyEntries: normalizedStories });
+    const { importMap } = prepareStories({ storyEntries: normalizedStories,  });
     
     global.view._preview.onStoriesChanged({
       importFn: async (importPath: string) => importMap[importPath],
@@ -89,13 +92,16 @@ import "@storybook/addon-ondevice-actions/register";
   // @ts-ignore
   module?.hot?.accept?.();
 
+  
+
   if (!global.view) {
     global.view = start({
       annotations,
-      storyEntries: normalizedStories
+      storyEntries: normalizedStories,
+      
     });
   } else {
-    const { importMap } = prepareStories({ storyEntries: normalizedStories });
+    const { importMap } = prepareStories({ storyEntries: normalizedStories,  });
     
     global.view._preview.onStoriesChanged({
       importFn: async (importPath: string) => importMap[importPath],
@@ -144,13 +150,16 @@ import "@storybook/addon-ondevice-actions/register";
   // @ts-ignore
   module?.hot?.accept?.();
 
+  
+
   if (!global.view) {
     global.view = start({
       annotations,
-      storyEntries: normalizedStories
+      storyEntries: normalizedStories,
+      
     });
   } else {
-    const { importMap } = prepareStories({ storyEntries: normalizedStories });
+    const { importMap } = prepareStories({ storyEntries: normalizedStories,  });
     
     global.view._preview.onStoriesChanged({
       importFn: async (importPath: string) => importMap[importPath],
@@ -199,13 +208,16 @@ import "@storybook/addon-ondevice-actions/register";
   // @ts-ignore
   module?.hot?.accept?.();
 
+  
+
   if (!global.view) {
     global.view = start({
       annotations,
-      storyEntries: normalizedStories
+      storyEntries: normalizedStories,
+      
     });
   } else {
-    const { importMap } = prepareStories({ storyEntries: normalizedStories });
+    const { importMap } = prepareStories({ storyEntries: normalizedStories,  });
     
     global.view._preview.onStoriesChanged({
       importFn: async (importPath: string) => importMap[importPath],
@@ -219,3 +231,56 @@ import "@storybook/addon-ondevice-actions/register";
   export const 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. */
+  
+  import { start, prepareStories, getProjectAnnotations } from '@storybook/react-native';
+  
+  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 annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')];
+
+  global.STORIES = normalizedStories;
+  
+  
+  module?.hot?.accept?.();
+
+  
+
+  if (!global.view) {
+    global.view = start({
+      annotations,
+      storyEntries: normalizedStories,
+      
+    });
+  } else {
+    const { importMap } = prepareStories({ storyEntries: normalizedStories,  });
+    
+    global.view._preview.onStoriesChanged({
+      importFn: async (importPath) => importMap[importPath],
+    });
+
+    global.view._preview.onGetProjectAnnotationsChanged({
+      getProjectAnnotations: getProjectAnnotations(global.view, annotations),
+    });
+  }
+
+  export const view = global.view;
+"
+`;

package/scripts/generate.js

@@ -41,7 +41,7 @@ function generate({ configPath, absolute = false, useJs = false }) {
       directory: "${specifier.directory}",
       files: "${specifier.files}",
       importPathMatcher: /${reg.source}/,
-      // @ts-ignore
+      ${useJs ? '' : '// @ts-ignore'}
       req: require.context('${pathToStory}', ${r}, ${m})
     }`;
   });
@@ -55,6 +55,15 @@ function generate({ configPath, absolute = false, useJs = false }) {
     ? "require('@storybook/addon-actions/preview')"
     : '';
 
+  let options = '';
+  let optionsVar = '';
+  const reactNativeOptions = main.reactNative;
+
+  if (reactNativeOptions && typeof reactNativeOptions === 'object') {
+    optionsVar = `const options = ${JSON.stringify(reactNativeOptions)}`;
+    options = 'options';
+  }
+
   const previewExists = getPreviewExists({ configPath });
 
   const annotations = `[${previewExists ? "require('./preview')," : ''}${doctools}, ${enhancer}]`;
@@ -81,19 +90,22 @@ function generate({ configPath, absolute = false, useJs = false }) {
 
   global.STORIES = normalizedStories;
   
-  // @ts-ignore
+  ${useJs ? '' : '// @ts-ignore'}
   module?.hot?.accept?.();
 
+  ${optionsVar}
+
   if (!global.view) {
     global.view = start({
       annotations,
-      storyEntries: normalizedStories
+      storyEntries: normalizedStories,
+      ${options}
     });
   } else {
-    const { importMap } = prepareStories({ storyEntries: normalizedStories });
+    const { importMap } = prepareStories({ storyEntries: normalizedStories, ${options} });
     
     global.view._preview.onStoriesChanged({
-      importFn: async (importPath: string) => importMap[importPath],
+      importFn: async (importPath${useJs ? '' : ': string'}) => importMap[importPath],
     });
 
     global.view._preview.onGetProjectAnnotationsChanged({

package/scripts/generate.test.js

@@ -30,6 +30,16 @@ describe('loader', () => {
       });
     });
 
+    describe('when using js', () => {
+      it('writes the story imports without types', () => {
+        generate({ configPath: 'scripts/mocks/all-config-files', useJs: true });
+        expect(pathMock).toEqual(
+          path.resolve(__dirname, 'mocks/all-config-files/storybook.requires.js')
+        );
+        expect(fileContentMock).toMatchSnapshot();
+      });
+    });
+
     describe('when there are different file extensions', () => {
       it('writes the story imports', () => {
         generate({ configPath: 'scripts/mocks/file-extensions' });