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

package/dist/index.d.ts

@@ -1,9 +1,9 @@
-import * as _storybook_core_types from '@storybook/core/types';
-import { StoryIndex, PreparedStory, NormalizedStoriesSpecifier, Addon_StorySortParameterV7, StorybookConfig as StorybookConfig$1 } from '@storybook/core/types';
+import * as storybook_internal_types from 'storybook/internal/types';
+import { StoryIndex, PreparedStory, NormalizedStoriesSpecifier, Addon_StorySortParameterV7, StorybookConfig as StorybookConfig$1 } from 'storybook/internal/types';
 import { ReactRenderer } from '@storybook/react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Channel } from '@storybook/core/channels';
-import { PreviewWithSelection } from '@storybook/core/preview-api';
+import { Channel } from 'storybook/internal/channels';
+import { PreviewWithSelection } from 'storybook/internal/preview-api';
 import { StoryContext } from '@storybook/csf';
 import { Theme } from '@storybook/react-native-theming';
 export { Theme, darkTheme, theme } from '@storybook/react-native-theming';
@@ -77,11 +77,11 @@ declare function prepareStories({ storyEntries, options, storySort, }: {
 }): {
     index: {
         v: number;
-        entries: Record<string, _storybook_core_types.IndexEntry>;
+        entries: Record<string, storybook_internal_types.IndexEntry>;
     };
     importMap: Record<string, any>;
 };
