UNPKG

9.03 kBTypeScriptView Raw
1import * as core_dist_types from 'storybook/internal/types';
2
3type Styles = ViewportStyles | ((s: ViewportStyles | undefined) => ViewportStyles) | null;
4interface Viewport {
5 name: string;
6 styles: Styles;
7 type: 'desktop' | 'mobile' | 'tablet' | 'other';
8}
9interface ModernViewport {
10 name: string;
11 styles: ViewportStyles;
12 type: 'desktop' | 'mobile' | 'tablet' | 'other';
13}
14interface ViewportStyles {
15 height: string;
16 width: string;
17}
18type ViewportMap = Record<string, Viewport>;
19interface Config {
20 options: Record<string, ModernViewport>;
21 disable: boolean;
22}
23type GlobalState = {
24 /**
25 * When set, the viewport is applied and cannot be changed using the toolbar. Must match the key
26 * of one of the available viewports.
27 */
28 value: string | undefined;
29 /**
30 * When true the viewport applied will be rotated 90°, e.g. it will rotate from portrait to
31 * landscape orientation.
32 */
33 isRotated: boolean;
34};
35type GlobalStateUpdate = Partial<GlobalState>;
36interface ViewportParameters {
37 /**
38 * Viewport configuration
39 *
40 * @see https://storybook.js.org/docs/essentials/viewport#parameters
41 */
42 viewport: {
43 /**
44 * Specifies the default orientation used when viewing a story. Only available if you haven't
45 * enabled the globals API.
46 */
47 defaultOrientation?: 'landscape' | 'portrait';
48 /**
49 * Specifies the default viewport used when viewing a story. Must match a key in the viewports
50 * (or options) object.
51 */
52 defaultViewport?: string;
53 /**
54 * Remove the addon panel and disable the addon's behavior . If you wish to turn off this addon
55 * for the entire Storybook, you should do so when registering addon-essentials
56 *
57 * @see https://storybook.js.org/docs/essentials/index#disabling-addons
58 */
59 disabled?: boolean;
60 /**
61 * Specify the available viewports. The width and height values must include the unit, e.g.
62 * '320px'.
63 */
64 viewports?: Viewport;
65 };
66}
67interface ViewportGlobals {
68 /**
69 * Viewport configuration
70 *
71 * @see https://storybook.js.org/docs/essentials/viewport#globals
72 */
73 viewport: {
74 [key: string]: GlobalState;
75 };
76}
77
78declare const INITIAL_VIEWPORTS_DATA: {
79 readonly iphone5: {
80 readonly name: "iPhone 5";
81 readonly styles: {
82 readonly height: "568px";
83 readonly width: "320px";
84 };
85 readonly type: "mobile";
86 };
87 readonly iphone6: {
88 readonly name: "iPhone 6";
89 readonly styles: {
90 readonly height: "667px";
91 readonly width: "375px";
92 };
93 readonly type: "mobile";
94 };
95 readonly iphone6p: {
96 readonly name: "iPhone 6 Plus";
97 readonly styles: {
98 readonly height: "736px";
99 readonly width: "414px";
100 };
101 readonly type: "mobile";
102 };
103 readonly iphone8p: {
104 readonly name: "iPhone 8 Plus";
105 readonly styles: {
106 readonly height: "736px";
107 readonly width: "414px";
108 };
109 readonly type: "mobile";
110 };
111 readonly iphonex: {
112 readonly name: "iPhone X";
113 readonly styles: {
114 readonly height: "812px";
115 readonly width: "375px";
116 };
117 readonly type: "mobile";
118 };
119 readonly iphonexr: {
120 readonly name: "iPhone XR";
121 readonly styles: {
122 readonly height: "896px";
123 readonly width: "414px";
124 };
125 readonly type: "mobile";
126 };
127 readonly iphonexsmax: {
128 readonly name: "iPhone XS Max";
129 readonly styles: {
130 readonly height: "896px";
131 readonly width: "414px";
132 };
133 readonly type: "mobile";
134 };
135 readonly iphonese2: {
136 readonly name: "iPhone SE (2nd generation)";
137 readonly styles: {
138 readonly height: "667px";
139 readonly width: "375px";
140 };
141 readonly type: "mobile";
142 };
143 readonly iphone12mini: {
144 readonly name: "iPhone 12 mini";
145 readonly styles: {
146 readonly height: "812px";
147 readonly width: "375px";
148 };
149 readonly type: "mobile";
150 };
151 readonly iphone12: {
152 readonly name: "iPhone 12";
153 readonly styles: {
154 readonly height: "844px";
155 readonly width: "390px";
156 };
157 readonly type: "mobile";
158 };
159 readonly iphone12promax: {
160 readonly name: "iPhone 12 Pro Max";
161 readonly styles: {
162 readonly height: "926px";
163 readonly width: "428px";
164 };
165 readonly type: "mobile";
166 };
167 readonly iphoneSE3: {
168 readonly name: "iPhone SE 3rd generation";
169 readonly styles: {
170 readonly height: "667px";
171 readonly width: "375px";
172 };
173 readonly type: "mobile";
174 };
175 readonly iphone13: {
176 readonly name: "iPhone 13";
177 readonly styles: {
178 readonly height: "844px";
179 readonly width: "390px";
180 };
181 readonly type: "mobile";
182 };
183 readonly iphone13pro: {
184 readonly name: "iPhone 13 Pro";
185 readonly styles: {
186 readonly height: "844px";
187 readonly width: "390px";
188 };
189 readonly type: "mobile";
190 };
191 readonly iphone13promax: {
192 readonly name: "iPhone 13 Pro Max";
193 readonly styles: {
194 readonly height: "926px";
195 readonly width: "428px";
196 };
197 readonly type: "mobile";
198 };
199 readonly iphone14: {
200 readonly name: "iPhone 14";
201 readonly styles: {
202 readonly height: "844px";
203 readonly width: "390px";
204 };
205 readonly type: "mobile";
206 };
207 readonly iphone14pro: {
208 readonly name: "iPhone 14 Pro";
209 readonly styles: {
210 readonly height: "852px";
211 readonly width: "393px";
212 };
213 readonly type: "mobile";
214 };
215 readonly iphone14promax: {
216 readonly name: "iPhone 14 Pro Max";
217 readonly styles: {
218 readonly height: "932px";
219 readonly width: "430px";
220 };
221 readonly type: "mobile";
222 };
223 readonly ipad: {
224 readonly name: "iPad";
225 readonly styles: {
226 readonly height: "1024px";
227 readonly width: "768px";
228 };
229 readonly type: "tablet";
230 };
231 readonly ipad10p: {
232 readonly name: "iPad Pro 10.5-in";
233 readonly styles: {
234 readonly height: "1112px";
235 readonly width: "834px";
236 };
237 readonly type: "tablet";
238 };
239 readonly ipad11p: {
240 readonly name: "iPad Pro 11-in";
241 readonly styles: {
242 readonly height: "1194px";
243 readonly width: "834px";
244 };
245 readonly type: "tablet";
246 };
247 readonly ipad12p: {
248 readonly name: "iPad Pro 12.9-in";
249 readonly styles: {
250 readonly height: "1366px";
251 readonly width: "1024px";
252 };
253 readonly type: "tablet";
254 };
255 readonly galaxys5: {
256 readonly name: "Galaxy S5";
257 readonly styles: {
258 readonly height: "640px";
259 readonly width: "360px";
260 };
261 readonly type: "mobile";
262 };
263 readonly galaxys9: {
264 readonly name: "Galaxy S9";
265 readonly styles: {
266 readonly height: "740px";
267 readonly width: "360px";
268 };
269 readonly type: "mobile";
270 };
271 readonly nexus5x: {
272 readonly name: "Nexus 5X";
273 readonly styles: {
274 readonly height: "660px";
275 readonly width: "412px";
276 };
277 readonly type: "mobile";
278 };
279 readonly nexus6p: {
280 readonly name: "Nexus 6P";
281 readonly styles: {
282 readonly height: "732px";
283 readonly width: "412px";
284 };
285 readonly type: "mobile";
286 };
287 readonly pixel: {
288 readonly name: "Pixel";
289 readonly styles: {
290 readonly height: "960px";
291 readonly width: "540px";
292 };
293 readonly type: "mobile";
294 };
295 readonly pixelxl: {
296 readonly name: "Pixel XL";
297 readonly styles: {
298 readonly height: "1280px";
299 readonly width: "720px";
300 };
301 readonly type: "mobile";
302 };
303};
304type InitialViewportKeys = keyof typeof INITIAL_VIEWPORTS_DATA;
305declare const INITIAL_VIEWPORTS: ViewportMap;
306declare const DEFAULT_VIEWPORT = "responsive";
307declare const MINIMAL_VIEWPORTS: ViewportMap;
308
309declare const _default: () => core_dist_types.ProjectAnnotations<core_dist_types.Renderer>;
310
311export { Config, DEFAULT_VIEWPORT, GlobalState, GlobalStateUpdate, INITIAL_VIEWPORTS, InitialViewportKeys, MINIMAL_VIEWPORTS, ModernViewport, Styles, Viewport, ViewportGlobals, ViewportMap, ViewportParameters, ViewportStyles, _default as default };