@storybook/html 8.0.0-alpha.1 → 8.0.0-alpha.11

package/dist/entry-preview-docs.js

@@ -1 +1 @@
-"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 entry_preview_docs_exports={};__export(entry_preview_docs_exports,{argTypesEnhancers:()=>argTypesEnhancers,decorators:()=>decorators,parameters:()=>parameters});module.exports=__toCommonJS(entry_preview_docs_exports);var import_docs_tools2=require("@storybook/docs-tools");var import_docs_tools=require("@storybook/docs-tools"),import_preview_api=require("@storybook/preview-api");function skipSourceRender(context){var _a;let sourceParams=(_a=context==null?void 0:context.parameters.docs)==null?void 0:_a.source,isArgsStory=context==null?void 0:context.parameters.__isArgsStory;return(sourceParams==null?void 0:sourceParams.type)===import_docs_tools.SourceType.DYNAMIC?!1:!isArgsStory||(sourceParams==null?void 0:sourceParams.code)||(sourceParams==null?void 0:sourceParams.type)===import_docs_tools.SourceType.CODE}var sourceDecorator=(storyFn,context)=>{var _a,_b;let story=storyFn(),renderedForSource=(_b=(_a=context==null?void 0:context.parameters.docs)==null?void 0:_a.source)!=null&&_b.excludeDecorators?context.originalStoryFn(context.args,context):story,source;return skipSourceRender(context)||(typeof renderedForSource=="string"?source=renderedForSource:renderedForSource instanceof Element&&(source=renderedForSource.outerHTML)),(0,import_preview_api.useEffect)(()=>{let{id,unmappedArgs}=context;source&&import_preview_api.addons.getChannel().emit(import_docs_tools.SNIPPET_RENDERED,{id,args:unmappedArgs,source})}),story};var decorators=[sourceDecorator],parameters={docs:{story:{inline:!0},source:{type:import_docs_tools2.SourceType.DYNAMIC,language:"html",code:void 0,excludeDecorators:void 0}}},argTypesEnhancers=[import_docs_tools2.enhanceArgTypes];0&&(module.exports={argTypesEnhancers,decorators,parameters});
+"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 entry_preview_docs_exports={};__export(entry_preview_docs_exports,{argTypesEnhancers:()=>argTypesEnhancers,decorators:()=>decorators,parameters:()=>parameters});module.exports=__toCommonJS(entry_preview_docs_exports);var import_docs_tools2=require("@storybook/docs-tools");var import_docs_tools=require("@storybook/docs-tools"),import_preview_api=require("@storybook/preview-api");function skipSourceRender(context){let sourceParams=context?.parameters.docs?.source,isArgsStory=context?.parameters.__isArgsStory;return sourceParams?.type===import_docs_tools.SourceType.DYNAMIC?!1:!isArgsStory||sourceParams?.code||sourceParams?.type===import_docs_tools.SourceType.CODE}var sourceDecorator=(storyFn,context)=>{let story=storyFn(),renderedForSource=context?.parameters.docs?.source?.excludeDecorators?context.originalStoryFn(context.args,context):story,source;return skipSourceRender(context)||(typeof renderedForSource=="string"?source=renderedForSource:renderedForSource instanceof Element&&(source=renderedForSource.outerHTML)),(0,import_preview_api.useEffect)(()=>{let{id,unmappedArgs}=context;source&&import_preview_api.addons.getChannel().emit(import_docs_tools.SNIPPET_RENDERED,{id,args:unmappedArgs,source})}),story};var decorators=[sourceDecorator],parameters={docs:{story:{inline:!0},source:{type:import_docs_tools2.SourceType.DYNAMIC,language:"html",code:void 0,excludeDecorators:void 0}}},argTypesEnhancers=[import_docs_tools2.enhanceArgTypes];0&&(module.exports={argTypesEnhancers,decorators,parameters});

package/dist/index.d.ts

@@ -16,24 +16,14 @@ type Meta<TArgs = Args> = ComponentAnnotations<HtmlRenderer, TArgs>;
  */
 type StoryFn<TArgs = Args> = AnnotatedStoryFn<HtmlRenderer, TArgs>;
 /**
- * Story function that represents a CSFv3 component example.
+ * Story object that represents a CSFv3 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
 type StoryObj<TArgs = Args> = StoryAnnotations<HtmlRenderer, TArgs>;
-/**
- * @deprecated Use `StoryFn` instead.
- * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories.
- * You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
- *
- * Story function that represents a CSFv2 component example.
- *
- * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
- */
-type Story<TArgs = Args> = StoryFn<TArgs>;
 type Decorator<TArgs = StrictArgs> = DecoratorFunction<HtmlRenderer, TArgs>;
 type Loader<TArgs = StrictArgs> = LoaderFunction<HtmlRenderer, TArgs>;
 type StoryContext<TArgs = StrictArgs> = StoryContext$1<HtmlRenderer, TArgs>;
 type Preview = ProjectAnnotations<HtmlRenderer>;
 
