@revenuecat/purchases-ui-js 1.0.2 → 2.0.1

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

@@ -9,19 +9,30 @@
     sizeStoryMeta,
     stackDimensionStoryMeta,
   } from "../../stories/meta-templates";
-  import { labelsData as labels } from "../../stories/fixtures";
+  import { labelsData } 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 { localizationDecorator } from "../../stories/localization-decorator";
+
+  const defaultLocale = Object.keys(labelsData)[0];
+
+  const purchaseState: PurchaseState = {};
 
   const { Story } = defineMeta({
     title: "Components/Stack",
     component: Stack,
     tags: ["autodocs"],
+    decorators: [
+      localizationDecorator({
+        defaultLocale,
+        localizations: labelsData,
+      }),
+    ],
+    args: { purchaseState },
     argTypes: {
       dimension: stackDimensionStoryMeta,
       spacing: {
@@ -37,12 +48,6 @@
     },
   });
 
-  const purchaseState: PurchaseState = {
-    locale: "en_US",
-    defaultLocale: "en_US",
-    colorMode: DEFAULT_COLOR_MODE,
-  };
-
   const components: PaywallComponent[] = [
     {
       type: "text",
@@ -59,7 +64,6 @@
         dark: { type: "alias", value: "transparent" },
         light: { type: "alias", value: "transparent" },
       },
-      purchaseState,
     },
     {
       type: "text",
@@ -76,7 +80,6 @@
         dark: { type: "alias", value: "transparent" },
         light: { type: "alias", value: "transparent" },
       },
-      purchaseState,
     },
     {
       type: "text",
@@ -93,7 +96,6 @@
         dark: { type: "alias", value: "transparent" },
         light: { type: "alias", value: "transparent" },
       },
-      purchaseState,
     },
   ];
 </script>
