@revenuecat/purchases-ui-js 2.0.0 → 2.0.2

package/dist/components/timeline/TimelineItem.svelte

@@ -4,21 +4,38 @@
     getTimelineItemTextStyles,
   } from "./timeline-utils";
   import type { TimelineItemProps } from "../../data/entities";
+  import { getColorModeContext } from "../../stores/color-mode";
+  import { getLocalizationContext } from "../../stores/localization";
+  import { getVariablesContext } from "../../stores/variables";
+  import { replaceVariables } from "../../utils/variable-utils";
 
   const props: TimelineItemProps = $props();
-  const styles = $derived(getTimelineItemStyles(props));
 
-  const {
-    tagToRender: titleTagToRender,
-    textStyles: titleStyles,
-    textLabel: titleLabel,
-  } = $derived(getTimelineItemTextStyles(props, "title"));
+  const getColorMode = getColorModeContext();
+  const colorMode = $derived(getColorMode());
 
-  const {
-    tagToRender: descriptionTagToRender,
-    textStyles: descriptionStyles,
-    textLabel: descriptionLabel,
-  } = $derived(getTimelineItemTextStyles(props, "description"));
+  const styles = $derived(getTimelineItemStyles(colorMode, props));
+
+  const { getLocalizedString } = getLocalizationContext();
+
+  const variables = getVariablesContext();
+  const titleLabel = $derived(
+    replaceVariables(getLocalizedString(props.title.text_lid), $variables),
+  );
+
+  const descriptionLabel = $derived(
+    replaceVariables(
+      getLocalizedString(props.description?.text_lid),
+      $variables,
+    ),
+  );
+
+  const { tagToRender: titleTagToRender, textStyles: titleStyles } = $derived(
+    getTimelineItemTextStyles(colorMode, props, "title"),
+  );
+
+  const { tagToRender: descriptionTagToRender, textStyles: descriptionStyles } =
+    $derived(getTimelineItemTextStyles(colorMode, props, "description"));
   // TODO: Object mapping icon name to icon component
 </script>
 

package/dist/components/timeline/timeline-utils.d.ts

@@ -1,8 +1,8 @@
 import type { TimelineItemProps, TimelineProps } from "../../data/entities";
+import type { ColorMode } from "../../types";
 export declare function getTimelineStyles(props: TimelineProps): string;
