@storybook/react-vite 8.6.14 → 10.0.4

package/README.md

@@ -1,3 +1,7 @@
 # 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.
+Develop, document, and test UI components in isolation.
+
+See [documentation](https://storybook.js.org/docs/get-started/frameworks/react-vite?renderer=react&ref=readme) for installation instructions, usage examples, APIs, and more.
+
+Learn more about Storybook at [storybook.js.org](https://storybook.js.org/?ref=readme).

package/dist/_node-chunks/chunk-IV4SM72Q.js

@@ -0,0 +1,17 @@
+import CJS_COMPAT_NODE_URL_y3pg975sggp from 'node:url';
+import CJS_COMPAT_NODE_PATH_y3pg975sggp from 'node:path';
+import CJS_COMPAT_NODE_MODULE_y3pg975sggp from "node:module";
+
+var __filename = CJS_COMPAT_NODE_URL_y3pg975sggp.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_y3pg975sggp.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_y3pg975sggp.createRequire(import.meta.url);
+
+// ------------------------------------------------------------
+// end of CJS compatibility banner, injected by Storybook's esbuild configuration
+// ------------------------------------------------------------
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+export {
+  __name
+};

package/dist/_node-chunks/react-docgen-ARJA47DN.js

@@ -0,0 +1,217 @@
+import CJS_COMPAT_NODE_URL_y3pg975sggp from 'node:url';
+import CJS_COMPAT_NODE_PATH_y3pg975sggp from 'node:path';
+import CJS_COMPAT_NODE_MODULE_y3pg975sggp from "node:module";
+
+var __filename = CJS_COMPAT_NODE_URL_y3pg975sggp.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_y3pg975sggp.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_y3pg975sggp.createRequire(import.meta.url);
+
+// ------------------------------------------------------------
+// end of CJS compatibility banner, injected by Storybook's esbuild configuration
+// ------------------------------------------------------------
+import {
+  __name
+} from "./chunk-IV4SM72Q.js";
+
+// src/plugins/react-docgen.ts
+import { existsSync } from "node:fs";
+import { relative, sep } from "node:path";
+import { getProjectRoot } from "storybook/internal/common";
+import { logger } from "storybook/internal/node-logger";
+import { createFilter } from "@rollup/pluginutils";
+import * as find from "empathic/find";
+import MagicString from "magic-string";
+import {
+  ERROR_CODES,
+  builtinHandlers as docgenHandlers,
+  builtinResolvers as docgenResolver,
+  makeFsImporter,
+  parse
+} from "react-docgen";
+import * as TsconfigPaths from "tsconfig-paths";
+
+// src/plugins/docgen-handlers/actualNameHandler.ts
+import { utils } from "react-docgen";
+var { getNameOrValue, isReactForwardRefCall } = utils;
+var actualNameHandler = /* @__PURE__ */ __name(function actualNameHandler2(documentation, componentDefinition) {
+  documentation.set("definedInFile", componentDefinition.hub.file.opts.filename);
+  if ((componentDefinition.isClassDeclaration() || componentDefinition.isFunctionDeclaration()) && componentDefinition.has("id")) {
+    documentation.set(
+      "actualName",
+      getNameOrValue(componentDefinition.get("id"))
+    );
+  } else if (componentDefinition.isArrowFunctionExpression() || componentDefinition.isFunctionExpression() || isReactForwardRefCall(componentDefinition)) {
+    let currentPath = componentDefinition;
+    while (currentPath.parentPath) {
+      if (currentPath.parentPath.isVariableDeclarator()) {
+        documentation.set("actualName", getNameOrValue(currentPath.parentPath.get("id")));
+        return;
+      }
+      if (currentPath.parentPath.isAssignmentExpression()) {
+        const leftPath = currentPath.parentPath.get("left");
+        if (leftPath.isIdentifier() || leftPath.isLiteral()) {
+          documentation.set("actualName", getNameOrValue(leftPath));
+          return;
+        }
+      }
+      currentPath = currentPath.parentPath;
+    }
+    documentation.set("actualName", "");
+  }
+}, "actualNameHandler");
+var actualNameHandler_default = actualNameHandler;
+
+// src/plugins/docgen-resolver.ts
+import { extname } from "node:path";
+import resolve from "resolve";
+var ReactDocgenResolveError = class extends Error {
+  constructor(filename) {
+    super(`'${filename}' was ignored by react-docgen.`);
+    // the magic string that react-docgen uses to check if a module is ignored
+    this.code = "MODULE_NOT_FOUND";
+  }
+  static {
+    __name(this, "ReactDocgenResolveError");
+  }
+};
+var RESOLVE_EXTENSIONS = [
+  ".js",
+  ".cts",
+  // These were originally not in the code, I added them
+  ".mts",
+  // These were originally not in the code, I added them
+  ".ctsx",
+  // These were originally not in the code, I added them
+  ".mtsx",
+  // These were originally not in the code, I added them
+  ".ts",
+  ".tsx",
+  ".mjs",
+  ".cjs",
+  ".mts",
+  ".cts",
+  ".jsx"
+];
+function defaultLookupModule(filename, basedir) {
+  const resolveOptions = {
+    basedir,
+    extensions: RESOLVE_EXTENSIONS,
+    // we do not need to check core modules as we cannot import them anyway
+    includeCoreModules: false
+  };
+  try {
+    return resolve.sync(filename, resolveOptions);
+  } catch (error) {
+    const ext = extname(filename);
+    let newFilename;
+    switch (ext) {
+      case ".js":
+      case ".mjs":
+      case ".cjs":
+        newFilename = `${filename.slice(0, -2)}ts`;
+        break;
+      case ".jsx":
+        newFilename = `${filename.slice(0, -3)}tsx`;
+        break;
+      default:
+        throw error;
+    }
+    return resolve.sync(newFilename, {
+      ...resolveOptions,
+      // we already know that there is an extension at this point, so no need to check other extensions
+      extensions: []
+    });
+  }
+}
+__name(defaultLookupModule, "defaultLookupModule");
+
+// src/plugins/react-docgen.ts
+var defaultHandlers = Object.values(docgenHandlers).map((handler) => handler);
+var defaultResolver = new docgenResolver.FindExportedDefinitionsResolver();
+var handlers = [...defaultHandlers, actualNameHandler_default];
+async function reactDocgen({
+  include = /\.(mjs|tsx?|jsx?)$/,
+  exclude = [/node_modules\/.*/]
+} = {}) {
+  const cwd = process.cwd();
+  const filter = createFilter(include, exclude);
+  const tsconfigPath = find.up("tsconfig.json", { cwd, last: getProjectRoot() });
+  const tsconfig = TsconfigPaths.loadConfig(tsconfigPath);
+  let matchPath;
+  if (tsconfig.resultType === "success") {
+    logger.info("Using tsconfig paths for react-docgen");
+    matchPath = TsconfigPaths.createMatchPath(tsconfig.absoluteBaseUrl, tsconfig.paths, [
+      "browser",
+      "module",
+      "main"
+    ]);
+  }
+  return {
+    name: "storybook:react-docgen-plugin",
+    enforce: "pre",
+    async transform(src, id) {
+      if (!filter(relative(cwd, id))) {
+        return;
+      }
+      try {
+        const docgenResults = parse(src, {
+          resolver: defaultResolver,
+          handlers,
+          importer: getReactDocgenImporter(matchPath),
+          filename: id
+        });
+        const s = new MagicString(src);
+        docgenResults.forEach((info) => {
+          const { actualName, definedInFile, ...docgenInfo } = info;
+          if (actualName && definedInFile == id) {
+            const docNode = JSON.stringify(docgenInfo);
+            s.append(`;${actualName}.__docgenInfo=${docNode}`);
+          }
+        });
+        return {
+          code: s.toString(),
+          map: s.generateMap({ hires: true, source: id })
+        };
+      } catch (e) {
+        if (e.code === ERROR_CODES.MISSING_DEFINITION) {
+          return;
+        }
+        throw e;
+      }
+    }
+  };
+}
+__name(reactDocgen, "reactDocgen");
+function getReactDocgenImporter(matchPath) {
+  return makeFsImporter((filename, basedir) => {
+    const mappedFilenameByPaths = (() => {
+      if (matchPath) {
+        const match = matchPath(filename);
+        return match || filename;
+      } else {
+        return filename;
+      }
+    })();
+    const result = defaultLookupModule(mappedFilenameByPaths, basedir);
+    if (result.includes(`${sep}react-native${sep}index.js`)) {
+      const replaced = result.replace(
+        `${sep}react-native${sep}index.js`,
+        `${sep}react-native-web${sep}dist${sep}index.js`
+      );
+      if (existsSync(replaced)) {
+        if (RESOLVE_EXTENSIONS.find((ext) => result.endsWith(ext))) {
+          return replaced;
+        }
+      }
+    }
+    if (RESOLVE_EXTENSIONS.find((ext) => result.endsWith(ext))) {
+      return result;
+    }
+    throw new ReactDocgenResolveError(filename);
+  });
+}
+__name(getReactDocgenImporter, "getReactDocgenImporter");
+export {
+  getReactDocgenImporter,
+  reactDocgen
+};

package/dist/index.d.ts

@@ -1,5 +1,6 @@
+export * from '@storybook/react';
 export { __definePreview as definePreview } from '@storybook/react';
-import { StorybookConfig as StorybookConfig$1, TypescriptOptions as TypescriptOptions$1, CompatibleString } from 'storybook/internal/types';
+import { StorybookConfig as StorybookConfig$1, CompatibleString, TypescriptOptions as TypescriptOptions$1 } from 'storybook/internal/types';
 import { BuilderOptions, StorybookConfigVite } from '@storybook/builder-vite';
 import docgenTypescript from '@joshwooding/vite-plugin-react-docgen-typescript';
 
@@ -30,6 +31,14 @@ type StorybookConfigFramework = {
             options: BuilderOptions;
         };
     };
+    features?: StorybookConfig$1['features'] & {
+        /**
+         * Enable the experimental `.test` function in CSF Next
+         *
+         * @see https://storybook.js.org/docs/10/api/main-config/main-config-features#experimentalTestSyntax
+         */
+        experimentalTestSyntax?: boolean;
+    };
 };
 type TypescriptOptions = TypescriptOptions$1 & {
     /**
@@ -46,4 +55,4 @@ type StorybookConfig = Omit<StorybookConfig$1, keyof StorybookConfigVite | keyof
     typescript?: Partial<TypescriptOptions>;
 };
 
-export { FrameworkOptions, StorybookConfig };
+export type { FrameworkOptions, StorybookConfig };

package/dist/index.js

@@ -1 +1,6 @@
-"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var index_exports={};__export(index_exports,{definePreview:()=>import_react.__definePreview});module.exports=__toCommonJS(index_exports);var import_react=require("@storybook/react");0&&(module.exports={definePreview});
+// src/index.ts
+export * from "@storybook/react";
+import { __definePreview } from "@storybook/react";
+export {
+  __definePreview as definePreview
+};

package/dist/node/index.d.ts

@@ -1,8 +1,57 @@
-import { StorybookConfig } from '../index.js';
-import '@storybook/react';
-import 'storybook/internal/types';
-import '@storybook/builder-vite';
-import '@joshwooding/vite-plugin-react-docgen-typescript';
+import { StorybookConfig as StorybookConfig$1, CompatibleString, TypescriptOptions as TypescriptOptions$1 } from 'storybook/internal/types';
+import { StorybookConfigVite, BuilderOptions } from '@storybook/builder-vite';
+import docgenTypescript from '@joshwooding/vite-plugin-react-docgen-typescript';
+
+type FrameworkName = CompatibleString<'@storybook/react-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 StorybookConfigFramework = {
+    framework: FrameworkName | {
+        name: FrameworkName;
+        options: FrameworkOptions;
+    };
+    core?: StorybookConfig$1['core'] & {
+        builder?: BuilderName | {
+            name: BuilderName;
+            options: BuilderOptions;
+        };
+    };
+    features?: StorybookConfig$1['features'] & {
+        /**
+         * Enable the experimental `.test` function in CSF Next
+         *
+         * @see https://storybook.js.org/docs/10/api/main-config/main-config-features#experimentalTestSyntax
+         */
+        experimentalTestSyntax?: boolean;
+    };
+};
+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>;
+};
 
 declare function defineMain(config: StorybookConfig): StorybookConfig;
 

