@storybook/react - npm Package Compare versions

Comparing version 7.5.3 to 7.6.9

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, 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';
@@ -42,3 +42,8 @@ import { Simplify, SetOptional } from 'type-fest';
     }
-] ? 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>;
+] ? 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> = {
@@ -45,0 +50,0 @@ [P in keyof TArgs as TArgs[P] extends (...args: any[]) => any ? ((...args: any[]) => void) extends TArgs[P] ? P : never : never]: TArgs[P];

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.5.3",
+  "version": "7.6.9",
   "description": "Storybook React renderer",
@@ -29,11 +29,5 @@ "keywords": [
     },
-    "./preview": {
-      "types": "./dist/config.d.ts",
-      "require": "./dist/config.js",
-      "import": "./dist/config.mjs"
-    },
-    "./dist/preset": {
-      "types": "./dist/preset.d.ts",
-      "require": "./dist/preset.js"
-    },
+    "./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"
@@ -53,13 +47,13 @@ },
   "scripts": {
-    "check": "../../../scripts/prepare/check.ts",
-    "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.5.3",
-    "@storybook/core-client": "7.5.3",
-    "@storybook/docs-tools": "7.5.3",
+    "@storybook/client-logger": "7.6.9",
+    "@storybook/core-client": "7.6.9",
+    "@storybook/docs-tools": "7.6.9",
     "@storybook/global": "^5.0.0",
-    "@storybook/preview-api": "7.5.3",
-    "@storybook/react-dom-shim": "7.5.3",
-    "@storybook/types": "7.5.3",
+    "@storybook/preview-api": "7.6.9",
+    "@storybook/react-dom-shim": "7.6.9",
+    "@storybook/types": "7.6.9",
     "@types/escodegen": "^0.0.6",
@@ -81,3 +75,4 @@ "@types/estree": "^0.0.51",
   "devDependencies": {
-    "@babel/core": "^7.22.9",
+    "@babel/core": "^7.23.2",
+    "@storybook/test": "7.6.9",
     "@types/util-deprecate": "^1.0.0",
@@ -107,4 +102,5 @@ "expect-type": "^0.15.0",
       "./src/index.ts",
-      "./src/config.ts",
-      "./src/preset.ts"
+      "./src/preset.ts",
+      "./src/entry-preview.ts",
+      "./src/entry-preview-docs.ts"
     ],
@@ -111,0 +107,0 @@ "platform": "browser"

template/cli/js/Button.stories.js

 import { Button } from './Button';
 
-// 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
 export default {
@@ -8,8 +8,8 @@ title: 'Example/Button',
   parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+    // 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/react/writing-docs/autodocs
+  // 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: {
@@ -20,3 +20,3 @@ backgroundColor: { control: 'color' },
 
-// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Primary = {
@@ -23,0 +23,0 @@ args: {

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/react/writing-docs/autodocs
+  // 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/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.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/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/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,3 +5,3 @@ 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> = {
@@ -11,8 +11,8 @@ title: 'Example/Button',
   parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+    // 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/react/writing-docs/autodocs
+  // 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: {
@@ -26,3 +26,3 @@ backgroundColor: { control: 'color' },
 
-// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Primary: Story = {
@@ -29,0 +29,0 @@ args: {

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

@@ -8,6 +8,6 @@ import type { Meta, StoryObj } from '@storybook/react';
   component: Header,
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  // 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',
@@ -14,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,3 +5,3 @@ 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 = {
@@ -11,8 +11,8 @@ title: 'Example/Button',
   parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+    // 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/react/writing-docs/autodocs
+  // 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: {
@@ -26,3 +26,3 @@ backgroundColor: { control: 'color' },
 
-// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Primary: Story = {
@@ -29,0 +29,0 @@ args: {

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

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

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

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

Improved metrics

Total package byte prevSize

103530

2.92%

Number of package files

39

5.41%

Lines of code

1297

2.69%

Worsened metrics

Dev dependency count

6

20%

Number of low quality alerts

4

33.33%

Dependency changes

• + Added

  @storybook/channels@7.6.9
  (transitive)

• + Added

  @storybook/client-logger@7.6.9
  (transitive)

• + Added

  @storybook/core-client@7.6.9
  (transitive)

• + Added

  @storybook/core-common@7.6.9
  (transitive)

• + Added

  @storybook/core-events@7.6.9
  (transitive)

• + Added

  @storybook/docs-tools@7.6.9
  (transitive)

• + Added

  @storybook/node-logger@7.6.9
  (transitive)

• + Added

  @storybook/preview-api@7.6.9
  (transitive)

• + Added

  @storybook/react-dom-shim@7.6.9
  (transitive)

• + Added

  @storybook/types@7.6.9
  (transitive)

• + Added

  assert@2.1.0
  (transitive)

• + Added

  available-typed-arrays@1.0.7
  (transitive)

• + Added

  call-bind@1.0.8
  (transitive)

• + Added

  define-data-property@1.1.4
  (transitive)

• + Added

  define-properties@1.2.1
  (transitive)

• + Added

  for-each@0.3.5
  (transitive)

• + Added

  has-property-descriptors@1.0.2
  (transitive)

• + Added

  inherits@2.0.4
  (transitive)

• + Added

  is-arguments@1.2.0
  (transitive)

• + Added

  is-callable@1.2.7
  (transitive)

• + Added

  is-generator-function@1.1.0
  (transitive)

• + Added

  is-nan@1.3.2
  (transitive)

• + Added

  is-regex@1.2.1
  (transitive)

• + Added

  is-typed-array@1.1.15
  (transitive)

• + Added

  object-is@1.1.6
  (transitive)

• + Added

  object-keys@1.1.1
  (transitive)

• + Added

  object.assign@4.1.7
  (transitive)

• + Added

  possible-typed-array-names@1.1.0
  (transitive)

• + Added

  safe-regex-test@1.1.0
  (transitive)

• + Added

  set-function-length@1.2.2
  (transitive)

• + Added

  util@0.12.5
  (transitive)

• + Added

  which-typed-array@1.1.19
  (transitive)

• - Removed

  @storybook/channels@7.5.3
  (transitive)

• - Removed

  @storybook/client-logger@7.5.3
  (transitive)

• - Removed

  @storybook/core-client@7.5.3
  (transitive)

• - Removed

  @storybook/core-common@7.5.3
  (transitive)

• - Removed

  @storybook/core-events@7.5.3
  (transitive)

• - Removed

  @storybook/docs-tools@7.5.3
  (transitive)

• - Removed

  @storybook/node-logger@7.5.3
  (transitive)

• - Removed

  @storybook/preview-api@7.5.3
  (transitive)

• - Removed

  @storybook/react-dom-shim@7.5.3
  (transitive)

• - Removed

  @storybook/types@7.5.3
  (transitive)

• Updated

  @storybook/client-logger@7.6.9

• Updated

  @storybook/core-client@7.6.9

• Updated

  @storybook/docs-tools@7.6.9

• Updated

  @storybook/preview-api@7.6.9

• Updated

  @storybook/react-dom-shim@7.6.9

• Updated

  @storybook/types@7.6.9