@revenuecat/purchases-ui-js 0.0.16 → 0.0.18

package/dist/components/timeline/TimelineItem.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+  import {
+    getTimelineItemStyles,
+    getTimelineItemTextStyles,
+  } from "./timeline-utils";
+  import type { TimelineItemProps } from "../../data/entities";
+
+  const props: TimelineItemProps = $props();
+  const styles = $derived(getTimelineItemStyles(props));
+
+  const {
+    tagToRender: titleTagToRender,
+    textStyles: titleStyles,
+    textLabel: titleLabel,
+  } = $derived(getTimelineItemTextStyles(props, "title"));
+
+  const {
+    tagToRender: descriptionTagToRender,
+    textStyles: descriptionStyles,
+    textLabel: descriptionLabel,
+  } = $derived(getTimelineItemTextStyles(props, "description"));
+  // TODO: Object mapping icon name to icon component
+</script>
+
+<div class="rc-pw-timeline-item" style={styles}>
+  <div class="rc-pw-timeline-item-icon-container">
+    <div class="rc-pw-timeline-item-icon"></div>
+  </div>
+  <div class="rc-pw-timeline-item-content">
+    <svelte:element
+      this={titleTagToRender}
+      class="rc-pw-timeline-item-content-title"
+      style={titleStyles}>{titleLabel}</svelte:element
+    >
+    {#if descriptionLabel}
+      <svelte:element
+        this={descriptionTagToRender}
+        class="rc-pw-timeline-item-content-description"
+        style={descriptionStyles}>{descriptionLabel}</svelte:element
+      >
+    {/if}
+  </div>
+</div>
+
+<style>
+  .rc-pw-timeline-item {
+    display: flex;
+    align-items: center;
+    gap: var(--timeline-item-spacing, 0px);
+  }
+
+  .rc-pw-timeline-item-icon-container {
+    position: relative;
+    border-end-start-radius: var(--timeline-item-border-end-start-radius, 0px);
+    border-end-end-radius: var(--timeline-item-border-end-end-radius, 0px);
+    border-start-start-radius: var(
+      --timeline-item-border-start-start-radius,
+      0px
+    );
+    border-start-end-radius: var(--timeline-item-border-start-end-radius, 0px);
+    width: var(--timeline-item-icon-size, 16px);
+    height: var(--timeline-item-icon-size, 16px);
+    flex-shrink: 0;
+    background-color: var(--timeline-item-icon-background-color, #ffffff);
+    border: var(--timeline-item-icon-border, initial);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--timeline-item-icon-padding, 0px);
+    box-sizing: content-box;
+  }
+
+  .rc-pw-timeline-item-icon-container::before {
+    position: absolute;
+    content: "";
+    z-index: -1;
+    top: var(--timeline-item-connector-top, 0px);
+    height: var(--timeline-item-connector-height, 0px);
+    width: var(--timeline-item-connector-width, 0px);
+    background: var(--timeline-item-connector-color, transparent);
+  }
+
+  .rc-pw-timeline-item-icon {
+    width: var(--timeline-item-icon-size, 10px);
+    height: var(--timeline-item-icon-size, 10px);
+    color: var(--timeline-item-icon-color, #ffffff);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .rc-pw-timeline-item-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    gap: var(--timeline-item-text-spacing, 0px);
+    height: fit-content;
+  }
+  .rc-pw-timeline-item-content-title,
+  .rc-pw-timeline-item-content-description {
+    margin-block-start: var(--timeline-item-text-margin-block-start, 0px);
+    margin-inline-end: var(--timeline-item-text-margin-inline-end, 0px);
+    margin-block-end: var(--timeline-item-text-margin-block-end, 0px);
+    margin-inline-start: var(--timeline-item-text-margin-inline-start, 0px);
+    padding-block-start: var(--timeline-item-text-padding-block-start, 0);
+    padding-inline-end: var(--timeline-item-text-padding-inline-end, 0);
+    padding-block-end: var(--timeline-item-text-padding-block-end, 0);
+    padding-inline-start: var(--timeline-item-text-padding-inline-start, 0);
+    font-family: var(--timeline-item-text-font-family, sans-serif);
+  }
+</style>

package/dist/components/timeline/TimelineItem.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { TimelineItemProps } from "../../data/entities";
+declare const TimelineItem: import("svelte").Component<TimelineItemProps, {}, "">;
+type TimelineItem = ReturnType<typeof TimelineItem>;
+export default TimelineItem;

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

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

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

@@ -0,0 +1,128 @@
+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`,
+        "--width": "initial",
+        "--height": "initial",
+        "--flex": "0 1 auto",
+        "--position": "relative",
+        "--inset": "0",
+        "--transform": "initial",
+    };
+    Object.assign(styles, getSizeStyle(props.size));
+    Object.assign(styles, props.zStackChildStyles);
+    const prefixedStyles = prefixObject(styles, "timeline");
+    return stringifyStyles(prefixedStyles);
+}
+export function getTimelineItemStyles(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,
+        }),
+        "--icon-background-color": getColor({
+            colorMap: props.icon_background?.color,
+            colorMode: props.purchaseState.colorMode,
+        }),
+        "--icon-border": getBorderStyle(props.icon_background?.border, props.purchaseState?.colorMode),
+        "--text-spacing": `${props.text_spacing}px`,
+        "--border-start-start-radius": `0px`,
+        "--border-start-end-radius": `0px`,
+        "--border-end-start-radius": `0px`,
+        "--border-end-end-radius": `0px`,
+        "--connector-color": getColor({
+            colorMap: props.connector?.color,
+            colorMode: props.purchaseState.colorMode,
+        }),
+        "--connector-width": `${props.connector?.width || 0}px`,
+        "--connector-top": "0px",
+        "--connector-height": `${props.item_spacing}px`,
+    };
+    Object.assign(styles, props.icon_background?.shape?.type === "rectangle"
+        ? getCornerRadiusStyle(props.icon_background?.shape?.corners)
+        : {
+            "--border-start-start-radius": "50%",
+            "--border-start-end-radius": "50%",
+            "--border-end-start-radius": "50%",
+            "--border-end-end-radius": "50%",
+        });
+    if (props.connector) {
+        const hasMarginTop = props.connector.margin.top !== 0;
+        const hasMarginBottom = props.connector.margin.bottom !== 0;
+        const itemBackgroundSize = props.icon.padding + props.icon.width_and_height / 2;
+        if (!hasMarginTop && !hasMarginBottom) {
+            styles["--connector-height"] =
+                `${props.item_spacing + itemBackgroundSize * 2}px`;
+            styles["--connector-top"] = `50%`;
+        }
+        if (hasMarginTop && hasMarginBottom) {
+            styles["--connector-height"] =
+                `${props.item_spacing - props.connector.margin.top - props.connector.margin.bottom}px`;
+            styles["--connector-top"] =
+                `calc(100% + ${props.connector.margin.top}px)`;
+        }
+        if (!hasMarginTop && hasMarginBottom) {
+            styles["--connector-height"] =
+                `${props.item_spacing - props.connector.margin.bottom + itemBackgroundSize}px`;
+            styles["--connector-top"] = `50%`;
+        }
+        if (hasMarginTop && !hasMarginBottom) {
+            styles["--connector-height"] =
+                `${props.item_spacing + itemBackgroundSize}px`;
+            styles["--connector-top"] =
+                `calc(100% + ${props.connector.margin.top}px)`;
+        }
+    }
+    const prefixedStyles = prefixObject(styles, "timeline-item");
+    return stringifyStyles(prefixedStyles);
+}
+export function getTimelineItemTextStyles(props, kind = "title") {
+    const styles = {
+        "--text-color": "inherit",
+        "--text-font-size": "initial",
+        "--text-font-weight": "initial",
+        "--text-horizontal-alignment": "initial",
+        "--text-margin-block-start": "0px",
+        "--text-margin-inline-end": "0px",
+        "--text-margin-block-end": "0px",
+        "--text-margin-inline-start": "0px",
+        "--text-padding-block-start": "0px",
+        "--text-padding-inline-end": "0px",
+        "--text-padding-block-end": "0px",
+        "--text-padding-inline-start": "0px",
+    };
+    const textProps = {
+        color: props[kind]?.color || defaultColor,
+        font_size: props[kind]?.font_size || "body_m",
+        font_weight: props[kind]?.font_weight || "regular",
+        horizontal_alignment: props[kind]?.horizontal_alignment || "leading",
+    };
+    const { tagToRender, textStyles } = getTextComponentStyles({
+        ...props,
+        components: [],
+        ...textProps,
+        size: { width: { type: "fit" }, height: { type: "fit" } },
+        type: "text",
+        margin: { top: 0, bottom: 0, leading: 0, trailing: 0 },
+        padding: { top: 0, bottom: 0, leading: 0, trailing: 0 },
+        text_lid: "",
+    });
+    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,14 +1,16 @@
-import type { BorderType, ColorMode, ColorType, CornerRadiusType, DimensionType, FitTypes, FontSizeTags, FontWeights, ShadowType, ShapeType, SizeType, Spacing, TextAlignment } from "../types";
+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";
+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;
@@ -21,6 +23,8 @@ type BaseNodeBackgroundColor = {
 export type BaseNodeBackgroundImage = {
     type: "image";
     value: ImageSourceType;
+    color_overlay?: ColorType;
+    fit_mode?: FitTypes;
 };
 export type BaseNodeBackgroundType = BaseNodeBackgroundColor | BaseNodeBackgroundImage;
 export interface ComponentConfig {
@@ -38,10 +42,10 @@ export interface ComponentConfig {
         background?: BaseNodeBackgroundType;
         stack: Stack;
         sticky_footer?: {
-            stack: {
-                type: "stack";
-                components: PaywallComponent[];
-            };
+            stack: Stack;
+            id: string;
+            name: string;
+            type: "footer";
         } | null;
     };
 }
@@ -67,10 +71,10 @@ export type ComponentState = {
 interface SharedComponentProps extends PaywallComponent, ActionsProps, PurchaseStateProps {
     labels: ComponentLocalizations;
     id: string;
-    colorMode: ColorMode;
     name: string;
     variableDictionary?: VariableDictionary;
     componentState?: ComponentState;
+    zStackChildStyles?: ZStackChildStyles;
 }
 interface Action {
     type: "restore_purchases" | "navigate_to" | "navigate_back" | "purchase" | "select_package";
@@ -127,6 +131,24 @@ export interface StackProps extends SharedComponentProps {
     size: SizeType;
     spacing?: number;
     type: "stack";
+    badge?: {
+        stack: {
+            components: PaywallComponent[];
+            type: "stack";
+        };
+        style: "overlay" | "edge_to_edge" | "nested";
+        alignment: Exclude<AlignmentType, "center">;
+        shape: ShapeType;
+        padding: Spacing;
+        margin: Spacing;
+        text_lid: string;
+        color: ColorType;
+        font_name?: string;
+        font_weight: keyof typeof FontWeights;
+        font_size: keyof typeof FontSizeTags;
+        horizontal_alignment: keyof typeof TextAlignments;
+        background_color: ColorType;
+    };
     overrides?: {
         [state: string]: StackProps;
     };
@@ -138,7 +160,7 @@ export interface TextNodeProps extends SharedComponentProps {
     font_name?: string;
     font_size: keyof typeof FontSizeTags;
     font_weight: keyof typeof FontWeights;
-    horizontal_alignment: TextAlignment;
+    horizontal_alignment: keyof typeof TextAlignments;
     margin: Spacing;
     padding: Spacing;
     text_lid: string;
@@ -149,7 +171,15 @@ export interface TextNodeProps extends SharedComponentProps {
         [state: string]: TextNodeProps;
     };
 }
-type ImageSourceDictionaryType = Record<"original" | "heic" | "heic_low_res" | "webp" | "webp_low_res", string>;
+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;
@@ -171,4 +201,54 @@ export interface ImageProps extends SharedComponentProps {
         [state: string]: ImageProps;
     };
 }
+export type ItemProps = {
+    title: {
+        text_lid: string;
+        color: ColorType;
+        font_name?: string;
+        font_weight?: keyof typeof FontWeights;
+        font_size?: keyof typeof FontSizeTags;
+        horizontal_alignment?: keyof typeof TextAlignments;
+    };
+    description?: {
+        text_lid: string;
+        color: ColorType;
+        font_name?: string;
+        font_weight?: keyof typeof FontWeights;
+        font_size?: keyof typeof FontSizeTags;
+        horizontal_alignment?: keyof typeof TextAlignments;
+    };
+    icon: {
+        name: string;
+        color: ColorType;
+        width_and_height: number;
+        padding: number;
+    };
+    icon_background?: {
+        shape: CircleShape | RectangleShape;
+        color: ColorType;
+        border?: BorderType;
+    };
+    connector?: {
+        width: number;
+        margin: {
+            top: number;
+            bottom: number;
+        };
+        color: ColorType;
+    };
+};
+export interface TimelineProps extends SharedComponentProps {
+    type: "timeline";
+    item_spacing: number;
+    text_spacing: number;
+    size: SizeType;
+    padding: Spacing;
+    margin: Spacing;
+    items: ItemProps[];
+}
+export interface TimelineItemProps extends ItemProps, SharedComponentProps {
+    text_spacing: number;
+    item_spacing: number;
+}
 export {};

package/dist/data/state.d.ts

@@ -1,7 +1,9 @@
+import type { ColorMode } from "../types";
 import type { VariableDictionary } from "../utils/variable-utils";
 export interface PurchaseState {
     selectedPackageId?: string;
     locale: string;
     defaultLocale: string;
     variablesPerPackage?: Record<string, VariableDictionary>;
+    colorMode: ColorMode;
 }

package/dist/index.d.ts

@@ -1,5 +1,6 @@
-export { type PaywallData as PaywallData } from "./data/entities";
 export * from "./types";
+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 Button } from "./components/button/Button.svelte";
@@ -8,4 +9,4 @@ 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 { type VariableDictionary } from "./utils/variable-utils";
+export { default as Timeline } from "./components/timeline/Timeline.svelte";

package/dist/index.js

@@ -1,6 +1,7 @@
 // Reexport your entry components here
-export {} from "./data/entities";
 export * from "./types";
+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 Button } from "./components/button/Button.svelte";
@@ -9,4 +10,4 @@ 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 {} from "./utils/variable-utils";
+export { default as Timeline } from "./components/timeline/Timeline.svelte";

package/dist/stories/fixtures.d.ts

@@ -8,11 +8,17 @@ export declare const gradientPaywallData: PaywallData;
 export declare const calmPaywallData: PaywallData;
 export declare const stateTemplate: PaywallData;
 export declare const posterMakerTemplate: PaywallData;
-export declare const testTemplate: PaywallData;
+export declare const e2eTestTemplate: PaywallData;
+export declare const zStackTemplate: PaywallData;
 export declare const labelsData: {
     en_US: {
         id1: string;
         id2: string;
         id3: string;
+        badge: string;
     };
 };
+export declare const colorModeOverrideTemplate: PaywallData;
+export declare const paywallWithFooter: PaywallData;
+export declare const errorPaywallData: PaywallData;
+export declare const fallbackPaywallData: PaywallData;