@storybook/react - npm Package Compare versions

Comparing version 7.0.0 to 7.6.8

dist/index.d.ts

 import * as _storybook_types from '@storybook/types';
-import { Addon_ClientStoryApi, Addon_Loadable, Args, ComponentAnnotations, AnnotatedStoryFn, ArgsStoryFn, ArgsFromMeta, StoryAnnotations, DecoratorFunction, StrictArgs, LoaderFunction, StoryContext as StoryContext$1, ProjectAnnotations, ComposedStory, Store_CSFExports, StoriesWithPartialProps } from '@storybook/types';
+import { Addon_ClientStoryApi, Addon_Loadable, Args, ComponentAnnotations, AnnotatedStoryFn, ArgsStoryFn, ArgsFromMeta, StoryAnnotations, DecoratorFunction, StrictArgs, LoaderFunction, StoryContext as StoryContext$1, ProjectAnnotations, StoryAnnotationsOrFn, Store_CSFExports, StoriesWithPartialProps } from '@storybook/types';
 export { ArgTypes, Args, Parameters, StrictArgs } from '@storybook/types';
-import { R as ReactRenderer } from './types-0a347bb9.js';
+import { R as ReactRenderer } from './types-0fc72a6d.js';
 import { ComponentType, ComponentProps, JSXElementConstructor } from 'react';
@@ -24,3 +24,3 @@ import { Simplify, SetOptional } from 'type-fest';
  */
-type Meta<TCmpOrArgs = Args> = TCmpOrArgs extends ComponentType<any> ? ComponentAnnotations<ReactRenderer, ComponentProps<TCmpOrArgs>> : ComponentAnnotations<ReactRenderer, TCmpOrArgs>;
+type Meta<TCmpOrArgs = Args> = [TCmpOrArgs] extends [ComponentType<any>] ? ComponentAnnotations<ReactRenderer, ComponentProps<TCmpOrArgs>> : ComponentAnnotations<ReactRenderer, TCmpOrArgs>;
 /**
@@ -31,3 +31,3 @@ * Story function that represents a CSFv2 component example.
  */
-type StoryFn<TCmpOrArgs = Args> = TCmpOrArgs extends ComponentType<any> ? AnnotatedStoryFn<ReactRenderer, ComponentProps<TCmpOrArgs>> : AnnotatedStoryFn<ReactRenderer, TCmpOrArgs>;
+type StoryFn<TCmpOrArgs = Args> = [TCmpOrArgs] extends [ComponentType<any>] ? AnnotatedStoryFn<ReactRenderer, ComponentProps<TCmpOrArgs>> : AnnotatedStoryFn<ReactRenderer, TCmpOrArgs>;
 /**
@@ -38,7 +38,14 @@ * Story function that represents a CSFv3 component example.
  */
