storybook 9.0.0-alpha.0 → 9.0.0-alpha.10

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 (259) hide show
  1. package/README.md +31 -29
  2. package/assets/browser/favicon.svg +1 -0
  3. package/assets/browser/nunito-sans-bold-italic.woff2 +0 -0
  4. package/assets/browser/nunito-sans-bold.woff2 +0 -0
  5. package/assets/browser/nunito-sans-italic.woff2 +0 -0
  6. package/assets/browser/nunito-sans-regular.woff2 +0 -0
  7. package/assets/docs/addon-controls-args-annotated.png +0 -0
  8. package/assets/docs/addon-controls-args-background-color.png +0 -0
  9. package/assets/docs/addon-controls-args-background-string.png +0 -0
  10. package/assets/docs/addon-controls-args-docs.png +0 -0
  11. package/assets/docs/addon-controls-args-logging.png +0 -0
  12. package/assets/docs/addon-controls-args-no-annotation.png +0 -0
  13. package/assets/docs/addon-controls-args-reflow-slider.png +0 -0
  14. package/assets/docs/addon-controls-args-reflow.png +0 -0
  15. package/assets/docs/addon-controls-args-template.png +0 -0
  16. package/assets/docs/addon-controls-expanded.png +0 -0
  17. package/assets/docs/addon-controls-hero.gif +0 -0
  18. package/assets/docs/addon-controls-install.png +0 -0
  19. package/assets/docs/hero.gif +0 -0
  20. package/assets/docs/message-reference.png +0 -0
  21. package/assets/docs/viewport.png +0 -0
  22. package/assets/server/addon.tsconfig.json +6 -0
  23. package/assets/server/base-preview-body.html +119 -0
  24. package/assets/server/base-preview-head.html +451 -0
  25. package/assets/server/template.ejs +87 -0
  26. package/bin/index.cjs +1 -1
  27. package/dist/actions/decorator.d.ts +6 -0
  28. package/dist/actions/decorator.js +139 -0
  29. package/dist/actions/index.cjs +127 -0
  30. package/dist/actions/index.d.ts +105 -0
  31. package/dist/actions/index.js +112 -0
  32. package/dist/actions/manager.js +1196 -0
  33. package/dist/actions/preview.cjs +165 -0
  34. package/dist/actions/preview.d.ts +55 -0
  35. package/dist/actions/preview.js +156 -0
  36. package/dist/babel/index.cjs +54034 -0
  37. package/dist/babel/index.d.ts +7488 -0
  38. package/dist/babel/index.js +54044 -0
  39. package/dist/bin/index.cjs +119 -0
  40. package/dist/bin/index.js +113 -0
  41. package/dist/builder-manager/index.cjs +2140 -0
  42. package/dist/builder-manager/index.d.ts +19 -0
  43. package/dist/builder-manager/index.js +2162 -0
  44. package/dist/channels/index.cjs +1913 -0
  45. package/dist/channels/index.d.ts +108 -0
  46. package/dist/channels/index.js +1881 -0
  47. package/dist/cli/bin/index.cjs +2687 -0
  48. package/dist/cli/bin/index.d.ts +2 -0
  49. package/dist/cli/bin/index.js +2707 -0
  50. package/dist/cli/index.cjs +17327 -0
  51. package/dist/cli/index.d.ts +209 -0
  52. package/dist/cli/index.js +17349 -0
  53. package/dist/client-logger/index.cjs +80 -0
  54. package/dist/client-logger/index.d.ts +29 -0
  55. package/dist/client-logger/index.js +64 -0
  56. package/dist/common/index.cjs +20569 -0
  57. package/dist/common/index.d.ts +949 -0
  58. package/dist/common/index.js +20654 -0
  59. package/dist/components/index.cjs +27924 -0
  60. package/dist/components/index.d.ts +1423 -0
  61. package/dist/components/index.js +24673 -0
  62. package/dist/controls/decorator.d.ts +5 -0
  63. package/dist/controls/decorator.js +8 -0
  64. package/dist/controls/index.cjs +26 -0
  65. package/dist/controls/index.d.ts +39 -0
  66. package/dist/controls/index.js +6 -0
  67. package/dist/controls/manager.js +5545 -0
  68. package/dist/controls/preview.cjs +26 -0
  69. package/dist/controls/preview.d.ts +55 -0
  70. package/dist/controls/preview.js +9 -0
  71. package/dist/core-events/index.cjs +167 -0
  72. package/dist/core-events/index.d.ts +426 -0
  73. package/dist/core-events/index.js +149 -0
  74. package/dist/core-server/index.cjs +38183 -0
  75. package/dist/core-server/index.d.ts +720 -0
  76. package/dist/core-server/index.js +38272 -0
  77. package/dist/core-server/presets/common-manager.js +20 -0
  78. package/dist/core-server/presets/common-override-preset.cjs +4824 -0
  79. package/dist/core-server/presets/common-override-preset.js +4829 -0
  80. package/dist/core-server/presets/common-preset.cjs +10231 -0
  81. package/dist/core-server/presets/common-preset.js +10309 -0
  82. package/dist/csf/index.cjs +179 -0
  83. package/dist/csf/index.d.ts +750 -0
  84. package/dist/csf/index.js +172 -0
  85. package/dist/csf-tools/index.cjs +1422 -0
  86. package/dist/csf-tools/index.d.ts +250 -0
  87. package/dist/csf-tools/index.js +1439 -0
  88. package/dist/docs-tools/index.cjs +2891 -0
  89. package/dist/docs-tools/index.d.ts +162 -0
  90. package/dist/docs-tools/index.js +2876 -0
  91. package/dist/index.cjs +17 -1
  92. package/dist/index.d.ts +1 -1
  93. package/dist/index.js +2 -7
  94. package/dist/instrumenter/index.cjs +3485 -0
  95. package/dist/instrumenter/index.d.ts +104 -0
  96. package/dist/instrumenter/index.js +4965 -0
  97. package/dist/manager/globals-module-info.cjs +817 -0
  98. package/dist/manager/globals-module-info.d.ts +36 -0
  99. package/dist/manager/globals-module-info.js +804 -0
  100. package/dist/manager/globals-runtime.js +77536 -0
  101. package/dist/manager/globals.cjs +47 -0
  102. package/dist/manager/globals.d.ts +24 -0
  103. package/dist/manager/globals.js +34 -0
  104. package/dist/manager/runtime.js +12323 -0
  105. package/dist/manager-api/index.cjs +11074 -0
  106. package/dist/manager-api/index.d.ts +1512 -0
  107. package/dist/manager-api/index.js +4835 -0
  108. package/dist/manager-errors.d.ts +89 -0
  109. package/dist/manager-errors.js +99 -0
  110. package/dist/node-logger/index.cjs +1642 -0
  111. package/dist/node-logger/index.d.ts +117 -0
  112. package/dist/node-logger/index.js +1652 -0
  113. package/dist/preview/globals.cjs +38 -0
  114. package/dist/preview/globals.d.ts +15 -0
  115. package/dist/preview/globals.js +25 -0
  116. package/dist/preview/runtime.js +43629 -0
  117. package/dist/preview-api/index.cjs +5224 -0
  118. package/dist/preview-api/index.d.ts +1093 -0
  119. package/dist/preview-api/index.js +5292 -0
  120. package/dist/preview-errors.cjs +503 -0
  121. package/dist/preview-errors.d.ts +212 -0
  122. package/dist/preview-errors.js +449 -0
  123. package/dist/router/index.cjs +3296 -0
  124. package/dist/router/index.d.ts +385 -0
  125. package/dist/router/index.js +1843 -0
  126. package/dist/server-errors.cjs +727 -0
  127. package/dist/server-errors.d.ts +296 -0
  128. package/dist/server-errors.js +728 -0
  129. package/dist/telemetry/index.cjs +2756 -0
  130. package/dist/telemetry/index.d.ts +133 -0
  131. package/dist/telemetry/index.js +2797 -0
  132. package/dist/test/index.cjs +35685 -0
  133. package/dist/test/index.d.ts +186 -0
  134. package/dist/test/index.js +33751 -0
  135. package/dist/test/preview.cjs +15869 -0
  136. package/dist/test/preview.d.ts +54 -0
  137. package/dist/test/preview.js +14440 -0
  138. package/dist/test/spy.cjs +257 -0
  139. package/dist/test/spy.d.ts +66 -0
  140. package/dist/test/spy.js +239 -0
  141. package/dist/theming/create.cjs +232 -0
  142. package/dist/theming/create.d.ts +50 -0
  143. package/dist/theming/create.js +216 -0
  144. package/dist/theming/index.cjs +2665 -0
  145. package/dist/theming/index.d.ts +11939 -0
  146. package/dist/theming/index.js +2485 -0
  147. package/dist/types/index.cjs +27 -0
  148. package/dist/types/index.d.ts +2795 -0
  149. package/dist/types/index.js +7 -0
  150. package/dist/viewport/index.cjs +310 -0
  151. package/dist/viewport/index.d.ts +320 -0
  152. package/dist/viewport/index.js +290 -0
  153. package/dist/viewport/manager.js +400 -0
  154. package/dist/viewport/preview.cjs +35 -0
  155. package/dist/viewport/preview.d.ts +69 -0
  156. package/dist/viewport/preview.js +19 -0
  157. package/package.json +518 -209
  158. package/.eslintrc.cjs +0 -31
  159. package/__mocks__/@aw-web-design/x-default-browser.js +0 -2
  160. package/core/babel/index.cjs +0 -1
  161. package/core/babel/index.d.ts +0 -2
  162. package/core/babel/index.js +0 -1
  163. package/core/builder-manager/index.cjs +0 -1
  164. package/core/builder-manager/index.d.ts +0 -2
  165. package/core/builder-manager/index.js +0 -1
  166. package/core/channels/index.cjs +0 -1
  167. package/core/channels/index.d.ts +0 -2
  168. package/core/channels/index.js +0 -1
  169. package/core/cli/bin/index.cjs +0 -1
  170. package/core/cli/bin/index.d.ts +0 -2
  171. package/core/cli/bin/index.js +0 -1
  172. package/core/cli/index.cjs +0 -1
  173. package/core/cli/index.d.ts +0 -2
  174. package/core/cli/index.js +0 -1
  175. package/core/client-logger/index.cjs +0 -1
  176. package/core/client-logger/index.d.ts +0 -2
  177. package/core/client-logger/index.js +0 -1
  178. package/core/common/index.cjs +0 -1
  179. package/core/common/index.d.ts +0 -2
  180. package/core/common/index.js +0 -1
  181. package/core/components/index.cjs +0 -1
  182. package/core/components/index.d.ts +0 -2
  183. package/core/components/index.js +0 -1
  184. package/core/core-events/index.cjs +0 -1
  185. package/core/core-events/index.d.ts +0 -2
  186. package/core/core-events/index.js +0 -1
  187. package/core/core-server/index.cjs +0 -1
  188. package/core/core-server/index.d.ts +0 -2
  189. package/core/core-server/index.js +0 -1
  190. package/core/core-server/presets/common-manager.js +0 -1
  191. package/core/core-server/presets/common-override-preset.cjs +0 -1
  192. package/core/core-server/presets/common-override-preset.js +0 -1
  193. package/core/core-server/presets/common-preset.cjs +0 -1
  194. package/core/core-server/presets/common-preset.js +0 -1
  195. package/core/csf/index.cjs +0 -1
  196. package/core/csf/index.d.ts +0 -2
  197. package/core/csf/index.js +0 -1
  198. package/core/csf-tools/index.cjs +0 -1
  199. package/core/csf-tools/index.d.ts +0 -2
  200. package/core/csf-tools/index.js +0 -1
  201. package/core/docs-tools/index.cjs +0 -1
  202. package/core/docs-tools/index.d.ts +0 -2
  203. package/core/docs-tools/index.js +0 -1
  204. package/core/index.cjs +0 -1
  205. package/core/index.d.ts +0 -2
  206. package/core/index.js +0 -1
  207. package/core/manager/globals-module-info.cjs +0 -1
  208. package/core/manager/globals-module-info.d.ts +0 -2
  209. package/core/manager/globals-module-info.js +0 -1
  210. package/core/manager/globals-runtime.js +0 -1
  211. package/core/manager/globals.cjs +0 -1
  212. package/core/manager/globals.d.ts +0 -2
  213. package/core/manager/globals.js +0 -1
  214. package/core/manager-api/index.cjs +0 -1
  215. package/core/manager-api/index.d.ts +0 -2
  216. package/core/manager-api/index.js +0 -1
  217. package/core/manager-errors.d.ts +0 -2
  218. package/core/manager-errors.js +0 -1
  219. package/core/node-logger/index.cjs +0 -1
  220. package/core/node-logger/index.d.ts +0 -2
  221. package/core/node-logger/index.js +0 -1
  222. package/core/preview/globals.cjs +0 -1
  223. package/core/preview/globals.d.ts +0 -2
  224. package/core/preview/globals.js +0 -1
  225. package/core/preview/runtime.js +0 -1
  226. package/core/preview-api/index.cjs +0 -1
  227. package/core/preview-api/index.d.ts +0 -2
  228. package/core/preview-api/index.js +0 -1
  229. package/core/preview-errors.cjs +0 -1
  230. package/core/preview-errors.d.ts +0 -2
  231. package/core/preview-errors.js +0 -1
  232. package/core/router/index.cjs +0 -1
  233. package/core/router/index.d.ts +0 -2
  234. package/core/router/index.js +0 -1
  235. package/core/server-errors.cjs +0 -1
  236. package/core/server-errors.d.ts +0 -2
  237. package/core/server-errors.js +0 -1
  238. package/core/telemetry/index.cjs +0 -1
  239. package/core/telemetry/index.d.ts +0 -2
  240. package/core/telemetry/index.js +0 -1
  241. package/core/theming/create.cjs +0 -1
  242. package/core/theming/create.d.ts +0 -2
  243. package/core/theming/create.js +0 -1
  244. package/core/theming/index.cjs +0 -1
  245. package/core/theming/index.d.ts +0 -2
  246. package/core/theming/index.js +0 -1
  247. package/core/types/index.cjs +0 -1
  248. package/core/types/index.d.ts +0 -2
  249. package/core/types/index.js +0 -1
  250. package/core.cjs +0 -0
  251. package/core.d.ts +0 -0
  252. package/core.js +0 -1
  253. package/dist/chunk-OWLSIX54.js +0 -8
  254. package/dist/core-path.cjs +0 -1
  255. package/dist/core-path.d.ts +0 -3
  256. package/dist/core-path.js +0 -9
  257. package/dist/proxy.cjs +0 -1
  258. package/dist/proxy.d.ts +0 -2
  259. package/dist/proxy.js +0 -9
