@revenuecat/purchases-ui-js 0.0.12 → 0.0.13

package/dist/components/button/ButtonNode.stories.svelte

@@ -2,7 +2,7 @@
   import { defineMeta } from "@storybook/addon-svelte-csf";
   import ButtonNode from "./ButtonNode.svelte";
   import { colorModeStoryMeta } from "../../stories/meta-templates";
-  import type { SupportedActions, TextProps } from "../../data/entities";
+  import type { SupportedActions, TextNodeProps } from "../../data/entities";
 
   const onAction = (action: SupportedActions) => {
     alert(action.type);

package/dist/components/image/Image.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { getImageComponentStyles } from "./image-utils";
-  import { stringifyStyles } from "../../utils";
+  import { stringifyStyles } from "../../utils/style-utils";
   import type { ImageProps } from "../../data/entities";
 
   const { id, colorMode, source, ...restProps }: ImageProps = $props();
@@ -30,12 +30,13 @@
     border-radius: var(--corner-radius, unset);
     clip-path: var(--clip-path, unset);
     display: flex;
-    flex: 1 0 auto;
+    flex: var(--flex, 1 0 auto);
   }
   .image {
     width: 100%;
     height: 100%;
     object-fit: cover;
+    display: block;
   }
   .image-overlay {
     position: absolute;

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

@@ -1,4 +1,4 @@
-import { getGradientStyle, getMaskStyle, getSizeStyle } from "../../utils";
+import { getGradientStyle, getMaskStyle, getSizeStyle, } from "../../utils/style-utils";
 /**
  * Generates comprehensive styles for image components by combining gradient and size styles
  * @param props - Image component properties including gradient, mask and size

package/dist/components/paywall/Node.svelte

@@ -1,13 +1,5 @@
 <script lang="ts">
-  import {
-    Stack,
-    Text,
-    Button,
-    Image,
-    PurchaseButton,
-    Package,
-    Footer,
-  } from "../..";
+  import { Stack, Image, PurchaseButton, Package, Footer } from "../..";
   import Self from "./Node.svelte";
   import {
     type ActionsProps,
@@ -19,19 +11,18 @@
   } from "../../data/entities";
   import { prefersDarkMode } from "../../stores/theme";
   import ButtonNode from "../button/ButtonNode.svelte";
-  import type { PurchaseState } from "../../data/state";
+  import TextNode from "../text/TextNode.svelte";
 
   interface Props extends ActionsProps, PurchaseStateProps {
     nodeData: PaywallComponent;
     labels: ComponentLocalizations;
     onAction?: (action: SupportedActions, data?: Extra) => void;
-    purchaseState?: PurchaseState;
   }
 
   const { nodeData, labels, onAction, purchaseState }: Props = $props();
 
   const ComponentTypes = {
-    text: Text,
+    text: TextNode,
     stack: Stack,
     image: Image,
     button: ButtonNode,

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

@@ -1,9 +1,7 @@
 import { type ActionsProps, type ComponentLocalizations, type Extra, type PaywallComponent, type PurchaseStateProps, type SupportedActions } from "../../data/entities";
-import type { PurchaseState } from "../../data/state";
 declare const Node: import("svelte").Component<ActionsProps & PurchaseStateProps & {
     nodeData: PaywallComponent;
     labels: ComponentLocalizations;
     onAction?: (action: SupportedActions, data?: Extra) => void;
-    purchaseState?: PurchaseState;
 }, {}, "">;
 export default Node;

package/dist/components/paywall/Paywall.stories.svelte

@@ -2,7 +2,13 @@
   import { defineMeta } from "@storybook/addon-svelte-csf";
 
   import Paywall from "./Paywall.svelte";
-  import { paywallData } from "../../stories/fixtures";
+  import {
+    alignmentPaywallData,
+    calmPaywallData,
+    fontsPaywallData,
+    pastaPaywallData,
+    paywallData,
+  } from "../../stories/fixtures";
   import { fn } from "@storybook/test";
 
   const { Story } = defineMeta({
@@ -25,7 +31,7 @@
     onRestorePurchasesClicked: fn(),
   }}
 />
-
+<!-- Italian missing labels story -->
 <Story
   name="Italian Missing Labels"
   args={{
@@ -37,3 +43,51 @@
     onRestorePurchasesClicked: fn(),
   }}
 />
+
+<Story
+  name="Alignment paywall example"
+  args={{
+    paywallData: alignmentPaywallData,
+    selectedLocale: "en_US",
+    onPurchaseClicked: fn(),
+    onBackClicked: fn(),
+    onNavigateToClicked: fn(),
+    onRestorePurchasesClicked: fn(),
+  }}
+/>
+
+<Story
+  name="Fonts paywall example"
+  args={{
+    paywallData: fontsPaywallData,
+    selectedLocale: "en_US",
+    onPurchaseClicked: fn(),
+    onBackClicked: fn(),
+    onNavigateToClicked: fn(),
+    onRestorePurchasesClicked: fn(),
+  }}
+/>
+
+<Story
+  name="Pasta paywall example"
+  args={{
+    paywallData: pastaPaywallData,
+    selectedLocale: "en_US",
+    onPurchaseClicked: fn(),
+    onBackClicked: fn(),
+    onNavigateToClicked: fn(),
+    onRestorePurchasesClicked: fn(),
+  }}
+/>
+
+<Story
+  name="Calm paywall example"
+  args={{
+    paywallData: calmPaywallData,
+    selectedLocale: "en_US",
+    onPurchaseClicked: fn(),
+    onBackClicked: fn(),
+    onNavigateToClicked: fn(),
+    onRestorePurchasesClicked: fn(),
+  }}
+/>

package/dist/components/paywall/Paywall.svelte

@@ -8,7 +8,7 @@
 
   import Node from "./Node.svelte";
   import type { PurchaseState } from "../../data/state";
-  import { findSelectedPackageId, getLabelById } from "../../utils";
+  import { findSelectedPackageId, getLabelById } from "../../utils/style-utils";
 
   interface Props {
     paywallData: PaywallData;
@@ -98,7 +98,7 @@
   };
 </script>
 
-<div>
+<div class="paywall">
   <Node
     {onAction}
     nodeData={paywallData.components_config.base.stack}

package/dist/components/stack/Stack.svelte

@@ -2,7 +2,7 @@
   import type { StackProps } from "../../data/entities";
   import Node from "../paywall/Node.svelte";
   import { getStackComponentStyles } from "./stack-utils";
-  import { stringifyStyles } from "../../utils";
+  import { stringifyStyles } from "../../utils/style-utils";
 
   const {
     id,
@@ -56,6 +56,5 @@
     margin-block-end: var(--margin-block-end, 0);
     margin-inline-start: var(--margin-inline-start, 0);
     flex: var(--flex, 0 1 auto);
-    align-self: center;
   }
 </style>

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

@@ -1,5 +1,6 @@
 import type { StackProps } from "../../data/entities";
 type StackStyleVariables = {
+    "--flex": string;
     "--height": string;
     "--width": string;
     "--spacing": string;

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

@@ -1,4 +1,4 @@
-import { getComponentStyles, getDimensionStyle, getSizeStyle, } from "../../utils";
+import { getComponentStyles, getDimensionStyle, getSizeStyle, } from "../../utils/style-utils";
 /**
  * Generates comprehensive styles for stack components by combining component, dimension and size styles
  * @param props - Stack component properties including background, spacing, size, border etc.

package/dist/components/text/Text.svelte

@@ -1,38 +1,28 @@
 <script lang="ts">
-  import { getTextComponentStyles } from "./text-utils";
-  import type { TextProps } from "../../data/entities";
-  import { getLabelById, stringifyStyles } from "../../utils";
+  import type { Snippet } from "svelte";
 
-  const { id, labels, text_lid, purchaseState, ...restProps }: TextProps =
-    $props();
-
-  const { tagToRender, textStyles } = $derived(
-    getTextComponentStyles({
-      id,
-      labels,
-      text_lid,
-      purchaseState,
-      ...restProps,
-    }),
-  );
-  const stylesString = $derived(stringifyStyles(textStyles));
+  interface TextProps {
+    component?: string;
+    styleVariables?: string;
+    id?: string;
+    children?: Snippet;
+  }
 
-  const label = $derived(
-    getLabelById(
-      text_lid,
-      purchaseState.locale,
-      purchaseState.defaultLocale,
-      labels,
-    ),
-  );
+  const {
+    children,
+    styleVariables = "",
+    component = "p",
+    id,
+  }: TextProps = $props();
 </script>
 
-<svelte:element this={tagToRender} {id} style={stylesString} class="text-block">
-  {label}
+<svelte:element this={component} {id} style={styleVariables} class="text-block">
+  {@render children?.()}
 </svelte:element>
 
 <style>
   .text-block {
+    display: block;
     padding-block-start: var(--padding-block-start, unset);
     padding-inline-end: var(--padding-inline-end, unset);
     padding-block-end: var(--padding-block-end, unset);

package/dist/components/text/Text.svelte.d.ts

@@ -1,3 +1,8 @@
-import type { TextProps } from "../../data/entities";
-declare const Text: import("svelte").Component<TextProps, {}, "">;
+import type { Snippet } from "svelte";
+declare const Text: import("svelte").Component<{
+    component?: string;
+    styleVariables?: string;
+    id?: string;
+    children?: Snippet;
+}, {}, "">;
 export default Text;

package/dist/components/text/{Text.stories.svelte → TextNode.stories.svelte}

@@ -1,6 +1,6 @@
 <script module lang="ts">
   import { defineMeta } from "@storybook/addon-svelte-csf";
-  import Text from "./Text.svelte";
+  import TextNode from "./TextNode.svelte";
   import {
     colorModeStoryMeta,
     fontSizeStoryMeta,
@@ -12,12 +12,12 @@
   } from "../../stories/meta-templates";
 
   /*
-   * Documentatino for this component can be found in https://www.notion.so/revenuecat/Text-e257cb046e104351861f8364ede617be?pvs=4
+   * Documentation for this component can be found in https://www.notion.so/revenuecat/Text-e257cb046e104351861f8364ede617be?pvs=4
    */
 
   const { Story } = defineMeta({
     title: "Components/Text",
-    component: Text,
+    component: TextNode,
     tags: ["autodocs"],
     argTypes: {
       name: getTextControlStoryMeta("Content of the text to render"),
@@ -32,6 +32,11 @@
       horizontal_alignment: horizontalAlignmentStoryMeta,
       padding: getSpacingStoryMeta("Padding values in pixels"),
       margin: getSpacingStoryMeta("Margin values in pixels"),
+      variableDictionary: {
+        description: "Dictionary containing the values for the variables",
+        control: { type: "object" },
+        defaultValue: {},
+      },
     },
     args: {
       labels: { en_US: { lb123: "Test text" } },
@@ -46,6 +51,12 @@
       },
     },
   });