-type StoryObj<TMetaOrCmpOrArgs = Args> = TMetaOrCmpOrArgs extends {
-    render?: ArgsStoryFn<ReactRenderer, any>;
-    component?: infer Component;
-    args?: infer DefaultArgs;
-} ? Simplify<(Component extends ComponentType<any> ? ComponentProps<Component> : unknown) & ArgsFromMeta<ReactRenderer, TMetaOrCmpOrArgs>> extends infer TArgs ? StoryAnnotations<ReactRenderer, TArgs, SetOptional<TArgs, keyof TArgs & keyof (DefaultArgs & ActionArgs<TArgs>)>> : never : TMetaOrCmpOrArgs extends ComponentType<any> ? StoryAnnotations<ReactRenderer, ComponentProps<TMetaOrCmpOrArgs>> : StoryAnnotations<ReactRenderer, TMetaOrCmpOrArgs>;
+type StoryObj<TMetaOrCmpOrArgs = Args> = [TMetaOrCmpOrArgs] extends [
+    {
+        render?: ArgsStoryFn<ReactRenderer, any>;
+        component?: infer Component;
+        args?: infer DefaultArgs;
+    }
+] ? Simplify<(Component extends ComponentType<any> ? ComponentProps<Component> : unknown) & ArgsFromMeta<ReactRenderer, TMetaOrCmpOrArgs>> extends infer TArgs ? StoryAnnotations<ReactRenderer, AddMocks<TArgs, DefaultArgs>, SetOptional<TArgs, keyof TArgs & keyof (DefaultArgs & ActionArgs<TArgs>)>> : never : TMetaOrCmpOrArgs extends ComponentType<any> ? StoryAnnotations<ReactRenderer, ComponentProps<TMetaOrCmpOrArgs>> : StoryAnnotations<ReactRenderer, TMetaOrCmpOrArgs>;
+type AddMocks<TArgs, DefaultArgs> = Simplify<{
+    [T in keyof TArgs]: T extends keyof DefaultArgs ? DefaultArgs[T] extends (...args: any) => any & {
+        mock: {};
+    } ? DefaultArgs[T] : TArgs[T] : TArgs[T];
+}>;
 type ActionArgs<TArgs> = {
@@ -122,3 +129,3 @@ [P in keyof TArgs as TArgs[P] extends (...args: any[]) => any ? ((...args: any[]) => void) extends TArgs[P] ? P : never : never]: TArgs[P];
  * import { setProjectAnnotations } from '@storybook/react';
- * import * as projectAnnotations from './.storybook/preview';
+ * import projectAnnotations from './.storybook/preview';
  *
@@ -128,3 +135,3 @@ * setProjectAnnotations(projectAnnotations);
  *
- * @param projectAnnotations - e.g. (import * as projectAnnotations from '../.storybook/preview')
+ * @param projectAnnotations - e.g. (import projectAnnotations from '../.storybook/preview')
  */
@@ -164,3 +171,3 @@ declare function setProjectAnnotations(projectAnnotations: ProjectAnnotations<ReactRenderer> | ProjectAnnotations<ReactRenderer>[]): void;
  */
-declare function composeStory<TArgs extends Args = Args>(story: ComposedStory<ReactRenderer, TArgs>, componentAnnotations: Meta<TArgs | any>, projectAnnotations?: ProjectAnnotations<ReactRenderer>, exportsName?: string): _storybook_types.PreparedStoryFn<ReactRenderer, Partial<TArgs>>;
+declare function composeStory<TArgs extends Args = Args>(story: StoryAnnotationsOrFn<ReactRenderer, TArgs>, componentAnnotations: Meta<TArgs | any>, projectAnnotations?: ProjectAnnotations<ReactRenderer>, exportsName?: string): _storybook_types.ComposedStoryFn<ReactRenderer, Partial<TArgs>>;
 /**
@@ -191,4 +198,4 @@ * Function that will receive a stories import (e.g. `import * as stories from './Button.stories'`)
  */
-declare function composeStories<TModule extends Store_CSFExports<ReactRenderer, any>>(csfExports: TModule, projectAnnotations?: ProjectAnnotations<ReactRenderer>): Omit<StoriesWithPartialProps<ReactRenderer, TModule>, keyof Store_CSFExports<_storybook_types.Renderer, Args>>;
+declare function composeStories<TModule extends Store_CSFExports<ReactRenderer, any>>(csfExports: TModule, projectAnnotations?: ProjectAnnotations<ReactRenderer>): Omit<StoriesWithPartialProps<ReactRenderer, TModule>, keyof Store_CSFExports>;
 
 export { ComponentMeta, ComponentStory, ComponentStoryFn, ComponentStoryObj, Decorator, DecoratorFn, Loader, Meta, Preview, ReactRenderer, Story, StoryContext, StoryFn, StoryObj, composeStories, composeStory, configure, forceReRender, raw, setGlobalConfig, setProjectAnnotations, storiesOf };

dist/index.js

@@ -1,1 +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 src_exports={};__export(src_exports,{composeStories:()=>composeStories,composeStory:()=>composeStory,configure:()=>configure,forceReRender:()=>forceReRender,raw:()=>raw,setGlobalConfig:()=>setGlobalConfig,setProjectAnnotations:()=>setProjectAnnotations,storiesOf:()=>storiesOf});module.exports=__toCommonJS(src_exports);var import_global=require("@storybook/global"),{window:globalWindow}=import_global.global;globalWindow&&(globalWindow.STORYBOOK_ENV="react");var import_preview_api=require("@storybook/preview-api");var import_global2=require("@storybook/global"),import_react=__toESM(require("react")),import_react_dom_shim=require("@storybook/react-dom-shim"),{FRAMEWORK_OPTIONS}=import_global2.global,render=(args,context)=>{let{id,component:Component}=context;if(!Component)throw new Error(`Unable to render story ${id} as the component annotation is missing from the default export`);return import_react.default.createElement(Component,{...args})},ErrorBoundary=class extends import_react.Component{constructor(){super(...arguments);this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidMount(){let{hasError}=this.state,{showMain}=this.props;hasError||showMain()}componentDidCatch(err){let{showException}=this.props;showException(err)}render(){let{hasError}=this.state,{children}=this.props;return hasError?null:children}},Wrapper=FRAMEWORK_OPTIONS!=null&&FRAMEWORK_OPTIONS.strictMode?import_react.StrictMode:import_react.Fragment;async function renderToCanvas({storyContext,unboundStoryFn,showMain,showException,forceRemount},canvasElement){let content=import_react.default.createElement(ErrorBoundary,{showMain,showException},import_react.default.createElement(unboundStoryFn,{...storyContext})),element=Wrapper?import_react.default.createElement(Wrapper,null,content):content;return forceRemount&&(0,import_react_dom_shim.unmountElement)(canvasElement),await(0,import_react_dom_shim.renderElement)(element,canvasElement),()=>(0,import_react_dom_shim.unmountElement)(canvasElement)}var RENDERER="react",api=(0,import_preview_api.start)(renderToCanvas,{render}),storiesOf=(kind,m)=>api.clientApi.storiesOf(kind,m).addParameters({renderer:RENDERER}),configure=(...args)=>api.configure(RENDERER,...args),forceReRender=api.forceReRender,raw=api.clientApi.raw;var import_preview_api2=require("@storybook/preview-api"),import_client_logger=require("@storybook/client-logger");function setProjectAnnotations(projectAnnotations){(0,import_preview_api2.setProjectAnnotations)(projectAnnotations)}function setGlobalConfig(projectAnnotations){(0,import_client_logger.deprecate)("setGlobalConfig is deprecated. Use setProjectAnnotations instead."),setProjectAnnotations(projectAnnotations)}var defaultProjectAnnotations={render};function composeStory(story,componentAnnotations,projectAnnotations,exportsName){return(0,import_preview_api2.composeStory)(story,componentAnnotations,projectAnnotations,defaultProjectAnnotations,exportsName)}function composeStories(csfExports,projectAnnotations){return(0,import_preview_api2.composeStories)(csfExports,projectAnnotations,composeStory)}var _a;(_a=module==null?void 0:module.hot)==null||_a.decline();0&&(module.exports={composeStories,composeStory,configure,forceReRender,raw,setGlobalConfig,setProjectAnnotations,storiesOf});
+"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 src_exports={};__export(src_exports,{composeStories:()=>composeStories,composeStory:()=>composeStory,configure:()=>configure,forceReRender:()=>forceReRender,raw:()=>raw,setGlobalConfig:()=>setGlobalConfig,setProjectAnnotations:()=>setProjectAnnotations,storiesOf:()=>storiesOf});module.exports=__toCommonJS(src_exports);var import_global=require("@storybook/global"),{window:globalWindow}=import_global.global;globalWindow&&(globalWindow.STORYBOOK_ENV="react");var import_preview_api=require("@storybook/preview-api");var import_global2=require("@storybook/global"),import_react=__toESM(require("react")),import_react_dom_shim=require("@storybook/react-dom-shim"),{FRAMEWORK_OPTIONS}=import_global2.global,render=(args,context)=>{let{id,component:Component}=context;if(!Component)throw new Error(`Unable to render story ${id} as the component annotation is missing from the default export`);return import_react.default.createElement(Component,{...args})},ErrorBoundary=class extends import_react.Component{constructor(){super(...arguments);this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidMount(){let{hasError}=this.state,{showMain}=this.props;hasError||showMain()}componentDidCatch(err){let{showException}=this.props;showException(err)}render(){let{hasError}=this.state,{children}=this.props;return hasError?null:children}},Wrapper=FRAMEWORK_OPTIONS!=null&&FRAMEWORK_OPTIONS.strictMode?import_react.StrictMode:import_react.Fragment;async function renderToCanvas({storyContext,unboundStoryFn,showMain,showException,forceRemount},canvasElement){let content=import_react.default.createElement(ErrorBoundary,{showMain,showException},import_react.default.createElement(unboundStoryFn,{...storyContext})),element=Wrapper?import_react.default.createElement(Wrapper,null,content):content;return forceRemount&&(0,import_react_dom_shim.unmountElement)(canvasElement),await(0,import_react_dom_shim.renderElement)(element,canvasElement),()=>(0,import_react_dom_shim.unmountElement)(canvasElement)}var RENDERER="react",api=(0,import_preview_api.start)(renderToCanvas,{render}),storiesOf=(kind,m)=>api.clientApi.storiesOf(kind,m).addParameters({renderer:RENDERER}),configure=(...args)=>api.configure(RENDERER,...args),forceReRender=api.forceReRender,raw=api.clientApi.raw;var import_preview_api2=require("@storybook/preview-api"),import_client_logger=require("@storybook/client-logger");function setProjectAnnotations(projectAnnotations){(0,import_preview_api2.setProjectAnnotations)(projectAnnotations)}function setGlobalConfig(projectAnnotations){(0,import_client_logger.deprecate)("setGlobalConfig is deprecated. Use setProjectAnnotations instead."),setProjectAnnotations(projectAnnotations)}var defaultProjectAnnotations={render};function composeStory(story,componentAnnotations,projectAnnotations,exportsName){return(0,import_preview_api2.composeStory)(story,componentAnnotations,projectAnnotations,defaultProjectAnnotations,exportsName)}function composeStories(csfExports,projectAnnotations){return(0,import_preview_api2.composeStories)(csfExports,projectAnnotations,composeStory)}var _a;typeof module<"u"&&((_a=module==null?void 0:module.hot)==null||_a.decline());0&&(module.exports={composeStories,composeStory,configure,forceReRender,raw,setGlobalConfig,setProjectAnnotations,storiesOf});

dist/preset.d.ts

 import { StorybookConfig } from '@storybook/types';
 
 declare const addons: StorybookConfig['addons'];
+declare const previewAnnotations: StorybookConfig['previewAnnotations'];
 
-export { addons };
+export { addons, previewAnnotations };

dist/preset.js

@@ -1,1 +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,{addons:()=>addons});module.exports=__toCommonJS(preset_exports);var addons=[require.resolve("@storybook/react-dom-shim/dist/preset")];0&&(module.exports={addons});
+"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,{addons:()=>addons,previewAnnotations:()=>previewAnnotations});module.exports=__toCommonJS(preset_exports);var import_path=require("path"),addons=[require.resolve("@storybook/react-dom-shim/dist/preset")],previewAnnotations=async(input,options)=>{let docsConfig=await options.presets.apply("docs",{},options),docsEnabled=Object.keys(docsConfig).length>0;return[].concat(input).concat([(0,import_path.join)(__dirname,"entry-preview.mjs")]).concat(docsEnabled?[(0,import_path.join)(__dirname,"entry-preview-docs.mjs")]:[])};0&&(module.exports={addons,previewAnnotations});

package.json

 {
   "name": "@storybook/react",
-  "version": "7.0.0",
+  "version": "7.6.8",
   "description": "Storybook React renderer",
@@ -8,3 +8,3 @@ "keywords": [
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/main/renderers/react",
+  "homepage": "https://github.com/storybookjs/storybook/tree/next/code/renderers/react",
   "bugs": {
@@ -16,3 +16,3 @@ "url": "https://github.com/storybookjs/storybook/issues"
     "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "renderers/react"
+    "directory": "code/renderers/react"
   },
@@ -26,17 +26,10 @@ "funding": {
     ".": {
+      "types": "./dist/index.d.ts",
       "node": "./dist/index.js",
       "require": "./dist/index.js",
-      "import": "./dist/index.mjs",
-      "types": "./dist/index.d.ts"
+      "import": "./dist/index.mjs"
     },
-    "./preview": {
-      "require": "./dist/config.js",
-      "import": "./dist/config.mjs",
-      "types": "./dist/config.d.ts"
-    },
-    "./dist/preset": {
-      "require": "./dist/preset.js",
-      "import": "./dist/preset.mjs",
-      "types": "./dist/preset.d.ts"
-    },
+    "./preset": "./preset.js",
+    "./dist/entry-preview.mjs": "./dist/entry-preview.mjs",
+    "./dist/entry-preview-docs.mjs": "./dist/entry-preview-docs.mjs",
     "./package.json": "./package.json"
@@ -49,26 +42,27 @@ },
     "dist/**/*",
-    "template/**/*",
+    "template/cli/**/*",
     "README.md",
     "*.js",
-    "*.d.ts"
+    "*.d.ts",
+    "!src/**/*"
   ],
   "scripts": {
-    "check": "../../../scripts/node_modules/.bin/tsc --noEmit",
-    "prep": "../../../scripts/prepare/bundle.ts"
+    "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts",
+    "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "7.0.0",
-    "@storybook/core-client": "7.0.0",
-    "@storybook/docs-tools": "7.0.0",
+    "@storybook/client-logger": "7.6.8",
+    "@storybook/core-client": "7.6.8",
+    "@storybook/docs-tools": "7.6.8",
     "@storybook/global": "^5.0.0",
-    "@storybook/preview-api": "7.0.0",
-    "@storybook/react-dom-shim": "7.0.0",
-    "@storybook/types": "7.0.0",
+    "@storybook/preview-api": "7.6.8",
+    "@storybook/react-dom-shim": "7.6.8",
+    "@storybook/types": "7.6.8",
     "@types/escodegen": "^0.0.6",
     "@types/estree": "^0.0.51",
-    "@types/node": "^16.0.0",
+    "@types/node": "^18.0.0",
     "acorn": "^7.4.1",
     "acorn-jsx": "^5.3.1",
     "acorn-walk": "^7.2.0",
-    "escodegen": "^2.0.0",
+    "escodegen": "^2.1.0",
     "html-tags": "^3.1.0",
@@ -79,16 +73,17 @@ "lodash": "^4.17.21",
     "ts-dedent": "^2.0.0",
-    "type-fest": "^2.19.0",
+    "type-fest": "~2.19",
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.23.2",
+    "@storybook/test": "7.6.8",
     "@types/util-deprecate": "^1.0.0",
-    "expect-type": "^0.14.2",
-    "jest-specific-snapshot": "^7.0.0",
-    "require-from-string": "^2.0.2",
-    "typescript": "~4.9.3"
+    "expect-type": "^0.15.0",
+    "jest-specific-snapshot": "^8.0.0",
+    "require-from-string": "^2.0.2"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "typescript": "*"
   },
@@ -109,8 +104,9 @@ "peerDependenciesMeta": {
       "./src/index.ts",
-      "./src/config.ts",
-      "./src/preset.ts"
+      "./src/preset.ts",
+      "./src/entry-preview.ts",
+      "./src/entry-preview-docs.ts"
     ],
     "platform": "browser"
   },
-  "gitHead": "4f2afa644d7f2833181fc03187f5597d442285a6"
-}
+  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17"
+}

