@rocapine/react-native-onboarding 1.1.6 → 1.2.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.
Files changed (10) hide show
  1. package/README.md +35 -17
  2. package/dist/steps/ComposableScreen/types.d.ts +75 -0
  3. package/dist/steps/ComposableScreen/types.d.ts.map +1 -0
  4. package/dist/steps/ComposableScreen/types.js +80 -0
  5. package/dist/steps/ComposableScreen/types.js.map +1 -0
  6. package/dist/steps/types.d.ts +2 -1
  7. package/dist/steps/types.d.ts.map +1 -1
  8. package/package.json +1 -1
  9. package/src/steps/ComposableScreen/types.ts +144 -0
  10. package/src/steps/types.ts +2 -0
package/README.md CHANGED
@@ -2,19 +2,22 @@
2
2
 
3
3
  **A CMS-driven onboarding system for React Native mobile apps.**
4
4
 
5
- Build beautiful, customizable onboarding flows that update instantly without app releases.
5
+ Build beautiful, customizable onboarding flows that update instantly without app
6
+ releases.
6
7
 
7
8
  ---
8
9
 
9
10
  ## ✨ Features
10
11
 
11
- - 🎨 **Pre-built Components** - Ready-to-use screens (ratings, pickers, carousels, media content, and more)
12
+ - 🎨 **Pre-built Components** - Ready-to-use screens (ratings, pickers,
13
+ carousels, media content, and more)
12
14
  - 🔄 **CMS-Driven** - Update onboarding flows remotely without app releases
13
15
  - 📱 **React Native** - Works with Expo and bare React Native projects
14
16
  - 🎯 **Type-Safe** - Full TypeScript support with runtime validation
15
17
  - 💾 **Offline Support** - Built-in caching with AsyncStorage
16
18
  - 🎭 **Themeable** - Customizable colors, typography, and styling
17
- - 🔧 **Extensible** - Three levels of customization from theme tokens to complete renderer overrides
19
+ - 🔧 **Extensible** - Three levels of customization from theme tokens to
20
+ complete renderer overrides
18
21
 
19
22
  ---
20
23
 
@@ -58,8 +61,8 @@ export default function RootLayout() {
58
61
 
59
62
  ```typescript
60
63
  import {
61
- useOnboardingQuestions,
62
64
  OnboardingPage,
65
+ useOnboardingQuestions,
63
66
  } from "@rocapine/react-native-onboarding";
64
67
 
65
68
  export default function OnboardingScreen() {
@@ -87,29 +90,38 @@ That's it! 🎉
87
90
 
88
91
  Complete documentation for using the SDK in your app:
89
92
 
90
- - **[Getting Started](./docs/getting-started.mdx)** - Installation, setup, and your first onboarding flow
91
- - **[Core Concepts](./docs/core-concepts.mdx)** - How the SDK works, caching, progress tracking
93
+ - **[Getting Started](./docs/getting-started.mdx)** - Installation, setup, and
94
+ your first onboarding flow
95
+ - **[Core Concepts](./docs/core-concepts.mdx)** - How the SDK works, caching,
96
+ progress tracking
92
97
  - **[API Reference](./docs/api-reference.mdx)** - Complete API documentation
93
- - **[Page Types](./docs/page-types.mdx)** - Available page types and their features
98
+ - **[Page Types](./docs/page-types.mdx)** - Available page types and their
99
+ features
94
100
 
95
101
  ### Customization
96
102
 
97
103
  Learn how to customize your onboarding experience:
98
104
 
99
- - **[Customization Overview](./docs/customization/intro.mdx)** - Choose your customization level
100
- - **[Level 1: Theming](./docs/customization/theming.mdx)** - Colors, typography, and semantic styles
101
- - **[Level 2: Custom Components](./docs/customization/custom-components.mdx)** - Replace specific UI components
102
- - **[Level 3: Custom Renderers](./docs/customization/custom-renderers.mdx)** - Complete screen control
105
+ - **[Customization Overview](./docs/customization/intro.mdx)** - Choose your
106
+ customization level
107
+ - **[Level 1: Theming](./docs/customization/theming.mdx)** - Colors, typography,
108
+ and semantic styles
109
+ - **[Level 2: Custom Components](./docs/customization/custom-components.mdx)** -
110
+ Replace specific UI components
111
+ - **[Level 3: Custom Renderers](./docs/customization/custom-renderers.mdx)** -
112
+ Complete screen control
103
113
 
104
114
  ### Support
105
115
 
106
- - **[Troubleshooting](./docs/troubleshooting.mdx)** - Common issues and solutions
116
+ - **[Troubleshooting](./docs/troubleshooting.mdx)** - Common issues and
117
+ solutions
107
118
 
108
119
  ### For Contributors
109
120
 
110
121
  Want to contribute to the SDK?
111
122
 
112
- - **[Contributing Guide](./CONTRIBUTING.md)** - Development setup, architecture, and contribution guidelines
123
+ - **[Contributing Guide](./CONTRIBUTING.md)** - Development setup, architecture,
124
+ and contribution guidelines
113
125
 
114
126
  ---
115
127
 
@@ -125,7 +137,7 @@ Customize colors, typography, and semantic styles:
125
137
  colors: { primary: "#FF5733" },
126
138
  typography: { fontFamily: { title: "CustomFont-Bold" } },
127
139
  }}
128
- />
140
+ />;
129
141
  ```
130
142
 
131
143
  ### Level 2: Custom Components
@@ -138,7 +150,7 @@ Replace specific UI components:
138
150
  QuestionAnswerButton: CustomButton,
139
151
  QuestionAnswersList: AnimatedList,
140
152
  }}
