@revenuecat/purchases-ui-js 0.0.15 → 0.0.17

package/dist/components/timeline/TimelineItem.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+  import {
+    getTimelineItemStyles,
+    getTimelineItemTextStyles,
+  } from "./timeline-utils";
+  import type { TimelineItemProps } from "../../data/entities";
+  import { stringifyStyles } from "../../utils/style-utils";
+
+  const props: TimelineItemProps = $props();
+  const styles = $derived(stringifyStyles(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="timeline-item" style={styles}>
+  <div class="timeline-item-icon-container">
+    <div class="timeline-item-icon"></div>
+  </div>
+  <div class="timeline-item-content">
+    <svelte:element
+      this={titleTagToRender}
+      class="timeline-item-content-title"
+      style={titleStyles}>{titleLabel}</svelte:element
+    >
+    {#if descriptionLabel}
+      <svelte:element
+        this={descriptionTagToRender}
+        class="timeline-item-content-description"
+        style={descriptionStyles}>{descriptionLabel}</svelte:element
+      >
+    {/if}
+  </div>
+</div>
+
+<style>
+  .timeline-item {
+    display: flex;
+    align-items: center;
+    gap: var(--item-spacing, 0px);
+  }
+
+  .timeline-item-icon-container {
+    position: relative;
+    border-radius: var(--icon-border-radius, 0px);
+    width: var(--icon-size, 16px);
+    height: var(--icon-size, 16px);
+    flex-shrink: 0;
+    background-color: var(--icon-background-color, #ffffff);
+    border: var(--icon-border, unset);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--icon-padding, 0px);
+  }
+
+  .timeline-item-icon-container::before {
+    position: absolute;
+    content: "";
+    z-index: -1;
+    top: var(--connector-top, 0px);
+    height: var(--connector-height, 0px);
+    width: var(--connector-width, 0px);
+    background: var(--connector-color, transparent);
+  }
+
+  .timeline-item-icon {
+    width: var(--icon-width, 10px);
+    height: var(--icon-height, 10px);
+    color: var(--icon-color, #ffffff);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .timeline-item-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    gap: var(--text-spacing, 0px);
+    height: fit-content;
+  }
+  .timeline-item-content-title,
+  .timeline-item-content-description {
+    margin: var(--text-margin, 0px);
+    padding: var(--text-padding, 0px);
+    font-family: var(--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,25 @@
+import type { TimelineItemProps, TimelineProps } from "../../data/entities";
+export declare function getTimelineStyles(props: TimelineProps): {
+    "--item-spacing": string;
+    "--width": string;
+    "--height": string;
+    "--flex": string;
+};
+export declare function getTimelineItemStyles(props: TimelineItemProps): {
+    "--icon-size": string;
+    "--icon-padding": string;
+    "--icon-color": string;
+    "--text-spacing": string;
+    "--icon-background-color": string;
+    "--icon-border": string;
+    "--icon-border-radius": string;
+    "--connector-color": string;
+    "--connector-width": string;
+    "--connector-top": string;
+    "--connector-height": string;
+};
+export declare function getTimelineItemTextStyles(props: TimelineItemProps, kind?: "title" | "description"): {
+    textStyles: string;
+    tagToRender: Partial<import("../../utils/style-utils").TextComponentTags>;
+    textLabel: string | undefined;
+};

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

@@ -0,0 +1,93 @@
+import { defaultColor, getTextComponentStyles, } from "../text/text-utils";
+import { getBorderStyle, getColor, getCornerRadiusStyle, getLabelAndReplaceVariables, getSizeStyle, stringifyStyles, } from "../../utils/style-utils";
+export function getTimelineStyles(props) {
+    const styles = {
+        "--item-spacing": `${props.item_spacing}px`,
+        "--width": "unset",
+        "--height": "unset",
+        "--flex": "0 1 auto",
+    };
+    Object.assign(styles, getSizeStyle(props.size));
+    return styles;
+}
+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,
+        }),
+        "--text-spacing": `${props.text_spacing}px`,
+        "--icon-background-color": getColor({
+            colorMap: props.icon_background?.color,
+            colorMode: props.purchaseState.colorMode,
+        }),
+        "--icon-border": getBorderStyle(props.icon_background?.border, props.purchaseState?.colorMode),
+        "--icon-border-radius": props.icon_background?.shape?.type === "rectangle"
+            ? getCornerRadiusStyle(props.icon_background.shape.corners)
+            : "50%",
+        "--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`,
+    };
+    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)`;
+        }
+    }
+    return styles;
+}
+export function getTimelineItemTextStyles(props, kind = "title") {
+    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: "",
+    });
+    const stringifiedStyles = stringifyStyles(textStyles);
+    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,17 +1,15 @@
-import type { BorderType, ColorMode, ColorType, CornerRadiusType, DimensionType, FitTypes, FontSizeTags, FontWeights, ShadowType, ShapeType, SizeType, Spacing, TextAlignment } from "../types";
+import type { 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";
 export interface Extra {
-    [key: string]: any;
+    [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;
 }
-export interface Text extends PaywallComponent {
-}
 export interface Stack extends PaywallComponent {
     spacing: number;
     components: PaywallComponent[];
@@ -40,16 +38,16 @@ export interface ComponentConfig {
         background?: BaseNodeBackgroundType;
         stack: Stack;
         sticky_footer?: {
-            stack: {
-                type: "stack";
-                components: PaywallComponent[];
-            };
+            stack: Stack;
+            id: string;
+            name: string;
+            type: "footer";
         } | null;
     };
 }
 export interface ComponentLocalizations extends Extra {
-    en_US: {
-        [key: string]: string;
+    [locale: string]: {
+        [label_id: string]: string;
     };
 }
 export interface PaywallData extends Extra {
@@ -69,7 +67,6 @@ export type ComponentState = {
 interface SharedComponentProps extends PaywallComponent, ActionsProps, PurchaseStateProps {
     labels: ComponentLocalizations;
     id: string;
-    colorMode: ColorMode;
     name: string;
     variableDictionary?: VariableDictionary;
     componentState?: ComponentState;
@@ -130,9 +127,7 @@ export interface StackProps extends SharedComponentProps {
     spacing?: number;
     type: "stack";
     overrides?: {
-        states: {
-            [state: string]: StackProps;
-        };
+        [state: string]: StackProps;
     };
 }
 export interface TextNodeProps extends SharedComponentProps {
@@ -142,7 +137,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;
@@ -150,9 +145,7 @@ export interface TextNodeProps extends SharedComponentProps {
     size: SizeType;
     variableDictionary?: VariableDictionary;
     overrides?: {
-        states: {
-            [state: string]: TextNodeProps;
-        };
+        [state: string]: TextNodeProps;
     };
 }
 type ImageSourceDictionaryType = Record<"original" | "heic" | "heic_low_res" | "webp" | "webp_low_res", string>;
@@ -174,9 +167,57 @@ export interface ImageProps extends SharedComponentProps {
     max_height?: number;
     override_source_lid?: string;
     overrides?: {
-        states: {
-            [state: string]: ImageProps;
+        [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

@@ -9,3 +9,4 @@ export { default as PurchaseButton } from "./components/purchase-button/Purchase
 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

@@ -10,3 +10,4 @@ export { default as PurchaseButton } from "./components/purchase-button/Purchase
 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,6 +8,8 @@ export declare const gradientPaywallData: PaywallData;
 export declare const calmPaywallData: PaywallData;
 export declare const stateTemplate: PaywallData;
 export declare const posterMakerTemplate: PaywallData;
+export declare const e2eTestTemplate: PaywallData;
+export declare const zStackTemplate: PaywallData;
 export declare const labelsData: {
     en_US: {
         id1: string;
@@ -15,3 +17,6 @@ export declare const labelsData: {
         id3: string;
     };
 };
+export declare const colorModeOverrideTemplate: PaywallData;
+export declare const paywallWithFooter: PaywallData;
+export declare const errorPaywallData: PaywallData;