Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@storybook/react

Package Overview
Dependencies
Maintainers
7
Versions
1933
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@storybook/react - npm Package Compare versions

Comparing version 7.0.24 to 8.0.0-alpha.10

dist/chunk-ZRQXZGQH.mjs

120

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 { Args, ComponentAnnotations, AnnotatedStoryFn, ArgsStoryFn, ArgsFromMeta, StoryAnnotations, StrictArgs, DecoratorFunction, 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 { ComponentType, ComponentProps, JSXElementConstructor } from 'react';
import { ComponentType, ComponentProps } from 'react';
import { Simplify, SetOptional } from 'type-fest';
import { R as ReactRenderer } from './types-bf5e6555.js';
interface ClientApi extends Addon_ClientStoryApi<ReactRenderer['storyResult']> {
configure(loader: Addon_Loadable, module: NodeModule): void;
forceReRender(): void;
raw: () => any;
}
declare const storiesOf: ClientApi['storiesOf'];
declare const configure: ClientApi['configure'];
declare const forceReRender: ClientApi['forceReRender'];
declare const raw: ClientApi['raw'];
type JSXElement = keyof JSX.IntrinsicElements | JSXElementConstructor<any>;
/**

@@ -24,3 +13,3 @@ * Metadata to configure the stories for a component.

*/
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,78 +20,20 @@ * 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>;
/**
* 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<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 ActionArgs<TArgs> = {
[P in keyof TArgs as TArgs[P] extends (...args: any[]) => any ? ((...args: any[]) => void) extends TArgs[P] ? P : never : never]: TArgs[P];
};
/**
* @deprecated Use `Meta` instead, e.g. ComponentMeta<typeof Button> -> Meta<typeof Button>.
*
* For the common case where a component's stories are simple components that receives args as props:
*
* ```tsx
* export default { ... } as ComponentMeta<typeof Button>;
* ```
*/
type ComponentMeta<T extends JSXElement> = Meta<ComponentProps<T>>;
/**
* @deprecated Use `StoryFn` instead, e.g. ComponentStoryFn<typeof Button> -> StoryFn<typeof Button>.
* 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/
*
* For the common case where a (CSFv2) story is a simple component that receives args as props:
*
* ```tsx
* const Template: ComponentStoryFn<typeof Button> = (args) => <Button {...args} />
* ```
*/
type ComponentStoryFn<T extends JSXElement> = StoryFn<ComponentProps<T>>;
/**
* @deprecated Use `StoryObj` instead, e.g. ComponentStoryObj<typeof Button> -> StoryObj<typeof Button>.
*
* For the common case where a (CSFv3) story is a simple component that receives args as props:
*
* ```tsx
* const MyStory: ComponentStoryObj<typeof Button> = {
* args: { buttonArg1: 'val' },
* }
* ```
*/
type ComponentStoryObj<T extends JSXElement> = StoryObj<ComponentProps<T>>;
/**
* @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>;
/**
* @deprecated Use `StoryFn` instead, e.g. ComponentStory<typeof Button> -> StoryFn<typeof Button>.
* 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/.
*
* For the common case where a (CSFv3) story is a simple component that receives args as props:
*
* ```tsx
* const MyStory: ComponentStory<typeof Button> = {
* args: { buttonArg1: 'val' },
* }
* ```
*/
type ComponentStory<T extends JSXElement> = ComponentStoryFn<T>;
/**
* @deprecated Use Decorator instead.
*/
type DecoratorFn = DecoratorFunction<ReactRenderer>;
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>> : 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 Decorator<TArgs = StrictArgs> = DecoratorFunction<ReactRenderer, TArgs>;

@@ -121,3 +52,3 @@ type Loader<TArgs = StrictArgs> = LoaderFunction<ReactRenderer, TArgs>;

* import { setProjectAnnotations } from '@storybook/react';
* import * as projectAnnotations from './.storybook/preview';
* import projectAnnotations from './.storybook/preview';
*

@@ -127,10 +58,5 @@ * setProjectAnnotations(projectAnnotations);

*
* @param projectAnnotations - e.g. (import * as projectAnnotations from '../.storybook/preview')
* @param projectAnnotations - e.g. (import projectAnnotations from '../.storybook/preview')
*/
declare function setProjectAnnotations(projectAnnotations: ProjectAnnotations<ReactRenderer> | ProjectAnnotations<ReactRenderer>[]): void;
/** Preserved for users migrating from `@storybook/testing-react`.
*
* @deprecated Use setProjectAnnotations instead
*/
declare function setGlobalConfig(projectAnnotations: ProjectAnnotations<ReactRenderer> | ProjectAnnotations<ReactRenderer>[]): void;
/**

@@ -163,3 +89,3 @@ * Function that will receive a story along with meta (e.g. a default export from a .stories file)

*/
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>>;
/**

@@ -190,4 +116,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 };
export { Decorator, Loader, Meta, Preview, ReactRenderer, StoryContext, StoryFn, StoryObj, composeStories, composeStory, setProjectAnnotations };

@@ -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;typeof module<"u"&&((_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,setProjectAnnotations:()=>setProjectAnnotations});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_react=__toESM(require("react")),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})};function setProjectAnnotations(projectAnnotations){(0,import_preview_api.setProjectAnnotations)(projectAnnotations)}var defaultProjectAnnotations={render};function composeStory(story,componentAnnotations,projectAnnotations,exportsName){return(0,import_preview_api.composeStory)(story,componentAnnotations,projectAnnotations,defaultProjectAnnotations,exportsName)}function composeStories(csfExports,projectAnnotations){return(0,import_preview_api.composeStories)(csfExports,projectAnnotations,composeStory)}typeof module<"u"&&module?.hot?.decline();0&&(module.exports={composeStories,composeStory,setProjectAnnotations});

@@ -1,5 +0,17 @@

import { StorybookConfig } from '@storybook/types';
import { PresetProperty } from '@storybook/types';
declare const addons: StorybookConfig['addons'];
declare const addons: PresetProperty<'addons'>;
declare const previewAnnotations: PresetProperty<'previewAnnotations'>;
/**
* Try to resolve react and react-dom from the root node_modules of the project
* addon-docs uses this to alias react and react-dom to the project's version when possible
* If the user doesn't have an explicit dependency on react this will return the existing values
* Which will be the versions shipped with addon-docs
*
* We do the exact same thing in the common preset, but that will fail in Yarn PnP because
* @storybook/core-server doesn't have a peer dependency on react
* This will make @storybook/react projects work in Yarn PnP
*/
declare const resolvedReact: (existing: any) => Promise<any>;
export { addons };
export { addons, previewAnnotations, resolvedReact };

@@ -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,resolvedReact:()=>resolvedReact});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")]:[])},resolvedReact=async existing=>{try{return{...existing,react:(0,import_path.dirname)(require.resolve("react/package.json")),reactDom:(0,import_path.dirname)(require.resolve("react-dom/package.json"))}}catch{return existing}};0&&(module.exports={addons,previewAnnotations,resolvedReact});
{
"name": "@storybook/react",
"version": "7.0.24",
"version": "8.0.0-alpha.10",
"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"

@@ -46,26 +40,26 @@ },

