@storybook/react-native 8.0.0-alpha.4 → 8.2.0-alpha.0

package/dist/preview.d.ts

@@ -1,15 +1,8 @@
-import * as _storybook_docs_tools from '@storybook/docs-tools';
-import { R as Renderer, c as StoryContextForEnhancers, A as Args, d as StrictArgTypes } from './index.d-3fb25d8d.js';
-import 'file-system-cache';
-import 'http';
+import * as _storybook_csf from '@storybook/csf';
+import { Preview } from '@storybook/react';
+import { Renderer, StoryContextForEnhancers } from '@storybook/core/types';
 
-declare const _default: {
-    argTypesEnhancers: (<TRenderer extends Renderer>(context: StoryContextForEnhancers<TRenderer, Args>) => StrictArgTypes<Args>)[];
-    parameters: {
-        docs: {
-            extractArgTypes: _storybook_docs_tools.ArgTypesExtractor;
-        };
-    };
-};
+declare const enhanceArgTypes: <TRenderer extends Renderer>(context: StoryContextForEnhancers<TRenderer, _storybook_csf.Args>) => _storybook_csf.StrictArgTypes<_storybook_csf.Args>;
+declare const preview: Preview;
 
-export { _default as default };
+export { preview as default, enhanceArgTypes };

package/dist/preview.js

@@ -19,16 +19,33 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/preview.ts
 var preview_exports = {};
 __export(preview_exports, {
-  default: () => preview_default
+  default: () => preview_default,
+  enhanceArgTypes: () => enhanceArgTypes
 });
 module.exports = __toCommonJS(preview_exports);
 var import_entry_preview_docs = require("@storybook/react/dist/entry-preview-docs");
-var import_docs_tools = require("@storybook/docs-tools");
-var preview_default = {
-  argTypesEnhancers: [import_docs_tools.enhanceArgTypes],
+var import_preview_api = require("@storybook/core/preview-api");
+var enhanceArgTypes = (context) => {
+  const {
+    component,
+    argTypes: userArgTypes,
+    parameters: { docs = {} }
+  } = context;
+  const { extractArgTypes } = docs;
+  const extractedArgTypes = extractArgTypes && component ? extractArgTypes(component) : {};
+  const withExtractedTypes = extractedArgTypes ? (0, import_preview_api.combineParameters)(extractedArgTypes, userArgTypes) : userArgTypes;
+  return withExtractedTypes;
+};
+var preview = {
+  argTypesEnhancers: [enhanceArgTypes],
   parameters: {
     docs: {
       extractArgTypes: import_entry_preview_docs.parameters.docs.extractArgTypes
     }
   }
 };
+var preview_default = preview;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  enhanceArgTypes
+});

package/jest.config.js

@@ -0,0 +1,9 @@
+/** @type {import('jest').Config} */
+const config = {
+  preset: 'react-native',
+  modulePathIgnorePatterns: ['dist/'],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+  transformIgnorePatterns: ['node_modules/(?!react-native|@react-native)'],
+  setupFilesAfterEnv: ['<rootDir>/../../node_modules/react-native-gesture-handler/jestSetup.js'],
+};
+module.exports = config;

package/metro/withStorybook.js

@@ -0,0 +1,53 @@
+const path = require('path');
+const fs = require('fs');
+const { generate } = require('../scripts/generate');
+
+let alreadyReplaced = false;
+
+module.exports = (config, { configPath, enabled }) => {
+  if (!enabled) {
+    return config;
+  }
+
+  generate({
+    configPath: configPath ?? path.resolve(process.cwd(), './.storybook'),
+  });
+
+  return {
+    ...config,
+    transformer: {
+      ...config.transformer,
+      unstable_allowRequireContext: true,
+    },
+    resolver: {
+      ...config.resolver,
+      unstable_enablePackageExports: true,
+      resolveRequest: (context, moduleName, platform) => {
+        const defaultResolveResult = context.resolveRequest(context, moduleName, platform);
+
+        // workaround for template files with invalid imports
+        if (defaultResolveResult?.filePath?.includes?.('@storybook/react/template/cli')) {
+          return {
+            type: 'empty',
+          };
+        }
+
+        // workaround for unsupported regex
+        if (defaultResolveResult?.filePath?.includes?.('@storybook/core/dist/docs-tools/index')) {
+          if (!alreadyReplaced) {
+            const filepath = path.resolve(defaultResolveResult?.filePath);
+
+            const input = fs.readFileSync(filepath, 'utf-8');
+
+            const output = input.replace(/new RegExp\(([^)]+).*, "u"\)/g, 'new RegExp("")');
+
+            fs.writeFileSync(filepath, output);
+            alreadyReplaced = true;
+          }
+        }
+
+        return defaultResolveResult;
+      },
+    },
+  };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "8.0.0-alpha.4",
+  "version": "8.2.0-alpha.0",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -29,6 +29,7 @@
     "*.js",
     "*.d.ts",
     "scripts/*",
