@rocapine/react-native-onboarding-ui 1.0.0

package/src/UI/Pages/types.ts

@@ -0,0 +1,25 @@
+import { z } from "zod";
+
+export const CustomPayloadSchema = z.record(z.string(), z.any()).nullish();
+
+export const MediaSourceSchema = z.union([
+  z.object({
+    type: z.literal("image").or(z.literal("lottie")).or(z.literal("rive")),
+    localPathId: z.string(),
+  }),
+  z.object({
+    type: z.literal("image").or(z.literal("lottie")).or(z.literal("rive")),
+    url: z.string(),
+  }),
+]);
+
+export const SocialProofSchema = z.object({
+  numberOfStar: z.number(),
+  content: z.string(),
+  authorName: z.string(),
+});
+
+export const InfoBoxSchema = z.object({
+  title: z.string(),
+  content: z.string(),
+});

package/src/UI/Provider/OnboardingProgressProvider.tsx

@@ -0,0 +1,40 @@
+import { createContext, useState } from "react";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+import { ThemeProvider } from "../Theme/ThemeProvider";
+import { ColorScheme } from "../Theme/types";
+
+export const OnboardingProgressProvider = ({
+  children,
+  initialColorScheme = "light",
+}: {
+  children: React.ReactNode;
+  initialColorScheme?: ColorScheme;
+}) => {
+  const [activeStep, setActiveStep] = useState({
+    number: 0,
+    displayProgressHeader: false,
+  });
+  const [totalSteps, setTotalSteps] = useState(0);
+
+  return (
+    <SafeAreaProvider>
+      <ThemeProvider initialColorScheme={initialColorScheme}>
+        <OnboardingProgressContext.Provider
+          value={{ activeStep, setActiveStep, totalSteps, setTotalSteps }}
+        >
+          {children}
+        </OnboardingProgressContext.Provider>
+      </ThemeProvider>
+    </SafeAreaProvider>
+  );
+};
+
+export const OnboardingProgressContext = createContext({
+  activeStep: { number: 0, displayProgressHeader: false },
+  setActiveStep: (step: {
+    number: number;
+    displayProgressHeader: boolean;
+  }) => {},
+  totalSteps: 0,
+  setTotalSteps: (steps: number) => {},
+});

package/src/UI/Provider/index.ts

@@ -0,0 +1 @@
+export { ThemeProvider, useTheme } from "../Theme";

package/src/UI/Templates/OnboardingTemplate.tsx

@@ -0,0 +1,86 @@
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { OnboardingStepType } from "../types";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { getTextStyle } from "../Theme/helpers";
+import { Theme } from "../Theme/types";
+import { defaultTheme } from "../Theme/defaultTheme";
+
+type OnboardingTemplateProps = {
+  children: React.ReactNode;
+  onContinue: () => void;
+  button?: {
+    text: string;
+    disabled?: boolean;
+  };
+  step: OnboardingStepType;
+  theme?: Theme;
+};
+
+export const OnboardingTemplate = ({
+  children,
+  onContinue,
+  step,
+  button,
+  theme = defaultTheme,
+}: OnboardingTemplateProps) => {
+  const { top, bottom } = useSafeAreaInsets();
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          backgroundColor: theme.colors.neutral.lowest,
+          paddingTop: step.displayProgressHeader ? top + 40 : top,
+          paddingBottom: bottom
+        },
+      ]}
+    >
+      {children}
+      {button && (
+        <View style={styles.bottomSection}>
+          <TouchableOpacity
+            style={[
+              styles.ctaButton,
+              { backgroundColor: theme.colors.primary },
+              button.disabled && { backgroundColor: theme.colors.disable },
+            ]}
+            onPress={onContinue}
+            activeOpacity={0.8}
+            disabled={button.disabled}
+          >
+            <Text
+              style={[
+                getTextStyle(theme, "button"),
+                styles.ctaButtonText,
+                { color: theme.colors.text.opposite },
+                button.disabled && { color: theme.colors.text.disable },
+              ]}
+            >
+              {button.text}
+            </Text>
+          </TouchableOpacity>
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  bottomSection: {
+    paddingHorizontal: 32,
+    gap: 24,
+    alignItems: "center",
+  },
+  ctaButton: {
+    borderRadius: 90,
+    paddingVertical: 18,
+    paddingHorizontal: 24,
+    minWidth: 234,
+    alignItems: "center",
+  },
+  ctaButtonText: {},
+});

