@storybook/react-native 7.0.0-alpha.3 → 7.0.0-alpha.5
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.
- package/dist/index.js +758 -97
- package/package.json +6 -5
package/dist/index.js
CHANGED
|
@@ -72,9 +72,9 @@ __export(src_exports, {
|
|
|
72
72
|
module.exports = __toCommonJS(src_exports);
|
|
73
73
|
|
|
74
74
|
// src/preview/start.tsx
|
|
75
|
-
var import_channels2 =
|
|
75
|
+
var import_channels2 = require("@storybook/channels");
|
|
76
76
|
var import_core_events3 = __toESM(require("@storybook/core-events"));
|
|
77
|
-
var
|
|
77
|
+
var import_global2 = require("@storybook/global");
|
|
78
78
|
var import_manager_api4 = require("@storybook/manager-api");
|
|
79
79
|
var import_preview_api = require("@storybook/preview-api");
|
|
80
80
|
var import_preview_web = require("@storybook/preview-web");
|
|
@@ -84,32 +84,691 @@ var import_async_storage = __toESM(require("@react-native-async-storage/async-st
|
|
|
84
84
|
var import_csf = require("@storybook/csf");
|
|
85
85
|
var import_manager_api3 = require("@storybook/manager-api");
|
|
86
86
|
var import_react_native_theming12 = require("@storybook/react-native-theming");
|
|
87
|
-
var
|
|
87
|
+
var import_react15 = require("react");
|
|
88
88
|
var import_react_native_safe_area_context3 = require("react-native-safe-area-context");
|
|
89
89
|
|
|
90
90
|
// src/hooks.tsx
|
|
91
|
-
var
|
|
92
|
-
|
|
93
|
-
|
|
91
|
+
var import_react2 = __toESM(require("react"));
|
|
92
|
+
|
|
93
|
+
// ../../node_modules/jotai/esm/vanilla.mjs
|
|
94
|
+
var import_meta = {};
|
|
95
|
+
var keyCount = 0;
|
|
96
|
+
function atom(read, write) {
|
|
97
|
+
const key = `atom${++keyCount}`;
|
|
98
|
+
const config = {
|
|
99
|
+
toString: () => key
|
|
100
|
+
};
|
|
101
|
+
if (typeof read === "function") {
|
|
102
|
+
config.read = read;
|
|
103
|
+
} else {
|
|
104
|
+
config.init = read;
|
|
105
|
+
config.read = (get) => get(config);
|
|
106
|
+
config.write = (get, set, arg) => set(
|
|
107
|
+
config,
|
|
108
|
+
typeof arg === "function" ? arg(get(config)) : arg
|
|
109
|
+
);
|
|
110
|
+
}
|
|
111
|
+
if (write) {
|
|
112
|
+
config.write = write;
|
|
113
|
+
}
|
|
114
|
+
return config;
|
|
115
|
+
}
|
|
116
|
+
var hasInitialValue = (atom2) => "init" in atom2;
|
|
117
|
+
var isActuallyWritableAtom = (atom2) => !!atom2.write;
|
|
118
|
+
var cancelPromiseMap = /* @__PURE__ */ new WeakMap();
|
|
119
|
+
var registerCancelPromise = (promise, cancel) => {
|
|
120
|
+
cancelPromiseMap.set(promise, cancel);
|
|
121
|
+
promise.catch(() => {
|
|
122
|
+
}).finally(() => cancelPromiseMap.delete(promise));
|
|
123
|
+
};
|
|
124
|
+
var cancelPromise = (promise, next) => {
|
|
125
|
+
const cancel = cancelPromiseMap.get(promise);
|
|
126
|
+
if (cancel) {
|
|
127
|
+
cancelPromiseMap.delete(promise);
|
|
128
|
+
cancel(next);
|
|
129
|
+
}
|
|
130
|
+
};
|
|
131
|
+
var resolvePromise = (promise, value) => {
|
|
132
|
+
promise.status = "fulfilled";
|
|
133
|
+
promise.value = value;
|
|
134
|
+
};
|
|
135
|
+
var rejectPromise = (promise, e) => {
|
|
136
|
+
promise.status = "rejected";
|
|
137
|
+
promise.reason = e;
|
|
138
|
+
};
|
|
139
|
+
var isPromiseLike = (x) => typeof (x == null ? void 0 : x.then) === "function";
|
|
140
|
+
var isEqualAtomValue = (a, b) => "v" in a && "v" in b && Object.is(a.v, b.v);
|
|
141
|
+
var isEqualAtomError = (a, b) => "e" in a && "e" in b && Object.is(a.e, b.e);
|
|
142
|
+
var hasPromiseAtomValue = (a) => "v" in a && a.v instanceof Promise;
|
|
143
|
+
var isEqualPromiseAtomValue = (a, b) => "v" in a && "v" in b && a.v.orig && a.v.orig === b.v.orig;
|
|
144
|
+
var returnAtomValue = (atomState) => {
|
|
145
|
+
if ("e" in atomState) {
|
|
146
|
+
throw atomState.e;
|
|
147
|
+
}
|
|
148
|
+
return atomState.v;
|
|
149
|
+
};
|
|
150
|
+
var createStore = () => {
|
|
151
|
+
const atomStateMap = /* @__PURE__ */ new WeakMap();
|
|
152
|
+
const mountedMap = /* @__PURE__ */ new WeakMap();
|
|
153
|
+
const pendingMap = /* @__PURE__ */ new Map();
|
|
154
|
+
let storeListenersRev1;
|
|
155
|
+
let storeListenersRev2;
|
|
156
|
+
let mountedAtoms;
|
|
157
|
+
if ((import_meta.env ? import_meta.env.MODE : void 0) !== "production") {
|
|
158
|
+
storeListenersRev1 = /* @__PURE__ */ new Set();
|
|
159
|
+
storeListenersRev2 = /* @__PURE__ */ new Set();
|
|
160
|
+
mountedAtoms = /* @__PURE__ */ new Set();
|
|
161
|
+
}
|
|
162
|
+
const getAtomState = (atom2) => atomStateMap.get(atom2);
|
|
163
|
+
const setAtomState = (atom2, atomState) => {
|
|
164
|
+
if ((import_meta.env ? import_meta.env.MODE : void 0) !== "production") {
|
|
165
|
+
Object.freeze(atomState);
|
|
166
|
+
}
|
|
167
|
+
const prevAtomState = atomStateMap.get(atom2);
|
|
168
|
+
atomStateMap.set(atom2, atomState);
|
|
169
|
+
if (!pendingMap.has(atom2)) {
|
|
170
|
+
pendingMap.set(atom2, prevAtomState);
|
|
171
|
+
}
|
|
172
|
+
if (prevAtomState && hasPromiseAtomValue(prevAtomState)) {
|
|
173
|
+
const next = "v" in atomState ? atomState.v instanceof Promise ? atomState.v : Promise.resolve(atomState.v) : Promise.reject(atomState.e);
|
|
174
|
+
cancelPromise(prevAtomState.v, next);
|
|
175
|
+
}
|
|
176
|
+
};
|
|
177
|
+
const updateDependencies = (atom2, nextAtomState, nextDependencies) => {
|
|
178
|
+
const dependencies = /* @__PURE__ */ new Map();
|
|
179
|
+
let changed = false;
|
|
180
|
+
nextDependencies.forEach((aState, a) => {
|
|
181
|
+
if (!aState && a === atom2) {
|
|
182
|
+
aState = nextAtomState;
|
|
183
|
+
}
|
|
184
|
+
if (aState) {
|
|
185
|
+
dependencies.set(a, aState);
|
|
186
|
+
if (nextAtomState.d.get(a) !== aState) {
|
|
187
|
+
changed = true;
|
|
188
|
+
}
|
|
189
|
+
} else if ((import_meta.env ? import_meta.env.MODE : void 0) !== "production") {
|
|
190
|
+
console.warn("[Bug] atom state not found");
|
|
191
|
+
}
|
|
192
|
+
});
|
|
193
|
+
if (changed || nextAtomState.d.size !== dependencies.size) {
|
|
194
|
+
nextAtomState.d = dependencies;
|
|
195
|
+
}
|
|
196
|
+
};
|
|
197
|
+
const setAtomValue = (atom2, value, nextDependencies) => {
|
|
198
|
+
const prevAtomState = getAtomState(atom2);
|
|
199
|
+
const nextAtomState = {
|
|
200
|
+
d: (prevAtomState == null ? void 0 : prevAtomState.d) || /* @__PURE__ */ new Map(),
|
|
201
|
+
v: value
|
|
202
|
+
};
|
|
203
|
+
if (nextDependencies) {
|
|
204
|
+
updateDependencies(atom2, nextAtomState, nextDependencies);
|
|
205
|
+
}
|
|
206
|
+
if (prevAtomState && isEqualAtomValue(prevAtomState, nextAtomState) && prevAtomState.d === nextAtomState.d) {
|
|
207
|
+
return prevAtomState;
|
|
208
|
+
}
|
|
209
|
+
if (prevAtomState && hasPromiseAtomValue(prevAtomState) && hasPromiseAtomValue(nextAtomState) && isEqualPromiseAtomValue(prevAtomState, nextAtomState)) {
|
|
210
|
+
if (prevAtomState.d === nextAtomState.d) {
|
|
211
|
+
return prevAtomState;
|
|
212
|
+
} else {
|
|
213
|
+
nextAtomState.v = prevAtomState.v;
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
setAtomState(atom2, nextAtomState);
|
|
217
|
+
return nextAtomState;
|
|
218
|
+
};
|
|
219
|
+
const setAtomValueOrPromise = (atom2, valueOrPromise, nextDependencies, abortPromise) => {
|
|
220
|
+
if (isPromiseLike(valueOrPromise)) {
|
|
221
|
+
let continuePromise;
|
|
222
|
+
const promise = new Promise((resolve, reject) => {
|
|
223
|
+
let settled = false;
|
|
224
|
+
valueOrPromise.then(
|
|
225
|
+
(v) => {
|
|
226
|
+
if (!settled) {
|
|
227
|
+
settled = true;
|
|
228
|
+
const prevAtomState = getAtomState(atom2);
|
|
229
|
+
const nextAtomState = setAtomValue(
|
|
230
|
+
atom2,
|
|
231
|
+
promise,
|
|
232
|
+
nextDependencies
|
|
233
|
+
);
|
|
234
|
+
resolvePromise(promise, v);
|
|
235
|
+
resolve(v);
|
|
236
|
+
if ((prevAtomState == null ? void 0 : prevAtomState.d) !== nextAtomState.d) {
|
|
237
|
+
mountDependencies(atom2, nextAtomState, prevAtomState == null ? void 0 : prevAtomState.d);
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
},
|
|
241
|
+
(e) => {
|
|
242
|
+
if (!settled) {
|
|
243
|
+
settled = true;
|
|
244
|
+
const prevAtomState = getAtomState(atom2);
|
|
245
|
+
const nextAtomState = setAtomValue(
|
|
246
|
+
atom2,
|
|
247
|
+
promise,
|
|
248
|
+
nextDependencies
|
|
249
|
+
);
|
|
250
|
+
rejectPromise(promise, e);
|
|
251
|
+
reject(e);
|
|
252
|
+
if ((prevAtomState == null ? void 0 : prevAtomState.d) !== nextAtomState.d) {
|
|
253
|
+
mountDependencies(atom2, nextAtomState, prevAtomState == null ? void 0 : prevAtomState.d);
|
|
254
|
+
}
|
|
255
|
+
}
|
|
256
|
+
}
|
|
257
|
+
);
|
|
258
|
+
continuePromise = (next) => {
|
|
259
|
+
if (!settled) {
|
|
260
|
+
settled = true;
|
|
261
|
+
next.then(
|
|
262
|
+
(v) => resolvePromise(promise, v),
|
|
263
|
+
(e) => rejectPromise(promise, e)
|
|
264
|
+
);
|
|
265
|
+
resolve(next);
|
|
266
|
+
}
|
|
267
|
+
};
|
|
268
|
+
});
|
|
269
|
+
promise.orig = valueOrPromise;
|
|
270
|
+
promise.status = "pending";
|
|
271
|
+
registerCancelPromise(promise, (next) => {
|
|
272
|
+
if (next) {
|
|
273
|
+
continuePromise(next);
|
|
274
|
+
}
|
|
275
|
+
abortPromise == null ? void 0 : abortPromise();
|
|
276
|
+
});
|
|
277
|
+
return setAtomValue(atom2, promise, nextDependencies);
|
|
278
|
+
}
|
|
279
|
+
return setAtomValue(atom2, valueOrPromise, nextDependencies);
|
|
280
|
+
};
|
|
281
|
+
const setAtomError = (atom2, error, nextDependencies) => {
|
|
282
|
+
const prevAtomState = getAtomState(atom2);
|
|
283
|
+
const nextAtomState = {
|
|
284
|
+
d: (prevAtomState == null ? void 0 : prevAtomState.d) || /* @__PURE__ */ new Map(),
|
|
285
|
+
e: error
|
|
286
|
+
};
|
|
287
|
+
if (nextDependencies) {
|
|
288
|
+
updateDependencies(atom2, nextAtomState, nextDependencies);
|
|
289
|
+
}
|
|
290
|
+
if (prevAtomState && isEqualAtomError(prevAtomState, nextAtomState) && prevAtomState.d === nextAtomState.d) {
|
|
291
|
+
return prevAtomState;
|
|
292
|
+
}
|
|
293
|
+
setAtomState(atom2, nextAtomState);
|
|
294
|
+
return nextAtomState;
|
|
295
|
+
};
|
|
296
|
+
const readAtomState = (atom2) => {
|
|
297
|
+
const atomState = getAtomState(atom2);
|
|
298
|
+
if (atomState) {
|
|
299
|
+
atomState.d.forEach((_, a) => {
|
|
300
|
+
if (a !== atom2 && !mountedMap.has(a)) {
|
|
301
|
+
readAtomState(a);
|
|
302
|
+
}
|
|
303
|
+
});
|
|
304
|
+
if (Array.from(atomState.d).every(([a, s]) => {
|
|
305
|
+
const aState = getAtomState(a);
|
|
306
|
+
return a === atom2 || aState === s || // TODO This is a hack, we should find a better solution.
|
|
307
|
+
aState && !hasPromiseAtomValue(aState) && isEqualAtomValue(aState, s);
|
|
308
|
+
})) {
|
|
309
|
+
return atomState;
|
|
310
|
+
}
|
|
311
|
+
}
|
|
312
|
+
const nextDependencies = /* @__PURE__ */ new Map();
|
|
313
|
+
let isSync = true;
|
|
314
|
+
const getter = (a) => {
|
|
315
|
+
if (a === atom2) {
|
|
316
|
+
const aState2 = getAtomState(a);
|
|
317
|
+
if (aState2) {
|
|
318
|
+
nextDependencies.set(a, aState2);
|
|
319
|
+
return returnAtomValue(aState2);
|
|
320
|
+
}
|
|
321
|
+
if (hasInitialValue(a)) {
|
|
322
|
+
nextDependencies.set(a, void 0);
|
|
323
|
+
return a.init;
|
|
324
|
+
}
|
|
325
|
+
throw new Error("no atom init");
|
|
326
|
+
}
|
|
327
|
+
const aState = readAtomState(a);
|
|
328
|
+
nextDependencies.set(a, aState);
|
|
329
|
+
return returnAtomValue(aState);
|
|
330
|
+
};
|
|
331
|
+
let controller;
|
|
332
|
+
let setSelf;
|
|
333
|
+
const options = {
|
|
334
|
+
get signal() {
|
|
335
|
+
if (!controller) {
|
|
336
|
+
controller = new AbortController();
|
|
337
|
+
}
|
|
338
|
+
return controller.signal;
|
|
339
|
+
},
|
|
340
|
+
get setSelf() {
|
|
341
|
+
if ((import_meta.env ? import_meta.env.MODE : void 0) !== "production" && !isActuallyWritableAtom(atom2)) {
|
|
342
|
+
console.warn("setSelf function cannot be used with read-only atom");
|
|
343
|
+
}
|
|
344
|
+
if (!setSelf && isActuallyWritableAtom(atom2)) {
|
|
345
|
+
setSelf = (...args) => {
|
|
346
|
+
if ((import_meta.env ? import_meta.env.MODE : void 0) !== "production" && isSync) {
|
|
347
|
+
console.warn("setSelf function cannot be called in sync");
|
|
348
|
+
}
|
|
349
|
+
if (!isSync) {
|
|
350
|
+
return writeAtom(atom2, ...args);
|
|
351
|
+
}
|
|
352
|
+
};
|
|
353
|
+
}
|
|
354
|
+
return setSelf;
|
|
355
|
+
}
|
|
356
|
+
};
|
|
357
|
+
try {
|
|
358
|
+
const valueOrPromise = atom2.read(getter, options);
|
|
359
|
+
return setAtomValueOrPromise(
|
|
360
|
+
atom2,
|
|
361
|
+
valueOrPromise,
|
|
362
|
+
nextDependencies,
|
|
363
|
+
() => controller == null ? void 0 : controller.abort()
|
|
364
|
+
);
|
|
365
|
+
} catch (error) {
|
|
366
|
+
return setAtomError(atom2, error, nextDependencies);
|
|
367
|
+
} finally {
|
|
368
|
+
isSync = false;
|
|
369
|
+
}
|
|
370
|
+
};
|
|
371
|
+
const readAtom = (atom2) => returnAtomValue(readAtomState(atom2));
|
|
372
|
+
const addAtom = (atom2) => {
|
|
373
|
+
let mounted = mountedMap.get(atom2);
|
|
374
|
+
if (!mounted) {
|
|
375
|
+
mounted = mountAtom(atom2);
|
|
376
|
+
}
|
|
377
|
+
return mounted;
|
|
378
|
+
};
|
|
379
|
+
const canUnmountAtom = (atom2, mounted) => !mounted.l.size && (!mounted.t.size || mounted.t.size === 1 && mounted.t.has(atom2));
|
|
380
|
+
const delAtom = (atom2) => {
|
|
381
|
+
const mounted = mountedMap.get(atom2);
|
|
382
|
+
if (mounted && canUnmountAtom(atom2, mounted)) {
|
|
383
|
+
unmountAtom(atom2);
|
|
384
|
+
}
|
|
385
|
+
};
|
|
386
|
+
const recomputeDependents = (atom2) => {
|
|
387
|
+
const dependencyMap = /* @__PURE__ */ new Map();
|
|
388
|
+
const dirtyMap = /* @__PURE__ */ new WeakMap();
|
|
389
|
+
const loop1 = (a) => {
|
|
390
|
+
const mounted = mountedMap.get(a);
|
|
391
|
+
mounted == null ? void 0 : mounted.t.forEach((dependent) => {
|
|
392
|
+
if (dependent !== a) {
|
|
393
|
+
dependencyMap.set(
|
|
394
|
+
dependent,
|
|
395
|
+
(dependencyMap.get(dependent) || /* @__PURE__ */ new Set()).add(a)
|
|
396
|
+
);
|
|
397
|
+
dirtyMap.set(dependent, (dirtyMap.get(dependent) || 0) + 1);
|
|
398
|
+
loop1(dependent);
|
|
399
|
+
}
|
|
400
|
+
});
|
|
401
|
+
};
|
|
402
|
+
loop1(atom2);
|
|
403
|
+
const loop2 = (a) => {
|
|
404
|
+
const mounted = mountedMap.get(a);
|
|
405
|
+
mounted == null ? void 0 : mounted.t.forEach((dependent) => {
|
|
406
|
+
var _a;
|
|
407
|
+
if (dependent !== a) {
|
|
408
|
+
let dirtyCount = dirtyMap.get(dependent);
|
|
409
|
+
if (dirtyCount) {
|
|
410
|
+
dirtyMap.set(dependent, --dirtyCount);
|
|
411
|
+
}
|
|
412
|
+
if (!dirtyCount) {
|
|
413
|
+
let isChanged = !!((_a = dependencyMap.get(dependent)) == null ? void 0 : _a.size);
|
|
414
|
+
if (isChanged) {
|
|
415
|
+
const prevAtomState = getAtomState(dependent);
|
|
416
|
+
const nextAtomState = readAtomState(dependent);
|
|
417
|
+
isChanged = !prevAtomState || !isEqualAtomValue(prevAtomState, nextAtomState);
|
|
418
|
+
}
|
|
419
|
+
if (!isChanged) {
|
|
420
|
+
dependencyMap.forEach((s) => s.delete(dependent));
|
|
421
|
+
}
|
|
422
|
+
}
|
|
423
|
+
loop2(dependent);
|
|
424
|
+
}
|
|
425
|
+
});
|
|
426
|
+
};
|
|
427
|
+
loop2(atom2);
|
|
428
|
+
};
|
|
429
|
+
const writeAtomState = (atom2, ...args) => {
|
|
430
|
+
let isSync = true;
|
|
431
|
+
const getter = (a) => returnAtomValue(readAtomState(a));
|
|
432
|
+
const setter = (a, ...args2) => {
|
|
433
|
+
let r;
|
|
434
|
+
if (a === atom2) {
|
|
435
|
+
if (!hasInitialValue(a)) {
|
|
436
|
+
throw new Error("atom not writable");
|
|
437
|
+
}
|
|
438
|
+
const prevAtomState = getAtomState(a);
|
|
439
|
+
const nextAtomState = setAtomValueOrPromise(a, args2[0]);
|
|
440
|
+
if (!prevAtomState || !isEqualAtomValue(prevAtomState, nextAtomState)) {
|
|
441
|
+
recomputeDependents(a);
|
|
442
|
+
}
|
|
443
|
+
} else {
|
|
444
|
+
r = writeAtomState(a, ...args2);
|
|
445
|
+
}
|
|
446
|
+
if (!isSync) {
|
|
447
|
+
const flushed = flushPending();
|
|
448
|
+
if ((import_meta.env ? import_meta.env.MODE : void 0) !== "production") {
|
|
449
|
+
storeListenersRev2.forEach(
|
|
450
|
+
(l) => l({ type: "async-write", flushed })
|
|
451
|
+
);
|
|
452
|
+
}
|
|
453
|
+
}
|
|
454
|
+
return r;
|
|
455
|
+
};
|
|
456
|
+
const result = atom2.write(getter, setter, ...args);
|
|
457
|
+
isSync = false;
|
|
458
|
+
return result;
|
|
459
|
+
};
|
|
460
|
+
const writeAtom = (atom2, ...args) => {
|
|
461
|
+
const result = writeAtomState(atom2, ...args);
|
|
462
|
+
const flushed = flushPending();
|
|
463
|
+
if ((import_meta.env ? import_meta.env.MODE : void 0) !== "production") {
|
|
464
|
+
storeListenersRev2.forEach(
|
|
465
|
+
(l) => l({ type: "write", flushed })
|
|
466
|
+
);
|
|
467
|
+
}
|
|
468
|
+
return result;
|
|
469
|
+
};
|
|
470
|
+
const mountAtom = (atom2, initialDependent) => {
|
|
471
|
+
const mounted = {
|
|
472
|
+
t: new Set(initialDependent && [initialDependent]),
|
|
473
|
+
l: /* @__PURE__ */ new Set()
|
|
474
|
+
};
|
|
475
|
+
mountedMap.set(atom2, mounted);
|
|
476
|
+
if ((import_meta.env ? import_meta.env.MODE : void 0) !== "production") {
|
|
477
|
+
mountedAtoms.add(atom2);
|
|
478
|
+
}
|
|
479
|
+
readAtomState(atom2).d.forEach((_, a) => {
|
|
480
|
+
const aMounted = mountedMap.get(a);
|
|
481
|
+
if (aMounted) {
|
|
482
|
+
aMounted.t.add(atom2);
|
|
483
|
+
} else {
|
|
484
|
+
if (a !== atom2) {
|
|
485
|
+
mountAtom(a, atom2);
|
|
486
|
+
}
|
|
487
|
+
}
|
|
488
|
+
});
|
|
489
|
+
readAtomState(atom2);
|
|
490
|
+
if (isActuallyWritableAtom(atom2) && atom2.onMount) {
|
|
491
|
+
const onUnmount = atom2.onMount((...args) => writeAtom(atom2, ...args));
|
|
492
|
+
if (onUnmount) {
|
|
493
|
+
mounted.u = onUnmount;
|
|
494
|
+
}
|
|
495
|
+
}
|
|
496
|
+
return mounted;
|
|
497
|
+
};
|
|
498
|
+
const unmountAtom = (atom2) => {
|
|
499
|
+
var _a;
|
|
500
|
+
const onUnmount = (_a = mountedMap.get(atom2)) == null ? void 0 : _a.u;
|
|
501
|
+
if (onUnmount) {
|
|
502
|
+
onUnmount();
|
|
503
|
+
}
|
|
504
|
+
mountedMap.delete(atom2);
|
|
505
|
+
if ((import_meta.env ? import_meta.env.MODE : void 0) !== "production") {
|
|
506
|
+
mountedAtoms.delete(atom2);
|
|
507
|
+
}
|
|
508
|
+
const atomState = getAtomState(atom2);
|
|
509
|
+
if (atomState) {
|
|
510
|
+
if (hasPromiseAtomValue(atomState)) {
|
|
511
|
+
cancelPromise(atomState.v);
|
|
512
|
+
}
|
|
513
|
+
atomState.d.forEach((_, a) => {
|
|
514
|
+
if (a !== atom2) {
|
|
515
|
+
const mounted = mountedMap.get(a);
|
|
516
|
+
if (mounted) {
|
|
517
|
+
mounted.t.delete(atom2);
|
|
518
|
+
if (canUnmountAtom(a, mounted)) {
|
|
519
|
+
unmountAtom(a);
|
|
520
|
+
}
|
|
521
|
+
}
|
|
522
|
+
}
|
|
523
|
+
});
|
|
524
|
+
} else if ((import_meta.env ? import_meta.env.MODE : void 0) !== "production") {
|
|
525
|
+
console.warn("[Bug] could not find atom state to unmount", atom2);
|
|
526
|
+
}
|
|
527
|
+
};
|
|
528
|
+
const mountDependencies = (atom2, atomState, prevDependencies) => {
|
|
529
|
+
const depSet = new Set(atomState.d.keys());
|
|
530
|
+
prevDependencies == null ? void 0 : prevDependencies.forEach((_, a) => {
|
|
531
|
+
if (depSet.has(a)) {
|
|
532
|
+
depSet.delete(a);
|
|
533
|
+
return;
|
|
534
|
+
}
|
|
535
|
+
const mounted = mountedMap.get(a);
|
|
536
|
+
if (mounted) {
|
|
537
|
+
mounted.t.delete(atom2);
|
|
538
|
+
if (canUnmountAtom(a, mounted)) {
|
|
539
|
+
unmountAtom(a);
|
|
540
|
+
}
|
|
541
|
+
}
|
|
542
|
+
});
|
|
543
|
+
depSet.forEach((a) => {
|
|
544
|
+
const mounted = mountedMap.get(a);
|
|
545
|
+
if (mounted) {
|
|
546
|
+
mounted.t.add(atom2);
|
|
547
|
+
} else if (mountedMap.has(atom2)) {
|
|
548
|
+
mountAtom(a, atom2);
|
|
549
|
+
}
|
|
550
|
+
});
|
|
551
|
+
};
|
|
552
|
+
const flushPending = () => {
|
|
553
|
+
let flushed;
|
|
554
|
+
if ((import_meta.env ? import_meta.env.MODE : void 0) !== "production") {
|
|
555
|
+
flushed = /* @__PURE__ */ new Set();
|
|
556
|
+
}
|
|
557
|
+
while (pendingMap.size) {
|
|
558
|
+
const pending = Array.from(pendingMap);
|
|
559
|
+
pendingMap.clear();
|
|
560
|
+
pending.forEach(([atom2, prevAtomState]) => {
|
|
561
|
+
const atomState = getAtomState(atom2);
|
|
562
|
+
if (atomState) {
|
|
563
|
+
if (atomState.d !== (prevAtomState == null ? void 0 : prevAtomState.d)) {
|
|
564
|
+
mountDependencies(atom2, atomState, prevAtomState == null ? void 0 : prevAtomState.d);
|
|
565
|
+
}
|
|
566
|
+
const mounted = mountedMap.get(atom2);
|
|
567
|
+
if (mounted && !// TODO This seems pretty hacky. Hope to fix it.
|
|
568
|
+
// Maybe we could `mountDependencies` in `setAtomState`?
|
|
569
|
+
(prevAtomState && !hasPromiseAtomValue(prevAtomState) && (isEqualAtomValue(prevAtomState, atomState) || isEqualAtomError(prevAtomState, atomState)))) {
|
|
570
|
+
mounted.l.forEach((listener) => listener());
|
|
571
|
+
if ((import_meta.env ? import_meta.env.MODE : void 0) !== "production") {
|
|
572
|
+
flushed.add(atom2);
|
|
573
|
+
}
|
|
574
|
+
}
|
|
575
|
+
} else if ((import_meta.env ? import_meta.env.MODE : void 0) !== "production") {
|
|
576
|
+
console.warn("[Bug] no atom state to flush");
|
|
577
|
+
}
|
|
578
|
+
});
|
|
579
|
+
}
|
|
580
|
+
if ((import_meta.env ? import_meta.env.MODE : void 0) !== "production") {
|
|
581
|
+
storeListenersRev1.forEach((l) => l("state"));
|
|
582
|
+
return flushed;
|
|
583
|
+
}
|
|
584
|
+
};
|
|
585
|
+
const subscribeAtom = (atom2, listener) => {
|
|
586
|
+
const mounted = addAtom(atom2);
|
|
587
|
+
const flushed = flushPending();
|
|
588
|
+
const listeners = mounted.l;
|
|
589
|
+
listeners.add(listener);
|
|
590
|
+
if ((import_meta.env ? import_meta.env.MODE : void 0) !== "production") {
|
|
591
|
+
storeListenersRev1.forEach((l) => l("sub"));
|
|
592
|
+
storeListenersRev2.forEach(
|
|
593
|
+
(l) => l({ type: "sub", flushed })
|
|
594
|
+
);
|
|
595
|
+
}
|
|
596
|
+
return () => {
|
|
597
|
+
listeners.delete(listener);
|
|
598
|
+
delAtom(atom2);
|
|
599
|
+
if ((import_meta.env ? import_meta.env.MODE : void 0) !== "production") {
|
|
600
|
+
storeListenersRev1.forEach((l) => l("unsub"));
|
|
601
|
+
storeListenersRev2.forEach((l) => l({ type: "unsub" }));
|
|
602
|
+
}
|
|
603
|
+
};
|
|
604
|
+
};
|
|
605
|
+
if ((import_meta.env ? import_meta.env.MODE : void 0) !== "production") {
|
|
606
|
+
return {
|
|
607
|
+
get: readAtom,
|
|
608
|
+
set: writeAtom,
|
|
609
|
+
sub: subscribeAtom,
|
|
610
|
+
// store dev methods (these are tentative and subject to change without notice)
|
|
611
|
+
dev_subscribe_store: (l, rev) => {
|
|
612
|
+
if (rev !== 2) {
|
|
613
|
+
console.warn(
|
|
614
|
+
"The current StoreListener revision is 2. The older ones are deprecated."
|
|
615
|
+
);
|
|
616
|
+
storeListenersRev1.add(l);
|
|
617
|
+
return () => {
|
|
618
|
+
storeListenersRev1.delete(l);
|
|
619
|
+
};
|
|
620
|
+
}
|
|
621
|
+
storeListenersRev2.add(l);
|
|
622
|
+
return () => {
|
|
623
|
+
storeListenersRev2.delete(l);
|
|
624
|
+
};
|
|
625
|
+
},
|
|
626
|
+
dev_get_mounted_atoms: () => mountedAtoms.values(),
|
|
627
|
+
dev_get_atom_state: (a) => atomStateMap.get(a),
|
|
628
|
+
dev_get_mounted: (a) => mountedMap.get(a),
|
|
629
|
+
dev_restore_atoms: (values) => {
|
|
630
|
+
for (const [atom2, valueOrPromise] of values) {
|
|
631
|
+
if (hasInitialValue(atom2)) {
|
|
632
|
+
setAtomValueOrPromise(atom2, valueOrPromise);
|
|
633
|
+
recomputeDependents(atom2);
|
|
634
|
+
}
|
|
635
|
+
}
|
|
636
|
+
const flushed = flushPending();
|
|
637
|
+
storeListenersRev2.forEach(
|
|
638
|
+
(l) => l({ type: "restore", flushed })
|
|
639
|
+
);
|
|
640
|
+
}
|
|
641
|
+
};
|
|
642
|
+
}
|
|
643
|
+
return {
|
|
644
|
+
get: readAtom,
|
|
645
|
+
set: writeAtom,
|
|
646
|
+
sub: subscribeAtom
|
|
647
|
+
};
|
|
648
|
+
};
|
|
649
|
+
var defaultStore;
|
|
650
|
+
var getDefaultStore = () => {
|
|
651
|
+
if (!defaultStore) {
|
|
652
|
+
defaultStore = createStore();
|
|
653
|
+
}
|
|
654
|
+
return defaultStore;
|
|
655
|
+
};
|
|
656
|
+
if ((import_meta.env ? import_meta.env.MODE : void 0) !== "production") {
|
|
657
|
+
if (globalThis.__JOTAI_PACKAGE_IS_LOADED__) {
|
|
658
|
+
console.warn(
|
|
659
|
+
"Detected multiple Jotai instances. It may cause unexpected behavior. https://github.com/pmndrs/jotai/discussions/2044"
|
|
660
|
+
);
|
|
661
|
+
} else {
|
|
662
|
+
globalThis.__JOTAI_PACKAGE_IS_LOADED__ = true;
|
|
663
|
+
}
|
|
664
|
+
}
|
|
665
|
+
|
|
666
|
+
// ../../node_modules/jotai/esm/react.mjs
|
|
667
|
+
var import_react = __toESM(require("react"), 1);
|
|
668
|
+
var import_meta2 = {};
|
|
669
|
+
var StoreContext = (0, import_react.createContext)(void 0);
|
|
670
|
+
var useStore = (options) => {
|
|
671
|
+
const store = (0, import_react.useContext)(StoreContext);
|
|
672
|
+
return (options == null ? void 0 : options.store) || store || getDefaultStore();
|
|
673
|
+
};
|
|
674
|
+
var isPromiseLike2 = (x) => typeof (x == null ? void 0 : x.then) === "function";
|
|
675
|
+
var use = import_react.default.use || ((promise) => {
|
|
676
|
+
if (promise.status === "pending") {
|
|
677
|
+
throw promise;
|
|
678
|
+
} else if (promise.status === "fulfilled") {
|
|
679
|
+
return promise.value;
|
|
680
|
+
} else if (promise.status === "rejected") {
|
|
681
|
+
throw promise.reason;
|
|
682
|
+
} else {
|
|
683
|
+
promise.status = "pending";
|
|
684
|
+
promise.then(
|
|
685
|
+
(v) => {
|
|
686
|
+
promise.status = "fulfilled";
|
|
687
|
+
promise.value = v;
|
|
688
|
+
},
|
|
689
|
+
(e) => {
|
|
690
|
+
promise.status = "rejected";
|
|
691
|
+
promise.reason = e;
|
|
692
|
+
}
|
|
693
|
+
);
|
|
694
|
+
throw promise;
|
|
695
|
+
}
|
|
696
|
+
});
|
|
697
|
+
function useAtomValue(atom2, options) {
|
|
698
|
+
const store = useStore(options);
|
|
699
|
+
const [[valueFromReducer, storeFromReducer, atomFromReducer], rerender] = (0, import_react.useReducer)(
|
|
700
|
+
(prev) => {
|
|
701
|
+
const nextValue = store.get(atom2);
|
|
702
|
+
if (Object.is(prev[0], nextValue) && prev[1] === store && prev[2] === atom2) {
|
|
703
|
+
return prev;
|
|
704
|
+
}
|
|
705
|
+
return [nextValue, store, atom2];
|
|
706
|
+
},
|
|
707
|
+
void 0,
|
|
708
|
+
() => [store.get(atom2), store, atom2]
|
|
709
|
+
);
|
|
710
|
+
let value = valueFromReducer;
|
|
711
|
+
if (storeFromReducer !== store || atomFromReducer !== atom2) {
|
|
712
|
+
rerender();
|
|
713
|
+
value = store.get(atom2);
|
|
714
|
+
}
|
|
715
|
+
const delay = options == null ? void 0 : options.delay;
|
|
716
|
+
(0, import_react.useEffect)(() => {
|
|
717
|
+
const unsub = store.sub(atom2, () => {
|
|
718
|
+
if (typeof delay === "number") {
|
|
719
|
+
setTimeout(rerender, delay);
|
|
720
|
+
return;
|
|
721
|
+
}
|
|
722
|
+
rerender();
|
|
723
|
+
});
|
|
724
|
+
rerender();
|
|
725
|
+
return unsub;
|
|
726
|
+
}, [store, atom2, delay]);
|
|
727
|
+
(0, import_react.useDebugValue)(value);
|
|
728
|
+
return isPromiseLike2(value) ? use(value) : value;
|
|
729
|
+
}
|
|
730
|
+
function useSetAtom(atom2, options) {
|
|
731
|
+
const store = useStore(options);
|
|
732
|
+
const setAtom = (0, import_react.useCallback)(
|
|
733
|
+
(...args) => {
|
|
734
|
+
if ((import_meta2.env ? import_meta2.env.MODE : void 0) !== "production" && !("write" in atom2)) {
|
|
735
|
+
throw new Error("not writable atom");
|
|
736
|
+
}
|
|
737
|
+
return store.set(atom2, ...args);
|
|
738
|
+
},
|
|
739
|
+
[store, atom2]
|
|
740
|
+
);
|
|
741
|
+
return setAtom;
|
|
742
|
+
}
|
|
743
|
+
function useAtom(atom2, options) {
|
|
744
|
+
return [
|
|
745
|
+
useAtomValue(atom2, options),
|
|
746
|
+
// We do wrong type assertion here, which results in throwing an error.
|
|
747
|
+
useSetAtom(atom2, options)
|
|
748
|
+
];
|
|
749
|
+
}
|
|
750
|
+
|
|
751
|
+
// src/hooks.tsx
|
|
752
|
+
var storyContextAtom = atom(null);
|
|
94
753
|
function useSetStoryContext() {
|
|
95
|
-
return
|
|
754
|
+
return useSetAtom(storyContextAtom);
|
|
96
755
|
}
|
|
97
756
|
function useStoryContext() {
|
|
98
|
-
return
|
|
757
|
+
return useAtomValue(storyContextAtom);
|
|
99
758
|
}
|
|
100
759
|
function useStoryContextParam(name, defaultValue) {
|
|
101
|
-
const paramAtom = (0,
|
|
102
|
-
return
|
|
760
|
+
const paramAtom = (0, import_react2.useMemo)(() => atom((get) => get(storyContextAtom)?.parameters?.[name]), [name]);
|
|
761
|
+
return useAtomValue(paramAtom) ?? defaultValue;
|
|
103
762
|
}
|
|
104
763
|
function useIsStorySelected(storyId) {
|
|
105
|
-
return
|
|
106
|
-
(0,
|
|
764
|
+
return useAtomValue(
|
|
765
|
+
(0, import_react2.useMemo)(() => atom((get) => get(storyContextAtom)?.id === storyId), [storyId])
|
|
107
766
|
);
|
|
108
767
|
}
|
|
109
768
|
function useIsStorySectionSelected(title) {
|
|
110
|
-
return
|
|
111
|
-
(0,
|
|
112
|
-
() =>
|
|
769
|
+
return useAtomValue(
|
|
770
|
+
(0, import_react2.useMemo)(
|
|
771
|
+
() => atom((get) => {
|
|
113
772
|
const contextTitle = get(storyContextAtom)?.title;
|
|
114
773
|
return contextTitle === title || contextTitle?.startsWith(`${title}/`);
|
|
115
774
|
}),
|
|
@@ -118,9 +777,9 @@ function useIsStorySectionSelected(title) {
|
|
|
118
777
|
);
|
|
119
778
|
}
|
|
120
779
|
function useIsChildSelected(entries) {
|
|
121
|
-
return
|
|
122
|
-
(0,
|
|
123
|
-
() =>
|
|
780
|
+
return useAtomValue(
|
|
781
|
+
(0, import_react2.useMemo)(
|
|
782
|
+
() => atom((get) => {
|
|
124
783
|
const contextId = get(storyContextAtom)?.id;
|
|
125
784
|
return !!entries.find(({ id }) => id === contextId);
|
|
126
785
|
}),
|
|
@@ -129,10 +788,10 @@ function useIsChildSelected(entries) {
|
|
|
129
788
|
);
|
|
130
789
|
}
|
|
131
790
|
function useUpdateOnStoryChanged() {
|
|
132
|
-
|
|
791
|
+
useAtomValue((0, import_react2.useMemo)(() => atom((get) => get(storyContextAtom)?.id), []));
|
|
133
792
|
}
|
|
134
793
|
function atomWithToggle(initialValue) {
|
|
135
|
-
const anAtom =
|
|
794
|
+
const anAtom = atom(initialValue, (get, set, nextValue) => {
|
|
136
795
|
const update = nextValue ?? !get(anAtom);
|
|
137
796
|
set(anAtom, update);
|
|
138
797
|
});
|
|
@@ -140,14 +799,14 @@ function atomWithToggle(initialValue) {
|
|
|
140
799
|
}
|
|
141
800
|
var isUIVisibleAtom = atomWithToggle(true);
|
|
142
801
|
function useIsUIVisible() {
|
|
143
|
-
return
|
|
802
|
+
return useAtom(isUIVisibleAtom);
|
|
144
803
|
}
|
|
145
804
|
var isSplitPanelVisibleAtom = atomWithToggle(false);
|
|
146
805
|
function useIsSplitPanelVisible() {
|
|
147
|
-
return
|
|
806
|
+
return useAtom(isSplitPanelVisibleAtom);
|
|
148
807
|
}
|
|
149
808
|
function syncExternalUI({ isUIVisible, isSplitPanelVisible }) {
|
|
150
|
-
const jotaiStore =
|
|
809
|
+
const jotaiStore = getDefaultStore();
|
|
151
810
|
if (isUIVisible !== void 0) {
|
|
152
811
|
jotaiStore.set(isUIVisibleAtom, isUIVisible);
|
|
153
812
|
}
|
|
@@ -155,12 +814,12 @@ function syncExternalUI({ isUIVisible, isSplitPanelVisible }) {
|
|
|
155
814
|
jotaiStore.set(isSplitPanelVisibleAtom, isSplitPanelVisible);
|
|
156
815
|
}
|
|
157
816
|
}
|
|
158
|
-
var selectedAddonAtom =
|
|
817
|
+
var selectedAddonAtom = atom(void 0);
|
|
159
818
|
function useSelectedAddon(initialValue) {
|
|
160
|
-
const result =
|
|
819
|
+
const result = useAtom(selectedAddonAtom);
|
|
161
820
|
const set = result[1];
|
|
162
|
-
|
|
163
|
-
const jotaiStore =
|
|
821
|
+
import_react2.default.useEffect(() => {
|
|
822
|
+
const jotaiStore = getDefaultStore();
|
|
164
823
|
if (jotaiStore.get(selectedAddonAtom) === void 0) {
|
|
165
824
|
set(initialValue);
|
|
166
825
|
}
|
|
@@ -170,7 +829,7 @@ function useSelectedAddon(initialValue) {
|
|
|
170
829
|
|
|
171
830
|
// src/preview/components/OnDeviceUI/OnDeviceUI.tsx
|
|
172
831
|
var import_react_native_theming10 = require("@storybook/react-native-theming");
|
|
173
|
-
var
|
|
832
|
+
var import_react14 = __toESM(require("react"));
|
|
174
833
|
var import_react_native13 = require("react-native");
|
|
175
834
|
|
|
176
835
|
// src/constants.ts
|
|
@@ -180,7 +839,7 @@ var ANIMATION_DURATION_TRANSITION = 400;
|
|
|
180
839
|
var import_core_events = __toESM(require("@storybook/core-events"));
|
|
181
840
|
var import_manager_api = require("@storybook/manager-api");
|
|
182
841
|
var import_react_native_theming = require("@storybook/react-native-theming");
|
|
183
|
-
var
|
|
842
|
+
var import_react3 = __toESM(require("react"));
|
|
184
843
|
var import_react_native2 = require("react-native");
|
|
185
844
|
|
|
186
845
|
// src/preview/components/Shared/icons.tsx
|
|
@@ -388,7 +1047,7 @@ var HeaderContainer = import_react_native_theming.styled.TouchableOpacity(
|
|
|
388
1047
|
borderBottomRightRadius: selected && !childSelected ? theme3.storyList.sectionBorderRadius : void 0
|
|
389
1048
|
})
|
|
390
1049
|
);
|
|
391
|
-
var SectionHeader =
|
|
1050
|
+
var SectionHeader = import_react3.default.memo(
|
|
392
1051
|
({ name, onPress, isChildSelected, icon = "grid", expanded }) => {
|
|
393
1052
|
const selected = useIsStorySectionSelected(name) || isChildSelected;
|
|
394
1053
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
@@ -482,7 +1141,7 @@ var RenderItem = ({
|
|
|
482
1141
|
const isChildSelected = useIsChildSelected(item.stories);
|
|
483
1142
|
const firstChild = findFirstChildStory(item);
|
|
484
1143
|
const firstChildSelected = useIsStorySelected(firstChild?.id);
|
|
485
|
-
const [showChildren, setShowChildren] = (0,
|
|
1144
|
+
const [showChildren, setShowChildren] = (0, import_react3.useState)(false);
|
|
486
1145
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
|
|
487
1146
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
488
1147
|
SectionHeader,
|
|
@@ -519,8 +1178,8 @@ var RenderItem = ({
|
|
|
519
1178
|
] });
|
|
520
1179
|
};
|
|
521
1180
|
var StoryListView = ({ storyIndex }) => {
|
|
522
|
-
const originalData = (0,
|
|
523
|
-
const [data, setData] = (0,
|
|
1181
|
+
const originalData = (0, import_react3.useMemo)(() => getNestedStories(storyIndex), [storyIndex]);
|
|
1182
|
+
const [data, setData] = (0, import_react3.useState)(originalData);
|
|
524
1183
|
const theme3 = (0, import_react_native_theming.useTheme)();
|
|
525
1184
|
const handleChangeSearchText = (text) => {
|
|
526
1185
|
const query = text.trim();
|
|
@@ -534,7 +1193,7 @@ var StoryListView = ({ storyIndex }) => {
|
|
|
534
1193
|
const channel = import_manager_api.addons.getChannel();
|
|
535
1194
|
channel.emit(import_core_events.default.SET_CURRENT_STORY, { storyId });
|
|
536
1195
|
};
|
|
537
|
-
const renderItem =
|
|
1196
|
+
const renderItem = import_react3.default.useCallback(({ item }) => {
|
|
538
1197
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RenderItem, { item, changeStory });
|
|
539
1198
|
}, []);
|
|
540
1199
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: { flex: 1 }, children: [
|
|
@@ -565,10 +1224,10 @@ var StoryListView = ({ storyIndex }) => {
|
|
|
565
1224
|
)
|
|
566
1225
|
] });
|
|
567
1226
|
};
|
|
568
|
-
var StoryListView_default =
|
|
1227
|
+
var StoryListView_default = import_react3.default.memo(StoryListView);
|
|
569
1228
|
|
|
570
1229
|
// src/preview/components/StoryView/StoryView.tsx
|
|
571
|
-
var
|
|
1230
|
+
var import_react4 = __toESM(require("react"));
|
|
572
1231
|
var import_react_native_theming2 = require("@storybook/react-native-theming");
|
|
573
1232
|
var import_react_native3 = require("react-native");
|
|
574
1233
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
@@ -595,10 +1254,10 @@ var StoryView = () => {
|
|
|
595
1254
|
}
|
|
596
1255
|
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style: { flex: 1, padding: 16, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.Text, { children: "Please open the sidebar and select a story to preview." }) });
|
|
597
1256
|
};
|
|
598
|
-
var StoryView_default =
|
|
1257
|
+
var StoryView_default = import_react4.default.memo(StoryView);
|
|
599
1258
|
|
|
600
1259
|
// src/preview/components/OnDeviceUI/absolute-positioned-keyboard-aware-view.tsx
|
|
601
|
-
var
|
|
1260
|
+
var import_react5 = __toESM(require("react"));
|
|
602
1261
|
var import_react_native4 = require("react-native");
|
|
603
1262
|
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
604
1263
|
var AbsolutePositionedKeyboardAwareView = ({
|
|
@@ -627,7 +1286,7 @@ var styles2 = import_react_native4.StyleSheet.create({
|
|
|
627
1286
|
absolute: { position: "absolute" },
|
|
628
1287
|
container: { flex: 1 }
|
|
629
1288
|
});
|
|
630
|
-
var absolute_positioned_keyboard_aware_view_default =
|
|
1289
|
+
var absolute_positioned_keyboard_aware_view_default = import_react5.default.memo(AbsolutePositionedKeyboardAwareView);
|
|
631
1290
|
|
|
632
1291
|
// src/preview/components/OnDeviceUI/OnDeviceUI.tsx
|
|
633
1292
|
var import_react_native_theming11 = require("@storybook/react-native-theming");
|
|
@@ -635,7 +1294,7 @@ var import_react_native14 = require("react-native");
|
|
|
635
1294
|
var import_react_native_safe_area_context2 = require("react-native-safe-area-context");
|
|
636
1295
|
|
|
637
1296
|
// src/preview/components/OnDeviceUI/Panel.tsx
|
|
638
|
-
var
|
|
1297
|
+
var import_react6 = __toESM(require("react"));
|
|
639
1298
|
var import_react_native5 = require("react-native");
|
|
640
1299
|
var import_react_native_theming3 = require("@storybook/react-native-theming");
|
|
641
1300
|
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
@@ -653,20 +1312,20 @@ var Panel = ({ edge, children, style }) => {
|
|
|
653
1312
|
]);
|
|
654
1313
|
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Container, { edge, style: containerStyle, children });
|
|
655
1314
|
};
|
|
656
|
-
var Panel_default =
|
|
1315
|
+
var Panel_default = import_react6.default.memo(Panel);
|
|
657
1316
|
|
|
658
1317
|
// src/preview/components/OnDeviceUI/addons/Addons.tsx
|
|
659
1318
|
var import_manager_api2 = require("@storybook/manager-api");
|
|
660
1319
|
var import_react_native_theming7 = require("@storybook/react-native-theming");
|
|
661
1320
|
var import_types = __toESM(require_dist());
|
|
662
|
-
var
|
|
1321
|
+
var import_react10 = __toESM(require("react"));
|
|
663
1322
|
var import_react_native8 = require("react-native");
|
|
664
1323
|
|
|
665
1324
|
// src/preview/components/OnDeviceUI/addons/List.tsx
|
|
666
|
-
var
|
|
1325
|
+
var import_react8 = __toESM(require("react"));
|
|
667
1326
|
|
|
668
1327
|
// src/preview/components/Shared/tabs.tsx
|
|
669
|
-
var
|
|
1328
|
+
var import_react7 = __toESM(require("react"));
|
|
670
1329
|
var import_react_native6 = require("react-native");
|
|
671
1330
|
var import_react_native_theming4 = require("@storybook/react-native-theming");
|
|
672
1331
|
var import_react_native_theming5 = require("@storybook/react-native-theming");
|
|
@@ -685,7 +1344,7 @@ var TabButtonTouchable = import_react_native_theming4.styled.TouchableOpacity(({
|
|
|
685
1344
|
borderRadius: theme3.tabs.borderRadius,
|
|
686
1345
|
backgroundColor: active ? theme3.tabs.activeBackgroundColor : theme3.tabs.inactiveBackgroundColor
|
|
687
1346
|
}));
|
|
688
|
-
var TabButton =
|
|
1347
|
+
var TabButton = import_react7.default.memo(({ onPress, id, active, children, testID }) => {
|
|
689
1348
|
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
690
1349
|
TabButtonTouchable,
|
|
691
1350
|
{
|
|
@@ -698,7 +1357,7 @@ var TabButton = import_react6.default.memo(({ onPress, id, active, children, tes
|
|
|
698
1357
|
}
|
|
699
1358
|
);
|
|
700
1359
|
});
|
|
701
|
-
var TabBar =
|
|
1360
|
+
var TabBar = import_react7.default.memo(({ scrollable = false, style, children }) => {
|
|
702
1361
|
const theme3 = (0, import_react_native_theming5.useTheme)();
|
|
703
1362
|
if (scrollable) {
|
|
704
1363
|
children = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
@@ -739,11 +1398,11 @@ var AddonList = ({ panels, addonSelected, onPressAddon }) => {
|
|
|
739
1398
|
);
|
|
740
1399
|
}) });
|
|
741
1400
|
};
|
|
742
|
-
var List_default =
|
|
1401
|
+
var List_default = import_react8.default.memo(AddonList);
|
|
743
1402
|
|
|
744
1403
|
// src/preview/components/OnDeviceUI/addons/Wrapper.tsx
|
|
745
1404
|
var import_react_native_theming6 = require("@storybook/react-native-theming");
|
|
746
|
-
var
|
|
1405
|
+
var import_react9 = __toESM(require("react"));
|
|
747
1406
|
var import_react_native7 = require("react-native");
|
|
748
1407
|
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
749
1408
|
var Container2 = import_react_native_theming6.styled.View(({ selected }) => ({
|
|
@@ -760,7 +1419,7 @@ var Wrapper = ({ panels, addonSelected }) => {
|
|
|
760
1419
|
});
|
|
761
1420
|
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: content });
|
|
762
1421
|
};
|
|
763
|
-
var Wrapper_default =
|
|
1422
|
+
var Wrapper_default = import_react9.default.memo(Wrapper);
|
|
764
1423
|
|
|
765
1424
|
// src/preview/components/OnDeviceUI/addons/Addons.tsx
|
|
766
1425
|
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
@@ -790,16 +1449,16 @@ var Addons = ({ active }) => {
|
|
|
790
1449
|
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Wrapper_default, { addonSelected: active ? addonSelected : null, panels })
|
|
791
1450
|
] });
|
|
792
1451
|
};
|
|
793
|
-
var Addons_default =
|
|
1452
|
+
var Addons_default = import_react10.default.memo(Addons);
|
|
794
1453
|
|
|
795
1454
|
// src/preview/components/OnDeviceUI/addons/AddonsSkeleton.tsx
|
|
796
|
-
var
|
|
1455
|
+
var import_react11 = __toESM(require("react"));
|
|
797
1456
|
var import_react_native_theming8 = require("@storybook/react-native-theming");
|
|
798
1457
|
var import_react_native9 = require("react-native");
|
|
799
1458
|
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
800
|
-
var AddonsSkeleton =
|
|
801
|
-
const progress =
|
|
802
|
-
|
|
1459
|
+
var AddonsSkeleton = import_react11.default.memo(function AddonsSkeleton2({ visible }) {
|
|
1460
|
+
const progress = import_react11.default.useRef(new import_react_native9.Animated.Value(visible ? 1 : 0));
|
|
1461
|
+
import_react11.default.useEffect(() => {
|
|
803
1462
|
import_react_native9.Animated.timing(progress.current, {
|
|
804
1463
|
toValue: visible ? 1 : 0,
|
|
805
1464
|
duration: ANIMATION_DURATION_TRANSITION,
|
|
@@ -966,13 +1625,13 @@ var getPreviewShadowStyle = (animatedValue) => ({
|
|
|
966
1625
|
});
|
|
967
1626
|
|
|
968
1627
|
// src/preview/components/OnDeviceUI/navigation/Navigation.tsx
|
|
969
|
-
var
|
|
1628
|
+
var import_react13 = __toESM(require("react"));
|
|
970
1629
|
var import_react_native12 = require("react-native");
|
|
971
1630
|
var import_react_native_safe_area_context = require("react-native-safe-area-context");
|
|
972
1631
|
var import_react_native_swipe_gestures = __toESM(require("react-native-swipe-gestures"));
|
|
973
1632
|
|
|
974
1633
|
// src/preview/components/OnDeviceUI/navigation/NavigationBar.tsx
|
|
975
|
-
var
|
|
1634
|
+
var import_react12 = __toESM(require("react"));
|
|
976
1635
|
var import_react_native_theming9 = require("@storybook/react-native-theming");
|
|
977
1636
|
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
978
1637
|
var NavigationTabBar = (0, import_react_native_theming9.styled)(TabBar)(({ theme: theme3 }) => ({
|
|
@@ -981,7 +1640,7 @@ var NavigationTabBar = (0, import_react_native_theming9.styled)(TabBar)(({ theme
|
|
|
981
1640
|
borderColor: theme3.navigation.borderColor,
|
|
982
1641
|
borderTopWidth: theme3.navigation.borderWidth
|
|
983
1642
|
}));
|
|
984
|
-
var NavigationBar =
|
|
1643
|
+
var NavigationBar = import_react12.default.memo(({ index, onPress, style }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(NavigationTabBar, { style, children: [
|
|
985
1644
|
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
986
1645
|
TabButton,
|
|
987
1646
|
{
|
|
@@ -1076,7 +1735,7 @@ var Navigation = ({ tabOpen, onChangeTab, onLayout }) => {
|
|
|
1076
1735
|
] })
|
|
1077
1736
|
] });
|
|
1078
1737
|
};
|
|
1079
|
-
var Navigation_default =
|
|
1738
|
+
var Navigation_default = import_react13.default.memo(Navigation);
|
|
1080
1739
|
function NavigationShortcuts({ children }) {
|
|
1081
1740
|
const insets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
|
|
1082
1741
|
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
@@ -1128,16 +1787,16 @@ var OnDeviceUI = ({
|
|
|
1128
1787
|
keyboardAvoidingViewVerticalOffset,
|
|
1129
1788
|
tabOpen: initialTabOpen
|
|
1130
1789
|
}) => {
|
|
1131
|
-
const [tabOpen, setTabOpen] = (0,
|
|
1132
|
-
const lastTabOpen =
|
|
1133
|
-
const [previewDimensions, setPreviewDimensions] = (0,
|
|
1790
|
+
const [tabOpen, setTabOpen] = (0, import_react14.useState)(initialTabOpen || CANVAS);
|
|
1791
|
+
const lastTabOpen = import_react14.default.useRef(tabOpen);
|
|
1792
|
+
const [previewDimensions, setPreviewDimensions] = (0, import_react14.useState)(() => ({
|
|
1134
1793
|
width: import_react_native13.Dimensions.get("window").width,
|
|
1135
1794
|
height: import_react_native13.Dimensions.get("window").height
|
|
1136
1795
|
}));
|
|
1137
|
-
const animatedValue = (0,
|
|
1796
|
+
const animatedValue = (0, import_react14.useRef)(new import_react_native13.Animated.Value(tabOpen));
|
|
1138
1797
|
const wide = (0, import_react_native14.useWindowDimensions)().width >= BREAKPOINT;
|
|
1139
1798
|
const insets = (0, import_react_native_safe_area_context2.useSafeAreaInsets)();
|
|
1140
|
-
const handleToggleTab =
|
|
1799
|
+
const handleToggleTab = import_react14.default.useCallback(
|
|
1141
1800
|
(newTabOpen) => {
|
|
1142
1801
|
if (newTabOpen === tabOpen) {
|
|
1143
1802
|
return;
|
|
@@ -1169,8 +1828,8 @@ var OnDeviceUI = ({
|
|
|
1169
1828
|
})
|
|
1170
1829
|
];
|
|
1171
1830
|
const [isUIVisible] = useIsUIVisible();
|
|
1172
|
-
const [navBarHeight, setNavBarHeight] =
|
|
1173
|
-
const measureNavigation =
|
|
1831
|
+
const [navBarHeight, setNavBarHeight] = import_react14.default.useState(insets.bottom + 40);
|
|
1832
|
+
const measureNavigation = import_react14.default.useCallback(
|
|
1174
1833
|
({ nativeEvent }) => {
|
|
1175
1834
|
const inset = insets.bottom;
|
|
1176
1835
|
setNavBarHeight(isUIVisible ? nativeEvent.layout.height - inset : 0);
|
|
@@ -1249,11 +1908,12 @@ var OnDeviceUI = ({
|
|
|
1249
1908
|
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Navigation_default, { onLayout: measureNavigation, tabOpen, onChangeTab: handleToggleTab })
|
|
1250
1909
|
] }) });
|
|
1251
1910
|
};
|
|
1252
|
-
var OnDeviceUI_default =
|
|
1911
|
+
var OnDeviceUI_default = import_react14.default.memo(OnDeviceUI);
|
|
1253
1912
|
|
|
1254
1913
|
// src/preview/View.tsx
|
|
1255
1914
|
var import_channels = require("@storybook/channels");
|
|
1256
1915
|
var import_core_events2 = __toESM(require("@storybook/core-events"));
|
|
1916
|
+
var import_global = require("@storybook/global");
|
|
1257
1917
|
var import_deepmerge = __toESM(require("deepmerge"));
|
|
1258
1918
|
var import_react_native15 = require("react-native");
|
|
1259
1919
|
|
|
@@ -1387,12 +2047,12 @@ var View10 = class {
|
|
|
1387
2047
|
return () => {
|
|
1388
2048
|
const setContext = useSetStoryContext();
|
|
1389
2049
|
const colorScheme = (0, import_react_native15.useColorScheme)();
|
|
1390
|
-
const [, forceUpdate] = (0,
|
|
1391
|
-
const appliedTheme = (0,
|
|
2050
|
+
const [, forceUpdate] = (0, import_react15.useReducer)((x) => x + 1, 0);
|
|
2051
|
+
const appliedTheme = (0, import_react15.useMemo)(
|
|
1392
2052
|
() => (0, import_deepmerge.default)(colorScheme === "dark" ? import_react_native_theming12.darkTheme : import_react_native_theming12.theme, params.theme ?? {}),
|
|
1393
2053
|
[colorScheme]
|
|
1394
2054
|
);
|
|
1395
|
-
(0,
|
|
2055
|
+
(0, import_react15.useEffect)(() => {
|
|
1396
2056
|
self._setStory = (newStory) => {
|
|
1397
2057
|
setContext(newStory);
|
|
1398
2058
|
if (shouldPersistSelection) {
|
|
@@ -1406,6 +2066,17 @@ var View10 = class {
|
|
|
1406
2066
|
self._preview.selectionStore.selectionSpecifier = story;
|
|
1407
2067
|
self._preview.selectSpecifiedStory();
|
|
1408
2068
|
});
|
|
2069
|
+
import_global.global.__STORYBOOK_ADDONS_CHANNEL__.on(import_core_events2.default.SET_CURRENT_STORY, async ({ storyId }) => {
|
|
2070
|
+
self._preview.selectionStore.selectionSpecifier = {
|
|
2071
|
+
storySpecifier: storyId,
|
|
2072
|
+
viewMode: "story"
|
|
2073
|
+
};
|
|
2074
|
+
this._preview.selectionStore.selection = {
|
|
2075
|
+
storyId,
|
|
2076
|
+
viewMode: "story"
|
|
2077
|
+
};
|
|
2078
|
+
await self._preview.selectSpecifiedStory();
|
|
2079
|
+
});
|
|
1409
2080
|
}, []);
|
|
1410
2081
|
if (onDeviceUI) {
|
|
1411
2082
|
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native_safe_area_context3.SafeAreaProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native_theming12.ThemeProvider, { theme: appliedTheme, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
@@ -1482,7 +2153,7 @@ function executeLoadableForChanges(loadable, m) {
|
|
|
1482
2153
|
|
|
1483
2154
|
// src/preview/start.tsx
|
|
1484
2155
|
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
1485
|
-
|
|
2156
|
+
import_global2.global.FEATURES = {
|
|
1486
2157
|
storyStoreV7: false
|
|
1487
2158
|
};
|
|
1488
2159
|
var render = (args, context) => {
|
|
@@ -1495,42 +2166,32 @@ var render = (args, context) => {
|
|
|
1495
2166
|
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Component, { ...args });
|
|
1496
2167
|
};
|
|
1497
2168
|
function start() {
|
|
1498
|
-
const channel = new import_channels2.
|
|
2169
|
+
const channel = new import_channels2.Channel({ async: true });
|
|
1499
2170
|
import_manager_api4.addons.setChannel(channel);
|
|
2171
|
+
channel.emit(import_core_events3.default.CHANNEL_CREATED);
|
|
1500
2172
|
const clientApi2 = new import_preview_api.ClientApi();
|
|
1501
2173
|
const previewView = {
|
|
1502
2174
|
prepareForStory: () => {
|
|
1503
|
-
return {};
|
|
2175
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, {});
|
|
1504
2176
|
},
|
|
1505
|
-
|
|
1506
|
-
},
|
|
1507
|
-
showPreparingStory: () => {
|
|
2177
|
+
prepareForDocs: () => {
|
|
1508
2178
|
},
|
|
1509
|
-
|
|
2179
|
+
showErrorDisplay: () => {
|
|
1510
2180
|
},
|
|
1511
|
-
|
|
1512
|
-
console.log(e);
|
|
1513
|
-
},
|
|
1514
|
-
showStoryDuringRender: () => {
|
|
2181
|
+
showDocs: () => {
|
|
1515
2182
|
},
|
|
1516
2183
|
showMain: () => {
|
|
1517
2184
|
},
|
|
1518
|
-
|
|
1519
|
-
},
|
|
1520
|
-
showStory: () => {
|
|
2185
|
+
showNoPreview: () => {
|
|
1521
2186
|
},
|
|
1522
|
-
|
|
1523
|
-
prepareForDocs: () => null,
|
|
1524
|
-
showDocs: () => {
|
|
2187
|
+
showPreparingDocs: () => {
|
|
1525
2188
|
},
|
|
1526
|
-
|
|
1527
|
-
}, 0),
|
|
1528
|
-
showMode: () => {
|
|
2189
|
+
showPreparingStory: () => {
|
|
1529
2190
|
},
|
|
1530
|
-
|
|
2191
|
+
showStory: () => {
|
|
1531
2192
|
},
|
|
1532
|
-
|
|
1533
|
-
|
|
2193
|
+
showStoryDuringRender: () => {
|
|
2194
|
+
}
|
|
1534
2195
|
};
|
|
1535
2196
|
const urlStore = {
|
|
1536
2197
|
selection: null,
|
|
@@ -1543,11 +2204,11 @@ function start() {
|
|
|
1543
2204
|
};
|
|
1544
2205
|
const preview = new import_preview_web.PreviewWithSelection(urlStore, previewView);
|
|
1545
2206
|
clientApi2.storyStore = preview.storyStore;
|
|
1546
|
-
if (
|
|
1547
|
-
|
|
1548
|
-
|
|
1549
|
-
|
|
1550
|
-
|
|
2207
|
+
if (import_global2.global) {
|
|
2208
|
+
import_global2.global.__STORYBOOK_CLIENT_API__ = clientApi2;
|
|
2209
|
+
import_global2.global.__STORYBOOK_ADDONS_CHANNEL__ = channel;
|
|
2210
|
+
import_global2.global.__STORYBOOK_PREVIEW__ = preview;
|
|
2211
|
+
import_global2.global.__STORYBOOK_STORY_STORE__ = preview.storyStore;
|
|
1551
2212
|
}
|
|
1552
2213
|
(0, import_preview_api.setGlobalRender)(render);
|
|
1553
2214
|
let initialized = false;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storybook/react-native",
|
|
3
|
-
"version": "7.0.0-alpha.
|
|
3
|
+
"version": "7.0.0-alpha.5",
|
|
4
4
|
"description": "A better way to develop React Native Components for your app",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
],
|
|
34
34
|
"scripts": {
|
|
35
35
|
"dev": "ts-node ./buildscripts/gentsdev.ts && tsup --watch",
|
|
36
|
-
"prepare": "tsup",
|
|
36
|
+
"prepare": "rm -rf dist/ && tsup",
|
|
37
37
|
"test": "jest"
|
|
38
38
|
},
|
|
39
39
|
"jest": {
|
|
@@ -55,18 +55,18 @@
|
|
|
55
55
|
"@storybook/channels": "^7",
|
|
56
56
|
"@storybook/client-logger": "^7",
|
|
57
57
|
"@storybook/core-client": "^7",
|
|
58
|
+
"@storybook/core-common": "^7",
|
|
58
59
|
"@storybook/core-events": "^7",
|
|
59
60
|
"@storybook/csf": "^0.1.1",
|
|
60
61
|
"@storybook/global": "^5.0.0",
|
|
61
62
|
"@storybook/manager-api": "^7",
|
|
62
63
|
"@storybook/preview-api": "^7",
|
|
63
64
|
"@storybook/preview-web": "^7",
|
|
64
|
-
"@storybook/react-native-theming": "^7.0.0-alpha.
|
|
65
|
+
"@storybook/react-native-theming": "^7.0.0-alpha.5",
|
|
65
66
|
"chokidar": "^3.5.1",
|
|
66
67
|
"commander": "^8.2.0",
|
|
67
68
|
"deepmerge": "^4.3.0",
|
|
68
69
|
"glob": "^7.1.7",
|
|
69
|
-
"jotai": "^2.0.2",
|
|
70
70
|
"prettier": "^2.4.1",
|
|
71
71
|
"react-native-swipe-gestures": "^1.0.5",
|
|
72
72
|
"util": "^0.12.4"
|
|
@@ -77,6 +77,7 @@
|
|
|
77
77
|
"@types/react": "~18.2.14",
|
|
78
78
|
"babel-jest": "^29.4.3",
|
|
79
79
|
"jest": "^29.4.3",
|
|
80
|
+
"jotai": "^2.0.2",
|
|
80
81
|
"react-test-renderer": "18.2.0",
|
|
81
82
|
"ts-node": "^10.9.1",
|
|
82
83
|
"tsup": "^7.2.0",
|
|
@@ -94,5 +95,5 @@
|
|
|
94
95
|
"publishConfig": {
|
|
95
96
|
"access": "public"
|
|
96
97
|
},
|
|
97
|
-
"gitHead": "
|
|
98
|
+
"gitHead": "7e6db945d52b15ca54a3d7471158874829ada78d"
|
|
98
99
|
}
|