package/dist/node/index.js

@@ -1 +1,23 @@
-"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var node_exports={};__export(node_exports,{defineMain:()=>defineMain});module.exports=__toCommonJS(node_exports);function defineMain(config){return config}0&&(module.exports={defineMain});
+import CJS_COMPAT_NODE_URL_y3pg975sggp from 'node:url';
+import CJS_COMPAT_NODE_PATH_y3pg975sggp from 'node:path';
+import CJS_COMPAT_NODE_MODULE_y3pg975sggp from "node:module";
+
+var __filename = CJS_COMPAT_NODE_URL_y3pg975sggp.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_y3pg975sggp.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_y3pg975sggp.createRequire(import.meta.url);
+
+// ------------------------------------------------------------
+// end of CJS compatibility banner, injected by Storybook's esbuild configuration
+// ------------------------------------------------------------
+import {
+  __name
+} from "../_node-chunks/chunk-IV4SM72Q.js";
+
+// src/node/index.ts
+function defineMain(config) {
+  return config;
+}
+__name(defineMain, "defineMain");
+export {
+  defineMain
+};

package/dist/preset.d.ts

@@ -1,8 +1,57 @@
-import { PresetProperty } from 'storybook/internal/types';
-import { StorybookConfig } from './index.js';
-import '@storybook/react';
-import '@storybook/builder-vite';
-import '@joshwooding/vite-plugin-react-docgen-typescript';
+import { StorybookConfig as StorybookConfig$1, CompatibleString, TypescriptOptions as TypescriptOptions$1, PresetProperty } from 'storybook/internal/types';
+import { StorybookConfigVite, BuilderOptions } from '@storybook/builder-vite';
+import docgenTypescript from '@joshwooding/vite-plugin-react-docgen-typescript';
+
+type FrameworkName = CompatibleString<'@storybook/react-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 StorybookConfigFramework = {
+    framework: FrameworkName | {
+        name: FrameworkName;
+        options: FrameworkOptions;
+    };
+    core?: StorybookConfig$1['core'] & {
+        builder?: BuilderName | {
+            name: BuilderName;
+            options: BuilderOptions;
+        };
+    };
+    features?: StorybookConfig$1['features'] & {
+        /**
+         * Enable the experimental `.test` function in CSF Next
+         *
+         * @see https://storybook.js.org/docs/10/api/main-config/main-config-features#experimentalTestSyntax
+         */
+        experimentalTestSyntax?: boolean;
+    };
+};
+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>;
+};
 
 declare const core: PresetProperty<'core'>;
 declare const viteFinal: NonNullable<StorybookConfig['viteFinal']>;