template/cli/js/Button.stories.js

 import { Button } from './Button';
 
-// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+// 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: {
@@ -13,3 +19,3 @@ backgroundColor: { control: 'color' },
 
-// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Primary = {
@@ -16,0 +22,0 @@ args: {

template/cli/js/Header.jsx

@@ -9,3 +9,3 @@ import React from 'react';
   <header>
-    <div className="wrapper">
+    <div className="storybook-header">
       <div>
@@ -12,0 +12,0 @@ <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">

template/cli/js/Header.stories.js

@@ -6,6 +6,6 @@ import { Header } from './Header';
   component: Header,
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page
+  // 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/7.0/react/configure/story-layout
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
     layout: 'fullscreen',
@@ -12,0 +12,0 @@ },

template/cli/js/Page.jsx

@@ -18,3 +18,3 @@ import React from 'react';
 
-      <section>
+      <section className="storybook-page">
         <h2>Pages in Storybook</h2>
@@ -21,0 +21,0 @@ <p>

template/cli/js/Page.stories.js

@@ -1,2 +0,2 @@
-import { within, userEvent } from '@storybook/testing-library';
+import { within, userEvent, expect } from '@storybook/test';
 
@@ -9,3 +9,3 @@ import { Page } from './Page';
   parameters: {
-    // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
     layout: 'fullscreen',
@@ -17,11 +17,14 @@ },
 
