@revenuecat/purchases-ui-js 2.0.1 → 2.0.3

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

@@ -1,263 +1,83 @@
-import { getTextComponentStyles } from "../text/text-utils";
-import { getActiveStateProps, getComponentStyles, getDimensionStyle, getInsetStyles, getSizeStyle, prefixObject, stringifyStyles, } 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.
- * @returns CSS style variables object with all stack-specific styles
- */
-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",
-        "--width": "initial",
-        "--spacing": `${spacing || 0}px`,
-        "--direction": "unset",
-        "--alignment": "unset",
-        "--distribution": "flex-start",
-        "--margin-block-start": "0px",
-        "--margin-inline-end": "0px",
-        "--margin-block-end": "0px",
-        "--margin-inline-start": "0px",
-        "--padding-block-start": "0px",
-        "--padding-inline-end": "0px",
-        "--padding-block-end": "0px",
-        "--padding-inline-start": "0px",
-        "--background": "unset",
-        "--text-color": "inherit",
-        "--border": "none",
-        "--border-end-start-radius": "0px",
-        "--border-end-end-radius": "0px",
-        "--border-start-start-radius": "0px",
-        "--border-start-end-radius": "0px",
-        "--shadow": "none",
-        "--position": "relative",
-        "--transform": "initial",
-        "--inset": "initial",
-    };
-    const activeStateProps = getActiveStateProps(overrides, componentState);
-    Object.assign(stackStyles, getComponentStyles({
-        background_color,
-        margin,
-        padding,
-        border,
-        colorMode,
-        shape,
-        shadow,
-        ...activeStateProps,
-    }), getDimensionStyle({
-        ...dimension,
-        ...activeStateProps,
-    }), getSizeStyle({ ...size, ...activeStateProps }));
-    Object.assign(stackStyles, zStackChildStyles);
-    const prefixedStyles = prefixObject(stackStyles, "stack");
-    return stringifyStyles(prefixedStyles);
-};
-/**
- * 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 function getBadgeStyles(colorMode, props) {
-    const { badge } = props;
-    if (!badge)
-        return "";
-    const styles = {
-        "--inset": "unset",
-        "--transform": "unset",
-        "--margin-block-start": "0px",
-        "--margin-inline-end": "0px",
-        "--margin-block-end": "0px",
-        "--margin-inline-start": "0px",
-        "--padding-block-start": "0px",
-        "--padding-inline-end": "0px",
-        "--padding-block-end": "0px",
-        "--padding-inline-start": "0px",
-        "--background": "unset",
-        "--text-color": "inherit",
-        "--border": "none",
-        "--border-end-start-radius": "0px",
-        "--border-end-end-radius": "0px",
-        "--border-start-start-radius": "0px",
-        "--border-start-end-radius": "0px",
-        "--shadow": "none",
-        "--badge-width": "unset",
-        "--z-index": "unset",
-    };
-    // Calculating this as a zIndex alignment since it behaves in the same way
-    // except there's no center alignment
-    Object.assign(styles, getInsetStyles({
-        type: "zlayer",
-        alignment: badge.alignment,
-    }), getComponentStyles({
-        ...badge,
-        background_color: badge.background_color,
-        color: badge.color,
-        colorMode,
-    }));
-    if (badge.style === "overlay") {
-        // Disable vertical margin for nested & center aligned badges
-        styles["--margin-block-start"] = "0px";
-        styles["--margin-block-end"] = "0px";
-        // Vertically center the badge to the edge of the stack
-        styles["--transform"] = getBadgeTransformStyles(badge, 0, -(props.border?.width || 0));
+import { px } from "../../utils/base-utils";
+const ALIGNMENT_MAP = Object.freeze({
+    leading: "flex-start",
+    top: "flex-start",
+    center: "center",
+    trailing: "flex-end",
+    bottom: "flex-end",
+});
+const DISTRIBUTION_MAP = Object.freeze({
+    space_between: "space-between",
+    space_around: "space-around",
+    space_evenly: "space-evenly",
+    start: "flex-start",
+    center: "center",
+    end: "flex-end",
+});
+export function mapDimension(dimension) {
+    if (dimension.type === "zlayer") {
+        return {};
     }
-    if (badge.style === "edge_to_edge") {
-        styles["--margin-block-start"] = "0px";
-        styles["--margin-block-end"] = "0px";
-        styles["--margin-inline-start"] = "0px";
-        styles["--margin-inline-end"] = "0px";
-        // Shared props between top and bottom
-        if (badge.alignment === "top" || badge.alignment === "bottom") {
-            styles["--badge-width"] =
-                `calc(100% + ${(props.border?.width || 0) * 2}px)`;
-            styles["--z-index"] = "-1";
-            const highestRadius = Math.max(props.shape?.corners?.top_leading || 0, props.shape?.corners?.top_trailing || 0);
-            // one offs for top and bottom
-            if (badge.alignment === "top") {
-                styles["--padding-block-end"] =
-                    `${highestRadius + badge.padding.bottom}px`;
-                styles["--transform"] = getBadgeTransformStyles(badge, highestRadius);
-            }
-            if (badge.alignment === "bottom") {
-                styles["--padding-block-start"] =
-                    `${highestRadius + badge.padding.top}px`;
-                styles["--transform"] = getBadgeTransformStyles(badge, -highestRadius);
-            }
-        }
-        else {
-            styles["--transform"] = getBadgeTransformStyles(badge);
-            Object.assign(styles, getBadgeBorderRadiusStyles(props));
-        }
-    }
-    const prefixedStyles = prefixObject(styles, "stack-badge");
-    return stringifyStyles(prefixedStyles);
-}
-const oppositeCornerDictionary = {
-    top_leading: "bottom_trailing",
-    top_trailing: "bottom_leading",
-    bottom_leading: "top_trailing",
-    bottom_trailing: "top_leading",
-};
-const propToCssPropDictionary = {
-    top_leading: "--border-start-start-radius",
-    top_trailing: "--border-start-end-radius",
-    bottom_leading: "--border-end-start-radius",
-    bottom_trailing: "--border-end-end-radius",
-};
-function getBadgeBorderRadiusStyles(props) {
-    const styles = {
-        "--border-end-start-radius": "0px",
-        "--border-end-end-radius": "0px",
-        "--border-start-start-radius": "0px",
-        "--border-start-end-radius": "0px",
+    const direction = dimension.type === "vertical" ? "column" : "row";
+    const justify = DISTRIBUTION_MAP[dimension.distribution] || "center";
+    const align = ALIGNMENT_MAP[dimension.alignment] || "center";
+    return {
+        "flex-direction": direction,
+        "justify-content": justify,
+        "align-items": align,
     };
-    const { badge } = props;
-    if (!badge)
-        return styles;
-    const borderWidth = props.border?.width || 0;
-    const badgeAlignment = badge.alignment;
-    // badge inner radius
-    styles[propToCssPropDictionary[oppositeCornerDictionary[badgeAlignment]]] =
-        `${badge.shape?.corners[oppositeCornerDictionary[badgeAlignment]]}px`;
-    // badge outer radius
-    styles[propToCssPropDictionary[badgeAlignment]] =
-        `${props.shape?.corners[badgeAlignment] - borderWidth}px`;
-    return styles;
 }
-/**
- * Generates CSS transform styles for badge positioning
- * @param badge - Badge configuration from StackProps
- * @param verticalOffset - Optional vertical offset in pixels for edge-to-edge badges
- * @returns CSS transform string for badge positioning
- */
-function getBadgeTransformStyles(badge, verticalOffset = 0, horizontalOffset = 0) {
-    if (!badge)
-        return "";
-    if (badge.style === "overlay") {
-        if (badge.alignment === "top_leading") {
-            return `translate(${horizontalOffset}px, calc(-50% + ${verticalOffset}px))`;
-        }
-        if (badge.alignment === "top_trailing") {
-            return `translate(calc(0% - ${horizontalOffset}px), calc(-50% + ${verticalOffset}px))`;
-        }
-        if (badge.alignment === "bottom_leading") {
-            return `translate(${horizontalOffset}px, calc(50% + ${verticalOffset}px))`;
-        }
-        if (badge.alignment === "bottom_trailing") {
-            return `translate(calc(0% - ${horizontalOffset}px), calc(50% + ${verticalOffset}px))`;
-        }
-        if (badge.alignment === "top") {
-            return `translate(calc(-50% + ${horizontalOffset}px), calc(-50% + ${verticalOffset}px))`;
-        }
-        if (badge.alignment === "bottom") {
-            return `translate(calc(50% + ${horizontalOffset}px), calc(50% + ${verticalOffset}px))`;
-        }
+const Z_ALIGNMENT_MAP = Object.freeze({
+    top_leading: { justifyContent: "flex-start", alignItems: "flex-start" },
+    top: { justifyContent: "center", alignItems: "flex-start" },
+    top_trailing: { justifyContent: "flex-end", alignItems: "flex-start" },
+    leading: { justifyContent: "flex-start", alignItems: "center" },
+    center: { justifyContent: "center", alignItems: "center" },
+    trailing: { justifyContent: "flex-end", alignItems: "center" },
+    bottom_leading: { justifyContent: "flex-start", alignItems: "flex-end" },
+    bottom: { justifyContent: "center", alignItems: "flex-end" },
+    bottom_trailing: { justifyContent: "flex-end", alignItems: "flex-end" },
+});
+export function mapLayerAlignment(alignment) {
+    return Z_ALIGNMENT_MAP[alignment];
+}
+export function mapBadge(badge, parentBorderWidth) {
+    if (badge == null) {
+        return {};
     }
-    if (badge.style === "edge_to_edge") {
-        if (badge.alignment === "top") {
-            return `translate(calc(-50% + ${horizontalOffset}px), calc(-100% - ${verticalOffset}px + 16px))`;
-        }
-        else if (badge.alignment === "bottom") {
-            return `translate(calc(50% + ${horizontalOffset}px), calc(100% + ${verticalOffset}px))`;
-        }
+    const { style, alignment } = badge;
+    const isTop = alignment.startsWith("top");
+    const isLeading = alignment.endsWith("leading");
+    const isTrailing = alignment.endsWith("trailing");
+    const isCenter = !isLeading && !isTrailing;
+    const offset = parentBorderWidth ?? 0;
+    if (style === "overlay") {
+        const translateX = isCenter ? "translateX(-50%)" : "";
+        const translateY = isTop ? "translateY(-50%)" : "translateY(50%)";
+        return {
+            "z-index": 10,
+            position: "absolute",
+            width: "max-content",
+            top: isTop ? px(-offset / 2) : "initial",
+            bottom: !isTop ? px(-offset / 2) : "initial",
+            left: isLeading ? px(-offset) : isCenter ? "50%" : "initial",
+            right: isTrailing ? px(-offset) : "initial",
+            transform: `${translateX} ${translateY}`,
+        };
     }
-    return "";
-}
-/**
- * Generates text styles and HTML tag for a stack's badge component
- * @param props - Stack component properties containing badge configuration
- * @returns Object containing:
- * - tagToRender: HTML tag to use for the badge text
- * - textStyles: CSS styles string for the badge text
- */
-export function getStackBadgeTextStyles(colorMode, props) {
-    const { badge } = props;
-    if (!badge)
-        return { tagToRender: "", textStyles: "" };
-    const { tagToRender, textStyles } = getTextComponentStyles(colorMode, {
-        id: props.id,
-        purchaseState: props.purchaseState,
-        ...badge,
-        components: [],
-        type: "text",
-        size: {
-            width: { type: "fit" },
-            height: { type: "fit" },
-        },
-        color: badge?.color,
-        name: props.name,
-    });
-    const resetSpacing = {
-        "--text-margin-block-start": "0px",
-        "--text-margin-inline-end": "0px",
-        "--text-margin-block-end": "0px",
-        "--text-margin-inline-start": "0px",
-        "--text-padding-block-start": "0px",
-        "--text-padding-inline-end": "0px",
-        "--text-padding-block-end": "0px",
-        "--text-padding-inline-start": "0px",
-    };
-    const stylesObject = {
-        ...textStyles,
-        ...resetSpacing,
-    };
-    const stringifiedStyles = stringifyStyles(stylesObject);
-    return {
-        tagToRender,
-        textStyles: stringifiedStyles,
-    };
-}
-export function getZStackChildStyles(props) {
-    const { dimension } = props;
-    const baseStyles = {
-        "--inset": "initial",
-        "--transform": "initial",
-        "--position": "relative",
-    };
-    if (dimension.type !== "zlayer")
-        return;
-    const insetStyles = getInsetStyles({ ...dimension, type: "zlayer" });
-    Object.assign(baseStyles, { ...insetStyles, "--position": "absolute" });
-    return baseStyles;
+    if (style === "nested") {
+        return {
+            "z-index": 10,
+            position: "absolute",
+            inset: 0,
+            display: "flex",
+            top: isTop ? px(offset) : "initial",
+            bottom: !isTop ? px(offset) : "initial",
+            left: isLeading ? px(offset) : isCenter ? "50%" : "initial",
+            right: isTrailing ? px(offset) : "initial",
+            transform: isCenter ? "translateX(-50%)" : "initial",
+        };
+    }
+    // Not supported yet.
+    return {};
 }

package/dist/components/text/Text.svelte

@@ -3,47 +3,13 @@
 
   interface TextProps {
     component?: string;
-    styleVariables?: string;
-    id?: string;
+    style?: string;
     children?: Snippet;
   }
 
-  const {
-    children,
-    styleVariables = "",
-    component = "p",
-    id,
-  }: TextProps = $props();
+  const { children, style = "", component = "p" }: TextProps = $props();
 </script>
 
-<svelte:element
-  this={component}
-  {id}
-  style={styleVariables}
-  class="rc-pw-text-block"
->
+<svelte:element this={component} {style}>
   {@render children?.()}
 </svelte:element>
-
-<style>
-  .rc-pw-text-block {
-    display: block;
-    padding-block-start: var(--text-padding-block-start, initial);
-    padding-inline-end: var(--text-padding-inline-end, initial);
-    padding-block-end: var(--text-padding-block-end, initial);
-    padding-inline-start: var(--text-padding-inline-start, initial);
-    margin-block-start: var(--text-margin-block-start, initial);
-    margin-inline-end: var(--text-margin-inline-end, initial);
-    margin-block-end: var(--text-margin-block-end, initial);
-    margin-inline-start: var(--text-margin-inline-start, initial);
-    color: var(--text-text-color, #ffffff);
-    background: var(--text-background, none);
-    font-size: var(--text-font-size, 1rem);
-    font-weight: var(--text-font-weight, normal);
-    text-align: var(--text-text-align, center);
-    font-family: var(--text-font-family, sans-serif);
-    -webkit-background-clip: var(--text-background-clip, initial);
-    background-clip: var(--text-background-clip, initial);
-    -webkit-text-fill-color: var(--text-text-fill-color, initial);
-  }
-</style>

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

@@ -1,8 +1,7 @@
 import type { Snippet } from "svelte";
 interface TextProps {
     component?: string;
-    styleVariables?: string;
-    id?: string;
+    style?: string;
     children?: Snippet;
 }
 declare const Text: import("svelte").Component<TextProps, {}, "">;

package/dist/components/text/TextNode.stories.svelte

@@ -1,18 +1,11 @@
 <script module lang="ts">
   import TextNode from "./TextNode.svelte";
   import { localizationDecorator } from "../../stories/localization-decorator";
-  import {
-    fontSizeStoryMeta,
-    fontWeightStoryMeta,
-    getColorStoryMeta,
-    getSpacingStoryMeta,
-    getTextControlStoryMeta,
-    horizontalAlignmentStoryMeta,
-  } from "../../stories/meta-templates";
   import { variablesDecorator } from "../../stories/variables-decorator";
   import type { Localizations } from "../../types/localization";
-  import type { VariableDictionary } from "../../utils/variable-utils";
+  import type { VariableDictionary } from "../../types/variables";
   import { defineMeta } from "@storybook/addon-svelte-csf";
+  import { VARIABLES } from "../paywall/fixtures/variables";
 
   /*
    * Documentation for this component can be found in https://www.notion.so/revenuecat/Text-e257cb046e104351861f8364ede617be?pvs=4
@@ -24,7 +17,6 @@
   const { Story } = defineMeta({
     title: "Components/Text",
     component: TextNode,
-    tags: ["autodocs"],
     decorators: [
       (Story, context) => {
         const localizations = context.parameters.localizations as Localizations;
@@ -40,25 +32,6 @@
         width: { type: "fill" },
         height: { type: "fill" },
       },
-      purchaseState: {},
-    },
-    argTypes: {
-      name: getTextControlStoryMeta("Content of the text to render"),
-      font_name: getTextControlStoryMeta(
-        "Font family to be used, uses GoogleFonts API",
-      ),
-      font_weight: fontWeightStoryMeta,
-      font_size: fontSizeStoryMeta,
-      color: getColorStoryMeta("Text color object"),
-      background_color: getColorStoryMeta("Background color object"),
-      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: {},
-      },
     },
     parameters: {
       localizations: {
@@ -71,43 +44,37 @@
   });
 
   const mockVariableDictionary = {
-    product_name: "CatGPT",
-    price: "$39.99",
-    price_per_period: "$39.99/yr",
-  } as VariableDictionary;
+    ...VARIABLES.$rc_weekly,
+    "product.store_product_name": "CatGPT",
+    "product.price": "$39.99",
+    "product.price_per_period": "$39.99/yr",
+  } satisfies VariableDictionary;
 </script>
 
-<!-- Default story -->
 <Story name="Default" args={{ name: "hello world!" }} />
 
-<!-- Font Weight text story -->
 <Story
   name="Font Weight"
   args={{
     font_weight: "bold",
-    text_style: "normal",
     horizontal_alignment: "leading",
     name: "hello world!",
   }}
 />
 
-<!-- Text Alignment text story -->
 <Story
   name="Text Alignment"
   args={{
     font_weight: "regular",
-    text_style: "normal",
     horizontal_alignment: "center",
     name: "hello world!",
   }}
 />
 
-<!-- Color text story -->
 <Story
   name="Color"
   args={{
     font_weight: "regular",
-    text_style: "normal",
     horizontal_alignment: "leading",
     color: {
       dark: { type: "hex", value: "#3471eb" },
@@ -121,12 +88,10 @@
   }}
 />
 
-<!-- Text with spacing story -->
 <Story
   name="With Spacing"
   args={{
     font_weight: "regular",
-    text_style: "normal",
     horizontal_alignment: "leading",
     padding: { top: 16, trailing: 24, bottom: 16, leading: 24 },
     margin: { top: 8, trailing: 0, bottom: 8, leading: 0 },
@@ -134,12 +99,10 @@
   }}
 />
 
-<!-- Text with variable dictionary story -->
 <Story
   name="With variable dictionary"
   args={{
     font_weight: "regular",
-    text_style: "normal",
     horizontal_alignment: "leading",
     padding: { top: 16, trailing: 24, bottom: 16, leading: 24 },
     margin: { top: 8, trailing: 0, bottom: 8, leading: 0 },
@@ -151,17 +114,16 @@
     localizations: {
       [defaultLocale]: {
         [text_lid]:
-          "This is a text that contains variables: {{ product_name }} for {{ price }} per {{ price_per_period }}",
+          "This is a text that contains variables: {{ product.product_name }} for {{ product.price }} per {{ product.price_per_period }}",
       },
     } satisfies Localizations,
   }}
 />
-<!-- Text with missing variable in dictionary story -->
+
 <Story
   name="With missing variable in dictionary"
   args={{
     font_weight: "regular",
-    text_style: "normal",
     horizontal_alignment: "leading",
     padding: { top: 16, trailing: 24, bottom: 16, leading: 24 },
     margin: { top: 8, trailing: 0, bottom: 8, leading: 0 },
@@ -173,7 +135,7 @@
     localizations: {
       [defaultLocale]: {
         [text_lid]:
-          "This is a text with variables: {{ product_name }} for {{ price }} per {{ price_per_period }} and a missing variable: {{ sub_period_abbreviated }}",
+          "This is a text with variables: {{ product.store_product_name }} for {{ product.price }} per {{ product.price_per_period }} and a missing variable: {{ sub_period_abbreviated }}",
       },
     } satisfies Localizations,
   }}

package/dist/components/text/TextNode.svelte

@@ -1,67 +1,55 @@
 <script lang="ts">
   import {
     getHtmlFromMarkdown,
-    getTextNodeStyles,
-    getTextWrapperStyles,
+    getTextComponentStyles,
+    getTextWrapperInlineStyles,
   } from "./text-utils";
   import Text from "./Text.svelte";
-  import type { TextNodeProps } from "../../data/entities";
   import { getColorModeContext } from "../../stores/color-mode";
   import { getLocalizationContext } from "../../stores/localization";
+  import { getSelectedStateContext } from "../../stores/selected";
   import { getVariablesContext } from "../../stores/variables";
+  import type { TextNodeProps } from "../../types/components/text";
+  import { getActiveStateProps } from "../../utils/style-utils";
   import { replaceVariables } from "../../utils/variable-utils";
 
-  const {
-    id,
-    labels,
-    text_lid,
-    purchaseState,
-    background_color,
-    size,
-    ...restProps
-  }: TextNodeProps = $props();
+  const props: TextNodeProps = $props();
+
+  const selectedState = getSelectedStateContext();
+  const actualProps = $derived.by(() => {
+    return {
+      ...props,
+      ...getActiveStateProps($selectedState, props.overrides),
+    };
+  });
 
   const getColorMode = getColorModeContext();
   const colorMode = $derived(getColorMode());
 
   const { tagToRender, textStyles } = $derived(
-    getTextNodeStyles(colorMode, {
-      id,
-      labels,
-      text_lid,
-      purchaseState,
-      background_color,
-      size,
-      ...restProps,
-    }),
+    getTextComponentStyles(colorMode, actualProps),
   );
 
   const wrapperStyles = $derived(
-    getTextWrapperStyles(restProps, size, background_color),
+    getTextWrapperInlineStyles(
+      colorMode,
+      actualProps,
+      actualProps.size,
+      actualProps.background_color,
+    ),
   );
 
   const variables = getVariablesContext();
   const { getLocalizedString } = getLocalizationContext();
   const label = $derived(
-    replaceVariables(getLocalizedString(text_lid), $variables),
+    replaceVariables(getLocalizedString(actualProps.text_lid), $variables),
   );
+
   const markdownParsed = $derived(getHtmlFromMarkdown(label));
 </script>
 
-<span style={wrapperStyles} class="rc-pw-text-wrapper">
-  <Text styleVariables={textStyles} component={tagToRender} {id}>
+<span style={wrapperStyles}>
+  <Text style={textStyles} component={tagToRender}>
     {@html markdownParsed}
   </Text>
 </span>
-
-<style>
-  .rc-pw-text-wrapper {
-    display: block;
-    height: var(--text-height, initial);
-    width: var(--text-width, initial);
-    background: var(--text-background, none);
-    position: var(--text-position, relative);
-    inset: var(--text-inset, 0);
-    transform: var(--text-transform, initial);
-  }
-</style>

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

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