package/dist/preset.js

@@ -1 +1,57 @@
-"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 __esm=(fn,res)=>function(){return fn&&(res=(0,fn[__getOwnPropNames(fn)[0]])(fn=0)),res};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 import_react_docgen,getNameOrValue,isReactForwardRefCall,actualNameHandler,actualNameHandler_default,init_actualNameHandler=__esm({"src/plugins/docgen-handlers/actualNameHandler.ts"(){"use strict";import_react_docgen=require("react-docgen"),{getNameOrValue,isReactForwardRefCall}=import_react_docgen.utils,actualNameHandler=function(documentation,componentDefinition){if(documentation.set("definedInFile",componentDefinition.hub.file.opts.filename),(componentDefinition.isClassDeclaration()||componentDefinition.isFunctionDeclaration())&&componentDefinition.has("id"))documentation.set("actualName",getNameOrValue(componentDefinition.get("id")));else if(componentDefinition.isArrowFunctionExpression()||componentDefinition.isFunctionExpression()||isReactForwardRefCall(componentDefinition)){let currentPath=componentDefinition;for(;currentPath.parentPath;){if(currentPath.parentPath.isVariableDeclarator()){documentation.set("actualName",getNameOrValue(currentPath.parentPath.get("id")));return}if(currentPath.parentPath.isAssignmentExpression()){let leftPath=currentPath.parentPath.get("left");if(leftPath.isIdentifier()||leftPath.isLiteral()){documentation.set("actualName",getNameOrValue(leftPath));return}}currentPath=currentPath.parentPath}documentation.set("actualName","")}},actualNameHandler_default=actualNameHandler}});function defaultLookupModule(filename,basedir){let resolveOptions={basedir,extensions:RESOLVE_EXTENSIONS,includeCoreModules:!1};try{return import_resolve.default.sync(filename,resolveOptions)}catch(error){let ext=(0,import_node_path.extname)(filename),newFilename;switch(ext){case".js":case".mjs":case".cjs":newFilename=`${filename.slice(0,-2)}ts`;break;case".jsx":newFilename=`${filename.slice(0,-3)}tsx`;break;default:throw error}return import_resolve.default.sync(newFilename,{...resolveOptions,extensions:[]})}}var import_node_path,import_resolve,ReactDocgenResolveError,RESOLVE_EXTENSIONS,init_docgen_resolver=__esm({"src/plugins/docgen-resolver.ts"(){"use strict";import_node_path=require("path"),import_resolve=__toESM(require("resolve")),ReactDocgenResolveError=class extends Error{constructor(filename){super(`'${filename}' was ignored by react-docgen.`);this.code="MODULE_NOT_FOUND"}},RESOLVE_EXTENSIONS=[".js",".cts",".mts",".ctsx",".mtsx",".ts",".tsx",".mjs",".cjs",".mts",".cts",".jsx"]}});var react_docgen_exports={};__export(react_docgen_exports,{getReactDocgenImporter:()=>getReactDocgenImporter,reactDocgen:()=>reactDocgen});async function reactDocgen({include=/\.(mjs|tsx?|jsx?)$/,exclude=[/node_modules\/.*/]}={}){let cwd=process.cwd(),filter=(0,import_pluginutils.createFilter)(include,exclude),tsconfigPath=await(0,import_find_up.default)("tsconfig.json",{cwd}),tsconfig=TsconfigPaths.loadConfig(tsconfigPath),matchPath;return tsconfig.resultType==="success"&&(import_node_logger.logger.info("Using tsconfig paths for react-docgen"),matchPath=TsconfigPaths.createMatchPath(tsconfig.absoluteBaseUrl,tsconfig.paths,["browser","module","main"])),{name:"storybook:react-docgen-plugin",enforce:"pre",async transform(src,id){if(filter((0,import_node_path2.relative)(cwd,id)))try{let docgenResults=(0,import_react_docgen2.parse)(src,{resolver:defaultResolver,handlers,importer:getReactDocgenImporter(matchPath),filename:id}),s=new import_magic_string.default(src);return docgenResults.forEach(info=>{let{actualName,definedInFile,...docgenInfo}=info;if(actualName&&definedInFile==id){let docNode=JSON.stringify(docgenInfo);s.append(`;${actualName}.__docgenInfo=${docNode}`)}}),{code:s.toString(),map:s.generateMap({hires:!0,source:id})}}catch(e){if(e.code===import_react_docgen2.ERROR_CODES.MISSING_DEFINITION)return;throw e}}}}function getReactDocgenImporter(matchPath){return(0,import_react_docgen2.makeFsImporter)((filename,basedir)=>{let mappedFilenameByPaths=matchPath&&matchPath(filename)||filename,result=defaultLookupModule(mappedFilenameByPaths,basedir);if(result.includes(`${import_node_path2.sep}react-native${import_node_path2.sep}index.js`)){let replaced=result.replace(`${import_node_path2.sep}react-native${import_node_path2.sep}index.js`,`${import_node_path2.sep}react-native-web${import_node_path2.sep}dist${import_node_path2.sep}index.js`);if((0,import_node_fs.existsSync)(replaced)&&RESOLVE_EXTENSIONS.find(ext=>result.endsWith(ext)))return replaced}if(RESOLVE_EXTENSIONS.find(ext=>result.endsWith(ext)))return result;throw new ReactDocgenResolveError(filename)})}var import_node_fs,import_node_path2,import_node_logger,import_pluginutils,import_find_up,import_magic_string,import_react_docgen2,TsconfigPaths,defaultHandlers,defaultResolver,handlers,init_react_docgen=__esm({"src/plugins/react-docgen.ts"(){"use strict";import_node_fs=require("fs"),import_node_path2=require("path"),import_node_logger=require("storybook/internal/node-logger"),import_pluginutils=require("@rollup/pluginutils"),import_find_up=__toESM(require("find-up")),import_magic_string=__toESM(require("magic-string")),import_react_docgen2=require("react-docgen"),TsconfigPaths=__toESM(require("tsconfig-paths"));init_actualNameHandler();init_docgen_resolver();defaultHandlers=Object.values(import_react_docgen2.builtinHandlers).map(handler=>handler),defaultResolver=new import_react_docgen2.builtinResolvers.FindExportedDefinitionsResolver,handlers=[...defaultHandlers,actualNameHandler_default]}});var preset_exports={};__export(preset_exports,{core:()=>core,viteFinal:()=>viteFinal});module.exports=__toCommonJS(preset_exports);var import_node_path3=require("path"),getAbsolutePath=input=>(0,import_node_path3.dirname)(require.resolve((0,import_node_path3.join)(input,"package.json"))),core={builder:getAbsolutePath("@storybook/builder-vite"),renderer:getAbsolutePath("@storybook/react")},viteFinal=async(config,{presets})=>{let plugins=[...config?.plugins??[]],{reactDocgen:reactDocgenOption,reactDocgenTypescriptOptions}=await presets.apply("typescript",{}),typescriptPresent;try{require.resolve("typescript"),typescriptPresent=!0}catch{typescriptPresent=!1}if(reactDocgenOption==="react-docgen-typescript"&&typescriptPresent&&plugins.push(require("@joshwooding/vite-plugin-react-docgen-typescript")({...reactDocgenTypescriptOptions,savePropValueAsString:!0})),typeof reactDocgenOption=="string"){let{reactDocgen:reactDocgen2}=await Promise.resolve().then(()=>(init_react_docgen(),react_docgen_exports));plugins.unshift(await reactDocgen2({include:reactDocgenOption==="react-docgen"?/\.(mjs|tsx?|jsx?)$/:/\.(mjs|jsx?)$/}))}return{...config,plugins}};0&&(module.exports={core,viteFinal});
+import CJS_COMPAT_NODE_URL_y3pg975sggp from 'node:url';
+import CJS_COMPAT_NODE_PATH_y3pg975sggp from 'node:path';
+import CJS_COMPAT_NODE_MODULE_y3pg975sggp from "node:module";
+
+var __filename = CJS_COMPAT_NODE_URL_y3pg975sggp.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_y3pg975sggp.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_y3pg975sggp.createRequire(import.meta.url);
+
+// ------------------------------------------------------------
+// end of CJS compatibility banner, injected by Storybook's esbuild configuration
+// ------------------------------------------------------------
+import {
+  __name
+} from "./_node-chunks/chunk-IV4SM72Q.js";
+
+// src/preset.ts
+var core = {
+  builder: import.meta.resolve("@storybook/builder-vite"),
+  renderer: import.meta.resolve("@storybook/react/preset")
+};
+var viteFinal = /* @__PURE__ */ __name(async (config, { presets }) => {
+  const plugins = [...config?.plugins ?? []];
+  const { reactDocgen: reactDocgenOption, reactDocgenTypescriptOptions } = await presets.apply(
+    "typescript",
+    {}
+  );
+  let typescriptPresent;
+  try {
+    import.meta.resolve("typescript");
+    typescriptPresent = true;
+  } catch (e) {
+    typescriptPresent = false;
+  }
+  if (reactDocgenOption === "react-docgen-typescript" && typescriptPresent) {
+    plugins.push(
+      (await import("@joshwooding/vite-plugin-react-docgen-typescript")).default({
+        ...reactDocgenTypescriptOptions,
+        // We *need* this set so that RDT returns default values in the same format as react-docgen
+        savePropValueAsString: true
+      })
+    );
+  }
+  if (typeof reactDocgenOption === "string") {
+    const { reactDocgen } = await import("./_node-chunks/react-docgen-ARJA47DN.js");
+    plugins.unshift(
+      // If react-docgen is specified, use it for everything, otherwise only use it for non-typescript files
+      await reactDocgen({
+        include: reactDocgenOption === "react-docgen" ? /\.(mjs|tsx?|jsx?)$/ : /\.(mjs|jsx?)$/
+      })
+    );
+  }
+  return { ...config, plugins };
+}, "viteFinal");
+export {
+  core,
+  viteFinal
+};

