@storybook/react-native-web-vite 0.0.4-0 → 8.5.0-alpha.7

package/README.md

@@ -1,23 +1,3 @@
-# @storybook/react-native-web-vite
+# Storybook for React Native Web & Vite
 
-```ts
-import { StorybookConfig } from "@storybook/react-native-web-vite";
-const path = require("path");
-
-const main: StorybookConfig = {
-  stories: ["../src/components/**/*.stories.?(ts|tsx|js|jsx)"],
-
-  addons: ["@storybook/addon-essentials"],
-
-  framework: {
-    name: "@storybook/react-native-web-vite", // <--- This is the important part.
-    options: {},
-  },
-
-  typescript: {
-    reactDocgen: "react-docgen-typescript",
-  },
-};
-
-export default main;
-```
+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 { 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 { BuilderOptions, StorybookConfigVite } from '@storybook/builder-vite';
-import docgenTypescript from '@joshwooding/vite-plugin-react-docgen-typescript';
 
-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"> & {
+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 type { FrameworkOptions, StorybookConfig };
+export { FrameworkOptions, StorybookConfig };

package/dist/index.js

@@ -1,3 +1 @@
-
-//# sourceMappingURL=index.js.map
-//# sourceMappingURL=index.js.map
+"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,14 @@
+import { PluginOption } from 'vite';
+import { StorybookConfig } from './index.js';
+import 'storybook/internal/types';
+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, reactNativeWeb, 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,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,95 +1,89 @@
 {
   "name": "@storybook/react-native-web-vite",
-  "version": "0.0.4-0",
-  "description": "Sets up react native web with vite",
+  "version": "8.5.0-alpha.7",
+  "description": "Develop react-native components an isolated web environment with hot reloading.",
   "keywords": [
-    "react-native-web",
-    "storybook-frameworks"
+    "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/react-native-web-vite"
+    "url": "https://github.com/storybookjs/storybook.git",
+    "directory": "code/frameworks/react-native-web-vite"
+  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
   },
-  "type": "module",
   "license": "MIT",
-  "author": "Daniel Williams <dannyhyunsoowilliams@gmail.com>",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "node": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./preset": {
+      "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"
     },
-    "./preset": "./dist/preset.cjs",
     "./package.json": "./package.json"
   },
-  "types": "dist/index.d.ts",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
+    "template/cli/**/*",
     "README.md",
     "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "!src/**/*"
   ],
   "scripts": {
-    "build": "tsup",
-    "build:watch": "npm run build -- --watch",
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "run-p build:watch \"storybook --quiet\"",
-    "prerelease": "zx scripts/prepublish-checks.js",
-    "release": "npm run build && auto shipit",
-    "eject-ts": "zx scripts/eject-typescript.js",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "check": "jiti ../../../scripts/prepare/check.ts",
+    "prep": "jiti ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/builder-vite": "^8.3.6",
-    "@storybook/react": "^8.3.6",
-    "@vitejs/plugin-react": "^4.3.2",
-    "vite-plugin-babel": "^1.2.0",
-    "@joshwooding/vite-plugin-react-docgen-typescript": "^0.4.1"
+    "@joshwooding/vite-plugin-react-docgen-typescript": "0.3.0",
+    "@storybook/builder-vite": "8.5.0-alpha.7",
+    "@storybook/react": "8.5.0-alpha.7",
+    "@storybook/react-vite": "8.5.0-alpha.7",
+    "@vitejs/plugin-react": "^4.3.2"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^8.3.6",
-    "@storybook/addon-interactions": "^8.3.6",
-    "@storybook/addon-links": "^8.3.6",
-    "@storybook/blocks": "^8.3.6",
-    "@storybook/react-vite": "^8.3.6",
-    "@storybook/test": "^8.3.6",
-    "@types/node": "^20.10.0",
-    "@types/react": "^18.2.65",
-    "@types/react-dom": "^18.2.21",
-    "@vitejs/plugin-react": "^4.3.2",
-    "auto": "^11.1.1",
-    "boxen": "^7.1.1",
-    "dedent": "^1.5.1",
-    "prettier": "^3.3.3",
-    "prompts": "^2.4.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-native": "^0.75.4",
-    "react-native-web": "^0.19.12",
-    "storybook": "^8.3.6",
-    "tsup": "^8.2.4",
-    "typescript": "^5.5.4",
-    "vite": "^5.3.5",
-    "zx": "^7.2.3"
+    "@types/node": "^22.0.0",
+    "typescript": "^5.3.2"
   },
   "peerDependencies": {
-    "react-native": "^0.75.4",
+    "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": "^8",
-    "vite": "^4.0.0 || ^5.0.0"
+    "storybook": "^8.5.0-alpha.7",
+    "vite": "^5.0.0"
+  },
+  "engines": {
+    "node": ">=18.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
   "bundler": {
-    "exportEntries": [
-      "src/index.ts"
+    "entries": [
+      "./src/index.ts",
+      "./src/preset.ts",
+      "./src/vite-plugin.ts"
     ],
-    "nodeEntries": [
-      "src/preset.ts"
-    ]
-  }
-}
+    "platform": "node"
+  },
+  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16"
+}

package/preset.js

@@ -1,4 +1 @@
-// this file is slightly misleading. It needs to be CJS, and thus in this "type": "module" package it should be named preset.cjs
-// but Storybook won't pick that filename up so we have to name it preset.js instead
-
-module.exports = require('./dist/preset.cjs');
+module.exports = require('./dist/preset');

package/template/cli/.eslintrc.json

@@ -0,0 +1,7 @@
+{
+  "rules": {
+    "import/extensions": "off",
+    "react/no-unknown-property": "off",
+    "react/react-in-jsx-scope": "off"
+  }
+}

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: () => {},
+  },
+};