141
- />
153
+ />;
142
154
  ```
143
155
 
144
156
  ### Level 3: Custom Renderers
@@ -168,6 +180,10 @@ export default function OnboardingScreen() {
168
180
  - **Loader** - Sequential progress animation with optional carousel
169
181
  - **Ratings** - App store rating prompts with social proof
170
182
  - **Commitment** - User commitment and agreement screens
183
+ - **ComposableScreen** _(under development)_ - Declarative layout system driven
184
+ entirely from the CMS. Build arbitrary screens by composing `YStack`,
185
+ `XStack`, and `Text` elements with full layout, spacing, border, and
186
+ typography control — no custom renderer needed.
171
187
 
172
188
  [Learn more about page types →](./docs/page-types.mdx)
173
189
 
@@ -199,7 +215,8 @@ npm start
199
215
 
200
216
  ## 🤝 Contributing
201
217
 
202
- We welcome contributions! Please see our [Contributing Guide](./CONTRIBUTING.md) for details.
218
+ We welcome contributions! Please see our [Contributing Guide](./CONTRIBUTING.md)
219
+ for details.
203
220
 
204
221
  ### Publishing:
205
222
 
@@ -214,7 +231,8 @@ We welcome contributions! Please see our [Contributing Guide](./CONTRIBUTING.md)
214
231
  ## 📧 Support
215
232
 
216
233
  - **Email:** support@rocapine.com
217
- - **Issues:** [GitHub Issues](https://github.com/rocapine/react-native-onboarding-studio/issues)
234
+ - **Issues:**
235
+ [GitHub Issues](https://github.com/rocapine/react-native-onboarding-studio/issues)
218
236
  - **Documentation:** [Rocapine Docs](https://docs.rocapine.com)
219
237
 
220
238
  ---
package/dist/steps/ComposableScreen/types.d.ts ADDED
@@ -0,0 +1,75 @@
1
+ import { z } from "zod";
2
+ type UIElement = {
3
+ id: string;
4
+ name?: string;
5
+ type: "YStack" | "XStack";
6
+ props: {
7
+ gap?: number;
8
+ padding?: number;
9
+ paddingHorizontal?: number;
10
+ paddingVertical?: number;
11
+ margin?: number;
12
+ marginHorizontal?: number;
13
+ marginVertical?: number;
14
+ flex?: number;
15
+ width?: number;
16
+ height?: number;
17
+ minWidth?: number;
18
+ maxWidth?: number;
19
+ minHeight?: number;
20
+ maxHeight?: number;
21
+ alignItems?: "flex-start" | "center" | "flex-end" | "stretch";
22
+ justifyContent?: "flex-start" | "center" | "flex-end" | "space-between" | "space-around";
23
+ backgroundColor?: string;
24
+ flexWrap?: "wrap" | "nowrap";
25
+ flexShrink?: number;
26
+ borderWidth?: number;
27
+ borderRadius?: number;
28
+ borderColor?: string;
29
+ overflow?: "hidden" | "visible" | "scroll";
30
+ opacity?: number;
31
+ };
32
+ children: UIElement[];
33
+ } | {
34
+ id: string;
35
+ name?: string;
36
+ type: "Text";
37
+ props: {
38
+ content: string;
39
+ fontSize?: number;
40
+ fontWeight?: string;
41
+ color?: string;
42
+ textAlign?: "left" | "center" | "right";
43
+ letterSpacing?: number;
44
+ lineHeight?: number;
45
+ backgroundColor?: string;
46
+ padding?: number;
47
+ paddingHorizontal?: number;
48
+ paddingVertical?: number;
49
+ margin?: number;
50
+ marginHorizontal?: number;
51
+ marginVertical?: number;
52
+ borderWidth?: number;
53
+ borderRadius?: number;
54
+ borderColor?: string;
55
+ opacity?: number;
56
+ };
57
+ };
58
+ export declare const ComposableScreenStepPayloadSchema: z.ZodObject<{
59
+ elements: z.ZodArray<z.ZodType<UIElement, unknown, z.core.$ZodTypeInternals<UIElement, unknown>>>;
60
+ }, z.core.$strip>;
61
+ export declare const ComposableScreenStepTypeSchema: z.ZodObject<{
62
+ id: z.ZodString;
63
+ type: z.ZodLiteral<"ComposableScreen">;
64
+ name: z.ZodString;
65
+ displayProgressHeader: z.ZodBoolean;
66
+ payload: z.ZodObject<{
67
+ elements: z.ZodArray<z.ZodType<UIElement, unknown, z.core.$ZodTypeInternals<UIElement, unknown>>>;
68
+ }, z.core.$strip>;
69
+ customPayload: z.ZodOptional<z.ZodNullable<z.ZodRecord<z.ZodString, z.ZodAny>>>;
70
+ continueButtonLabel: z.ZodDefault<z.ZodOptional<z.ZodString>>;
71
+ figmaUrl: z.ZodNullable<z.ZodString>;
72
+ }, z.core.$strip>;
73
+ export type ComposableScreenStepType = z.infer<typeof ComposableScreenStepTypeSchema>;
74
+ export {};
75
+ //# sourceMappingURL=types.d.ts.map
package/dist/steps/ComposableScreen/types.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/steps/ComposableScreen/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAGxB,KAAK,SAAS,GACV;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,CAAC;AAoEN,eAAO,MAAM,iCAAiC;;iBAE5C,CAAC;AAEH,eAAO,MAAM,8BAA8B;;;;;;;;;;;iBASzC,CAAC;AAEH,MAAM,MAAM,wBAAwB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,8BAA8B,CAAC,CAAC"}
package/dist/steps/ComposableScreen/types.js ADDED
@@ -0,0 +1,80 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.ComposableScreenStepTypeSchema = exports.ComposableScreenStepPayloadSchema = void 0;
4
+ const zod_1 = require("zod");
5
+ const common_types_1 = require("../common.types");
6
+ const StackElementPropsSchema = zod_1.z.object({
7
+ gap: zod_1.z.number().optional(),
8
+ padding: zod_1.z.number().optional(),
9
+ paddingHorizontal: zod_1.z.number().optional(),
10
+ paddingVertical: zod_1.z.number().optional(),
11
+ margin: zod_1.z.number().optional(),
12
+ marginHorizontal: zod_1.z.number().optional(),
13
+ marginVertical: zod_1.z.number().optional(),
14
+ flex: zod_1.z.number().optional(),
15
+ width: zod_1.z.number().optional(),
16
+ height: zod_1.z.number().optional(),
17
+ minWidth: zod_1.z.number().optional(),
18
+ maxWidth: zod_1.z.number().optional(),
19
+ minHeight: zod_1.z.number().optional(),
20
+ maxHeight: zod_1.z.number().optional(),
21
+ alignItems: zod_1.z.enum(["flex-start", "center", "flex-end", "stretch"]).optional(),
22
+ justifyContent: zod_1.z.enum(["flex-start", "center", "flex-end", "space-between", "space-around"]).optional(),
23
+ backgroundColor: zod_1.z.string().optional(),
24
+ flexWrap: zod_1.z.enum(["wrap", "nowrap"]).optional(),
25
+ flexShrink: zod_1.z.number().optional(),
26
+ borderWidth: zod_1.z.number().optional(),
27
+ borderRadius: zod_1.z.number().optional(),
28
+ borderColor: zod_1.z.string().optional(),
29
+ overflow: zod_1.z.enum(["hidden", "visible", "scroll"]).optional(),
30
+ opacity: zod_1.z.number().min(0).max(1).optional(),
31
+ });
32
+ const TextElementPropsSchema = zod_1.z.object({
33
+ content: zod_1.z.string(),
34
+ fontSize: zod_1.z.number().optional(),
35
+ fontWeight: zod_1.z.string().optional(),
36
+ color: zod_1.z.string().optional(),
37
+ textAlign: zod_1.z.enum(["left", "center", "right"]).optional(),
38
+ letterSpacing: zod_1.z.number().optional(),
39
+ lineHeight: zod_1.z.number().optional(),
40
+ backgroundColor: zod_1.z.string().optional(),
41
+ padding: zod_1.z.number().optional(),
42
+ paddingHorizontal: zod_1.z.number().optional(),
43
+ paddingVertical: zod_1.z.number().optional(),
44
+ margin: zod_1.z.number().optional(),
45
+ marginHorizontal: zod_1.z.number().optional(),
46
+ marginVertical: zod_1.z.number().optional(),
47
+ borderWidth: zod_1.z.number().optional(),
48
+ borderRadius: zod_1.z.number().optional(),
49
+ borderColor: zod_1.z.string().optional(),
50
+ opacity: zod_1.z.number().min(0).max(1).optional(),
51
+ });
52
+ const UIElementSchema = zod_1.z.lazy(() => zod_1.z.union([
53
+ zod_1.z.object({
54
+ id: zod_1.z.string(),
55
+ name: zod_1.z.string().optional(),
56
+ type: zod_1.z.union([zod_1.z.literal("YStack"), zod_1.z.literal("XStack")]),
57
+ props: StackElementPropsSchema,
58
+ children: zod_1.z.array(UIElementSchema),
59
+ }),
60
+ zod_1.z.object({
61
+ id: zod_1.z.string(),
62
+ name: zod_1.z.string().optional(),
63
+ type: zod_1.z.literal("Text"),
64
+ props: TextElementPropsSchema,
65
+ }),
66
+ ]));
67
+ exports.ComposableScreenStepPayloadSchema = zod_1.z.object({
68
+ elements: zod_1.z.array(UIElementSchema),
69
+ });
70
+ exports.ComposableScreenStepTypeSchema = zod_1.z.object({
71
+ id: zod_1.z.string(),
72
+ type: zod_1.z.literal("ComposableScreen"),
73
+ name: zod_1.z.string(),
74
+ displayProgressHeader: zod_1.z.boolean(),
75
+ payload: exports.ComposableScreenStepPayloadSchema,
76
+ customPayload: common_types_1.CustomPayloadSchema,
77
+ continueButtonLabel: zod_1.z.string().optional().default("Continue"),
78
+ figmaUrl: zod_1.z.string().nullable(),
79
+ });
80
+ //# sourceMappingURL=types.js.map
package/dist/steps/ComposableScreen/types.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/steps/ComposableScreen/types.ts"],"names":[],"mappings":"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"}
package/dist/steps/types.d.ts CHANGED
@@ -2,8 +2,9 @@ import { CarouselStepType } from "./Carousel/types";
2
2
  import { CommitmentStepType } from "./Commitment/types";
3
3
  import { LoaderStepType } from "./Loader/types";
4
4
  import { MediaContentStepType } from "./MediaContent/types";
5
+ import { ComposableScreenStepType } from "./ComposableScreen/types";
5
6
  import { PickerStepType } from "./Picker/types";
6
7
  import { QuestionStepType } from "./Question/types";
7
8
  import { RatingsStepType } from "./Ratings/types";
8
- export type OnboardingStepType = CarouselStepType | CommitmentStepType | LoaderStepType | MediaContentStepType | PickerStepType | QuestionStepType | RatingsStepType;
9
+ export type OnboardingStepType = CarouselStepType | CommitmentStepType | LoaderStepType | MediaContentStepType | ComposableScreenStepType | PickerStepType | QuestionStepType | RatingsStepType;
9
10
  //# sourceMappingURL=types.d.ts.map
package/dist/steps/types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/steps/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,MAAM,kBAAkB,GAC1B,gBAAgB,GAChB,kBAAkB,GAClB,cAAc,GACd,oBAAoB,GACpB,cAAc,GACd,gBAAgB,GAChB,eAAe,CAAC"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/steps/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EAAE,wBAAwB,EAAE,MAAM,0BAA0B,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,MAAM,kBAAkB,GAC1B,gBAAgB,GAChB,kBAAkB,GAClB,cAAc,GACd,oBAAoB,GACpB,wBAAwB,GACxB,cAAc,GACd,gBAAgB,GAChB,eAAe,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rocapine/react-native-onboarding",
3
- "version": "1.1.6",
3
+ "version": "1.2.0",
4
4
  "description": "Headless React Native SDK for Rocapine Onboarding Studio - Data fetching, state management, and hooks",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
package/src/steps/ComposableScreen/types.ts ADDED
@@ -0,0 +1,144 @@
1
+ import { z } from "zod";
2
+ import { CustomPayloadSchema } from "../common.types";
3
+
4
+ type UIElement =
5
+ | {
6
+ id: string;
7
+ name?: string;
8
+ type: "YStack" | "XStack";
9
+ props: {
10
+ gap?: number;
11
+ padding?: number;
12
+ paddingHorizontal?: number;
13
+ paddingVertical?: number;
14
+ margin?: number;
15
+ marginHorizontal?: number;
16
+ marginVertical?: number;
17
+ flex?: number;
18
+ width?: number;
19
+ height?: number;
20
+ minWidth?: number;
21
+ maxWidth?: number;
22
+ minHeight?: number;
23
+ maxHeight?: number;
24
+ alignItems?: "flex-start" | "center" | "flex-end" | "stretch";
25
+ justifyContent?: "flex-start" | "center" | "flex-end" | "space-between" | "space-around";
26
+ backgroundColor?: string;
27
+ flexWrap?: "wrap" | "nowrap";
28
+ flexShrink?: number;
29
+ borderWidth?: number;
30
+ borderRadius?: number;
31
+ borderColor?: string;
32
+ overflow?: "hidden" | "visible" | "scroll";
33
+ opacity?: number;
34
+ };
35
+ children: UIElement[];
36
+ }
37
+ | {
38
+ id: string;
39
+ name?: string;
40
+ type: "Text";
41
+ props: {
42
+ content: string;
43
+ fontSize?: number;
44
+ fontWeight?: string;
45
+ color?: string;
46
+ textAlign?: "left" | "center" | "right";
47
+ letterSpacing?: number;
48
+ lineHeight?: number;
49
+ backgroundColor?: string;
50
+ padding?: number;
51
+ paddingHorizontal?: number;
52
+ paddingVertical?: number;
53
+ margin?: number;
54
+ marginHorizontal?: number;
55
+ marginVertical?: number;
56
+ borderWidth?: number;
57
+ borderRadius?: number;
58
+ borderColor?: string;
59
+ opacity?: number;
60
+ };
61
+ };
62
+
63
+ const StackElementPropsSchema = z.object({
64
+ gap: z.number().optional(),
65
+ padding: z.number().optional(),
66
+ paddingHorizontal: z.number().optional(),
67
+ paddingVertical: z.number().optional(),
68
+ margin: z.number().optional(),
69
+ marginHorizontal: z.number().optional(),
70
+ marginVertical: z.number().optional(),
71
+ flex: z.number().optional(),
72
+ width: z.number().optional(),
73
+ height: z.number().optional(),
74
+ minWidth: z.number().optional(),
75
+ maxWidth: z.number().optional(),
76
+ minHeight: z.number().optional(),
77
+ maxHeight: z.number().optional(),
78
+ alignItems: z.enum(["flex-start", "center", "flex-end", "stretch"]).optional(),
79
+ justifyContent: z.enum(["flex-start", "center", "flex-end", "space-between", "space-around"]).optional(),
80
+ backgroundColor: z.string().optional(),
81
+ flexWrap: z.enum(["wrap", "nowrap"]).optional(),
82
+ flexShrink: z.number().optional(),
83
+ borderWidth: z.number().optional(),
84
+ borderRadius: z.number().optional(),
85
+ borderColor: z.string().optional(),
86
+ overflow: z.enum(["hidden", "visible", "scroll"]).optional(),
87
+ opacity: z.number().min(0).max(1).optional(),
88
+ });
89
+
90
+ const TextElementPropsSchema = z.object({
91
+ content: z.string(),
92
+ fontSize: z.number().optional(),
93
+ fontWeight: z.string().optional(),
94
+ color: z.string().optional(),
95
+ textAlign: z.enum(["left", "center", "right"]).optional(),
96
+ letterSpacing: z.number().optional(),
97
+ lineHeight: z.number().optional(),
98
+ backgroundColor: z.string().optional(),
99
+ padding: z.number().optional(),
100
+ paddingHorizontal: z.number().optional(),
101
+ paddingVertical: z.number().optional(),
102
+ margin: z.number().optional(),
103
+ marginHorizontal: z.number().optional(),
104
+ marginVertical: z.number().optional(),
105
+ borderWidth: z.number().optional(),
106
+ borderRadius: z.number().optional(),
107
+ borderColor: z.string().optional(),
108
+ opacity: z.number().min(0).max(1).optional(),
109
+ });
110
+
111
+ const UIElementSchema: z.ZodType<UIElement> = z.lazy(() =>
112
+ z.union([
113
+ z.object({
114
+ id: z.string(),
115
+ name: z.string().optional(),
116
+ type: z.union([z.literal("YStack"), z.literal("XStack")]),
117
+ props: StackElementPropsSchema,
118
+ children: z.array(UIElementSchema),
119
+ }),
120
+ z.object({
121
+ id: z.string(),
122
+ name: z.string().optional(),
123
+ type: z.literal("Text"),
124
+ props: TextElementPropsSchema,
125
+ }),
126
+ ])
127
+ );
128
+
129
+ export const ComposableScreenStepPayloadSchema = z.object({
130
+ elements: z.array(UIElementSchema),
131
+ });
132
+
133
+ export const ComposableScreenStepTypeSchema = z.object({
134
+ id: z.string(),
135
+ type: z.literal("ComposableScreen"),
136
+ name: z.string(),
137
+ displayProgressHeader: z.boolean(),
138
+ payload: ComposableScreenStepPayloadSchema,
139
+ customPayload: CustomPayloadSchema,
140
+ continueButtonLabel: z.string().optional().default("Continue"),
141
+ figmaUrl: z.string().nullable(),
142
+ });
143
+
144
+ export type ComposableScreenStepType = z.infer<typeof ComposableScreenStepTypeSchema>;
package/src/steps/types.ts CHANGED
@@ -2,6 +2,7 @@ import { CarouselStepType } from "./Carousel/types";
2
2
  import { CommitmentStepType } from "./Commitment/types";
3
3
  import { LoaderStepType } from "./Loader/types";
4
4
  import { MediaContentStepType } from "./MediaContent/types";
5
+ import { ComposableScreenStepType } from "./ComposableScreen/types";
5
6
  import { PickerStepType } from "./Picker/types";
6
7
  import { QuestionStepType } from "./Question/types";
7
8
  import { RatingsStepType } from "./Ratings/types";
@@ -11,6 +12,7 @@ export type OnboardingStepType =
11
12
  | CommitmentStepType
12
13
  | LoaderStepType
13
14
  | MediaContentStepType
15
+ | ComposableScreenStepType
14
16
  | PickerStepType
15
17
  | QuestionStepType
16
18
  | RatingsStepType;