package/package.json

@@ -1,9 +1,14 @@
 {
   "name": "@storybook/react-vite",
-  "version": "8.6.14",
-  "description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.",
+  "version": "10.0.4",
+  "description": "Storybook for React and Vite: Develop, document, and test UI components in isolation",
   "keywords": [
-    "storybook"
+    "storybook",
+    "storybook-framework",
+    "react",
+    "vite",
+    "component",
+    "components"
   ],
   "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/react-vite",
   "bugs": {
@@ -19,93 +24,58 @@
     "url": "https://opencollective.com/storybook"
   },
   "license": "MIT",
+  "type": "module",
   "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"
+      "default": "./dist/index.js"
     },
     "./node": {
       "types": "./dist/node/index.d.ts",
-      "node": "./dist/node/index.js",
-      "import": "./dist/node/index.mjs",
-      "require": "./dist/node/index.js"
+      "default": "./dist/node/index.js"
     },
-    "./package.json": "./package.json"
-  },
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
-  "typesVersions": {
-    "*": {
-      "*": [
-        "dist/index.d.ts"
-      ],
-      "preset": [
-        "dist/preset.d.ts"
-      ],
-      "node": [
-        "dist/node/index.d.ts"
-      ]
+    "./package.json": "./package.json",
+    "./preset": {
+      "types": "./dist/preset.d.ts",
+      "default": "./dist/preset.js"
     }
   },
   "files": [
     "dist/**/*",
+    "template/**/*",
     "README.md",
     "*.js",
     "*.d.ts",
     "!src/**/*"
   ],
   "scripts": {
-    "check": "jiti ../../../scripts/prepare/check.ts",
-    "prep": "jiti ../../../scripts/prepare/bundle.ts"
+    "check": "jiti ../../../scripts/check/check-package.ts",
+    "prep": "jiti ../../../scripts/build/build-package.ts"
   },
   "dependencies": {
-    "@joshwooding/vite-plugin-react-docgen-typescript": "0.5.0",
+    "@joshwooding/vite-plugin-react-docgen-typescript": "0.6.1",
     "@rollup/pluginutils": "^5.0.2",
-    "@storybook/builder-vite": "8.6.14",
-    "@storybook/react": "8.6.14",
-    "find-up": "^5.0.0",
+    "@storybook/builder-vite": "10.0.4",
+    "@storybook/react": "10.0.4",
+    "empathic": "^2.0.0",
     "magic-string": "^0.30.0",
-    "react-docgen": "^7.0.0",
+    "react-docgen": "^8.0.0",
     "resolve": "^1.22.8",
     "tsconfig-paths": "^4.2.0"
   },
   "devDependencies": {
     "@types/node": "^22.0.0",
-    "typescript": "^5.7.3",
-    "vite": "^4.0.0"
+    "typescript": "^5.8.3",
+    "vite": "^7.0.4"
   },
   "peerDependencies": {
-    "@storybook/test": "8.6.14",
-    "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",
-    "storybook": "^8.6.14",
-    "vite": "^4.0.0 || ^5.0.0 || ^6.0.0"
-  },
-  "peerDependenciesMeta": {
-    "@storybook/test": {
-      "optional": true
-    }
-  },
-  "engines": {
-    "node": ">=18.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "storybook": "^10.0.4",
+    "vite": "^5.0.0 || ^6.0.0 || ^7.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "bundler": {
-    "entries": [
-      "./src/index.ts",
-      "./src/preset.ts",
-      "./src/node/index.ts"
-    ],
-    "platform": "node"
-  },
-  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16"
+  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae16"
 }