+    "metro/*",
     "template/**/*"
   ],
   "scripts": {
@@ -37,33 +38,13 @@
     "test": "jest",
     "test:ci": "jest"
   },
-  "jest": {
-    "modulePathIgnorePatterns": [
-      "dist/"
-    ],
-    "moduleFileExtensions": [
-      "ts",
-      "tsx",
-      "js",
-      "jsx",
-      "json",
-      "node"
-    ],
-    "preset": "react-native"
-  },
   "dependencies": {
-    "@storybook/channels": "^8",
-    "@storybook/client-logger": "^8",
-    "@storybook/core-common": "^8",
-    "@storybook/core-events": "^8",
+    "@storybook/core": "8.2.0-beta.0",
     "@storybook/csf": "^0.1.1",
-    "@storybook/docs-tools": "^8",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "^8",
-    "@storybook/preview-api": "^8",
-    "@storybook/react": "^8",
-    "@storybook/react-native-theming": "^8.0.0-alpha.4",
-    "@storybook/react-native-ui": "^8.0.0-alpha.4",
+    "@storybook/react": "8.2.0-beta.0",
+    "@storybook/react-native-theming": "^8.2.0-alpha.0",
+    "@storybook/react-native-ui": "^8.2.0-alpha.0",
     "chokidar": "^3.5.1",
     "commander": "^8.2.0",
     "dedent": "^1.5.1",
@@ -75,15 +56,14 @@
     "util": "^0.12.4"
   },
   "devDependencies": {
-    "@storybook/types": "^8",
     "@types/jest": "^29.4.3",
-    "@types/react": "~18.2.14",
+    "@types/react": "~18.2.79",
     "babel-jest": "^29.4.3",
-    "jest": "^29.7.0",
+    "jest": "29.7.0",
     "jotai": "^2.6.2",
     "react-test-renderer": "18.2.0",
     "tsup": "^7.2.0",
-    "typescript": "^5.3.3"
+    "typescript": "~5.3.3"
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": ">=4",
@@ -98,5 +78,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "01c91fd5e53822bcbc1350a154d609c7c0092e69"
+  "gitHead": "56cad3ccee28ceae70cc7e2fc9b63ec28384eecf"
 }

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

@@ -3,9 +3,9 @@
 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, prepareStories, getProjectAnnotations, updateView } from '@storybook/react-native';
-  
+
+  import { start, updateView } from '@storybook/react-native';
+
   import "@storybook/addon-ondevice-notes/register";
 import "@storybook/addon-ondevice-controls/register";
 import "@storybook/addon-ondevice-backgrounds/register";
@@ -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 {
-    updateView(global.view, annotations, normalizedStories);
+    updateView(global.view, annotations, normalizedStories, );
   }
 
   export const view = global.view;
@@ -50,9 +53,9 @@ import "@storybook/addon-ondevice-actions/register";
 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, prepareStories, getProjectAnnotations, updateView } from '@storybook/react-native';
-  
+
+  import { start, updateView } from '@storybook/react-native';
+
   import "@storybook/addon-ondevice-notes/register";
 import "@storybook/addon-ondevice-controls/register";
 import "@storybook/addon-ondevice-backgrounds/register";
@@ -81,13 +84,16 @@ import "@storybook/addon-ondevice-actions/register";
   // @ts-ignore
   module?.hot?.accept?.();
 
+  
+
   if (!global.view) {
     global.view = start({
       annotations,
-      storyEntries: normalizedStories
+      storyEntries: normalizedStories,
+      
     });
   } else {
-    updateView(global.view, annotations, normalizedStories);
+    updateView(global.view, annotations, normalizedStories, );
   }
 
   export const view = global.view;
@@ -97,9 +103,9 @@ import "@storybook/addon-ondevice-actions/register";
 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, prepareStories, getProjectAnnotations, updateView } from '@storybook/react-native';
-  
+
+  import { start, updateView } from '@storybook/react-native';
+
   import "@storybook/addon-ondevice-notes/register";
 import "@storybook/addon-ondevice-controls/register";
 import "@storybook/addon-ondevice-backgrounds/register";
@@ -128,13 +134,16 @@ import "@storybook/addon-ondevice-actions/register";
   // @ts-ignore
   module?.hot?.accept?.();
 