package/src/UI/Templates/index.ts

@@ -0,0 +1 @@
+export { OnboardingTemplate } from "./OnboardingTemplate";

package/src/UI/Theme/ThemeProvider.tsx

@@ -0,0 +1,100 @@
+import React, { createContext, useState, ReactNode, useMemo } from "react";
+import { lightTokens, darkTokens, typography } from "./tokens";
+import { Theme, ColorScheme, DeepPartial } from "./types";
+import { mergeThemeTokens, deepMerge } from "./utils";
+
+type ThemeContextType = {
+  theme: Theme;
+  colorScheme: ColorScheme;
+  toggleTheme: () => void;
+};
+
+export const ThemeContext = createContext<ThemeContextType | undefined>(
+  undefined
+);
+
+type ThemeProviderProps = {
+  children: ReactNode;
+  initialColorScheme?: ColorScheme;
+  /**
+   * Custom theme to override both light and dark mode tokens.
+   */
+  customTheme?: DeepPartial<Theme>;
+  /**
+   * Custom theme tokens for light mode only.
+   */
+  customLightTheme?: DeepPartial<Theme>;
+  /**
+   * Custom theme tokens for dark mode only.
+   */
+  customDarkTheme?: DeepPartial<Theme>;
+};
+
+export const ThemeProvider = ({
+  children,
+  initialColorScheme = "light",
+  customTheme,
+  customLightTheme,
+  customDarkTheme,
+}: ThemeProviderProps) => {
+  const [colorScheme, setColorScheme] =
+    useState<ColorScheme>(initialColorScheme);
+
+  // Merge custom themes with defaults (memoized for performance)
+  const mergedLightTheme = useMemo(() => {
+    let baseLight = mergeThemeTokens(
+      lightTokens.colors,
+      typography,
+      customLightTheme
+    );
+
+    // Apply global customTheme on top if provided
+    if (customTheme) {
+      baseLight = {
+        colors: customTheme.colors
+          ? deepMerge(baseLight.colors, customTheme.colors)
+          : baseLight.colors,
+        typography: customTheme.typography
+          ? deepMerge(baseLight.typography, customTheme.typography)
+          : baseLight.typography,
+      };
+    }
+
+    return baseLight;
+  }, [customTheme, customLightTheme]);
+
+  const mergedDarkTheme = useMemo(() => {
+    let baseDark = mergeThemeTokens(
+      darkTokens.colors,
+      typography,
+      customDarkTheme
+    );
+
+    // Apply global customTheme on top if provided
+    if (customTheme) {
+      baseDark = {
+        colors: customTheme.colors
+          ? deepMerge(baseDark.colors, customTheme.colors)
+          : baseDark.colors,
+        typography: customTheme.typography
+          ? deepMerge(baseDark.typography, customTheme.typography)
+          : baseDark.typography,
+      };
+    }
+
+    return baseDark;
+  }, [customTheme, customDarkTheme]);
+
+  const theme: Theme =
+    colorScheme === "light" ? mergedLightTheme : mergedDarkTheme;
+
+  const toggleTheme = () => {
+    setColorScheme((prev) => (prev === "light" ? "dark" : "light"));
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme, colorScheme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};

package/src/UI/Theme/defaultTheme.ts

@@ -0,0 +1,12 @@
+import { Theme } from "./types";
+import { lightTokens } from "./tokens/lightTokens";
+import { typography } from "./tokens/typography";
+
+/**
+ * Default theme that combines light color tokens and typography.
+ * This is used as a fallback when no theme is provided to components.
+ */
+export const defaultTheme: Theme = {
+  colors: lightTokens.colors,
+  typography: typography,
+};

package/src/UI/Theme/helpers.ts

@@ -0,0 +1,24 @@
+import { Theme, TextStyles } from "./types";
+import { TextStyle } from "react-native";
+
+/**
+ * Get a semantic text style from the theme with resolved font family.
+ *
+ * @example
+ * <Text style={[getTextStyle(theme, "heading1"), { color: theme.colors.text.primary }]}>
+ *   Title
+ * </Text>
+ */
+export function getTextStyle(
+  theme: Theme,
+  styleName: keyof TextStyles
+): TextStyle {
+  const style = theme.typography.textStyles[styleName];
+
+  return {
+    fontFamily: style.fontFamily,
+    fontSize: style.fontSize,
+    fontWeight: style.fontWeight,
+    lineHeight: style.fontSize * style.lineHeight,
+  };
+}

package/src/UI/Theme/index.ts

@@ -0,0 +1,7 @@
+export * from "./ThemeProvider";
+export * from "./useTheme";
+export * from "./types";
+export * from "./tokens";
+export * from "./utils";
+export * from "./helpers";
+export * from "./defaultTheme";

package/src/UI/Theme/token.ts

@@ -0,0 +1,106 @@
+const lightMode = {
+  color: {
+    disable: "#6d6d6d",
+    primary: "#264653",
+    secondary: "#3d3d3d",
+    tertiary1: "#f4a261",
+    tertiary2: "#e76f51",
+    tertiary3: "#e9c46a",
+    colorsNeutralHigh: "#4f4f4f",
+    colorsNeutralHigher: "#3d3d3d",
+    colorsNeutralHighest: "#262626",
+    colorsNeutralLow: "#b0b0b0",
+    colorsNeutralLower: "#e7e7e7",
+    colorsNeutralLowest: "#f6f6f6",
+    colorsNeutralMedium: "#6d6d6d",
+    colorsSurfaceHigh: "#6d6d6d",
+    colorsSurfaceHigher: "#4f4f4f",
+    colorsSurfaceHighest: "#3d3d3d",
+    colorsSurfaceLow: "#e7e7e7",
+    colorsSurfaceLower: "#f6f6f6",
+    colorsSurfaceLowest: "#ffffff",
+    colorsSurfaceMedium: "#b0b0b0",
+    colorsSurfaceOpposite: "#262626",
+    colorsTextDisable: "#b0b0b0",
+    colorsTextOpposite: "#ffffff",
+    colorsTextPrimary: "#262626",
+    colorsTextSecondary: "#3d3d3d",
+    colorsTextTerciary: "#6d6d6d",
+  },
+};
+const darkMode = {
+  color: {
+    disable: "#6d6d6d",
+    primary: "#c8ff2f",
+    secondary: "#000000",
+    tertiary1: "#f4a261",
+    tertiary2: "#e76f51",
+    tertiary3: "#e9c46a",
+    colorsNeutralHigh: "#6d6d6d",
+    colorsNeutralHigher: "#b0b0b0",
+    colorsNeutralHighest: "#f6f6f6",
+    colorsNeutralLow: "#4f4f4f",
+    colorsNeutralLower: "#3d3d3d",
+    colorsNeutralLowest: "#262626",
+    colorsNeutralMedium: "#6d6d6d",
+    colorsSurfaceHigh: "#575757",
+    colorsSurfaceHigher: "#888888",
+    colorsSurfaceHighest: "#e7e7e7",
+    colorsSurfaceLow: "#3d3d3d",
+    colorsSurfaceLower: "#262626",
+    colorsSurfaceLowest: "#000000",
+    colorsSurfaceMedium: "#454545",
+    colorsSurfaceOpposite: "#ffffff",
+    colorsTextDisable: "#6d6d6d",
+    colorsTextOpposite: "#262626",
+    colorsTextPrimary: "#ffffff",
+    colorsTextSecondary: "#d1d1d1",
+    colorsTextTerciary: "#b0b0b0",
+  },
+};
+const brand1 = {
+  number: {
+    fontSizeXs: "12px",
+    fontSizeSm: "14px",
+    fontSizeMd: "16px",
+    fontSizeLg: "20px",
+    fontSizeXl: "24px",
+    fontSize2xl: "32px",
+    fontSize3xl: "40px",
+    fontSize4xl: "72px",
+  },
+  string: {
+    fontFamilyTagline: "Inter",
+    fontFamilyText: "Inter",
+    fontFamilyTitle: "Inter",
+    fontWeightBold: "bold",
+    fontWeightExtraBold: "extrabold",
+    fontWeightItalic: "italic",
+    fontWeightMedium: "medium",
+    fontWeightRegular: "regular",
+    fontWeightSemiBold: "semibold",
+  },
+};
+const brand2 = {
+  number: {
+    fontSizeXs: "12px",
+    fontSizeSm: "14px",
+    fontSizeMd: "16px",
+    fontSizeLg: "20px",
+    fontSizeXl: "24px",
+    fontSize2xl: "32px",
+    fontSize3xl: "40px",
+    fontSize4xl: "72px",
+  },
+  string: {
+    fontFamilyTagline: "Montserrat",
+    fontFamilyText: "ubuntu",
+    fontFamilyTitle: "ubuntu",
+    fontWeightBold: "bold",
+    fontWeightExtraBold: "extrabold",
+    fontWeightItalic: "italic",
+    fontWeightMedium: "medium",
+    fontWeightRegular: "regular",
+    fontWeightSemiBold: "semibold",
+  },
+};

package/src/UI/Theme/tokens/darkTokens.ts

@@ -0,0 +1,25 @@
+import { ColorTokens } from "../types";
+
+export const darkTokens = {
+  colors: {
+    primary: "#c8ff2f",
+    disable: "#6d6d6d",
+    neutral: {
+      high: "#6d6d6d",
+      higher: "#b0b0b0",
+      highest: "#f6f6f6",
+      low: "#4f4f4f",
+      lower: "#3d3d3d",
+      lowest: "#262626",
+      lowestest: "#000000",
+      medium: "#6d6d6d",
+    },
+    text: {
+      disable: "#6d6d6d",
+      opposite: "#262626",
+      primary: "#ffffff",
+      secondary: "#d1d1d1",
+      tertiary: "#b0b0b0",
+    },
+  },
+} satisfies { colors: ColorTokens };

package/src/UI/Theme/tokens/index.ts

@@ -0,0 +1,3 @@
+export * from "./lightTokens";
+export * from "./darkTokens";
+export * from "./typography";

package/src/UI/Theme/tokens/lightTokens.ts

@@ -0,0 +1,25 @@
+import { ColorTokens } from "../types";
+
+export const lightTokens = {
+  colors: {
+    primary: "#264653",
+    disable: "#6d6d6d",
+    neutral: {
+      high: "#4f4f4f",
+      higher: "#3d3d3d",
+      highest: "#262626",
+      low: "#b0b0b0",
+      lower: "#e7e7e7",
+      lowest: "#f6f6f6",
+      lowestest: "#ffffff",
+      medium: "#6d6d6d",
+    },
+    text: {
+      disable: "#b0b0b0",
+      opposite: "#ffffff",
+      primary: "#262626",
+      secondary: "#3d3d3d",
+      tertiary: "#6d6d6d",
+    },
+  },
+} satisfies { colors: ColorTokens };

package/src/UI/Theme/tokens/typography.ts

@@ -0,0 +1,66 @@
+import { TypographyTokens } from "../types";
+
+export const typography = {
+  fontWeight: {
+    regular: "400" as const,
+    medium: "500" as const,
+    semibold: "600" as const,
+    bold: "700" as const,
+    extrabold: "800" as const,
+  },
+  lineHeight: {
+    tight: 1.25,
+    normal: 1.3,
+    relaxed: 1.4,
+  },
+  textStyles: {
+    heading1: {
+      fontSize: 32,
+      fontWeight: "600" as const,
+      lineHeight: 1.25,
+      fontFamily: "Inter",
+    },
+    heading2: {
+      fontSize: 24,
+      fontWeight: "600" as const,
+      lineHeight: 1.3,
+      fontFamily: "Inter",
+    },
+    heading3: {
+      fontSize: 18,
+      fontWeight: "500" as const,
+      lineHeight: 1.3,
+      fontFamily: "Inter",
+    },
+    body: {
+      fontSize: 16,
+      fontWeight: "400" as const,
+      lineHeight: 1.3,
+      fontFamily: "Inter",
+    },
+    bodyMedium: {
+      fontSize: 16,
+      fontWeight: "500" as const,
+      lineHeight: 1.3,
+      fontFamily: "Inter",
+    },
+    label: {
+      fontSize: 14,
+      fontWeight: "500" as const,
+      lineHeight: 1.3,
+      fontFamily: "Inter",
+    },
+    caption: {
+      fontSize: 12,
+      fontWeight: "400" as const,
+      lineHeight: 1.3,
+      fontFamily: "Inter",
+    },
+    button: {
+      fontSize: 16,
+      fontWeight: "500" as const,
+      lineHeight: 1.5,
+      fontFamily: "Inter",
+    },
+  },
+} satisfies TypographyTokens;

package/src/UI/Theme/types.ts

@@ -0,0 +1,72 @@
+export type ColorTokens = {
+  primary: string;
+  disable: string;
+  neutral: {
+    high: string;
+    higher: string;
+    highest: string;
+    low: string;
+    lower: string;
+    lowest: string;
+    lowestest: string;
+    medium: string;
+  };
+  text: {
+    disable: string;
+    opposite: string;
+    primary: string;
+    secondary: string;
+    tertiary: string;
+  };
+};
+
+export type TextStyle = {
+  fontSize: number;
+  fontWeight: "400" | "500" | "600" | "700" | "800";
+  lineHeight: number;
+  fontFamily: string;
+};
+
+export type TextStyles = {
+  heading1: TextStyle;
+  heading2: TextStyle;
+  heading3: TextStyle;
+  body: TextStyle;
+  bodyMedium: TextStyle;
+  label: TextStyle;
+  caption: TextStyle;
+  button: TextStyle;
+};
+
+export type TypographyTokens = {
+  fontWeight: {
+    regular: "400";
+    medium: "500";
+    semibold: "600";
+    bold: "700";
+    extrabold: "800";
+  };
+  lineHeight: {
+    tight: number;
+    normal: number;
+    relaxed: number;
+  };
+  textStyles: TextStyles;
+};
+
+export type Theme = {
+  colors: ColorTokens;
+  typography: TypographyTokens;
+};
+
+export type ColorScheme = "light" | "dark";
+
+/**
+ * Deep partial utility type for nested objects.
+ * Makes all properties optional recursively.
+ */
+export type DeepPartial<T> = T extends object
+  ? {
+      [P in keyof T]?: DeepPartial<T[P]>;
+    }
+  : T;

package/src/UI/Theme/useTheme.ts

@@ -0,0 +1,22 @@
+import { useContext } from "react";
+import { ThemeContext } from "./ThemeProvider";
+import { Theme } from "./types";
+import { lightTokens, typography } from "./tokens";
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+
+  if (context === undefined) {
+    const theme: Theme = {
+      colors: lightTokens.colors,
+      typography,
+    };
+    return {
+      theme: theme,
+      colorScheme: "light",
+      toggleTheme: () => {},
+    };
+  }
+
+  return context;
+};