-declare const getProjectAnnotations: (view: View, annotations: any[]) => () => Promise<_storybook_core_types.NormalizedProjectAnnotations<ReactRenderer>>;
+declare const getProjectAnnotations: (view: View, annotations: any[]) => () => Promise<storybook_internal_types.NormalizedProjectAnnotations<ReactRenderer>>;
 declare function start({ annotations, storyEntries, options, }: {
     storyEntries: Array<NormalizedStoriesSpecifier & {
         req: any;

package/dist/index.js

@@ -41,17 +41,17 @@ var import_react_native_theming3 = require("@storybook/react-native-theming");
 
 // src/Start.tsx
 var import_react_native4 = require("react-native");
-var import_manager_api2 = require("@storybook/core/manager-api");
-var import_preview_api2 = require("@storybook/core/preview-api");
+var import_manager_api2 = require("storybook/internal/manager-api");
+var import_preview_api2 = require("storybook/internal/preview-api");
 var import_csf2 = require("@storybook/csf");
-var import_channels2 = require("@storybook/core/channels");
+var import_channels2 = require("storybook/internal/channels");
 
 // src/View.tsx
 var import_bottom_sheet = require("@gorhom/bottom-sheet");
-var import_channels = require("@storybook/core/channels");
-var import_core_events = __toESM(require("@storybook/core/core-events"));
-var import_manager_api = require("@storybook/core/manager-api");
-var import_preview_api = require("@storybook/core/preview-api");
+var import_channels = require("storybook/internal/channels");
+var import_core_events = __toESM(require("storybook/internal/core-events"));
+var import_manager_api = require("storybook/internal/manager-api");
+var import_preview_api = require("storybook/internal/preview-api");
 var import_csf = require("@storybook/csf");
 var import_react_native_theming2 = require("@storybook/react-native-theming");
 var import_react_native_ui = require("@storybook/react-native-ui");
@@ -1248,7 +1248,13 @@ function start({
   import_preview_api2.addons.setChannel(channel);
   const previewView = {
     prepareForStory: () => {
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, {});
+      return {
+        component: () => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, {}),
+        canvasElement: null,
+        mount: () => Promise.resolve({}),
+        storyResult: null,
+        T: null
+      };
     },
     prepareForDocs: () => {
     },
@@ -1269,7 +1275,6 @@ function start({
     },
     showStoryDuringRender: () => {
     }
-    // TODO what happened to this type?
   };
   const selectionStore = {
     selection: null,
@@ -1277,6 +1282,7 @@ function start({
     setQueryParams: () => {
     },
     setSelection: (selection) => {
+      console.log("setSelection", selection);
       preview.selectionStore.selection = selection;
     }
   };

package/dist/metro/withStorybook.d.ts

@@ -18,7 +18,7 @@ interface WebsocketsOptions {
  */
 interface WithStorybookOptions {
     /**
-     * The path to the Storybook config folder. Defaults to './.storybook'.
+     * The path to the Storybook config folder. Defaults to './.rnstorybook'.
      */
     configPath?: string;
     /**
@@ -56,7 +56,7 @@ interface WithStorybookOptions {
  *
  * module.exports = withStorybook(config, {
  *   enabled: true,
- *   configPath: path.resolve(projectRoot, './.storybook'),
+ *   configPath: path.resolve(projectRoot, './.rnstorybook'),
  *   websockets: { port: 7007, host: 'localhost' },
  *   useJs: false,
  *   onDisabledRemoveStorybook: true,

package/dist/metro/withStorybook.js

@@ -27,7 +27,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 // scripts/common.js
 var require_common = __commonJS({
   "scripts/common.js"(exports2, module2) {
-    var { globToRegexp, serverRequire } = require("@storybook/core/common");
+    var { globToRegexp, serverRequire } = require("storybook/internal/common");
     var path2 = require("path");
     var fs = require("fs");
     var cwd = process.cwd();
@@ -128,7 +128,7 @@ var require_generate = __commonJS({
       resolveAddonFile,
       getAddonName
     } = require_common();
-    var { normalizeStories, globToRegexp } = require("@storybook/core/common");
+    var { normalizeStories, globToRegexp } = require("storybook/internal/common");
     var fs = require("fs");
     var prettier = require("prettier");
     var path2 = require("path");
@@ -301,7 +301,7 @@ function withStorybook(config, options = {
     });
   }
   (0, import_generate.generate)({
-    configPath: configPath ?? path.resolve(process.cwd(), "./.storybook"),
+    configPath: configPath ?? path.resolve(process.cwd(), "./.rnstorybook"),
     useJs
   });
   return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "8.6.1",
+  "version": "9.0.0-alpha.1",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -45,19 +45,18 @@
     "test:update": "jest --updateSnapshot"
   },
   "dependencies": {
-    "@storybook/core": "^8.6.6",
     "@storybook/csf": "^0.1.13",
     "@storybook/global": "^5.0.0",
-    "@storybook/react": "^8.6.6",
-    "@storybook/react-native-theming": "^8.6.1",
-    "@storybook/react-native-ui": "^8.6.1",
+    "@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",
     "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": "^8.6.6",
+    "storybook": "9.0.0-alpha.3",
     "type-fest": "~2.19",
     "util": "^0.12.4",
     "ws": "^8.18.0"
@@ -88,5 +87,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3408db3fae500345fdf4913d87c7d31330bc8437"
+  "gitHead": "ec42eef3ebdf389ebf9cf669d425712db99f9e37"
 }

package/scripts/common.js

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

package/scripts/generate.js

@@ -6,7 +6,7 @@ const {
   resolveAddonFile,
   getAddonName,
 } = require('./common');
-const { normalizeStories, globToRegexp } = require('@storybook/core/common');
+const { normalizeStories, globToRegexp } = require('storybook/internal/common');
 const fs = require('fs');
 const prettier = require('prettier');
 const path = require('path');

package/scripts/handle-args.js

@@ -6,7 +6,7 @@ function getArguments() {
     .option(
       '-c, --config-path <path>',
       'The path to your config folder relative to your project-dir',
-      './.storybook'
+      './.rnstorybook'
     )
     .option('-js, --use-js', 'Use a js file for storybook.requires')
     .option('-a, --absolute', 'Use absolute paths for story imports');

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

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+
+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-native-web-vite';
+
+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?: {};
+  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,25 @@
+import type { Meta } from '@storybook/react-native-web-vite';
+
+import { expect, userEvent, within } from 'storybook/test';
+
+import { Page } from './Page';
+
+export default {
+  title: 'Example/Page',
+  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 = {};

package/template/cli/stories/Page.tsx

@@ -0,0 +1,154 @@
+import { useState } from 'react';
+
+import { Linking, StyleSheet, Text, View } from 'react-native';
+
+import { Header } from './Header';
+
+export const Page = () => {
+  const [user, setUser] = useState();
+
+  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>
+          <View>
+            Use a higher-level connected component. Storybook helps you compose such data from the
+            "args" of child component stories
+          </View>
+          <View>
+            Assemble data in the page component from your services. You can mock these services out
+            using Storybook.
+          </View>
+        </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 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>
+  );
+};
+
+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/storybook.requires.ts

@@ -8,7 +8,7 @@ import '@storybook/addon-ondevice-actions/register';
 const normalizedStories = [
   {
     titlePrefix: '',
-    directory: './.storybook/stories',
+    directory: './.rnstorybook/stories',
     files: '**/*.stories.?(ts|tsx|js|jsx)',
     importPathMatcher:
       /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/,
@@ -29,7 +29,7 @@ declare global {
 const annotations = [
   require('./preview'),
   require('@storybook/react-native/dist/preview'),
-  require('@storybook/addon-actions/preview'),
+  require('@storybook/addon-ondevice-actions/preview'),
 ];
 
 global.STORIES = normalizedStories;

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