+  
+
   if (!global.view) {
     global.view = start({
       annotations,
-      storyEntries: normalizedStories
+      storyEntries: normalizedStories,
+      
     });
   } else {
-    updateView(global.view, annotations, normalizedStories);
+    updateView(global.view, annotations, normalizedStories, );
   }
 
   export const view = global.view;
@@ -144,9 +153,9 @@ import "@storybook/addon-ondevice-actions/register";
 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, prepareStories, getProjectAnnotations, updateView } from '@storybook/react-native';
-  
+
+  import { start, updateView } from '@storybook/react-native';
+
   import "@storybook/addon-ondevice-notes/register";
 import "@storybook/addon-ondevice-controls/register";
 import "@storybook/addon-ondevice-backgrounds/register";
@@ -175,13 +184,61 @@ import "@storybook/addon-ondevice-actions/register";
   // @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 using js writes the story imports without types 1`] = `
+"
+  /* do not change this file, it is auto generated by storybook. */
+
+  import { start, updateView } 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
+      storyEntries: normalizedStories,
+      
     });
   } else {
-    updateView(global.view, annotations, normalizedStories);
+    updateView(global.view, annotations, normalizedStories, );
   }
 
   export const view = global.view;

package/scripts/common.js

@@ -1,4 +1,4 @@
-const { globToRegexp, serverRequire } = require('@storybook/core-common');
+const { globToRegexp, serverRequire } = require('@storybook/core/common');
 const path = require('path');
 const fs = require('fs');
 

package/scripts/generate.js

@@ -4,7 +4,7 @@ const {
   getMain,
   getPreviewExists,
 } = require('./common');
-const { normalizeStories, globToRegexp } = require('@storybook/core-common');
+const { normalizeStories, globToRegexp } = require('@storybook/core/common');
 const fs = require('fs');
 const prettier = require('prettier');
 const path = require('path');
@@ -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}]`;
@@ -80,17 +89,20 @@ function generate({ configPath, absolute = false, useJs = false }) {
   const annotations = ${annotations};
 
   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 {
-    updateView(global.view, annotations, normalizedStories);
+    updateView(global.view, annotations, normalizedStories, ${options});
   }
 
   export const view = global.view;

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' });

package/scripts/loader.js

@@ -2,7 +2,7 @@ const path = require('path');
 const fs = require('fs');
 const glob = require('glob');
 const prettier = require('prettier');
-const { normalizeStories } = require('@storybook/core-common');
+const { normalizeStories } = require('@storybook/core/common');
 const {
   toRequireContext,
   getFilePathExtension,

package/template/cli/stories/Button/Button.stories.tsx

@@ -2,7 +2,7 @@ import { View } from 'react-native';
 import type { Meta, StoryObj } from '@storybook/react';
 import { MyButton } from './Button';
 
-const MyButtonMeta: Meta<typeof MyButton> = {
+const meta = {
   title: 'MyButton',
   component: MyButton,
   argTypes: {
@@ -18,13 +18,15 @@ const MyButtonMeta: Meta<typeof MyButton> = {
       </View>
     ),
   ],
-};
+} satisfies Meta<typeof MyButton>;
+
+export default meta;
 
-export default MyButtonMeta;
+type Story = StoryObj<typeof meta>;
 
-export const Basic: StoryObj<typeof MyButton> = {};
+export const Basic: Story = {};
 
-export const AnotherExample: StoryObj<typeof MyButton> = {
+export const AnotherExample: Story = {
   args: {
     text: 'Another example',
   },

package/template/cli/stories/Button/Button.tsx

@@ -1,7 +1,7 @@
 import { TouchableOpacity, Text, StyleSheet } from 'react-native';
 
 export type MyButtonProps = {
-  onPress: () => void;
+  onPress?: () => void;
   text: string;
 };
 

package/template/cli/storybook.requires.ts

@@ -1,6 +1,6 @@
 /* do not change this file, it is auto generated by storybook. */
 
-import { start } from '@storybook/react-native';
+import { start, updateView } from '@storybook/react-native';
 
 import '@storybook/addon-ondevice-controls/register';
 import '@storybook/addon-ondevice-actions/register';
@@ -21,14 +21,29 @@ const normalizedStories = [
   },
 ];
 
-// @ts-ignore
+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'),
+];
+
 global.STORIES = normalizedStories;
 
-export const view = start({
-  annotations: [
-    require('./preview'),
-    require('@storybook/react-native/dist/preview'),
-    require('@storybook/addon-actions/preview'),
-  ],
-  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;