@storybook/react-native-web-vite 9.0.0-alpha.1 → 9.0.0-alpha.11

package/dist/index.d.ts

@@ -2,6 +2,7 @@ import { CompatibleString } from 'storybook/internal/types';
 import { FrameworkOptions as FrameworkOptions$1, StorybookConfig as StorybookConfig$1 } from '@storybook/react-vite';
 import { Options, BabelOptions } from '@vitejs/plugin-react';
 import { BabelPluginOptions } from 'vite-plugin-babel';
+export * from '@storybook/react';
 export { __definePreview as definePreview } from '@storybook/react';
 
 type FrameworkOptions = FrameworkOptions$1 & {

package/dist/index.js

@@ -1 +1 @@
-"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var index_exports={};__export(index_exports,{definePreview:()=>import_react.__definePreview});module.exports=__toCommonJS(index_exports);var import_react=require("@storybook/react");0&&(module.exports={definePreview});
+"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to},__reExport=(target,mod,secondTarget)=>(__copyProps(target,mod,"default"),secondTarget&&__copyProps(secondTarget,mod,"default"));var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var index_exports={};__export(index_exports,{definePreview:()=>import_react.__definePreview});module.exports=__toCommonJS(index_exports);var import_react=require("@storybook/react");__reExport(index_exports,require("@storybook/react"),module.exports);0&&(module.exports={definePreview,...require("@storybook/react")});

package/dist/index.mjs

@@ -1 +1,2 @@
+export * from '@storybook/react';
 export { __definePreview as definePreview } from '@storybook/react';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-web-vite",
-  "version": "9.0.0-alpha.1",
+  "version": "9.0.0-alpha.11",
   "description": "Develop react-native components an isolated web environment with hot reloading.",
   "keywords": [
     "storybook"
@@ -63,9 +63,9 @@
     "@babel/preset-react": "^7.26.3",
     "@bunchtogether/vite-plugin-flow": "^1.0.2",
     "@joshwooding/vite-plugin-react-docgen-typescript": "0.5.0",
-    "@storybook/builder-vite": "9.0.0-alpha.1",
-    "@storybook/react": "9.0.0-alpha.1",
-    "@storybook/react-vite": "9.0.0-alpha.1",
+    "@storybook/builder-vite": "9.0.0-alpha.11",
+    "@storybook/react": "9.0.0-alpha.11",
+    "@storybook/react-vite": "9.0.0-alpha.11",
     "@vitejs/plugin-react": "^4.3.2",
     "vite-plugin-babel": "^1.3.0",
     "vite-plugin-commonjs": "^0.10.4",
@@ -80,7 +80,7 @@
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
     "react-native": ">=0.74.5",
     "react-native-web": "^0.19.12",
-    "storybook": "^9.0.0-alpha.1",
+    "storybook": "^9.0.0-alpha.11",
     "vite": "^5.0.0 || ^6.0.0"
   },
   "engines": {

package/template/cli/js/Button.stories.jsx

@@ -1,6 +1,5 @@
-import { fn } from '@storybook/test';
-
 import { View } from 'react-native';
+import { fn } from 'storybook/test';
 
 import { Button } from './Button';
 

package/template/cli/js/Header.jsx

@@ -13,10 +13,9 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
       <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" />
           </>
         ) : (

package/template/cli/js/Page.jsx

@@ -42,15 +42,15 @@ export const Page = () => {
         </Text>
 
         <View>
-          <View>
+          <Text>
             Use a higher-level connected component. Storybook helps you compose such data from the
             "args" of child component stories
-          </View>
+          </Text>
 
-          <View>
+          <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}>

package/template/cli/js/Page.stories.jsx

@@ -1,4 +1,4 @@
-import { expect, userEvent, within } from '@storybook/test';
+import { expect, userEvent, within } from 'storybook/test';
 
 import { Page } from './Page';
 

package/template/cli/ts-4-9/Button.stories.tsx

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

package/template/cli/ts-4-9/Header.stories.tsx

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

package/template/cli/ts-4-9/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,10 +18,9 @@ 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" />
           </>
         ) : (

package/template/cli/ts-4-9/Page.stories.tsx

@@ -1,5 +1,6 @@
-import type { Meta } from '@storybook/react';
-import { expect, userEvent, within } from '@storybook/test';
+import type { Meta } from '@storybook/react-native-web-vite';
+
+import { expect, userEvent, within } from 'storybook/test';
 
 import { Page } from './Page';
 

package/template/cli/ts-4-9/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{' '}

package/template/cli/ts-3-8/Button.stories.tsx

@@ -1,53 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
-
-import { View } from 'react-native';
-
-import { Button } from './Button';
-
-const meta: Meta<typeof Button> = {
-  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() },
-};
-
-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/ts-3-8/Button.tsx

@@ -1,99 +0,0 @@
-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;
-}
-
-/** Primary UI component for user interaction */
-export const Button = ({
-  primary = false,
-  size = 'medium',
-  backgroundColor,
-  label,
-  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/ts-3-8/Header.stories.tsx

@@ -1,33 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Header } from './Header';
-
-const meta: Meta<typeof Header> = {
-  title: 'Example/Header',
-  component: Header,
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
-};
-
-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/ts-3-8/Header.tsx

@@ -1,78 +0,0 @@
-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/ts-3-8/Page.stories.tsx

@@ -1,28 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { expect, userEvent, within } from '@storybook/test';
-
-import { Page } from './Page';
-
-const meta: Meta<typeof Page> = {
-  title: 'Example/Page',
-  component: Page,
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const LoggedIn: Story = {
-  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: Story = {};

package/template/cli/ts-3-8/Page.tsx

@@ -1,162 +0,0 @@
-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,
-  },
-});