@storybook/react-native 8.0.0-alpha.1 → 8.0.0-alpha.3

package/dist/preview.d.ts

@@ -1,5 +1,5 @@
 import * as _storybook_docs_tools from '@storybook/docs-tools';
-import { R as Renderer, b as StoryContextForEnhancers, A as Args, c as StrictArgTypes } from './index.d-ab512c60.js';
+import { R as Renderer, c as StoryContextForEnhancers, A as Args, d as StrictArgTypes } from './index.d-3fb25d8d.js';
 import 'file-system-cache';
 import 'http';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "8.0.0-alpha.1",
+  "version": "8.0.0-alpha.3",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -32,7 +32,7 @@
     "template/**/*"
   ],
   "scripts": {
-    "dev": "ts-node ./buildscripts/gentsdev.ts && tsup --watch",
+    "dev": "npx tsx buildscripts/gendtsdev.ts && tsup --watch",
     "prepare": "rm -rf dist/ && tsup",
     "test": "jest",
     "test:ci": "jest"
@@ -52,17 +52,18 @@
     "preset": "react-native"
   },
   "dependencies": {
-    "@storybook/channels": "8.0.0-rc.1",
-    "@storybook/client-logger": "8.0.0-rc.1",
-    "@storybook/core-common": "8.0.0-rc.1",
-    "@storybook/core-events": "8.0.0-rc.1",
+    "@storybook/channels": "^8",
+    "@storybook/client-logger": "^8",
+    "@storybook/core-common": "^8",
+    "@storybook/core-events": "^8",
     "@storybook/csf": "^0.1.1",
-    "@storybook/docs-tools": "8.0.0-rc.1",
+    "@storybook/docs-tools": "^8",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "8.0.0-rc.1",
-    "@storybook/preview-api": "8.0.0-rc.1",
-    "@storybook/react": "8.0.0-rc.1",
-    "@storybook/react-native-theming": "^8.0.0-alpha.1",
+    "@storybook/manager-api": "^8",
+    "@storybook/preview-api": "^8",
+    "@storybook/react": "^8",
+    "@storybook/react-native-theming": "^8.0.0-alpha.3",
+    "@storybook/react-native-ui": "^8.0.0-alpha.3",
     "chokidar": "^3.5.1",
     "commander": "^8.2.0",
     "dedent": "^1.5.1",
@@ -74,20 +75,21 @@
     "util": "^0.12.4"
   },
   "devDependencies": {
-    "@storybook/types": "8.0.0-rc.1",
+    "@storybook/types": "^8",
     "@types/jest": "^29.4.3",
     "@types/react": "~18.2.14",
     "babel-jest": "^29.4.3",
     "jest": "^29.7.0",
     "jotai": "^2.6.2",
     "react-test-renderer": "18.2.0",
-    "ts-node": "^10.9.1",
     "tsup": "^7.2.0",
     "typescript": "^5.3.3"
   },
   "peerDependencies": {
+    "@gorhom/bottom-sheet": ">=4",
     "react": "*",
     "react-native": ">=0.57.0",
+    "react-native-gesture-handler": ">=2",
     "react-native-safe-area-context": "*"
   },
   "engines": {
@@ -96,5 +98,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1865884a1c866ff61bacd82d02fdc18e845e4132"
+  "gitHead": "b7c2a24d21c0a38bd5e31349b3ba370af7c3d863"
 }

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

@@ -3,8 +3,8 @@
 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 } from '@storybook/react-native';
+  
+  import { start, prepareStories, getProjectAnnotations, updateView } from '@storybook/react-native';
   
   import "@storybook/addon-ondevice-notes/register";
 import "@storybook/addon-ondevice-controls/register";
@@ -18,23 +18,40 @@ import "@storybook/addon-ondevice-actions/register";
       importPathMatcher: /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/,
       // @ts-ignore
       req: require.context('./', false, /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/)
-    }]
+    }];
 
-  // @ts-ignore
-  global.STORIES = normalizedStories;
+  
+    declare global {
+      var view: ReturnType<typeof start>;
+      var STORIES: typeof normalizedStories;
+    }
+  
+
+  const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')];
 
-  export const view = start({
-    annotations: [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')],
-    storyEntries: normalizedStories
-  });
+  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 = 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 } from '@storybook/react-native';
+  
+  import { start, prepareStories, getProjectAnnotations, updateView } from '@storybook/react-native';
   
   import "@storybook/addon-ondevice-notes/register";
 import "@storybook/addon-ondevice-controls/register";