+
+  const mockVariableDictionary = {
+    product_name: "CatGPT",
+    price: "$39.99",
+    price_per_period: "$39.99/yr",
+  };
 </script>
 
 <!-- Default story -->
@@ -103,3 +114,44 @@
     name: "hello world!",
   }}
 />
+
+<!-- Text with variable dictionary story -->
+<Story
+  name="With variable dictionary"
+  args={{
+    font_weight: "regular",
+    text_style: "normal",
+    horizontal_alignment: "start",
+    padding: { top: 16, trailing: 24, bottom: 16, leading: 24 },
+    margin: { top: 8, trailing: 0, bottom: 8, leading: 0 },
+    name: "hello world!",
+    variableDictionary: mockVariableDictionary,
+    labels: {
+      en_US: {
+        lb123:
+          "This is a text that contains variables: {{ product_name }} for {{ price }} per {{ price_per_period }}",
+      },
+    },
+    text_lid: "lb123",
+  }}
+/>
+<!-- Text with missing variable in dictionary story -->
+<Story
+  name="With missing variable in dictionary"
+  args={{
+    font_weight: "regular",
+    text_style: "normal",
+    horizontal_alignment: "start",
+    padding: { top: 16, trailing: 24, bottom: 16, leading: 24 },
+    margin: { top: 8, trailing: 0, bottom: 8, leading: 0 },
+    name: "hello world!",
+    variableDictionary: mockVariableDictionary,
+    labels: {
+      en_US: {
+        lb123:
+          "This is a text with variables: {{ product_name }} for {{ price }} per {{ price_per_period }} and a missing variable: {{ sub_period_abbreviated }}",
+      },
+    },
+    text_lid: "lb123",
+  }}
+/>

