@revenuecat/purchases-ui-js 2.0.0 → 2.0.2

package/dist/components/purchase-button/PurchaseButton.svelte

@@ -1,29 +1,18 @@
 <script lang="ts">
-  import type { PurchaseButtonProps } from "../../data/entities";
+  import { getPurchaseButtonStyles } from "./purchase-button-utils";
   import Stack from "../stack/Stack.svelte";
   import { ButtonDeprecated } from "../../index";
-  import { getPurchaseButtonStyles } from "./purchase-button-utils";
+  import { getPaywallContext } from "../../stores/paywall";
+  import type { PurchaseButtonProps } from "../../types/components/purchase-button";
+
+  const { stack, zStackChildStyles, ...restProps }: PurchaseButtonProps =
+    $props();
 
-  const {
-    stack,
-    labels,
-    onAction,
-    purchaseState,
-    variableDictionary,
-    zStackChildStyles,
-    ...restProps
-  }: PurchaseButtonProps = $props();
-  const handleClick = () => {
-    onAction && onAction({ type: "purchase" });
-  };
+  const { onPurchase } = getPaywallContext();
 
   const buttonStyles = $derived(
     getPurchaseButtonStyles({
       stack,
-      labels,
-      onAction,
-      purchaseState,
-      variableDictionary,
       zStackChildStyles,
       ...restProps,
     }),
@@ -31,11 +20,11 @@
 </script>
 
 <ButtonDeprecated
-  onclick={handleClick}
+  onclick={onPurchase}
   class="rc-pw-purchase-button"
   style={buttonStyles}
 >
-  <Stack {...stack} {labels} {purchaseState} {variableDictionary} />
+  <Stack {...stack} />
 </ButtonDeprecated>
 
 <style>

package/dist/components/purchase-button/PurchaseButton.svelte.d.ts

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

package/dist/components/purchase-button/purchase-button-utils.d.ts

@@ -1,2 +1,2 @@
-import type { PurchaseButtonProps } from "../../data/entities";
+import type { PurchaseButtonProps } from "../../types/components/purchase-button";
 export declare function getPurchaseButtonStyles({ stack, zStackChildStyles, }: PurchaseButtonProps): string;

package/dist/components/stack/Stack.stories.svelte

@@ -1,6 +1,8 @@
 <script module lang="ts">
-  import { defineMeta } from "@storybook/addon-svelte-csf";
   import Stack from "./Stack.svelte";
+  import type { StackProps, TextNodeProps } from "../../data/entities";
+  import { localizations } from "../../stories/fixtures";
+  import { localizationDecorator } from "../../stories/localization-decorator";
   import {
     borderStoryMeta,
     getColorStoryMeta,
@@ -9,19 +11,24 @@
     sizeStoryMeta,
     stackDimensionStoryMeta,
   } from "../../stories/meta-templates";
-  import { labelsData as labels } from "../../stories/fixtures";
-  import type { PurchaseState } from "../../data/state";
-  import type { PaywallComponent } from "../../data/entities";
   import {
     DEFAULT_BACKGROUND_COLOR,
-    DEFAULT_COLOR_MODE,
     DEFAULT_TEXT_COLOR,
   } from "../../utils/constants";
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  const defaultLocale = Object.keys(localizations)[0];
 
   const { Story } = defineMeta({
     title: "Components/Stack",
     component: Stack,
     tags: ["autodocs"],
+    decorators: [
+      localizationDecorator({
+        defaultLocale,
+        localizations,
+      }),
+    ],
     argTypes: {
       dimension: stackDimensionStoryMeta,
       spacing: {
@@ -37,13 +44,7 @@
     },
   });
 
-  const purchaseState: PurchaseState = {
-    locale: "en_US",
-    defaultLocale: "en_US",
-    colorMode: DEFAULT_COLOR_MODE,
-  };
-
-  const components: PaywallComponent[] = [
+  const components = [
     {
       type: "text",
       size: {
@@ -52,14 +53,12 @@
       },
       horizontal_alignment: "center",
       name: "Item 1",
-      components: [],
       id: "1",
       text_lid: "id1",
       background_color: {
         dark: { type: "alias", value: "transparent" },
         light: { type: "alias", value: "transparent" },
       },
-      purchaseState,
     },
     {
       type: "text",
@@ -69,14 +68,12 @@
       },
       horizontal_alignment: "center",
       name: "Item 2",
-      components: [],
       id: "2",
       text_lid: "id2",
       background_color: {
         dark: { type: "alias", value: "transparent" },
         light: { type: "alias", value: "transparent" },
       },
-      purchaseState,
     },
     {
       type: "text",
@@ -86,16 +83,14 @@
       },
       horizontal_alignment: "center",
       name: "Item 3",
-      components: [],
       id: "3",
       text_lid: "id3",
       background_color: {
         dark: { type: "alias", value: "transparent" },
         light: { type: "alias", value: "transparent" },
       },
-      purchaseState,
     },
-  ];
+  ] as unknown as TextNodeProps[];
 </script>
 
 <!-- Vertical Stack -->