@@ -48,23 +65,40 @@ import "@storybook/addon-ondevice-actions/register";
       importPathMatcher: /^\\.(?:(?:^|\\/|(?:(?:(?!(?:^|\\/)\\.).)*?)\\/)(?!\\.)(?=.)[^/]*?\\.stories\\.tsx)$/,
       // @ts-ignore
       req: require.context('./components', true, /^\\.(?:(?:^|\\/|(?:(?:(?!(?:^|\\/)\\.).)*?)\\/)(?!\\.)(?=.)[^/]*?\\.stories\\.tsx)$/)
-    }]
+    }];
 
-  // @ts-ignore
-  global.STORIES = normalizedStories;
+  
+    declare global {
+      var view: ReturnType<typeof start>;
+      var STORIES: typeof normalizedStories;
+    }
+  
+
+  const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')];
 
-  export const view = start({
-    annotations: [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')],
-    storyEntries: normalizedStories
-  });
+  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 = 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 } from '@storybook/react-native';
+  
+  import { start, prepareStories, getProjectAnnotations, updateView } from '@storybook/react-native';
   
   import "@storybook/addon-ondevice-notes/register";
 import "@storybook/addon-ondevice-controls/register";
@@ -78,23 +112,40 @@ import "@storybook/addon-ondevice-actions/register";
       importPathMatcher: /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/,
       // @ts-ignore
       req: require.context('./', false, /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/)
-    }]
+    }];
 
-  // @ts-ignore
-  global.STORIES = normalizedStories;
+  
+    declare global {
+      var view: ReturnType<typeof start>;
+      var STORIES: typeof normalizedStories;
+    }
+  
+
+  const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')];
 
-  export const view = start({
-    annotations: [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')],
-    storyEntries: normalizedStories
-  });
+  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 = 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 } from '@storybook/react-native';
+  
+  import { start, prepareStories, getProjectAnnotations, updateView } from '@storybook/react-native';
   
   import "@storybook/addon-ondevice-notes/register";
 import "@storybook/addon-ondevice-controls/register";
@@ -108,14 +159,31 @@ import "@storybook/addon-ondevice-actions/register";
       importPathMatcher: /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/,
       // @ts-ignore
       req: require.context('./', false, /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/)
-    }]
+    }];
 
-  // @ts-ignore
-  global.STORIES = normalizedStories;
+  
+    declare global {
+      var view: ReturnType<typeof start>;
+      var STORIES: typeof normalizedStories;
+    }
+  
+
+  const annotations = [require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')];
 
-  export const view = start({
-    annotations: [require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')],
-    storyEntries: normalizedStories
-  });
+  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 = global.view;
 "
 `;

package/scripts/generate.js

@@ -59,25 +59,44 @@ function generate({ configPath, absolute = false, useJs = false }) {
 
   const annotations = `[${previewExists ? "require('./preview')," : ''}${doctools}, ${enhancer}]`;
 
+  const globalTypes = `
+    declare global {
+      var view: ReturnType<typeof start>;
+      var STORIES: typeof normalizedStories;
+    }
+  `;
+
   const fileContent = `
   /* do not change this file, it is auto generated by storybook. */
 
-  import { start } from '@storybook/react-native';
-  
+  import { start, updateView } from '@storybook/react-native';
+
   ${registerAddons}
 
-  const normalizedStories = [${normalizedStories.join(',')}]
+  const normalizedStories = [${normalizedStories.join(',')}];
+
+  ${useJs ? '' : globalTypes}
+
+  const annotations = ${annotations};
 
-  // @ts-ignore
   global.STORIES = normalizedStories;
 
-  export const view = start({
-    annotations: ${annotations},
-    storyEntries: normalizedStories
-  });
+  // @ts-ignore
+  module?.hot?.accept?.();
+
+  if (!global.view) {
+    global.view = start({
+      annotations,
+      storyEntries: normalizedStories
+    });
+  } else {
+    updateView(global.view, annotations, normalizedStories);
+  }
+
+  export const view = global.view;
 `;
 
-  const formattedFileContent = prettier.format(fileContent, { parser: 'babel' });
+  const formattedFileContent = prettier.format(fileContent, { parser: 'babel-ts' });
 
   fs.writeFileSync(storybookRequiresLocation, formattedFileContent, {
     encoding: 'utf8',
@@ -88,16 +107,3 @@ function generate({ configPath, absolute = false, useJs = false }) {
 module.exports = {
   generate,
 };
-
-// TODO evaluate if this is needed
-// if (import.meta.webpackHot) {
-//   import.meta.webpackHot.accept('./{{storiesFilename}}', () => {
-//     // importFn has changed so we need to patch the new one in
-//     preview.onStoriesChanged({ importFn });
-//   });
-
-//   import.meta.webpackHot.accept([{{#each previewAnnotations}}'{{this}}',{{/each}}], () => {
-//     // getProjectAnnotations has changed so we need to patch the new one in
-//     preview.onGetProjectAnnotationsChanged({ getProjectAnnotations });
-//   });
-// }