@@ -0,0 +1,720 @@
1
+ import { loadAllPresets } from 'storybook/internal/common';
2
+ export { getPreviewBodyTemplate, getPreviewHeadTemplate } from 'storybook/internal/common';
3
+ import * as storybook_internal_types from 'storybook/internal/types';
4
+ import { CLIOptions, LoadOptions, BuilderOptions, StorybookConfigRaw, IndexInputStats, NormalizedStoriesSpecifier, Path, Indexer, DocsOptions, StoryIndexEntry, DocsIndexEntry, Tag, IndexEntry, StoryIndex, Options, NormalizedProjectAnnotations, ProjectAnnotations, ComposedStoryFn } from 'storybook/internal/types';
5
+ import { EventType } from 'storybook/internal/telemetry';
6
+ import { Channel } from 'storybook/internal/channels';
7
+ import { StoryId } from 'storybook/internal/csf';
8
+
9
+ type BuildStaticStandaloneOptions = CLIOptions & LoadOptions & BuilderOptions & {
10
+ outputDir: string;
11
+ };
12
+ declare function buildStaticStandalone(options: BuildStaticStandaloneOptions): Promise<void>;
13
+
14
+ declare function buildDevStandalone(options: CLIOptions & LoadOptions & BuilderOptions & {
15
+ storybookVersion?: string;
16
+ previewConfigPath?: string;
17
+ }): Promise<{
18
+ port: number;
19
+ address: string;
20
+ networkAddress: string;
21
+ }>;
22
+
23
+ type BuildIndexOptions = CLIOptions & LoadOptions & BuilderOptions;
24
+ declare const buildIndex: (options: BuildIndexOptions) => Promise<storybook_internal_types.StoryIndex>;
25
+ declare const buildIndexStandalone: (options: BuildIndexOptions & {
26
+ outputFile: string;
27
+ }) => Promise<void>;
28
+
29
+ type TelemetryOptions = {
30
+ cliOptions: CLIOptions;
31
+ presetOptions?: Parameters<typeof loadAllPresets>[0];
32
+ printError?: (err: any) => void;
33
+ skipPrompt?: boolean;
34
+ };
35
+ type ErrorLevel = 'none' | 'error' | 'full';
36
+ declare function getErrorLevel({ cliOptions, presetOptions, skipPrompt, }: TelemetryOptions): Promise<ErrorLevel>;
37
+ declare function sendTelemetryError(_error: unknown, eventType: EventType, options: TelemetryOptions): Promise<void>;
38
+ declare function withTelemetry<T>(eventType: EventType, options: TelemetryOptions, run: () => Promise<T>): Promise<T | undefined>;
39
+
40
+ declare function build(options?: any, frameworkOptions?: any): Promise<void | {
41
+ port: number;
42
+ address: string;
43
+ networkAddress: string;
44
+ }>;
45
+
46
+ declare const mapStaticDir: (staticDir: NonNullable<StorybookConfigRaw["staticDirs"]>[number], configDir: string) => {
47
+ staticDir: string;
48
+ staticPath: string;
49
+ targetDir: string;
50
+ targetEndpoint: string;
51
+ };
52
+
53
+ /**
54
+ * A function that json from a file
55
+ */
56
+ interface ReadJsonSync {
57
+ (packageJsonPath: string): any | undefined;
58
+ }
59
+
60
+ /**
61
+ * Function that can match a path
62
+ */
63
+ interface MatchPath {
64
+ (requestedModule: string, readJson?: ReadJsonSync, fileExists?: (name: string) => boolean, extensions?: ReadonlyArray<string>): string | undefined;
65
+ }
66
+
67
+ declare class IndexingError extends Error {
68
+ importPaths: string[];
69
+ constructor(message: string, importPaths: string[], stack?: string);
70
+ pathsString(): string;
71
+ toString(): string;
72
+ }
73
+
74
+ type IndexStatsSummary = Record<keyof IndexInputStats, number>;
75
+
76
+ type StoryIndexEntryWithExtra = StoryIndexEntry & {
77
+ extra: {
78
+ metaId?: string;
79
+ stats: IndexInputStats;
80
+ };
81
+ };
82
+ /** A .mdx file will produce a docs entry */
83
+ type DocsCacheEntry = DocsIndexEntry;
84
+ /** A `_.stories._` file will produce a list of stories and possibly a docs entry */
85
+ type StoriesCacheEntry = {
86
+ entries: (StoryIndexEntryWithExtra | DocsIndexEntry)[];
87
+ dependents: Path[];
88
+ type: 'stories';
89
+ };
90
+ type ErrorEntry = {
91
+ type: 'error';
92
+ err: IndexingError;
93
+ };
94
+ type CacheEntry = false | StoriesCacheEntry | DocsCacheEntry | ErrorEntry;
95
+ type StoryIndexGeneratorOptions = {
96
+ workingDir: Path;
97
+ configDir: Path;
98
+ indexers: Indexer[];
99
+ docs: DocsOptions;
100
+ build?: StorybookConfigRaw['build'];
101
+ };
102
+ /**
103
+ * The StoryIndexGenerator extracts stories and docs entries for each file matching (one or more)
104
+ * stories "specifiers", as defined in main.js.
105
+ *
106
+ * The output is a set of entries (see above for the types).
107
+ *
108
+ * Each file is treated as a stories or a (modern) docs file.
109
+ *
110
+ * A stories file is indexed by an indexer (passed in), which produces a list of stories.
111
+ *
112
+ * - If the stories have the `parameters.docsOnly` setting, they are disregarded.
113
+ * - If the stories have `autodocs` enabled, a docs entry is added pointing to the story file.
114
+ *
115
+ * A (modern) docs (.mdx) file is indexed, a docs entry is added.
116
+ *
117
+ * In the preview, a docs entry with the `autodocs` tag will be rendered as a CSF file that exports
118
+ * an MDX template on the `docs.page` parameter, whereas other docs entries are rendered as MDX
119
+ * files directly.
120
+ *
121
+ * The entries are "uniq"-ed and sorted. Stories entries are preferred to docs entries and MDX docs
122
+ * entries are preferred to CSF templates (with warnings).
123
+ */
124
+ declare class StoryIndexGenerator {
125
+ readonly specifiers: NormalizedStoriesSpecifier[];
126
+ readonly options: StoryIndexGeneratorOptions;
127
+ private specifierToCache;
128
+ private lastIndex?;
129
+ private lastStats?;
130
+ private lastError?;
131
+ constructor(specifiers: NormalizedStoriesSpecifier[], options: StoryIndexGeneratorOptions);
132
+ initialize(): Promise<void>;
133
+ /** Run the updater function over all the empty cache entries */
134
+ updateExtracted(updater: (specifier: NormalizedStoriesSpecifier, absolutePath: Path, existingEntry: CacheEntry) => Promise<CacheEntry>, overwrite?: boolean): Promise<void>;
135
+ isDocsMdx(absolutePath: Path): boolean;
136
+ ensureExtracted({ projectTags, }: {
137
+ projectTags?: Tag[];
138
+ }): Promise<{
139
+ entries: (IndexEntry | ErrorEntry)[];
140
+ stats: IndexStatsSummary;
141
+ }>;
142
+ findDependencies(absoluteImports: Path[]): StoriesCacheEntry[];
143
+ /**
144
+ * Try to find the component path from a raw import string and return it in the same format as
145
+ * `importPath`. Respect tsconfig paths if available.
146
+ *
147
+ * If no such file exists, assume that the import is from a package and return the raw
148
+ */
149
+ resolveComponentPath(rawComponentPath: Path, absolutePath: Path, matchPath: MatchPath | undefined): string;
150
+ extractStories(specifier: NormalizedStoriesSpecifier, absolutePath: Path, projectTags?: Tag[]): Promise<StoriesCacheEntry | DocsCacheEntry>;
151
+ extractDocs(specifier: NormalizedStoriesSpecifier, absolutePath: Path, projectTags?: Tag[]): Promise<false | DocsIndexEntry>;
152
+ chooseDuplicate(firstEntry: IndexEntry, secondEntry: IndexEntry, projectTags: Tag[]): IndexEntry;
153
+ sortStories(entries: StoryIndex['entries'], storySortParameter: any): Promise<Record<string, IndexEntry>>;
154
+ getIndex(): Promise<StoryIndex>;
155
+ getIndexAndStats(): Promise<{
156
+ storyIndex: StoryIndex;
157
+ stats: IndexStatsSummary;
158
+ }>;
159
+ invalidateAll(): void;
160
+ invalidate(specifier: NormalizedStoriesSpecifier, importPath: Path, removed: boolean): void;
161
+ getPreviewCode(): Promise<string | undefined>;
162
+ getProjectTags(previewCode?: string): string[];
163
+ storyFileNames(): string[];
164
+ }
165
+
166
+ declare function loadStorybook(options: CLIOptions & LoadOptions & BuilderOptions & {
167
+ storybookVersion?: string;
168
+ previewConfigPath?: string;
169
+ }): Promise<Options>;
170
+
171
+ type EnvironmentType = (typeof UniversalStore.Environment)[keyof typeof UniversalStore.Environment];
172
+ type StatusType = (typeof UniversalStore.Status)[keyof typeof UniversalStore.Status];
173
+ type StateUpdater<TState> = (prevState: TState) => TState;
174
+ type Actor = {
175
+ id: string;
176
+ type: (typeof UniversalStore.ActorType)[keyof typeof UniversalStore.ActorType];
177
+ environment: EnvironmentType;
178
+ };
179
+ type EventInfo = {
180
+ actor: Actor;
181
+ forwardingActor?: Actor;
182
+ };
183
+ type Listener<TEvent> = (event: TEvent, eventInfo: EventInfo) => void;
184
+ type BaseEvent = {
185
+ type: string;
186
+ payload?: any;
187
+ };
188
+ interface SetStateEvent<TState> extends BaseEvent {
189
+ type: typeof UniversalStore.InternalEventType.SET_STATE;
190
+ payload: {
191
+ state: TState;
192
+ previousState: TState;
193
+ };
194
+ }
195
+ interface ExistingStateRequestEvent extends BaseEvent {
196
+ type: typeof UniversalStore.InternalEventType.EXISTING_STATE_REQUEST;
197
+ payload: never;
198
+ }
199
+ interface ExistingStateResponseEvent<TState> extends BaseEvent {
200
+ type: typeof UniversalStore.InternalEventType.EXISTING_STATE_RESPONSE;
201
+ payload: TState;
202
+ }
203
+ interface LeaderCreatedEvent extends BaseEvent {
204
+ type: typeof UniversalStore.InternalEventType.LEADER_CREATED;
205
+ payload: never;
206
+ }
207
+ interface FollowerCreatedEvent extends BaseEvent {
208
+ type: typeof UniversalStore.InternalEventType.FOLLOWER_CREATED;
209
+ payload: never;
210
+ }
211
+ type InternalEvent<TState> = SetStateEvent<TState> | ExistingStateRequestEvent | ExistingStateResponseEvent<TState> | FollowerCreatedEvent | LeaderCreatedEvent;
212
+ type Event<TState, TEvent extends BaseEvent> = TEvent | InternalEvent<TState>;
213
+ type ChannelLike = Pick<Channel, 'on' | 'off' | 'emit'>;
214
+ type StoreOptions<TState> = {
215
+ id: string;
216
+ leader?: boolean;
217
+ initialState?: TState;
218
+ debug?: boolean;
219
+ };
220
+ type EnvironmentOverrides = {
221
+ channel: ChannelLike;
222
+ environment: EnvironmentType;
223
+ };
224
+
225
+ /**
226
+ * A universal store implementation that synchronizes state across different environments using a
227
+ * channel-based communication.
228
+ *
229
+ * The store follows a leader-follower pattern where:
230
+ *
231
+ * - Leader: The main store instance that owns and manages the state
232
+ * - Follower: Store instances that mirror the leader's state
233
+ *
234
+ * Features:
235
+ *
236
+ * - State synchronization across environments
237
+ * - Event-based communication
238
+ * - Type-safe state and custom events
239
+ * - Subscription system for state changes and custom events
240
+ *
241
+ * @remarks
242
+ * - The store must be created using the static `create()` method, not the constructor
243
+ * - Follower stores will automatically sync with their leader's state. If they have initial state, it
244
+ * will be replaced immediately when it has synced with the leader.
245
+ *
246
+ * @example
247
+ *
248
+ * ```typescript
249
+ * interface MyState {
250
+ * count: number;
251
+ * }
252
+ * interface MyCustomEvent {
253
+ * type: 'INCREMENT';
254
+ * payload: number;
255
+ * }
256
+ *
257
+ * // Create a leader store
258
+ * const leaderStore = UniversalStore.create<MyState, MyCustomEvent>({
259
+ * id: 'my-store',
260
+ * leader: true,
261
+ * initialState: { count: 0 },
262
+ * });
263
+ *
264
+ * // Create a follower store
265
+ * const followerStore = UniversalStore.create<MyState, MyCustomEvent>({
266
+ * id: 'my-store',
267
+ * leader: false,
268
+ * });
269
+ * ```
270
+ *
271
+ * @template State - The type of state managed by the store
272
+ * @template CustomEvent - Custom events that can be sent through the store. Must have a `type`
273
+ * string and optional `payload`
274
+ * @throws {Error} If constructed directly instead of using `create()`
275
+ * @throws {Error} If created without setting a channel first
276
+ * @throws {Error} If a follower is created with initial state
277
+ * @throws {Error} If a follower cannot find its leader within 1 second
278
+ */
279
+ declare class UniversalStore<State, CustomEvent extends {
280
+ type: string;
281
+ payload?: any;
282
+ } = {
283
+ type: string;
284
+ payload?: any;
285
+ }> {
286
+ /**
287
+ * Defines the possible actor types in the store system
288
+ *
289
+ * @readonly
290
+ */
291
+ static readonly ActorType: {
292
+ readonly LEADER: "LEADER";
293
+ readonly FOLLOWER: "FOLLOWER";
294
+ };
295
+ /**
296
+ * Defines the possible environments the store can run in
297
+ *
298
+ * @readonly
299
+ */
300
+ static readonly Environment: {
301
+ readonly SERVER: "SERVER";
302
+ readonly MANAGER: "MANAGER";
303
+ readonly PREVIEW: "PREVIEW";
304
+ readonly UNKNOWN: "UNKNOWN";
305
+ readonly MOCK: "MOCK";
306
+ };
307
+ /**
308
+ * Internal event types used for store synchronization
309
+ *
310
+ * @readonly
311
+ */
312
+ static readonly InternalEventType: {
313
+ readonly EXISTING_STATE_REQUEST: "__EXISTING_STATE_REQUEST";
314
+ readonly EXISTING_STATE_RESPONSE: "__EXISTING_STATE_RESPONSE";
315
+ readonly SET_STATE: "__SET_STATE";
316
+ readonly LEADER_CREATED: "__LEADER_CREATED";
317
+ readonly FOLLOWER_CREATED: "__FOLLOWER_CREATED";
318
+ };
319
+ static readonly Status: {
320
+ readonly UNPREPARED: "UNPREPARED";
321
+ readonly SYNCING: "SYNCING";
322
+ readonly READY: "READY";
323
+ readonly ERROR: "ERROR";
324
+ };
325
+ protected static isInternalConstructing: boolean;
326
+ /**
327
+ * The preparation construct is used to keep track of all store's preparation state the promise is
328
+ * resolved when the store is prepared with the static __prepare() method which will also change
329
+ * the state from PENDING to RESOLVED
330
+ */
331
+ private static preparation;
332
+ private static setupPreparationPromise;
333
+ /** Enable debug logs for this store */
334
+ debugging: boolean;
335
+ /** The actor object representing the store instance with a unique ID and a type */
336
+ get actor(): Actor;
337
+ /**
338
+ * The current state of the store, that signals both if the store is prepared by Storybook and
339
+ * also - in the case of a follower - if the state has been synced with the leader's state.
340
+ */
341
+ get status(): StatusType;
342
+ /**
343
+ * A promise that resolves when the store is fully ready. A leader will be ready when the store
344
+ * has been prepared by Storybook, which is almost instantly.
345
+ *
346
+ * A follower will be ready when the state has been synced with the leader's state, within a few
347
+ * hundred milliseconds.
348
+ */
349
+ untilReady(): Promise<[{
350
+ channel: ChannelLike;
351
+ environment: EnvironmentType;
352
+ }, void | undefined]>;
353
+ /**
354
+ * The syncing construct is used to keep track of if the instance's state has been synced with the
355
+ * other instances. A leader will immediately have the promise resolved. A follower will initially
356
+ * be in a PENDING state, and resolve the the leader has sent the existing state, or reject if no
357
+ * leader has responded before the timeout.
358
+ */
359
+ private syncing?;
360
+ private channelEventName;
361
+ private state;
362
+ private channel?;
363
+ private environment?;
364
+ private listeners;
365
+ private id;
366
+ private actorId;
367
+ private actorType;
368
+ protected constructor(options: StoreOptions<State>, environmentOverrides?: EnvironmentOverrides);
369
+ /** Creates a new instance of UniversalStore */
370
+ static create<State = any, CustomEvent extends {
371
+ type: string;
372
+ payload?: any;
373
+ } = {
374
+ type: string;
375
+ payload?: any;
376
+ }>(options: StoreOptions<State>): UniversalStore<State, CustomEvent>;
377
+ /** Gets the current state */
378
+ getState: () => State;
379
+ /**
380
+ * Updates the store's state
381
+ *
382
+ * Either a new state or a state updater function can be passed to the method.
383
+ */
384
+ setState(updater: State | StateUpdater<State>): void;
385
+ /**
386
+ * Subscribes to store events
387
+ *
388
+ * @returns A function to unsubscribe
389
+ */
390
+ subscribe: {
391
+ (listener: Listener<Event<State, CustomEvent>>): () => void;
392
+ <EventType extends Event<State, CustomEvent>['type']>(eventType: EventType, listener: Listener<Extract<Event<State, CustomEvent>, {
393
+ type: EventType;
394
+ }>>): () => void;
395
+ };
396
+ /**
397
+ * Subscribes to state changes
398
+ *
399
+ * @returns Unsubscribe function
400
+ */
401
+ onStateChange(listener: (state: State, previousState: State, eventInfo: EventInfo) => void): () => void;
402
+ /** Sends a custom event to the other stores */
403
+ send: (event: CustomEvent) => void;
404
+ private emitToChannel;
405
+ private prepareThis;
406
+ private emitToListeners;
407
+ private handleChannelEvents;
408
+ private debug;
409
+ }
410
+
411
+ /**
412
+ * A mock universal store that can be used when testing code that relies on a universal store. It
413
+ * functions exactly like a normal universal store, with a few exceptions:
414
+ *
415
+ * - It is fully isolated, meaning that it doesn't interact with any channel, and it is always a
416
+ * leader.
417
+ *
418
+ * If the second testUtils argument is provided, all the public methods are spied on, so they can be
419
+ * asserted.
420
+ *
421
+ * When a mock store is re-used across tests (eg. in stories), you manually need to reset the state
422
+ * after each test.
423
+ *
424
+ * @example
425
+ *
426
+ * ```ts
427
+ * import * as testUtils from 'storybook/test'; // in stories
428
+ * import { vi as testUtils } from 'vitest'; // ... or in Vitest tests
429
+ *
430
+ * const initialState = { ... };
431
+ * const store = new MockUniversalStore({ initialState }, testUtils);
432
+ *
433
+ * export default {
434
+ * title: 'My story',
435
+ * beforeEach: () => {
436
+ * return () => {
437
+ * store.setState(initialState);
438
+ * };
439
+ * }
440
+ * }
441
+ * ```
442
+ */
443
+ declare class MockUniversalStore<State, CustomEvent extends {
444
+ type: string;
445
+ payload?: any;
446
+ } = {
447
+ type: string;
448
+ payload?: any;
449
+ }> extends UniversalStore<State, CustomEvent> {
450
+ private testUtils;
451
+ constructor(options: StoreOptions<State>, testUtils?: any);
452
+ /** Create a mock universal store. This is just an alias for the constructor */
453
+ static create<State = any, CustomEvent extends {
454
+ type: string;
455
+ payload?: any;
456
+ } = {
457
+ type: string;
458
+ payload?: any;
459
+ }>(options: StoreOptions<State>, testUtils?: any): MockUniversalStore<State, CustomEvent>;
460
+ unsubscribeAll(): void;
461
+ }
462
+
463
+ declare global {
464
+ interface SymbolConstructor {
465
+ readonly observable: symbol;
466
+ }
467
+ }
468
+
469
+ declare global {
470
+ var globalProjectAnnotations: NormalizedProjectAnnotations<any>;
471
+ var defaultProjectAnnotations: ProjectAnnotations<any>;
472
+ }
473
+ type WrappedStoryRef = {
474
+ __pw_type: 'jsx' | 'importRef';
475
+ };
476
+ type UnwrappedJSXStoryRef = {
477
+ __pw_type: 'jsx';
478
+ type: UnwrappedImportStoryRef;
479
+ };
480
+ type UnwrappedImportStoryRef = ComposedStoryFn;
481
+ declare global {
482
+ function __pwUnwrapObject(storyRef: WrappedStoryRef): Promise<UnwrappedJSXStoryRef | UnwrappedImportStoryRef>;
483
+ }
484
+
485
+ type StatusValue = 'status-value:pending' | 'status-value:success' | 'status-value:error' | 'status-value:warning' | 'status-value:unknown';
486
+ type StatusTypeId = string;
487
+ type StatusByTypeId = Record<StatusTypeId, Status>;
488
+ type StatusesByStoryIdAndTypeId = Record<StoryId, StatusByTypeId>;
489
+ interface Status {
490
+ value: StatusValue;
491
+ typeId: StatusTypeId;
492
+ storyId: StoryId;
493
+ title: string;
494
+ description: string;
495
+ data?: any;
496
+ sidebarContextMenu?: boolean;
497
+ }
498
+ type StatusStore = {
499
+ getAll: () => StatusesByStoryIdAndTypeId;
500
+ set: (statuses: Status[]) => void;
501
+ onAllStatusChange: (listener: (statuses: StatusesByStoryIdAndTypeId, previousStatuses: StatusesByStoryIdAndTypeId) => void) => () => void;
502
+ onSelect: (listener: (selectedStatuses: Status[]) => void) => () => void;
503
+ unset: (storyIds?: StoryId[]) => void;
504
+ };
505
+ type StatusStoreByTypeId = StatusStore & {
506
+ typeId: StatusTypeId;
507
+ };
508
+
509
+ type TestProviderState = 'test-provider-state:pending' | 'test-provider-state:running' | 'test-provider-state:succeeded' | 'test-provider-state:crashed';
510
+ type TestProviderId = string;
511
+ type TestProviderStateByProviderId = Record<TestProviderId, TestProviderState>;
512
+ type TestProviderStoreEventType = 'run-all' | 'clear-all' | 'settings-changed';
513
+ type TestProviderStoreEvent = BaseEvent & {
514
+ type: TestProviderStoreEventType;
515
+ };
516
+ type BaseTestProviderStore = {
517
+ /**
518
+ * Notifies all listeners that settings have changed for test providers. The Storybook UI will
519
+ * highlight the test providers to tell the user that settings has changed.
520
+ */
521
+ settingsChanged: () => void;
522
+ /**
523
+ * Subscribe to clicks on the "Run All" button, that is supposed to trigger all test providers to
524
+ * run. Your test provider should do the "main thing" when this happens, similar to when the user
525
+ * triggers your test provider specifically.
526
+ *
527
+ * @example
528
+ *
529
+ * ```typescript
530
+ * // Subscribe to run-all events
531
+ * const unsubscribe = myTestProviderStore.onRunAll(() => {
532
+ * await runAllMyTests();
533
+ * });
534
+ * ```
535
+ */
536
+ onRunAll: (listener: () => void) => () => void;
537
+ /**
538
+ * Subscribe to clicks on the "Clear All" button, that is supposed to clear all state from test
539
+ * providers. Storybook already clears all statuses, but if your test provider has more
540
+ * non-status-based state, you can use this to clear that here.
541
+ *
542
+ * @remarks
543
+ * The purpose of this is _not_ to clear your test provider's settings, only the test results.
544
+ * @example
545
+ *
546
+ * ```typescript
547
+ * // Subscribe to clear-all events
548
+ * const unsubscribe = myTestProviderStore.onClearAll(() => {
549
+ * clearMyTestResults();
550
+ * });
551
+ *
552
+ * // Later, when no longer needed
553
+ * unsubscribe();
554
+ * ```
555
+ */
556
+ onClearAll: (listener: () => void) => () => void;
557
+ };
558
+ /**
559
+ * Represents a store for a specific test provider, identified by its unique ID. This store provides
560
+ * methods to manage the state of an individual test provider, including getting and setting its
561
+ * state, running operations with automatic state management, and accessing its unique identifier.
562
+ *
563
+ * Each test provider has its own instance of this store, allowing for independent state management
564
+ * across different test providers in the application.
565
+ *
566
+ * @example
567
+ *
568
+ * ```typescript
569
+ * // Get a store for a specific test provider
570
+ * const grammarStore = getTestProviderStoreById('addon-grammar');
571
+ *
572
+ * // Check the current state
573
+ * if (grammarStore.getState() === 'test-provider-state:pending') {
574
+ * console.log('Grammar tests are ready to run');
575
+ * }
576
+ *
577
+ * // Run tests with automatic state management
578
+ * grammarStore.runWithState(async () => {
579
+ * await runGrammarTests();
580
+ * });
581
+ * ```
582
+ *
583
+ * @see {@link TestProviderState} for possible state values
584
+ * @see {@link BaseTestProviderStore} for methods inherited from the base store
585
+ */
586
+ type TestProviderStoreById = BaseTestProviderStore & {
587
+ /**
588
+ * Gets the current state of this specific test provider
589
+ *
590
+ * The state represents the current execution status of the test provider, which can be one of the
591
+ * following:
592
+ *
593
+ * - 'test-provider-state:pending': Tests have not been run yet
594
+ * - 'test-provider-state:running': Tests are currently running
595
+ * - 'test-provider-state:succeeded': Tests completed successfully
596
+ * - 'test-provider-state:crashed': Running tests failed or encountered an error
597
+ *
598
+ * Storybook UI will use this state to determine what to show in the UI.
599
+ *
600
+ * @remarks
601
+ * The 'test-provider-state:crashed' is meant to signify that the test run as a whole failed to
602
+ * execute for some reason. It should _not_ be set just because a number of tests failed, use
603
+ * statuses and the status store for that. See {@link TestStatusStore} for managing individual test
604
+ * statuses.
605
+ * @example
606
+ *
607
+ * ```typescript
608
+ * // Get the current state of a specific test provider
609
+ * const state = testProviderStore.getState();
610
+ *
611
+ * // Conditionally render UI based on the state
612
+ * const TestStatus = () => {
613
+ * const state = testProviderStore.getState();
614
+ *
615
+ * if (state === 'test-provider-state:running') {
616
+ * return <Spinner />;
617
+ * } else if (state === 'test-provider-state:succeeded') {
618
+ * return <SuccessIcon />;
619
+ * } else if (state === 'test-provider-state:crashed') {
620
+ * return <ErrorIcon />;
621
+ * }
622
+ *
623
+ * return <PendingIcon />;
624
+ * };
625
+ * ```
626
+ */
627
+ getState: () => TestProviderState;
628
+ /**
629
+ * Sets the state of this specific test provider
630
+ *
631
+ * This method allows you to manually update the execution state of the test provider. It's
632
+ * typically used when you need to reflect the current status of test execution in the UI or when
633
+ * you want to programmatically control the test provider's state.
634
+ *
635
+ * Common use cases include:
636
+ *
637
+ * - Setting to 'running' when tests start
638
+ * - Setting to 'succeeded' when tests complete successfully
639
+ * - Setting to 'crashed' when tests fail or encounter errors
640
+ * - Setting to 'pending' to reset the state
641
+ *
642
+ * The state represents the current execution status of the test provider, which can be one of the
643
+ * following:
644
+ *
645
+ * - 'test-provider-state:pending': Tests have not been run yet
646
+ * - 'test-provider-state:running': Tests are currently running
647
+ * - 'test-provider-state:succeeded': Tests completed successfully
648
+ * - 'test-provider-state:crashed': Running tests failed or encountered an error
649
+ *
650
+ * Storybook UI will use this state to determine what to show in the UI.
651
+ *
652
+ * @remarks
653
+ * The 'test-provider-state:crashed' is meant to signify that the test run as a whole failed to
654
+ * execute for some reason. It should _not_ be set just because a number of tests failed, use
655
+ * statuses and the status store for that. See {@link TestStatusStore} for managing individual test
656
+ * statuses.
657
+ *
658
+ * For most use cases, consider using {@link runWithState} instead, which provides automatic state
659
+ * management and error handling during test execution.
660
+ * @example
661
+ *
662
+ * ```typescript
663
+ * // Update the state when tests start running
664
+ * const startTests = async () => {
665
+ * testProviderStore.setState('test-provider-state:running');
666
+ * ... run tests ...
667
+ * };
668
+ * ```
669
+ */
670
+ setState: (state: TestProviderState) => void;
671
+ /**
672
+ * Runs a callback and automatically updates the test provider's state with running, succeeded or
673
+ * crashed, depending on the end result.
674
+ *
675
+ * - Immediately changes the state to 'running'
676
+ * - If the callback returns/resolves, change the state to 'succeeded'.
677
+ * - If the callback throws an error/rejects, change the state to 'crashed'.
678
+ *
679
+ * This approach helps prevent state inconsistencies that might occur if exceptions are thrown
680
+ * during test execution.
681
+ *
682
+ * @example
683
+ *
684
+ * ```typescript
685
+ * // Run tests with automatic state management
686
+ * const runTests = () => {
687
+ * testProviderStore.runWithState(async () => {
688
+ * // The state is automatically set to 'running' before this callback
689
+ *
690
+ * // Run tests here...
691
+ * const results = await executeTests();
692
+ * });
693
+ * };
694
+ * ```
695
+ */
696
+ runWithState: (callback: () => void | Promise<void>) => Promise<void>;
697
+ /** The unique identifier for this test provider */
698
+ testProviderId: TestProviderId;
699
+ };
700
+
701
+ declare const fullStatusStore: StatusStore & {
702
+ selectStatuses: (statuses: Status[]) => void;
703
+ typeId: undefined;
704
+ };
705
+ declare const getStatusStoreByTypeId: (typeId: StatusTypeId) => StatusStoreByTypeId;
706
+
707
+ declare const fullTestProviderStore: {
708
+ settingsChanged: () => void;
709
+ onRunAll: (listener: () => void) => () => void;
710
+ onClearAll: (listener: () => void) => () => void;
711
+ } & {
712
+ getFullState: UniversalStore<TestProviderStateByProviderId, TestProviderStoreEvent>["getState"];
713
+ setFullState: UniversalStore<TestProviderStateByProviderId, TestProviderStoreEvent>["setState"];
714
+ onSettingsChanged: (listener: (testProviderId: TestProviderId) => void) => () => void;
715
+ runAll: () => void;
716
+ clearAll: () => void;
717
+ };
718
+ declare const getTestProviderStoreById: (testProviderId: TestProviderId) => TestProviderStoreById;
719
+
720
+ export { type BuildIndexOptions, type BuildStaticStandaloneOptions, StoryIndexGenerator, build, buildDevStandalone, buildIndex, buildIndexStandalone, buildStaticStandalone, MockUniversalStore as experimental_MockUniversalStore, UniversalStore as experimental_UniversalStore, getStatusStoreByTypeId as experimental_getStatusStore, getTestProviderStoreById as experimental_getTestProviderStore, loadStorybook as experimental_loadStorybook, getErrorLevel, fullStatusStore as internal_fullStatusStore, fullTestProviderStore as internal_fullTestProviderStore, mapStaticDir, sendTelemetryError, withTelemetry };