package/preset.js

@@ -1 +1 @@
-module.exports = require('./dist/preset');
+export * from './dist/preset.js';

package/template/cli/.eslintrc.json

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "import/extensions": "off"
+  }
+}

package/template/cli/js/Button.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+
+import './button.css';
+
+/** Primary UI component for user interaction */
+export const Button = ({
+  primary = false,
+  backgroundColor = null,
+  size = 'medium',
+  label,
+  ...props
+}) => {
+  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  return (
+    <button
+      type="button"
+      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      style={backgroundColor && { backgroundColor }}
+      {...props}
+    >
+      {label}
+    </button>
+  );
+};
+
+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 */
+  onClick: PropTypes.func,
+};

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

@@ -0,0 +1,49 @@
+import { fn } from 'storybook/test';
+
+import { Button } from './Button';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+export default {
+  title: 'Example/Button',
+  component: Button,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#story-args
+  args: { onClick: fn() },
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+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,56 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+
+import { Button } from './Button';
+import './header.css';
+
+export const Header = ({ user = null, onLogin, onLogout, onCreateAccount }) => (
+  <header>
+    <div className="storybook-header">
+      <div>
+        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+          <g fill="none" fillRule="evenodd">
+            <path
+              d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
+              fill="#FFF"
+            />
+            <path
+              d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
+              fill="#555AB9"
+            />
+            <path
+              d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
+              fill="#91BAF8"
+            />
+          </g>
+        </svg>
+        <h1>Acme</h1>
+      </div>
+      <div>
+        {user ? (
+          <>
+            <span className="welcome">
+              Welcome, <b>{user.name}</b>!
+            </span>
+            <Button size="small" onClick={onLogout} label="Log out" />
+          </>
+        ) : (
+          <>
+            <Button size="small" onClick={onLogin} label="Log in" />
+            <Button primary size="small" onClick={onCreateAccount} label="Sign up" />
+          </>
+        )}
+      </div>
+    </div>
+  </header>
+);
+
+Header.propTypes = {
+  user: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+  }),
+  onLogin: PropTypes.func.isRequired,
+  onLogout: PropTypes.func.isRequired,
+  onCreateAccount: PropTypes.func.isRequired,
+};

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

