@rocapine/react-native-onboarding 1.0.0

package/README.md

@@ -0,0 +1,216 @@
+# @rocapine/react-native-onboarding-studio
+
+**A CMS-driven onboarding system for React Native mobile apps.**
+
+Build beautiful, customizable onboarding flows that update instantly without app releases.
+
+---
+
+## ✨ Features
+
+- 🎨 **Pre-built Components** - Ready-to-use screens (ratings, pickers, carousels, media content, and more)
+- 🔄 **CMS-Driven** - Update onboarding flows remotely without app releases
+- 📱 **React Native** - Works with Expo and bare React Native projects
+- 🎯 **Type-Safe** - Full TypeScript support with runtime validation
+- 💾 **Offline Support** - Built-in caching with AsyncStorage
+- 🎭 **Themeable** - Customizable colors, typography, and styling
+- 🔧 **Extensible** - Three levels of customization from theme tokens to complete renderer overrides
+
+---
+
+## 🚀 Quick Start
+
+### Installation
+
+```bash
+npm install @rocapine/react-native-onboarding-studio
+npx expo install expo-router
+```
+
+### Setup
+
+```typescript
+import {
+  OnboardingProvider,
+  OnboardingStudioClient,
+  ProgressBar,
+} from "@rocapine/react-native-onboarding-studio";
+
+const client = new OnboardingStudioClient("your-project-id", {
+  appVersion: "1.0.0",
+});
+
+export default function RootLayout() {
+  return (
+    <OnboardingProvider
+      client={client}
+      locale="en"
+      customAudienceParams={{ onboardingId: "your-onboarding-id" }}
+    >
+      <ProgressBar />
+      <YourApp />
+    </OnboardingProvider>
+  );
+}
+```
+
+### Use in Your Screens
+
+```typescript
+import {
+  useOnboardingQuestions,
+  OnboardingPage,
+} from "@rocapine/react-native-onboarding-studio";
+
+export default function OnboardingScreen() {
+  const { step, isLastStep } = useOnboardingQuestions({ stepNumber: 1 });
+
+  const handleContinue = () => {
+    if (isLastStep) {
+      router.push("/home");
+    } else {
+      router.push(`/onboarding/${stepNumber + 1}`);
+    }
+  };
+
+  return <OnboardingPage step={step} onContinue={handleContinue} />;
+}
+```
+
+That's it! 🎉
+
+---
+
+## 📚 Documentation
+
+### For SDK Users
+
+Complete documentation for using the SDK in your app:
+
+- **[Getting Started](./docs/getting-started.mdx)** - Installation, setup, and your first onboarding flow
+- **[Core Concepts](./docs/core-concepts.mdx)** - How the SDK works, caching, progress tracking
+- **[API Reference](./docs/api-reference.mdx)** - Complete API documentation
+- **[Page Types](./docs/page-types.mdx)** - Available page types and their features
+
+### Customization
+
+Learn how to customize your onboarding experience:
+
+- **[Customization Overview](./docs/customization/intro.mdx)** - Choose your customization level
+- **[Level 1: Theming](./docs/customization/theming.mdx)** - Colors, typography, and semantic styles
+- **[Level 2: Custom Components](./docs/customization/custom-components.mdx)** - Replace specific UI components
+- **[Level 3: Custom Renderers](./docs/customization/custom-renderers.mdx)** - Complete screen control
+
+### Support
+
+- **[Troubleshooting](./docs/troubleshooting.mdx)** - Common issues and solutions
+
+### For Contributors
+
+Want to contribute to the SDK?
+
+- **[Contributing Guide](./CONTRIBUTING.md)** - Development setup, architecture, and contribution guidelines
+
+---
+
+## 🎭 Customization Levels
+
+### Level 1: Theming
+
+Customize colors, typography, and semantic styles:
+
+```typescript
+<OnboardingProvider
+  theme={{
+    colors: { primary: "#FF5733" },
+    typography: { fontFamily: { title: "CustomFont-Bold" } },
+  }}
+/>
+```
+
+### Level 2: Custom Components
+
+Replace specific UI components:
+
+```typescript
+<OnboardingProvider
+  customComponents={{
+    QuestionAnswerButton: CustomButton,
+    QuestionAnswersList: AnimatedList,
+  }}
+/>
+```
+
+### Level 3: Custom Renderers
+
+Complete control over entire screens:
+
+```typescript
+export default function OnboardingScreen() {
+  const { step } = useOnboardingQuestions({ stepNumber });
+
+  if (step.id === "custom-screen") {
+    return <CustomRenderer step={step} onContinue={handleContinue} />;
+  }
+
+  return <OnboardingPage step={step} onContinue={handleContinue} />;
+}
+```
+
+---
+
+## 🎨 Available Page Types
+
+- **Question** - Interactive questions with single or multiple choice answers
+- **MediaContent** - Display images or videos with title and description
+- **Carousel** - Multi-slide horizontal pagination with page indicators
+- **Picker** - Type-specific input pickers for structured data
+- **Loader** - Sequential progress animation with optional carousel
+- **Ratings** - App store rating prompts with social proof
+- **Commitment** - User commitment and agreement screens
+
+[Learn more about page types →](./docs/page-types.mdx)
+
+---
+
+## 📦 Optional Dependencies
+
+Install these only if you're using the specific screen types:
+
+| Screen Type                | Package                       | Install Command                                |
+| -------------------------- | ----------------------------- | ---------------------------------------------- |
+| **Picker**                 | `@react-native-picker/picker` | `npx expo install @react-native-picker/picker` |
+| **Ratings**                | `expo-store-review`           | `npx expo install expo-store-review`           |
+| **Commitment** (signature) | `@shopify/react-native-skia`  | `npx expo install @shopify/react-native-skia`  |
+
+---
+
+## 💡 Example Project
+
+Check out the `example/` directory for a complete working example:
+
+```bash
+cd example/
+npm install
+npm start
+```
+
+---
+
+## 🤝 Contributing
+
+We welcome contributions! Please see our [Contributing Guide](./CONTRIBUTING.md) for details.
+
+---
+
+## 📧 Support
+
+- **Email:** support@rocapine.com
+- **Issues:** [GitHub Issues](https://github.com/rocapine/react-native-onboarding-studio/issues)
+- **Documentation:** [Rocapine Docs](https://docs.rocapine.com)
+
+---
+
+## 📄 License
+
+MIT © [Rocapine](https://rocapine.com)

package/dist/OnboardingStudioClient.d.ts

@@ -0,0 +1,13 @@
+import { OnboardingStepType } from "./steps/types";
+import { Onboarding, GetStepsResponseHeaders, OnboardingOptions, OnboardingStudioClientOptions, UserDefinedParams, BaseStepType } from "./types";
+export declare class OnboardingStudioClient {
+    private baseUrl;
+    projectId: string;
+    options: OnboardingStudioClientOptions;
+    constructor(projectId: string, options: OnboardingStudioClientOptions);
+    getSteps<StepType extends BaseStepType = OnboardingStepType>(onboardingOptions?: OnboardingOptions, userDefinedParams?: UserDefinedParams): Promise<{
+        data: Onboarding<StepType>;
+        headers: GetStepsResponseHeaders;
+    }>;
+}
+//# sourceMappingURL=OnboardingStudioClient.d.ts.map

package/dist/OnboardingStudioClient.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OnboardingStudioClient.d.ts","sourceRoot":"","sources":["../src/OnboardingStudioClient.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EACL,UAAU,EACV,uBAAuB,EACvB,iBAAiB,EACjB,6BAA6B,EAC7B,iBAAiB,EACjB,YAAY,EACb,MAAM,SAAS,CAAC;AAIjB,qBAAa,sBAAsB;IACjC,OAAO,CAAC,OAAO,CAAS;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,6BAA6B,CAAC;gBAElC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,6BAA6B;IAS/D,QAAQ,CAAC,QAAQ,SAAS,YAAY,GAAG,kBAAkB,EAC/D,iBAAiB,CAAC,EAAE,iBAAiB,EACrC,iBAAiB,CAAC,EAAE,iBAAiB,GACpC,OAAO,CAAC;QAAE,IAAI,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;QAAC,OAAO,EAAE,uBAAuB,CAAA;KAAE,CAAC;CA8D7E"}

package/dist/OnboardingStudioClient.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OnboardingStudioClient = void 0;
+const react_native_1 = require("react-native");
+class OnboardingStudioClient {
+    constructor(projectId, options) {
+        console.info("OnboardingStudioClient init: projectId ", projectId);
+        this.projectId = projectId;
+        this.options = options;
+        this.baseUrl =
+            options.baseUrl ||
+                "https://takbcvjljqialzqyksic.supabase.co/functions/v1";
+    }
+    async getSteps(onboardingOptions, userDefinedParams) {
+        console.info("OnboardingStudioClient getSteps");
+        const isSandbox = this.options.isSandbox;
+        const urlParams = new URLSearchParams();
+        // Add userDefinedParams to URL
+        if (userDefinedParams) {
+            Object.entries(userDefinedParams).forEach(([key, value]) => {
+                urlParams.append(key, value);
+            });
+        }
+        urlParams.append("projectId", this.projectId);
+        urlParams.append("platform", react_native_1.Platform.OS);
+        const appVersion = this.options.appVersion; // TODO get the version from the expo app
+        if (appVersion) {
+            urlParams.append("appVersion", appVersion);
+        }
+        if (isSandbox) {
+            urlParams.append("draft", "true");
+        }
+        // Add onboardingOptions to URL
+        if (onboardingOptions === null || onboardingOptions === void 0 ? void 0 : onboardingOptions.locale) {
+            urlParams.append("locale", onboardingOptions.locale);
+        }
+        const url = `${this.baseUrl}/get-onboarding-steps?${urlParams.toString()}`;
+        console.info("OnboardingStudioClient getSteps url", url);
+        try {
+            const response = await fetch(url);
+            if (!response.ok) {
+                throw new Error(`Failed to fetch onboarding steps: ${response.status} ${response.statusText}`);
+            }
+            const data = await response.json();
+            return {
+                data,
+                headers: {
+                    "ONBS-Onboarding-Id": response.headers.get("ONBS-Onboarding-Id"),
+                    "ONBS-Audience-Id": response.headers.get("ONBS-Audience-Id"),
+                    "ONBS-Onboarding-Name": response.headers.get("ONBS-Onboarding-Name"),
+                },
+            };
+        }
+        catch (error) {
+            console.error(error);
+            if (this.options.fallbackOnboarding) {
+                return {
+                    data: this.options.fallbackOnboarding,
+                    headers: {
+                        "ONBS-Onboarding-Id": "fallback",
+                        "ONBS-Audience-Id": "fallback",
+                        "ONBS-Onboarding-Name": "fallback",
+                    },
+                };
+            }
+            throw error;
+        }
+    }
+}
+exports.OnboardingStudioClient = OnboardingStudioClient;
+//# sourceMappingURL=OnboardingStudioClient.js.map

package/dist/OnboardingStudioClient.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OnboardingStudioClient.js","sourceRoot":"","sources":["../src/OnboardingStudioClient.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { OnboardingStudioClient } from "./OnboardingStudioClient";
+export * from "./types";
+export * from "./infra";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC"}

package/dist/index.js

@@ -0,0 +1,24 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OnboardingStudioClient = void 0;
+// Core client and types
+var OnboardingStudioClient_1 = require("./OnboardingStudioClient");
+Object.defineProperty(exports, "OnboardingStudioClient", { enumerable: true, get: function () { return OnboardingStudioClient_1.OnboardingStudioClient; } });
+__exportStar(require("./types"), exports);
+// Hooks and providers
+__exportStar(require("./infra"), exports);
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,wBAAwB;AACxB,mEAAkE;AAAzD,gIAAA,sBAAsB,OAAA;AAC/B,0CAAwB;AAExB,sBAAsB;AACtB,0CAAwB"}

package/dist/infra/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export { useOnboardingStep } from "./useOnboardingStep";
+export { useOnboarding } from "./useOnboarding";
+//# sourceMappingURL=index.d.ts.map

package/dist/infra/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/infra/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/infra/hooks/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOnboarding = exports.useOnboardingStep = void 0;
+var useOnboardingStep_1 = require("./useOnboardingStep");
+Object.defineProperty(exports, "useOnboardingStep", { enumerable: true, get: function () { return useOnboardingStep_1.useOnboardingStep; } });
+var useOnboarding_1 = require("./useOnboarding");
+Object.defineProperty(exports, "useOnboarding", { enumerable: true, get: function () { return useOnboarding_1.useOnboarding; } });
+//# sourceMappingURL=index.js.map

package/dist/infra/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/infra/hooks/index.ts"],"names":[],"mappings":";;;AAAA,yDAAwD;AAA/C,sHAAA,iBAAiB,OAAA;AAC1B,iDAAgD;AAAvC,8GAAA,aAAa,OAAA"}

package/dist/infra/hooks/useOnboarding.d.ts

@@ -0,0 +1,6 @@
+export declare const useOnboarding: () => {
+    progressPercentage: number;
+    isProgressBarVisible: boolean;
+    onboarding: import("../..").Onboarding<import("../../steps/types").OnboardingStepType> | null;
+};
+//# sourceMappingURL=useOnboarding.d.ts.map

package/dist/infra/hooks/useOnboarding.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOnboarding.d.ts","sourceRoot":"","sources":["../../../src/infra/hooks/useOnboarding.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa;;;;CAYzB,CAAC"}

package/dist/infra/hooks/useOnboarding.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOnboarding = void 0;
+const react_1 = require("react");
+const OnboardingProvider_1 = require("../provider/OnboardingProvider");
+const useOnboarding = () => {
+    const { activeStep, totalSteps, onboarding } = (0, react_1.useContext)(OnboardingProvider_1.OnboardingProgressContext);
+    const progressPercentage = totalSteps > 0 ? Math.round((100 * activeStep.number) / totalSteps) : 0;
+    const isProgressBarVisible = activeStep.displayProgressHeader;
+    return {
+        progressPercentage,
+        isProgressBarVisible,
+        onboarding,
+    };
+};
+exports.useOnboarding = useOnboarding;
+//# sourceMappingURL=useOnboarding.js.map

package/dist/infra/hooks/useOnboarding.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOnboarding.js","sourceRoot":"","sources":["../../../src/infra/hooks/useOnboarding.ts"],"names":[],"mappings":";;;AAAA,iCAAmC;AACnC,uEAA2E;AAEpE,MAAM,aAAa,GAAG,GAAG,EAAE;IAChC,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,IAAA,kBAAU,EACvD,8CAAyB,CAC1B,CAAC;IACF,MAAM,kBAAkB,GACtB,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,UAAU,CAAC,MAAM,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1E,MAAM,oBAAoB,GAAG,UAAU,CAAC,qBAAqB,CAAC;IAC9D,OAAO;QACL,kBAAkB;QAClB,oBAAoB;QACpB,UAAU;KACX,CAAC;AACJ,CAAC,CAAC;AAZW,QAAA,aAAa,iBAYxB"}

package/dist/infra/hooks/useOnboarding.old.d.ts

@@ -0,0 +1,7 @@
+export declare const useOnboarding: () => {
+    progressPercentage: number;
+    theme: any;
+    isProgressBarVisible: any;
+    onboarding: any;
+};
+//# sourceMappingURL=useOnboarding.old.d.ts.map

package/dist/infra/hooks/useOnboarding.old.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOnboarding.old.d.ts","sourceRoot":"","sources":["../../../src/infra/hooks/useOnboarding.old.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,aAAa;;;;;CAczB,CAAC"}

package/dist/infra/hooks/useOnboarding.old.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOnboarding = void 0;
+const react_1 = require("react");
+const UI_1 = require("../../UI");
+const OnboardingProvider_1 = require("../provider/OnboardingProvider");
+const useOnboarding = () => {
+    const { activeStep, totalSteps, onboarding } = (0, react_1.useContext)(OnboardingProvider_1.OnboardingProgressContext);
+    const progressPercentage = totalSteps > 0 ? Math.round((100 * activeStep.number) / totalSteps) : 0;
+    const { theme } = (0, UI_1.useTheme)();
+    const isProgressBarVisible = activeStep.displayProgressHeader;
+    return {
+        progressPercentage,
+        theme,
+        isProgressBarVisible,
+        onboarding,
+    };
+};
+exports.useOnboarding = useOnboarding;
+//# sourceMappingURL=useOnboarding.old.js.map

package/dist/infra/hooks/useOnboarding.old.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOnboarding.old.js","sourceRoot":"","sources":["../../../src/infra/hooks/useOnboarding.old.ts"],"names":[],"mappings":";;;AAAA,iCAAmC;AACnC,iCAAoC;AACpC,uEAA2E;AAEpE,MAAM,aAAa,GAAG,GAAG,EAAE;IAChC,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,IAAA,kBAAU,EACvD,8CAAyB,CAC1B,CAAC;IACF,MAAM,kBAAkB,GACtB,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,UAAU,CAAC,MAAM,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1E,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,aAAQ,GAAE,CAAC;IAC7B,MAAM,oBAAoB,GAAG,UAAU,CAAC,qBAAqB,CAAC;IAC9D,OAAO;QACL,kBAAkB;QAClB,KAAK;QACL,oBAAoB;QACpB,UAAU;KACX,CAAC;AACJ,CAAC,CAAC;AAdW,QAAA,aAAa,iBAcxB"}

package/dist/infra/hooks/useOnboardingStep.d.ts

@@ -0,0 +1,12 @@
+import { BaseStepType, OnboardingMetadata } from "../../types";
+import { OnboardingStepType } from "../../steps/types";
+export declare const useOnboardingStep: <StepType extends BaseStepType = OnboardingStepType>({ stepNumber, }: {
+    stepNumber: number;
+}) => {
+    step: StepType;
+    isLastStep: boolean;
+    stepsLength: number;
+    onboardingMetadata: OnboardingMetadata;
+    steps: StepType[];
+};
+//# sourceMappingURL=useOnboardingStep.d.ts.map

package/dist/infra/hooks/useOnboardingStep.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOnboardingStep.d.ts","sourceRoot":"","sources":["../../../src/infra/hooks/useOnboardingStep.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,YAAY,EAAc,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAC3E,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAEvD,eAAO,MAAM,iBAAiB,GAC5B,QAAQ,SAAS,YAAY,GAAG,kBAAkB,EAClD,iBAEC;IACD,UAAU,EAAE,MAAM,CAAC;CACpB,KAAG;IACF,IAAI,EAAE,QAAQ,CAAC;IACf,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,KAAK,EAAE,QAAQ,EAAE,CAAC;CA8CnB,CAAC"}

package/dist/infra/hooks/useOnboardingStep.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOnboardingStep = void 0;
+const react_1 = require("react");
+const react_query_1 = require("@tanstack/react-query");
+const expo_router_1 = require("expo-router");
+const OnboardingProvider_1 = require("../provider/OnboardingProvider");
+const getOnboarding_query_1 = require("../queries/getOnboarding.query");
+const useOnboardingStep = ({ stepNumber, }) => {
+    // Get all config from context
+    const { client, locale, customAudienceParams, setActiveStep, setTotalSteps, setOnboarding, } = (0, react_1.useContext)(OnboardingProvider_1.OnboardingProgressContext);
+    // Build query with config from context
+    const { data } = (0, react_query_1.useSuspenseQuery)((0, getOnboarding_query_1.getOnboardingQuery)(client, locale, customAudienceParams, setOnboarding));
+    const steps = data.steps;
+    const onboardingMetadata = data.metadata;
+    (0, expo_router_1.useFocusEffect)((0, react_1.useCallback)(() => {
+        var _a;
+        const currentStep = steps[stepNumber - 1];
+        setActiveStep({
+            number: stepNumber,
+            displayProgressHeader: (_a = currentStep === null || currentStep === void 0 ? void 0 : currentStep.displayProgressHeader) !== null && _a !== void 0 ? _a : true,
+        });
+        setTotalSteps(steps.length);
+    }, [stepNumber, steps, setActiveStep, setTotalSteps]));
+    const step = steps[stepNumber - 1];
+    const isLastStep = stepNumber >= steps.length;
+    const stepsLength = steps.length;
+    return {
+        step,
+        isLastStep,
+        stepsLength,
+        onboardingMetadata,
+        steps,
+    };
+};
+exports.useOnboardingStep = useOnboardingStep;
+//# sourceMappingURL=useOnboardingStep.js.map

package/dist/infra/hooks/useOnboardingStep.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOnboardingStep.js","sourceRoot":"","sources":["../../../src/infra/hooks/useOnboardingStep.ts"],"names":[],"mappings":";;;AAAA,iCAAgD;AAChD,uDAAyD;AACzD,6CAA6C;AAC7C,uEAA2E;AAC3E,wEAAoE;AAI7D,MAAM,iBAAiB,GAAG,CAE/B,EACA,UAAU,GAGX,EAMC,EAAE;IACF,8BAA8B;IAC9B,MAAM,EACJ,MAAM,EACN,MAAM,EACN,oBAAoB,EACpB,aAAa,EACb,aAAa,EACb,aAAa,GACd,GAAG,IAAA,kBAAU,EAAC,8CAAyB,CAAC,CAAC;IAE1C,uCAAuC;IACvC,MAAM,EAAE,IAAI,EAAE,GAAG,IAAA,8BAAgB,EAC/B,IAAA,wCAAkB,EAChB,MAAM,EACN,MAAM,EACN,oBAAoB,EACpB,aAA2D,CAC5D,CACF,CAAC;IACF,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;IACzB,MAAM,kBAAkB,GAAG,IAAI,CAAC,QAAQ,CAAC;IAEzC,IAAA,4BAAc,EACZ,IAAA,mBAAW,EAAC,GAAG,EAAE;;QACf,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC;QAC1C,aAAa,CAAC;YACZ,MAAM,EAAE,UAAU;YAClB,qBAAqB,EAAE,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,qBAAqB,mCAAI,IAAI;SAClE,CAAC,CAAC;QACH,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAC9B,CAAC,EAAE,CAAC,UAAU,EAAE,KAAK,EAAE,aAAa,EAAE,aAAa,CAAC,CAAC,CACtD,CAAC;IAEF,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC;IACnC,MAAM,UAAU,GAAG,UAAU,IAAI,KAAK,CAAC,MAAM,CAAC;IAC9C,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC;IAEjC,OAAO;QACL,IAAI;QACJ,UAAU;QACV,WAAW;QACX,kBAAkB;QAClB,KAAK;KACN,CAAC;AACJ,CAAC,CAAC;AAzDW,QAAA,iBAAiB,qBAyD5B"}

package/dist/infra/hooks/useOnboardingStep.old.d.ts

@@ -0,0 +1,12 @@
+import { OnboardingStepType, BaseStepType } from "../../UI/types";
+import { OnboardingMetadata } from "../../types";
+export declare const useOnboardingStep: <StepType extends BaseStepType = OnboardingStepType>({ stepNumber, }: {
+    stepNumber: number;
+}) => {
+    step: StepType;
+    isLastStep: boolean;
+    stepsLength: number;
+    onboardingMetadata: OnboardingMetadata;
+    steps: StepType[];
+};
+//# sourceMappingURL=useOnboardingStep.old.d.ts.map

package/dist/infra/hooks/useOnboardingStep.old.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOnboardingStep.old.d.ts","sourceRoot":"","sources":["../../../src/infra/hooks/useOnboardingStep.old.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAElE,OAAO,EAAc,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAE7D,eAAO,MAAM,iBAAiB,GAC5B,QAAQ,SAAS,YAAY,GAAG,kBAAkB,EAClD,iBAEC;IACD,UAAU,EAAE,MAAM,CAAC;CACpB,KAAG;IACF,IAAI,EAAE,QAAQ,CAAC;IACf,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,KAAK,EAAE,QAAQ,EAAE,CAAC;CA8CnB,CAAC"}

package/dist/infra/hooks/useOnboardingStep.old.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOnboardingStep = void 0;
+const react_1 = require("react");
+const react_query_1 = require("@tanstack/react-query");
+const expo_router_1 = require("expo-router");
+const OnboardingProvider_1 = require("../provider/OnboardingProvider");
+const getOnboarding_query_1 = require("../queries/getOnboarding.query");
+const useOnboardingStep = ({ stepNumber, }) => {
+    // Get all config from context
+    const { client, locale, customAudienceParams, setActiveStep, setTotalSteps, setOnboarding, } = (0, react_1.useContext)(OnboardingProvider_1.OnboardingProgressContext);
+    // Build query with config from context
+    const { data } = (0, react_query_1.useSuspenseQuery)((0, getOnboarding_query_1.getOnboardingQuery)(client, locale, customAudienceParams, setOnboarding));
+    const steps = data.steps;
+    const onboardingMetadata = data.metadata;
+    (0, expo_router_1.useFocusEffect)((0, react_1.useCallback)(() => {
+        var _a;
+        const currentStep = steps[stepNumber - 1];
+        setActiveStep({
+            number: stepNumber,
+            displayProgressHeader: (_a = currentStep === null || currentStep === void 0 ? void 0 : currentStep.displayProgressHeader) !== null && _a !== void 0 ? _a : true,
+        });
+        setTotalSteps(steps.length);
+    }, [stepNumber, steps, setActiveStep, setTotalSteps]));
+    const step = steps[stepNumber - 1];
+    const isLastStep = stepNumber >= steps.length;
+    const stepsLength = steps.length;
+    return {
+        step,
+        isLastStep,
+        stepsLength,
+        onboardingMetadata,
+        steps,
+    };
+};
+exports.useOnboardingStep = useOnboardingStep;
+//# sourceMappingURL=useOnboardingStep.old.js.map

package/dist/infra/hooks/useOnboardingStep.old.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOnboardingStep.old.js","sourceRoot":"","sources":["../../../src/infra/hooks/useOnboardingStep.old.ts"],"names":[],"mappings":";;;AAAA,iCAAgD;AAChD,uDAAyD;AACzD,6CAA6C;AAC7C,uEAA2E;AAE3E,wEAAoE;AAG7D,MAAM,iBAAiB,GAAG,CAE/B,EACA,UAAU,GAGX,EAMC,EAAE;IACF,8BAA8B;IAC9B,MAAM,EACJ,MAAM,EACN,MAAM,EACN,oBAAoB,EACpB,aAAa,EACb,aAAa,EACb,aAAa,GACd,GAAG,IAAA,kBAAU,EAAC,8CAAyB,CAAC,CAAC;IAE1C,uCAAuC;IACvC,MAAM,EAAE,IAAI,EAAE,GAAG,IAAA,8BAAgB,EAC/B,IAAA,wCAAkB,EAChB,MAAM,EACN,MAAM,EACN,oBAAoB,EACpB,aAA2D,CAC5D,CACF,CAAC;IACF,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;IACzB,MAAM,kBAAkB,GAAG,IAAI,CAAC,QAAQ,CAAC;IAEzC,IAAA,4BAAc,EACZ,IAAA,mBAAW,EAAC,GAAG,EAAE;;QACf,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC;QAC1C,aAAa,CAAC;YACZ,MAAM,EAAE,UAAU;YAClB,qBAAqB,EAAE,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,qBAAqB,mCAAI,IAAI;SAClE,CAAC,CAAC;QACH,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAC9B,CAAC,EAAE,CAAC,UAAU,EAAE,KAAK,EAAE,aAAa,EAAE,aAAa,CAAC,CAAC,CACtD,CAAC;IAEF,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC;IACnC,MAAM,UAAU,GAAG,UAAU,IAAI,KAAK,CAAC,MAAM,CAAC;IAC9C,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC;IAEjC,OAAO;QACL,IAAI;QACJ,UAAU;QACV,WAAW;QACX,kBAAkB;QAClB,KAAK;KACN,CAAC;AACJ,CAAC,CAAC;AAzDW,QAAA,iBAAiB,qBAyD5B"}

package/dist/infra/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./provider";
+export * from "./hooks";
+//# sourceMappingURL=index.d.ts.map

package/dist/infra/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/infra/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC"}

package/dist/infra/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./provider"), exports);
+__exportStar(require("./hooks"), exports);
+//# sourceMappingURL=index.js.map

package/dist/infra/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/infra/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,6CAA2B;AAC3B,0CAAwB"}

package/dist/infra/provider/OnboardingProvider.d.ts

@@ -0,0 +1,29 @@
+import { OnboardingStudioClient } from "../../OnboardingStudioClient";
+import { Onboarding } from "../../types";
+import { OnboardingStepType } from "../../steps/types";
+interface OnboardingProviderProps {
+    children: React.ReactNode;
+    client: OnboardingStudioClient;
+    locale?: string;
+    customAudienceParams?: Record<string, any>;
+}
+export declare const OnboardingProvider: ({ children, client, locale, customAudienceParams, }: OnboardingProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const OnboardingProgressContext: import("react").Context<{
+    activeStep: {
+        number: number;
+        displayProgressHeader: boolean;
+    };
+    setActiveStep: (step: {
+        number: number;
+        displayProgressHeader: boolean;
+    }) => void;
+    totalSteps: number;
+    setTotalSteps: (steps: number) => void;
+    client: OnboardingStudioClient;
+    locale: string;
+    customAudienceParams: Record<string, any>;
+    onboarding: Onboarding<OnboardingStepType> | null;
+    setOnboarding: (onboarding: Onboarding<OnboardingStepType>) => void;
+}>;
+export {};
+//# sourceMappingURL=OnboardingProvider.d.ts.map

package/dist/infra/provider/OnboardingProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OnboardingProvider.d.ts","sourceRoot":"","sources":["../../../src/infra/provider/OnboardingProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AAEtE,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAUvD,UAAU,uBAAuB;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,EAAE,sBAAsB,CAAC;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oBAAoB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAC5C;AAED,eAAO,MAAM,kBAAkB,GAAI,qDAKhC,uBAAuB,4CA8BzB,CAAC;AAEF,eAAO,MAAM,yBAAyB;gBACxB;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,qBAAqB,EAAE,OAAO,CAAA;KAAE;mBAC/C,CAAC,IAAI,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,qBAAqB,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI;gBACrE,MAAM;mBACH,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;YAC9B,sBAAsB;YACtB,MAAM;0BACQ,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;gBAC7B,UAAU,CAAC,kBAAkB,CAAC,GAAG,IAAI;mBAClC,CAAC,UAAU,EAAE,UAAU,CAAC,kBAAkB,CAAC,KAAK,IAAI;EAWnE,CAAC"}