@storybook/react-native 9.0.0-alpha.0 → 9.0.0-alpha.10

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

@@ -1077,7 +1077,7 @@ var View3 = class {
           return {};
         }
         return (0, import_react_native_ui.transformStoryIndexToStoriesHash)(this._storyIndex, {
-          docsOptions: { docsMode: false, autodocs: false, defaultName: "" },
+          docsOptions: { docsMode: false, defaultName: "" },
           filters: {},
           status: {},
           provider: {
@@ -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.0",
+  "version": "9.0.0-alpha.10",
   "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.0",
-    "@storybook/react-native-ui": "^9.0.0-alpha.0",
+    "@storybook/react": "9.0.0-alpha.16",
+    "@storybook/react-native-theming": "^9.0.0-alpha.10",
+    "@storybook/react-native-ui": "^9.0.0-alpha.10",
     "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-native": "0.76.9",
     "react-test-renderer": "^18.3.1",
+    "storybook": "9.0.0-alpha.16",
     "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.16"
   },
   "engines": {
     "node": ">=8.0.0"
@@ -87,5 +90,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ca21ab6b467c73887d17a383fdd464da37865d6"
+  "gitHead": "19e0e4e5908e11d42e00dc508d58a0a4dc9abd3c"
 }

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

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { View } from 'react-native';
+import { fn } from 'storybook/test';
+
+import { Button } from './Button';
+
+const meta = {
+  title: 'Example/Button',
+  component: Button,
+  decorators: [
+    (Story) => (
+      <View style={{ flex: 1, alignItems: 'flex-start' }}>
+        <Story />
+      </View>
+    ),
+  ],
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // Use `fn` to spy on the onPress arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: { onPress: fn() },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};

package/template/cli/stories/Button.tsx

@@ -0,0 +1,101 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+
+export interface ButtonProps {
+  /** Is this the principal call to action on the page? */
+  primary?: boolean;
+  /** What background color to use */
+  backgroundColor?: string;
+  /** How large should the button be? */
+  size?: 'small' | 'medium' | 'large';
+  /** Button contents */
+  label: string;
+  /** Optional click handler */
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** Primary UI component for user interaction */
+export const Button = ({
+  primary = false,
+  size = 'medium',
+  backgroundColor,
+  label,
+  style,
+  onPress,
+}: ButtonProps) => {
+  const modeStyle = primary ? styles.primary : styles.secondary;
+  const textModeStyle = primary ? styles.primaryText : styles.secondaryText;
+
+  const sizeStyle = styles[size];
+  const textSizeStyle = textSizeStyles[size];
+
+  return (
+    <TouchableOpacity accessibilityRole="button" activeOpacity={0.6} onPress={onPress}>
+      <View
+        style={[
+          styles.button,
+          modeStyle,
+          sizeStyle,
+          style,
+          !!backgroundColor && { backgroundColor },
+          { borderColor: 'black' },
+        ]}
+      >
+        <Text style={[textModeStyle, textSizeStyle]}>{label}</Text>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    borderWidth: 0,
+    borderRadius: 48,
+  },
+  buttonText: {
+    fontWeight: '700',
+    lineHeight: 1,
+  },
+  primary: {
+    backgroundColor: '#1ea7fd',
+  },
+  primaryText: {
+    color: 'white',
+  },
+  secondary: {
+    backgroundColor: 'transparent',
+    borderColor: 'rgba(0, 0, 0, 0.15)',
+    borderWidth: 1,
+  },
+  secondaryText: {
+    color: '#333',
+  },
+  small: {
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+  },
+  smallText: {
+    fontSize: 12,
+  },
+  medium: {
+    paddingVertical: 11,
+    paddingHorizontal: 20,
+  },
+  mediumText: {
+    fontSize: 14,
+  },
+  large: {
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+  },
+  largeText: {
+    fontSize: 16,
+  },
+});
+
+const textSizeStyles = {
+  small: styles.smallText,
+  medium: styles.mediumText,
+  large: styles.largeText,
+};

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

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Header } from './Header';
+
+const meta = {
+  title: 'Example/Header',
+  component: Header,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+} satisfies Meta<typeof Header>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const LoggedIn: Story = {
+  args: {
+    user: {
+      name: 'Jane Doe',
+    },
+    onLogin: () => {},
+    onLogout: () => {},
+    onCreateAccount: () => {},
+  },
+};
+
+export const LoggedOut: Story = {
+  args: {
+    onLogin: () => {},
+    onLogout: () => {},
+    onCreateAccount: () => {},
+  },
+};

package/template/cli/stories/Header.tsx

@@ -0,0 +1,76 @@
+import { StyleSheet, Text, View } from 'react-native';
+
+import { Button } from './Button';
+
+export type HeaderProps = {
+  user?: { name: string };
+  onLogin: () => void;
+  onLogout: () => void;
+  onCreateAccount: () => void;
+};
+
+export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
+  <View>
+    <View style={styles.wrapper}>
+      <View style={styles.logoContainer}>
+        <Text style={styles.h1}>Acme</Text>
+      </View>
+      <View style={styles.buttonContainer}>
+        {user ? (
+          <>
+            <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
+              size="small"
+              onPress={onCreateAccount}
+              label="Sign up"
+            />
+          </>
+        )}
+      </View>
+    </View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  wrapper: {
+    borderBottomWidth: 1,
+    borderBottomColor: 'rgba(0, 0, 0, 0.1)',
+    paddingVertical: 15,
+    paddingHorizontal: 20,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  h1: {
+    fontWeight: '900',
+    fontSize: 20,
+    marginTop: 6,
+    marginBottom: 6,
+    marginLeft: 10,
+    color: 'black',
+    alignSelf: 'flex-start',
+  },
+  logoContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  button: {
+    marginLeft: 10,
+  },
+  buttonContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  userName: {
+    fontWeight: '700',
+  },
+});

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

@@ -0,0 +1,10 @@
+import type { Meta } from '@storybook/react';
+
+import { Page } from './Page';
+
+export default {
+  title: 'Example/Page',
+  component: Page,
+} as Meta<typeof Page>;
+
+export const Default = {};

package/template/cli/stories/Page.tsx

@@ -0,0 +1,147 @@
+import { useState } from 'react';
+
+import { Linking, StyleSheet, Text, View } from 'react-native';
+
+import { Header } from './Header';
+
+export const Page = () => {
+  const [user, setUser] = useState<{ name: string } | undefined>();
+
+  return (
+    <View>
+      <Header
+        user={user}
+        onLogin={() => setUser({ name: 'Jane Doe' })}
+        onLogout={() => setUser(undefined)}
+        onCreateAccount={() => setUser({ name: 'Jane Doe' })}
+      />
+
+      <View style={styles.section}>
+        <Text role="heading" style={styles.h2}>
+          Pages in Storybook
+        </Text>
+        <Text style={styles.p}>
+          We recommend building UIs with a{' '}
+          <Text
+            style={[styles.a, { fontWeight: 'bold' }]}
+            role="link"
+            onPress={() => {
+              Linking.openURL('https://componentdriven.org');
+            }}
+          >
+            <Text>component-driven</Text>
+          </Text>{' '}
+          process starting with atomic components and ending with pages.
+        </Text>
+        <Text style={styles.p}>
+          Render pages with mock data. This makes it easy to build and review page states without
+          needing to navigate to them in your app. Here are some handy patterns for managing page
+          data in Storybook:
+        </Text>
+        <View>
+          <Text>
+            Use a higher-level connected component. Storybook helps you compose such data from the
+            "args" of child component stories
+          </Text>
+          <Text>
+            Assemble data in the page component from your services. You can mock these services out
+            using Storybook.
+          </Text>
+        </View>
+        <Text style={styles.p}>
+          Get a guided tutorial on component-driven development at{' '}
+          <Text
+            style={styles.a}
+            role="link"
+            onPress={() => {
+              Linking.openURL('https://storybook.js.org/tutorials/');
+            }}
+          >
+            Storybook tutorials
+          </Text>
+          . Read more in the{' '}
+          <Text
+            style={styles.a}
+            role="link"
+            onPress={() => {
+              Linking.openURL('https://storybook.js.org/docs');
+            }}
+          >
+            docs
+          </Text>
+          .
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  section: {
+    fontFamily: "'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif",
+    fontSize: 14,
+    lineHeight: 24,
+    paddingVertical: 48,
+    paddingHorizontal: 20,
+    marginHorizontal: 'auto',
+    maxWidth: 600,
+    color: '#333',
+  },
+
+  h2: {
+    fontWeight: '900',
+    fontSize: 32,
+    lineHeight: 1,
+    marginBottom: 4,
+  },
+
+  p: {
+    marginVertical: 16,
+    marginHorizontal: 0,
+  },
+
+  a: {
+    color: '#1ea7fd',
+  },
+
+  ul: {
+    paddingLeft: 30,
+    marginVertical: 16,
+  },
+
+  li: {
+    marginBottom: 8,
+  },
+
+  tip: {
+    alignSelf: 'flex-start',
+    borderRadius: 16,
+    backgroundColor: '#e7fdd8',
+    paddingVertical: 4,
+    paddingHorizontal: 12,
+    marginRight: 10,
+    marginBottom: 4,
+  },
+  tipText: {
+    fontSize: 11,
+    lineHeight: 12,
+    fontWeight: '700',
+    color: '#66bf3c',
+  },
+
+  tipWrapper: {
+    fontSize: 13,
+    lineHeight: 20,
+    marginTop: 40,
+    marginBottom: 40,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+
+  tipWrapperSvg: {
+    height: 12,
+    width: 12,
+    marginRight: 4,
+    marginTop: 3,
+  },
+});

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

@@ -1,33 +0,0 @@
-import { View } from 'react-native';
-import type { Meta, StoryObj } from '@storybook/react';
-import { MyButton } from './Button';
-
-const meta = {
-  title: 'MyButton',
-  component: MyButton,
-  argTypes: {
-    onPress: { action: 'pressed the button' },
-  },
-  args: {
-    text: 'Hello world',
-  },
-  decorators: [
-    (Story) => (
-      <View style={{ padding: 16, alignItems: 'flex-start' }}>
-        <Story />
-      </View>
-    ),
-  ],
-} satisfies Meta<typeof MyButton>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Basic: Story = {};
-
-export const AnotherExample: Story = {
-  args: {
-    text: 'Another example',
-  },
-};

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

@@ -1,24 +0,0 @@
-import { TouchableOpacity, Text, StyleSheet } from 'react-native';
-
-export type MyButtonProps = {
-  onPress?: () => void;
-  text: string;
-};
-
-export const MyButton = ({ onPress, text }: MyButtonProps) => {
-  return (
-    <TouchableOpacity style={styles.container} onPress={onPress} activeOpacity={0.8}>
-      <Text style={styles.text}>{text}</Text>
-    </TouchableOpacity>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-    backgroundColor: 'purple',
-    borderRadius: 8,
-  },
-  text: { color: 'white' },
-});