storybook 9.0.0-alpha.2 → 9.0.0-alpha.21

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.
Files changed (162) hide show
  1. package/README.md +1 -1
  2. package/assets/docs/addon-backgrounds.gif +0 -0
  3. package/assets/docs/addon-controls-args-annotated.png +0 -0
  4. package/assets/docs/addon-controls-args-background-color.png +0 -0
  5. package/assets/docs/addon-controls-args-background-string.png +0 -0
  6. package/assets/docs/addon-controls-args-docs.png +0 -0
  7. package/assets/docs/addon-controls-args-logging.png +0 -0
  8. package/assets/docs/addon-controls-args-no-annotation.png +0 -0
  9. package/assets/docs/addon-controls-args-reflow-slider.png +0 -0
  10. package/assets/docs/addon-controls-args-reflow.png +0 -0
  11. package/assets/docs/addon-controls-args-template.png +0 -0
  12. package/assets/docs/addon-controls-expanded.png +0 -0
  13. package/assets/docs/addon-controls-hero.gif +0 -0
  14. package/assets/docs/addon-controls-install.png +0 -0
  15. package/assets/docs/hero.gif +0 -0
  16. package/assets/docs/highlight.png +0 -0
  17. package/assets/docs/viewport.png +0 -0
  18. package/assets/server/base-preview-head.html +1 -3
  19. package/bin/index.cjs +2 -2
  20. package/dist/actions/decorator.d.ts +6 -0
  21. package/dist/actions/decorator.js +134 -0
  22. package/dist/actions/index.cjs +123 -0
  23. package/dist/actions/index.d.ts +102 -0
  24. package/dist/actions/index.js +108 -0
  25. package/dist/actions/preview.cjs +161 -0
  26. package/dist/actions/preview.d.ts +54 -0
  27. package/dist/actions/preview.js +152 -0
  28. package/dist/babel/index.cjs +822 -816
  29. package/dist/babel/index.js +822 -816
  30. package/dist/backgrounds/index.cjs +148 -0
  31. package/dist/backgrounds/index.d.ts +91 -0
  32. package/dist/backgrounds/index.js +130 -0
  33. package/dist/backgrounds/preview.cjs +143 -0
  34. package/dist/backgrounds/preview.d.ts +54 -0
  35. package/dist/backgrounds/preview.js +127 -0
  36. package/dist/bin/index.cjs +49 -70
  37. package/dist/bin/index.js +49 -70
  38. package/dist/builder-manager/index.cjs +319 -326
  39. package/dist/builder-manager/index.js +576 -583
  40. package/dist/channels/index.cjs +1026 -981
  41. package/dist/channels/index.js +1258 -1207
  42. package/dist/cli/bin/index.cjs +483 -483
  43. package/dist/cli/bin/index.js +495 -495
  44. package/dist/cli/index.cjs +61735 -7590
  45. package/dist/cli/index.d.ts +25 -21
  46. package/dist/cli/index.js +61776 -7631
  47. package/dist/client-logger/index.cjs +56 -88
  48. package/dist/client-logger/index.js +41 -47
  49. package/dist/common/index.cjs +16137 -9085
  50. package/dist/common/index.d.ts +35 -30
  51. package/dist/common/index.js +16230 -9172
  52. package/dist/component-testing/index.cjs +23 -0
  53. package/dist/component-testing/index.d.ts +3 -0
  54. package/dist/component-testing/index.js +5 -0
  55. package/dist/component-testing/preview.cjs +40 -0
  56. package/dist/component-testing/preview.d.ts +5 -0
  57. package/dist/component-testing/preview.js +25 -0
  58. package/dist/components/index.cjs +16268 -24926
  59. package/dist/components/index.d.ts +98 -347
  60. package/dist/components/index.js +5905 -19177
  61. package/dist/controls/decorator.d.ts +5 -0
  62. package/dist/controls/decorator.js +8 -0
  63. package/dist/controls/index.cjs +26 -0
  64. package/dist/controls/index.d.ts +39 -0
  65. package/dist/controls/index.js +6 -0
  66. package/dist/controls/preview.cjs +26 -0
  67. package/dist/controls/preview.d.ts +54 -0
  68. package/dist/controls/preview.js +9 -0
  69. package/dist/core-events/index.cjs +91 -106
  70. package/dist/core-events/index.d.ts +139 -104
  71. package/dist/core-events/index.js +79 -94
  72. package/dist/core-server/index.cjs +13898 -13409
  73. package/dist/core-server/index.d.ts +270 -3
  74. package/dist/core-server/index.js +13981 -13497
  75. package/dist/core-server/presets/common-manager.css +170 -0
  76. package/dist/core-server/presets/common-manager.js +12149 -17
  77. package/dist/core-server/presets/common-preset.cjs +3009 -3155
  78. package/dist/core-server/presets/common-preset.js +2862 -3009
  79. package/dist/csf/index.cjs +76 -120
  80. package/dist/csf/index.d.ts +2 -6
  81. package/dist/csf/index.js +69 -113
  82. package/dist/csf-tools/index.cjs +412 -403
  83. package/dist/csf-tools/index.d.ts +0 -4
  84. package/dist/csf-tools/index.js +410 -401
  85. package/dist/docs-tools/index.cjs +2569 -575
  86. package/dist/docs-tools/index.d.ts +2 -2
  87. package/dist/docs-tools/index.js +2565 -564
  88. package/dist/highlight/index.cjs +27 -0
  89. package/dist/highlight/index.d.ts +61 -0
  90. package/dist/highlight/index.js +7 -0
  91. package/dist/highlight/preview.cjs +535 -0
  92. package/dist/highlight/preview.d.ts +54 -0
  93. package/dist/highlight/preview.js +519 -0
  94. package/dist/instrumenter/index.cjs +2207 -2342
  95. package/dist/instrumenter/index.d.ts +8 -7
  96. package/dist/instrumenter/index.js +2430 -2603
  97. package/dist/manager/globals-module-info.cjs +291 -151
  98. package/dist/manager/globals-module-info.d.ts +1 -1
  99. package/dist/manager/globals-module-info.js +275 -135
  100. package/dist/manager/globals-runtime.js +60263 -28383
  101. package/dist/manager/globals.cjs +23 -19
  102. package/dist/manager/globals.d.ts +8 -5
  103. package/dist/manager/globals.js +10 -6
  104. package/dist/manager/runtime.js +4625 -3921
  105. package/dist/manager-api/index.cjs +4228 -3833
  106. package/dist/manager-api/index.d.ts +398 -102
  107. package/dist/manager-api/index.js +3500 -3084
  108. package/dist/manager-errors.d.ts +25 -1
  109. package/dist/manager-errors.js +50 -30
  110. package/dist/measure/index.cjs +476 -0
  111. package/dist/measure/index.d.ts +66 -0
  112. package/dist/measure/index.js +464 -0
  113. package/dist/measure/preview.cjs +466 -0
  114. package/dist/measure/preview.d.ts +59 -0
  115. package/dist/measure/preview.js +450 -0
  116. package/dist/outline/index.cjs +528 -0
  117. package/dist/outline/index.d.ts +66 -0
  118. package/dist/outline/index.js +500 -0
  119. package/dist/outline/preview.cjs +518 -0
  120. package/dist/outline/preview.d.ts +59 -0
  121. package/dist/outline/preview.js +486 -0
  122. package/dist/preview/globals.cjs +21 -17
  123. package/dist/preview/globals.d.ts +4 -1
  124. package/dist/preview/globals.js +6 -2
  125. package/dist/preview/runtime.js +46311 -6614
  126. package/dist/preview-api/index.cjs +1363 -1899
  127. package/dist/preview-api/index.d.ts +81 -395
  128. package/dist/preview-api/index.js +1711 -2169
  129. package/dist/preview-errors.cjs +119 -88
  130. package/dist/preview-errors.d.ts +30 -2
  131. package/dist/preview-errors.js +192 -142
  132. package/dist/router/index.cjs +847 -871
  133. package/dist/router/index.js +193 -199
  134. package/dist/server-errors.cjs +188 -124
  135. package/dist/server-errors.d.ts +36 -2
  136. package/dist/server-errors.js +188 -124
  137. package/dist/telemetry/index.cjs +1056 -1979
  138. package/dist/telemetry/index.d.ts +26 -5
  139. package/dist/telemetry/index.js +1091 -2010
  140. package/dist/test/index.cjs +35686 -0
  141. package/dist/test/index.d.ts +186 -0
  142. package/dist/test/index.js +33840 -0
  143. package/dist/test/preview.cjs +15870 -0
  144. package/dist/test/preview.d.ts +48 -0
  145. package/dist/test/preview.js +14501 -0
  146. package/dist/test/spy.cjs +258 -0
  147. package/dist/test/spy.d.ts +66 -0
  148. package/dist/test/spy.js +240 -0
  149. package/dist/theming/create.cjs +79 -2269
  150. package/dist/theming/create.js +67 -841
  151. package/dist/theming/index.cjs +1065 -3232
  152. package/dist/theming/index.js +951 -1719
  153. package/dist/types/index.cjs +11 -12
  154. package/dist/types/index.d.ts +684 -163
  155. package/dist/types/index.js +1 -2
  156. package/dist/viewport/index.cjs +310 -0
  157. package/dist/viewport/index.d.ts +320 -0
  158. package/dist/viewport/index.js +290 -0
  159. package/dist/viewport/preview.cjs +35 -0
  160. package/dist/viewport/preview.d.ts +68 -0
  161. package/dist/viewport/preview.js +19 -0
  162. package/package.json +359 -12
@@ -2,11 +2,11 @@ import React, { FC, ReactNode, ReactElement, Component } from 'react';
2
2
  import { Channel, Listener as Listener$1 } from 'storybook/internal/channels';
3
3
  export { Listener as ChannelListener } from 'storybook/internal/channels';
4
4
  import { RouterData, NavigateOptions } from 'storybook/internal/router';
5
- import { Addon_Types, Addon_TypesEnum, Addon_Collection, Addon_TypesMapping, Addon_BaseType, Addon_SidebarTopType, Addon_SidebarBottomType, Addon_TestProviderType, Addon_PageType, Addon_WrapperType, Addon_Config, API_ProviderData, API_StateMerger, API_Provider, StoryId, Globals, GlobalTypes, API_PanelPositions, API_Layout, API_UI, API_Notification, API_IframeRenderer, API_ComposedRef, API_SetRefData, API_ComposedRefUpdate, API_Refs, API_Settings, API_HashEntry, API_ViewMode, API_LeafEntry, API_PreparedStoryIndex, API_StoryEntry, Args, API_IndexHash, API_DocsEntry, API_StatusObject, API_StatusUpdate, API_StatusState, API_FilterFunction, API_LoadedRefData, API_Version, API_Versions, API_UnknownEntries, API_OptionsData, Parameters, ArgTypes } from 'storybook/internal/types';
5
+ import { Addon_Types, Addon_TypesEnum, Addon_Collection, Addon_TypesMapping, Addon_BaseType, Addon_TestProviderType, Addon_PageType, Addon_WrapperType, Addon_Config, API_ProviderData, API_StateMerger, API_Provider, Globals, GlobalTypes, API_PanelPositions, API_Layout, API_UI, API_Notification, API_IframeRenderer, API_ComposedRef, API_SetRefData, API_ComposedRefUpdate, API_Refs, StoryId, API_Settings, API_HashEntry, API_ViewMode, API_LeafEntry, API_PreparedStoryIndex, API_StoryEntry, Args, API_IndexHash, API_DocsEntry, API_FilterFunction, API_LoadedRefData, API_Version, API_Versions, API_UnknownEntries, API_OptionsData, Parameters, ArgTypes, NormalizedProjectAnnotations, ProjectAnnotations, ComposedStoryFn } from 'storybook/internal/types';
6
6
  export { Addon_Type as Addon, API_ComponentEntry as ComponentEntry, API_ComposedRef as ComposedRef, API_DocsEntry as DocsEntry, API_GroupEntry as GroupEntry, API_HashEntry as HashEntry, API_IndexHash as IndexHash, API_LeafEntry as LeafEntry, API_Refs as Refs, API_RootEntry as RootEntry, API_IndexHash as StoriesHash, API_StoryEntry as StoryEntry } from 'storybook/internal/types';
