index.d.ts 36 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855
  1. import React, { ReactNode, Component, ReactElement, FC } from 'react';
  2. import { API_ProviderData, API_IframeRenderer, Addon_Types, Addon_TypesEnum, Addon_Collection, Addon_TypesMapping, API_Panels, API_StateMerger, API_Provider, API_Notification, StoryId, API_Settings, API_LoadedRefData, API_PreparedStoryIndex, API_ViewMode, API_StatusState, API_FilterFunction, API_HashEntry, API_LeafEntry, API_StoryEntry, Args, API_IndexHash, API_ComposedRef, API_StatusUpdate, API_DocsEntry, API_Refs, API_SetRefData, API_ComposedRefUpdate, API_Layout, API_UI, API_PanelPositions, API_Versions, API_UnknownEntries, API_Version, Globals, GlobalTypes, Addon_BaseType, Addon_SidebarTopType, Addon_SidebarBottomType, Addon_PageType, Addon_WrapperType, Addon_Config, API_OptionsData, Parameters, ArgTypes } from '@storybook/types';
  3. 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/types';
  4. import { RouterData, NavigateOptions } from '@storybook/router';
  5. import { Listener, Channel } from '@storybook/channels';
  6. export { Listener as ChannelListener } from '@storybook/channels';
  7. import { toId } from '@storybook/csf';
  8. import { ThemeVars } from '@storybook/theming';
  9. import { WhatsNewData } from '@storybook/core-events';
  10. type GetState = () => State;
  11. type SetState = (a: any, b: any) => any;
  12. interface Upstream {
  13. getState: GetState;
  14. setState: SetState;
  15. }
  16. type Patch = Partial<State>;
  17. type InputFnPatch = (s: State) => Patch;
  18. type InputPatch = Patch | InputFnPatch;
  19. interface Options {
  20. persistence: 'none' | 'session' | string;
  21. }
  22. type CallBack = (s: State) => void;
  23. declare class Store {
  24. upstreamGetState: GetState;
  25. upstreamSetState: SetState;
  26. constructor({ setState, getState }: Upstream);
  27. getInitialState(base: State): any;
  28. getState(): State;
  29. setState(inputPatch: InputPatch, options?: Options): Promise<State>;
  30. setState(inputPatch: InputPatch, callback?: CallBack, options?: Options): Promise<State>;
  31. }
  32. type ModuleFn<APIType = unknown, StateType = unknown> = (m: ModuleArgs, options?: any) => {
  33. init?: () => void | Promise<void>;
  34. api: APIType;
  35. state: StateType;
  36. };
  37. type ModuleArgs = RouterData & API_ProviderData<API> & {
  38. mode?: 'production' | 'development';
  39. state: State;
  40. fullAPI: API;
  41. store: Store;
  42. };
  43. interface SubAPI$c {
  44. renderPreview?: API_IframeRenderer;
  45. }
  46. interface SubAPI$b {
  47. /**
  48. * Returns a collection of elements of a specific type.
  49. * @protected This is used internally in storybook's manager.
  50. * @template T - The type of the elements in the collection.
  51. * @param {Addon_Types | Addon_TypesEnum.experimental_PAGE} type - The type of the elements to retrieve.
  52. * @returns {API_Collection<T>} - A collection of elements of the specified type.
  53. */
  54. getElements: <T extends Addon_Types | Addon_TypesEnum.experimental_PAGE | Addon_TypesEnum.experimental_SIDEBAR_BOTTOM | Addon_TypesEnum.experimental_SIDEBAR_TOP = Addon_Types>(type: T) => Addon_Collection<Addon_TypesMapping[T]>;
  55. /**
  56. * Returns a collection of all panels.
  57. * This is the same as calling getElements('panel')
  58. * @protected This is used internally in storybook's manager.
  59. * @deprecated please use getElements('panel') instead. This API will be removed in storybook 8.0.
  60. * @returns {API_Panels} - A collection of all panels.
  61. */
  62. getPanels: () => API_Panels;
  63. /**
  64. * Returns a collection of panels currently enabled for the selected story.
  65. * @protected This is used internally in storybook's manager.
  66. * @deprecated please use getElements('panel') instead, and do the filtering manually. This API will be removed in storybook 8.0.
  67. * @returns {API_Panels} - A collection of all panels.
  68. */
  69. getStoryPanels: () => API_Panels;
  70. /**
  71. * Returns the id of the currently selected panel.
  72. * @returns {string} - The ID of the currently selected panel.
  73. */
  74. getSelectedPanel: () => string;
  75. /**
  76. * Sets the currently selected panel via it's ID.
  77. * @param {string} panelName - The ID of the panel to select.
  78. * @returns {void}
  79. */
  80. setSelectedPanel: (panelName: string) => void;
  81. /**
  82. * Sets the state of an addon with the given ID.
  83. * @template S - The type of the addon state.
  84. * @param {string} addonId - The ID of the addon to set the state for.
  85. * @param {S | API_StateMerger<S>} newStateOrMerger - The new state to set, or a function which receives the current state and returns the new state.
  86. * @param {Options} [options] - Optional options for the state update.
  87. * @deprecated This API might get dropped, if you are using this, please file an issue.
  88. * @returns {Promise<S>} - A promise that resolves with the new state after it has been set.
  89. */
  90. setAddonState<S>(addonId: string, newStateOrMerger: S | API_StateMerger<S>, options?: Options): Promise<S>;
  91. /**
  92. * Returns the state of an addon with the given ID.
  93. * @template S - The type of the addon state.
  94. * @param {string} addonId - The ID of the addon to get the state for.
  95. * @deprecated This API might get dropped, if you are using this, please file an issue.
  96. * @returns {S} - The state of the addon with the given ID.
  97. */
  98. getAddonState<S>(addonId: string): S;
  99. }
  100. interface SubAPI$a {
  101. /**
  102. * Returns the channel object.
  103. * @protected Please do not use, it's for internal use only.
  104. */
  105. getChannel: () => API_Provider<API>['channel'];
  106. /**
  107. * Adds a listener to the channel for the given event type.
  108. * Returns a function that can be called to remove the listener.
  109. * @param type - The event type to listen for. If using a core event, import it from `@storybook/core-events`.
  110. * @param handler - The callback function to be called when the event is emitted.
  111. * @returns A function that can be called to remove the listener.
  112. */
  113. on: (type: string, handler: Listener) => () => void;
  114. /**
  115. * Removes a listener from the channel for the given event type.
  116. * @param type - The event type to remove the listener from. If using a core event, import it from `@storybook/core-events`.
  117. * @param handler - The callback function to be removed.
  118. */
  119. off: (type: string, handler: Listener) => void;
  120. /**
  121. * Emits an event on the channel for the given event type.
  122. * @param type - The event type to emit. If using a core event, import it from `@storybook/core-events`.
  123. * @param args - The arguments to pass to the event listener.
  124. */
  125. emit: (type: string, ...args: any[]) => void;
  126. /**
  127. * Adds a one-time listener to the channel for the given event type.
  128. * @param type - The event type to listen for. If using a core event, import it from `@storybook/core-events`.
  129. * @param handler - The callback function to be called when the event is emitted.
  130. */
  131. once: (type: string, handler: Listener) => void;
  132. /**
  133. * Emits an event to collapse all stories in the UI.
  134. * @deprecated Use `emit(STORIES_COLLAPSE_ALL)` instead. This API will be removed in Storybook 8.0.
  135. */
  136. collapseAll: () => void;
  137. /**
  138. * Emits an event to expand all stories in the UI.
  139. * @deprecated Use `emit(STORIES_EXPAND_ALL)` instead. This API will be removed in Storybook 8.0.
  140. */
  141. expandAll: () => void;
  142. }
  143. interface SubState$9 {
  144. notifications: API_Notification[];
  145. }
  146. /**
  147. * The API for managing notifications.
  148. */
  149. interface SubAPI$9 {
  150. /**
  151. * Adds a new notification to the list of notifications.
  152. * If a notification with the same ID already exists, it will be replaced.
  153. * @param notification - The notification to add.
  154. */
  155. addNotification: (notification: API_Notification) => void;
  156. /**
  157. * Removes a notification from the list of notifications and calls the onClear callback.
  158. * @param id - The ID of the notification to remove.
  159. */
  160. clearNotification: (id: string) => void;
  161. }
  162. interface SubAPI$8 {
  163. storeSelection: () => void;
  164. retrieveSelection: () => StoryId;
  165. /**
  166. * Changes the active settings tab.
  167. * @param path - The path of the settings page to navigate to. The path NOT should include the `/settings` prefix.
  168. * @example changeSettingsTab(`about`).
  169. */
  170. changeSettingsTab: (path: string) => void;
  171. /**
  172. * Closes the settings screen and returns to the last tracked story or the first story.
  173. */
  174. closeSettings: () => void;
  175. /**
  176. * Checks if the settings screen is currently active.
  177. * @returns A boolean indicating whether the settings screen is active.
  178. */
  179. isSettingsScreenActive: () => boolean;
  180. /**
  181. * Navigates to the specified settings page.
  182. * @param path - The path of the settings page to navigate to. The path should include the `/settings` prefix.
  183. * @example navigateToSettingsPage(`/settings/about`).
  184. * @deprecated Use `changeSettingsTab` instead.
  185. */
  186. navigateToSettingsPage: (path: string) => Promise<void>;
  187. }
  188. interface SubState$8 {
  189. settings: API_Settings;
  190. }
  191. type Direction = -1 | 1;
  192. type ParameterName = string;
  193. type StoryUpdate = Partial<Pick<API_StoryEntry, 'prepared' | 'parameters' | 'initialArgs' | 'argTypes' | 'args'>>;
  194. type DocsUpdate = Partial<Pick<API_DocsEntry, 'prepared' | 'parameters'>>;
  195. interface SubState$7 extends API_LoadedRefData {
  196. storyId: StoryId;
  197. internal_index?: API_PreparedStoryIndex;
  198. viewMode: API_ViewMode;
  199. status: API_StatusState;
  200. filters: Record<string, API_FilterFunction>;
  201. }
  202. interface SubAPI$7 {
  203. /**
  204. * The `storyId` method is a reference to the `toId` function from `@storybook/csf`, which is used to generate a unique ID for a story.
  205. * This ID is used to identify a specific story in the Storybook index.
  206. *
  207. * @type {typeof toId}
  208. */
  209. storyId: typeof toId;
  210. /**
  211. * Resolves a story, docs, component or group ID to its corresponding hash entry in the index.
  212. *
  213. * @param {StoryId} storyId - The ID of the story to resolve.
  214. * @param {string} [refsId] - The ID of the refs to use for resolving the story.
  215. * @returns {API_HashEntry} - The hash entry corresponding to the given story ID.
  216. */
  217. resolveStory: (storyId: StoryId, refsId?: string) => API_HashEntry;
  218. /**
  219. * Selects the first story to display in the Storybook UI.
  220. *
  221. * @returns {void}
  222. */
  223. selectFirstStory: () => void;
  224. /**
  225. * Selects a story to display in the Storybook UI.
  226. *
  227. * @param {string} [kindOrId] - The kind or ID of the story to select.
  228. * @param {StoryId} [story] - The ID of the story to select.
  229. * @param {Object} [obj] - An optional object containing additional options.
  230. * @param {string} [obj.ref] - The ref ID of the story to select.
  231. * @param {API_ViewMode} [obj.viewMode] - The view mode to display the story in.
  232. * @returns {void}
  233. */
  234. selectStory: (kindOrId?: string, story?: StoryId, obj?: {
  235. ref?: string;
  236. viewMode?: API_ViewMode;
  237. }) => void;
  238. /**
  239. * Returns the current story's data, including its ID, kind, name, and parameters.
  240. *
  241. * @returns {API_LeafEntry} The current story's data.
  242. */
  243. getCurrentStoryData: () => API_LeafEntry;
  244. /**
  245. * Sets the prepared story index to the given value.
  246. *
  247. * @param {API_PreparedStoryIndex} index - The prepared story index to set.
  248. * @returns {Promise<void>} A promise that resolves when the prepared story index has been set.
  249. */
  250. setIndex: (index: API_PreparedStoryIndex) => Promise<void>;
  251. /**
  252. * Jumps to the next or previous component in the index.
  253. *
  254. * @param {Direction} direction - The direction to jump. Use -1 to jump to the previous component, and 1 to jump to the next component.
  255. * @returns {void}
  256. */
  257. jumpToComponent: (direction: Direction) => void;
  258. /**
  259. * Jumps to the next or previous story in the story index.
  260. *
  261. * @param {Direction} direction - The direction to jump. Use -1 to jump to the previous story, and 1 to jump to the next story.
  262. * @returns {void}
  263. */
  264. jumpToStory: (direction: Direction) => void;
  265. /**
  266. * Returns the data for the given story ID and optional ref ID.
  267. *
  268. * @param {StoryId} storyId - The ID of the story to retrieve data for.
  269. * @param {string} [refId] - The ID of the ref to retrieve data for. If not provided, retrieves data for the default ref.
  270. * @returns {API_LeafEntry} The data for the given story ID and optional ref ID.
  271. */
  272. getData: (storyId: StoryId, refId?: string) => API_LeafEntry;
  273. /**
  274. * Returns a boolean indicating whether the given story ID and optional ref ID have been prepared.
  275. *
  276. * @param {StoryId} storyId - The ID of the story to check.
  277. * @param {string} [refId] - The ID of the ref to check. If not provided, checks all refs for the given story ID.
  278. * @returns {boolean} A boolean indicating whether the given story ID and optional ref ID have been prepared.
  279. */
  280. isPrepared: (storyId: StoryId, refId?: string) => boolean;
  281. /**
  282. * Returns the parameters for the given story ID and optional ref ID.
  283. *
  284. * @param {StoryId | { storyId: StoryId; refId: string }} storyId - The ID of the story to retrieve parameters for, or an object containing the story ID and ref ID.
  285. * @param {ParameterName} [parameterName] - The name of the parameter to retrieve. If not provided, returns all parameters.
  286. * @returns {API_StoryEntry['parameters'] | any} The parameters for the given story ID and optional ref ID.
  287. */
  288. getParameters: (storyId: StoryId | {
  289. storyId: StoryId;
  290. refId: string;
  291. }, parameterName?: ParameterName) => API_StoryEntry['parameters'] | any;
  292. /**
  293. * Returns the current value of the specified parameter for the currently selected story.
  294. *
  295. * @template S - The type of the parameter value.
  296. * @param {ParameterName} [parameterName] - The name of the parameter to retrieve. If not provided, returns all parameters.
  297. * @returns {S} The value of the specified parameter for the currently selected story.
  298. */
  299. getCurrentParameter<S>(parameterName?: ParameterName): S;
  300. /**
  301. * Updates the arguments for the given story with the provided new arguments.
  302. *
  303. * @param {API_StoryEntry} story - The story to update the arguments for.
  304. * @param {Args} newArgs - The new arguments to set for the story.
  305. * @returns {void}
  306. */
  307. updateStoryArgs(story: API_StoryEntry, newArgs: Args): void;
  308. /**
  309. * Resets the arguments for the given story to their initial values.
  310. *
  311. * @param {API_StoryEntry} story - The story to reset the arguments for.
  312. * @param {string[]} [argNames] - An optional array of argument names to reset. If not provided, all arguments will be reset.
  313. * @returns {void}
  314. */
  315. resetStoryArgs: (story: API_StoryEntry, argNames?: string[]) => void;
  316. /**
  317. * Finds the leaf entry for the given story ID in the given story index.
  318. *
  319. * @param {API_IndexHash} index - The story index to search for the leaf entry in.
  320. * @param {StoryId} storyId - The ID of the story to find the leaf entry for.
  321. * @returns {API_LeafEntry} The leaf entry for the given story ID, or null if no leaf entry was found.
  322. */
  323. findLeafEntry(index: API_IndexHash, storyId: StoryId): API_LeafEntry;
  324. /**
  325. * Finds the leaf story ID for the given component or group ID in the given index.
  326. *
  327. * @param {API_IndexHash} index - The story index to search for the leaf story ID in.
  328. * @param {StoryId} storyId - The ID of the story to find the leaf story ID for.
  329. * @returns {StoryId} The ID of the leaf story, or null if no leaf story was found.
  330. */
  331. findLeafStoryId(index: API_IndexHash, storyId: StoryId): StoryId;
  332. /**
  333. * Finds the ID of the sibling story in the given direction for the given story ID in the given story index.
  334. *
  335. * @param {StoryId} storyId - The ID of the story to find the sibling of.
  336. * @param {API_IndexHash} index - The story index to search for the sibling in.
  337. * @param {Direction} direction - The direction to search for the sibling in.
  338. * @param {boolean} toSiblingGroup - When true, skips over leafs within the same group.
  339. * @returns {StoryId} The ID of the sibling story, or null if no sibling was found.
  340. */
  341. findSiblingStoryId(storyId: StoryId, index: API_IndexHash, direction: Direction, toSiblingGroup: boolean): StoryId;
  342. /**
  343. * Fetches the story index from the server.
  344. *
  345. * @returns {Promise<void>} A promise that resolves when the index has been fetched.
  346. */
  347. fetchIndex: () => Promise<void>;
  348. /**
  349. * Updates the story with the given ID with the provided update object.
  350. *
  351. * @param {StoryId} storyId - The ID of the story to update.
  352. * @param {StoryUpdate} update - An object containing the updated story information.
  353. * @param {API_ComposedRef} [ref] - The composed ref of the story to update.
  354. * @returns {Promise<void>} A promise that resolves when the story has been updated.
  355. */
  356. updateStory: (storyId: StoryId, update: StoryUpdate, ref?: API_ComposedRef) => Promise<void>;
  357. /**
  358. * Updates the documentation for the given story ID with the given update object.
  359. *
  360. * @param {StoryId} storyId - The ID of the story to update.
  361. * @param {DocsUpdate} update - An object containing the updated documentation information.
  362. * @param {API_ComposedRef} [ref] - The composed ref of the story to update.
  363. * @returns {Promise<void>} A promise that resolves when the documentation has been updated.
  364. */
  365. updateDocs: (storyId: StoryId, update: DocsUpdate, ref?: API_ComposedRef) => Promise<void>;
  366. /**
  367. * Sets the preview as initialized.
  368. *
  369. * @param {ComposedRef} [ref] - The composed ref of the story to set as initialized.
  370. * @returns {Promise<void>} A promise that resolves when the preview has been set as initialized.
  371. */
  372. setPreviewInitialized: (ref?: API_ComposedRef) => Promise<void>;
  373. /**
  374. * Updates the status of a collection of stories.
  375. *
  376. * @param {string} addonId - The ID of the addon to update.
  377. * @param {StatusUpdate} update - An object containing the updated status information.
  378. * @returns {Promise<void>} A promise that resolves when the status has been updated.
  379. */
  380. experimental_updateStatus: (addonId: string, update: API_StatusUpdate | ((state: API_StatusState) => API_StatusUpdate)) => Promise<void>;
  381. /**
  382. * Updates the filtering of the index.
  383. *
  384. * @param {string} addonId - The ID of the addon to update.
  385. * @param {API_FilterFunction} filterFunction - A function that returns a boolean based on the story, index and status.
  386. * @returns {Promise<void>} A promise that resolves when the state has been updated.
  387. */
  388. experimental_setFilter: (addonId: string, filterFunction: API_FilterFunction) => Promise<void>;
  389. }
  390. interface SubState$6 {
  391. refs: API_Refs;
  392. }
  393. interface SubAPI$6 {
  394. /**
  395. * Finds a composed ref by its source.
  396. * @param {string} source - The source/URL of the composed ref.
  397. * @returns {API_ComposedRef} - The composed ref object.
  398. */
  399. findRef: (source: string) => API_ComposedRef;
  400. /**
  401. * Sets a composed ref by its ID and data.
  402. * @param {string} id - The ID of the composed ref.
  403. * @param {API_SetRefData} data - The data to set for the composed ref.
  404. * @param {boolean} [ready] - Whether the composed ref is ready.
  405. */
  406. setRef: (id: string, data: API_SetRefData, ready?: boolean) => void;
  407. /**
  408. * Updates a composed ref by its ID and update object.
  409. * @param {string} id - The ID of the composed ref.
  410. * @param {API_ComposedRefUpdate} ref - The update object for the composed ref.
  411. */
  412. updateRef: (id: string, ref: API_ComposedRefUpdate) => void;
  413. /**
  414. * Gets all composed refs.
  415. * @returns {API_Refs} - The composed refs object.
  416. */
  417. getRefs: () => API_Refs;
  418. /**
  419. * Checks if a composed ref is valid.
  420. * @param {API_SetRefData} ref - The composed ref to check.
  421. * @returns {Promise<void>} - A promise that resolves when the check is complete.
  422. */
  423. checkRef: (ref: API_SetRefData) => Promise<void>;
  424. /**
  425. * Changes the version of a composed ref by its ID and URL.
  426. * @param {string} id - The ID of the composed ref.
  427. * @param {string} url - The new URL for the composed ref.
  428. */
  429. changeRefVersion: (id: string, url: string) => void;
  430. /**
  431. * Changes the state of a composed ref by its ID and previewInitialized flag.
  432. * @param {string} id - The ID of the composed ref.
  433. * @param {boolean} previewInitialized - The new previewInitialized flag for the composed ref.
  434. */
  435. changeRefState: (id: string, previewInitialized: boolean) => void;
  436. }
  437. interface SubState$5 {
  438. layout: API_Layout;
  439. ui: API_UI;
  440. selectedPanel: string | undefined;
  441. theme: ThemeVars;
  442. }
  443. interface SubAPI$5 {
  444. /**
  445. * Toggles the fullscreen mode of the Storybook UI.
  446. * @param toggled - Optional boolean value to set the fullscreen mode to. If not provided, it will toggle the current state.
  447. */
  448. toggleFullscreen: (toggled?: boolean) => void;
  449. /**
  450. * Toggles the visibility of the panel in the Storybook UI.
  451. * @param toggled - Optional boolean value to set the panel visibility to. If not provided, it will toggle the current state.
  452. */
  453. togglePanel: (toggled?: boolean) => void;
  454. /**
  455. * Toggles the position of the panel in the Storybook UI.
  456. * @param position - Optional string value to set the panel position to. If not provided, it will toggle between 'bottom' and 'right'.
  457. */
  458. togglePanelPosition: (position?: API_PanelPositions) => void;
  459. /**
  460. * Toggles the visibility of the navigation bar in the Storybook UI.
  461. * @param toggled - Optional boolean value to set the navigation bar visibility to. If not provided, it will toggle the current state.
  462. */
  463. toggleNav: (toggled?: boolean) => void;
  464. /**
  465. * Toggles the visibility of the toolbar in the Storybook UI.
  466. * @param toggled - Optional boolean value to set the toolbar visibility to. If not provided, it will toggle the current state.
  467. */
  468. toggleToolbar: (toggled?: boolean) => void;
  469. /**
  470. * Sets the options for the Storybook UI.
  471. * @param options - An object containing the options to set.
  472. */
  473. setOptions: (options: any) => void;
  474. }
  475. declare const isMacLike: () => boolean;
  476. declare const controlOrMetaSymbol: () => "⌘" | "ctrl";
  477. declare const controlOrMetaKey: () => "meta" | "control";
  478. declare const optionOrAltSymbol: () => "⌥" | "alt";
  479. declare const isShortcutTaken: (arr1: string[], arr2: string[]) => boolean;
  480. type KeyboardEventLike = Pick<KeyboardEvent, 'altKey' | 'ctrlKey' | 'metaKey' | 'shiftKey' | 'key' | 'code' | 'keyCode' | 'preventDefault'>;
  481. declare const eventToShortcut: (e: KeyboardEventLike) => (string | string[])[] | null;
  482. declare const shortcutMatchesShortcut: (inputShortcut: (string | string[])[], shortcut: API_KeyCollection) => boolean;
  483. declare const eventMatchesShortcut: (e: KeyboardEventLike, shortcut: API_KeyCollection) => boolean;
  484. declare const keyToSymbol: (key: string) => string;
  485. declare const shortcutToHumanString: (shortcut: API_KeyCollection) => string;
  486. interface SubState$4 {
  487. shortcuts: API_Shortcuts;
  488. }
  489. interface SubAPI$4 {
  490. /**
  491. * Returns the current shortcuts.
  492. */
  493. getShortcutKeys(): API_Shortcuts;
  494. /**
  495. * Returns the default shortcuts.
  496. */
  497. getDefaultShortcuts(): API_Shortcuts | API_AddonShortcutDefaults;
  498. /**
  499. * Returns the shortcuts for addons.
  500. */
  501. getAddonsShortcuts(): API_AddonShortcuts;
  502. /**
  503. * Returns the labels for addon shortcuts.
  504. */
  505. getAddonsShortcutLabels(): API_AddonShortcutLabels;
  506. /**
  507. * Returns the default shortcuts for addons.
  508. */
  509. getAddonsShortcutDefaults(): API_AddonShortcutDefaults;
  510. /**
  511. * Sets the shortcuts to the given value.
  512. * @param shortcuts The new shortcuts to set.
  513. * @returns A promise that resolves to the new shortcuts.
  514. */
  515. setShortcuts(shortcuts: API_Shortcuts): Promise<API_Shortcuts>;
  516. /**
  517. * Sets the shortcut for the given action to the given value.
  518. * @param action The action to set the shortcut for.
  519. * @param value The new shortcut to set.
  520. * @returns A promise that resolves to the new shortcut.
  521. */
  522. setShortcut(action: API_Action, value: API_KeyCollection): Promise<API_KeyCollection>;
  523. /**
  524. * Sets the shortcut for the given addon to the given value.
  525. * @param addon The addon to set the shortcut for.
  526. * @param shortcut The new shortcut to set.
  527. * @returns A promise that resolves to the new addon shortcut.
  528. */
  529. setAddonShortcut(addon: string, shortcut: API_AddonShortcut): Promise<API_AddonShortcut>;
  530. /**
  531. * Restores all default shortcuts.
  532. * @returns A promise that resolves to the new shortcuts.
  533. */
  534. restoreAllDefaultShortcuts(): Promise<API_Shortcuts>;
  535. /**
  536. * Restores the default shortcut for the given action.
  537. * @param action The action to restore the default shortcut for.
  538. * @returns A promise that resolves to the new shortcut.
  539. */
  540. restoreDefaultShortcut(action: API_Action): Promise<API_KeyCollection>;
  541. /**
  542. * Handles a keydown event.
  543. * @param event The event to handle.
  544. */
  545. handleKeydownEvent(event: KeyboardEventLike): void;
  546. /**
  547. * Handles a shortcut feature.
  548. * @param feature The feature to handle.
  549. * @param event The event to handle.
  550. */
  551. handleShortcutFeature(feature: API_Action, event: KeyboardEventLike): void;
  552. }
  553. type API_KeyCollection = string[];
  554. interface API_Shortcuts {
  555. fullScreen: API_KeyCollection;
  556. togglePanel: API_KeyCollection;
  557. panelPosition: API_KeyCollection;
  558. toggleNav: API_KeyCollection;
  559. toolbar: API_KeyCollection;
  560. search: API_KeyCollection;
  561. focusNav: API_KeyCollection;
  562. focusIframe: API_KeyCollection;
  563. focusPanel: API_KeyCollection;
  564. prevComponent: API_KeyCollection;
  565. nextComponent: API_KeyCollection;
  566. prevStory: API_KeyCollection;
  567. nextStory: API_KeyCollection;
  568. shortcutsPage: API_KeyCollection;
  569. aboutPage: API_KeyCollection;
  570. escape: API_KeyCollection;
  571. collapseAll: API_KeyCollection;
  572. expandAll: API_KeyCollection;
  573. remount: API_KeyCollection;
  574. }
  575. type API_Action = keyof API_Shortcuts;
  576. interface API_AddonShortcut {
  577. label: string;
  578. defaultShortcut: API_KeyCollection;
  579. actionName: string;
  580. showInMenu?: boolean;
  581. action: (...args: any[]) => any;
  582. }
  583. type API_AddonShortcuts = Record<string, API_AddonShortcut>;
  584. type API_AddonShortcutLabels = Record<string, string>;
  585. type API_AddonShortcutDefaults = Record<string, API_KeyCollection>;
  586. interface SubState$3 {
  587. customQueryParams: QueryParams;
  588. }
  589. interface QueryParams {
  590. [key: string]: string | null;
  591. }
  592. /**
  593. * SubAPI for managing URL navigation and state.
  594. */
  595. interface SubAPI$3 {
  596. /**
  597. * Navigate to a new URL.
  598. * @param {string} url - The URL to navigate to.
  599. * @param {NavigateOptions} options - Options for the navigation.
  600. * @returns {void}
  601. */
  602. navigateUrl: (url: string, options: NavigateOptions) => void;
  603. /**
  604. * Get the value of a query parameter from the current URL.
  605. * @param {string} key - The key of the query parameter to get.
  606. * @returns {string | undefined} The value of the query parameter, or undefined if it does not exist.
  607. */
  608. getQueryParam: (key: string) => string | undefined;
  609. /**
  610. * Returns an object containing the current state of the URL.
  611. * @returns {{
  612. * queryParams: QueryParams,
  613. * path: string,
  614. * viewMode?: string,
  615. * storyId?: string,
  616. * url: string
  617. * }} An object containing the current state of the URL.
  618. */
  619. getUrlState: () => {
  620. queryParams: QueryParams;
  621. path: string;
  622. viewMode?: string;
  623. storyId?: string;
  624. url: string;
  625. };
  626. /**
  627. * Set the query parameters for the current URL.
  628. * @param {QueryParams} input - An object containing the query parameters to set.
  629. * @returns {void}
  630. */
  631. setQueryParams: (input: QueryParams) => void;
  632. }
  633. interface SubState$2 {
  634. versions: API_Versions & API_UnknownEntries;
  635. lastVersionCheck: number;
  636. dismissedVersionNotification: undefined | string;
  637. }
  638. interface SubAPI$2 {
  639. /**
  640. * Returns the current version of the Storybook Manager.
  641. *
  642. * @returns {API_Version} The current version of the Storybook Manager.
  643. */
  644. getCurrentVersion: () => API_Version;
  645. /**
  646. * Returns the latest version of the Storybook Manager.
  647. *
  648. * @returns {API_Version} The latest version of the Storybook Manager.
  649. */
  650. getLatestVersion: () => API_Version;
  651. /**
  652. * Checks if an update is available for the Storybook Manager.
  653. *
  654. * @returns {boolean} True if an update is available, false otherwise.
  655. */
  656. versionUpdateAvailable: () => boolean;
  657. }
  658. type SubState$1 = {
  659. whatsNewData?: WhatsNewData;
  660. };
  661. type SubAPI$1 = {
  662. isWhatsNewUnread(): boolean;
  663. whatsNewHasBeenRead(): void;
  664. toggleWhatsNewNotifications(): void;
  665. };
  666. interface SubState {
  667. globals?: Globals;
  668. globalTypes?: GlobalTypes;
  669. }
  670. interface SubAPI {
  671. /**
  672. * Returns the current global data object.
  673. * @returns {Globals} The current global data object.
  674. */
  675. getGlobals: () => Globals;
  676. /**
  677. * Returns the current global types object.
  678. * @returns {GlobalTypes} The current global types object.
  679. */
  680. getGlobalTypes: () => GlobalTypes;
  681. /**
  682. * Updates the current global data object with the provided new global data object.
  683. * @param {Globals} newGlobals - The new global data object to update with.
  684. * @returns {void}
  685. */
  686. updateGlobals: (newGlobals: Globals) => void;
  687. }
  688. declare function mockChannel(): Channel;
  689. interface DeprecatedAddonWithId {
  690. /**
  691. * @deprecated will be removed in 8.0, when registering addons, please use the addon id as the first argument
  692. */
  693. id?: string;
  694. }
  695. declare class AddonStore {
  696. constructor();
  697. private loaders;
  698. private elements;
  699. private config;
  700. private channel;
  701. /**
  702. * @deprecated will be removed in 8.0
  703. */
  704. private serverChannel;
  705. private promise;
  706. private resolve;
  707. getChannel: () => Channel;
  708. /**
  709. * @deprecated will be removed in 8.0, use getChannel instead
  710. */
  711. getServerChannel: () => Channel;
  712. ready: () => Promise<Channel>;
  713. hasChannel: () => boolean;
  714. /**
  715. * @deprecated will be removed in 8.0, please use the normal channel instead
  716. */
  717. hasServerChannel: () => boolean;
  718. setChannel: (channel: Channel) => void;
  719. /**
  720. * @deprecated will be removed in 8.0, please use the normal channel instead
  721. */
  722. setServerChannel: (channel: Channel) => void;
  723. getElements<T extends Addon_Types | Addon_TypesEnum.experimental_PAGE | Addon_TypesEnum.experimental_SIDEBAR_BOTTOM | Addon_TypesEnum.experimental_SIDEBAR_TOP>(type: T): Addon_Collection<Addon_TypesMapping[T]>;
  724. /**
  725. * Adds a panel to the addon store.
  726. * @param {string} id - The id of the panel.
  727. * @param {Addon_Type} options - The options for the panel.
  728. * @returns {void}
  729. *
  730. * @deprecated Use the 'add' method instead.
  731. * @example
  732. * addons.add('My Panel', {
  733. * title: 'My Title',
  734. * type: types.PANEL,
  735. * render: () => <div>My Content</div>,
  736. * });
  737. */
  738. addPanel: (id: string, options: Omit<Addon_BaseType, 'type' | 'id'> & DeprecatedAddonWithId) => void;
  739. /**
  740. * Adds an addon to the addon store.
  741. * @param {string} id - The id of the addon.
  742. * @param {Addon_Type} addon - The addon to add.
  743. * @returns {void}
  744. */
  745. add(id: string, addon: Addon_BaseType | (Omit<Addon_SidebarTopType, 'id'> & DeprecatedAddonWithId) | (Omit<Addon_SidebarBottomType, 'id'> & DeprecatedAddonWithId) | (Omit<Addon_PageType, 'id'> & DeprecatedAddonWithId) | (Omit<Addon_WrapperType, 'id'> & DeprecatedAddonWithId)): void;
  746. setConfig: (value: Addon_Config) => void;
  747. getConfig: () => Addon_Config;
  748. /**
  749. * Registers an addon loader function.
  750. *
  751. * @param {string} id - The id of the addon loader.
  752. * @param {(api: API) => void} callback - The function that will be called to register the addon.
  753. * @returns {void}
  754. */
  755. register: (id: string, callback: (api: API) => void) => void;
  756. loadAddons: (api: any) => void;
  757. }
  758. declare const addons: AddonStore;
  759. declare const _default: <TObj = any>(a: TObj, b: Partial<TObj>) => TObj & Partial<TObj>;
  760. declare const ActiveTabs: {
  761. SIDEBAR: "sidebar";
  762. CANVAS: "canvas";
  763. ADDONS: "addons";
  764. };
  765. declare const ManagerContext: React.Context<{
  766. api: API;
  767. state: State;
  768. }>;
  769. type State = SubState$5 & SubState$7 & SubState$6 & SubState$9 & SubState$2 & SubState$3 & SubState$4 & SubState$8 & SubState & SubState$1 & RouterData & API_OptionsData & DeprecatedState & Other;
  770. type API = SubAPI$b & SubAPI$a & SubAPI$c & SubAPI$7 & SubAPI$6 & SubAPI & SubAPI$5 & SubAPI$9 & SubAPI$4 & SubAPI$8 & SubAPI$2 & SubAPI$3 & SubAPI$1 & Other;
  771. interface DeprecatedState {
  772. /**
  773. * @deprecated use index
  774. */
  775. storiesHash: API_IndexHash;
  776. /**
  777. * @deprecated use previewInitialized
  778. */
  779. storiesConfigured: boolean;
  780. /**
  781. * @deprecated use indexError
  782. */
  783. storiesFailed?: Error;
  784. }
  785. interface Other {
  786. [key: string]: any;
  787. }
  788. interface Combo {
  789. api: API;
  790. state: State;
  791. }
  792. type ManagerProviderProps = RouterData & API_ProviderData<API> & {
  793. children: ReactNode | ((props: Combo) => ReactNode);
  794. };
  795. declare const combineParameters: (...parameterSets: Parameters[]) => any;
  796. declare class ManagerProvider extends Component<ManagerProviderProps, State> {
  797. api: API;
  798. modules: ReturnType<ModuleFn>[];
  799. static displayName: string;
  800. constructor(props: ManagerProviderProps);
  801. static getDerivedStateFromProps(props: ManagerProviderProps, state: State): State;
  802. shouldComponentUpdate(nextProps: ManagerProviderProps, nextState: State): boolean;
  803. initModules: () => void;
  804. render(): React.JSX.Element;
  805. }
  806. interface ManagerConsumerProps<P = unknown> {
  807. filter?: (combo: Combo) => P;
  808. children: FC<P> | ReactNode;
  809. }
  810. declare function ManagerConsumer<P = Combo>({ filter, children, }: ManagerConsumerProps<P>): ReactElement;
  811. declare function useStorybookState(): State;
  812. declare function useStorybookApi(): API;
  813. interface API_EventMap {
  814. [eventId: string]: Listener;
  815. }
  816. declare const useChannel: (eventMap: API_EventMap, deps?: any[]) => (type: string, ...args: any[]) => void;
  817. declare function useStoryPrepared(storyId?: StoryId): boolean;
  818. declare function useParameter<S>(parameterKey: string, defaultValue?: S): S;
  819. declare function useSharedState<S>(stateId: string, defaultState?: S): [S, (newStateOrMerger: S | API_StateMerger<S>, options?: Options) => void];
  820. declare function useAddonState<S>(addonId: string, defaultState?: S): [S, (newStateOrMerger: S | API_StateMerger<S>, options?: Options) => void];
  821. declare function useArgs(): [Args, (newArgs: Args) => void, (argNames?: string[]) => void];
  822. declare function useGlobals(): [Args, (newGlobals: Args) => void];
  823. declare function useGlobalTypes(): ArgTypes;
  824. declare function useArgTypes(): ArgTypes;
  825. /**
  826. * We need to rename this so it's not compiled to a straight re-export
  827. * Our globalization plugin can't handle an import and export of the same name in different lines
  828. * @deprecated
  829. */
  830. declare const typesX: typeof Addon_TypesEnum;
  831. export { API, API_EventMap, ActiveTabs, AddonStore, Combo, ManagerConsumer as Consumer, KeyboardEventLike, ManagerContext, ManagerProviderProps, ManagerProvider as Provider, State, Options as StoreOptions, addons, combineParameters, controlOrMetaKey, controlOrMetaSymbol, eventMatchesShortcut, eventToShortcut, isMacLike, isShortcutTaken, keyToSymbol, _default as merge, mockChannel, optionOrAltSymbol, shortcutMatchesShortcut, shortcutToHumanString, typesX as types, useAddonState, useArgTypes, useArgs, useChannel, useGlobalTypes, useGlobals, useParameter, useSharedState, useStoryPrepared, useStorybookApi, useStorybookState };