@wireai/activation 0.14.1 → 0.14.3
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/CHANGELOG.md +97 -0
- package/README.md +12 -2
- package/dist/coachmarks/index.d.mts +12 -4
- package/dist/coachmarks/index.d.ts +12 -4
- package/dist/coachmarks/index.js +270 -58
- package/dist/coachmarks/index.js.map +1 -1
- package/dist/coachmarks/index.mjs +224 -11
- package/dist/coachmarks/index.mjs.map +1 -1
- package/dist/showcase/index.js +235 -46
- package/dist/showcase/index.js.map +1 -1
- package/dist/showcase/index.mjs +201 -10
- package/dist/showcase/index.mjs.map +1 -1
- package/metro/index.js +18 -5
- package/package.json +1 -1
- package/src/coachmarks/GestureHint.tsx +16 -7
- package/src/coachmarks/SpotlightOverlay.tsx +51 -18
- package/src/coachmarks/expoBlur.ts +135 -0
- package/src/coachmarks/index.ts +7 -2
- package/src/coachmarks/reanimated.ts +342 -0
- package/src/showcase/FeatureShowcase.tsx +25 -9
- package/src/showcase/blazejOnboarding.ts +136 -0
- package/src/showcase/index.ts +8 -4
|
@@ -1,10 +1,13 @@
|
|
|
1
|
-
import React3, { createContext, useEffect, useMemo, useContext, useSyncExternalStore,
|
|
1
|
+
import React3, { createContext, forwardRef, createElement, useEffect, useMemo, useContext, useSyncExternalStore, useState, useReducer, useRef, useCallback } from 'react';
|
|
2
2
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
3
|
-
import {
|
|
4
|
-
import { StyleSheet, View, useWindowDimensions, Pressable, Text } from 'react-native';
|
|
5
|
-
import Animated, { useSharedValue, useReducedMotion, withRepeat, withSequence, withTiming, withDelay, useAnimatedStyle, useAnimatedProps, FadeOut, FadeIn } from 'react-native-reanimated';
|
|
3
|
+
import { View, StyleSheet, useWindowDimensions, Pressable, Text, AccessibilityInfo } from 'react-native';
|
|
6
4
|
|
|
7
|
-
|
|
5
|
+
var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
|
|
6
|
+
get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
|
|
7
|
+
}) : x)(function(x) {
|
|
8
|
+
if (typeof require !== "undefined") return require.apply(this, arguments);
|
|
9
|
+
throw Error('Dynamic require of "' + x + '" is not supported');
|
|
10
|
+
});
|
|
8
11
|
|
|
9
12
|
// src/features/defaults.ts
|
|
10
13
|
var defaultWireFeatures = Object.freeze({
|
|
@@ -83,8 +86,8 @@ var DEFAULT_TIMEOUT_MS = 4e3;
|
|
|
83
86
|
var failOpen = async (storage, key) => {
|
|
84
87
|
var _a;
|
|
85
88
|
if (!storage) return defaultWireFeatures;
|
|
86
|
-
const
|
|
87
|
-
return (_a =
|
|
89
|
+
const cached3 = await readCachedFeatures(storage, key);
|
|
90
|
+
return (_a = cached3 == null ? void 0 : cached3.features) != null ? _a : defaultWireFeatures;
|
|
88
91
|
};
|
|
89
92
|
var fetchWithTimeout = async (url, apiKey, timeoutMs) => {
|
|
90
93
|
const controller = typeof AbortController !== "undefined" ? new AbortController() : void 0;
|
|
@@ -322,6 +325,198 @@ var useOnboardingTheme = () => {
|
|
|
322
325
|
const ctx = useContext(OnboardingThemeContext);
|
|
323
326
|
return ctx != null ? ctx : mergeTheme();
|
|
324
327
|
};
|
|
328
|
+
|
|
329
|
+
// src/coachmarks/expoBlur.ts
|
|
330
|
+
var runtimeRequire = (moduleName) => {
|
|
331
|
+
if (moduleName !== "expo-blur") return void 0;
|
|
332
|
+
if (typeof __require !== "function") return void 0;
|
|
333
|
+
try {
|
|
334
|
+
return __require("expo-blur");
|
|
335
|
+
} catch {
|
|
336
|
+
return void 0;
|
|
337
|
+
}
|
|
338
|
+
};
|
|
339
|
+
var interop = (mod) => {
|
|
340
|
+
if (!mod || typeof mod !== "object") return void 0;
|
|
341
|
+
const ns = mod;
|
|
342
|
+
if (ns.BlurView) return ns;
|
|
343
|
+
const def = mod.default;
|
|
344
|
+
if (def && typeof def === "object") return def;
|
|
345
|
+
return ns;
|
|
346
|
+
};
|
|
347
|
+
var asComponent = (value) => {
|
|
348
|
+
if (typeof value === "function") return value;
|
|
349
|
+
if (value && typeof value === "object" && "$$typeof" in value) {
|
|
350
|
+
return value;
|
|
351
|
+
}
|
|
352
|
+
return void 0;
|
|
353
|
+
};
|
|
354
|
+
var cached;
|
|
355
|
+
var resolveBlurView = (requireModule = runtimeRequire) => {
|
|
356
|
+
try {
|
|
357
|
+
if (cached === void 0 || requireModule !== runtimeRequire) {
|
|
358
|
+
const resolved = interop(requireModule("expo-blur"));
|
|
359
|
+
const component = resolved ? asComponent(resolved.BlurView) : void 0;
|
|
360
|
+
if (requireModule === runtimeRequire) cached = component != null ? component : null;
|
|
361
|
+
return component;
|
|
362
|
+
}
|
|
363
|
+
if (cached === null) return void 0;
|
|
364
|
+
return cached;
|
|
365
|
+
} catch {
|
|
366
|
+
return void 0;
|
|
367
|
+
}
|
|
368
|
+
};
|
|
369
|
+
var lastKnown = false;
|
|
370
|
+
var useReducedMotion = () => {
|
|
371
|
+
const [reduced, setReduced] = useState(lastKnown);
|
|
372
|
+
useEffect(() => {
|
|
373
|
+
let mounted = true;
|
|
374
|
+
AccessibilityInfo.isReduceMotionEnabled().then((value) => {
|
|
375
|
+
lastKnown = value;
|
|
376
|
+
if (mounted) setReduced(value);
|
|
377
|
+
}).catch(() => {
|
|
378
|
+
});
|
|
379
|
+
const sub = AccessibilityInfo.addEventListener("reduceMotionChanged", (value) => {
|
|
380
|
+
lastKnown = value;
|
|
381
|
+
setReduced(value);
|
|
382
|
+
});
|
|
383
|
+
return () => {
|
|
384
|
+
mounted = false;
|
|
385
|
+
sub == null ? void 0 : sub.remove();
|
|
386
|
+
};
|
|
387
|
+
}, []);
|
|
388
|
+
return reduced;
|
|
389
|
+
};
|
|
390
|
+
|
|
391
|
+
// src/coachmarks/reanimated.ts
|
|
392
|
+
var runtimeRequire2 = (moduleName) => {
|
|
393
|
+
if (moduleName !== "react-native-reanimated") return void 0;
|
|
394
|
+
if (typeof __require !== "function") return void 0;
|
|
395
|
+
try {
|
|
396
|
+
return __require("react-native-reanimated");
|
|
397
|
+
} catch {
|
|
398
|
+
return void 0;
|
|
399
|
+
}
|
|
400
|
+
};
|
|
401
|
+
var useStaticSharedValue = (initial) => {
|
|
402
|
+
const [, bump] = useReducer((n) => n + 1, 0);
|
|
403
|
+
const box = useRef(null);
|
|
404
|
+
if (box.current === null) {
|
|
405
|
+
let current2 = initial;
|
|
406
|
+
box.current = {
|
|
407
|
+
get value() {
|
|
408
|
+
return current2;
|
|
409
|
+
},
|
|
410
|
+
set value(next) {
|
|
411
|
+
if (Object.is(next, current2)) return;
|
|
412
|
+
current2 = next;
|
|
413
|
+
bump();
|
|
414
|
+
}
|
|
415
|
+
};
|
|
416
|
+
}
|
|
417
|
+
return box.current;
|
|
418
|
+
};
|
|
419
|
+
var runWorklet = (factory, fallback) => {
|
|
420
|
+
var _a;
|
|
421
|
+
try {
|
|
422
|
+
return (_a = factory()) != null ? _a : fallback;
|
|
423
|
+
} catch {
|
|
424
|
+
return fallback;
|
|
425
|
+
}
|
|
426
|
+
};
|
|
427
|
+
var StaticAnimatedView = forwardRef(function StaticAnimatedView2({ entering: _entering, exiting: _exiting, children, ...rest }, ref) {
|
|
428
|
+
return createElement(View, { ...rest, ref }, children);
|
|
429
|
+
});
|
|
430
|
+
var staticCreateAnimatedComponent = (component) => function StaticAnimatedComponent({ animatedProps, ...rest }) {
|
|
431
|
+
return createElement(component, { ...rest, ...animatedProps });
|
|
432
|
+
};
|
|
433
|
+
var staticApi = {
|
|
434
|
+
present: false,
|
|
435
|
+
View: StaticAnimatedView,
|
|
436
|
+
createAnimatedComponent: staticCreateAnimatedComponent,
|
|
437
|
+
useSharedValue: useStaticSharedValue,
|
|
438
|
+
useAnimatedStyle: (factory) => runWorklet(factory, {}),
|
|
439
|
+
useAnimatedProps: (factory) => runWorklet(factory, {}),
|
|
440
|
+
useReducedMotion,
|
|
441
|
+
withTiming: (toValue) => toValue,
|
|
442
|
+
withRepeat: (animation) => animation,
|
|
443
|
+
withSequence: (...animations) => {
|
|
444
|
+
var _a;
|
|
445
|
+
return (_a = animations[animations.length - 1]) != null ? _a : 0;
|
|
446
|
+
},
|
|
447
|
+
withDelay: (_ms, animation) => animation,
|
|
448
|
+
fadeIn: () => void 0,
|
|
449
|
+
fadeOut: () => void 0
|
|
450
|
+
};
|
|
451
|
+
var isFunction = (value) => typeof value === "function";
|
|
452
|
+
var isComponent = (value) => typeof value === "function" || !!value && typeof value === "object" && "$$typeof" in value;
|
|
453
|
+
var fromModule = (mod) => {
|
|
454
|
+
var _a, _b;
|
|
455
|
+
if (!mod || typeof mod !== "object") return void 0;
|
|
456
|
+
const ns = mod;
|
|
457
|
+
const def = ns.default && typeof ns.default === "object" ? ns.default : void 0;
|
|
458
|
+
const pick = (name) => {
|
|
459
|
+
var _a2;
|
|
460
|
+
return (_a2 = ns[name]) != null ? _a2 : def == null ? void 0 : def[name];
|
|
461
|
+
};
|
|
462
|
+
const view = (_a = def == null ? void 0 : def.View) != null ? _a : ns.View;
|
|
463
|
+
const createAnimated = (_b = def == null ? void 0 : def.createAnimatedComponent) != null ? _b : ns.createAnimatedComponent;
|
|
464
|
+
const hooks = {
|
|
465
|
+
useSharedValue: pick("useSharedValue"),
|
|
466
|
+
useAnimatedStyle: pick("useAnimatedStyle"),
|
|
467
|
+
useAnimatedProps: pick("useAnimatedProps"),
|
|
468
|
+
useReducedMotion: pick("useReducedMotion"),
|
|
469
|
+
withTiming: pick("withTiming"),
|
|
470
|
+
withRepeat: pick("withRepeat"),
|
|
471
|
+
withSequence: pick("withSequence"),
|
|
472
|
+
withDelay: pick("withDelay")
|
|
473
|
+
};
|
|
474
|
+
const fadeIn = pick("FadeIn");
|
|
475
|
+
const fadeOut = pick("FadeOut");
|
|
476
|
+
if (!isComponent(view) || !isFunction(createAnimated)) return void 0;
|
|
477
|
+
if (Object.values(hooks).some((member) => !isFunction(member))) return void 0;
|
|
478
|
+
if (!fadeIn || !fadeOut) return void 0;
|
|
479
|
+
const api2 = {
|
|
480
|
+
present: true,
|
|
481
|
+
View: view,
|
|
482
|
+
createAnimatedComponent: createAnimated,
|
|
483
|
+
...hooks,
|
|
484
|
+
fadeIn: (durationMs) => fadeIn.duration(durationMs),
|
|
485
|
+
fadeOut: (durationMs) => fadeOut.duration(durationMs)
|
|
486
|
+
};
|
|
487
|
+
return api2;
|
|
488
|
+
};
|
|
489
|
+
var cached2;
|
|
490
|
+
var resolveReanimated = (requireModule = runtimeRequire2) => {
|
|
491
|
+
var _a;
|
|
492
|
+
try {
|
|
493
|
+
if (cached2 === void 0 || requireModule !== runtimeRequire2) {
|
|
494
|
+
const resolved = (_a = fromModule(requireModule("react-native-reanimated"))) != null ? _a : staticApi;
|
|
495
|
+
if (requireModule === runtimeRequire2) cached2 = resolved;
|
|
496
|
+
return resolved;
|
|
497
|
+
}
|
|
498
|
+
return cached2;
|
|
499
|
+
} catch {
|
|
500
|
+
return staticApi;
|
|
501
|
+
}
|
|
502
|
+
};
|
|
503
|
+
var api = () => resolveReanimated();
|
|
504
|
+
var Animated = {
|
|
505
|
+
get View() {
|
|
506
|
+
return api().View;
|
|
507
|
+
},
|
|
508
|
+
createAnimatedComponent: (component) => api().createAnimatedComponent(component)
|
|
509
|
+
};
|
|
510
|
+
var FadeIn = { duration: (durationMs) => api().fadeIn(durationMs) };
|
|
511
|
+
var FadeOut = { duration: (durationMs) => api().fadeOut(durationMs) };
|
|
512
|
+
var useSharedValue = (initial) => api().useSharedValue(initial);
|
|
513
|
+
var useAnimatedStyle = (factory) => api().useAnimatedStyle(factory);
|
|
514
|
+
var useAnimatedProps = (factory) => api().useAnimatedProps(factory);
|
|
515
|
+
var useReducedMotion2 = () => api().useReducedMotion();
|
|
516
|
+
var withTiming = (toValue, config) => api().withTiming(toValue, config);
|
|
517
|
+
var withRepeat = (animation, count, reverse) => api().withRepeat(animation, count, reverse);
|
|
518
|
+
var withSequence = (...animations) => api().withSequence(...animations);
|
|
519
|
+
var withDelay = (ms, animation) => api().withDelay(ms, animation);
|
|
325
520
|
var SWIPE_MS = 700;
|
|
326
521
|
var TAP_MS = 320;
|
|
327
522
|
var SPREAD_MS = 620;
|
|
@@ -383,7 +578,7 @@ var GestureHintComponent = ({
|
|
|
383
578
|
const opacity = useSharedValue(1);
|
|
384
579
|
const pulse = useSharedValue(1);
|
|
385
580
|
const spread = useSharedValue(0);
|
|
386
|
-
const reduced =
|
|
581
|
+
const reduced = useReducedMotion2();
|
|
387
582
|
const isSwipe = type === "swipe_up" || type === "swipe_down" || type === "swipe_left" || type === "swipe_right";
|
|
388
583
|
const isSpread = type === "pinch" || type === "zoom";
|
|
389
584
|
const isTap = type === "tap" || type === "double_tap";
|
|
@@ -536,7 +731,6 @@ var styles = StyleSheet.create({
|
|
|
536
731
|
});
|
|
537
732
|
var GestureHint = React3.memo(GestureHintComponent);
|
|
538
733
|
GestureHint.displayName = "GestureHint";
|
|
539
|
-
var AnimatedBlurView = Animated.createAnimatedComponent(BlurView);
|
|
540
734
|
var BLUR_INTENSITY = 26;
|
|
541
735
|
var FADE_MS = 280;
|
|
542
736
|
var RING_PADDING = 10;
|
|
@@ -554,10 +748,14 @@ var SpotlightOverlayComponent = ({
|
|
|
554
748
|
accentTextColor
|
|
555
749
|
}) => {
|
|
556
750
|
const { height: screenH } = useWindowDimensions();
|
|
557
|
-
const reduced =
|
|
751
|
+
const reduced = useReducedMotion2();
|
|
558
752
|
const theme = useOnboardingTheme();
|
|
559
753
|
const accent = accentColor != null ? accentColor : theme.colors.primary;
|
|
560
754
|
const accentText = accentTextColor != null ? accentTextColor : theme.colors.onPrimary;
|
|
755
|
+
const AnimatedBlurView = useMemo(() => {
|
|
756
|
+
const BlurView = resolveBlurView();
|
|
757
|
+
return BlurView ? Animated.createAnimatedComponent(BlurView) : null;
|
|
758
|
+
}, []);
|
|
561
759
|
const showGesture = gesture !== "none" && gesture !== "tap" && gesture !== "double_tap";
|
|
562
760
|
const intensity = useSharedValue(0);
|
|
563
761
|
const ringScale = useSharedValue(1);
|
|
@@ -606,13 +804,23 @@ var SpotlightOverlayComponent = ({
|
|
|
606
804
|
entering: FadeIn.duration(FADE_MS),
|
|
607
805
|
exiting: FadeOut.duration(FADE_MS),
|
|
608
806
|
children: [
|
|
609
|
-
/* @__PURE__ */ jsx(
|
|
807
|
+
AnimatedBlurView ? /* @__PURE__ */ jsx(
|
|
610
808
|
AnimatedBlurView,
|
|
611
809
|
{
|
|
612
810
|
tint: "dark",
|
|
613
811
|
animatedProps: blurAnimatedProps,
|
|
614
812
|
style: StyleSheet.absoluteFill
|
|
615
813
|
}
|
|
814
|
+
) : (
|
|
815
|
+
// `expo-blur` absent → a plain dimmed scrim stands in for the frost. Same dark backdrop
|
|
816
|
+
// the tour reads against, so the ring, tooltip and gestures behave identically.
|
|
817
|
+
/* @__PURE__ */ jsx(
|
|
818
|
+
Animated.View,
|
|
819
|
+
{
|
|
820
|
+
style: [StyleSheet.absoluteFill, styles2.scrim],
|
|
821
|
+
pointerEvents: "none"
|
|
822
|
+
}
|
|
823
|
+
)
|
|
616
824
|
),
|
|
617
825
|
/* @__PURE__ */ jsx(
|
|
618
826
|
Pressable,
|
|
@@ -679,6 +887,11 @@ var styles2 = StyleSheet.create({
|
|
|
679
887
|
zIndex: 9999,
|
|
680
888
|
elevation: 9999
|
|
681
889
|
},
|
|
890
|
+
// Fallback backdrop when `expo-blur` is absent. A structural dim (not a brand token), tuned to
|
|
891
|
+
// read like the dark blur at BLUR_INTENSITY so the ring + tooltip keep the same contrast.
|
|
892
|
+
scrim: {
|
|
893
|
+
backgroundColor: "rgba(0, 0, 0, 0.55)"
|
|
894
|
+
},
|
|
682
895
|
ring: {
|
|
683
896
|
position: "absolute",
|
|
684
897
|
borderWidth: 2.5,
|