7
- import { TestProviderState, TestProviderId, TestProviders, WhatsNewData } from 'storybook/internal/core-events';
8
- import { ThemeVars } from 'storybook/internal/theming';
9
- import { toId } from 'storybook/internal/csf';
7
+ import { ThemeVars } from 'storybook/theming';
8
+ import { toId, StoryId as StoryId$1 } from 'storybook/internal/csf';
9
+ import { WhatsNewData } from 'storybook/internal/core-events';
10
10
 
11
11
  declare function mockChannel(): Channel;
12
12
 
@@ -22,7 +22,7 @@ declare class AddonStore {
22
22
  ready: () => Promise<Channel>;
23
23
  hasChannel: () => boolean;
24
24
  setChannel: (channel: Channel) => void;
25
- getElements<T extends Addon_Types | Addon_TypesEnum.experimental_PAGE | Addon_TypesEnum.experimental_SIDEBAR_BOTTOM | Addon_TypesEnum.experimental_SIDEBAR_TOP | Addon_TypesEnum.experimental_TEST_PROVIDER>(type: T): Addon_Collection<Addon_TypesMapping[T]> | any;
25
+ getElements<T extends Addon_Types | Addon_TypesEnum.experimental_PAGE | Addon_TypesEnum.experimental_TEST_PROVIDER>(type: T): Addon_Collection<Addon_TypesMapping[T]> | any;
26
26
  /**
27
27
  * Adds an addon to the addon store.
28
28
  *
@@ -30,7 +30,7 @@ declare class AddonStore {
30
30
  * @param {Addon_Type} addon - The addon to add.
31
31
  * @returns {void}
32
32
  */
33
- add(id: string, addon: Addon_BaseType | Omit<Addon_SidebarTopType, 'id'> | Omit<Addon_SidebarBottomType, 'id'> | Omit<Addon_TestProviderType, 'id'> | Omit<Addon_PageType, 'id'> | Omit<Addon_WrapperType, 'id'>): void;
33
+ add(id: string, addon: Addon_BaseType | Omit<Addon_TestProviderType, 'id'> | Omit<Addon_PageType, 'id'> | Omit<Addon_WrapperType, 'id'>): void;
34
34
  setConfig: (value: Addon_Config) => void;
35
35
  getConfig: () => Addon_Config;
36
36
  /**
@@ -81,7 +81,7 @@ type ModuleArgs = RouterData & API_ProviderData<API> & {
81
81
  store: Store;
82
82
  };
83
83
 
84
- interface SubAPI$d {
84
+ interface SubAPI$c {
85
85
  /**
86
86
  * Returns a collection of elements of a specific type.
87
87
  *
@@ -91,7 +91,7 @@ interface SubAPI$d {
91
91
  * @returns {Addon_Collection<T>} - A collection of elements of the specified type.
92
92
  * @protected This is used internally in storybook's manager.
93
93
  */
94
- getElements: <T extends Addon_Types | Addon_TypesEnum.experimental_PAGE | Addon_TypesEnum.experimental_SIDEBAR_BOTTOM | Addon_TypesEnum.experimental_TEST_PROVIDER | Addon_TypesEnum.experimental_SIDEBAR_TOP = Addon_Types>(type: T) => Addon_Collection<Addon_TypesMapping[T]>;
94
+ getElements: <T extends Addon_Types | Addon_TypesEnum.experimental_PAGE | Addon_TypesEnum.experimental_TEST_PROVIDER>(type: T) => Addon_Collection<Addon_TypesMapping[T]>;
95
95
  /**
96
96
  * Returns the id of the currently selected panel.
97
97
  *
@@ -128,7 +128,7 @@ interface SubAPI$d {
128
128
  getAddonState<S>(addonId: string): S;
129
129
  }
130
130
 
131
- interface SubAPI$c {
131
+ interface SubAPI$b {
132
132
  /**
133
133
  * Returns the channel object.
134
134
  *
@@ -171,20 +171,6 @@ interface SubAPI$c {
171
171
  once: (type: string, handler: Listener$1) => void;
172
172
  }
173
173
 
174
- type SubState$a = {
175
- testProviders: TestProviders;
176
- };
177
- interface RunOptions {
178
- entryId?: StoryId;
179
- }
180
- type SubAPI$b = {
181
- getTestProviderState(id: string): TestProviderState | undefined;
182
- updateTestProviderState(id: TestProviderId, update: Partial<TestProviderState>): void;
183
- clearTestProviderState(id: TestProviderId): void;
184
- runTestProvider(id: TestProviderId, options?: RunOptions): () => void;
185
- cancelTestProvider(id: TestProviderId): void;
186
- };
187
-
188
174
  interface SubState$9 {
189
175
  globals?: Globals;
190
176
  userGlobals?: Globals;
@@ -391,7 +377,7 @@ interface SubState$5 {
391
377
 
392
378
  declare const isMacLike: () => boolean;
393
379
  declare const controlOrMetaSymbol: () => "⌘" | "ctrl";
394
- declare const controlOrMetaKey: () => "control" | "meta";
380
+ declare const controlOrMetaKey: () => "meta" | "control";
395
381
  declare const optionOrAltSymbol: () => "⌥" | "alt";
396
382
  declare const isShortcutTaken: (arr1: string[], arr2: string[]) => boolean;
397
383
  type KeyboardEventLike = Pick<KeyboardEvent, 'altKey' | 'ctrlKey' | 'metaKey' | 'shiftKey' | 'key' | 'code' | 'keyCode' | 'preventDefault'>;
@@ -507,7 +493,6 @@ interface SubState$3 extends API_LoadedRefData {
507
493
  storyId: StoryId;
508
494
  internal_index?: API_PreparedStoryIndex;
509
495
  viewMode: API_ViewMode;
510
- status: API_StatusState;
511
496
  filters: Record<string, API_FilterFunction>;
512
497
  }
513
498
  interface SubAPI$3 {
@@ -652,6 +637,14 @@ interface SubAPI$3 {
652
637
  * @returns {StoryId} The ID of the leaf story, or null if no leaf story was found.
653
638
  */
654
639
  findLeafStoryId(index: API_IndexHash, storyId: StoryId): StoryId;
640
+ /**
641
+ * Finds all the leaf story IDs for the given entry ID in the given index.
642
+ *
643
+ * @param {StoryId} entryId - The ID of the entry to find the leaf story IDs for.
644
+ * @returns {StoryId[]} The IDs of all the leaf stories, or an empty array if no leaf stories were
645
+ * found.
646
+ */
647
+ findAllLeafStoryIds(entryId: string): StoryId[];
655
648
  /**
656
649
  * Finds the ID of the sibling story in the given direction for the given story ID in the given
657
650
  * story index.
@@ -694,20 +687,6 @@ interface SubAPI$3 {
694
687
  * @returns {Promise<void>} A promise that resolves when the preview has been set as initialized.
695
688
  */
696
689
  setPreviewInitialized: (ref?: API_ComposedRef) => Promise<void>;
697
- /**
698
- * Returns the current status of the stories.
699
- *
700
- * @returns {API_StatusState} The current status of the stories.
701
- */
702
- getCurrentStoryStatus: () => Record<string, API_StatusObject>;
703
- /**
704
- * Updates the status of a collection of stories.
705
- *
706
- * @param {string} addonId - The ID of the addon to update.
707
- * @param {StatusUpdate} update - An object containing the updated status information.
708
- * @returns {Promise<void>} A promise that resolves when the status has been updated.
709
- */
710
- experimental_updateStatus: (addonId: string, update: API_StatusUpdate | ((state: API_StatusState) => API_StatusUpdate)) => Promise<void>;
711
690
  /**
712
691
  * Updates the filtering of the index.
713
692
  *
@@ -833,6 +812,67 @@ declare const experimental_requestResponse: <RequestPayload, ResponsePayload = v
833
812
 
834
813
  declare const _default: <TObj = any>(a: TObj, ...b: Partial<TObj>[]) => TObj;
835
814
 
815
+ declare const ActiveTabs: {
816
+ SIDEBAR: "sidebar";
817
+ CANVAS: "canvas";
818
+ ADDONS: "addons";
819
+ };
820
+
821
+ declare const ManagerContext: React.Context<{
822
+ api: API;
823
+ state: State;
824
+ }>;
825
+ type State = SubState$8 & SubState$3 & SubState$6 & SubState$7 & SubState$1 & SubState$2 & SubState$4 & SubState$5 & SubState$9 & SubState & RouterData & API_OptionsData & Other;
826
+ type API = SubAPI$c & SubAPI$b & SubAPI$7 & SubAPI$3 & SubAPI$6 & SubAPI$a & SubAPI$9 & SubAPI$8 & SubAPI$4 & SubAPI$5 & SubAPI$1 & SubAPI$2 & SubAPI & Other;
827
+ interface Other {
828
+ [key: string]: any;
829
+ }
830
+ interface Combo {
831
+ api: API;
832
+ state: State;
833
+ }
834
+ type ManagerProviderProps = RouterData & API_ProviderData<API> & {
835
+ children: ReactNode | FC<Combo>;
836
+ };
837
+ declare const combineParameters: (...parameterSets: Parameters[]) => {};
838
+ declare class ManagerProvider extends Component<ManagerProviderProps, State> {
839
+ api: API;
840
+ modules: ReturnType<ModuleFn>[];
841
+ static displayName: string;
842
+ constructor(props: ManagerProviderProps);
843
+ static getDerivedStateFromProps(props: ManagerProviderProps, state: State): State;
844
+ shouldComponentUpdate(nextProps: ManagerProviderProps, nextState: State): boolean;
845
+ initModules: () => void;
846
+ render(): React.JSX.Element;
847
+ }
848
+ interface ManagerConsumerProps<P = unknown> {
849
+ filter?: (combo: Combo) => P;
850
+ children: FC<P> | ReactNode;
851
+ }
852
+ declare function ManagerConsumer<P = Combo>({ filter, children, }: ManagerConsumerProps<P>): ReactElement;
853
+ declare function useStorybookState(): State;
854
+ declare function useStorybookApi(): API;
855
+
856
+ interface API_EventMap {
857
+ [eventId: string]: Listener$1;
858
+ }
859
+ declare const useChannel: (eventMap: API_EventMap, deps?: any[]) => (type: string, ...args: any[]) => void;
860
+ declare function useStoryPrepared(storyId?: StoryId): boolean;
861
+ declare function useParameter<S>(parameterKey: string, defaultValue?: S): S;
862
+ declare function useSharedState<S>(stateId: string, defaultState?: S): [S, (newStateOrMerger: S | API_StateMerger<S>, options?: Options) => void];
863
+ declare function useAddonState<S>(addonId: string, defaultState?: S): [S, (newStateOrMerger: S | API_StateMerger<S>, options?: Options) => void];
864
+ declare function useArgs(): [Args, (newArgs: Args) => void, (argNames?: string[]) => void, Args];
865
+ declare function useGlobals(): [
866
+ globals: Globals,
867
+ updateGlobals: (newGlobals: Globals) => void,
868
+ storyGlobals: Globals,
869
+ userGlobals: Globals
870
+ ];
871
+ declare function useGlobalTypes(): ArgTypes;
872
+ declare function useArgTypes(): ArgTypes;
873
+
874
+ declare const typesX: typeof Addon_TypesEnum;
875
+
836
876
  type EnvironmentType = (typeof UniversalStore.Environment)[keyof typeof UniversalStore.Environment];
837
877
  type StatusType = (typeof UniversalStore.Status)[keyof typeof UniversalStore.Status];
838
878
  type StateUpdater<TState> = (prevState: TState) => TState;
@@ -1080,7 +1120,7 @@ declare class UniversalStore<State, CustomEvent extends {
1080
1120
  * @param universalStore The UniversalStore instance to use.
1081
1121
  * @param selector An optional selector function to select a subset of the store state.
1082
1122
  * @remark This hook is intended for use in the manager UI. For use in the preview, import from
1083
- * `storybook/internal/preview-api` instead.
1123
+ * `storybook/preview-api` instead.
1084
1124
  */
1085
1125
  declare const useUniversalStore: {
1086
1126
  <TUniversalStore extends UniversalStore<TState, any>, TState = TUniversalStore extends UniversalStore<infer S, any> ? S : never>(universalStore: TUniversalStore): [TState, TUniversalStore['setState']];
@@ -1103,7 +1143,7 @@ declare const useUniversalStore: {
1103
1143
  * @example
1104
1144
  *
1105
1145
  * ```ts
1106
- * import * as testUtils from '@storybook/test'; // in stories
1146
+ * import * as testUtils from 'storybook/test'; // in stories
1107
1147
  * import { vi as testUtils } from 'vitest'; // ... or in Vitest tests
1108
1148
  *
1109
1149
  * const initialState = { ... };
@@ -1139,73 +1179,329 @@ declare class MockUniversalStore<State, CustomEvent extends {
1139
1179
  unsubscribeAll(): void;
1140
1180
  }
1141
1181
 
1142
- declare const ActiveTabs: {
1143
- SIDEBAR: "sidebar";
1144
- CANVAS: "canvas";
1145
- ADDONS: "addons";
1182
+ type StatusValue = 'status-value:pending' | 'status-value:success' | 'status-value:error' | 'status-value:warning' | 'status-value:unknown';
1183
+ type StatusTypeId = string;
1184
+ type StatusByTypeId = Record<StatusTypeId, Status>;
1185
+ type StatusesByStoryIdAndTypeId = Record<StoryId$1, StatusByTypeId>;
1186
+ interface Status {
1187
+ value: StatusValue;
1188
+ typeId: StatusTypeId;
1189
+ storyId: StoryId$1;
1190
+ title: string;
1191
+ description: string;
1192
+ data?: any;
1193
+ sidebarContextMenu?: boolean;
1194
+ }
1195
+ declare const StatusStoreEventType: {
1196
+ readonly SELECT: "select";
1197
+ };
1198
+ type StatusStoreEvent = {
1199
+ type: typeof StatusStoreEventType.SELECT;
1200
+ payload: Status[];
1201
+ };
1202
+ type StatusStore = {
1203
+ getAll: () => StatusesByStoryIdAndTypeId;
1204
+ set: (statuses: Status[]) => void;
1205
+ onAllStatusChange: (listener: (statuses: StatusesByStoryIdAndTypeId, previousStatuses: StatusesByStoryIdAndTypeId) => void) => () => void;
1206
+ onSelect: (listener: (selectedStatuses: Status[]) => void) => () => void;
1207
+ unset: (storyIds?: StoryId$1[]) => void;
1208
+ };
1209
+ type StatusStoreByTypeId = StatusStore & {
1210
+ typeId: StatusTypeId;
1146
1211
  };
1212
+ type UseStatusStore = <T = StatusesByStoryIdAndTypeId>(selector?: (statuses: StatusesByStoryIdAndTypeId) => T) => T;
1147
1213
 
1148
- declare const ManagerContext: React.Context<{
1149
- api: API;
1150
- state: State;
1151
- }>;
1152
- type State = SubState$8 & SubState$3 & SubState$6 & SubState$7 & SubState$a & SubState$1 & SubState$2 & SubState$4 & SubState$5 & SubState$9 & SubState & RouterData & API_OptionsData & DeprecatedState & Other;
1153
- type API = SubAPI$d & SubAPI$c & SubAPI$7 & SubAPI$3 & SubAPI$6 & SubAPI$a & SubAPI$9 & SubAPI$8 & SubAPI$b & SubAPI$4 & SubAPI$5 & SubAPI$1 & SubAPI$2 & SubAPI & Other;
1154
- interface DeprecatedState {
1155
- /** @deprecated Use index */
1156
- storiesHash: API_IndexHash;
1157
- /** @deprecated Use previewInitialized */
1158
- storiesConfigured: boolean;
1159
- /** @deprecated Use indexError */
1160
- storiesFailed?: Error;
1161
- }
1162
- interface Other {
1163
- [key: string]: any;
1214
+ declare global {
1215
+ interface SymbolConstructor {
1216
+ readonly observable: symbol;
1217
+ }
1164
1218
  }
1165
- interface Combo {
1166
- api: API;
1167
- state: State;
1219
+
1220
+ declare global {
1221
+ var globalProjectAnnotations: NormalizedProjectAnnotations<any>;
1222
+ var defaultProjectAnnotations: ProjectAnnotations<any>;
1168
1223
  }
1169
- type ManagerProviderProps = RouterData & API_ProviderData<API> & {
1170
- children: ReactNode | FC<Combo>;
1224
+ type WrappedStoryRef = {
1225
+ __pw_type: 'jsx' | 'importRef';
1171
1226
  };
1172
- declare const combineParameters: (...parameterSets: Parameters[]) => {};
1173
- declare class ManagerProvider extends Component<ManagerProviderProps, State> {
1174
- api: API;
1175
- modules: ReturnType<ModuleFn>[];
1176
- static displayName: string;
1177
- constructor(props: ManagerProviderProps);
1178
- static getDerivedStateFromProps(props: ManagerProviderProps, state: State): State;
1179
- shouldComponentUpdate(nextProps: ManagerProviderProps, nextState: State): boolean;
1180
- initModules: () => void;
1181
- render(): React.JSX.Element;
1182
- }
1183
- interface ManagerConsumerProps<P = unknown> {
1184
- filter?: (combo: Combo) => P;
1185
- children: FC<P> | ReactNode;
1227
+ type UnwrappedJSXStoryRef = {
1228
+ __pw_type: 'jsx';
1229
+ type: UnwrappedImportStoryRef;
1230
+ };
1231
+ type UnwrappedImportStoryRef = ComposedStoryFn;
1232
+ declare global {
1233
+ function __pwUnwrapObject(storyRef: WrappedStoryRef): Promise<UnwrappedJSXStoryRef | UnwrappedImportStoryRef>;
1186
1234
  }
1187
- declare function ManagerConsumer<P = Combo>({ filter, children, }: ManagerConsumerProps<P>): ReactElement;
1188
- declare function useStorybookState(): State;
1189
- declare function useStorybookApi(): API;
1190
1235
 
1191
- interface API_EventMap {
1192
- [eventId: string]: Listener$1;
1193
- }
1194
- declare const useChannel: (eventMap: API_EventMap, deps?: any[]) => (type: string, ...args: any[]) => void;
1195
- declare function useStoryPrepared(storyId?: StoryId): boolean;
1196
- declare function useParameter<S>(parameterKey: string, defaultValue?: S): S;
1197
- declare function useSharedState<S>(stateId: string, defaultState?: S): [S, (newStateOrMerger: S | API_StateMerger<S>, options?: Options) => void];
1198
- declare function useAddonState<S>(addonId: string, defaultState?: S): [S, (newStateOrMerger: S | API_StateMerger<S>, options?: Options) => void];
1199
- declare function useArgs(): [Args, (newArgs: Args) => void, (argNames?: string[]) => void, Args];
1200
- declare function useGlobals(): [
1201
- globals: Globals,
1202
- updateGlobals: (newGlobals: Globals) => void,
1203
- storyGlobals: Globals,
1204
- userGlobals: Globals
1205
- ];
1206
- declare function useGlobalTypes(): ArgTypes;
1207
- declare function useArgTypes(): ArgTypes;
1236
+ type TestProviderState = 'test-provider-state:pending' | 'test-provider-state:running' | 'test-provider-state:succeeded' | 'test-provider-state:crashed';
1237
+ type TestProviderId = string;
1238
+ type TestProviderStateByProviderId = Record<TestProviderId, TestProviderState>;
1239
+ type TestProviderStoreEventType = 'run-all' | 'clear-all' | 'settings-changed';
1240
+ type TestProviderStoreEvent = BaseEvent & {
1241
+ type: TestProviderStoreEventType;
1242
+ };
1243
+ type BaseTestProviderStore = {
1244
+ /**
1245
+ * Notifies all listeners that settings have changed for test providers. The Storybook UI will
1246
+ * highlight the test providers to tell the user that settings has changed.
1247
+ */
1248
+ settingsChanged: () => void;
1249
+ /**
1250
+ * Subscribe to clicks on the "Run All" button, that is supposed to trigger all test providers to
1251
+ * run. Your test provider should do the "main thing" when this happens, similar to when the user
1252
+ * triggers your test provider specifically.
1253
+ *
1254
+ * @example
1255
+ *
1256
+ * ```typescript
1257
+ * // Subscribe to run-all events
1258
+ * const unsubscribe = myTestProviderStore.onRunAll(() => {
1259
+ * await runAllMyTests();
1260
+ * });
1261
+ * ```
1262
+ */
1263
+ onRunAll: (listener: () => void) => () => void;
1264
+ /**
1265
+ * Subscribe to clicks on the "Clear All" button, that is supposed to clear all state from test
1266
+ * providers. Storybook already clears all statuses, but if your test provider has more
1267
+ * non-status-based state, you can use this to clear that here.
1268
+ *
1269
+ * @remarks
1270
+ * The purpose of this is _not_ to clear your test provider's settings, only the test results.
1271
+ * @example
1272
+ *
1273
+ * ```typescript
1274
+ * // Subscribe to clear-all events
1275
+ * const unsubscribe = myTestProviderStore.onClearAll(() => {
1276
+ * clearMyTestResults();
1277
+ * });
1278
+ *
1279
+ * // Later, when no longer needed
1280
+ * unsubscribe();
1281
+ * ```
1282
+ */
1283
+ onClearAll: (listener: () => void) => () => void;
1284
+ };
1285
+ /**
1286
+ * Represents a store for a specific test provider, identified by its unique ID. This store provides
1287
+ * methods to manage the state of an individual test provider, including getting and setting its
1288
+ * state, running operations with automatic state management, and accessing its unique identifier.
1289
+ *
1290
+ * Each test provider has its own instance of this store, allowing for independent state management
1291
+ * across different test providers in the application.
1292
+ *
1293
+ * @example
1294
+ *
1295
+ * ```typescript
1296
+ * // Get a store for a specific test provider
1297
+ * const grammarStore = getTestProviderStoreById('addon-grammar');
1298
+ *
1299
+ * // Check the current state
1300
+ * if (grammarStore.getState() === 'test-provider-state:pending') {
1301
+ * console.log('Grammar tests are ready to run');
1302
+ * }
1303
+ *
1304
+ * // Run tests with automatic state management
1305
+ * grammarStore.runWithState(async () => {
1306
+ * await runGrammarTests();
1307
+ * });
1308
+ * ```
1309
+ *
1310
+ * @see {@link TestProviderState} for possible state values
1311
+ * @see {@link BaseTestProviderStore} for methods inherited from the base store
1312
+ */
1313
+ type TestProviderStoreById = BaseTestProviderStore & {
1314
+ /**
1315
+ * Gets the current state of this specific test provider
1316
+ *
1317
+ * The state represents the current execution status of the test provider, which can be one of the
1318
+ * following:
1319
+ *
1320
+ * - 'test-provider-state:pending': Tests have not been run yet
1321
+ * - 'test-provider-state:running': Tests are currently running
1322
+ * - 'test-provider-state:succeeded': Tests completed successfully
1323
+ * - 'test-provider-state:crashed': Running tests failed or encountered an error
1324
+ *
1325
+ * Storybook UI will use this state to determine what to show in the UI.
1326
+ *
1327
+ * @remarks
1328
+ * The 'test-provider-state:crashed' is meant to signify that the test run as a whole failed to
1329
+ * execute for some reason. It should _not_ be set just because a number of tests failed, use
1330
+ * statuses and the status store for that. See {@link TestStatusStore} for managing individual test
1331
+ * statuses.
1332
+ * @example
1333
+ *
1334
+ * ```typescript
1335
+ * // Get the current state of a specific test provider
1336
+ * const state = testProviderStore.getState();
1337
+ *
1338
+ * // Conditionally render UI based on the state
1339
+ * const TestStatus = () => {
1340
+ * const state = testProviderStore.getState();
1341
+ *
1342
+ * if (state === 'test-provider-state:running') {
1343
+ * return <Spinner />;
1344
+ * } else if (state === 'test-provider-state:succeeded') {
1345
+ * return <SuccessIcon />;
1346
+ * } else if (state === 'test-provider-state:crashed') {
1347
+ * return <ErrorIcon />;
1348
+ * }
1349
+ *
1350
+ * return <PendingIcon />;
1351
+ * };
1352
+ * ```
1353
+ */
1354
+ getState: () => TestProviderState;
1355
+ /**
1356
+ * Sets the state of this specific test provider
1357
+ *
1358
+ * This method allows you to manually update the execution state of the test provider. It's
1359
+ * typically used when you need to reflect the current status of test execution in the UI or when
1360
+ * you want to programmatically control the test provider's state.
1361
+ *
1362
+ * Common use cases include:
1363
+ *
1364
+ * - Setting to 'running' when tests start
1365
+ * - Setting to 'succeeded' when tests complete successfully
1366
+ * - Setting to 'crashed' when tests fail or encounter errors
1367
+ * - Setting to 'pending' to reset the state
1368
+ *
1369
+ * The state represents the current execution status of the test provider, which can be one of the
1370
+ * following:
1371
+ *
1372
+ * - 'test-provider-state:pending': Tests have not been run yet
1373
+ * - 'test-provider-state:running': Tests are currently running
1374
+ * - 'test-provider-state:succeeded': Tests completed successfully
1375
+ * - 'test-provider-state:crashed': Running tests failed or encountered an error
1376
+ *
1377
+ * Storybook UI will use this state to determine what to show in the UI.
1378
+ *
1379
+ * @remarks
1380
+ * The 'test-provider-state:crashed' is meant to signify that the test run as a whole failed to
1381
+ * execute for some reason. It should _not_ be set just because a number of tests failed, use
1382
+ * statuses and the status store for that. See {@link TestStatusStore} for managing individual test
1383
+ * statuses.
1384
+ *
1385
+ * For most use cases, consider using {@link runWithState} instead, which provides automatic state
1386
+ * management and error handling during test execution.
1387
+ * @example
1388
+ *
1389
+ * ```typescript
1390
+ * // Update the state when tests start running
1391
+ * const startTests = async () => {
1392
+ * testProviderStore.setState('test-provider-state:running');
1393
+ * ... run tests ...
1394
+ * };
1395
+ * ```
1396
+ */
1397
+ setState: (state: TestProviderState) => void;
1398
+ /**
1399
+ * Runs a callback and automatically updates the test provider's state with running, succeeded or
1400
+ * crashed, depending on the end result.
1401
+ *
1402
+ * - Immediately changes the state to 'running'
1403
+ * - If the callback returns/resolves, change the state to 'succeeded'.
1404
+ * - If the callback throws an error/rejects, change the state to 'crashed'.
1405
+ *
1406
+ * This approach helps prevent state inconsistencies that might occur if exceptions are thrown
1407
+ * during test execution.
1408
+ *
1409
+ * @example
1410
+ *
1411
+ * ```typescript
1412
+ * // Run tests with automatic state management
1413
+ * const runTests = () => {
1414
+ * testProviderStore.runWithState(async () => {
1415
+ * // The state is automatically set to 'running' before this callback
1416
+ *
1417
+ * // Run tests here...
1418
+ * const results = await executeTests();
1419
+ * });
1420
+ * };
1421
+ * ```
1422
+ */
1423
+ runWithState: (callback: () => void | Promise<void>) => Promise<void>;
1424
+ /** The unique identifier for this test provider */
1425
+ testProviderId: TestProviderId;
1426
+ };
1427
+ /**
1428
+ * React OR preview hook for accessing the state of _all_ test providers. This hook will only
1429
+ * trigger a re-render when the state changes. It is recommended to pass the optional selector, to
1430
+ * get more fine-grained control of re-renders.
1431
+ *
1432
+ * @example
1433
+ *
1434
+ * ```typescript
1435
+ * const TestStatus = () => {
1436
+ * const state = useTestProviderStore((state) => state['my-test-provider']);
1437
+ * };
1438
+ * ```
1439
+ */
1440
+ type UseTestProviderStore = <T = TestProviderStateByProviderId>(
1441
+ /**
1442
+ * Optional selector function to extract or transform specific parts of the state
1443
+ *
1444
+ * @example
1445
+ *
1446
+ * ```typescript
1447
+ * // Use the entire state
1448
+ * const allProviderStates = useTestProviderStore();
1449
+ *
1450
+ * // Get state for a specific provider
1451
+ * const myProviderState = useTestProviderStore((state) => state['my-test-provider']);
1452
+ *
1453
+ * // Get a count of providers in each state
1454
+ * const statusCounts = useTestProviderStore((state) => {
1455
+ * const counts = {
1456
+ * pending: 0,
1457
+ * running: 0,
1458
+ * succeeded: 0,
1459
+ * crashed: 0,
1460
+ * };
1461
+ *
1462
+ * Object.values(state).forEach((status) => {
1463
+ * if (status === 'test-provider-state:pending') counts.pending++;
1464
+ * else if (status === 'test-provider-state:running') counts.running++;
1465
+ * else if (status === 'test-provider-state:succeeded') counts.succeeded++;
1466
+ * else if (status === 'test-provider-state:crashed') counts.crashed++;
1467
+ * });
1468
+ *
1469
+ * return counts;
1470
+ * });
1471
+ *
1472
+ * // Check if all tests have completed
1473
+ * const allTestsCompleted = useTestProviderStore((state) => {
1474
+ * return Object.values(state).every(
1475
+ * (status) =>
1476
+ * status === 'test-provider-state:succeeded' ||
1477
+ * status === 'test-provider-state:crashed'
1478
+ * );
1479
+ * });
1480
+ * ```
1481
+ */
1482
+ selector?: (state: TestProviderStateByProviderId) => T) => T;
1208
1483
 
1209
- declare const typesX: typeof Addon_TypesEnum;
1484
+ declare const fullStatusStore: StatusStore & {
1485
+ selectStatuses: (statuses: Status[]) => void;
1486
+ typeId: undefined;
1487
+ };
1488
+ declare const getStatusStoreByTypeId: (typeId: StatusTypeId) => StatusStoreByTypeId;
1489
+ declare const useStatusStore: UseStatusStore;
1490
+ declare const universalStatusStore: UniversalStore<StatusesByStoryIdAndTypeId, StatusStoreEvent>;
1491
+
1492
+ declare const fullTestProviderStore: {
1493
+ settingsChanged: () => void;
1494
+ onRunAll: (listener: () => void) => () => void;
1495
+ onClearAll: (listener: () => void) => () => void;
1496
+ } & {
1497
+ getFullState: UniversalStore<TestProviderStateByProviderId, TestProviderStoreEvent>["getState"];
1498
+ setFullState: UniversalStore<TestProviderStateByProviderId, TestProviderStoreEvent>["setState"];
1499
+ onSettingsChanged: (listener: (testProviderId: TestProviderId) => void) => () => void;
1500
+ runAll: () => void;
1501
+ clearAll: () => void;
1502
+ };
1503
+ declare const getTestProviderStoreById: (testProviderId: TestProviderId) => TestProviderStoreById;
1504
+ declare const useTestProviderStore: UseTestProviderStore;
1505
+ declare const universalTestProviderStore: UniversalStore<TestProviderStateByProviderId, TestProviderStoreEvent>;
1210
1506
 
1211
- export { type API, type API_EventMap, ActiveTabs, AddonStore, type Combo, ManagerConsumer as Consumer, type KeyboardEventLike, ManagerContext, type ManagerProviderProps, ManagerProvider as Provider, RequestResponseError, type State, type Options as StoreOptions, addons, combineParameters, controlOrMetaKey, controlOrMetaSymbol, eventMatchesShortcut, eventToShortcut, MockUniversalStore as experimental_MockUniversalStore, UniversalStore as experimental_UniversalStore, experimental_requestResponse, useUniversalStore as experimental_useUniversalStore, isMacLike, isShortcutTaken, keyToSymbol, _default as merge, mockChannel, optionOrAltSymbol, shortcutMatchesShortcut, shortcutToHumanString, typesX as types, useAddonState, useArgTypes, useArgs, useChannel, useGlobalTypes, useGlobals, useParameter, useSharedState, useStoryPrepared, useStorybookApi, useStorybookState };
1507
+ export { type API, type API_EventMap, ActiveTabs, AddonStore, type Combo, ManagerConsumer as Consumer, type KeyboardEventLike, ManagerContext, type ManagerProviderProps, ManagerProvider as Provider, RequestResponseError, type State, type Options as StoreOptions, addons, combineParameters, controlOrMetaKey, controlOrMetaSymbol, eventMatchesShortcut, eventToShortcut, MockUniversalStore as experimental_MockUniversalStore, UniversalStore as experimental_UniversalStore, getStatusStoreByTypeId as experimental_getStatusStore, getTestProviderStoreById as experimental_getTestProviderStore, experimental_requestResponse, useStatusStore as experimental_useStatusStore, useTestProviderStore as experimental_useTestProviderStore, useUniversalStore as experimental_useUniversalStore, fullStatusStore as internal_fullStatusStore, fullTestProviderStore as internal_fullTestProviderStore, universalStatusStore as internal_universalStatusStore, universalTestProviderStore as internal_universalTestProviderStore, isMacLike, isShortcutTaken, keyToSymbol, _default as merge, mockChannel, optionOrAltSymbol, shortcutMatchesShortcut, shortcutToHumanString, typesX as types, useAddonState, useArgTypes, useArgs, useChannel, useGlobalTypes, useGlobals, useParameter, useSharedState, useStoryPrepared, useStorybookApi, useStorybookState };