"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.24",
"@storybook/core-client": "7.0.24",
"@storybook/docs-tools": "7.0.24",
"@storybook/client-logger": "8.0.0-alpha.10",
"@storybook/docs-tools": "8.0.0-alpha.10",
"@storybook/global": "^5.0.0",
"@storybook/preview-api": "7.0.24",
"@storybook/react-dom-shim": "7.0.24",
"@storybook/types": "7.0.24",
"@storybook/preview-api": "8.0.0-alpha.10",
"@storybook/react-dom-shim": "8.0.0-alpha.10",
"@storybook/types": "8.0.0-alpha.10",
"@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",

@@ -76,16 +70,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",
"@storybook/test": "8.0.0-alpha.10",
"@types/babel-plugin-react-docgen": "^4",
"@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"
"babel-plugin-react-docgen": "^4.2.1",
"expect-type": "^0.15.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": ">= 4.2.x"
},

@@ -98,3 +93,3 @@ "peerDependenciesMeta": {

"engines": {
"node": ">=16.0.0"
"node": ">=18.0.0"
},

@@ -107,8 +102,9 @@ "publishConfig": {

"./src/index.ts",
"./src/config.ts",
"./src/preset.ts"
"./src/preset.ts",
"./src/entry-preview.ts",
"./src/entry-preview-docs.ts"
],
"platform": "browser"
},
"gitHead": "9fb2573aa274f3f69d3358050e8df9c903e8245f"
"gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17"
}

@@ -0,14 +1,23 @@

import { fn } from '@storybook/test';
import { Button } from './Button';
// More on how to set up stories at: https://storybook.js.org/docs/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: {
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#action-args
args: { onClick: fn() },
};
// 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 = {

@@ -15,0 +24,0 @@ args: {

@@ -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 @@ },

@@ -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();
},
};
import type { Meta, StoryObj } from '@storybook/react';
import { fn } from '@storybook/test';
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
const meta: Meta<typeof Button> = {
title: 'Example/Button',
component: Button,
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
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: {
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#action-args
args: { onClick: fn() },
};

@@ -20,5 +27,4 @@

// 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: {

@@ -25,0 +31,0 @@ primary: true,

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/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',

@@ -13,0 +14,0 @@ },

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();
},
};
import type { Meta, StoryObj } from '@storybook/react';
import { fn } from '@storybook/test';
import { Button } from './Button';
// More on how to set up stories at: https://storybook.js.org/docs/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: {
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#action-args
args: { onClick: fn() },
} satisfies Meta<typeof Button>;

@@ -18,3 +26,3 @@

// 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 = {

@@ -21,0 +29,0 @@ args: {

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/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',

@@ -13,0 +14,0 @@ },

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();
},
};

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc