@rocapine/react-native-onboarding 1.16.0 → 1.17.0

package/src/infra/provider/OnboardingProvider.tsx

@@ -1,10 +1,11 @@
 import { createContext, useCallback, useState } from "react";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { QueryClient, QueryClientProvider, useQuery } from "@tanstack/react-query";
 import { OnboardingStudioClient } from "../../OnboardingStudioClient";
 import { getOnboardingQuery } from "../queries/getOnboarding.query";
 import { Onboarding } from "../../types";
 import { OnboardingStepType } from "../../steps/types";
 import { ComposableVariableEntry } from "../../steps/ComposableScreen/types";
+import { FontLoaderGate } from "./FontLoader";
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -32,14 +33,52 @@ interface OnboardingProviderProps {
    * variable map and may return a Promise.
    */
   customActions?: CustomActions;
+  /**
+   * Rendered while the onboarding payload is fetched and any remote fonts
+   * declared in the response (`onboarding.fonts`) are downloaded and registered.
+   * Defaults to `null`.
+   */
+  fontsFallback?: React.ReactNode;
+}
+
+interface OnboardingDataGateProps {
+  client: OnboardingStudioClient;
+  locale: string;
+  customAudienceParams: Record<string, any>;
+  setOnboarding: (onboarding: Onboarding<OnboardingStepType>) => void;
+  fontsFallback?: React.ReactNode;
+  children: React.ReactNode;
 }
 
