@storybook/react-native 9.0.0-alpha.1 → 9.0.0-alpha.8

package/babel.config.js

@@ -1,4 +1,4 @@
 // note this file is used by jest to make it not shit itself
 module.exports = {
-  presets: ['module:@react-native/babel-preset'],
+  presets: ['babel-preset-expo'],
 };

package/dist/index.d.ts

@@ -100,6 +100,7 @@ interface StorybookConfig {
         options?: Record<string, any>;
     }>;
     reactNative?: ReactNativeOptions;
+    framework?: '@storybook/react-native';
 }
 
 export { StorybookConfig, getProjectAnnotations, prepareStories, start, updateView };

package/dist/index.js

@@ -1164,10 +1164,11 @@ function prepareStories({
           const exportValue = fileExports[key];
           if (!exportValue)
             return;
-          const name = (0, import_csf2.storyNameFromExport)(key);
           const title = makeTitle(filename, specifier, meta.title);
           if (title) {
-            const id = (0, import_csf2.toId)(title, name);
+            const nameFromExport = (0, import_csf2.storyNameFromExport)(key);
+            const id = (0, import_csf2.toId)(title, nameFromExport);
+            const name = exportValue?.name || exportValue?.storyName || nameFromExport;
             index.entries[id] = {
               type: "story",
               id,
@@ -1282,7 +1283,6 @@ function start({
     setQueryParams: () => {
     },
     setSelection: (selection) => {
-      console.log("setSelection", selection);
       preview.selectionStore.selection = selection;
     }
   };

package/jest.config.js

@@ -1,13 +1,8 @@
 /** @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'],
-  transform: {
-    '^.+\\.(js)$': ['babel-jest', { plugins: ['babel-plugin-syntax-hermes-parser'] }],
-    '^.+\\.(ts|tsx)$': 'babel-jest',
-  },
+  preset: 'jest-expo',
+  transformIgnorePatterns: [
+    'node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@sentry/react-native|native-base|react-native-svg|storybook/.*|@storybook/.*|uuid)',
+  ],
 };
 module.exports = config;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "9.0.0-alpha.1",
+  "version": "9.0.0-alpha.8",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -25,7 +25,8 @@
     ".": "./dist/index.js",
     "./metro/withStorybook": "./dist/metro/withStorybook.js",
     "./preview": "./dist/preview.js",
-    "./scripts/generate": "./scripts/generate.js"
+    "./scripts/generate": "./scripts/generate.js",
+    "./preset": "./preset.js"
   },
   "files": [
     "bin/**/*",
@@ -47,16 +48,15 @@
   "dependencies": {
     "@storybook/csf": "^0.1.13",
     "@storybook/global": "^5.0.0",
-    "@storybook/react": "9.0.0-alpha.3",
-    "@storybook/react-native-theming": "^9.0.0-alpha.1",
-    "@storybook/react-native-ui": "^9.0.0-alpha.1",
+    "@storybook/react": "9.0.0-alpha.8",
+    "@storybook/react-native-theming": "^9.0.0-alpha.8",
+    "@storybook/react-native-ui": "^9.0.0-alpha.8",
     "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",
-    "storybook": "9.0.0-alpha.3",
     "type-fest": "~2.19",
     "util": "^0.12.4",
     "ws": "^8.18.0"
@@ -65,12 +65,14 @@
     "@types/jest": "^29.4.3",
     "@types/react": "~18.3.12",
     "babel-jest": "^29.7.0",
-    "babel-plugin-syntax-hermes-parser": "^0.25.0",
+    "babel-preset-expo": "^12.0.9",
     "jest": "^29.7.0",
+    "jest-expo": "~52.0.6",
     "jotai": "^2.6.2",
     "react": "18.3.1",
     "react-native": "0.76.7",
     "react-test-renderer": "^18.3.1",
+    "storybook": "9.0.0-alpha.8",
     "tsup": "^7.2.0",
     "typescript": "^5.3.3"
   },
@@ -79,7 +81,8 @@
     "react": "*",
     "react-native": ">=0.72.0",
     "react-native-gesture-handler": ">=2",
-    "react-native-safe-area-context": "*"
+    "react-native-safe-area-context": "*",
+    "storybook": "9.0.0-alpha.8"
   },
   "engines": {
     "node": ">=8.0.0"
@@ -87,5 +90,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ec42eef3ebdf389ebf9cf669d425712db99f9e37"
+  "gitHead": "16659266d8aa9816490af41d0a840579a2f96805"
 }

package/preset.js

@@ -0,0 +1,2 @@
+// just to be a valid framework
+module.exports = {};

package/scripts/generate.test.js

@@ -4,6 +4,8 @@ const { generate } = require('./generate');
 let pathMock;
 let fileContentMock;
 
+global.window.navigator = {};
+
 jest.mock('fs', () => ({
   ...jest.requireActual('fs'),
   writeFileSync: (filePath, fileContent, opts) => {

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

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { View } from 'react-native';
 import { fn } from 'storybook/test';

package/template/cli/stories/Header.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { Header } from './Header';
 

package/template/cli/stories/Header.tsx

@@ -3,7 +3,7 @@ import { StyleSheet, Text, View } from 'react-native';
 import { Button } from './Button';
 
 export type HeaderProps = {
-  user?: {};
+  user?: { name: string };
   onLogin: () => void;
   onLogout: () => void;
   onCreateAccount: () => void;
@@ -18,15 +18,15 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps
       <View style={styles.buttonContainer}>
         {user ? (
           <>
-            <>
-              <Text>Welcome, </Text>
-              <Text style={styles.userName}>{user.name}!</Text>
-            </>
+            <Text>Welcome, </Text>
+            <Text style={styles.userName}>{user.name}!</Text>
+
             <Button style={styles.button} size="small" onPress={onLogout} label="Log out" />
           </>
         ) : (
           <>
             <Button style={styles.button} size="small" onPress={onLogin} label="Log in" />
+
             <Button
               style={styles.button}
               primary

package/template/cli/stories/Page.stories.tsx

@@ -1,6 +1,4 @@
-import type { Meta } from '@storybook/react-native-web-vite';
-
-import { expect, userEvent, within } from 'storybook/test';
+import type { Meta } from '@storybook/react';
 
 import { Page } from './Page';
 
@@ -9,17 +7,4 @@ export default {
   component: Page,
 } as Meta<typeof Page>;
 
-export const LoggedIn = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const loginButton = canvas.getByRole('button', { name: /Log in/i });
-    await expect(loginButton).toBeInTheDocument();
-    await userEvent.click(loginButton);
-    // FIXME: await expect(loginButton).not.toBeInTheDocument();
-
-    const logoutButton = canvas.getByRole('button', { name: /Log out/i });
-    await expect(logoutButton).toBeInTheDocument();
-  },
-};
-
-export const LoggedOut = {};
+export const Default = {};

package/template/cli/stories/Page.tsx

@@ -5,7 +5,7 @@ import { Linking, StyleSheet, Text, View } from 'react-native';
 import { Header } from './Header';
 
 export const Page = () => {
-  const [user, setUser] = useState();
+  const [user, setUser] = useState<{ name: string } | undefined>();
 
   return (
     <View>
@@ -39,14 +39,14 @@ export const Page = () => {
           data in Storybook:
         </Text>
         <View>
-          <View>
+          <Text>
             Use a higher-level connected component. Storybook helps you compose such data from the
             "args" of child component stories
-          </View>
-          <View>
+          </Text>
+          <Text>
             Assemble data in the page component from your services. You can mock these services out
             using Storybook.
-          </View>
+          </Text>
         </View>
         <Text style={styles.p}>
           Get a guided tutorial on component-driven development at{' '}
@@ -71,13 +71,6 @@ export const Page = () => {
           </Text>
           .
         </Text>
-        <View style={styles.tipWrapper}>
-          <View style={styles.tip}>
-            <Text style={styles.tipText}>Tip </Text>
-          </View>
-          <Text>Adjust the width of the canvas with the </Text>
-          <Text>Viewports addon in the toolbar</Text>
-        </View>
       </View>
     </View>
   );