@@ -0,0 +1,29 @@
+import { fn } from 'storybook/test';
+
+import { Header } from './Header';
+
+export default {
+  title: 'Example/Header',
+  component: Header,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    layout: 'fullscreen',
+  },
+  args: {
+    onLogin: fn(),
+    onLogout: fn(),
+    onCreateAccount: fn(),
+  },
+};
+
+export const LoggedIn = {
+  args: {
+    user: {
+      name: 'Jane Doe',
+    },
+  },
+};
+
+export const LoggedOut = {};

package/template/cli/js/Page.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+
+import { Header } from './Header';
+import './page.css';
+
+export const Page = () => {
+  const [user, setUser] = React.useState();
+
+  return (
+    <article>
+      <Header
+        user={user}
+        onLogin={() => setUser({ name: 'Jane Doe' })}
+        onLogout={() => setUser(undefined)}
+        onCreateAccount={() => setUser({ name: 'Jane Doe' })}
+      />
+
+      <section className="storybook-page">
+        <h2>Pages in Storybook</h2>
+        <p>
+          We recommend building UIs with a{' '}
+          <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
+            <strong>component-driven</strong>
+          </a>{' '}
+          process starting with atomic components and ending with pages.
+        </p>
+        <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:
+        </p>
+        <ul>
+          <li>
+            Use a higher-level connected component. Storybook helps you compose such data from the
+            "args" of child component stories
+          </li>
+          <li>
+            Assemble data in the page component from your services. You can mock these services out
+            using Storybook.
+          </li>
+        </ul>
+        <p>
+          Get a guided tutorial on component-driven development at{' '}
+          <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
+            Storybook tutorials
+          </a>
+          . Read more in the{' '}
+          <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">
+            docs
+          </a>
+          .
+        </p>
+        <div className="tip-wrapper">
+          <span className="tip">Tip</span> Adjust the width of the canvas with the{' '}
+          <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+            <g fill="none" fillRule="evenodd">
+              <path
+                d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
+                id="a"
+                fill="#999"
+              />
+            </g>
+          </svg>
+          Viewports addon in the toolbar
+        </div>
+      </section>
+    </article>
+  );
+};