-export { Decorator, HtmlRenderer, Loader, Meta, Preview, Story, StoryContext, StoryFn, StoryObj };
+export { Decorator, HtmlRenderer, Loader, Meta, Preview, StoryContext, StoryFn, StoryObj };

package/dist/index.js

@@ -1 +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);var import_global=require("@storybook/global"),{window:globalWindow}=import_global.global;globalWindow.STORYBOOK_ENV="HTML";var _a;typeof module<"u"&&((_a=module==null?void 0:module.hot)==null||_a.decline());
+"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);var import_global=require("@storybook/global"),{window:globalWindow}=import_global.global;globalWindow.STORYBOOK_ENV="HTML";typeof module<"u"&&module?.hot?.decline();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/html",
-  "version": "8.0.0-alpha.1",
+  "version": "8.0.0-alpha.11",
   "description": "Storybook HTML renderer",
   "keywords": [
     "storybook"
@@ -47,20 +47,17 @@
     "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/docs-tools": "8.0.0-alpha.1",
+    "@storybook/docs-tools": "8.0.0-alpha.11",
     "@storybook/global": "^5.0.0",
-    "@storybook/preview-api": "8.0.0-alpha.1",
-    "@storybook/types": "8.0.0-alpha.1",
+    "@storybook/preview-api": "8.0.0-alpha.11",
+    "@storybook/types": "8.0.0-alpha.11",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
     "typescript": "^5.3.2"
   },
-  "peerDependencies": {
-    "@babel/core": "*"
-  },
   "engines": {
-    "node": ">=16.0.0"
+    "node": ">=18.0.0"
   },
   "publishConfig": {
     "access": "public"

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

@@ -1,3 +1,4 @@
+import { fn } from '@storybook/test';
 import { createButton } from './Button';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
@@ -19,6 +20,8 @@ export default {
       options: ['small', 'medium', 'large'],
     },
   },
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: { onClick: fn() },
 };
 
 // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args

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

@@ -1,4 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/html';
+import { fn } from '@storybook/test';
 import type { ButtonProps } from './Button';
 import { createButton } from './Button';
 
@@ -21,6 +22,8 @@ const meta: Meta<ButtonProps> = {
       options: ['small', 'medium', 'large'],
     },
   },
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: { onClick: fn() },
 };
 
 export default meta;

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

@@ -3,9 +3,9 @@ import { createButton } from './Button';
 
 export interface HeaderProps {
   user?: { name: string };
-  onLogin: () => void;
-  onLogout: () => void;
-  onCreateAccount: () => void;
+  onLogin?: () => void;
+  onLogout?: () => void;
+  onCreateAccount?: () => void;
 }
 
 export const createHeader = ({ user, onLogout, onLogin, onCreateAccount }: HeaderProps) => {

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

@@ -1,4 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/html';
+import { fn } from '@storybook/test';
 import type { ButtonProps } from './Button';
 import { createButton } from './Button';
 
@@ -21,6 +22,8 @@ const meta = {
       options: ['small', 'medium', 'large'],
     },
   },
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: { onClick: fn() },
 } satisfies Meta<ButtonProps>;
 
 export default meta;

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

@@ -3,9 +3,9 @@ import { createButton } from './Button';
 
 export interface HeaderProps {
   user?: { name: string };
-  onLogin: () => void;
-  onLogout: () => void;
-  onCreateAccount: () => void;
+  onLogin?: () => void;
+  onLogout?: () => void;
+  onCreateAccount?: () => void;
 }
 
 export const createHeader = ({ user, onLogout, onLogin, onCreateAccount }: HeaderProps) => {

package/template/components/Button.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-undef */
 export const Button = (args) => {
   const button = document.createElement('button');
 

package/template/components/Form.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-undef */
 export const Form = ({ onSuccess }) => {
   const container = document.createElement('div');
 

package/template/components/Pre.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-undef */
 export const Pre = (args) => {
   const pre = document.createElement('pre');
 

package/jest.config.js

@@ -1,7 +0,0 @@
-const path = require('path');
-const baseConfig = require('../../jest.config.browser');
-
-module.exports = {
-  ...baseConfig,
-  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
-};