@@ -103,9 +98,7 @@
   name="Vertical Stack"
   args={{
     type: "stack",
-    purchaseState,
     size: { width: { type: "fill" }, height: { type: "fill" } },
-    labels,
     dimension: {
       type: "vertical",
       alignment: "center",
@@ -125,13 +118,11 @@
   name="Horizontal Stack"
   args={{
     type: "stack",
-    purchaseState,
     dimension: {
       type: "horizontal",
       alignment: "center",
       distribution: "space_between",
     },
-    labels,
     components,
     spacing: 16,
     padding: { top: 16, trailing: 16, bottom: 16, leading: 16 },
@@ -147,13 +138,11 @@
   name="Space Around"
   args={{
     type: "stack",
-    purchaseState,
     dimension: {
       type: "horizontal",
       alignment: "center",
       distribution: "space_around",
     },
-    labels,
     components,
     spacing: 16,
     padding: { top: 16, trailing: 16, bottom: 16, leading: 16 },
@@ -169,14 +158,12 @@
   name="Background Colors"
   args={{
     type: "stack",
-    purchaseState,
     dimension: {
       type: "vertical",
       alignment: "center",
       distribution: "start",
     },
     components,
-    labels,
     background_color: {
       light: { type: "hex", value: "#C8E6FF" },
       dark: { type: "hex", value: "#C8E6FF" },
@@ -192,14 +179,12 @@
   name="Border Styles"
   args={{
     type: "stack",
-    purchaseState,
     dimension: {
       type: "vertical",
       alignment: "center",
       distribution: "start",
     },
     components,
-    labels,
     border: {
       width: 2,
       color: {
@@ -227,14 +212,12 @@
   name="Rounded Corners"
   args={{
     type: "stack",
-    purchaseState,
     dimension: {
       type: "vertical",
       alignment: "center",
       distribution: "start",
     },
     components,
-    labels,
     shape: {
       type: "rectangle",
       corners: {
@@ -259,14 +242,12 @@
   name="Fixed Size"
   args={{
     type: "stack",
-    purchaseState,
     dimension: {
       type: "vertical",
       alignment: "center",
       distribution: "start",
     },
     components,
-    labels,
     size: {
       width: { type: "fixed", value: 300 },
       height: { type: "fixed", value: 200 },
@@ -300,8 +281,6 @@
       distribution: "start",
     },
     components,
-    purchaseState,
-    labels,
     border: {
       width: 2,
       color: {
@@ -328,7 +307,6 @@
   name="Badge - Nested"
   args={{
     type: "stack",
-    purchaseState,
     dimension: {
       type: "zlayer",
       alignment: "center",
@@ -336,8 +314,6 @@
     components: [
       {
         type: "stack",
-        labels,
-        purchaseState,
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -352,8 +328,6 @@
       },
       {
         type: "stack",
-        labels,
-        purchaseState,
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -395,8 +369,6 @@
       },
       {
         type: "stack",
-        labels,
-        purchaseState,
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -438,8 +410,6 @@
       },
       {
         type: "stack",
-        labels,
-        purchaseState,
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -481,8 +451,6 @@
       },
       {
         type: "stack",
-        labels,
-        purchaseState,
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -524,8 +492,6 @@
       },
       {
         type: "stack",
-        labels,
-        purchaseState,
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -567,8 +533,6 @@
       },
       {
         type: "stack",
-        labels,
-        purchaseState,
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -610,8 +574,6 @@
       },
       {
         type: "stack",
-        labels,
-        purchaseState,
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -653,8 +615,6 @@
       },
       {
         type: "stack",
-        labels,
-        purchaseState,
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -694,8 +654,7 @@
           },
         },
       },
-    ],
-    labels,
+    ] as unknown as StackProps[],
     border: {
       width: 2,
       color: {
@@ -724,7 +683,6 @@
   name="Badge - Overlaid"
   args={{
     type: "stack",
-    purchaseState,
     dimension: {
       type: "zlayer",
       alignment: "center",
@@ -732,8 +690,6 @@
     components: [
       {
         type: "stack",
-        labels,
-        purchaseState,
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -748,8 +704,6 @@
       },
       {
         type: "stack",
-        labels,
-        purchaseState,
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -791,8 +745,6 @@
       },
       {
         type: "stack",
-        labels,
-        purchaseState,
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -834,8 +786,6 @@
       },
       {
         type: "stack",
-        labels,
-        purchaseState,
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -877,8 +827,6 @@
       },
       {
         type: "stack",
-        labels,
-        purchaseState,
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -920,8 +868,6 @@
       },
       {
         type: "stack",
-        labels,
-        purchaseState,
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -963,8 +909,6 @@
       },
       {
         type: "stack",
-        labels,
-        purchaseState,
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -1004,8 +948,7 @@
           },
         },
       },
-    ],
-    labels,
+    ] as unknown as StackProps[],
     border: {
       width: 2,
       color: {
@@ -1034,7 +977,6 @@
   name="Badge - edge-to-edge top centered"
   args={{
     type: "stack",
-    purchaseState,
     dimension: {
       type: "vertical",
       alignment: "center",
@@ -1045,7 +987,6 @@
       dark: { type: "hex", value: DEFAULT_BACKGROUND_COLOR },
     },
     components,
-    labels,
     border: {
       width: 2,
       color: {
@@ -1102,7 +1043,6 @@
   name="Badge - edge-to-edge bottom centered"
   args={{
     type: "stack",
-    purchaseState,
     dimension: {
       type: "vertical",
       alignment: "center",
@@ -1113,7 +1053,6 @@
       dark: { type: "hex", value: DEFAULT_BACKGROUND_COLOR },
     },
     components,
-    labels,
     border: {
       width: 2,
       color: {
@@ -1170,7 +1109,6 @@
   name="Badge - edge-to-edge side centered"
   args={{
     type: "stack",
-    purchaseState,
     dimension: {
       type: "zlayer",
       alignment: "center",
@@ -1181,8 +1119,6 @@
     components: [
       {
         type: "stack",
-        labels,
-        purchaseState,
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -1197,14 +1133,11 @@
       },
       {
         type: "stack",
-        labels,
-        purchaseState,
         dimension: {
           type: "zlayer",
           alignment: "center",
         },
         components: [],
-
         border: {
           width: 2,
           color: {
@@ -1256,14 +1189,11 @@
       },
       {
         type: "stack",
-        labels,
-        purchaseState,
         dimension: {
           type: "zlayer",
           alignment: "center",
         },
         components: [],
-
         border: {
           width: 2,
           color: {
@@ -1315,14 +1245,11 @@
       },
       {
         type: "stack",
-        labels,
-        purchaseState,
         dimension: {
           type: "zlayer",
           alignment: "center",
         },
         components: [],
-
         border: {
           width: 2,
           color: {
@@ -1374,14 +1301,11 @@
       },
       {
         type: "stack",
-        labels,
-        purchaseState,
         dimension: {
           type: "zlayer",
           alignment: "center",
         },
         components: [],
-
         border: {
           width: 2,
           color: {
@@ -1431,8 +1355,7 @@
           },
         },
       },
-    ],
-    labels,
+    ] as unknown as StackProps[],
     border: {
       width: 2,
       color: {

package/dist/components/stack/Stack.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import type { StackProps } from "../../data/entities";
   import Node from "../paywall/Node.svelte";
   import {
     getBadgeStyles,
@@ -8,38 +7,30 @@
     getZStackChildStyles,
   } from "./stack-utils";
   import Text from "../text/Text.svelte";
-  import { getLabelAndReplaceVariables } from "../../utils/variable-utils";
+  import type { StackProps } from "../../data/entities";
+  import { getColorModeContext } from "../../stores/color-mode";
+  import { getLocalizationContext } from "../../stores/localization";
+  import { getVariablesContext } from "../../stores/variables";
+  import { replaceVariables } from "../../utils/variable-utils";
+
+  const { id, components, badge, zStackChildStyles, ...restProps }: StackProps =
+    $props();
 
-  const {
-    id,
-    components,
-    labels,
-    onAction,
-    purchaseState,
-    variableDictionary,
-    badge,
-    zStackChildStyles,
-    ...restProps
-  }: StackProps = $props();
+  const getColorMode = getColorModeContext();
+  const colorMode = $derived(getColorMode());
 
   const stackStyles = $derived(
-    getStackComponentStyles({
+    getStackComponentStyles(colorMode, {
       id,
       components,
-      labels,
-      onAction,
-      purchaseState,
       zStackChildStyles,
       ...restProps,
     }),
   );
   const badgeStyles = $derived(
-    getBadgeStyles({
+    getBadgeStyles(colorMode, {
       id,
       components,
-      labels,
-      onAction,
-      purchaseState,
       badge,
       ...restProps,
     }),
@@ -49,30 +40,20 @@
     getZStackChildStyles({
       id,
       components,
-      labels,
-      onAction,
-      purchaseState,
       ...restProps,
     }),
   );
+
+  const variables = getVariablesContext();
+  const { getLocalizedString } = getLocalizationContext();
   const label = $derived(
-    getLabelAndReplaceVariables({
-      defaultLocale: purchaseState.defaultLocale,
-      locale: purchaseState.locale,
-      labels,
-      variableDictionary,
-      text_lid: badge?.text_lid,
-    }),
+    replaceVariables(getLocalizedString(badge?.text_lid), $variables),
   );
 
   const { tagToRender, textStyles } = $derived(
-    getStackBadgeTextStyles({
+    getStackBadgeTextStyles(colorMode, {
       id,
       components,
-      labels,
-      onAction,
-      purchaseState,
-      variableDictionary,
       badge,
       ...restProps,
     }),
@@ -92,22 +73,11 @@
       {#if zStackChildrenStyles}
         <Node
           nodeData={component}
-          {labels}
-          {onAction}
-          {purchaseState}
-          {variableDictionary}
           componentState={restProps.componentState}
           zStackChildStyles={index > 0 ? zStackChildrenStyles : undefined}
         />
       {:else}
-        <Node
-          nodeData={component}
-          {labels}
-          {onAction}
-          {purchaseState}
-          {variableDictionary}
-          componentState={restProps.componentState}
-        />
+        <Node nodeData={component} componentState={restProps.componentState} />
       {/if}
     {/each}
   </div>

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

@@ -1,16 +1,17 @@
 import type { StackProps } from "../../data/entities";
+import type { ColorMode } from "../../types";
 /**
  * Generates comprehensive styles for stack components by combining component, dimension and size styles
  * @param props - Stack component properties including background, spacing, size, border etc.
  * @returns CSS style variables object with all stack-specific styles
  */
-export declare const getStackComponentStyles: (props: StackProps) => string;
+export declare const getStackComponentStyles: (colorMode: ColorMode, props: StackProps) => string;
 /**
  * Generates styles for badge component within a stack
  * @param props - Stack component properties containing badge configuration
  * @returns CSS style object with badge-specific styles including positioning, dimensions and appearance
  */
-export declare function getBadgeStyles(props: StackProps): string;
+export declare function getBadgeStyles(colorMode: ColorMode, props: StackProps): string;
 /**
  * Generates text styles and HTML tag for a stack's badge component
  * @param props - Stack component properties containing badge configuration
@@ -18,7 +19,7 @@ export declare function getBadgeStyles(props: StackProps): string;
  * - tagToRender: HTML tag to use for the badge text
  * - textStyles: CSS styles string for the badge text
  */
-export declare function getStackBadgeTextStyles(props: StackProps): {
+export declare function getStackBadgeTextStyles(colorMode: ColorMode, props: StackProps): {
     tagToRender: string;
     textStyles: string;
 };