Merge pull request #30821 from storybookjs/dannyhw/fix-rnw-template

React-Native-Web: Fix errors in CLI template stories

Author: shilman

code/frameworks/react-native-web-vite/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" />
           </>
         ) : (

code/frameworks/react-native-web-vite/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}>

code/frameworks/react-native-web-vite/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" />
           </>
         ) : (

code/frameworks/react-native-web-vite/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{' '}