package/dist/components/text/{Text.stories.svelte.d.ts → TextNode.stories.svelte.d.ts}

@@ -1,4 +1,4 @@
-import Text from "./Text.svelte";
+import TextNode from "./TextNode.svelte";
 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;
@@ -12,8 +12,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Text: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const TextNode: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-type Text = InstanceType<typeof Text>;
-export default Text;
+type TextNode = InstanceType<typeof TextNode>;
+export default TextNode;

package/dist/components/text/TextNode.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import { getTextComponentStyles } from "./text-utils";
+  import Text from "./Text.svelte";
+  import type { TextNodeProps } from "../../data/entities";
+  import { getLabelById, stringifyStyles } from "../../utils/style-utils";
+  import { replaceVariables } from "../../utils/variable-utils";
+
+  const {
+    id,
+    labels,
+    text_lid,
+    purchaseState,
+    variableDictionary,
+    ...restProps
+  }: TextNodeProps = $props();
+
+  const { tagToRender, textStyles } = $derived(
+    getTextComponentStyles({
+      id,
+      labels,
+      text_lid,
+      purchaseState,
+      ...restProps,
+    }),
+  );
+  const styles = $derived(stringifyStyles(textStyles));
+
+  const label = $derived(
+    getLabelById(
+      text_lid,
+      purchaseState.locale,
+      purchaseState.defaultLocale,
+      labels,
+    ),
+  );
+  const parsedLabel = $derived(
+    replaceVariables({
+      value: label,
+      dictionary: variableDictionary,
+    }),
+  );
+</script>
+
+<Text styleVariables={styles} component={tagToRender} {id}>
+  {parsedLabel}
+</Text>