package/template/cli/js/Page.stories.js

@@ -0,0 +1,28 @@
+import { expect, userEvent, within } from 'storybook/test';
+
+import { Page } from './Page';
+
+export default {
+  title: 'Example/Page',
+  component: Page,
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    layout: 'fullscreen',
+  },
+};
+
+export const LoggedOut = {};
+
+// More on component testing: https://storybook.js.org/docs/writing-tests/interaction-testing
+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);
+    await expect(loginButton).not.toBeInTheDocument();
+
+    const logoutButton = canvas.getByRole('button', { name: /Log out/i });
+    await expect(logoutButton).toBeInTheDocument();
+  },
+};

package/template/cli/ts/Button.stories.ts

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { fn } from 'storybook/test';
+
+import { Button } from './Button';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Example/Button',
+  component: Button,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#story-args
+  args: { onClick: fn() },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+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/Button.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import './button.css';
+
+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 */
+  onClick?: () => void;
+}
+
+/** Primary UI component for user interaction */
+export const Button = ({
+  primary = false,
+  size = 'medium',
+  backgroundColor,
+  label,
+  ...props
+}: ButtonProps) => {
+  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  return (
+    <button
+      type="button"
+      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      style={{ backgroundColor }}
+      {...props}
+    >
+      {label}
+    </button>
+  );
+};

