@revenuecat/purchases-ui-js 2.0.0 → 2.0.2

package/dist/components/image/Image.svelte

@@ -1,9 +1,13 @@
 <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";
 
-  const { id, source, purchaseState, ...restProps }: ImageProps = $props();
+  const { id, source, ...restProps }: ImageProps = $props();
+
+  const getColorMode = getColorModeContext();
+  const colorMode = $derived(getColorMode());
 
   let imageAspectRatio = $state(0);
   let imageElement: HTMLImageElement | null;
@@ -14,25 +18,28 @@
       imageAspectRatio = imageElement.naturalHeight / imageElement.naturalWidth;
     }
   }
+
   const { imageStyles, maskPath, linearGradientAngle } = $derived(
-    getImageComponentStyles({
+    getImageComponentStyles(colorMode, {
       id,
-      colorMode: purchaseState.colorMode,
       source,
-      purchaseState,
       ...restProps,
       imageAspectRatio,
     }),
   );
 
   const imageSource = $derived.by(() => {
-    const colorMode = purchaseState.colorMode;
     if (source[colorMode]?.original) {
       return source[colorMode].original;
     } else {
       return source[DEFAULT_COLOR_MODE]?.original as string;
     }
   });
+
+  const colorOverlay = $derived(restProps.color_overlay);
+  const colorInfo = $derived(
+    colorOverlay?.[colorMode] ?? colorOverlay?.[DEFAULT_COLOR_MODE],
+  );
 </script>
 
 <img
@@ -64,7 +71,7 @@
       {/if}
     </clipPath>
 
-    {#if restProps.color_overlay?.[purchaseState.colorMode]?.type === "linear"}
+    {#if colorInfo?.type === "linear"}
       <linearGradient
         id={`gradient-${id}`}
         x1={linearGradientAngle.x1}
@@ -72,14 +79,14 @@
         x2={linearGradientAngle.x2}
         y2={linearGradientAngle.y2}
       >
-        {#each restProps.color_overlay?.[purchaseState.colorMode]?.points || restProps.color_overlay?.[DEFAULT_COLOR_MODE]?.points || [] as stop}
+        {#each colorInfo?.points || [] as stop}
           <stop
             offset={`${stop.percent}%`}
             style={`stop-color: ${stop.color}`}
           />
         {/each}
       </linearGradient>
-    {:else if restProps.color_overlay?.[purchaseState.colorMode]?.type === "radial"}
+    {:else if colorInfo?.type === "radial"}
       <radialGradient
         id={`gradient-${id}`}
         cx="50%"
@@ -88,22 +95,16 @@
         fx="50%"
         fy="50%"
       >
-        {#each restProps.color_overlay?.[purchaseState.colorMode]?.points || restProps.color_overlay?.[DEFAULT_COLOR_MODE]?.points || [] as stop}
+        {#each colorInfo?.points || [] as stop}
           <stop
             offset={`${stop.percent}%`}
             style={`stop-color: ${stop.color}`}
           />
         {/each}
       </radialGradient>
-    {:else if restProps.color_overlay?.[purchaseState.colorMode]?.type === "hex"}
+    {:else if colorInfo?.type === "hex"}
       <linearGradient id={`gradient-${id}`}>
-        <stop
-          offset="0%"
-          style={`stop-color: ${
-            restProps.color_overlay[purchaseState.colorMode]?.value ||
-            restProps.color_overlay?.[DEFAULT_COLOR_MODE]?.value
-          }`}
-        />
+        <stop offset="0%" style={`stop-color: ${colorInfo?.value}`} />
       </linearGradient>
     {/if}
   </defs>

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

@@ -1,10 +1,11 @@
 import type { ImageProps } from "../../data/entities";
+import type { ColorMode } from "../../types";
 /**
  * Generates comprehensive styles for image components by combining gradient and size styles
  * @param props - Image component properties including gradient, mask and size
  * @returns Object containing image style variables and gradient style variables
  */
-export declare const getImageComponentStyles: (props: ImageProps & {
+export declare const getImageComponentStyles: (colorMode: ColorMode, props: ImageProps & {
     imageAspectRatio: number;
 }) => {
     imageStyles: string;

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

@@ -4,7 +4,7 @@ import { getActiveStateProps, getLinearGradientAngle, getMaskPath, getMaskStyle,
  * @param props - Image component properties including gradient, mask and size
  * @returns Object containing image style variables and gradient style variables
  */
-export const getImageComponentStyles = (props) => {
+export const getImageComponentStyles = (colorMode, props) => {
     const { size, overrides, componentState, zStackChildStyles } = props;
     const imageStyles = {
         "--height": "unset",
@@ -24,7 +24,7 @@ export const getImageComponentStyles = (props) => {
     Object.assign(imageStyles, getMaskStyle(props.mask_shape));
     const prefixedImageStyles = prefixObject(imageStyles, "image");
     const maskPath = getMaskPath(props);
-    const linearGradientAngle = getLinearGradientAngle(props);
+    const linearGradientAngle = getLinearGradientAngle(colorMode, props);
     return {
         imageStyles: stringifyStyles(prefixedImageStyles),
         maskPath,

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

@@ -1,18 +1,27 @@
 <script module lang="ts">
-  import { defineMeta } from "@storybook/addon-svelte-csf";
   import Package from "./Package.svelte";
-  import type { Extra, SupportedActions } from "../../data/entities";
-  import type { PurchaseState } from "../../data/state";
-  import { DEFAULT_COLOR_MODE } from "../../utils/constants";
+  import { localizationDecorator } from "../../stories/localization-decorator";
+  import { defineMeta } from "@storybook/addon-svelte-csf";
 
-  const onAction = (action: SupportedActions, data?: Extra) => {
-    alert(`${action.type} ${JSON.stringify(data)}`);
-  };
+  const defaultLocale = "en_US";
+  const priceLid = "QZ4ZmYsqjN";
+  const nameLid = "BcX-6YwhoV";
 
   const { Story } = defineMeta({
     title: "Components/Package",
     component: Package,
     tags: ["autodocs"],
+    decorators: [
+      localizationDecorator({
+        defaultLocale,
+        localizations: {
+          [defaultLocale]: {
+            [nameLid]: "Monthly",
+            [priceLid]: "$1.99",
+          },
+        },
+      }),
+    ],
     argTypes: {
       stack: {
         control: { type: "object" },
@@ -26,18 +35,6 @@
       },
     },
   });
-
-  export const labelsData = {
-    en_US: {
-      "BcX-6YwhoV": "Monthly",
-      QZ4ZmYsqjN: "$1.99",
-    },
-  };
-  const purchaseState: PurchaseState = {
-    colorMode: DEFAULT_COLOR_MODE,
-    locale: "en_US",
-    defaultLocale: "en_US",
-  };
 </script>
 
 <!-- Default  -->
@@ -47,17 +44,23 @@
     id: "6rQSD5e2Kz",
     is_selected_by_default: false,
     name: "Package - Monthly",
-    package_id: "$rc_annual",
-    purchaseState,
+    package_id: "$rc_monthly",
     stack: {
-      purchaseState,
       background_color: {
         light: {
           type: "hex",
           value: "#09090b",
         },
       },
-      labels: labelsData,
+      background: {
+        type: "color",
+        value: {
+          light: {
+            type: "hex",
+            value: "#09090b",
+          },
+        },
+      },
       border: {
         color: {
           light: {
@@ -76,8 +79,6 @@
               value: "#ffffff",
             },
           },
-          labels: labelsData,
-          components: [],
           font_name: null,
           font_size: "heading_s",
           font_weight: "bold",
@@ -106,7 +107,7 @@
               value: null,
             },
           },
-          text_lid: "BcX-6YwhoV",
+          text_lid: nameLid,
           type: "text",
         },
         {
@@ -116,7 +117,8 @@
               value: "#292631",
             },
           },
-          labels: labelsData,
+          background: null,
+          shadow: null,
           border: null,
           components: [
             {
@@ -127,7 +129,6 @@
                   value: "#ffffff",
                 },
               },
-              components: [],
               font_name: null,
               font_size: "body_m",
               font_weight: "extra_bold",
@@ -156,7 +157,7 @@
                   value: null,
                 },
               },
-              text_lid: "QZ4ZmYsqjN",
+              text_lid: priceLid,
               type: "text",
             },
           ],
@@ -241,9 +242,8 @@
       },
       spacing: 8,
       type: "stack",
+      shadow: null,
     },
-    onAction,
-    labels: labelsData,
     type: "package",
   }}
 />

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

@@ -1,10 +1,4 @@
 import Package from "./Package.svelte";
-export declare const labelsData: {
-    en_US: {
-        "BcX-6YwhoV": string;
-        QZ4ZmYsqjN: string;
-    };
-};
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/components/package/Package.svelte

@@ -1,33 +1,29 @@
 <script lang="ts">
-  import type { PackageProps, SelectPackageAction } from "../../data/entities";
   import Stack from "../stack/Stack.svelte";
+  import { getPaywallContext } from "../../stores/paywall";
+  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,
-    onAction,
-    purchaseState,
-    variableDictionary,
-    zStackChildStyles,
-  }: PackageProps = $props();
-  const onPackageClick = (evt: MouseEvent) => {
-    evt.preventDefault();
-    evt.stopPropagation();
-    onAction &&
-      onAction({ type: "select_package" } as SelectPackageAction, {
-        packageId: package_id,
-      });
-  };
+  const { stack, package_id, id, zStackChildStyles }: PackageProps = $props();
 
-  const packageVariables = $derived(
-    purchaseState.variablesPerPackage?.[package_id] || variableDictionary,
+  const { selectedPackageId, variablesPerPackage } = getPaywallContext();
+
+  const onPackageClick = () => ($selectedPackageId = package_id);
+
+  const fallbackVariables = getVariablesContext();
+  const variables = derived(
+    fallbackVariables,
+    (fallback) => $variablesPerPackage?.[package_id] ?? fallback,
   );
+  setVariablesContext(variables);
 
   const componentState = $derived({
-    selected: purchaseState?.selectedPackageId === package_id,
+    selected: $selectedPackageId === package_id,
   });
 
   const styles = $derived(
@@ -42,14 +38,7 @@
   onclick={onPackageClick}
   style={styles}
 >
-  <Stack
-    {...stack}
-    {labels}
-    {onAction}
-    {purchaseState}
-    {componentState}
-    variableDictionary={packageVariables}
-  />
+  <Stack {...stack} {componentState} />
 </button>
 
 <style>

package/dist/components/package/Package.svelte.d.ts

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

package/dist/components/paywall/Node.svelte

@@ -1,18 +1,4 @@
 <script lang="ts">
-  import Self from "./Node.svelte";
-  import {
-    type ActionsProps,
-    type ComponentLocalizations,
-    type ComponentState,
-    type Extra,
-    type PaywallComponent,
-    type PurchaseStateProps,
-    type SupportedActions,
-  } from "../../data/entities";
-  import { prefersDarkMode } from "../../stores/theme";
-  import type { VariableDictionary } from "../../utils/variable-utils";
-  import type { ZStackChildStyles } from "../stack/stack-utils";
-  import TextNode from "../text/TextNode.svelte";
   import {
     Footer,
     Image,
@@ -22,7 +8,12 @@
     Timeline,
   } from "../..";
   import ButtonNode from "../button/ButtonNode.svelte";
-  import type { Component } from "svelte";
+  import type { ZStackChildStyles } from "../stack/stack-utils";
+  import TextNode from "../text/TextNode.svelte";
+  import type { ComponentState } from "../../data/entities";
+  import type { Component } from "../../types/component";
+  import type { Component as SvelteComponent } from "svelte";
+  import Self from "./Node.svelte";
 
   type SupportedComponents =
     | TextNode
@@ -34,11 +25,8 @@
     | Footer
     | Timeline;
 
-  interface Props extends ActionsProps, PurchaseStateProps {
-    nodeData: PaywallComponent;
-    labels: ComponentLocalizations;
-    onAction?: (action: SupportedActions, data?: Extra) => void;
-    variableDictionary?: VariableDictionary;
+  interface Props {
+    nodeData: Component;
     zStackChildStyles?: ZStackChildStyles;
     componentState?: ComponentState;
   }
@@ -52,6 +40,10 @@
     package: Package,
     footer: Footer,
     timeline: Timeline,
+  } satisfies {
+    [key in Component["type"]]: SvelteComponent<
+      Extract<Component, { type: key }>
+    >;
   };
 
   /**
@@ -59,18 +51,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] = (
+    nodeData: Component,
   ) => {
     if (ComponentTypes[nodeData.type]) {
       return [
-        ComponentTypes[nodeData.type] as Component<SupportedComponents>,
+        ComponentTypes[nodeData.type] as SvelteComponent<SupportedComponents>,
         nodeData,
       ];
     }
@@ -78,7 +70,7 @@
     const { fallback } = nodeData;
     if (fallback && ComponentTypes[fallback?.type]) {
       return [
-        ComponentTypes[fallback.type] as Component<SupportedComponents>,
+        ComponentTypes[fallback.type] as SvelteComponent<SupportedComponents>,
         fallback,
       ];
     }
@@ -88,37 +80,21 @@
     throw new Error(`Invalid component type: ${nodeData.type}`);
   };
 
-  const {
-    nodeData,
-    labels,
-    onAction,
-    purchaseState,
-    variableDictionary,
-    zStackChildStyles,
-    ...restProps
-  }: Props = $props();
+  const { nodeData, zStackChildStyles, ...restProps }: Props = $props();
 
   const [ComponentToRender, dataToUse] = $derived(getComponentClass(nodeData));
+
+  const components = $derived(
+    ("components" in nodeData ? nodeData.components : undefined) ?? [],
+  );
 </script>
 
 <ComponentToRender
   {...(dataToUse as any) || {}}
-  {labels}
-  prefersDarkMode={$prefersDarkMode}
-  {onAction}
-  {purchaseState}
-  {variableDictionary}
   {zStackChildStyles}
   {...restProps}
 >
-  {#each nodeData.components as PaywallComponent[] as childData}
-    <Self
-      nodeData={childData}
-      {labels}
-      {onAction}
-      {purchaseState}
-      {variableDictionary}
-      {...restProps}
-    />
+  {#each components as childData}
+    <Self nodeData={childData} {...restProps} />
   {/each}
 </ComponentToRender>

package/dist/components/paywall/Node.svelte.d.ts

@@ -1,29 +1,26 @@
-import { type ActionsProps, type ComponentLocalizations, type ComponentState, type Extra, type PaywallComponent, type PurchaseStateProps, type SupportedActions } from "../../data/entities";
-import type { VariableDictionary } from "../../utils/variable-utils";
-import type { ZStackChildStyles } from "../stack/stack-utils";
-import TextNode from "../text/TextNode.svelte";
+import { SvelteComponent } from "svelte";
 import { Footer, Image, Package, PurchaseButton, Stack, Timeline } from "../..";
 import ButtonNode from "../button/ButtonNode.svelte";
-import type { Component } from "svelte";
+import type { ZStackChildStyles } from "../stack/stack-utils";
+import TextNode from "../text/TextNode.svelte";
+import type { ComponentState } from "../../data/entities";
+import type { Component } from "../../types/component";
 type SupportedComponents = TextNode | Stack | Image | ButtonNode | PurchaseButton | Package | Footer | Timeline;
-interface Props extends ActionsProps, PurchaseStateProps {
-    nodeData: PaywallComponent;
-    labels: ComponentLocalizations;
-    onAction?: (action: SupportedActions, data?: Extra) => void;
-    variableDictionary?: VariableDictionary;
+interface Props {
+    nodeData: Component;
     zStackChildStyles?: ZStackChildStyles;
     componentState?: ComponentState;
 }
-declare const Node: Component<Props, {
+declare const Node: import("svelte").Component<Props, {
     /**
        * This function returns the component class and the node data for a given paywall component.
        * 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
-       */ getComponentClass: (nodeData: PaywallComponent) => [Component<SupportedComponents>, PaywallComponent];
+       */ getComponentClass: (nodeData: Component) => [SvelteComponent<SupportedComponents>, Component];
 }, "">;
 type Node = ReturnType<typeof Node>;
 export default Node;