-// More on interaction testing: https://storybook.js.org/docs/7.0/react/writing-tests/interaction-testing
+// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
 export const LoggedIn = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    const loginButton = await canvas.getByRole('button', {
-      name: /Log in/i,
-    });
+    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();
   },
 };

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

@@ -5,9 +5,13 @@ import type { Meta, StoryObj } from '@storybook/react';
 
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta: Meta<typeof Button> = {
   title: 'Example/Button',
   component: Button,
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page
+  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/react/api/argtypes
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
   argTypes: {
@@ -21,5 +25,4 @@ backgroundColor: { control: 'color' },
 
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Primary: Story = {
-  // More on args: https://storybook.js.org/docs/react/writing-stories/args
   args: {
@@ -26,0 +29,0 @@ primary: true,

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

 import type { Meta, StoryObj } from '@storybook/react';
+
 import { Header } from './Header';
@@ -7,6 +8,6 @@
   component: Header,
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
   parameters: {
-    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
+    // More on Story layout: https://storybook.js.org/docs/configure/story-layout
     layout: 'fullscreen',
@@ -13,0 +14,0 @@ },

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

 import type { Meta, StoryObj } from '@storybook/react';
-import { within, userEvent } from '@storybook/testing-library';
+import { within, userEvent, expect } from '@storybook/test';
 
@@ -10,3 +10,3 @@ import { Page } from './Page';
   parameters: {
-    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
+    // More on Story layout: https://storybook.js.org/docs/configure/story-layout
     layout: 'fullscreen',
@@ -21,11 +21,14 @@ },
 
-// More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing
+// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
 export const LoggedIn: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    const loginButton = await canvas.getByRole('button', {
-      name: /Log in/i,
-    });
+    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();
   },
 };

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

@@ -5,7 +5,13 @@ import type { Meta, StoryObj } from '@storybook/react';
 
-// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+// 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: {
@@ -19,3 +25,3 @@ backgroundColor: { control: 'color' },
 
-// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Primary: Story = {
@@ -22,0 +28,0 @@ args: {

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

 import type { Meta, StoryObj } from '@storybook/react';
+
 import { Header } from './Header';
@@ -7,6 +8,6 @@
   component: Header,
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page
+  // 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/7.0/react/configure/story-layout
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
     layout: 'fullscreen',
@@ -13,0 +14,0 @@ },

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

 import type { Meta, StoryObj } from '@storybook/react';
-import { within, userEvent } from '@storybook/testing-library';
+import { within, userEvent, expect } from '@storybook/test';
 
@@ -10,3 +10,3 @@ import { Page } from './Page';
   parameters: {
-    // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
     layout: 'fullscreen',
@@ -21,11 +21,14 @@ },
 
-// More on interaction testing: https://storybook.js.org/docs/7.0/react/writing-tests/interaction-testing
+// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
 export const LoggedIn: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    const loginButton = await canvas.getByRole('button', {
-      name: /Log in/i,
-    });
+    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();
   },
 };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