@@ -103,9 +105,7 @@
   name="Vertical Stack"
   args={{
     type: "stack",
-    purchaseState,
     size: { width: { type: "fill" }, height: { type: "fill" } },
-    labels,
     dimension: {
       type: "vertical",
       alignment: "center",
@@ -125,13 +125,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 +145,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 +165,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 +186,12 @@
   name="Border Styles"
   args={{
     type: "stack",
-    purchaseState,
     dimension: {
       type: "vertical",
       alignment: "center",
       distribution: "start",
     },
     components,
-    labels,
     border: {
       width: 2,
       color: {
@@ -227,14 +219,12 @@
   name="Rounded Corners"
   args={{
     type: "stack",
-    purchaseState,
     dimension: {
       type: "vertical",
       alignment: "center",
       distribution: "start",
     },
     components,
-    labels,
     shape: {
       type: "rectangle",
       corners: {
@@ -259,14 +249,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 +288,6 @@
       distribution: "start",
     },
     components,
-    purchaseState,
-    labels,
     border: {
       width: 2,
       color: {
@@ -328,7 +314,6 @@
   name="Badge - Nested"
   args={{
     type: "stack",
-    purchaseState,
     dimension: {
       type: "zlayer",
       alignment: "center",
@@ -336,8 +321,7 @@
     components: [
       {
         type: "stack",
-        labels,
-        purchaseState,
+
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -352,8 +336,7 @@
       },
       {
         type: "stack",
-        labels,
-        purchaseState,
+
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -395,8 +378,7 @@
       },
       {
         type: "stack",
-        labels,
-        purchaseState,
+
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -438,8 +420,7 @@
       },
       {
         type: "stack",
-        labels,
-        purchaseState,
+
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -481,8 +462,7 @@
       },
       {
         type: "stack",
-        labels,
-        purchaseState,
+
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -524,8 +504,7 @@
       },
       {
         type: "stack",
-        labels,
-        purchaseState,
+
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -567,8 +546,7 @@
       },
       {
         type: "stack",
-        labels,
-        purchaseState,
+
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -610,8 +588,7 @@
       },
       {
         type: "stack",
-        labels,
-        purchaseState,
+
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -653,8 +630,7 @@
       },
       {
         type: "stack",
-        labels,
-        purchaseState,
+
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -695,7 +671,6 @@
         },
       },
     ],
-    labels,
     border: {
       width: 2,
       color: {
@@ -724,7 +699,6 @@
   name="Badge - Overlaid"
   args={{
     type: "stack",
-    purchaseState,
     dimension: {
       type: "zlayer",
       alignment: "center",
@@ -732,8 +706,7 @@
     components: [
       {
         type: "stack",
-        labels,
-        purchaseState,
+
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -748,8 +721,7 @@
       },
       {
         type: "stack",
-        labels,
-        purchaseState,
+
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -791,8 +763,7 @@
       },
       {
         type: "stack",
-        labels,
-        purchaseState,
+
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -834,8 +805,7 @@
       },
       {
         type: "stack",
-        labels,
-        purchaseState,
+
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -877,8 +847,7 @@
       },
       {
         type: "stack",
-        labels,
-        purchaseState,
+
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -920,8 +889,7 @@
       },
       {
         type: "stack",
-        labels,
-        purchaseState,
+
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -963,8 +931,7 @@
       },
       {
         type: "stack",
-        labels,
-        purchaseState,
+
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -1005,7 +972,6 @@
         },
       },
     ],
-    labels,
     border: {
       width: 2,
       color: {
@@ -1034,7 +1000,6 @@
   name="Badge - edge-to-edge top centered"
   args={{
     type: "stack",
-    purchaseState,
     dimension: {
       type: "vertical",
       alignment: "center",
@@ -1045,7 +1010,6 @@
       dark: { type: "hex", value: DEFAULT_BACKGROUND_COLOR },
     },
     components,
-    labels,
     border: {
       width: 2,
       color: {
@@ -1102,7 +1066,6 @@
   name="Badge - edge-to-edge bottom centered"
   args={{
     type: "stack",
-    purchaseState,
     dimension: {
       type: "vertical",
       alignment: "center",
@@ -1113,7 +1076,6 @@
       dark: { type: "hex", value: DEFAULT_BACKGROUND_COLOR },
     },
     components,
-    labels,
     border: {
       width: 2,
       color: {
@@ -1170,7 +1132,6 @@
   name="Badge - edge-to-edge side centered"
   args={{
     type: "stack",
-    purchaseState,
     dimension: {
       type: "zlayer",
       alignment: "center",
@@ -1181,8 +1142,7 @@
     components: [
       {
         type: "stack",
-        labels,
-        purchaseState,
+
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -1197,8 +1157,7 @@
       },
       {
         type: "stack",
-        labels,
-        purchaseState,
+
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -1256,8 +1215,7 @@
       },
       {
         type: "stack",
-        labels,
-        purchaseState,
+
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -1315,8 +1273,7 @@
       },
       {
         type: "stack",
-        labels,
-        purchaseState,
+
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -1374,8 +1331,7 @@
       },
       {
         type: "stack",
-        labels,
-        purchaseState,
+
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -1432,7 +1388,6 @@
         },
       },
     ],
-    labels,
     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,37 +7,40 @@
     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,
     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,
@@ -50,29 +52,23 @@
       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,20 +88,14 @@
       {#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}
         />
       {/if}

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;
 };

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

@@ -5,8 +5,8 @@ import { getActiveStateProps, getComponentStyles, getDimensionStyle, getInsetSty
  * @param props - Stack component properties including background, spacing, size, border etc.
  * @returns CSS style variables object with all stack-specific styles
  */
-export const getStackComponentStyles = (props) => {
-    const { background_color, margin, padding, spacing, size, border, shape, shadow, dimension, componentState, overrides, purchaseState, zStackChildStyles, } = props;
+export const getStackComponentStyles = (colorMode, props) => {
+    const { background_color, margin, padding, spacing, size, border, shape, shadow, dimension, componentState, overrides, zStackChildStyles, } = props;
     const stackStyles = {
         "--flex": "0 1 auto",
         "--height": "initial",
@@ -41,7 +41,7 @@ export const getStackComponentStyles = (props) => {
         margin,
         padding,
         border,
-        colorMode: purchaseState.colorMode,
+        colorMode,
         shape,
         shadow,
         ...activeStateProps,
@@ -58,7 +58,7 @@ export const getStackComponentStyles = (props) => {
  * @param props - Stack component properties containing badge configuration
  * @returns CSS style object with badge-specific styles including positioning, dimensions and appearance
  */
-export function getBadgeStyles(props) {
+export function getBadgeStyles(colorMode, props) {
     const { badge } = props;
     if (!badge)
         return "";
@@ -93,7 +93,7 @@ export function getBadgeStyles(props) {
         ...badge,
         background_color: badge.background_color,
         color: badge.color,
-        colorMode: props.purchaseState.colorMode,
+        colorMode,
     }));
     if (badge.style === "overlay") {
         // Disable vertical margin for nested & center aligned badges
@@ -211,13 +211,12 @@ function getBadgeTransformStyles(badge, verticalOffset = 0, horizontalOffset = 0
  * - tagToRender: HTML tag to use for the badge text
  * - textStyles: CSS styles string for the badge text
  */
-export function getStackBadgeTextStyles(props) {
+export function getStackBadgeTextStyles(colorMode, props) {
     const { badge } = props;
     if (!badge)
         return { tagToRender: "", textStyles: "" };
-    const { tagToRender, textStyles } = getTextComponentStyles({
+    const { tagToRender, textStyles } = getTextComponentStyles(colorMode, {
         id: props.id,
-        labels: props.labels,
         purchaseState: props.purchaseState,
         ...badge,
         components: [],