@revenuecat/purchases-ui-js 2.0.1 → 2.0.3

package/dist/components/image/Image.svelte

@@ -1,164 +1,179 @@
 <script lang="ts">
-  import { getImageComponentStyles } from "./image-utils";
-  import type { ImageProps } from "../../data/entities";
   import { getColorModeContext } from "../../stores/color-mode";
-  import { DEFAULT_COLOR_MODE } from "../../utils/constants";
+  import { getSelectedStateContext } from "../../stores/selected";
+  import type { ImageProps } from "../../types/components/image";
+  import {
+    css,
+    mapColor,
+    mapColorMode,
+    mapFitMode,
+    mapSize,
+    mapSpacing,
+  } from "../../utils/base-utils";
+  import { getActiveStateProps } from "../../utils/style-utils";
+  import ClipPath from "./ClipPath.svelte";
+  import Overlay from "./Overlay.svelte";
 
-  const { id, source, purchaseState, ...restProps }: ImageProps = $props();
+  const props: ImageProps = $props();
+
+  const selectedState = getSelectedStateContext();
+  const {
+    id,
+    source,
+    size,
+    mask_shape,
+    fit_mode,
+    padding,
+    margin,
+    color_overlay,
+    border,
+    shadow,
+  } = $derived.by(() => {
+    return {
+      ...props,
+      ...getActiveStateProps($selectedState, props.overrides),
+    };
+  });
 
   const getColorMode = getColorModeContext();
   const colorMode = $derived(getColorMode());
+  const image = $derived(mapColorMode(colorMode, source));
 
-  let imageAspectRatio = $state(0);
-  let imageElement: HTMLImageElement | null;
+  let wrapperWidth = $state(0);
+  let imageSize = $state({
+    height: 0,
+    width: 0,
+  });
 