103530

decreased by-78.3%

Dependency count

24

increased by4.35%

Number of package files

39

decreased by-79.03%

Lines of code

1297

decreased by-57.41%

Dependency changes

• + Added@esbuild/android-arm@0.18.20(transitive)

• + Added@esbuild/android-arm64@0.18.20(transitive)

• + Added@esbuild/android-x64@0.18.20(transitive)

• + Added@esbuild/darwin-arm64@0.18.20(transitive)

• + Added@esbuild/darwin-x64@0.18.20(transitive)

• + Added@esbuild/freebsd-arm64@0.18.20(transitive)

• + Added@esbuild/freebsd-x64@0.18.20(transitive)

• + Added@esbuild/linux-arm@0.18.20(transitive)

• + Added@esbuild/linux-arm64@0.18.20(transitive)

• + Added@esbuild/linux-ia32@0.18.20(transitive)

• + Added@esbuild/linux-loong64@0.18.20(transitive)

• + Added@esbuild/linux-mips64el@0.18.20(transitive)

• + Added@esbuild/linux-ppc64@0.18.20(transitive)

• + Added@esbuild/linux-riscv64@0.18.20(transitive)

• + Added@esbuild/linux-s390x@0.18.20(transitive)

• + Added@esbuild/linux-x64@0.18.20(transitive)

