diff --git a/code/core/src/csf/story.ts b/code/core/src/csf/story.ts index 0a128a1670a2..e29e3025883c 100644 --- a/code/core/src/csf/story.ts +++ b/code/core/src/csf/story.ts @@ -1,5 +1,6 @@ import type { RemoveIndexSignature, Simplify, UnionToIntersection } from 'type-fest'; +import type { ToolbarArgType } from '../toolbar'; import type { SBScalarType, SBType } from './SBType'; import type { CoreTypes } from './core-annotations'; @@ -144,6 +145,8 @@ export interface InputType { [key: string]: any; } +export type { ToolbarArgType }; + export interface StrictInputType extends InputType { name: string; type?: SBType; @@ -165,10 +168,10 @@ export interface Globals { [name: string]: any; } export interface GlobalTypes { - [name: string]: InputType; + [name: string]: ToolbarArgType; } export interface StrictGlobalTypes { - [name: string]: StrictInputType; + [name: string]: StrictInputType & ToolbarArgType; } export interface AddonTypes { diff --git a/code/core/src/manager-api/tests/globals.test.ts b/code/core/src/manager-api/tests/globals.test.ts index 8045ad2526c8..41a78348b585 100644 --- a/code/core/src/manager-api/tests/globals.test.ts +++ b/code/core/src/manager-api/tests/globals.test.ts @@ -11,6 +11,7 @@ import type { GlobalsUpdatedPayload, SetGlobalsPayload } from 'storybook/interna import { EventEmitter } from 'events'; +import type { ToolbarArgType } from '../../toolbar'; import { getEventMetadata as _getEventData } from '../lib/events'; import type { ModuleArgs } from '../lib/types'; import type { SubAPI } from '../modules/globals'; @@ -61,7 +62,7 @@ describe('globals API', () => { channel.emit(SET_GLOBALS, { globals: { a: 'b' }, - globalTypes: { a: { type: { name: 'string' } } }, + globalTypes: { a: { type: { name: 'string' } } as ToolbarArgType }, } satisfies SetGlobalsPayload); expect(store.getState()).toEqual({ userGlobals: { a: 'b' }, @@ -88,7 +89,7 @@ describe('globals API', () => { channel.emit(SET_GLOBALS, { globals: { a: 'b' }, - globalTypes: { a: { type: { name: 'string' } } }, + globalTypes: { a: { type: { name: 'string' } } as ToolbarArgType }, } satisfies SetGlobalsPayload); expect(store.getState()).toEqual({ userGlobals: { a: 'b' }, @@ -138,7 +139,7 @@ describe('globals API', () => { getEventMetadata.mockReturnValueOnce({ sourceType: 'external', ref: { id: 'ref' } } as any); channel.emit(SET_GLOBALS, { globals: { a: 'b' }, - globalTypes: { a: { type: { name: 'string' } } }, + globalTypes: { a: { type: { name: 'string' } } as ToolbarArgType }, } satisfies SetGlobalsPayload); expect(store.getState()).toEqual({ userGlobals: {}, diff --git a/code/core/src/preview-api/modules/store/GlobalsStore.test.ts b/code/core/src/preview-api/modules/store/GlobalsStore.test.ts index 8a5ed12aa697..2146e908c9c1 100644 --- a/code/core/src/preview-api/modules/store/GlobalsStore.test.ts +++ b/code/core/src/preview-api/modules/store/GlobalsStore.test.ts @@ -1,5 +1,6 @@ import { describe, expect, it, vi } from 'vitest'; +import type { ToolbarArgType } from '../../../toolbar'; import { GlobalsStore } from './GlobalsStore'; vi.mock('storybook/internal/client-logger', () => ({ @@ -33,8 +34,8 @@ describe('GlobalsStore', () => { arg2: 2, }, globalTypes: { - arg2: { defaultValue: 'arg2' }, - arg3: { defaultValue: { complex: { object: ['type'] } } }, + arg2: { defaultValue: 'arg2' } as ToolbarArgType, + arg3: { defaultValue: { complex: { object: ['type'] } } } as ToolbarArgType, }, }); @@ -48,7 +49,10 @@ describe('GlobalsStore', () => { describe('update', () => { it('changes the global args', () => { - const store = new GlobalsStore({ globals: { foo: 'old' }, globalTypes: { baz: {} } }); + const store = new GlobalsStore({ + globals: { foo: 'old' }, + globalTypes: { baz: {} as ToolbarArgType }, + }); store.update({ foo: 'bar' }); expect(store.get()).toEqual({ foo: 'bar' }); @@ -60,7 +64,7 @@ describe('GlobalsStore', () => { it('does not merge objects', () => { const store = new GlobalsStore({ globals: { obj: { foo: 'old' } }, - globalTypes: { baz: {} }, + globalTypes: { baz: {} as ToolbarArgType }, }); store.update({ obj: { foo: 'bar' } }); @@ -78,7 +82,7 @@ describe('GlobalsStore', () => { arg1: 'arg1', }, globalTypes: { - arg2: { defaultValue: 'arg2' }, + arg2: { defaultValue: 'arg2' } as ToolbarArgType, }, }); @@ -104,8 +108,8 @@ describe('GlobalsStore', () => { arg2: 2, }, globalTypes: { - arg2: { defaultValue: 'arg2' }, - arg3: { defaultValue: { complex: { object: ['type'] } } }, + arg2: { defaultValue: 'arg2' } as ToolbarArgType, + arg3: { defaultValue: { complex: { object: ['type'] } } } as ToolbarArgType, }, }); @@ -126,7 +130,7 @@ describe('GlobalsStore', () => { arg3: 'arg3', }, globalTypes: { - arg2: { defaultValue: 'arg2' }, + arg2: { defaultValue: 'arg2' } as ToolbarArgType, }, }); @@ -144,7 +148,7 @@ describe('GlobalsStore', () => { arg1: 'arg1', }, globalTypes: { - arg2: { defaultValue: 'arg2' }, + arg2: { defaultValue: 'arg2' } as ToolbarArgType, }, }); // However undeclared values aren't persisted @@ -162,7 +166,7 @@ describe('GlobalsStore', () => { arg4: 'arg4', }, globalTypes: { - arg2: { defaultValue: 'arg2' }, + arg2: { defaultValue: 'arg2' } as ToolbarArgType, }, }); @@ -186,7 +190,7 @@ describe('GlobalsStore', () => { arg4: 'edited-arg4', }, globalTypes: { - arg5: { defaultValue: 'edited-arg5' }, + arg5: { defaultValue: 'edited-arg5' } as ToolbarArgType, }, }); // However undeclared values aren't persisted diff --git a/code/core/src/preview-api/modules/store/csf/normalizeProjectAnnotations.ts b/code/core/src/preview-api/modules/store/csf/normalizeProjectAnnotations.ts index ecdd6046f18e..6cf3a46f256e 100644 --- a/code/core/src/preview-api/modules/store/csf/normalizeProjectAnnotations.ts +++ b/code/core/src/preview-api/modules/store/csf/normalizeProjectAnnotations.ts @@ -3,6 +3,7 @@ import type { NormalizedProjectAnnotations, ProjectAnnotations, Renderer, + StrictGlobalTypes, } from 'storybook/internal/types'; import { inferArgTypes } from '../inferArgTypes'; @@ -27,7 +28,7 @@ export function normalizeProjectAnnotations({ }: ProjectAnnotations): NormalizedProjectAnnotations { return { ...(argTypes && { argTypes: normalizeInputTypes(argTypes as ArgTypes) }), - ...(globalTypes && { globalTypes: normalizeInputTypes(globalTypes) }), + ...(globalTypes && { globalTypes: normalizeInputTypes(globalTypes) as StrictGlobalTypes }), decorators: normalizeArrays(decorators), loaders: normalizeArrays(loaders), beforeEach: normalizeArrays(beforeEach), diff --git a/code/core/src/preview-api/modules/store/csf/portable-stories.test.ts b/code/core/src/preview-api/modules/store/csf/portable-stories.test.ts index 8e1a40527a45..6fe6c3279960 100644 --- a/code/core/src/preview-api/modules/store/csf/portable-stories.test.ts +++ b/code/core/src/preview-api/modules/store/csf/portable-stories.test.ts @@ -8,6 +8,7 @@ import type { StoryAnnotationsOrFn as Story, } from 'storybook/internal/types'; +import type { ToolbarArgType } from '../../../../toolbar'; import * as defaultExportAnnotations from './__mocks__/defaultExportAnnotations.mockfile'; import * as namedExportAnnotations from './__mocks__/namedExportAnnotations.mockfile'; import { composeStories, composeStory, setProjectAnnotations } from './portable-stories'; @@ -102,7 +103,7 @@ describe('composeStory', () => { const projectAnnotations = { parameters: { injected: true }, globalTypes: { - locale: { defaultValue: 'en' }, + locale: { defaultValue: 'en' } as ToolbarArgType, }, decorators: [decoratorFromProjectAnnotations], tags: ['projectTag'], @@ -235,7 +236,7 @@ describe('composeStory', () => { theme: { name: 'Theme', defaultValue: 'light', - }, + } as ToolbarArgType, }, }; diff --git a/code/core/src/types/modules/csf.ts b/code/core/src/types/modules/csf.ts index ad2891060eca..5ec8314f15c3 100644 --- a/code/core/src/types/modules/csf.ts +++ b/code/core/src/types/modules/csf.ts @@ -65,6 +65,7 @@ export type { StrictGlobalTypes, StrictInputType, Tag, + ToolbarArgType, } from 'storybook/internal/csf'; type OrString = T | (string & {}); diff --git a/code/renderers/svelte/src/__test__/composeStories/portable-stories.test.ts b/code/renderers/svelte/src/__test__/composeStories/portable-stories.test.ts index fb4d5d3ab017..0778c899efa0 100644 --- a/code/renderers/svelte/src/__test__/composeStories/portable-stories.test.ts +++ b/code/renderers/svelte/src/__test__/composeStories/portable-stories.test.ts @@ -3,6 +3,8 @@ import { cleanup, render, screen } from '@testing-library/svelte'; import { afterEach, describe, expect, it } from 'vitest'; +import type { ToolbarArgType } from 'storybook/internal/csf'; + // import '@testing-library/svelte/vitest'; import { expectTypeOf } from 'expect-type'; @@ -70,7 +72,7 @@ describe('projectAnnotations', () => { { parameters: { injected: true }, globalTypes: { - locale: { defaultValue: 'en' }, + locale: { defaultValue: 'en' } as ToolbarArgType, }, }, ]);