@rocapine/react-native-onboarding-ui 1.3.0 → 1.4.0
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/UI/Pages/ComposableScreen/Renderer.d.ts.map +1 -1
- package/dist/UI/Pages/ComposableScreen/Renderer.js +91 -1
- package/dist/UI/Pages/ComposableScreen/Renderer.js.map +1 -1
- package/dist/UI/Pages/ComposableScreen/types.d.ts +38 -13
- package/dist/UI/Pages/ComposableScreen/types.d.ts.map +1 -1
- package/dist/UI/Pages/ComposableScreen/types.js +41 -13
- package/dist/UI/Pages/ComposableScreen/types.js.map +1 -1
- package/package.json +17 -9
- package/src/UI/Pages/ComposableScreen/Renderer.tsx +139 -1
- package/src/UI/Pages/ComposableScreen/types.ts +84 -27
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Renderer.d.ts","sourceRoot":"","sources":["../../../../src/UI/Pages/ComposableScreen/Renderer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,wBAAwB,EAA6C,MAAM,SAAS,CAAC;AAC9F,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"Renderer.d.ts","sourceRoot":"","sources":["../../../../src/UI/Pages/ComposableScreen/Renderer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,wBAAwB,EAA6C,MAAM,SAAS,CAAC;AAC9F,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AA2C1C,KAAK,YAAY,GAAG;IAClB,IAAI,EAAE,wBAAwB,CAAC;IAC/B,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,CAAC;AAoQF,eAAO,MAAM,wBAAwB;;;CAAsE,CAAC"}
|
|
@@ -8,8 +8,28 @@ const defaultTheme_1 = require("../../Theme/defaultTheme");
|
|
|
8
8
|
const helpers_1 = require("../../Theme/helpers");
|
|
9
9
|
const ErrorBoundary_1 = require("../../ErrorBoundary");
|
|
10
10
|
const OnboardingTemplate_1 = require("../../Templates/OnboardingTemplate");
|
|
11
|
+
let LottieView = null;
|
|
12
|
+
try {
|
|
13
|
+
LottieView = require("lottie-react-native").default;
|
|
14
|
+
}
|
|
15
|
+
catch (_a) {
|
|
16
|
+
// lottie-react-native not installed - will show error if Lottie is used
|
|
17
|
+
}
|
|
18
|
+
let RiveElementComponent = null;
|
|
19
|
+
try {
|
|
20
|
+
const riveModule = require("rive-react-native");
|
|
21
|
+
const Rive = riveModule.default;
|
|
22
|
+
const { Fit, Alignment } = riveModule;
|
|
23
|
+
RiveElementComponent = ({ element, riveStyle }) => {
|
|
24
|
+
var _a;
|
|
25
|
+
return ((0, jsx_runtime_1.jsx)(Rive, { url: element.props.url, autoplay: (_a = element.props.autoplay) !== null && _a !== void 0 ? _a : true, fit: element.props.fit ? Fit[element.props.fit] : Fit.Contain, alignment: element.props.alignment ? Alignment[element.props.alignment] : Alignment.Center, artboardName: element.props.artboardName, stateMachineName: element.props.stateMachineName, style: riveStyle, onError: console.error }));
|
|
26
|
+
};
|
|
27
|
+
}
|
|
28
|
+
catch (_b) {
|
|
29
|
+
// rive-react-native not installed - will show fallback if Rive is used
|
|
30
|
+
}
|
|
11
31
|
const renderElement = (element, theme, parentType) => {
|
|
12
|
-
var _a, _b, _c, _d, _e;
|
|
32
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
13
33
|
if (element.type === "YStack" || element.type === "XStack") {
|
|
14
34
|
return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
|
|
15
35
|
flexDirection: element.type === "XStack" ? "row" : "column",
|
|
@@ -82,6 +102,48 @@ const renderElement = (element, theme, parentType) => {
|
|
|
82
102
|
paddingVertical: element.props.paddingVertical,
|
|
83
103
|
} }, element.id));
|
|
84
104
|
}
|
|
105
|
+
if (element.type === "Lottie") {
|
|
106
|
+
const wrapperStyle = {
|
|
107
|
+
width: (_f = element.props.width) !== null && _f !== void 0 ? _f : "100%",
|
|
108
|
+
height: (_g = element.props.height) !== null && _g !== void 0 ? _g : 200,
|
|
109
|
+
opacity: element.props.opacity,
|
|
110
|
+
margin: element.props.margin,
|
|
111
|
+
marginHorizontal: element.props.marginHorizontal,
|
|
112
|
+
marginVertical: element.props.marginVertical,
|
|
113
|
+
padding: element.props.padding,
|
|
114
|
+
paddingHorizontal: element.props.paddingHorizontal,
|
|
115
|
+
paddingVertical: element.props.paddingVertical,
|
|
116
|
+
borderWidth: element.props.borderWidth,
|
|
117
|
+
borderRadius: element.props.borderRadius,
|
|
118
|
+
borderColor: element.props.borderColor,
|
|
119
|
+
overflow: "hidden",
|
|
120
|
+
};
|
|
121
|
+
if (!LottieView) {
|
|
122
|
+
return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [wrapperStyle, styles.lottieFallback], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.lottieFallbackText, children: "Install lottie-react-native to render Lottie animations." }) }, element.id));
|
|
123
|
+
}
|
|
124
|
+
return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: wrapperStyle, children: (0, jsx_runtime_1.jsx)(LottieView, { source: { uri: element.props.source }, autoPlay: (_h = element.props.autoPlay) !== null && _h !== void 0 ? _h : true, loop: (_j = element.props.loop) !== null && _j !== void 0 ? _j : true, speed: element.props.speed, style: styles.fill }) }, element.id));
|
|
125
|
+
}
|
|
126
|
+
if (element.type === "Rive") {
|
|
127
|
+
const wrapperStyle = {
|
|
128
|
+
width: (_k = element.props.width) !== null && _k !== void 0 ? _k : "100%",
|
|
129
|
+
height: (_l = element.props.height) !== null && _l !== void 0 ? _l : 200,
|
|
130
|
+
opacity: element.props.opacity,
|
|
131
|
+
margin: element.props.margin,
|
|
132
|
+
marginHorizontal: element.props.marginHorizontal,
|
|
133
|
+
marginVertical: element.props.marginVertical,
|
|
134
|
+
padding: element.props.padding,
|
|
135
|
+
paddingHorizontal: element.props.paddingHorizontal,
|
|
136
|
+
paddingVertical: element.props.paddingVertical,
|
|
137
|
+
borderWidth: element.props.borderWidth,
|
|
138
|
+
borderRadius: element.props.borderRadius,
|
|
139
|
+
borderColor: element.props.borderColor,
|
|
140
|
+
overflow: "hidden",
|
|
141
|
+
};
|
|
142
|
+
if (!RiveElementComponent) {
|
|
143
|
+
return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [wrapperStyle, styles.riveFallback], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.riveFallbackText, children: "Install rive-react-native to render Rive animations." }) }, element.id));
|
|
144
|
+
}
|
|
145
|
+
return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: wrapperStyle, children: (0, jsx_runtime_1.jsx)(RiveElementComponent, { element: element, riveStyle: styles.fill }) }, element.id));
|
|
146
|
+
}
|
|
85
147
|
return null;
|
|
86
148
|
};
|
|
87
149
|
const ComposableScreenRendererBase = ({ step, onContinue, theme = defaultTheme_1.defaultTheme }) => {
|
|
@@ -96,6 +158,10 @@ const styles = react_native_1.StyleSheet.create({
|
|
|
96
158
|
container: {
|
|
97
159
|
flex: 1,
|
|
98
160
|
},
|
|
161
|
+
fill: {
|
|
162
|
+
width: "100%",
|
|
163
|
+
height: "100%",
|
|
164
|
+
},
|
|
99
165
|
scrollContent: {
|
|
100
166
|
flexGrow: 1,
|
|
101
167
|
},
|
|
@@ -110,6 +176,30 @@ const styles = react_native_1.StyleSheet.create({
|
|
|
110
176
|
minWidth: 234,
|
|
111
177
|
alignItems: "center",
|
|
112
178
|
},
|
|
179
|
+
lottieFallback: {
|
|
180
|
+
alignItems: "center",
|
|
181
|
+
justifyContent: "center",
|
|
182
|
+
backgroundColor: "#F5F5F5",
|
|
183
|
+
borderRadius: 8,
|
|
184
|
+
},
|
|
185
|
+
lottieFallbackText: {
|
|
186
|
+
fontSize: 13,
|
|
187
|
+
color: "#888",
|
|
188
|
+
textAlign: "center",
|
|
189
|
+
paddingHorizontal: 16,
|
|
190
|
+
},
|
|
191
|
+
riveFallback: {
|
|
192
|
+
alignItems: "center",
|
|
193
|
+
justifyContent: "center",
|
|
194
|
+
backgroundColor: "#F5F5F5",
|
|
195
|
+
borderRadius: 8,
|
|
196
|
+
},
|
|
197
|
+
riveFallbackText: {
|
|
198
|
+
fontSize: 13,
|
|
199
|
+
color: "#888",
|
|
200
|
+
textAlign: "center",
|
|
201
|
+
paddingHorizontal: 16,
|
|
202
|
+
},
|
|
113
203
|
});
|
|
114
204
|
exports.ComposableScreenRenderer = (0, ErrorBoundary_1.withErrorBoundary)(ComposableScreenRendererBase, "ComposableScreen");
|
|
115
205
|
//# sourceMappingURL=Renderer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Renderer.js","sourceRoot":"","sources":["../../../../src/UI/Pages/ComposableScreen/Renderer.tsx"],"names":[],"mappings":";;;;AACA,+CAA2F;AAC3F,mCAA8F;AAE9F,2DAAwD;AACxD,iDAAmD;
|
|
1
|
+
{"version":3,"file":"Renderer.js","sourceRoot":"","sources":["../../../../src/UI/Pages/ComposableScreen/Renderer.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,18 @@
|
|
|
1
1
|
import { z } from "zod";
|
|
2
|
+
type BaseBoxProps = {
|
|
3
|
+
width?: number;
|
|
4
|
+
height?: number;
|
|
5
|
+
opacity?: number;
|
|
6
|
+
margin?: number;
|
|
7
|
+
marginHorizontal?: number;
|
|
8
|
+
marginVertical?: number;
|
|
9
|
+
padding?: number;
|
|
10
|
+
paddingHorizontal?: number;
|
|
11
|
+
paddingVertical?: number;
|
|
12
|
+
borderWidth?: number;
|
|
13
|
+
borderRadius?: number;
|
|
14
|
+
borderColor?: string;
|
|
15
|
+
};
|
|
2
16
|
export type UIElement = {
|
|
3
17
|
id: string;
|
|
4
18
|
name?: string;
|
|
@@ -58,22 +72,32 @@ export type UIElement = {
|
|
|
58
72
|
id: string;
|
|
59
73
|
name?: string;
|
|
60
74
|
type: "Image";
|
|
61
|
-
props: {
|
|
75
|
+
props: BaseBoxProps & {
|
|
62
76
|
url: string;
|
|
63
|
-
width?: number;
|
|
64
|
-
height?: number;
|
|
65
77
|
aspectRatio?: number;
|
|
66
78
|
resizeMode?: "cover" | "contain" | "stretch" | "center";
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
79
|
+
};
|
|
80
|
+
} | {
|
|
81
|
+
id: string;
|
|
82
|
+
name?: string;
|
|
83
|
+
type: "Lottie";
|
|
84
|
+
props: BaseBoxProps & {
|
|
85
|
+
source: string;
|
|
86
|
+
autoPlay?: boolean;
|
|
87
|
+
loop?: boolean;
|
|
88
|
+
speed?: number;
|
|
89
|
+
};
|
|
90
|
+
} | {
|
|
91
|
+
id: string;
|
|
92
|
+
name?: string;
|
|
93
|
+
type: "Rive";
|
|
94
|
+
props: BaseBoxProps & {
|
|
95
|
+
url: string;
|
|
96
|
+
autoplay?: boolean;
|
|
97
|
+
fit?: "Contain" | "Cover" | "Fill" | "FitWidth" | "FitHeight" | "None" | "ScaleDown" | "Layout";
|
|
98
|
+
alignment?: "TopLeft" | "TopCenter" | "TopRight" | "CenterLeft" | "Center" | "CenterRight" | "BottomLeft" | "BottomCenter" | "BottomRight";
|
|
99
|
+
artboardName?: string;
|
|
100
|
+
stateMachineName?: string;
|
|
77
101
|
};
|
|
78
102
|
};
|
|
79
103
|
export declare const UIElementSchema: z.ZodType<UIElement>;
|
|
@@ -93,4 +117,5 @@ export declare const ComposableScreenStepTypeSchema: z.ZodObject<{
|
|
|
93
117
|
figmaUrl: z.ZodNullable<z.ZodString>;
|
|
94
118
|
}, z.core.$strip>;
|
|
95
119
|
export type ComposableScreenStepType = z.infer<typeof ComposableScreenStepTypeSchema>;
|
|
120
|
+
export {};
|
|
96
121
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/UI/Pages/ComposableScreen/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAGxB,MAAM,MAAM,SAAS,GACjB;IACE,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC1B,KAAK,EAAE;QACL,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,UAAU,CAAC,EAAE,YAAY,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAC;QAC9D,cAAc,CAAC,EAAE,YAAY,GAAG,QAAQ,GAAG,UAAU,GAAG,eAAe,GAAG,cAAc,CAAC;QACzF,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,QAAQ,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;QAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,QAAQ,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC;QAC3C,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,QAAQ,EAAE,SAAS,EAAE,CAAC;CACvB,GACD;IACE,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE;QACL,OAAO,EAAE,MAAM,CAAC;QAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;QACxC,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;CACH,GACD;IACE,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/UI/Pages/ComposableScreen/types.ts"],"names":[],"mappings":"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"}
|
|
@@ -3,6 +3,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.ComposableScreenStepTypeSchema = exports.ComposableScreenStepPayloadSchema = exports.UIElementSchema = void 0;
|
|
4
4
|
const zod_1 = require("zod");
|
|
5
5
|
const types_1 = require("../types");
|
|
6
|
+
const BaseBoxPropsSchema = zod_1.z.object({
|
|
7
|
+
width: zod_1.z.number().optional(),
|
|
8
|
+
height: zod_1.z.number().optional(),
|
|
9
|
+
opacity: zod_1.z.number().min(0).max(1).optional(),
|
|
10
|
+
margin: zod_1.z.number().optional(),
|
|
11
|
+
marginHorizontal: zod_1.z.number().optional(),
|
|
12
|
+
marginVertical: zod_1.z.number().optional(),
|
|
13
|
+
padding: zod_1.z.number().optional(),
|
|
14
|
+
paddingHorizontal: zod_1.z.number().optional(),
|
|
15
|
+
paddingVertical: zod_1.z.number().optional(),
|
|
16
|
+
borderWidth: zod_1.z.number().optional(),
|
|
17
|
+
borderRadius: zod_1.z.number().optional(),
|
|
18
|
+
borderColor: zod_1.z.string().optional(),
|
|
19
|
+
});
|
|
6
20
|
const StackElementPropsSchema = zod_1.z.object({
|
|
7
21
|
gap: zod_1.z.number().optional(),
|
|
8
22
|
padding: zod_1.z.number().optional(),
|
|
@@ -49,22 +63,24 @@ const TextElementPropsSchema = zod_1.z.object({
|
|
|
49
63
|
borderColor: zod_1.z.string().optional(),
|
|
50
64
|
opacity: zod_1.z.number().min(0).max(1).optional(),
|
|
51
65
|
});
|
|
52
|
-
const ImageElementPropsSchema =
|
|
66
|
+
const ImageElementPropsSchema = BaseBoxPropsSchema.extend({
|
|
53
67
|
url: zod_1.z.string(),
|
|
54
|
-
width: zod_1.z.number().optional(),
|
|
55
|
-
height: zod_1.z.number().optional(),
|
|
56
68
|
aspectRatio: zod_1.z.number().optional(),
|
|
57
69
|
resizeMode: zod_1.z.enum(["cover", "contain", "stretch", "center"]).optional(),
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
70
|
+
});
|
|
71
|
+
const LottieElementPropsSchema = BaseBoxPropsSchema.extend({
|
|
72
|
+
source: zod_1.z.string(),
|
|
73
|
+
autoPlay: zod_1.z.boolean().optional(),
|
|
74
|
+
loop: zod_1.z.boolean().optional(),
|
|
75
|
+
speed: zod_1.z.number().optional(),
|
|
76
|
+
});
|
|
77
|
+
const RiveElementPropsSchema = BaseBoxPropsSchema.extend({
|
|
78
|
+
url: zod_1.z.string(),
|
|
79
|
+
autoplay: zod_1.z.boolean().optional(),
|
|
80
|
+
fit: zod_1.z.enum(["Contain", "Cover", "Fill", "FitWidth", "FitHeight", "None", "ScaleDown", "Layout"]).optional(),
|
|
81
|
+
alignment: zod_1.z.enum(["TopLeft", "TopCenter", "TopRight", "CenterLeft", "Center", "CenterRight", "BottomLeft", "BottomCenter", "BottomRight"]).optional(),
|
|
82
|
+
artboardName: zod_1.z.string().optional(),
|
|
83
|
+
stateMachineName: zod_1.z.string().optional(),
|
|
68
84
|
});
|
|
69
85
|
exports.UIElementSchema = zod_1.z.lazy(() => zod_1.z.union([
|
|
70
86
|
zod_1.z.object({
|
|
@@ -86,6 +102,18 @@ exports.UIElementSchema = zod_1.z.lazy(() => zod_1.z.union([
|
|
|
86
102
|
type: zod_1.z.literal("Image"),
|
|
87
103
|
props: ImageElementPropsSchema,
|
|
88
104
|
}),
|
|
105
|
+
zod_1.z.object({
|
|
106
|
+
id: zod_1.z.string(),
|
|
107
|
+
name: zod_1.z.string().optional(),
|
|
108
|
+
type: zod_1.z.literal("Lottie"),
|
|
109
|
+
props: LottieElementPropsSchema,
|
|
110
|
+
}),
|
|
111
|
+
zod_1.z.object({
|
|
112
|
+
id: zod_1.z.string(),
|
|
113
|
+
name: zod_1.z.string().optional(),
|
|
114
|
+
type: zod_1.z.literal("Rive"),
|
|
115
|
+
props: RiveElementPropsSchema,
|
|
116
|
+
}),
|
|
89
117
|
]));
|
|
90
118
|
exports.ComposableScreenStepPayloadSchema = zod_1.z.object({
|
|
91
119
|
elements: zod_1.z.array(exports.UIElementSchema),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/UI/Pages/ComposableScreen/types.ts"],"names":[],"mappings":";;;AAAA,6BAAwB;AACxB,oCAA+C;
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/UI/Pages/ComposableScreen/types.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rocapine/react-native-onboarding-ui",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.4.0",
|
|
4
4
|
"description": "UI components and renderers for Rocapine Onboarding Studio - Built on top of the headless SDK",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -29,29 +29,31 @@
|
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
31
|
"@react-native-picker/picker": "^2.11.2",
|
|
32
|
-
"@shopify/react-native-skia": "
|
|
32
|
+
"@shopify/react-native-skia": "2.4.18",
|
|
33
33
|
"@types/react": "^19.0.0",
|
|
34
|
-
"expo-router": "
|
|
35
|
-
"expo-store-review": "
|
|
36
|
-
"react": "19.
|
|
37
|
-
"react-native": "0.
|
|
34
|
+
"expo-router": "~55.0.12",
|
|
35
|
+
"expo-store-review": "~55.0.13",
|
|
36
|
+
"react": "19.2.0",
|
|
37
|
+
"react-native": "0.83.4",
|
|
38
38
|
"react-native-gesture-handler": "^2.28.0",
|
|
39
39
|
"react-native-reanimated": "^4.1.2",
|
|
40
40
|
"react-native-safe-area-context": "^5.6.1",
|
|
41
|
-
"react-native-svg": "
|
|
41
|
+
"react-native-svg": "15.15.3",
|
|
42
42
|
"typescript": "^5.0.0"
|
|
43
43
|
},
|
|
44
44
|
"peerDependencies": {
|
|
45
45
|
"@react-native-picker/picker": "*",
|
|
46
|
-
"@rocapine/react-native-onboarding": "^1.
|
|
46
|
+
"@rocapine/react-native-onboarding": "^1.4.0",
|
|
47
47
|
"@shopify/react-native-skia": ">=1.0.0",
|
|
48
48
|
"@tanstack/react-query": ">=5.0.0",
|
|
49
49
|
"@types/react": "*",
|
|
50
50
|
"expo-router": ">=3.0.0",
|
|
51
51
|
"expo-store-review": "*",
|
|
52
|
+
"lottie-react-native": "*",
|
|
52
53
|
"react": "*",
|
|
53
54
|
"react-native": "*",
|
|
54
|
-
"react-native-safe-area-context": "*"
|
|
55
|
+
"react-native-safe-area-context": "*",
|
|
56
|
+
"rive-react-native": "*"
|
|
55
57
|
},
|
|
56
58
|
"peerDependenciesMeta": {
|
|
57
59
|
"@react-native-picker/picker": {
|
|
@@ -62,6 +64,12 @@
|
|
|
62
64
|
},
|
|
63
65
|
"expo-store-review": {
|
|
64
66
|
"optional": true
|
|
67
|
+
},
|
|
68
|
+
"lottie-react-native": {
|
|
69
|
+
"optional": true
|
|
70
|
+
},
|
|
71
|
+
"rive-react-native": {
|
|
72
|
+
"optional": true
|
|
65
73
|
}
|
|
66
74
|
},
|
|
67
75
|
"files": [
|
|
@@ -4,10 +4,46 @@ import { ComposableScreenStepType, ComposableScreenStepTypeSchema, UIElement } f
|
|
|
4
4
|
import { Theme } from "../../Theme/types";
|
|
5
5
|
import { defaultTheme } from "../../Theme/defaultTheme";
|
|
6
6
|
import { getTextStyle } from "../../Theme/helpers";
|
|
7
|
-
|
|
8
7
|
import { withErrorBoundary } from "../../ErrorBoundary";
|
|
9
8
|
import { OnboardingTemplate } from "../../Templates/OnboardingTemplate";
|
|
10
9
|
|
|
10
|
+
let LottieView: React.ComponentType<{
|
|
11
|
+
source: string | object;
|
|
12
|
+
autoPlay?: boolean;
|
|
13
|
+
loop?: boolean;
|
|
14
|
+
speed?: number;
|
|
15
|
+
style?: object;
|
|
16
|
+
}> | null = null;
|
|
17
|
+
try {
|
|
18
|
+
LottieView = require("lottie-react-native").default;
|
|
19
|
+
} catch {
|
|
20
|
+
// lottie-react-native not installed - will show error if Lottie is used
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
type RiveUIElement = Extract<UIElement, { type: "Rive" }>;
|
|
24
|
+
let RiveElementComponent: React.ComponentType<{ element: RiveUIElement; riveStyle: object }> | null = null;
|
|
25
|
+
try {
|
|
26
|
+
const riveModule = require("rive-react-native");
|
|
27
|
+
const Rive = riveModule.default;
|
|
28
|
+
const { Fit, Alignment } = riveModule;
|
|
29
|
+
RiveElementComponent = ({ element, riveStyle }: { element: RiveUIElement; riveStyle: object }) => {
|
|
30
|
+
return (
|
|
31
|
+
<Rive
|
|
32
|
+
url={element.props.url}
|
|
33
|
+
autoplay={element.props.autoplay ?? true}
|
|
34
|
+
fit={element.props.fit ? Fit[element.props.fit] : Fit.Contain}
|
|
35
|
+
alignment={element.props.alignment ? Alignment[element.props.alignment] : Alignment.Center}
|
|
36
|
+
artboardName={element.props.artboardName}
|
|
37
|
+
stateMachineName={element.props.stateMachineName}
|
|
38
|
+
style={riveStyle}
|
|
39
|
+
onError={console.error}
|
|
40
|
+
/>
|
|
41
|
+
);
|
|
42
|
+
};
|
|
43
|
+
} catch {
|
|
44
|
+
// rive-react-native not installed - will show fallback if Rive is used
|
|
45
|
+
}
|
|
46
|
+
|
|
11
47
|
type ContentProps = {
|
|
12
48
|
step: ComposableScreenStepType;
|
|
13
49
|
onContinue: () => void;
|
|
@@ -111,6 +147,80 @@ const renderElement = (element: UIElement, theme: Theme, parentType?: "XStack" |
|
|
|
111
147
|
);
|
|
112
148
|
}
|
|
113
149
|
|
|
150
|
+
if (element.type === "Lottie") {
|
|
151
|
+
const wrapperStyle = {
|
|
152
|
+
width: element.props.width ?? ("100%" as `${number}%`),
|
|
153
|
+
height: element.props.height ?? 200,
|
|
154
|
+
opacity: element.props.opacity,
|
|
155
|
+
margin: element.props.margin,
|
|
156
|
+
marginHorizontal: element.props.marginHorizontal,
|
|
157
|
+
marginVertical: element.props.marginVertical,
|
|
158
|
+
padding: element.props.padding,
|
|
159
|
+
paddingHorizontal: element.props.paddingHorizontal,
|
|
160
|
+
paddingVertical: element.props.paddingVertical,
|
|
161
|
+
borderWidth: element.props.borderWidth,
|
|
162
|
+
borderRadius: element.props.borderRadius,
|
|
163
|
+
borderColor: element.props.borderColor,
|
|
164
|
+
overflow: "hidden" as const,
|
|
165
|
+
};
|
|
166
|
+
|
|
167
|
+
if (!LottieView) {
|
|
168
|
+
return (
|
|
169
|
+
<View key={element.id} style={[wrapperStyle, styles.lottieFallback]}>
|
|
170
|
+
<Text style={styles.lottieFallbackText}>
|
|
171
|
+
Install lottie-react-native to render Lottie animations.
|
|
172
|
+
</Text>
|
|
173
|
+
</View>
|
|
174
|
+
);
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
return (
|
|
178
|
+
<View key={element.id} style={wrapperStyle}>
|
|
179
|
+
<LottieView
|
|
180
|
+
source={{ uri: element.props.source }}
|
|
181
|
+
autoPlay={element.props.autoPlay ?? true}
|
|
182
|
+
loop={element.props.loop ?? true}
|
|
183
|
+
speed={element.props.speed}
|
|
184
|
+
style={styles.fill}
|
|
185
|
+
/>
|
|
186
|
+
</View>
|
|
187
|
+
);
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
if (element.type === "Rive") {
|
|
191
|
+
const wrapperStyle = {
|
|
192
|
+
width: element.props.width ?? ("100%" as `${number}%`),
|
|
193
|
+
height: element.props.height ?? 200,
|
|
194
|
+
opacity: element.props.opacity,
|
|
195
|
+
margin: element.props.margin,
|
|
196
|
+
marginHorizontal: element.props.marginHorizontal,
|
|
197
|
+
marginVertical: element.props.marginVertical,
|
|
198
|
+
padding: element.props.padding,
|
|
199
|
+
paddingHorizontal: element.props.paddingHorizontal,
|
|
200
|
+
paddingVertical: element.props.paddingVertical,
|
|
201
|
+
borderWidth: element.props.borderWidth,
|
|
202
|
+
borderRadius: element.props.borderRadius,
|
|
203
|
+
borderColor: element.props.borderColor,
|
|
204
|
+
overflow: "hidden" as const,
|
|
205
|
+
};
|
|
206
|
+
|
|
207
|
+
if (!RiveElementComponent) {
|
|
208
|
+
return (
|
|
209
|
+
<View key={element.id} style={[wrapperStyle, styles.riveFallback]}>
|
|
210
|
+
<Text style={styles.riveFallbackText}>
|
|
211
|
+
Install rive-react-native to render Rive animations.
|
|
212
|
+
</Text>
|
|
213
|
+
</View>
|
|
214
|
+
);
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
return (
|
|
218
|
+
<View key={element.id} style={wrapperStyle}>
|
|
219
|
+
<RiveElementComponent element={element} riveStyle={styles.fill} />
|
|
220
|
+
</View>
|
|
221
|
+
);
|
|
222
|
+
}
|
|
223
|
+
|
|
114
224
|
return null;
|
|
115
225
|
};
|
|
116
226
|
|
|
@@ -154,6 +264,10 @@ const styles = StyleSheet.create({
|
|
|
154
264
|
container: {
|
|
155
265
|
flex: 1,
|
|
156
266
|
},
|
|
267
|
+
fill: {
|
|
268
|
+
width: "100%",
|
|
269
|
+
height: "100%",
|
|
270
|
+
},
|
|
157
271
|
scrollContent: {
|
|
158
272
|
flexGrow: 1,
|
|
159
273
|
},
|
|
@@ -168,6 +282,30 @@ const styles = StyleSheet.create({
|
|
|
168
282
|
minWidth: 234,
|
|
169
283
|
alignItems: "center",
|
|
170
284
|
},
|
|
285
|
+
lottieFallback: {
|
|
286
|
+
alignItems: "center",
|
|
287
|
+
justifyContent: "center",
|
|
288
|
+
backgroundColor: "#F5F5F5",
|
|
289
|
+
borderRadius: 8,
|
|
290
|
+
},
|
|
291
|
+
lottieFallbackText: {
|
|
292
|
+
fontSize: 13,
|
|
293
|
+
color: "#888",
|
|
294
|
+
textAlign: "center",
|
|
295
|
+
paddingHorizontal: 16,
|
|
296
|
+
},
|
|
297
|
+
riveFallback: {
|
|
298
|
+
alignItems: "center",
|
|
299
|
+
justifyContent: "center",
|
|
300
|
+
backgroundColor: "#F5F5F5",
|
|
301
|
+
borderRadius: 8,
|
|
302
|
+
},
|
|
303
|
+
riveFallbackText: {
|
|
304
|
+
fontSize: 13,
|
|
305
|
+
color: "#888",
|
|
306
|
+
textAlign: "center",
|
|
307
|
+
paddingHorizontal: 16,
|
|
308
|
+
},
|
|
171
309
|
});
|
|
172
310
|
|
|
173
311
|
export const ComposableScreenRenderer = withErrorBoundary(ComposableScreenRendererBase, "ComposableScreen");
|
|
@@ -1,6 +1,21 @@
|
|
|
1
1
|
import { z } from "zod";
|
|
2
2
|
import { CustomPayloadSchema } from "../types";
|
|
3
3
|
|
|
4
|
+
type BaseBoxProps = {
|
|
5
|
+
width?: number;
|
|
6
|
+
height?: number;
|
|
7
|
+
opacity?: number;
|
|
8
|
+
margin?: number;
|
|
9
|
+
marginHorizontal?: number;
|
|
10
|
+
marginVertical?: number;
|
|
11
|
+
padding?: number;
|
|
12
|
+
paddingHorizontal?: number;
|
|
13
|
+
paddingVertical?: number;
|
|
14
|
+
borderWidth?: number;
|
|
15
|
+
borderRadius?: number;
|
|
16
|
+
borderColor?: string;
|
|
17
|
+
};
|
|
18
|
+
|
|
4
19
|
export type UIElement =
|
|
5
20
|
| {
|
|
6
21
|
id: string;
|
|
@@ -63,25 +78,52 @@ export type UIElement =
|
|
|
63
78
|
id: string;
|
|
64
79
|
name?: string;
|
|
65
80
|
type: "Image";
|
|
66
|
-
props: {
|
|
81
|
+
props: BaseBoxProps & {
|
|
67
82
|
url: string;
|
|
68
|
-
width?: number;
|
|
69
|
-
height?: number;
|
|
70
83
|
aspectRatio?: number;
|
|
71
84
|
resizeMode?: "cover" | "contain" | "stretch" | "center";
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
85
|
+
};
|
|
86
|
+
}
|
|
87
|
+
| {
|
|
88
|
+
id: string;
|
|
89
|
+
name?: string;
|
|
90
|
+
type: "Lottie";
|
|
91
|
+
props: BaseBoxProps & {
|
|
92
|
+
source: string;
|
|
93
|
+
autoPlay?: boolean;
|
|
94
|
+
loop?: boolean;
|
|
95
|
+
speed?: number;
|
|
96
|
+
};
|
|
97
|
+
}
|
|
98
|
+
| {
|
|
99
|
+
id: string;
|
|
100
|
+
name?: string;
|
|
101
|
+
type: "Rive";
|
|
102
|
+
props: BaseBoxProps & {
|
|
103
|
+
url: string;
|
|
104
|
+
autoplay?: boolean;
|
|
105
|
+
fit?: "Contain" | "Cover" | "Fill" | "FitWidth" | "FitHeight" | "None" | "ScaleDown" | "Layout";
|
|
106
|
+
alignment?: "TopLeft" | "TopCenter" | "TopRight" | "CenterLeft" | "Center" | "CenterRight" | "BottomLeft" | "BottomCenter" | "BottomRight";
|
|
107
|
+
artboardName?: string;
|
|
108
|
+
stateMachineName?: string;
|
|
82
109
|
};
|
|
83
110
|
};
|
|
84
111
|
|
|
112
|
+
const BaseBoxPropsSchema = z.object({
|
|
113
|
+
width: z.number().optional(),
|
|
114
|
+
height: z.number().optional(),
|
|
115
|
+
opacity: z.number().min(0).max(1).optional(),
|
|
116
|
+
margin: z.number().optional(),
|
|
117
|
+
marginHorizontal: z.number().optional(),
|
|
118
|
+
marginVertical: z.number().optional(),
|
|
119
|
+
padding: z.number().optional(),
|
|
120
|
+
paddingHorizontal: z.number().optional(),
|
|
121
|
+
paddingVertical: z.number().optional(),
|
|
122
|
+
borderWidth: z.number().optional(),
|
|
123
|
+
borderRadius: z.number().optional(),
|
|
124
|
+
borderColor: z.string().optional(),
|
|
125
|
+
});
|
|
126
|
+
|
|
85
127
|
const StackElementPropsSchema = z.object({
|
|
86
128
|
gap: z.number().optional(),
|
|
87
129
|
padding: z.number().optional(),
|
|
@@ -130,22 +172,26 @@ const TextElementPropsSchema = z.object({
|
|
|
130
172
|
opacity: z.number().min(0).max(1).optional(),
|
|
131
173
|
});
|
|
132
174
|
|
|
133
|
-
const ImageElementPropsSchema =
|
|
175
|
+
const ImageElementPropsSchema = BaseBoxPropsSchema.extend({
|
|
134
176
|
url: z.string(),
|
|
135
|
-
width: z.number().optional(),
|
|
136
|
-
height: z.number().optional(),
|
|
137
177
|
aspectRatio: z.number().optional(),
|
|
138
178
|
resizeMode: z.enum(["cover", "contain", "stretch", "center"]).optional(),
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
179
|
+
});
|
|
180
|
+
|
|
181
|
+
const LottieElementPropsSchema = BaseBoxPropsSchema.extend({
|
|
182
|
+
source: z.string(),
|
|
183
|
+
autoPlay: z.boolean().optional(),
|
|
184
|
+
loop: z.boolean().optional(),
|
|
185
|
+
speed: z.number().optional(),
|
|
186
|
+
});
|
|
187
|
+
|
|
188
|
+
const RiveElementPropsSchema = BaseBoxPropsSchema.extend({
|
|
189
|
+
url: z.string(),
|
|
190
|
+
autoplay: z.boolean().optional(),
|
|
191
|
+
fit: z.enum(["Contain", "Cover", "Fill", "FitWidth", "FitHeight", "None", "ScaleDown", "Layout"]).optional(),
|
|
192
|
+
alignment: z.enum(["TopLeft", "TopCenter", "TopRight", "CenterLeft", "Center", "CenterRight", "BottomLeft", "BottomCenter", "BottomRight"]).optional(),
|
|
193
|
+
artboardName: z.string().optional(),
|
|
194
|
+
stateMachineName: z.string().optional(),
|
|
149
195
|
});
|
|
150
196
|
|
|
151
197
|
export const UIElementSchema: z.ZodType<UIElement> = z.lazy(() =>
|
|
@@ -169,10 +215,21 @@ export const UIElementSchema: z.ZodType<UIElement> = z.lazy(() =>
|
|
|
169
215
|
type: z.literal("Image"),
|
|
170
216
|
props: ImageElementPropsSchema,
|
|
171
217
|
}),
|
|
218
|
+
z.object({
|
|
219
|
+
id: z.string(),
|
|
220
|
+
name: z.string().optional(),
|
|
221
|
+
type: z.literal("Lottie"),
|
|
222
|
+
props: LottieElementPropsSchema,
|
|
223
|
+
}),
|
|
224
|
+
z.object({
|
|
225
|
+
id: z.string(),
|
|
226
|
+
name: z.string().optional(),
|
|
227
|
+
type: z.literal("Rive"),
|
|
228
|
+
props: RiveElementPropsSchema,
|
|
229
|
+
}),
|
|
172
230
|
])
|
|
173
231
|
);
|
|
174
232
|
|
|
175
|
-
|
|
176
233
|
export const ComposableScreenStepPayloadSchema = z.object({
|
|
177
234
|
elements: z.array(UIElementSchema),
|
|
178
235
|
});
|