@storybook/react-native-web-vite 0.0.0-pr-29520-sha-c92aa93a → 0.0.0-pr-29659-sha-1f47b682

package/README.md

@@ -1,3 +1,3 @@
-# Storybook for React & Vite
+# Storybook for React Native Web & Vite
 
-See [documentation](https://storybook.js.org/docs/get-started/frameworks/react-vite?renderer=react) for installation instructions, usage examples, APIs, and more.
+See [documentation](https://storybook.js.org/docs/get-started/frameworks/react-native-web-vite?renderer=react-native-web) for installation instructions, usage examples, APIs, and more.

package/dist/index.d.ts

@@ -1,52 +1,19 @@
-import { StorybookConfig as StorybookConfig$1, TypescriptOptions as TypescriptOptions$1, CompatibleString } from 'storybook/internal/types';
-import { BuilderOptions, StorybookConfigVite } from '@storybook/builder-vite';
-import docgenTypescript from '@joshwooding/vite-plugin-react-docgen-typescript';
+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';
 
-type FrameworkName = CompatibleString<'@storybook/react-native-web-vite'>;
-type BuilderName = CompatibleString<'@storybook/builder-vite'>;
-type FrameworkOptions = {
-    builder?: BuilderOptions;
-    strictMode?: boolean;
-    /**
-     * Use React's legacy root API to mount components
-     *
-     * React has introduced a new root API with React 18.x to enable a whole set of new features (e.g.
-     * concurrent features) If this flag is true, the legacy Root API is used to mount components to
-     * make it easier to migrate step by step to React 18.
-     *
-     * @default false
-     */
-    legacyRootApi?: boolean;
+type FrameworkOptions = FrameworkOptions$1 & {
     pluginReactOptions?: Omit<Options, 'babel'> & {
         babel?: BabelOptions;
     };
 };
-type StorybookConfigFramework = {
+type FrameworkName = CompatibleString<'@storybook/react-native-web-vite'>;
+/** The interface for Storybook configuration in `main.ts` files. */
+type StorybookConfig = Omit<StorybookConfig$1, 'framework'> & {
     framework: FrameworkName | {
         name: FrameworkName;
         options: FrameworkOptions;
     };
-    core?: StorybookConfig$1['core'] & {
-        builder?: BuilderName | {
-            name: BuilderName;
-            options: BuilderOptions;
-        };
-    };
-};
-type TypescriptOptions = TypescriptOptions$1 & {
-    /**
-     * Sets the type of Docgen when working with React and TypeScript
-     *
-     * @default `'react-docgen'`
-     */
-    reactDocgen: 'react-docgen-typescript' | 'react-docgen' | false;
-    /** Configures `@joshwooding/vite-plugin-react-docgen-typescript` */
-    reactDocgenTypescriptOptions: Parameters<typeof docgenTypescript>[0];
-};
-/** The interface for Storybook configuration in `main.ts` files. */
-type StorybookConfig = Omit<StorybookConfig$1, keyof StorybookConfigVite | keyof StorybookConfigFramework | 'typescript'> & StorybookConfigVite & StorybookConfigFramework & {
-    typescript?: Partial<TypescriptOptions>;
 };
 
 export { FrameworkOptions, StorybookConfig };

package/dist/preset.d.ts

@@ -1,13 +1,14 @@
+import { PluginOption } from 'vite';
 import { StorybookConfig } from './index.js';
 import 'storybook/internal/types';
-import '@storybook/builder-vite';
-import '@joshwooding/vite-plugin-react-docgen-typescript';
+import '@storybook/react-vite';
 import '@vitejs/plugin-react';
 
+declare function reactNativeWeb(): PluginOption;
 declare const viteFinal: StorybookConfig['viteFinal'];
 declare const core: {
     builder: string;
     renderer: string;
 };
 
-export { core, viteFinal };
+export { core, reactNativeWeb, viteFinal };

package/dist/preset.js

@@ -1 +1 @@
-"use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__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 __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var preset_exports={};__export(preset_exports,{core:()=>core,viteFinal:()=>viteFinal});module.exports=__toCommonJS(preset_exports);var import_preset=require("@storybook/react-vite/preset"),import_plugin_react=__toESM(require("@vitejs/plugin-react"));function reactNativeWeb(reactOptions){return{name:"vite:react-native-web",config(_userConfig,env){return{define:{"global.__x":{},_frameTimestamp:void 0,_WORKLET:!1,__DEV__:`${env.mode==="development"}`,"process.env.NODE_ENV":JSON.stringify(process.env.NODE_ENV||env.mode)},optimizeDeps:{include:[],esbuildOptions:{jsx:"transform",resolveExtensions:[".web.js",".web.ts",".web.tsx",".js",".jsx",".json",".ts",".tsx",".mjs"],loader:{".js":"jsx"}}},resolve:{extensions:[".web.js",".web.ts",".web.tsx",".js",".jsx",".json",".ts",".tsx",".mjs"],alias:{"react-native":"react-native-web"}}}}}}var viteFinal=async(config,options)=>{let{pluginReactOptions={}}=await options.presets.apply("frameworkOptions"),reactConfig=await(0,import_preset.viteFinal)(config,options),{plugins=[]}=reactConfig;return plugins.unshift((0,import_plugin_react.default)({babel:{babelrc:!1,configFile:!1},jsxRuntime:"automatic",...pluginReactOptions})),plugins.push(reactNativeWeb(pluginReactOptions)),reactConfig},core={builder:"@storybook/builder-vite",renderer:"@storybook/react"};0&&(module.exports={core,viteFinal});
+"use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__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 __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var preset_exports={};__export(preset_exports,{core:()=>core,reactNativeWeb:()=>reactNativeWeb,viteFinal:()=>viteFinal});module.exports=__toCommonJS(preset_exports);var import_preset=require("@storybook/react-vite/preset"),import_plugin_react=__toESM(require("@vitejs/plugin-react"));function reactNativeWeb(){return{name:"vite:react-native-web",config(_userConfig,env){return{define:{"global.__x":{},_frameTimestamp:void 0,_WORKLET:!1,__DEV__:`${env.mode==="development"}`,"process.env.NODE_ENV":JSON.stringify(process.env.NODE_ENV||env.mode)},optimizeDeps:{include:[],esbuildOptions:{jsx:"transform",resolveExtensions:[".web.js",".web.ts",".web.tsx",".js",".jsx",".json",".ts",".tsx",".mjs"],loader:{".js":"jsx"}}},resolve:{extensions:[".web.js",".web.ts",".web.tsx",".js",".jsx",".json",".ts",".tsx",".mjs"],alias:{"react-native":"react-native-web"}}}}}}var viteFinal=async(config,options)=>{let{pluginReactOptions={}}=await options.presets.apply("frameworkOptions"),reactConfig=await(0,import_preset.viteFinal)(config,options),{plugins=[]}=reactConfig;return plugins.unshift((0,import_plugin_react.default)({babel:{babelrc:!1,configFile:!1},jsxRuntime:"automatic",...pluginReactOptions})),plugins.push(reactNativeWeb()),reactConfig},core={builder:"@storybook/builder-vite",renderer:"@storybook/react"};0&&(module.exports={core,reactNativeWeb,viteFinal});

package/dist/vite-plugin.d.ts

@@ -0,0 +1,5 @@
+import * as vite from 'vite';
+
+declare const storybookReactNativeWeb: () => vite.PluginOption[];
+
+export { storybookReactNativeWeb };

package/dist/vite-plugin.js

@@ -0,0 +1 @@
+"use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__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 __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var vite_plugin_exports={};__export(vite_plugin_exports,{storybookReactNativeWeb:()=>storybookReactNativeWeb});module.exports=__toCommonJS(vite_plugin_exports);var import_plugin_react2=__toESM(require("@vitejs/plugin-react"));var import_preset=require("@storybook/react-vite/preset"),import_plugin_react=__toESM(require("@vitejs/plugin-react"));function reactNativeWeb(){return{name:"vite:react-native-web",config(_userConfig,env){return{define:{"global.__x":{},_frameTimestamp:void 0,_WORKLET:!1,__DEV__:`${env.mode==="development"}`,"process.env.NODE_ENV":JSON.stringify(process.env.NODE_ENV||env.mode)},optimizeDeps:{include:[],esbuildOptions:{jsx:"transform",resolveExtensions:[".web.js",".web.ts",".web.tsx",".js",".jsx",".json",".ts",".tsx",".mjs"],loader:{".js":"jsx"}}},resolve:{extensions:[".web.js",".web.ts",".web.tsx",".js",".jsx",".json",".ts",".tsx",".mjs"],alias:{"react-native":"react-native-web"}}}}}}var storybookReactNativeWeb=()=>[(0,import_plugin_react2.default)({babel:{babelrc:!1,configFile:!1},jsxRuntime:"automatic"}),reactNativeWeb()];0&&(module.exports={storybookReactNativeWeb});

package/dist/vite-plugin.mjs

@@ -0,0 +1,6 @@
+import react2 from '@vitejs/plugin-react';
+import '@storybook/react-vite/preset';
+
+function reactNativeWeb(){return {name:"vite:react-native-web",config(_userConfig,env){return {define:{"global.__x":{},_frameTimestamp:void 0,_WORKLET:!1,__DEV__:`${env.mode==="development"}`,"process.env.NODE_ENV":JSON.stringify(process.env.NODE_ENV||env.mode)},optimizeDeps:{include:[],esbuildOptions:{jsx:"transform",resolveExtensions:[".web.js",".web.ts",".web.tsx",".js",".jsx",".json",".ts",".tsx",".mjs"],loader:{".js":"jsx"}}},resolve:{extensions:[".web.js",".web.ts",".web.tsx",".js",".jsx",".json",".ts",".tsx",".mjs"],alias:{"react-native":"react-native-web"}}}}}}var storybookReactNativeWeb=()=>[react2({babel:{babelrc:!1,configFile:!1},jsxRuntime:"automatic"}),reactNativeWeb()];
+
+export { storybookReactNativeWeb };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-web-vite",
-  "version": "0.0.0-pr-29520-sha-c92aa93a",
+  "version": "0.0.0-pr-29659-sha-1f47b682",
   "description": "Develop react-native components an isolated web environment with hot reloading.",
   "keywords": [
     "storybook"
@@ -30,6 +30,11 @@
       "types": "./dist/preset.d.ts",
       "require": "./dist/preset.js"
     },
+    "./vite-plugin": {
+      "types": "./dist/vite-plugin.d.ts",
+      "import": "./dist/vite-plugin.mjs",
+      "require": "./dist/vite-plugin.js"
+    },
     "./package.json": "./package.json"
   },
   "main": "dist/index.js",
@@ -49,16 +54,10 @@
   },
   "dependencies": {
     "@joshwooding/vite-plugin-react-docgen-typescript": "0.3.0",
-    "@rollup/pluginutils": "^5.0.2",
-    "@storybook/builder-vite": "0.0.0-pr-29520-sha-c92aa93a",
-    "@storybook/react": "0.0.0-pr-29520-sha-c92aa93a",
-    "@storybook/react-vite": "0.0.0-pr-29520-sha-c92aa93a",
-    "@vitejs/plugin-react": "^4.3.2",
-    "find-up": "^5.0.0",
-    "magic-string": "^0.30.0",
-    "react-docgen": "^7.0.0",
-    "resolve": "^1.22.8",
-    "tsconfig-paths": "^4.2.0"
+    "@storybook/builder-vite": "0.0.0-pr-29659-sha-1f47b682",
+    "@storybook/react": "0.0.0-pr-29659-sha-1f47b682",
+    "@storybook/react-vite": "0.0.0-pr-29659-sha-1f47b682",
+    "@vitejs/plugin-react": "^4.3.2"
   },
   "devDependencies": {
     "@types/node": "^22.0.0",
@@ -69,8 +68,8 @@
     "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": "^0.0.0-pr-29520-sha-c92aa93a",
-    "vite": "^4.0.0 || ^5.0.0"
+    "storybook": "^0.0.0-pr-29659-sha-1f47b682",
+    "vite": "^5.0.0"
   },
   "engines": {
     "node": ">=18.0.0"
@@ -81,7 +80,8 @@
   "bundler": {
     "entries": [
       "./src/index.ts",
-      "./src/preset.ts"
+      "./src/preset.ts",
+      "./src/vite-plugin.ts"
     ],
     "platform": "node"
   },

package/template/cli/js/Button.jsx

@@ -0,0 +1,109 @@
+import PropTypes from 'prop-types';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+
+/** Primary UI component for user interaction */
+export const Button = ({
+  primary = false,
+  size = 'medium',
+  backgroundColor,
+  label,
+  style,
+  onPress,
+}) => {
+  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,
+};
+
+Button.propTypes = {
+  /** Is this the principal call to action on the page? */
+  primary: PropTypes.bool,
+  /** What background color to use */
+  backgroundColor: PropTypes.string,
+  /** How large should the button be? */
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  /** Button contents */
+  label: PropTypes.string.isRequired,
+  /** Optional click handler */
+  onPress: PropTypes.func,
+  /** Optional extra styles */
+  style: PropTypes.object,
+};
+
+Button.defaultProps = {
+  backgroundColor: null,
+  primary: false,
+  size: 'medium',
+  onClick: undefined,
+};

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

@@ -0,0 +1,50 @@
+import { fn } from '@storybook/test';
+
+import { View } from 'react-native';
+
+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() },
+};
+
+export default meta;
+
+export const Primary = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};