package/src/UI/Theme/utils.ts

@@ -0,0 +1,67 @@
+import { Theme, ColorTokens, TypographyTokens, DeepPartial } from "./types";
+
+/**
+ * Deep merge utility for theme tokens.
+ * Recursively merges custom theme values into default theme.
+ */
+export function deepMerge<T extends Record<string, any>>(
+  target: T,
+  source: DeepPartial<T> | undefined
+): T {
+  if (!source) return target;
+
+  const result = { ...target };
+
+  for (const key in source) {
+    const sourceValue = source[key];
+    const targetValue = result[key];
+
+    if (
+      sourceValue &&
+      typeof sourceValue === "object" &&
+      !Array.isArray(sourceValue) &&
+      targetValue &&
+      typeof targetValue === "object" &&
+      !Array.isArray(targetValue)
+    ) {
+      // Recursively merge nested objects
+      result[key] = deepMerge(targetValue, sourceValue);
+    } else if (sourceValue !== undefined) {
+      // Override primitive values
+      result[key] = sourceValue as any;
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Merge custom theme tokens with default tokens.
+ * Supports partial Theme objects with nested property overrides.
+ */
+export function mergeThemeTokens(
+  defaultColors: ColorTokens,
+  defaultTypography: TypographyTokens,
+  customTheme?: DeepPartial<Theme>
+): Theme {
+  if (!customTheme) {
+    return {
+      colors: defaultColors,
+      typography: defaultTypography,
+    };
+  }
+
+  // Check if customTheme has colors and/or typography
+  const hasColors = "colors" in customTheme && customTheme.colors !== undefined;
+  const hasTypography =
+    "typography" in customTheme && customTheme.typography !== undefined;
+
+  return {
+    colors: hasColors
+      ? deepMerge(defaultColors, customTheme.colors)
+      : defaultColors,
+    typography: hasTypography
+      ? deepMerge(defaultTypography, customTheme.typography)
+      : defaultTypography,
+  };
+}