@storybook/react 7.6.0-beta.2 → 8.0.0-alpha.0
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 +3 -13
- package/dist/index.js +1 -1
- package/dist/index.mjs +4 -4
- package/dist/preset.d.ts +3 -3
- package/dist/preset.js +1 -1
- package/package.json +7 -8
- package/template/cli/js/Button.stories.js +5 -5
- package/template/cli/js/Header.stories.js +2 -2
- package/template/cli/js/Page.stories.js +2 -2
- package/template/cli/ts-3-8/Button.stories.ts +5 -5
- package/template/cli/ts-3-8/Header.stories.ts +2 -2
- package/template/cli/ts-3-8/Page.stories.ts +2 -2
- package/template/cli/ts-4-9/Button.stories.ts +5 -5
- package/template/cli/ts-4-9/Header.stories.ts +2 -2
- package/template/cli/ts-4-9/Page.stories.ts +2 -2
package/dist/index.d.ts
CHANGED
|
@@ -1,19 +1,9 @@
|
|
|
1
1
|
import * as _storybook_types from '@storybook/types';
|
|
2
|
-
import {
|
|
2
|
+
import { Args, ComponentAnnotations, AnnotatedStoryFn, ArgsStoryFn, ArgsFromMeta, StoryAnnotations, DecoratorFunction, StrictArgs, 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 { R as ReactRenderer } from './types-0fc72a6d.js';
|
|
5
4
|
import { ComponentType, ComponentProps, JSXElementConstructor } from 'react';
|
|
6
5
|
import { Simplify, SetOptional } from 'type-fest';
|
|
7
|
-
|
|
8
|
-
interface ClientApi extends Addon_ClientStoryApi<ReactRenderer['storyResult']> {
|
|
9
|
-
configure(loader: Addon_Loadable, module: NodeModule): void;
|
|
10
|
-
forceReRender(): void;
|
|
11
|
-
raw: () => any;
|
|
12
|
-
}
|
|
13
|
-
declare const storiesOf: ClientApi['storiesOf'];
|
|
14
|
-
declare const configure: ClientApi['configure'];
|
|
15
|
-
declare const forceReRender: ClientApi['forceReRender'];
|
|
16
|
-
declare const raw: ClientApi['raw'];
|
|
6
|
+
import { R as ReactRenderer } from './types-0fc72a6d.js';
|
|
17
7
|
|
|
18
8
|
type JSXElement = keyof JSX.IntrinsicElements | JSXElementConstructor<any>;
|
|
19
9
|
/**
|
|
@@ -191,4 +181,4 @@ declare function composeStory<TArgs extends Args = Args>(story: StoryAnnotations
|
|
|
191
181
|
*/
|
|
192
182
|
declare function composeStories<TModule extends Store_CSFExports<ReactRenderer, any>>(csfExports: TModule, projectAnnotations?: ProjectAnnotations<ReactRenderer>): Omit<StoriesWithPartialProps<ReactRenderer, TModule>, keyof Store_CSFExports>;
|
|
193
183
|
|
|
194
|
-
export { ComponentMeta, ComponentStory, ComponentStoryFn, ComponentStoryObj, Decorator, DecoratorFn, Loader, Meta, Preview, ReactRenderer, Story, StoryContext, StoryFn, StoryObj, composeStories, composeStory,
|
|
184
|
+
export { ComponentMeta, ComponentStory, ComponentStoryFn, ComponentStoryObj, Decorator, DecoratorFn, Loader, Meta, Preview, ReactRenderer, Story, StoryContext, StoryFn, StoryObj, composeStories, composeStory, setGlobalConfig, 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,setGlobalConfig:()=>setGlobalConfig,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"),import_client_logger=require("@storybook/client-logger");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})};var Wrapper=FRAMEWORK_OPTIONS!=null&&FRAMEWORK_OPTIONS.strictMode?import_react.StrictMode:import_react.Fragment;function setProjectAnnotations(projectAnnotations){(0,import_preview_api.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_api.composeStory)(story,componentAnnotations,projectAnnotations,defaultProjectAnnotations,exportsName)}function composeStories(csfExports,projectAnnotations){return(0,import_preview_api.composeStories)(csfExports,projectAnnotations,composeStory)}var _a;typeof module<"u"&&((_a=module==null?void 0:module.hot)==null||_a.decline());0&&(module.exports={composeStories,composeStory,setGlobalConfig,setProjectAnnotations});
|
package/dist/index.mjs
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { render } from './chunk-JWY6Y6NU.mjs';
|
|
2
2
|
import { global } from '@storybook/global';
|
|
3
|
-
import {
|
|
3
|
+
import { setProjectAnnotations as setProjectAnnotations$1, composeStory as composeStory$1, composeStories as composeStories$1 } from '@storybook/preview-api';
|
|
4
4
|
import { deprecate } from '@storybook/client-logger';
|
|
5
5
|
|
|
6
|
-
var{window:globalWindow}=global;globalWindow&&(globalWindow.STORYBOOK_ENV="react");
|
|
6
|
+
var{window:globalWindow}=global;globalWindow&&(globalWindow.STORYBOOK_ENV="react");function setProjectAnnotations(projectAnnotations){setProjectAnnotations$1(projectAnnotations);}function setGlobalConfig(projectAnnotations){deprecate("setGlobalConfig is deprecated. Use setProjectAnnotations instead."),setProjectAnnotations(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
7
|
|
|
8
|
-
export { composeStories, composeStory,
|
|
8
|
+
export { composeStories, composeStory, setGlobalConfig, setProjectAnnotations };
|
package/dist/preset.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { PresetProperty } from '@storybook/types';
|
|
2
2
|
|
|
3
|
-
declare const addons:
|
|
4
|
-
declare const previewAnnotations:
|
|
3
|
+
declare const addons: PresetProperty<'addons'>;
|
|
4
|
+
declare const previewAnnotations: PresetProperty<'previewAnnotations'>;
|
|
5
5
|
|
|
6
6
|
export { addons, previewAnnotations };
|
package/dist/preset.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 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});
|
|
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,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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storybook/react",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "8.0.0-alpha.0",
|
|
4
4
|
"description": "Storybook React renderer",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"storybook"
|
|
@@ -47,13 +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": "
|
|
51
|
-
"@storybook/
|
|
52
|
-
"@storybook/docs-tools": "7.6.0-beta.2",
|
|
50
|
+
"@storybook/client-logger": "8.0.0-alpha.0",
|
|
51
|
+
"@storybook/docs-tools": "8.0.0-alpha.0",
|
|
53
52
|
"@storybook/global": "^5.0.0",
|
|
54
|
-
"@storybook/preview-api": "
|
|
55
|
-
"@storybook/react-dom-shim": "
|
|
56
|
-
"@storybook/types": "
|
|
53
|
+
"@storybook/preview-api": "8.0.0-alpha.0",
|
|
54
|
+
"@storybook/react-dom-shim": "8.0.0-alpha.0",
|
|
55
|
+
"@storybook/types": "8.0.0-alpha.0",
|
|
57
56
|
"@types/escodegen": "^0.0.6",
|
|
58
57
|
"@types/estree": "^0.0.51",
|
|
59
58
|
"@types/node": "^18.0.0",
|
|
@@ -71,7 +70,7 @@
|
|
|
71
70
|
},
|
|
72
71
|
"devDependencies": {
|
|
73
72
|
"@babel/core": "^7.23.2",
|
|
74
|
-
"@storybook/test": "
|
|
73
|
+
"@storybook/test": "8.0.0-alpha.0",
|
|
75
74
|
"@types/util-deprecate": "^1.0.0",
|
|
76
75
|
"expect-type": "^0.15.0",
|
|
77
76
|
"jest-specific-snapshot": "^8.0.0",
|
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
import { Button } from './Button';
|
|
2
2
|
|
|
3
|
-
// More on how to set up stories at: https://storybook.js.org/docs/
|
|
3
|
+
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
|
|
4
4
|
export default {
|
|
5
5
|
title: 'Example/Button',
|
|
6
6
|
component: Button,
|
|
7
7
|
parameters: {
|
|
8
|
-
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/
|
|
8
|
+
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
|
|
9
9
|
layout: 'centered',
|
|
10
10
|
},
|
|
11
|
-
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/
|
|
11
|
+
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
|
|
12
12
|
tags: ['autodocs'],
|
|
13
|
-
// More on argTypes: https://storybook.js.org/docs/
|
|
13
|
+
// More on argTypes: https://storybook.js.org/docs/api/argtypes
|
|
14
14
|
argTypes: {
|
|
15
15
|
backgroundColor: { control: 'color' },
|
|
16
16
|
},
|
|
17
17
|
};
|
|
18
18
|
|
|
19
|
-
// More on writing stories with args: https://storybook.js.org/docs/
|
|
19
|
+
// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
|
|
20
20
|
export const Primary = {
|
|
21
21
|
args: {
|
|
22
22
|
primary: true,
|
|
@@ -3,10 +3,10 @@ import { Header } from './Header';
|
|
|
3
3
|
export default {
|
|
4
4
|
title: 'Example/Header',
|
|
5
5
|
component: Header,
|
|
6
|
-
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/
|
|
6
|
+
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
|
|
7
7
|
tags: ['autodocs'],
|
|
8
8
|
parameters: {
|
|
9
|
-
// More on how to position stories at: https://storybook.js.org/docs/
|
|
9
|
+
// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
|
|
10
10
|
layout: 'fullscreen',
|
|
11
11
|
},
|
|
12
12
|
};
|
|
@@ -6,14 +6,14 @@ export default {
|
|
|
6
6
|
title: 'Example/Page',
|
|
7
7
|
component: Page,
|
|
8
8
|
parameters: {
|
|
9
|
-
// More on how to position stories at: https://storybook.js.org/docs/
|
|
9
|
+
// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
|
|
10
10
|
layout: 'fullscreen',
|
|
11
11
|
},
|
|
12
12
|
};
|
|
13
13
|
|
|
14
14
|
export const LoggedOut = {};
|
|
15
15
|
|
|
16
|
-
// More on interaction testing: https://storybook.js.org/docs/
|
|
16
|
+
// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
|
|
17
17
|
export const LoggedIn = {
|
|
18
18
|
play: async ({ canvasElement }) => {
|
|
19
19
|
const canvas = within(canvasElement);
|
|
@@ -2,17 +2,17 @@ import type { Meta, StoryObj } from '@storybook/react';
|
|
|
2
2
|
|
|
3
3
|
import { Button } from './Button';
|
|
4
4
|
|
|
5
|
-
// More on how to set up stories at: https://storybook.js.org/docs/
|
|
5
|
+
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
|
|
6
6
|
const meta: Meta<typeof Button> = {
|
|
7
7
|
title: 'Example/Button',
|
|
8
8
|
component: Button,
|
|
9
9
|
parameters: {
|
|
10
|
-
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/
|
|
10
|
+
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
|
|
11
11
|
layout: 'centered',
|
|
12
12
|
},
|
|
13
|
-
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/
|
|
13
|
+
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
|
|
14
14
|
tags: ['autodocs'],
|
|
15
|
-
// More on argTypes: https://storybook.js.org/docs/
|
|
15
|
+
// More on argTypes: https://storybook.js.org/docs/api/argtypes
|
|
16
16
|
argTypes: {
|
|
17
17
|
backgroundColor: { control: 'color' },
|
|
18
18
|
},
|
|
@@ -21,7 +21,7 @@ const meta: Meta<typeof Button> = {
|
|
|
21
21
|
export default meta;
|
|
22
22
|
type Story = StoryObj<typeof Button>;
|
|
23
23
|
|
|
24
|
-
// More on writing stories with args: https://storybook.js.org/docs/
|
|
24
|
+
// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
|
|
25
25
|
export const Primary: Story = {
|
|
26
26
|
args: {
|
|
27
27
|
primary: true,
|
|
@@ -5,10 +5,10 @@ import { Header } from './Header';
|
|
|
5
5
|
const meta: Meta<typeof Header> = {
|
|
6
6
|
title: 'Example/Header',
|
|
7
7
|
component: Header,
|
|
8
|
-
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/
|
|
8
|
+
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
|
|
9
9
|
tags: ['autodocs'],
|
|
10
10
|
parameters: {
|
|
11
|
-
// More on Story layout: https://storybook.js.org/docs/
|
|
11
|
+
// More on Story layout: https://storybook.js.org/docs/configure/story-layout
|
|
12
12
|
layout: 'fullscreen',
|
|
13
13
|
},
|
|
14
14
|
};
|
|
@@ -7,7 +7,7 @@ const meta: Meta<typeof Page> = {
|
|
|
7
7
|
title: 'Example/Page',
|
|
8
8
|
component: Page,
|
|
9
9
|
parameters: {
|
|
10
|
-
// More on Story layout: https://storybook.js.org/docs/
|
|
10
|
+
// More on Story layout: https://storybook.js.org/docs/configure/story-layout
|
|
11
11
|
layout: 'fullscreen',
|
|
12
12
|
},
|
|
13
13
|
};
|
|
@@ -17,7 +17,7 @@ type Story = StoryObj<typeof Page>;
|
|
|
17
17
|
|
|
18
18
|
export const LoggedOut: Story = {};
|
|
19
19
|
|
|
20
|
-
// More on interaction testing: https://storybook.js.org/docs/
|
|
20
|
+
// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
|
|
21
21
|
export const LoggedIn: Story = {
|
|
22
22
|
play: async ({ canvasElement }) => {
|
|
23
23
|
const canvas = within(canvasElement);
|
|
@@ -2,17 +2,17 @@ import type { Meta, StoryObj } from '@storybook/react';
|
|
|
2
2
|
|
|
3
3
|
import { Button } from './Button';
|
|
4
4
|
|
|
5
|
-
// More on how to set up stories at: https://storybook.js.org/docs/
|
|
5
|
+
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
|
|
6
6
|
const meta = {
|
|
7
7
|
title: 'Example/Button',
|
|
8
8
|
component: Button,
|
|
9
9
|
parameters: {
|
|
10
|
-
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/
|
|
10
|
+
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
|
|
11
11
|
layout: 'centered',
|
|
12
12
|
},
|
|
13
|
-
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/
|
|
13
|
+
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
|
|
14
14
|
tags: ['autodocs'],
|
|
15
|
-
// More on argTypes: https://storybook.js.org/docs/
|
|
15
|
+
// More on argTypes: https://storybook.js.org/docs/api/argtypes
|
|
16
16
|
argTypes: {
|
|
17
17
|
backgroundColor: { control: 'color' },
|
|
18
18
|
},
|
|
@@ -21,7 +21,7 @@ const meta = {
|
|
|
21
21
|
export default meta;
|
|
22
22
|
type Story = StoryObj<typeof meta>;
|
|
23
23
|
|
|
24
|
-
// More on writing stories with args: https://storybook.js.org/docs/
|
|
24
|
+
// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
|
|
25
25
|
export const Primary: Story = {
|
|
26
26
|
args: {
|
|
27
27
|
primary: true,
|
|
@@ -5,10 +5,10 @@ import { Header } from './Header';
|
|
|
5
5
|
const meta = {
|
|
6
6
|
title: 'Example/Header',
|
|
7
7
|
component: Header,
|
|
8
|
-
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/
|
|
8
|
+
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
|
|
9
9
|
tags: ['autodocs'],
|
|
10
10
|
parameters: {
|
|
11
|
-
// More on how to position stories at: https://storybook.js.org/docs/
|
|
11
|
+
// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
|
|
12
12
|
layout: 'fullscreen',
|
|
13
13
|
},
|
|
14
14
|
} satisfies Meta<typeof Header>;
|
|
@@ -7,7 +7,7 @@ const meta = {
|
|
|
7
7
|
title: 'Example/Page',
|
|
8
8
|
component: Page,
|
|
9
9
|
parameters: {
|
|
10
|
-
// More on how to position stories at: https://storybook.js.org/docs/
|
|
10
|
+
// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
|
|
11
11
|
layout: 'fullscreen',
|
|
12
12
|
},
|
|
13
13
|
} satisfies Meta<typeof Page>;
|
|
@@ -17,7 +17,7 @@ type Story = StoryObj<typeof meta>;
|
|
|
17
17
|
|
|
18
18
|
export const LoggedOut: Story = {};
|
|
19
19
|
|
|
20
|
-
// More on interaction testing: https://storybook.js.org/docs/
|
|
20
|
+
// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
|
|
21
21
|
export const LoggedIn: Story = {
|
|
22
22
|
play: async ({ canvasElement }) => {
|
|
23
23
|
const canvas = within(canvasElement);
|