package/template/cli/js/Header.jsx

@@ -0,0 +1,84 @@
+import PropTypes from 'prop-types';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { Button } from './Button';
+
+export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
+  <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',
+  },
+});
+
+Header.propTypes = {
+  user: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+  }),
+  onLogin: PropTypes.func.isRequired,
+  onLogout: PropTypes.func.isRequired,
+  onCreateAccount: PropTypes.func.isRequired,
+};
+
+Header.defaultProps = {
+  user: null,
+};

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

@@ -0,0 +1,29 @@
+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'],
+};
+
+export default meta;
+
+export const LoggedIn = {
+  args: {
+    user: {
+      name: 'Jane Doe',
+    },
+    onLogin: () => {},
+    onLogout: () => {},
+    onCreateAccount: () => {},
+  },
+};
+
+export const LoggedOut = {
+  args: {
+    onLogin: () => {},
+    onLogout: () => {},
+    onCreateAccount: () => {},
+  },
+};

package/template/cli/js/Page.jsx

@@ -0,0 +1,162 @@
+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/js/Page.stories.jsx

@@ -0,0 +1,25 @@
+import { expect, userEvent, within } from '@storybook/test';
+
+import { Page } from './Page';
+
+const meta = {
+  title: 'Example/Page',
+  component: Page,
+};
+
+export default meta;
+
+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/ts-3-8/Button.stories.tsx