package/template/cli/ts/Header.stories.ts

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { fn } from 'storybook/test';
+
+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'],
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    layout: 'fullscreen',
+  },
+  args: {
+    onLogin: fn(),
+    onLogout: fn(),
+    onCreateAccount: fn(),
+  },
+} satisfies Meta<typeof Header>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const LoggedIn: Story = {
+  args: {
+    user: {
+      name: 'Jane Doe',
+    },
+  },
+};
+
+export const LoggedOut: Story = {};

package/template/cli/ts/Header.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+import { Button } from './Button';
+import './header.css';
+
+type User = {
+  name: string;
+};
+
+export interface HeaderProps {
+  user?: User;
+  onLogin?: () => void;
+  onLogout?: () => void;
+  onCreateAccount?: () => void;
+}
+
+export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
+  <header>
+    <div className="storybook-header">
+      <div>
+        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+          <g fill="none" fillRule="evenodd">
+            <path
+              d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
+              fill="#FFF"
+            />
+            <path
+              d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
+              fill="#555AB9"
+            />
+            <path
+              d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
+              fill="#91BAF8"
+            />
+          </g>
+        </svg>
+        <h1>Acme</h1>
+      </div>
+      <div>
+        {user ? (
+          <>
+            <span className="welcome">
+              Welcome, <b>{user.name}</b>!
+            </span>
+            <Button size="small" onClick={onLogout} label="Log out" />
+          </>
+        ) : (
+          <>
+            <Button size="small" onClick={onLogin} label="Log in" />
+            <Button primary size="small" onClick={onCreateAccount} label="Sign up" />
+          </>
+        )}
+      </div>
+    </div>
+  </header>
+);

package/template/cli/ts/Page.stories.ts

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { expect, userEvent, within } from 'storybook/test';
+
+import { Page } from './Page';
+
+const meta = {
+  title: 'Example/Page',
+  component: Page,
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof Page>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const LoggedOut: Story = {};
+
+// More on component testing: https://storybook.js.org/docs/writing-tests/interaction-testing
+export const LoggedIn: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const loginButton = canvas.getByRole('button', { name: /Log in/i });
+    await expect(loginButton).toBeInTheDocument();
+    await userEvent.click(loginButton);
+    await expect(loginButton).not.toBeInTheDocument();
+
+    const logoutButton = canvas.getByRole('button', { name: /Log out/i });
+    await expect(logoutButton).toBeInTheDocument();
+  },
+};

package/template/cli/ts/Page.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+
+import { Header } from './Header';
+import './page.css';
+
+type User = {
+  name: string;
+};
+
+export const Page: React.FC = () => {
+  const [user, setUser] = React.useState<User>();
+
+  return (
+    <article>
+      <Header
+        user={user}
+        onLogin={() => setUser({ name: 'Jane Doe' })}
+        onLogout={() => setUser(undefined)}
+        onCreateAccount={() => setUser({ name: 'Jane Doe' })}
+      />
+
+      <section className="storybook-page">
+        <h2>Pages in Storybook</h2>
+        <p>
+          We recommend building UIs with a{' '}
+          <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
+            <strong>component-driven</strong>
+          </a>{' '}
+          process starting with atomic components and ending with pages.
+        </p>
+        <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:
+        </p>
+        <ul>
+          <li>
+            Use a higher-level connected component. Storybook helps you compose such data from the
+            "args" of child component stories
+          </li>
+          <li>
+            Assemble data in the page component from your services. You can mock these services out
+            using Storybook.
+          </li>
+        </ul>
+        <p>
+          Get a guided tutorial on component-driven development at{' '}
+          <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
+            Storybook tutorials
+          </a>
+          . Read more in the{' '}
+          <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">
+            docs
+          </a>
+          .
+        </p>
+        <div className="tip-wrapper">
+          <span className="tip">Tip</span> Adjust the width of the canvas with the{' '}
+          <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+            <g fill="none" fillRule="evenodd">
+              <path
+                d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
+                id="a"
+                fill="#999"
+              />
+            </g>
+          </svg>
+          Viewports addon in the toolbar
+        </div>
+      </section>
+    </article>
+  );
+};

package/dist/index.mjs

@@ -1 +0,0 @@
-export { __definePreview as definePreview } from '@storybook/react';

package/dist/node/index.mjs

@@ -1,3 +0,0 @@
-function defineMain(config){return config}
-
-export { defineMain };