• + Added@esbuild/netbsd-x64@0.18.20(transitive)

• + Added@esbuild/openbsd-x64@0.18.20(transitive)

• + Added@esbuild/sunos-x64@0.18.20(transitive)

• + Added@esbuild/win32-arm64@0.18.20(transitive)

• + Added@esbuild/win32-ia32@0.18.20(transitive)

• + Added@esbuild/win32-x64@0.18.20(transitive)

• + Added@isaacs/cliui@8.0.2(transitive)

• + Added@pkgjs/parseargs@0.11.0(transitive)

• + Added@storybook/channels@7.6.8(transitive)

• + Added@storybook/client-logger@7.6.8(transitive)

• + Added@storybook/core-client@7.6.8(transitive)

• + Added@storybook/core-common@7.6.8(transitive)

• + Added@storybook/core-events@7.6.8(transitive)

• + Added@storybook/csf@0.1.11(transitive)

• + Added@storybook/docs-tools@7.6.8(transitive)

• + Added@storybook/node-logger@7.6.8(transitive)

• + Added@storybook/preview-api@7.6.8(transitive)

• + Added@storybook/react-dom-shim@7.6.8(transitive)

• + Added@storybook/types@7.6.8(transitive)

• + Added@types/find-cache-dir@3.2.1(transitive)

• + Added@types/node@18.19.50(transitive)

• + Added@types/node-fetch@2.6.11(transitive)

• + Addedansi-regex@6.1.0(transitive)

• + Addedansi-styles@6.2.1(transitive)

• + Addedassert@2.1.0(transitive)

• + Addedasynckit@0.4.0(transitive)

• + Addedavailable-typed-arrays@1.0.7(transitive)

• + Addedcombined-stream@1.0.8(transitive)

• + Addedcommondir@1.0.1(transitive)

• + Addedcross-spawn@7.0.3(transitive)

• + Addeddefine-properties@1.2.1(transitive)

• + Addeddelayed-stream@1.0.0(transitive)

• + Addedeastasianwidth@0.2.0(transitive)

• + Addedemoji-regex@9.2.2(transitive)

• + Addedesbuild@0.18.20(transitive)

• + Addedfile-system-cache@2.3.0(transitive)

• + Addedfind-cache-dir@3.3.2(transitive)

• + Addedfind-up@4.1.0(transitive)

• + Addedfor-each@0.3.3(transitive)

• + Addedforeground-child@3.3.0(transitive)

• + Addedform-data@4.0.0(transitive)

• + Addedglob@10.4.5(transitive)

