@revenuecat/purchases-ui-js 2.0.2 → 2.0.4

package/dist/components/image/Image.stories.svelte

@@ -1,86 +1,55 @@
 <script module lang="ts">
   import Image from "./Image.svelte";
+  import { componentDecorator } from "../../stories/component-decorator";
   import { defineMeta } from "@storybook/addon-svelte-csf";
 
   const { Story } = defineMeta({
     title: "Components/Image",
     component: Image,
-    tags: ["autodocs"],
-    argTypes: {
-      id: { control: "text", description: "Unique identifier for the image" },
-      color_overlay: {
-        control: "object",
-        description: "Image overlay",
-      },
+    decorators: [componentDecorator()],
+    args: {
+      type: "image",
+      id: "image",
+      name: "Image",
+      fit_mode: "fill",
       size: {
-        control: "object",
-        description: "Size configuration for the image",
-      },
-      max_height: {
-        control: "number",
-        description: "Maximum height of the image",
-      },
-      override_source_lid: {
-        control: "text",
-        description: "Override source lid",
-      },
-      fit_mode: {
-        control: { type: "select" },
-        options: ["fit", "fill"],
-        description: "Fit mode for the image",
+        width: { type: "fill" },
+        height: { type: "fill" },
+      },
+      source: {
+        dark: null,
+        light: {
+          width: 600,
+          height: 400,
+          original: "https://placehold.co/600x400",
+          heic: "https://placehold.co/600x400",
+          heic_low_res: "https://placehold.co/600x400",
+          webp: "https://placehold.co/600x400",
+          webp_low_res: "https://placehold.co/600x400",
+        },
       },
     },
   });
 </script>
 
-<!-- Rectangle story -->
 <Story
   name="Rectangle"
   args={{
-    id: "example-id",
-    fit_mode: "fit",
-    size: {
-      width: { type: "fill" },
-      height: { type: "fill" },
-    },
-    source: {
-      light: {
-        width: 600,
-        height: 400,
-        original: "https://placehold.co/600x400",
-        heic: "https://placehold.co/600x400",
-        heic_low_res: "https://placehold.co/600x400",
-        webp: "https://placehold.co/600x400",
-        webp_low_res: "https://placehold.co/600x400",
+    mask_shape: {
+      type: "rectangle",
+      corners: {
+        top_leading: 0,
+        top_trailing: 0,
+        bottom_leading: 0,
+        bottom_trailing: 0,
       },
-      dark: null,
     },
-    mask_shape: { type: "rectangle" },
   }}
 />
 
-<!-- Rounded Rectangle story -->
 <Story
   name="Rounded Rectangle"
   args={{
-    id: "example-id",
-    fit_mode: "fit",
-    size: {
-      width: { type: "fill" },
-      height: { type: "fill" },
-    },
-    source: {
-      light: {
-        width: 600,
-        height: 400,
-        original: "https://placehold.co/600x400",
-        heic: "https://placehold.co/600x400",
-        heic_low_res: "https://placehold.co/600x400",
-        webp: "https://placehold.co/600x400",
-        webp_low_res: "https://placehold.co/600x400",
-      },
-      dark: null,
-    },
     mask_shape: {
       type: "rectangle",
       corners: {
@@ -92,161 +61,63 @@
     },
   }}
 />
-<!-- Circle story -->
+
 <Story
   name="Circle"
   args={{
-    id: "example-id",
-    fit_mode: "fit",
-    size: {
-      width: { type: "fill" },
-      height: { type: "fill" },
-    },
-    source: {
-      light: {
-        width: 600,
-        height: 400,
-        original: "https://placehold.co/600x400",
-        heic: "https://placehold.co/600x400",
-        heic_low_res: "https://placehold.co/600x400",
-        webp: "https://placehold.co/600x400",
-        webp_low_res: "https://placehold.co/600x400",
-      },
-      dark: null,
-    },
     mask_shape: { type: "circle" },
   }}
 />
-<!-- Concave story -->
+
 <Story
   name="Concave"
   args={{
-    id: "example-id",
-    fit_mode: "fit",
-    size: {
-      width: { type: "fill" },
-      height: { type: "fill" },
-    },
-    source: {
-      light: {
-        width: 600,
-        height: 400,
-        original: "https://placehold.co/600x400",
-        heic: "https://placehold.co/600x400",
-        heic_low_res: "https://placehold.co/600x400",
-        webp: "https://placehold.co/600x400",
-        webp_low_res: "https://placehold.co/600x400",
-      },
-      dark: null,
-    },
     mask_shape: { type: "concave" },
   }}
 />
-<!-- Convex story -->
+
 <Story
   name="Convex"
   args={{
-    id: "example-id",
-    fit_mode: "fit",
-    size: {
-      width: { type: "fill" },
-      height: { type: "fill" },
-    },
-    source: {
-      light: {
-        width: 600,
-        height: 400,
-        original: "https://placehold.co/600x400",
-        heic: "https://placehold.co/600x400",
-        heic_low_res: "https://placehold.co/600x400",
-        webp: "https://placehold.co/600x400",
-        webp_low_res: "https://placehold.co/600x400",
-      },
-      dark: null,
-    },
     mask_shape: { type: "convex" },
   }}
 />
-<!-- Radial Gradient story -->
+
 <Story
   name="Overlay Radial Gradient"
   args={{
-    id: "example-id",
-    fit_mode: "fit",
-    size: {
-      width: { type: "fill" },
-      height: { type: "fill" },
-    },
-    source: {
-      light: {
-        width: 600,
-        height: 400,
-        original: "https://placehold.co/600x400",
-        heic: "https://placehold.co/600x400",
-        heic_low_res: "https://placehold.co/600x400",
-        webp: "https://placehold.co/600x400",
-        webp_low_res: "https://placehold.co/600x400",
-      },
-      dark: null,
-    },
     color_overlay: {
-      dark: {
-        type: "hex",
-        value: "#000000FF",
-      },
       light: {
+        type: "radial",
         points: [
           {
-            color: "#020024ff",
             percent: 0,
+            color: "#020024ff",
           },
           {
-            color: "#00d4ff00",
             percent: 100,
+            color: "#00d4ff00",
           },
         ],
-        type: "radial",
       },
     },
   }}
 />
-<!-- Linear Gradient story -->
+
 <Story
   name="Overlay Linear Gradient"
   args={{
-    id: "example-id",
-    fit_mode: "fit",
-    size: {
-      width: { type: "fill" },
-      height: { type: "fill" },
-    },
-    source: {
-      light: {
-        width: 600,
-        height: 400,
-        original: "https://placehold.co/600x400",
-        heic: "https://placehold.co/600x400",
-        heic_low_res: "https://placehold.co/600x400",
-        webp: "https://placehold.co/600x400",
-        webp_low_res: "https://placehold.co/600x400",
-      },
-      dark: null,
-    },
     color_overlay: {
-      dark: {
-        type: "hex",
-        value: "#000000FF",
-      },
       light: {
         degrees: 180,
         points: [
           {
-            color: "#020024ff",
             percent: 0,
+            color: "#020024ff",
           },
           {
-            color: "#00d4ff00",
             percent: 100,
+            color: "#00d4ff00",
           },
         ],
         type: "linear",
@@ -254,36 +125,60 @@
     },
   }}
 />
-<!-- Solid overlay -->
+
 <Story
   name="Overlay Solid"
   args={{
-    id: "example-id",
-    fit_mode: "fit",
+    color_overlay: {
+      light: {
+        type: "hex",
+        value: "#e7c00069",
+      },
+    },
+  }}
+/>
+
+<Story
+  name="Complex"
+  args={{
     size: {
-      width: { type: "fill" },
-      height: { type: "fill" },
+      width: { type: "fixed", value: 128 },
+      height: { type: "fixed", value: 128 },
     },
-    source: {
-      light: {
-        width: 600,
-        height: 400,
-        original: "https://placehold.co/600x400",
-        heic: "https://placehold.co/600x400",
-        heic_low_res: "https://placehold.co/600x400",
-        webp: "https://placehold.co/600x400",
-        webp_low_res: "https://placehold.co/600x400",
+    mask_shape: {
+      type: "rectangle",
+      corners: {
+        top_leading: 0,
+        top_trailing: 16,
+        bottom_trailing: 32,
+        bottom_leading: 64,
       },
-      dark: null,
     },
+    fit_mode: "fill",
+    padding: { top: 0, bottom: 0, leading: 0, trailing: 0 },
+    margin: { top: 0, bottom: 0, leading: 0, trailing: 0 },
     color_overlay: {
-      dark: {
-        type: "hex",
-        value: "#000000FF",
-      },
       light: {
-        type: "hex",
-        value: "#e7c00069",
+        type: "linear",
+        degrees: 180,
+        points: [
+          { percent: 0, color: "#ff000080" },
+          { percent: 100, color: "#ff00ff00" },
+        ],
+      },
+    },
+    border: {
+      width: 3,
+      color: {
+        light: { type: "hex", value: "#00ff0080" },
+      },
+    },
+    shadow: {
+      x: 0,
+      y: 0,
+      radius: 16,
+      color: {
+        light: { type: "hex", value: "#0000ff80" },
       },
     },
   }}

package/dist/components/image/Image.svelte

@@ -1,163 +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, ...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,
-      ...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;