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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "9.0.0-alpha.0",
+  "version": "9.0.0-alpha.1",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -48,8 +48,8 @@
     "@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-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",
@@ -87,5 +87,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6ca21ab6b467c73887d17a383fdd464da37865d6"
+  "gitHead": "ec42eef3ebdf389ebf9cf669d425712db99f9e37"
 }

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