package/dist/components/text/TextNode.svelte.d.ts

@@ -0,0 +1,3 @@
+import type { TextNodeProps } from "../../data/entities";
+declare const TextNode: import("svelte").Component<TextNodeProps, {}, "">;
+export default TextNode;

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

@@ -1,5 +1,5 @@
-import { type TextComponentTags } from "../../utils";
-import type { TextProps } from "../../data/entities";
+import { type TextComponentTags } from "../../utils/style-utils";
+import type { TextNodeProps } from "../../data/entities";
 type TextStyleVariables = {
     "--width": string;
     "--height": string;
@@ -13,7 +13,7 @@ type TextStyleVariables = {
  * @param props - Text component properties including font, color, background, spacing etc.
  * @returns Object containing text style variables and the appropriate HTML tag to render
  */
-export declare const getTextComponentStyles: (props: TextProps) => {
+export declare const getTextComponentStyles: (props: TextNodeProps) => {
     textStyles: TextStyleVariables;
     tagToRender: TextComponentTags;
 };

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

@@ -1,5 +1,5 @@
-import { getSizeStyle, getTextComponentTag, getTextStyles, } from "../../utils";
-import { getComponentStyles } from "../../utils";
+import { getSizeStyle, getTextComponentTag, getTextStyles, } from "../../utils/style-utils";
+import { getComponentStyles } from "../../utils/style-utils";
 /**
  * Generates comprehensive styles for text components by combining text, component and size styles
  * @param props - Text component properties including font, color, background, spacing etc.

package/dist/data/entities.d.ts

@@ -1,5 +1,6 @@
 import type { BorderType, ColorMode, ColorType, CornerRadiusType, DimensionType, FitTypes, FontSizeTags, FontWeights, ShadowType, ShapeType, SizeType, Spacing, TextAlignment } from "../types";
 import type { PurchaseState } from "./state";
+import type { VariableDictionary } from "../utils/variable-utils";
 export interface Extra {
     [key: string]: any;
 }
@@ -104,7 +105,7 @@ export interface StackProps extends SharedComponentProps {
     spacing?: number;
     type: "stack";
 }
-export interface TextProps extends SharedComponentProps {
+export interface TextNodeProps extends SharedComponentProps {
     background_color?: ColorType;
     color: ColorType;
     components: PaywallComponent[];
@@ -117,6 +118,7 @@ export interface TextProps extends SharedComponentProps {
     text_lid: string;
     type: "text";
     size: SizeType;
+    variableDictionary?: VariableDictionary;
 }
 type ImageSourceDictionaryType = Record<"original" | "heic" | "heic_low_res" | "webp" | "webp_low_res", string>;
 type ImageSourceType = {

package/dist/stories/fixtures.d.ts

@@ -3,6 +3,7 @@ export declare const paywallData: PaywallData;
 export declare const alignmentPaywallData: PaywallData;
 export declare const fontsPaywallData: PaywallData;
 export declare const pastaPaywallData: PaywallData;
+export declare const calmPaywallData: PaywallData;
 export declare const labelsData: {
     en_US: {
         id1: string;