+const OnboardingDataGate = ({
+  client,
+  locale,
+  customAudienceParams,
+  setOnboarding,
+  fontsFallback,
+  children,
+}: OnboardingDataGateProps) => {
+  const { data, error } = useQuery<Onboarding<OnboardingStepType>>(
+    getOnboardingQuery<OnboardingStepType>(client, locale, customAudienceParams, setOnboarding)
+  );
+
+  if (error) throw error;
+  if (!data) return <>{fontsFallback ?? null}</>;
+
+  return (
+    <FontLoaderGate fonts={data.fonts} fallback={fontsFallback}>
+      {children}
+    </FontLoaderGate>
+  );
+};
+
 export const OnboardingProvider = ({
   children,
   client,
   locale = "en",
   customAudienceParams = {},
   customActions = {},
+  fontsFallback,
 }: OnboardingProviderProps) => {
   const [activeStep, setActiveStep] = useState({
     number: 0,
@@ -52,11 +91,8 @@ export const OnboardingProvider = ({
     setVariables((prev) => ({ ...prev, [name]: value }));
   }, []);
 
-  queryClient.prefetchQuery(getOnboardingQuery(client, locale, customAudienceParams, setOnboarding))
-
   return (
     <QueryClientProvider client={queryClient}>
-
       <OnboardingProgressContext.Provider
         value={{
           activeStep,
@@ -73,7 +109,15 @@ export const OnboardingProvider = ({
           customActions,
         }}
       >
-        {children}
+        <OnboardingDataGate
+          client={client}
+          locale={locale}
+          customAudienceParams={customAudienceParams}
+          setOnboarding={setOnboarding}
+          fontsFallback={fontsFallback}
+        >
+          {children}
+        </OnboardingDataGate>
       </OnboardingProgressContext.Provider>
     </QueryClientProvider>
   );

package/src/infra/provider/index.ts

@@ -6,3 +6,4 @@ export type {
   CustomActionHandler,
   CustomActions,
 } from "./OnboardingProvider";
+export { FontLoaderGate } from "./FontLoader";

package/src/onboarding-example.ts

@@ -9,6 +9,16 @@ export const onboardingExample = {
     audienceOrder: undefined,
     draft: true,
   },
+  fonts: {
+    Inter: {
+      regular: "https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-400-normal.ttf",
+      medium: "https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-500-normal.ttf",
+      bold: "https://cdn.jsdelivr.net/fontsource/fonts/inter@latest/latin-700-normal.ttf",
+    },
+    Lobster: {
+      regular: "https://cdn.jsdelivr.net/fontsource/fonts/lobster@latest/latin-400-normal.ttf",
+    },
+  },
   steps: [
     {
       id: "welcome",
@@ -188,8 +198,20 @@ export const onboardingExample = {
                   content: "Built from the CMS",
                   fontSize: 28,
                   fontWeight: "700",
-                  fontFamily: "System",
+                  fontFamily: "Inter",
+                  textAlign: "center",
+                },
+              },
+              {
+                id: "headline-display",
+                type: "Text",
+                props: {
+                  content: "Runtime-loaded font",
+                  fontSize: 32,
+                  fontFamily: "Lobster",
+                  fontStyle: "italic",
                   textAlign: "center",
+                  marginVertical: 4,
                 },
               },
               {

package/src/steps/ComposableScreen/elements/ButtonElement.ts

@@ -38,6 +38,7 @@ export type ButtonElementProps = BaseBoxProps & {
   fontSize?: number;
   fontWeight?: string;
   fontFamily?: string;
+  fontStyle?: "normal" | "italic";
   textAlign?: "left" | "center" | "right";
 };
 
@@ -51,5 +52,6 @@ export const ButtonElementPropsSchema = BaseBoxPropsSchema.extend({
   fontSize: z.number().optional(),
   fontWeight: z.string().optional(),
   fontFamily: z.string().optional(),
+  fontStyle: z.enum(["normal", "italic"]).optional(),
   textAlign: z.enum(["left", "center", "right"]).optional(),
 });

package/src/steps/ComposableScreen/elements/CheckboxGroupElement.ts

@@ -18,6 +18,7 @@ export type CheckboxGroupElementProps = BaseBoxProps & {
   itemFontSize?: number;
   itemFontWeight?: string;
   itemFontFamily?: string;
+  itemFontStyle?: "normal" | "italic";
   itemPadding?: number;
   itemPaddingHorizontal?: number;
   itemPaddingVertical?: number;
@@ -40,6 +41,7 @@ export const CheckboxGroupElementPropsSchema = BaseBoxPropsSchema.extend({
   itemFontSize: z.number().optional(),
   itemFontWeight: z.string().optional(),
   itemFontFamily: z.string().optional(),
+  itemFontStyle: z.enum(["normal", "italic"]).optional(),
   itemPadding: z.number().optional(),
   itemPaddingHorizontal: z.number().optional(),
   itemPaddingVertical: z.number().optional(),

package/src/steps/ComposableScreen/elements/InputElement.ts

@@ -18,6 +18,7 @@ export type InputElementProps = BaseBoxProps & {
   fontSize?: number;
   fontWeight?: string;
   fontFamily?: string;
+  fontStyle?: "normal" | "italic";
   lineHeight?: number;
   letterSpacing?: number;
   textAlign?: "left" | "center" | "right";
@@ -41,6 +42,7 @@ export const InputElementPropsSchema = BaseBoxPropsSchema.extend({
   fontSize: z.number().optional(),
   fontWeight: z.string().optional(),
   fontFamily: z.string().optional(),
+  fontStyle: z.enum(["normal", "italic"]).optional(),
   lineHeight: z.number().optional(),
   letterSpacing: z.number().optional(),
   textAlign: z.enum(["left", "center", "right"]).optional(),

package/src/steps/ComposableScreen/elements/RadioGroupElement.ts

@@ -18,6 +18,7 @@ export type RadioGroupElementProps = BaseBoxProps & {
   itemFontSize?: number;
   itemFontWeight?: string;
   itemFontFamily?: string;
+  itemFontStyle?: "normal" | "italic";
   itemPadding?: number;
   itemPaddingHorizontal?: number;
   itemPaddingVertical?: number;
@@ -40,6 +41,7 @@ export const RadioGroupElementPropsSchema = BaseBoxPropsSchema.extend({
   itemFontSize: z.number().optional(),
   itemFontWeight: z.string().optional(),
   itemFontFamily: z.string().optional(),
+  itemFontStyle: z.enum(["normal", "italic"]).optional(),
   itemPadding: z.number().optional(),
   itemPaddingHorizontal: z.number().optional(),
   itemPaddingVertical: z.number().optional(),

package/src/steps/ComposableScreen/elements/TextElement.ts

@@ -7,6 +7,7 @@ export type TextElementProps = BaseBoxProps & {
   fontSize?: number;
   fontWeight?: string;
   fontFamily?: string;
+  fontStyle?: "normal" | "italic";
   color?: string;
   textAlign?: "left" | "center" | "right";
   letterSpacing?: number;
@@ -19,6 +20,7 @@ export const TextElementPropsSchema = BaseBoxPropsSchema.extend({
   fontSize: z.number().optional(),
   fontWeight: z.string().optional(),
   fontFamily: z.string().optional(),
+  fontStyle: z.enum(["normal", "italic"]).optional(),
   color: z.string().optional(),
   textAlign: z.enum(["left", "center", "right"]).optional(),
   letterSpacing: z.number().optional(),

package/src/types.ts

@@ -44,10 +44,31 @@ export interface OnboardingMetadata {
   draft?: boolean;
 }
 
+export type FontWeightKey =
+  | "regular"
+  | "medium"
+  | "semibold"
+  | "bold"
+  | "extrabold"
+  | "100"
+  | "200"
+  | "300"
+  | "400"
+  | "500"
+  | "600"
+  | "700"
+  | "800"
+  | "900";
+
+export type FontFamilyManifest = Partial<Record<FontWeightKey, string>>;
+
+export type FontsManifest = Record<string, FontFamilyManifest>;
+
 export interface Onboarding<StepType extends BaseStepType = BaseStepType> {
   metadata: OnboardingMetadata;
   steps: StepType[];
   configuration: any;
+  fonts?: FontsManifest;
 }
 
 export interface GetStepsResponseHeaders {