@storybook/react-native-web-vite 0.0.0-pr-29520-sha-80319502

package/README.md

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

package/dist/index.d.ts

@@ -0,0 +1,52 @@
+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 { 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;
+    pluginReactOptions?: Omit<Options, 'babel'> & {
+        babel?: BabelOptions;
+    };
+};
+type StorybookConfigFramework = {
+    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/index.js

@@ -0,0 +1 @@
+"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __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 src_exports={};module.exports=__toCommonJS(src_exports);

package/dist/index.mjs

@@ -0,0 +1 @@
+

package/dist/preset.d.ts

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

package/dist/preset.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 preset_exports={};__export(preset_exports,{core:()=>core,viteFinal:()=>viteFinal});module.exports=__toCommonJS(preset_exports);var 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"),{plugins=[]}=config;return plugins.push((0,import_plugin_react.default)({babel:{babelrc:!1,configFile:!1},jsxRuntime:"automatic",...pluginReactOptions})),plugins.push(reactNativeWeb(pluginReactOptions)),config},core={builder:"@storybook/builder-vite",renderer:"@storybook/react"};0&&(module.exports={core,viteFinal});

package/package.json

@@ -0,0 +1,88 @@
+{
+  "name": "@storybook/react-native-web-vite",
+  "version": "0.0.0-pr-29520-sha-80319502",
+  "description": "Develop react-native components an isolated web environment with hot reloading.",
+  "keywords": [
+    "storybook"
+  ],
+  "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/react-native-web-vite",
+  "bugs": {
+    "url": "https://github.com/storybookjs/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybookjs/storybook.git",
+    "directory": "code/frameworks/react-native-web-vite"
+  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "node": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./preset": {
+      "types": "./dist/preset.d.ts",
+      "require": "./dist/preset.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/**/*",
+    "template/cli/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts",
+    "!src/**/*"
+  ],
+  "scripts": {
+    "check": "jiti ../../../scripts/prepare/check.ts",
+    "prep": "jiti ../../../scripts/prepare/bundle.ts"
+  },
+  "dependencies": {
+    "@joshwooding/vite-plugin-react-docgen-typescript": "0.3.0",
+    "@rollup/pluginutils": "^5.0.2",
+    "@storybook/builder-vite": "0.0.0-pr-29520-sha-80319502",
+    "@storybook/react": "0.0.0-pr-29520-sha-80319502",
+    "@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"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "typescript": "^5.3.2"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
+    "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-80319502",
+    "vite": "^4.0.0 || ^5.0.0"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bundler": {
+    "entries": [
+      "./src/index.ts",
+      "./src/preset.ts"
+    ],
+    "platform": "node"
+  },
+  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16"
+}

package/preset.js

@@ -0,0 +1 @@
+module.exports = require('./dist/preset');

package/template/cli/.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "rules": {
+    "import/extensions": "off",
+    "react/no-unknown-property": "off"
+  }
+}

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

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { View } from 'react-native';
+import { Button } from './Button';
+import * as React from 'react';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  decorators: [
+    (Story) => (
+      <View style={{ flex: 1, alignItems: 'flex-start' }}>
+        <Story />
+      </View>
+    ),
+  ],
+};
+
+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

@@ -0,0 +1,124 @@
+import {
+  StyleSheet,
+  StyleProp,
+  ViewStyle,
+  TouchableOpacity,
+  Text,
+  View,
+} from 'react-native';
+import * as React from 'react';
+
+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/ts-3-8/Header.stories.tsx

@@ -0,0 +1,28 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Header } from './Header';
+import * as React from 'react';
+
+const meta: Meta<typeof Header> = {
+  component: Header,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const LoggedIn: Story = {
+  args: {
+    user: {},
+    onLogin: () => {},
+    onLogout: () => {},
+    onCreateAccount: () => {},
+  },
+};
+
+export const LoggedOut: Story = {
+  args: {
+    onLogin: () => {},
+    onLogout: () => {},
+    onCreateAccount: () => {},
+  },
+};

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

@@ -0,0 +1,83 @@
+import { Button } from './Button';
+import { View, Text, StyleSheet } from 'react-native';
+import * as React from 'react';
+
+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 ? (
+          <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',
+  },
+});

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

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import * as HeaderStories from './Header.stories';
+import { Page } from './Page';
+import * as React from 'react';
+
+const meta: Meta<typeof Page> = {
+  component: Page,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const LoggedIn: Story = {
+  args: HeaderStories.LoggedIn.args,
+};
+
+export const LoggedOut: Story = {
+  args: HeaderStories.LoggedOut.args,
+};

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

@@ -0,0 +1,168 @@
+import { View, Text, StyleSheet, Linking } from 'react-native';
+import { Header } from './Header';
+import * as React from 'react';
+
+export type PageProps = {
+  user?: {};
+  onLogin: () => void;
+  onLogout: () => void;
+  onCreateAccount: () => void;
+};
+
+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>
+        
+        <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/ts-4-9/Button.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { View } from 'react-native';
+import { Button } from './Button';
+import * as React from 'react';
+
+const meta = {
+  component: Button,
+  decorators: [
+    (Story) => (
+      <View style={{ flex: 1, alignItems: 'flex-start' }}>
+        <Story />
+      </View>
+    ),
+  ],
+} 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/ts-4-9/Button.tsx

@@ -0,0 +1,124 @@
+import {
+  StyleSheet,
+  StyleProp,
+  ViewStyle,
+  TouchableOpacity,
+  Text,
+  View,
+} from 'react-native';
+import * as React from 'react';
+
+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/ts-4-9/Header.stories.tsx

@@ -0,0 +1,28 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Header } from './Header';
+import * as React from 'react';
+
+const meta = {
+  component: Header,
+} satisfies Meta<typeof Header>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const LoggedIn: Story = {
+  args: {
+    user: {},
+    onLogin: () => {},
+    onLogout: () => {},
+    onCreateAccount: () => {},
+  },
+};
+
+export const LoggedOut: Story = {
+  args: {
+    onLogin: () => {},
+    onLogout: () => {},
+    onCreateAccount: () => {},
+  },
+};

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

@@ -0,0 +1,81 @@
+import { Button } from './Button';
+import { View, Text, StyleSheet } from 'react-native';
+import * as React from 'react';
+
+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 ? (
+          <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',
+  },
+});

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

@@ -0,0 +1,16 @@
+import type { Meta } from '@storybook/react';
+import * as HeaderStories from './Header.stories';
+import { Page } from './Page';
+import * as React from 'react';
+
+export default {
+  component: Page,
+} as Meta<typeof Page>;
+
+export const LoggedIn = {
+  args: HeaderStories.LoggedIn.args,
+};
+
+export const LoggedOut = {
+  args: HeaderStories.LoggedOut.args,
+};

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

@@ -0,0 +1,160 @@
+import { View, Text, StyleSheet, Linking } from 'react-native';
+import { Header } from './Header';
+import * as React from 'react';
+
+export type PageProps = {
+  user?: {};
+  onLogin: () => void;
+  onLogout: () => void;
+  onCreateAccount: () => void;
+};
+
+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>
+        <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,
+  },
+});