@storybook/react-native-web-vite 9.0.0-alpha.2 → 9.0.0-alpha.21

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.2",
+  "version": "9.0.0-alpha.21",
   "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.2",
-    "@storybook/react": "9.0.0-alpha.2",
-    "@storybook/react-vite": "9.0.0-alpha.2",
+    "@storybook/builder-vite": "9.0.0-alpha.21",
+    "@storybook/react": "9.0.0-alpha.21",
+    "@storybook/react-vite": "9.0.0-alpha.21",
     "@vitejs/plugin-react": "^4.3.2",
     "vite-plugin-babel": "^1.3.0",
     "vite-plugin-commonjs": "^0.10.4",
@@ -80,11 +80,11 @@
     "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.2",
+    "storybook": "^9.0.0-alpha.21",
     "vite": "^5.0.0 || ^6.0.0"
   },
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=20.0.0"
   },
   "publishConfig": {
     "access": "public"

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 → ts}/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 → ts}/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 → ts}/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 → ts}/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 → ts}/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{' '}