@revenuecat/purchases-ui-js 2.0.2 → 2.0.4

package/dist/components/timeline/Timeline.svelte

@@ -1,38 +1,52 @@
 <script lang="ts">
-  import { getTimelineStyles } from "./timeline-utils";
+  import { getTimelineInlineStyles } from "./timeline-utils";
   import TimelineItem from "./TimelineItem.svelte";
-  import type { TimelineProps } from "../../data/entities";
+  import type { TimelineProps } from "../../types/components/timeline";
+  import { css } from "../../utils/base-utils";
+  import { getActiveStateProps } from "../../utils/style-utils";
+  import { getSelectedStateContext } from "../../stores/selected";
 
-  const { items, ...restProps }: TimelineProps = $props();
+  const props: TimelineProps = $props();
+  const selectedState = getSelectedStateContext();
 
-  const timelineStyles = $derived(getTimelineStyles({ items, ...restProps }));
+  const {
+    items,
+    text_spacing,
+    item_spacing,
+    column_gutter,
+    icon_alignment,
+    size,
+    padding,
+    margin,
+    ...restProps
+  } = $derived.by(() => {
+    return {
+      ...props,
+      ...getActiveStateProps($selectedState, props.overrides),
+    };
+  });
+
+  const timelineStyles = $derived(
+    css(
+      getTimelineInlineStyles({
+        items,
+        text_spacing,
+        item_spacing,
+        column_gutter,
+        icon_alignment,
+        size,
+        padding,
+        margin,
+        ...restProps,
+      }),
+    ),
+  );
 </script>
 
 {#if items.length}
-  <div class="rc-pw-timeline-container" style={timelineStyles}>
-    {#each items as item, index}
-      <TimelineItem
-        {...item}
-        id={`${restProps.id}-${index}`}
-        name={`${restProps.name}-${index}`}
-        type="timeline"
-        text_spacing={restProps.text_spacing}
-        item_spacing={restProps.item_spacing}
-      />
+  <div style={timelineStyles}>
+    {#each items as item (item.id)}
+      <TimelineItem {...item} {text_spacing} {item_spacing} />
     {/each}
   </div>
 {/if}
-
-<style>
-  .rc-pw-timeline-container {
-    display: flex;
-    flex: var(--timeline-flex, 0 1 auto);
-    flex-direction: column;
-    gap: var(--timeline-item-spacing, 0);
-    width: var(--timeline-width, initial);
-    height: var(--timeline-height, initial);
-    position: var(--timeline-position, relative);
-    inset: var(--timeline-inset, 0);
-    transform: var(--timeline-transform, initial);
-  }
-</style>

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

@@ -1,4 +1,4 @@
-import type { TimelineProps } from "../../data/entities";
+import type { TimelineProps } from "../../types/components/timeline";
 declare const Timeline: import("svelte").Component<TimelineProps, {}, "">;
 type Timeline = ReturnType<typeof Timeline>;
 export default Timeline;

package/dist/components/timeline/TimelineItem.svelte

@@ -1,129 +1,97 @@
 <script lang="ts">
-  import {
-    getTimelineItemStyles,
-    getTimelineItemTextStyles,
-  } from "./timeline-utils";
-  import type { TimelineItemProps } from "../../data/entities";
+  import { getTimelineItemContentInlineStyles } from "./timeline-utils";
+  import type { TimelineItemProps } from "../../types/components/timeline";
   import { getColorModeContext } from "../../stores/color-mode";
-  import { getLocalizationContext } from "../../stores/localization";
-  import { getVariablesContext } from "../../stores/variables";
-  import { replaceVariables } from "../../utils/variable-utils";
+  import { getColor, getActiveStateProps } from "../../utils/style-utils";
+  import { getSelectedStateContext } from "../../stores/selected";
+  import Icon from "../icon/Icon.svelte";
+  import { css } from "../../utils/base-utils";
+  import TextNode from "../text/TextNode.svelte";
 
-  const props: TimelineItemProps = $props();
+  interface Props extends TimelineItemProps {
+    text_spacing: number;
+    item_spacing: number;
+  }
+
+  const props: Props = $props();
+  const selectedState = getSelectedStateContext();
+
+  const {
+    icon,
+    title,
+    description,
+    connector,
+    text_spacing,
+    item_spacing,
+    ...restProps
+  } = $derived.by(() => {
+    return {
+      ...props,
+      ...getActiveStateProps($selectedState, props.overrides as any),
+    };
+  });
 
   const getColorMode = getColorModeContext();
   const colorMode = $derived(getColorMode());
 
-  const styles = $derived(getTimelineItemStyles(colorMode, props));
+  const iconContainerStyles = css({ position: "relative" });
+  const iconStyles = css({ position: "relative", "z-index": "2" });
+  const contentStyles = $derived(
+    css(
+      getTimelineItemContentInlineStyles(colorMode, {
+        text_spacing,
+        item_spacing,
+      }),
+    ),
+  );
 
-  const { getLocalizedString } = getLocalizationContext();
+  const connectorStyles = $derived.by(() => {
+    if (!connector) return "";
 
-  const variables = getVariablesContext();
-  const titleLabel = $derived(
-    replaceVariables(getLocalizedString(props.title.text_lid), $variables),
-  );
+    return css({
+      position: "absolute",
+      left: "50%",
+      top: `${(icon?.size.width.value ?? 24) / 2}px`,
+      transform: "translateX(-50%)",
+      "z-index": "1",
+      width: `${connector.width}px`,
+      height: `100%`, // Extend beyond icon
+      "padding-top": `${connector.margin.top}px`,
+      "padding-bottom": `${connector.margin.bottom}px`,
+    });
+  });
 
-  const descriptionLabel = $derived(
-    replaceVariables(
-      getLocalizedString(props.description?.text_lid),
-      $variables,
-    ),
-  );
+  const connectorBarStyles = $derived.by(() => {
+    if (!connector) return "";
 
-  const { tagToRender: titleTagToRender, textStyles: titleStyles } = $derived(
-    getTimelineItemTextStyles(colorMode, props, "title"),
-  );
+    const background = getColor({
+      colorMap: connector.color,
+      colorMode,
+      fallback: "#000000",
+    });
 
-  const { tagToRender: descriptionTagToRender, textStyles: descriptionStyles } =
-    $derived(getTimelineItemTextStyles(colorMode, props, "description"));
-  // TODO: Object mapping icon name to icon component
+    return css({
+      width: "100%",
+      height: "100%",
+      background,
+    });
+  });
 </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 style={iconContainerStyles}>
+  {#if connector}
+    <div style={connectorStyles}>
+      <div style={connectorBarStyles}></div>
+    </div>
+  {/if}
+  <div style={iconStyles}>
+    <Icon {...icon} />
   </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>
+<div style={contentStyles}>
+  <TextNode {...title} />
+  {#if description}
+    <TextNode {...description} />
+  {/if}
+</div>

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

@@ -1,4 +1,8 @@
-import type { TimelineItemProps } from "../../data/entities";
-declare const TimelineItem: import("svelte").Component<TimelineItemProps, {}, "">;
+import type { TimelineItemProps } from "../../types/components/timeline";
+interface Props extends TimelineItemProps {
+    text_spacing: number;
+    item_spacing: number;
+}
+declare const TimelineItem: import("svelte").Component<Props, {}, "">;
 type TimelineItem = ReturnType<typeof TimelineItem>;
 export default TimelineItem;

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

@@ -1,8 +1,26 @@
-import type { TimelineItemProps, TimelineProps } from "../../data/entities";
+import type { TimelineProps } from "../../types/components/timeline";
 import type { ColorMode } from "../../types";
-export declare function getTimelineStyles(props: TimelineProps): string;
-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;
+export declare function getTimelineInlineStyles(props: TimelineProps): {
+    display: string;
+    "grid-template-columns": string;
+    "column-gap": string;
+    "align-items": string;
+    position: string;
+    flex: string;
+    width: string;
+    height: string;
+    padding: string;
+    margin: string;
+};
+export declare function getTimelineItemContentInlineStyles(_colorMode: ColorMode, timelineSpacing: {
+    text_spacing: number;
+    item_spacing: number;
+}): {
+    display: string;
+    "flex-direction": string;
+    "justify-content": string;
+    "align-items": string;
+    gap: string;
+    height: string;
+    "margin-bottom": string;
 };

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

@@ -1,118 +1,26 @@
-import { defaultColor, getTextComponentStyles, } from "../text/text-utils";
-import { getBorderStyle, getColor, getCornerRadiusStyle, getSizeStyle, prefixObject, stringifyStyles, } from "../../utils/style-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(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,
-        }),
-        "--icon-background-color": getColor({
-            colorMap: props.icon_background?.color,
-            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`,
-        "--border-end-start-radius": `0px`,
-        "--border-end-end-radius": `0px`,
-        "--connector-color": getColor({
-            colorMap: props.connector?.color,
-            colorMode,
-        }),
-        "--connector-width": `${props.connector?.width || 0}px`,
-        "--connector-top": "0px",
-        "--connector-height": `${props.item_spacing}px`,
+import { mapSize, mapSpacing } from "../../utils/base-utils";
+export function getTimelineInlineStyles(props) {
+    return {
+        display: "grid",
+        "grid-template-columns": "auto 1fr",
+        "column-gap": `${props.column_gutter}px`,
+        "align-items": "stretch",
+        position: "relative",
+        flex: "0 1 auto",
+        width: mapSize(props.size.width),
+        height: mapSize(props.size.height),
+        padding: mapSpacing(props.padding),
+        margin: mapSpacing(props.margin),
     };
-    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(colorMode, 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(colorMode, {
-        ...props,
-        ...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"));
+export function getTimelineItemContentInlineStyles(_colorMode, timelineSpacing) {
     return {
-        textStyles: stringifiedStyles,
-        tagToRender,
+        display: "flex",
+        "flex-direction": "column",
+        "justify-content": "flex-start",
+        "align-items": "flex-start",
+        gap: `${timelineSpacing.text_spacing}px`,
+        height: "fit-content",
+        "margin-bottom": `${timelineSpacing.item_spacing}px`,
     };
 }

package/dist/index.d.ts

@@ -7,8 +7,9 @@ export { default as PurchaseButton } from "./components/purchase-button/Purchase
 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 { type PaywallData } from "./types/paywall";
+export { type UIConfig } from "./types/ui-config";
+export { type VariableDictionary } from "./types/variables";
 export * from "./ui/globals";
 export { default as Button } from "./ui/molecules/button.svelte";
-export { type VariableDictionary } from "./utils/variable-utils";

package/dist/index.js

@@ -8,8 +8,9 @@ export { default as PurchaseButton } from "./components/purchase-button/Purchase
 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 "./types/paywall";
+export {} from "./types/ui-config";
+export {} from "./types/variables";
 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

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

package/dist/stores/paywall.d.ts

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

package/dist/stores/selected.d.ts

@@ -0,0 +1,5 @@
+import { type Readable } from "svelte/store";
+type SelectedContext = Readable<boolean>;
+export declare function setSelectedStateContext(packageId: string): void;
+export declare function getSelectedStateContext(): SelectedContext;
+export {};

package/dist/stores/selected.js

@@ -0,0 +1,12 @@
+import { getContext, setContext } from "svelte";
+import { derived, readable } from "svelte/store";
+import { getPaywallContext } from "./paywall";
+const key = Symbol("selected");
+export function setSelectedStateContext(packageId) {
+    const { selectedPackageId } = getPaywallContext();
+    setContext(key, derived(selectedPackageId, (value) => value === packageId));
+}
+export function getSelectedStateContext() {
+    const context = getContext(key);
+    return context ?? readable(false);
+}

package/dist/stores/variables.d.ts

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

package/dist/stores/variables.js

@@ -1,4 +1,3 @@
-import {} from "../utils/variable-utils";
 import { getContext, setContext } from "svelte";
 import {} from "svelte/store";
 const key = Symbol("variables");

package/dist/stories/component-decorator.d.ts

@@ -0,0 +1,2 @@
+import type { DecoratorFunction, Renderer } from "storybook/internal/csf";
+export declare function componentDecorator<TRenderer extends Renderer, TArgs>(): DecoratorFunction<TRenderer, TArgs>;

package/dist/stories/component-decorator.js

@@ -0,0 +1,12 @@
+export function componentDecorator() {
+    return (Story, ctx) => {
+        return Story({
+            ...ctx,
+            args: {
+                ...ctx.args,
+                id: ctx.name.toLowerCase().replaceAll(" ", "-"),
+                name: ctx.name,
+            },
+        });
+    };
+}

package/dist/stories/fixtures.d.ts

@@ -1,10 +1,12 @@
-import type { PaywallData } from "../data/entities";
+import type { PaywallData } from "../types/paywall";
+import type { UIConfig } from "../types/ui-config";
 import type { BrandingAppearance } from "../ui/utils/branding";
+export declare const uiConfigData: UIConfig;
 export declare const paywallData: PaywallData;
 export declare const alignmentPaywallData: PaywallData;
 export declare const fontsPaywallData: PaywallData;
+export declare const customFontsPaywallData: PaywallData;
 export declare const pastaPaywallData: PaywallData;
-export declare const variablesPastaPaywallData: PaywallData;
 export declare const gradientPaywallData: PaywallData;
 export declare const calmPaywallData: PaywallData;
 export declare const stateTemplate: PaywallData;
@@ -22,5 +24,6 @@ export declare const colorModeOverrideTemplate: PaywallData;
 export declare const paywallWithFooter: PaywallData;
 export declare const errorPaywallData: PaywallData;
 export declare const fallbackPaywallData: PaywallData;
-export declare const e2eTestTemplate: PaywallData;
 export declare const brandingAppearances: Record<string, BrandingAppearance | null>;
+export declare const timelineTemplate: PaywallData;
+export declare const listTemplate: PaywallData;