@storybook/react 8.0.0-alpha.7 → 8.0.0-alpha.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +4 -75
- package/dist/index.js +1 -1
- package/dist/index.mjs +2 -3
- package/package.json +7 -7
- package/template/cli/js/Button.stories.js +3 -0
- package/template/cli/ts-3-8/Button.stories.ts +3 -0
- package/template/cli/ts-3-8/Header.tsx +3 -3
- package/template/cli/ts-4-9/Button.stories.ts +3 -1
- package/template/cli/ts-4-9/Header.tsx +3 -3
package/dist/index.d.ts
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import * as _storybook_types from '@storybook/types';
|
|
2
|
-
import { Args, ComponentAnnotations, AnnotatedStoryFn, ArgsStoryFn, ArgsFromMeta, StoryAnnotations,
|
|
2
|
+
import { Args, ComponentAnnotations, AnnotatedStoryFn, ArgsStoryFn, ArgsFromMeta, StoryAnnotations, StrictArgs, DecoratorFunction, LoaderFunction, StoryContext as StoryContext$1, ProjectAnnotations, StoryAnnotationsOrFn, Store_CSFExports, StoriesWithPartialProps } from '@storybook/types';
|
|
3
3
|
export { ArgTypes, Args, Parameters, StrictArgs } from '@storybook/types';
|
|
4
|
-
import { ComponentType, ComponentProps
|
|
4
|
+
import { ComponentType, ComponentProps } from 'react';
|
|
5
5
|
import { Simplify, SetOptional } from 'type-fest';
|
|
6
6
|
import { R as ReactRenderer } from './types-bf5e6555.js';
|
|
7
7
|
|
|
8
|
-
type JSXElement = keyof JSX.IntrinsicElements | JSXElementConstructor<any>;
|
|
9
8
|
/**
|
|
10
9
|
* Metadata to configure the stories for a component.
|
|
11
10
|
*
|
|
@@ -29,77 +28,12 @@ type StoryObj<TMetaOrCmpOrArgs = Args> = [TMetaOrCmpOrArgs] extends [
|
|
|
29
28
|
component?: infer Component;
|
|
30
29
|
args?: infer DefaultArgs;
|
|
31
30
|
}
|
|
32
|
-
] ? Simplify<(Component extends ComponentType<any> ? ComponentProps<Component> : unknown) & ArgsFromMeta<ReactRenderer, TMetaOrCmpOrArgs>> extends infer TArgs ? StoryAnnotations<ReactRenderer, AddMocks<TArgs, DefaultArgs>, SetOptional<TArgs, keyof TArgs & keyof
|
|
31
|
+
] ? 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>;
|
|
33
32
|
type AddMocks<TArgs, DefaultArgs> = Simplify<{
|
|
34
33
|
[T in keyof TArgs]: T extends keyof DefaultArgs ? DefaultArgs[T] extends (...args: any) => any & {
|
|
35
34
|
mock: {};
|
|
36
35
|
} ? DefaultArgs[T] : TArgs[T] : TArgs[T];
|
|
37
36
|
}>;
|
|
38
|
-
type ActionArgs<TArgs> = {
|
|
39
|
-
[P in keyof TArgs as TArgs[P] extends (...args: any[]) => any ? ((...args: any[]) => void) extends TArgs[P] ? P : never : never]: TArgs[P];
|
|
40
|
-
};
|
|
41
|
-
/**
|
|
42
|
-
* @deprecated Use `Meta` instead, e.g. ComponentMeta<typeof Button> -> Meta<typeof Button>.
|
|
43
|
-
*
|
|
44
|
-
* For the common case where a component's stories are simple components that receives args as props:
|
|
45
|
-
*
|
|
46
|
-
* ```tsx
|
|
47
|
-
* export default { ... } as ComponentMeta<typeof Button>;
|
|
48
|
-
* ```
|
|
49
|
-
*/
|
|
50
|
-
type ComponentMeta<T extends JSXElement> = Meta<ComponentProps<T>>;
|
|
51
|
-
/**
|
|
52
|
-
* @deprecated Use `StoryFn` instead, e.g. ComponentStoryFn<typeof Button> -> StoryFn<typeof Button>.
|
|
53
|
-
* Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories.
|
|
54
|
-
* You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
|
|
55
|
-
*
|
|
56
|
-
* For the common case where a (CSFv2) story is a simple component that receives args as props:
|
|
57
|
-
*
|
|
58
|
-
* ```tsx
|
|
59
|
-
* const Template: ComponentStoryFn<typeof Button> = (args) => <Button {...args} />
|
|
60
|
-
* ```
|
|
61
|
-
*/
|
|
62
|
-
type ComponentStoryFn<T extends JSXElement> = StoryFn<ComponentProps<T>>;
|
|
63
|
-
/**
|
|
64
|
-
* @deprecated Use `StoryObj` instead, e.g. ComponentStoryObj<typeof Button> -> StoryObj<typeof Button>.
|
|
65
|
-
*
|
|
66
|
-
* For the common case where a (CSFv3) story is a simple component that receives args as props:
|
|
67
|
-
*
|
|
68
|
-
* ```tsx
|
|
69
|
-
* const MyStory: ComponentStoryObj<typeof Button> = {
|
|
70
|
-
* args: { buttonArg1: 'val' },
|
|
71
|
-
* }
|
|
72
|
-
* ```
|
|
73
|
-
*/
|
|
74
|
-
type ComponentStoryObj<T extends JSXElement> = StoryObj<ComponentProps<T>>;
|
|
75
|
-
/**
|
|
76
|
-
* @deprecated Use `StoryFn` instead.
|
|
77
|
-
* Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories.
|
|
78
|
-
* You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
|
|
79
|
-
*
|
|
80
|
-
* Story function that represents a CSFv2 component example.
|
|
81
|
-
*
|
|
82
|
-
* @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
|
|
83
|
-
*/
|
|
84
|
-
type Story<TArgs = Args> = StoryFn<TArgs>;
|
|
85
|
-
/**
|
|
86
|
-
* @deprecated Use `StoryFn` instead, e.g. ComponentStory<typeof Button> -> StoryFn<typeof Button>.
|
|
87
|
-
* Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories
|
|
88
|
-
* You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/.
|
|
89
|
-
*
|
|
90
|
-
* For the common case where a (CSFv3) story is a simple component that receives args as props:
|
|
91
|
-
*
|
|
92
|
-
* ```tsx
|
|
93
|
-
* const MyStory: ComponentStory<typeof Button> = {
|
|
94
|
-
* args: { buttonArg1: 'val' },
|
|
95
|
-
* }
|
|
96
|
-
* ```
|
|
97
|
-
*/
|
|
98
|
-
type ComponentStory<T extends JSXElement> = ComponentStoryFn<T>;
|
|
99
|
-
/**
|
|
100
|
-
* @deprecated Use Decorator instead.
|
|
101
|
-
*/
|
|
102
|
-
type DecoratorFn = DecoratorFunction<ReactRenderer>;
|
|
103
37
|
type Decorator<TArgs = StrictArgs> = DecoratorFunction<ReactRenderer, TArgs>;
|
|
104
38
|
type Loader<TArgs = StrictArgs> = LoaderFunction<ReactRenderer, TArgs>;
|
|
105
39
|
type StoryContext<TArgs = StrictArgs> = StoryContext$1<ReactRenderer, TArgs>;
|
|
@@ -121,11 +55,6 @@ type Preview = ProjectAnnotations<ReactRenderer>;
|
|
|
121
55
|
* @param projectAnnotations - e.g. (import projectAnnotations from '../.storybook/preview')
|
|
122
56
|
*/
|
|
123
57
|
declare function setProjectAnnotations(projectAnnotations: ProjectAnnotations<ReactRenderer> | ProjectAnnotations<ReactRenderer>[]): void;
|
|
124
|
-
/** Preserved for users migrating from `@storybook/testing-react`.
|
|
125
|
-
*
|
|
126
|
-
* @deprecated Use setProjectAnnotations instead
|
|
127
|
-
*/
|
|
128
|
-
declare function setGlobalConfig(projectAnnotations: ProjectAnnotations<ReactRenderer> | ProjectAnnotations<ReactRenderer>[]): void;
|
|
129
58
|
/**
|
|
130
59
|
* Function that will receive a story along with meta (e.g. a default export from a .stories file)
|
|
131
60
|
* and optionally projectAnnotations e.g. (import * from '../.storybook/preview)
|
|
@@ -181,4 +110,4 @@ declare function composeStory<TArgs extends Args = Args>(story: StoryAnnotations
|
|
|
181
110
|
*/
|
|
182
111
|
declare function composeStories<TModule extends Store_CSFExports<ReactRenderer, any>>(csfExports: TModule, projectAnnotations?: ProjectAnnotations<ReactRenderer>): Omit<StoriesWithPartialProps<ReactRenderer, TModule>, keyof Store_CSFExports>;
|
|
183
112
|
|
|
184
|
-
export {
|
|
113
|
+
export { Decorator, Loader, Meta, Preview, ReactRenderer, StoryContext, StoryFn, StoryObj, composeStories, composeStory, setProjectAnnotations };
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
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,
|
|
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,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});
|
package/dist/index.mjs
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { render } from './chunk-ZRQXZGQH.mjs';
|
|
2
2
|
import { global } from '@storybook/global';
|
|
3
3
|
import { setProjectAnnotations as setProjectAnnotations$1, composeStory as composeStory$1, composeStories as composeStories$1 } from '@storybook/preview-api';
|
|
4
|
-
import { deprecate } from '@storybook/client-logger';
|
|
5
4
|
|
|
6
|
-
var{window:globalWindow}=global;globalWindow&&(globalWindow.STORYBOOK_ENV="react");function setProjectAnnotations(projectAnnotations){setProjectAnnotations$1(projectAnnotations);}
|
|
5
|
+
var{window:globalWindow}=global;globalWindow&&(globalWindow.STORYBOOK_ENV="react");function setProjectAnnotations(projectAnnotations){setProjectAnnotations$1(projectAnnotations);}var defaultProjectAnnotations={render};function composeStory(story,componentAnnotations,projectAnnotations,exportsName){return composeStory$1(story,componentAnnotations,projectAnnotations,defaultProjectAnnotations,exportsName)}function composeStories(csfExports,projectAnnotations){return composeStories$1(csfExports,projectAnnotations,composeStory)}typeof module<"u"&&module?.hot?.decline();
|
|
7
6
|
|
|
8
|
-
export { composeStories, composeStory,
|
|
7
|
+
export { composeStories, composeStory, setProjectAnnotations };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storybook/react",
|
|
3
|
-
"version": "8.0.0-alpha.
|
|
3
|
+
"version": "8.0.0-alpha.8",
|
|
4
4
|
"description": "Storybook React renderer",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"storybook"
|
|
@@ -47,12 +47,12 @@
|
|
|
47
47
|
"prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
|
|
48
48
|
},
|
|
49
49
|
"dependencies": {
|
|
50
|
-
"@storybook/client-logger": "8.0.0-alpha.
|
|
51
|
-
"@storybook/docs-tools": "8.0.0-alpha.
|
|
50
|
+
"@storybook/client-logger": "8.0.0-alpha.8",
|
|
51
|
+
"@storybook/docs-tools": "8.0.0-alpha.8",
|
|
52
52
|
"@storybook/global": "^5.0.0",
|
|
53
|
-
"@storybook/preview-api": "8.0.0-alpha.
|
|
54
|
-
"@storybook/react-dom-shim": "8.0.0-alpha.
|
|
55
|
-
"@storybook/types": "8.0.0-alpha.
|
|
53
|
+
"@storybook/preview-api": "8.0.0-alpha.8",
|
|
54
|
+
"@storybook/react-dom-shim": "8.0.0-alpha.8",
|
|
55
|
+
"@storybook/types": "8.0.0-alpha.8",
|
|
56
56
|
"@types/escodegen": "^0.0.6",
|
|
57
57
|
"@types/estree": "^0.0.51",
|
|
58
58
|
"@types/node": "^18.0.0",
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
},
|
|
71
71
|
"devDependencies": {
|
|
72
72
|
"@babel/core": "^7.23.2",
|
|
73
|
-
"@storybook/test": "8.0.0-alpha.
|
|
73
|
+
"@storybook/test": "8.0.0-alpha.8",
|
|
74
74
|
"@types/util-deprecate": "^1.0.0",
|
|
75
75
|
"expect-type": "^0.15.0",
|
|
76
76
|
"require-from-string": "^2.0.2"
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { fn } from '@storybook/test';
|
|
1
2
|
import { Button } from './Button';
|
|
2
3
|
|
|
3
4
|
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
|
|
@@ -14,6 +15,8 @@ export default {
|
|
|
14
15
|
argTypes: {
|
|
15
16
|
backgroundColor: { control: 'color' },
|
|
16
17
|
},
|
|
18
|
+
// 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
|
|
19
|
+
args: { onClick: fn() },
|
|
17
20
|
};
|
|
18
21
|
|
|
19
22
|
// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { fn } from '@storybook/test';
|
|
2
3
|
|
|
3
4
|
import { Button } from './Button';
|
|
4
5
|
|
|
@@ -16,6 +17,8 @@ const meta: Meta<typeof Button> = {
|
|
|
16
17
|
argTypes: {
|
|
17
18
|
backgroundColor: { control: 'color' },
|
|
18
19
|
},
|
|
20
|
+
// 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
|
|
21
|
+
args: { onClick: fn() },
|
|
19
22
|
};
|
|
20
23
|
|
|
21
24
|
export default meta;
|
|
@@ -9,9 +9,9 @@ type User = {
|
|
|
9
9
|
|
|
10
10
|
interface HeaderProps {
|
|
11
11
|
user?: User;
|
|
12
|
-
onLogin
|
|
13
|
-
onLogout
|
|
14
|
-
onCreateAccount
|
|
12
|
+
onLogin?: () => void;
|
|
13
|
+
onLogout?: () => void;
|
|
14
|
+
onCreateAccount?: () => void;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
-
|
|
2
|
+
import { fn } from '@storybook/test';
|
|
3
3
|
import { Button } from './Button';
|
|
4
4
|
|
|
5
5
|
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
|
|
@@ -16,6 +16,8 @@ const meta = {
|
|
|
16
16
|
argTypes: {
|
|
17
17
|
backgroundColor: { control: 'color' },
|
|
18
18
|
},
|
|
19
|
+
// 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
|
|
20
|
+
args: { onClick: fn() },
|
|
19
21
|
} satisfies Meta<typeof Button>;
|
|
20
22
|
|
|
21
23
|
export default meta;
|
|
@@ -9,9 +9,9 @@ type User = {
|
|
|
9
9
|
|
|
10
10
|
interface HeaderProps {
|
|
11
11
|
user?: User;
|
|
12
|
-
onLogin
|
|
13
|
-
onLogout
|
|
14
|
-
onCreateAccount
|
|
12
|
+
onLogin?: () => void;
|
|
13
|
+
onLogout?: () => void;
|
|
14
|
+
onCreateAccount?: () => void;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
|