-export declare function getTimelineItemStyles(props: TimelineItemProps): string;
-export declare function getTimelineItemTextStyles(props: TimelineItemProps, kind?: "title" | "description"): {
+export declare function getTimelineItemStyles(colorMode: ColorMode, props: TimelineItemProps): string;
+export declare function getTimelineItemTextStyles(colorMode: ColorMode, props: TimelineItemProps, kind?: "title" | "description"): {
     textStyles: string;
     tagToRender: import("../../utils/style-utils").TextComponentTags;
-    textLabel: string | undefined;
 };

package/dist/components/timeline/timeline-utils.js

@@ -1,6 +1,5 @@
 import { defaultColor, getTextComponentStyles, } from "../text/text-utils";
 import { getBorderStyle, getColor, getCornerRadiusStyle, getSizeStyle, prefixObject, stringifyStyles, } from "../../utils/style-utils";
-import { getLabelAndReplaceVariables } from "../../utils/variable-utils";
 export function getTimelineStyles(props) {
     const styles = {
         "--item-spacing": `${props.item_spacing}px`,
@@ -16,19 +15,19 @@ export function getTimelineStyles(props) {
     const prefixedStyles = prefixObject(styles, "timeline");
     return stringifyStyles(prefixedStyles);
 }
-export function getTimelineItemStyles(props) {
+export function getTimelineItemStyles(colorMode, props) {
     const styles = {
         "--icon-size": `${props.icon.width_and_height}px`,
         "--icon-padding": `${props.icon.padding}px`,
         "--icon-color": getColor({
             colorMap: props.icon.color,
-            colorMode: props.purchaseState?.colorMode,
+            colorMode,
         }),
         "--icon-background-color": getColor({
             colorMap: props.icon_background?.color,
-            colorMode: props.purchaseState.colorMode,
+            colorMode,
         }),
-        "--icon-border": getBorderStyle(props.icon_background?.border, props.purchaseState?.colorMode),
+        "--icon-border": getBorderStyle(props.icon_background?.border, colorMode),
         "--text-spacing": `${props.text_spacing}px`,
         "--border-start-start-radius": `0px`,
         "--border-start-end-radius": `0px`,
@@ -36,7 +35,7 @@ export function getTimelineItemStyles(props) {
         "--border-end-end-radius": `0px`,
         "--connector-color": getColor({
             colorMap: props.connector?.color,
-            colorMode: props.purchaseState.colorMode,
+            colorMode,
         }),
         "--connector-width": `${props.connector?.width || 0}px`,
         "--connector-top": "0px",
@@ -80,7 +79,7 @@ export function getTimelineItemStyles(props) {
     const prefixedStyles = prefixObject(styles, "timeline-item");
     return stringifyStyles(prefixedStyles);
 }
-export function getTimelineItemTextStyles(props, kind = "title") {
+export function getTimelineItemTextStyles(colorMode, props, kind = "title") {
     const styles = {
         "--text-color": "inherit",
         "--text-font-size": "initial",
@@ -101,9 +100,8 @@ export function getTimelineItemTextStyles(props, kind = "title") {
         font_weight: props[kind]?.font_weight || "regular",
         horizontal_alignment: props[kind]?.horizontal_alignment || "leading",
     };
-    const { tagToRender, textStyles } = getTextComponentStyles({
+    const { tagToRender, textStyles } = getTextComponentStyles(colorMode, {
         ...props,
-        components: [],
         ...textProps,
         size: { width: { type: "fit" }, height: { type: "fit" } },
         type: "text",
@@ -113,16 +111,8 @@ export function getTimelineItemTextStyles(props, kind = "title") {
     });
     Object.assign(styles, textStyles);
     const stringifiedStyles = stringifyStyles(prefixObject(styles, "timeline-item"));
-    const textLabel = getLabelAndReplaceVariables({
-        text_lid: props[kind]?.text_lid,
-        locale: props.purchaseState.locale,
-        defaultLocale: props.purchaseState.defaultLocale,
-        labels: props.labels,
-        variableDictionary: props.variableDictionary,
-    });
     return {
         textStyles: stringifiedStyles,
         tagToRender,
-        textLabel,
     };
 }

package/dist/data/entities.d.ts

@@ -1,32 +1,17 @@
-import type { AlignmentType, BorderType, CircleShape, ColorType, CornerRadiusType, DimensionType, FitTypes, FontSizeTags, FontWeights, RectangleShape, ShadowType, ShapeType, SizeType, Spacing, TextAlignments } from "../types";
-import type { PurchaseState } from "./state";
-import type { VariableDictionary } from "../utils/variable-utils";
 import type { ZStackChildStyles } from "../components/stack/stack-utils";
-export interface Extra {
-    [key: string]: unknown;
-}
-export type ComponentTypes = "stack" | "text" | "image" | "button" | "purchase_button" | "footer" | "package" | "timeline";
-export interface PaywallComponent extends Extra {
-    type: ComponentTypes;
-    id: string;
-    name: string;
-    fallback?: PaywallComponent;
-}
-export interface Stack extends PaywallComponent {
-    spacing: number;
-    components: PaywallComponent[];
+import type { AlignmentType, BorderType, CircleShape, CornerRadiusType, FontSizeTags, FontWeights, RectangleShape, ShadowType, ShapeType, SizeType, Spacing, TextAlignments } from "../types";
+import type { Dimension } from "../types/alignment";
+import type { Background } from "../types/background";
+import type { ColorGradientScheme, ColorScheme } from "../types/colors";
+import type { Component } from "../types/component";
+import type { FooterProps } from "../types/components/footer";
+import type { Localizations } from "../types/localization";
+import type { ImageInfo, ImageObjectFit } from "../types/media";
+export interface RootPaywall {
+    background?: Background;
+    stack: StackProps;
+    sticky_footer?: FooterProps | null;
 }
-type BaseNodeBackgroundColor = {
-    type: "color";
-    value: ColorType;
-};
-export type BaseNodeBackgroundImage = {
-    type: "image";
-    value: ImageSourceType;
-    color_overlay?: ColorType;
-    fit_mode?: FitTypes;
-};
-export type BaseNodeBackgroundType = BaseNodeBackgroundColor | BaseNodeBackgroundImage;
 export interface ComponentConfig {
     colors?: Record<string, string>;
     fonts?: {
@@ -37,130 +22,69 @@ export interface ComponentConfig {
         };
     };
     asset_base_url?: string;
-    base: {
-        default_font_name?: string;
-        background?: BaseNodeBackgroundType;
-        stack: Stack;
-        sticky_footer?: {
-            stack: Stack;
-            id: string;
-            name: string;
-            type: "footer";
-        } | null;
-    };
+    base: RootPaywall;
 }
-export interface ComponentLocalizations extends Extra {
-    [locale: string]: {
-        [label_id: string]: string;
-    };
-}
-export interface PaywallData extends Extra {
-    components_config: ComponentConfig;
-    components_localizations: ComponentLocalizations;
+export interface PaywallData {
     default_locale: string;
-}
-export interface ActionsProps {
-    onAction?: (action: SupportedActions, data?: Extra) => void;
-}
-export interface PurchaseStateProps {
-    purchaseState: PurchaseState;
+    components_config: ComponentConfig;
+    components_localizations: Localizations;
 }
 export type ComponentState = {
     [state: string]: boolean;
 };
-interface SharedComponentProps extends PaywallComponent, ActionsProps, PurchaseStateProps {
-    labels: ComponentLocalizations;
+export interface BaseComponent {
+    type: string;
     id: string;
     name: string;
-    variableDictionary?: VariableDictionary;
+    fallback?: Component;
     componentState?: ComponentState;
     zStackChildStyles?: ZStackChildStyles;
 }
-interface Action {
-    type: "restore_purchases" | "navigate_to" | "navigate_back" | "purchase" | "select_package";
-}
-type OverrideProps<T> = {
+export type OverrideProps<T> = {
     states?: {
         [state: string]: T;
     };
 };
-export interface RestorePurchasesAction extends Action {
-    type: "restore_purchases";
-}
-export interface NavigateBackAction extends Action {
-    type: "navigate_back";
-}
-export interface NavigateToAction extends Action {
-    type: "navigate_to";
-    destination: "customer_center" | "privacy_policy" | "terms" | "url";
-    url?: {
-        url_lid: string;
-        method: "in_app_browser" | "external_browser" | "deep_link";
-    };
-}
-export interface PurchaseAction extends Action {
-    type: "purchase";
-}
-export interface SelectPackageAction extends Action {
-    type: "select_package";
-}
-export type SupportedActions = RestorePurchasesAction | NavigateBackAction | NavigateToAction | PurchaseAction | SelectPackageAction;
-export interface ButtonNodeProps extends SharedComponentProps {
-    type: "button";
-    action: SupportedActions;
-    stack: StackProps;
-}
-export interface PurchaseButtonProps extends SharedComponentProps {
-    type: "purchase_button";
-    stack: StackProps;
-}
-export interface FooterProps extends SharedComponentProps {
-    type: "footer";
-    stack: StackProps;
-}
-export interface PackageProps extends SharedComponentProps {
-    type: "package";
-    stack: StackProps;
-    package_id: string;
-    is_selected_by_default: boolean;
-}
-export interface StackProps extends SharedComponentProps {
-    background_color?: ColorType;
-    border?: BorderType;
-    components: PaywallComponent[];
-    dimension: DimensionType;
+export interface StackProps extends BaseComponent {
+    type: "stack";
+    visible?: boolean | null;
+    components: Component[];
+    size: SizeType;
+    dimension: Dimension;
+    spacing: number;
     margin: Spacing;
     padding: Spacing;
-    shadow?: ShadowType;
-    shape?: ShapeType;
-    size: SizeType;
-    spacing?: number;
-    type: "stack";
-    badge?: {
+    background_color: ColorGradientScheme | null;
+    background: Background | null;
+    border: BorderType | null;
+    shape: ShapeType | null;
+    shadow: ShadowType | null;
+    badge?: null | {
         stack: {
-            components: PaywallComponent[];
+            components: Component[];
             type: "stack";
         };
         style: "overlay" | "edge_to_edge" | "nested";
         alignment: Exclude<AlignmentType, "center">;
-        shape: ShapeType;
+        border?: BorderType | null;
+        shape: ShapeType | null;
+        shadow?: ShadowType | null;
         padding: Spacing;
         margin: Spacing;
         text_lid: string;
-        color: ColorType;
+        color: ColorScheme;
         font_name?: string;
         font_weight: keyof typeof FontWeights;
         font_size: keyof typeof FontSizeTags;
         horizontal_alignment: keyof typeof TextAlignments;
-        background_color: ColorType;
+        background_color: ColorGradientScheme;
     };
     overrides?: OverrideProps<StackProps>;
 }
-export interface TextNodeProps extends SharedComponentProps {
-    background_color?: ColorType;
-    color: ColorType;
-    components: PaywallComponent[];
-    font_name?: string;
+export interface TextNodeProps extends BaseComponent {
+    background_color?: ColorGradientScheme | null;
+    color: ColorScheme;
+    font_name?: string | null;
     font_size: keyof typeof FontSizeTags;
     font_weight: keyof typeof FontWeights;
     horizontal_alignment: keyof typeof TextAlignments;
@@ -169,32 +93,18 @@ export interface TextNodeProps extends SharedComponentProps {
     text_lid: string;
     type: "text";
     size: SizeType;
-    variableDictionary?: VariableDictionary;
     overrides?: OverrideProps<TextNodeProps>;
 }
-type ImageSourceDictionaryType = {
-    original: string;
-    heic: string;
-    heic_low_res: string;
-    webp: string;
-    webp_low_res: string;
-    width?: number;
-    height?: number;
-};
-type ImageSourceType = {
-    light: ImageSourceDictionaryType;
-    dark?: ImageSourceDictionaryType;
-};
 export interface ImageMaskShapeType {
     type: "circle" | "rectangle" | "concave" | "convex";
     corners?: CornerRadiusType;
 }
-export interface ImageProps extends SharedComponentProps {
+export interface ImageProps extends BaseComponent {
     type: "image";
-    fit_mode: FitTypes;
+    fit_mode: ImageObjectFit;
     size: SizeType;
-    source: ImageSourceType;
-    color_overlay?: ColorType;
+    source: ImageInfo;
+    color_overlay?: ColorGradientScheme | null;
     mask_shape?: ImageMaskShapeType;
     max_height?: number;
     override_source_lid?: string;
@@ -203,7 +113,7 @@ export interface ImageProps extends SharedComponentProps {
 export type ItemProps = {
     title: {
         text_lid: string;
-        color: ColorType;
+        color: ColorScheme;
         font_name?: string;
         font_weight?: keyof typeof FontWeights;
         font_size?: keyof typeof FontSizeTags;
@@ -211,7 +121,7 @@ export type ItemProps = {
     };
     description?: {
         text_lid: string;
-        color: ColorType;
+        color: ColorScheme;
         font_name?: string;
         font_weight?: keyof typeof FontWeights;
         font_size?: keyof typeof FontSizeTags;
@@ -219,13 +129,13 @@ export type ItemProps = {
     };
     icon: {
         name: string;
-        color: ColorType;
+        color: ColorScheme;
         width_and_height: number;
         padding: number;
     };
     icon_background?: {
         shape: CircleShape | RectangleShape;
-        color: ColorType;
+        color: ColorScheme;
         border?: BorderType;
     };
     connector?: {
@@ -234,10 +144,10 @@ export type ItemProps = {
             top: number;
             bottom: number;
         };
-        color: ColorType;
+        color: ColorGradientScheme;
     };
 };
-export interface TimelineProps extends SharedComponentProps {
+export interface TimelineProps extends BaseComponent {
     type: "timeline";
     item_spacing: number;
     text_spacing: number;
@@ -246,8 +156,7 @@ export interface TimelineProps extends SharedComponentProps {
     margin: Spacing;
     items: ItemProps[];
 }
-export interface TimelineItemProps extends ItemProps, SharedComponentProps {
+export interface TimelineItemProps extends ItemProps, BaseComponent {
     text_spacing: number;
     item_spacing: number;
 }
-export {};

package/dist/index.d.ts

@@ -1,14 +1,14 @@
-export * from "./types";
-export * from "./ui/globals";
-export { type PaywallData as PaywallData } from "./data/entities";
-export { type VariableDictionary } from "./utils/variable-utils";
-export { default as Paywall } from "./components/paywall/Paywall.svelte";
-export { default as Stack } from "./components/stack/Stack.svelte";
 export { default as ButtonDeprecated } from "./components/button/Button.svelte";
-export { default as Button } from "./ui/molecules/button.svelte";
-export { default as Text } from "./components/text/Text.svelte";
+export { default as Footer } from "./components/footer/Footer.svelte";
 export { default as Image } from "./components/image/Image.svelte";
-export { default as PurchaseButton } from "./components/purchase-button/PurchaseButton.svelte";
 export { default as Package } from "./components/package/Package.svelte";
-export { default as Footer } from "./components/footer/Footer.svelte";
+export { default as Paywall } from "./components/paywall/Paywall.svelte";
+export { default as PurchaseButton } from "./components/purchase-button/PurchaseButton.svelte";
+export { default as Stack } from "./components/stack/Stack.svelte";
+export { default as Text } from "./components/text/Text.svelte";
 export { default as Timeline } from "./components/timeline/Timeline.svelte";
+export { type PaywallData as PaywallData } from "./data/entities";
+export * from "./types";
+export * from "./ui/globals";
+export { default as Button } from "./ui/molecules/button.svelte";
+export { type VariableDictionary } from "./utils/variable-utils";

package/dist/index.js

@@ -1,15 +1,15 @@
 // Reexport your entry components here
-export * from "./types";
-export * from "./ui/globals";
-export {} from "./data/entities";
-export {} from "./utils/variable-utils";
-export { default as Paywall } from "./components/paywall/Paywall.svelte";
-export { default as Stack } from "./components/stack/Stack.svelte";
 export { default as ButtonDeprecated } from "./components/button/Button.svelte";
-export { default as Button } from "./ui/molecules/button.svelte";
-export { default as Text } from "./components/text/Text.svelte";
+export { default as Footer } from "./components/footer/Footer.svelte";
 export { default as Image } from "./components/image/Image.svelte";
-export { default as PurchaseButton } from "./components/purchase-button/PurchaseButton.svelte";
 export { default as Package } from "./components/package/Package.svelte";
-export { default as Footer } from "./components/footer/Footer.svelte";
+export { default as Paywall } from "./components/paywall/Paywall.svelte";
+export { default as PurchaseButton } from "./components/purchase-button/PurchaseButton.svelte";
+export { default as Stack } from "./components/stack/Stack.svelte";
+export { default as Text } from "./components/text/Text.svelte";
 export { default as Timeline } from "./components/timeline/Timeline.svelte";
+export {} from "./data/entities";
+export * from "./types";
+export * from "./ui/globals";
+export { default as Button } from "./ui/molecules/button.svelte";
+export {} from "./utils/variable-utils";

package/dist/stores/color-mode.d.ts

@@ -0,0 +1,6 @@
+import type { ColorMode } from "../types";
+export type ColorModeOverride = () => ColorMode | undefined;
+type GetColorMode = () => ColorMode;
+export declare function setColorModeContext(colorModeOverride?: ColorModeOverride): GetColorMode;
+export declare function getColorModeContext(): GetColorMode;
+export {};

package/dist/stores/color-mode.js

@@ -0,0 +1,15 @@
+import { DEFAULT_COLOR_MODE } from "../utils/constants";
+import { getContext, setContext } from "svelte";
+import { MediaQuery } from "svelte/reactivity";
+const key = Symbol("color-mode");
+export function setColorModeContext(colorModeOverride) {
+    const prefersDarkMode = new MediaQuery("prefers-color-scheme: dark", (colorModeOverride?.() ?? DEFAULT_COLOR_MODE) === "dark");
+    const context = () => colorModeOverride?.() ??
+        (prefersDarkMode.current ? "dark" : DEFAULT_COLOR_MODE);
+    setContext(key, context);
+    return context;
+}
+export function getColorModeContext() {
+    const context = getContext(key);
+    return context ?? (() => DEFAULT_COLOR_MODE);
+}

package/dist/stores/localization.d.ts

@@ -0,0 +1,13 @@
+import type { Localizations } from "../types/localization";
+type GetLocalizedString = (id?: string) => string | undefined;
+interface LocalizationContext {
+    getLocalizedString: GetLocalizedString;
+}
+export interface LocalizationContextProps {
+    defaultLocale: string;
+    selectedLocale?: string;
+    localizations: Localizations;
+}
+export declare function setLocalizationContext(props: () => LocalizationContextProps): LocalizationContext;
+export declare function getLocalizationContext(): LocalizationContext;
+export {};

package/dist/stores/localization.js

@@ -0,0 +1,26 @@
+import { getContext, setContext } from "svelte";
+const key = Symbol("localization");
+export function setLocalizationContext(props) {
+    const getLocalizedString = (id) => {
+        if (!id) {
+            return "";
+        }
+        const { selectedLocale, defaultLocale, localizations } = props();
+        const locale = selectedLocale ?? defaultLocale;
+        const selected = localizations[locale]?.[id];
+        const fallback = localizations[defaultLocale]?.[id];
+        return selected ?? fallback;
+    };
+    const context = {
+        getLocalizedString,
+    };
+    setContext(key, context);
+    return context;
+}
+export function getLocalizationContext() {
+    const context = getContext(key);
+    if (context === undefined) {
+        throw new Error("Localization context not found");
+    }
+    return context;
+}

package/dist/stores/paywall.d.ts

@@ -0,0 +1,11 @@
+import type { Action } from "../types/components/button";
+import type { VariableDictionary } from "../utils/variable-utils";
+import { type Readable, type Writable } from "svelte/store";
+export type PaywallContext = Readonly<{
+    selectedPackageId: Writable<string | undefined>;
+    variablesPerPackage: Readable<Record<string, VariableDictionary> | undefined>;
+    onPurchase: () => void;
+    onButtonAction: (action: Action) => void;
+}>;
+export declare function setPaywallContext(context: PaywallContext): void;
+export declare function getPaywallContext(): PaywallContext;

package/dist/stores/paywall.js

@@ -0,0 +1,13 @@
+import { getContext, setContext } from "svelte";
+import {} from "svelte/store";
+const key = Symbol("paywall");
+export function setPaywallContext(context) {
+    setContext(key, context);
+}
+export function getPaywallContext() {
+    const context = getContext(key);
+    if (context === undefined) {
+        throw new Error("Paywall context not found");
+    }
+    return context;
+}

package/dist/stores/variables.d.ts

@@ -0,0 +1,5 @@
+import { type VariableDictionary } from "../utils/variable-utils";
+import { type Readable } from "svelte/store";
+export type VariablesStore = Readable<VariableDictionary | undefined>;
+export declare function setVariablesContext(variables: VariablesStore): void;
+export declare function getVariablesContext(): VariablesStore;

package/dist/stores/variables.js

@@ -0,0 +1,14 @@
+import {} from "../utils/variable-utils";
+import { getContext, setContext } from "svelte";
+import {} from "svelte/store";
+const key = Symbol("variables");
+export function setVariablesContext(variables) {
+    setContext(key, variables);
+}
+export function getVariablesContext() {
+    const context = getContext(key);
+    if (context === undefined) {
+        throw new Error("Variables context not found");
+    }
+    return context;
+}

package/dist/stories/fixtures.d.ts

@@ -10,7 +10,7 @@ export declare const calmPaywallData: PaywallData;
 export declare const stateTemplate: PaywallData;
 export declare const posterMakerTemplate: PaywallData;
 export declare const zStackTemplate: PaywallData;
-export declare const labelsData: {
+export declare const localizations: {
     en_US: {
         id1: string;
         id2: string;