@@ -1,10 +1,12 @@
 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) => (
@@ -13,6 +15,10 @@ const meta: Meta<typeof Button> = {
       </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;

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

@@ -12,7 +12,6 @@ export interface ButtonProps {
   label: string;
   /** Optional click handler */
   onPress?: () => void;
-  style?: StyleProp<ViewStyle>;
 }
 
 /** Primary UI component for user interaction */
@@ -21,7 +20,6 @@ export const Button = ({
   size = 'medium',
   backgroundColor,
   label,
-  style,
   onPress,
 }: ButtonProps) => {
   const modeStyle = primary ? styles.primary : styles.secondary;

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

@@ -3,7 +3,10 @@ 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;
@@ -12,7 +15,9 @@ type Story = StoryObj<typeof meta>;
 
 export const LoggedIn: Story = {
   args: {
-    user: {},
+    user: {
+      name: 'Jane Doe',
+    },
     onLogin: () => {},
     onLogout: () => {},
     onCreateAccount: () => {},

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

@@ -18,7 +18,13 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps
 
       <View style={styles.buttonContainer}>
         {user ? (
-          <Button style={styles.button} size="small" onPress={onLogout} label="Log out" />
+          <>
+            <>
+              <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" />
@@ -64,5 +70,9 @@ const styles = StyleSheet.create({
   },
   buttonContainer: {
     flexDirection: 'row',
+    alignItems: 'center',
+  },
+  userName: {
+    fontWeight: '700',
   },
 });

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

@@ -1,9 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { expect, userEvent, within } from '@storybook/test';
 
-import * as HeaderStories from './Header.stories';
 import { Page } from './Page';
 
 const meta: Meta<typeof Page> = {
+  title: 'Example/Page',
   component: Page,
 };
 
@@ -12,9 +13,16 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const LoggedIn: Story = {
-  args: HeaderStories.LoggedIn.args,
-};
+  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();
 
-export const LoggedOut: Story = {
-  args: HeaderStories.LoggedOut.args,
+    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,91 +1,95 @@
+import { useState } from 'react';
+
 import { Linking, StyleSheet, Text, View } from 'react-native';
 
 import { Header } from './Header';
 
-export type PageProps = {
-  user?: {};
-  onLogin: () => void;
-  onLogout: () => void;
-  onCreateAccount: () => void;
-};
+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>
 
-export const Page = ({ user, onLogin, onLogout, onCreateAccount }: PageProps) => (
-  <View>
-    <Header user={user} onLogin={onLogin} onLogout={onLogout} onCreateAccount={onCreateAccount} />
-
-    <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>
+        <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>
-          Assemble data in the page component from your services. You can mock these services out
-          using Storybook.
+          <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>
-      </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 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>
-        .
-      </Text>
 
-      <View style={styles.tipWrapper}>
-        <View style={styles.tip}>
-          <Text style={styles.tipText}>Tip </Text>
-        </View>
+        <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>Adjust the width of the canvas with the </Text>
 
-        <Text>Viewports addon in the toolbar</Text>
+          <Text>Viewports addon in the toolbar</Text>
+        </View>
       </View>
     </View>
-  </View>
-);
+  );
+};
 
 const styles = StyleSheet.create({
   section: {

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

@@ -1,10 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 
 import { View } from 'react-native';
 
 import { Button } from './Button';
 
 const meta = {
+  title: 'Example/Button',
   component: Button,
   decorators: [
     (Story) => (
@@ -13,6 +15,10 @@ const meta = {
       </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;

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

@@ -3,7 +3,10 @@ import type { Meta, StoryObj } from '@storybook/react';
 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;
@@ -12,7 +15,9 @@ type Story = StoryObj<typeof meta>;
 
 export const LoggedIn: Story = {
   args: {
-    user: {},
+    user: {
+      name: 'Jane Doe',
+    },
     onLogin: () => {},
     onLogout: () => {},
     onCreateAccount: () => {},

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

@@ -17,7 +17,13 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps
       </View>
       <View style={styles.buttonContainer}>
         {user ? (
-          <Button style={styles.button} size="small" onPress={onLogout} label="Log out" />
+          <>
+            <>
+              <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" />
@@ -62,5 +68,9 @@ const styles = StyleSheet.create({
   },
   buttonContainer: {
     flexDirection: 'row',
+    alignItems: 'center',
+  },
+  userName: {
+    fontWeight: '700',
   },
 });

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

@@ -1,16 +1,24 @@
 import type { Meta } from '@storybook/react';
+import { expect, userEvent, within } from '@storybook/test';
 
-import * as HeaderStories from './Header.stories';
 import { Page } from './Page';
 
 export default {
+  title: 'Example/Page',
   component: Page,
 } as Meta<typeof Page>;
 
 export const LoggedIn = {
-  args: HeaderStories.LoggedIn.args,
-};
+  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();
 
-export const LoggedOut = {
-  args: HeaderStories.LoggedOut.args,
+    const logoutButton = canvas.getByRole('button', { name: /Log out/i });
+    await expect(logoutButton).toBeInTheDocument();
+  },
 };
+
+export const LoggedOut = {};

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

@@ -1,83 +1,87 @@
+import { useState } from 'react';
+
 import { Linking, StyleSheet, Text, View } from 'react-native';
 
 import { Header } from './Header';
 
-export type PageProps = {
-  user?: {};
-  onLogin: () => void;
-  onLogout: () => void;
-  onCreateAccount: () => void;
-};
+export const Page = () => {
+  const [user, setUser] = useState();
 
-export const Page = ({ user, onLogin, onLogout, onCreateAccount }: PageProps) => (
-  <View>
-    <Header user={user} onLogin={onLogin} onLogout={onLogout} onCreateAccount={onCreateAccount} />
+  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 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>
-          Assemble data in the page component from your services. You can mock these services out
-          using Storybook.
+          <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>
-      </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 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>
-        . 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 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>
-        <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: {