• + Addedhas-tostringtag@1.0.2(transitive)

• + Addedis-arguments@1.1.1(transitive)

• + Addedis-callable@1.2.7(transitive)

• + Addedis-generator-function@1.0.10(transitive)

• + Addedis-nan@1.3.2(transitive)

• + Addedis-typed-array@1.1.13(transitive)

• + Addedisexe@2.0.0(transitive)

• + Addedjackspeak@3.4.3(transitive)

• + Addedlocate-path@5.0.0(transitive)

• + Addedlru-cache@10.4.3(transitive)

• + Addedmake-dir@3.1.0(transitive)

• + Addedmime-db@1.52.0(transitive)

• + Addedmime-types@2.1.35(transitive)

• + Addedminimatch@9.0.5(transitive)

• + Addedminipass@7.1.2(transitive)

• + Addednode-fetch@2.7.0(transitive)

• + Addedobject-is@1.1.6(transitive)

• + Addedobject-keys@1.1.1(transitive)

• + Addedobject.assign@4.1.5(transitive)

• + Addedp-limit@2.3.0(transitive)

• + Addedp-locate@4.1.0(transitive)

• + Addedp-try@2.2.0(transitive)

• + Addedpackage-json-from-dist@1.0.0(transitive)

• + Addedpath-key@3.1.1(transitive)

• + Addedpath-scurry@1.11.1(transitive)

• + Addedpkg-dir@4.2.0(transitive)

• + Addedpossible-typed-array-names@1.0.0(transitive)

• + Addedshebang-command@2.0.0(transitive)

• + Addedshebang-regex@3.0.0(transitive)

• + Addedsignal-exit@4.1.0(transitive)

• + Addedstring-width@5.1.2(transitive)

• + Addedstrip-ansi@7.1.0(transitive)

• + Addedtiny-invariant@1.3.3(transitive)

• + Addedtr46@0.0.3(transitive)

• + Addedtypescript@5.6.2(transitive)

• + Addedundici-types@5.26.5(transitive)

• + Addedutil@0.12.5(transitive)

• + Addedwebidl-conversions@3.0.1(transitive)

• + Addedwhatwg-url@5.0.0(transitive)

• + Addedwhich@2.0.2(transitive)

• + Addedwhich-typed-array@1.1.15(transitive)

• + Addedwrap-ansi@7.0.08.1.0(transitive)

• - Removed@ampproject/remapping@2.3.0(transitive)

• - Removed@babel/code-frame@7.24.7(transitive)

• - Removed@babel/compat-data@7.25.4(transitive)

• - Removed@babel/core@7.25.2(transitive)

• - Removed@babel/generator@7.25.6(transitive)

• - Removed@babel/helper-compilation-targets@7.25.2(transitive)

• - Removed@babel/helper-module-imports@7.24.7(transitive)

• - Removed@babel/helper-module-transforms@7.25.2(transitive)

• - Removed@babel/helper-simple-access@7.24.7(transitive)

• - Removed@babel/helper-validator-option@7.24.8(transitive)

• - Removed@babel/helpers@7.25.6(transitive)

• - Removed@babel/highlight@7.24.7(transitive)

• - Removed@babel/template@7.25.0(transitive)

• - Removed@babel/traverse@7.25.6(transitive)

• - Removed@esbuild/android-arm@0.17.19(transitive)

• - Removed@esbuild/android-arm64@0.17.19(transitive)

• - Removed@esbuild/android-x64@0.17.19(transitive)

• - Removed@esbuild/darwin-arm64@0.17.19(transitive)

• - Removed@esbuild/darwin-x64@0.17.19(transitive)

• - Removed@esbuild/freebsd-arm64@0.17.19(transitive)

• - Removed@esbuild/freebsd-x64@0.17.19(transitive)

• - Removed@esbuild/linux-arm@0.17.19(transitive)

• - Removed@esbuild/linux-arm64@0.17.19(transitive)

• - Removed@esbuild/linux-ia32@0.17.19(transitive)

• - Removed@esbuild/linux-loong64@0.17.19(transitive)

• - Removed@esbuild/linux-mips64el@0.17.19(transitive)

• - Removed@esbuild/linux-ppc64@0.17.19(transitive)

• - Removed@esbuild/linux-riscv64@0.17.19(transitive)

• - Removed@esbuild/linux-s390x@0.17.19(transitive)

• - Removed@esbuild/linux-x64@0.17.19(transitive)

• - Removed@esbuild/netbsd-x64@0.17.19(transitive)

• - Removed@esbuild/openbsd-x64@0.17.19(transitive)

• - Removed@esbuild/sunos-x64@0.17.19(transitive)