-  // Calculate aspect ratio once image loads
-  function onImageLoad() {
-    if (imageElement) {
-      imageAspectRatio = imageElement.naturalHeight / imageElement.naturalWidth;
+  // TODO: Not needed if width/height are set. Remove once paywall stories are fixed or removed.
+  $effect(() => {
+    if (image.width || image.height) {
+      imageSize = {
+        height: image.height,
+        width: image.width,
+      };
+      return;
     }
-  }
 
-  const { imageStyles, maskPath, linearGradientAngle } = $derived(
-    getImageComponentStyles(colorMode, {
-      id,
-      source,
-      purchaseState,
-      ...restProps,
-      imageAspectRatio,
+    const img = new window.Image();
+    img.src = image.original;
+
+    const onImageLoad = () => {
+      imageSize = {
+        height: img.height,
+        width: img.width,
+      };
+    };
+
+    img.addEventListener("load", onImageLoad);
+    return () => {
+      img.removeEventListener("load", onImageLoad);
+    };
+  });
+
+  const height = $derived.by(() => {
+    if (size.height.type === "fixed") {
+      return size.height.value;
+    }
+    return Math.round(wrapperWidth * (imageSize.height / imageSize.width));
+  });
+
+  const style = $derived(
+    css({
+      width: mapSize(size.width),
+      height: `${height}px`,
+      margin: mapSpacing(margin),
+      padding: mapSpacing(padding),
+      "line-height": 0,
+      "flex-shrink": size.width.type === "fixed" ? 0 : 1,
     }),
   );
 
-  const imageSource = $derived.by(() => {
-    if (source[colorMode]?.original) {
-      return source[colorMode].original;
-    } else {
-      return source[DEFAULT_COLOR_MODE]?.original as string;
+  let svgRect = $state<DOMRect | null>(null);
+
+  const [svgWidth, svgHeight] = $derived.by(() => {
+    return [svgRect?.width ?? 0, svgRect?.height ?? 0];
+  });
+
+  const viewBox = $derived.by(() => {
+    return `0 0 ${svgWidth} ${svgHeight}`;
+  });
+
+  const svgStyle = $derived.by(() => {
+    if (!shadow?.color) {
+      return "";
     }
+
+    const { x, y, radius, color } = shadow;
+    const shadowColor = mapColor(colorMode, color);
+    return `filter: drop-shadow(${x}px ${y}px ${radius}px ${shadowColor})`;
   });
 
-  const colorOverlay = $derived(restProps.color_overlay);
-  const colorInfo = $derived(
-    colorOverlay?.[colorMode] ?? colorOverlay?.[DEFAULT_COLOR_MODE],
+  const overlay = $derived(
+    color_overlay && mapColorMode(colorMode, color_overlay),
   );
 </script>
 
-<img
-  src={imageSource}
-  bind:this={imageElement}
-  onload={onImageLoad}
-  style="display: none;"
-  alt=""
-/>
-
-<svg
-  class="rc-pw-image-container"
-  id={`rc-pw-image-container-${id}`}
-  style={imageStyles}
-  preserveAspectRatio="xMidYMid slice"
-  viewBox={`0 0 100 ${imageAspectRatio * 100}`}
->
-  <defs>
-    <clipPath id={`clip-path-${id}`}>
-      {#if restProps.mask_shape?.type === "circle"}
-        <ellipse
-          cx="50"
-          cy={imageAspectRatio * 50}
-          rx="50"
-          ry={imageAspectRatio * 50}
+<div {style} bind:clientWidth={wrapperWidth}>
+  <svg
+    bind:contentRect={svgRect}
+    width="100%"
+    height="100%"
+    {viewBox}
+    style={svgStyle}
+  >
+    <defs>
+      <clipPath id={`${id}-path`}>
+        <ClipPath shape={mask_shape} width={svgWidth} height={svgHeight} />
+      </clipPath>
+
+      <g id={`${id}-border`}>
+        <ClipPath shape={mask_shape} width={svgWidth} height={svgHeight} />
+      </g>
+
+      <Overlay id={`${id}-overlay`} {overlay} />
+    </defs>
+
+    {#if border && border.width > 0}
+      <use href={`#${id}-border`} fill="transparent" />
+    {/if}
+
+    <g clip-path={`url(#${id}-path)`}>
+      <foreignObject x="0" y="0" width="100%" height="100%">
+        <img
+          src={image.original}
+          style="object-fit:{mapFitMode(fit_mode)}"
+          alt=""
+        />
+      </foreignObject>
+
+      {#if overlay}
+        <rect
+          x="0"
+          y="0"
+          height="100%"
+          width="100%"
+          fill={`url(#${id}-overlay)`}
         />
-      {:else}
-        <path d={maskPath} />
       {/if}
-    </clipPath>
-
-    {#if colorInfo?.type === "linear"}
-      <linearGradient
-        id={`gradient-${id}`}
-        x1={linearGradientAngle.x1}
-        y1={linearGradientAngle.y1}
-        x2={linearGradientAngle.x2}
-        y2={linearGradientAngle.y2}
-      >
-        {#each colorInfo?.points || [] as stop}
-          <stop
-            offset={`${stop.percent}%`}
-            style={`stop-color: ${stop.color}`}
-          />
-        {/each}
-      </linearGradient>
-    {:else if colorInfo?.type === "radial"}
-      <radialGradient
-        id={`gradient-${id}`}
-        cx="50%"
-        cy="50%"
-        r="50%"
-        fx="50%"
-        fy="50%"
-      >
-        {#each colorInfo?.points || [] as stop}
-          <stop
-            offset={`${stop.percent}%`}
-            style={`stop-color: ${stop.color}`}
-          />
-        {/each}
-      </radialGradient>
-    {:else if colorInfo?.type === "hex"}
-      <linearGradient id={`gradient-${id}`}>
-        <stop offset="0%" style={`stop-color: ${colorInfo?.value}`} />
-      </linearGradient>
-    {/if}
-  </defs>
-
-  <image
-    class="rc-pw-image"
-    href={imageSource}
-    x="0"
-    y="0"
-    width="100"
-    height={imageAspectRatio * 100}
-    clip-path={`url(#clip-path-${id})`}
-    preserveAspectRatio="xMidYMid slice"
-    {id}
-  />
-
-  <rect
-    class="rc-pw-image-overlay"
-    x="0"
-    y="0"
-    width="100"
-    height={imageAspectRatio * 100}
-    clip-path={`url(#clip-path-${id})`}
-    fill={`url(#gradient-${id})`}
-  />
-</svg>
 
-<style>
-  .rc-pw-image-container {
-    border-end-start-radius: var(--image-border-end-start-radius, 0px);
-    border-end-end-radius: var(--image-border-end-end-radius, 0px);
-    border-start-start-radius: var(--image-border-start-start-radius, 0px);
-    border-start-end-radius: var(--image-border-start-end-radius, 0px);
-    position: relative;
-    overflow: hidden;
-    display: flex;
-    flex: var(--image-flex, 1 1 auto);
-    position: var(--image-position, relative);
-    inset: var(--image-inset, 0);
-    transform: var(--image-transform, initial);
-    height: var(--image-height, initial);
-    width: var(--image-width, initial);
-  }
+      {#if border && border.width > 0}
+        <use
+          href={`#${id}-border`}
+          fill="none"
+          stroke={mapColor(colorMode, border.color)}
+          stroke-width={border.width}
+        />
+      {/if}
+    </g>
+  </svg>
+</div>
 
-  .rc-pw-image {
+<style>
+  img {
     width: 100%;
     height: 100%;
-    object-fit: cover;
-    display: block;
-  }
-
-  .rc-pw-image-overlay {
-    position: absolute;
-    inset: 0;
+    object-fit: contain;
+    object-position: center;
   }
 </style>

package/dist/components/image/Image.svelte.d.ts

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

package/dist/components/image/Overlay.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import type { ColorGradientInfo } from "../../types/colors";
+
+  interface OverlayProps {
+    id: string;
+    overlay: ColorGradientInfo | null | undefined;
+  }
+
+  const { id, overlay }: OverlayProps = $props();
+</script>
+
+{#if overlay?.type === "hex"}
+  <linearGradient {id} x1="0" y1="0" x2="100%" y2="100%">
+    <stop offset="0%" stop-color={overlay.value} />
+    <stop offset="100%" stop-color={overlay.value} />
+  </linearGradient>
+{/if}
+
+{#if overlay?.type === "linear"}
+  <linearGradient
+    {id}
+    gradientTransform={`rotate(${overlay.degrees - 90}, 0.5, 0.5)`}
+  >
+    {#each overlay.points as point}
+      <stop offset={`${point.percent}%`} stop-color={point.color} />
+    {/each}
+  </linearGradient>
+{/if}
+
+{#if overlay?.type === "radial"}
+  <radialGradient {id}>
+    {#each overlay.points as point}
+      <stop offset={`${point.percent}%`} stop-color={point.color} />
+    {/each}
+  </radialGradient>
+{/if}

package/dist/components/image/Overlay.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ColorGradientInfo } from "../../types/colors";
+interface OverlayProps {
+    id: string;
+    overlay: ColorGradientInfo | null | undefined;
+}
+declare const Overlay: import("svelte").Component<OverlayProps, {}, "">;
+type Overlay = ReturnType<typeof Overlay>;
+export default Overlay;

package/dist/components/package/Package.stories.svelte

@@ -1,19 +1,19 @@
 <script module lang="ts">
   import Package from "./Package.svelte";
-  import type { PurchaseState } from "../../data/state";
+  import { componentDecorator } from "../../stories/component-decorator";
   import { localizationDecorator } from "../../stories/localization-decorator";
+  import type { PackageProps } from "../../types/components/package";
   import { defineMeta } from "@storybook/addon-svelte-csf";
 
   const defaultLocale = "en_US";
   const priceLid = "QZ4ZmYsqjN";
   const nameLid = "BcX-6YwhoV";
-  const purchaseState: PurchaseState = {};
 
   const { Story } = defineMeta({
     title: "Components/Package",
     component: Package,
-    tags: ["autodocs"],
     decorators: [
+      componentDecorator(),
       localizationDecorator({
         defaultLocale,
         localizations: {
@@ -24,32 +24,21 @@
         },
       }),
     ],
-    args: { purchaseState },
-    argTypes: {
-      stack: {
-        control: { type: "object" },
-        description: "Stack configuration for package content",
-        table: {
-          type: {
-            summary: "object",
-            detail: "StackProps",
-          },
-        },
-      },
-    },
   });
 </script>
 
-<!-- Default  -->
 <Story
   name="Default Package"
   args={{
-    id: "6rQSD5e2Kz",
-    is_selected_by_default: false,
+    type: "package",
+    id: "package",
     name: "Package - Monthly",
     package_id: "$rc_monthly",
+    is_selected_by_default: true,
     stack: {
-      purchaseState,
+      type: "stack",
+      id: "stack",
+      name: "Stack",
       background_color: {
         light: {
           type: "hex",
@@ -83,7 +72,6 @@
               value: "#ffffff",
             },
           },
-          components: [],
           font_name: null,
           font_size: "heading_s",
           font_weight: "bold",
@@ -122,6 +110,8 @@
               value: "#292631",
             },
           },
+          background: null,
+          shadow: null,
           border: null,
           components: [
             {
@@ -132,7 +122,6 @@
                   value: "#ffffff",
                 },
               },
-              components: [],
               font_name: null,
               font_size: "body_m",
               font_weight: "extra_bold",
@@ -212,14 +201,12 @@
         distribution: "space_between",
         type: "horizontal",
       },
-      id: "u0KZLUZTQT",
       margin: {
         bottom: 0,
         leading: 16,
         top: 16,
         trailing: 16,
       },
-      name: "Stack",
       padding: {
         bottom: 16,
         leading: 16,
@@ -245,9 +232,7 @@
         },
       },
       spacing: 8,
-      type: "stack",
       shadow: null,
     },
-    type: "package",
-  }}
+  } satisfies PackageProps}
 />

package/dist/components/package/Package.svelte

@@ -1,64 +1,30 @@
 <script lang="ts">
   import Stack from "../stack/Stack.svelte";
   import { getPaywallContext } from "../../stores/paywall";
+  import { setSelectedStateContext } from "../../stores/selected";
   import {
     getVariablesContext,
     setVariablesContext,
   } from "../../stores/variables";
   import type { PackageProps } from "../../types/components/package";
-  import { prefixObject, stringifyStyles } from "../../utils/style-utils";
   import { derived } from "svelte/store";
 
-  const {
-    stack,
-    package_id,
-    labels,
-    id,
-    purchaseState,
-    zStackChildStyles,
-  }: PackageProps = $props();
+  const { stack, package_id }: PackageProps = $props();
 
-  const { selectedPackageId } = getPaywallContext();
+  const { selectedPackageId, variablesPerPackage } = getPaywallContext();
 
-  const onPackageClick = () => ($selectedPackageId = package_id);
+  setSelectedStateContext(package_id);
+
+  const onPackageClick = () => {
+    $selectedPackageId = package_id;
+  };
 
   const fallbackVariables = getVariablesContext();
   const variables = derived(
     fallbackVariables,
-    (fallback) => purchaseState.variablesPerPackage?.[package_id] ?? fallback,
+    (fallback) => $variablesPerPackage?.[package_id] ?? fallback,
   );
   setVariablesContext(variables);
-
-  const componentState = $derived({
-    selected: $selectedPackageId === package_id,
-  });
-
-  const styles = $derived(
-    stringifyStyles(prefixObject(zStackChildStyles, "package")),
-  );
 </script>
 
-<button
-  class="rc-pw-package"
-  class:selected={componentState.selected}
-  {id}
-  onclick={onPackageClick}
-  style={styles}
->
-  <Stack {...stack} {labels} {purchaseState} {componentState} />
-</button>
-
-<style>
-  .rc-pw-package {
-    width: 100%;
-    display: flex;
-    margin: 0;
-    padding: 0;
-    background: initial;
-    border: initial;
-    text-align: initial;
-    position: var(--package-position, relative);
-    inset: var(--package-inset, 0);
-    transform: var(--package-transform, initial);
-  }
-</style>
+<Stack {...stack} onclick={onPackageClick} />

package/dist/components/paywall/Node.svelte

@@ -8,41 +8,41 @@
     Timeline,
   } from "../..";
   import ButtonNode from "../button/ButtonNode.svelte";
-  import type { ZStackChildStyles } from "../stack/stack-utils";
   import TextNode from "../text/TextNode.svelte";
-  import {
-    type ComponentState,
-    type PaywallComponent,
-    type PurchaseStateProps,
-  } from "../../data/entities";
-  import type { Component } from "svelte";
+  import type { Component } from "../../types/component";
+  import type { Component as SvelteComponent } from "svelte";
+  import Icon from "../icon/Icon.svelte";
   import Self from "./Node.svelte";
 
   type SupportedComponents =
-    | TextNode
-    | Stack
-    | Image
     | ButtonNode
-    | PurchaseButton
-    | Package
     | Footer
+    | Icon
+    | Image
+    | Package
+    | PurchaseButton
+    | Stack
+    | TextNode
     | Timeline;
 
-  interface Props extends PurchaseStateProps {
-    nodeData: PaywallComponent;
-    zStackChildStyles?: ZStackChildStyles;
-    componentState?: ComponentState;
+  interface Props {
+    nodeData: Component;
   }
 
   const ComponentTypes = {
-    stack: Stack,
-    text: TextNode,
-    image: Image,
     button: ButtonNode,
-    purchase_button: PurchaseButton,
-    package: Package,
     footer: Footer,
+    icon: Icon,
+    image: Image,
+    package: Package,
+    purchase_button: PurchaseButton,
+    stack: Stack,
+    text: TextNode,
     timeline: Timeline,
+  } satisfies {
+    [key in Component["type"]]: SvelteComponent<
+      Extract<Component, { type: key }>
+    >;
   };
 
   /**
@@ -50,18 +50,18 @@
    * It first checks if the component type is supported and returns the corresponding component class.
    * If not supported, it checks if the fallback component type is supported and returns the corresponding component class,
    * finally it throws an error if the component type is not supported and the fallback component type is not supported.
-   * @param nodeData:PaywallComponent - the PaywallComponent object representing a Node in the paywall
-   * @returns [Component<SupportedComponents>, PaywallComponent] - a tuple containing the component class and the node data
+   * @param nodeData:Component - the Component object representing a Node in the paywall
+   * @returns [Component<SupportedComponents>, Component] - a tuple containing the component class and the node data
    * @throws Error - if the component type and the fallback component type are not supported
    */
   export const getComponentClass: (
-    nodeData: PaywallComponent,
-  ) => [Component<SupportedComponents>, PaywallComponent] = (
-    nodeData: PaywallComponent,
+    nodeData: Component,
+  ) => [SvelteComponent<SupportedComponents>, Component] | undefined = (
+    nodeData: Component,
   ) => {
     if (ComponentTypes[nodeData.type]) {
       return [
-        ComponentTypes[nodeData.type] as Component<SupportedComponents>,
+        ComponentTypes[nodeData.type] as SvelteComponent<SupportedComponents>,
         nodeData,
       ];
     }
@@ -69,29 +69,31 @@
     const { fallback } = nodeData;
     if (fallback && ComponentTypes[fallback?.type]) {
       return [
-        ComponentTypes[fallback.type] as Component<SupportedComponents>,
+        ComponentTypes[fallback.type] as SvelteComponent<SupportedComponents>,
         fallback,
       ];
     }
 
-    // manually throwing error for this specific case until
+    // Manually throwing error for this specific case until
     // it's handled with fallback components
-    throw new Error(`Invalid component type: ${nodeData.type}`);
+    // throw new Error(`Invalid component type: ${nodeData.type}`);
   };
 
-  const { nodeData, purchaseState, zStackChildStyles, ...restProps }: Props =
-    $props();
+  const { nodeData, ...restProps }: Props = $props();
+
+  const [ComponentToRender, dataToUse] = $derived(
+    getComponentClass(nodeData) ?? [],
+  );
 
-  const [ComponentToRender, dataToUse] = $derived(getComponentClass(nodeData));
+  const components = $derived(
+    ("components" in nodeData ? nodeData.components : undefined) ?? [],
+  );
 </script>
 
-<ComponentToRender
-  {...(dataToUse as any) || {}}
-  {purchaseState}
-  {zStackChildStyles}
-  {...restProps}
->
-  {#each nodeData.components as PaywallComponent[] as childData}
-    <Self nodeData={childData} {purchaseState} {...restProps} />
-  {/each}
-</ComponentToRender>
+{#if ComponentToRender}
+  <ComponentToRender {...(dataToUse as any) || {}} {...restProps}>
+    {#each components as childData}
+      <Self nodeData={childData} {...restProps} />
+    {/each}
+  </ComponentToRender>
+{/if}