• - Removed@esbuild/win32-arm64@0.17.19(transitive)

• - Removed@esbuild/win32-ia32@0.17.19(transitive)

• - Removed@esbuild/win32-x64@0.17.19(transitive)

• - Removed@jridgewell/gen-mapping@0.3.5(transitive)

• - Removed@jridgewell/resolve-uri@3.1.2(transitive)

• - Removed@jridgewell/set-array@1.2.1(transitive)

• - Removed@jridgewell/sourcemap-codec@1.5.0(transitive)

• - Removed@jridgewell/trace-mapping@0.3.25(transitive)

• - Removed@storybook/channel-postmessage@7.0.0(transitive)

• - Removed@storybook/channels@7.0.0(transitive)

• - Removed@storybook/client-logger@7.0.0(transitive)

• - Removed@storybook/core-client@7.0.0(transitive)

• - Removed@storybook/core-common@7.0.0(transitive)

• - Removed@storybook/core-events@7.0.0(transitive)

• - Removed@storybook/csf@0.1.12-next.0(transitive)

• - Removed@storybook/docs-tools@7.0.0(transitive)

• - Removed@storybook/node-logger@7.0.0(transitive)

• - Removed@storybook/preview-api@7.0.0(transitive)

• - Removed@storybook/react-dom-shim@7.0.0(transitive)

• - Removed@storybook/types@7.0.0(transitive)

• - Removed@types/fs-extra@11.0.1(transitive)

• - Removed@types/jsonfile@6.1.4(transitive)

• - Removed@types/node@16.18.108(transitive)

• - Removed@types/npmlog@4.1.6(transitive)

• - Removed@types/ramda@0.29.3(transitive)

• - Removedansi-styles@3.2.1(transitive)

• - Removedaproba@2.0.0(transitive)

• - Removedare-we-there-yet@2.0.0(transitive)

• - Removedbrowserslist@4.23.3(transitive)

• - Removedcaniuse-lite@1.0.30001660(transitive)

• - Removedchalk@2.4.2(transitive)

• - Removedcolor-convert@1.9.3(transitive)

• - Removedcolor-name@1.1.3(transitive)

• - Removedcolor-support@1.1.3(transitive)

• - Removedconsole-control-strings@1.1.0(transitive)

• - Removedconvert-source-map@2.0.0(transitive)

• - Removeddelegates@1.0.0(transitive)

• - Removedelectron-to-chromium@1.5.24(transitive)

• - Removedesbuild@0.17.19(transitive)

• - Removedescalade@3.2.0(transitive)

• - Removedescape-string-regexp@1.0.5(transitive)

• - Removedfile-system-cache@2.4.7(transitive)

• - Removedfs.realpath@1.0.0(transitive)

• - Removedgauge@3.0.2(transitive)

• - Removedgensync@1.0.0-beta.2(transitive)

• - Removedglob@8.1.0(transitive)

• - Removedglob-promise@6.0.7(transitive)

• - Removedglobals@11.12.0(transitive)

• - Removedhas-flag@3.0.0(transitive)

• - Removedhas-unicode@2.0.1(transitive)

• - Removedinflight@1.0.6(transitive)

• - Removedjsesc@2.5.2(transitive)

• - Removedjson5@2.2.3(transitive)

• - Removedlru-cache@5.1.1(transitive)

• - Removedminimatch@5.1.6(transitive)

• - Removednode-releases@2.0.18(transitive)

• - Removednpmlog@5.0.1(transitive)

• - Removedonce@1.4.0(transitive)

• - Removedpicocolors@1.1.0(transitive)

• - Removedreadable-stream@3.6.2(transitive)

• - Removedsafe-buffer@5.2.1(transitive)

• - Removedset-blocking@2.0.0(transitive)

• - Removedsignal-exit@3.0.7(transitive)

• - Removedstring_decoder@1.3.0(transitive)

• - Removedsupports-color@5.5.0(transitive)

• - Removedts-toolbelt@9.6.0(transitive)

• - Removedtypes-ramda@0.29.10(transitive)

• - Removedupdate-browserslist-db@1.1.0(transitive)

• - Removedwide-align@1.1.5(transitive)

• - Removedwrappy@1.0.2(transitive)

• - Removedyallist@3.1.1(transitive)

• Updated@storybook/client-logger@7.6.8

• Updated@storybook/core-client@7.6.8

• Updated@storybook/docs-tools@7.6.8

• Updated@storybook/preview-api@7.6.8

• Updated@storybook/react-dom-shim@7.6.8

• Updated@storybook/types@7.6.8

• Updated@types/node@^18.0.0

• Updatedescodegen@^2.1.0

• Updatedtype-fest@~2.19