@revenuecat/purchases-ui-js 2.0.0 → 2.0.2

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,16 +211,13 @@ 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: [],
         type: "text",
         size: {
             width: { type: "fit" },

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

@@ -1,6 +1,6 @@
 <script module lang="ts">
-  import { defineMeta } from "@storybook/addon-svelte-csf";
   import TextNode from "./TextNode.svelte";
+  import { localizationDecorator } from "../../stories/localization-decorator";
   import {
     fontSizeStoryMeta,
     fontWeightStoryMeta,
@@ -9,17 +9,38 @@
     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 { DEFAULT_COLOR_MODE, DEFAULT_TEXT_COLOR } from "../../utils/constants";
+  import { defineMeta } from "@storybook/addon-svelte-csf";
 
   /*
    * Documentation for this component can be found in https://www.notion.so/revenuecat/Text-e257cb046e104351861f8364ede617be?pvs=4
    */
 
+  const defaultLocale = "en_US";
+  const text_lid = "lb123";
+
   const { Story } = defineMeta({
     title: "Components/Text",
     component: TextNode,
     tags: ["autodocs"],
+    decorators: [
+      (Story, context) => {
+        const localizations = context.parameters.localizations as Localizations;
+        return localizationDecorator({
+          defaultLocale: Object.keys(localizations)[0],
+          localizations,
+        })(Story, context);
+      },
+    ],
+    args: {
+      text_lid,
+      size: {
+        width: { type: "fill" },
+        height: { type: "fill" },
+      },
+    },
     argTypes: {
       name: getTextControlStoryMeta("Content of the text to render"),
       font_name: getTextControlStoryMeta(
@@ -32,29 +53,14 @@
       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:
+    parameters: {
+      localizations: {
+        [defaultLocale]: {
+          [text_lid]:
             "Do not allow people to dim your shine because they are blinded. Tell them to put some sunglasses on.",
         },
-      },
-      text_lid: "lb123",
-      size: {
-        width: { type: "fill" },
-        height: { type: "fill" },
-      },
-      purchaseState: {
-        locale: "en_US",
-        defaultLocale: "en_US",
-        colorMode: DEFAULT_COLOR_MODE,
-      },
+      } satisfies Localizations,
     },
   });
 
@@ -62,7 +68,7 @@
     product_name: "CatGPT",
     price: "$39.99",
     price_per_period: "$39.99/yr",
-  };
+  } as VariableDictionary;
 </script>
 
 <!-- Default story -->
@@ -73,7 +79,6 @@
   name="Font Weight"
   args={{
     font_weight: "bold",
-    text_style: "normal",
     horizontal_alignment: "leading",
     name: "hello world!",
   }}
@@ -84,7 +89,6 @@
   name="Text Alignment"
   args={{
     font_weight: "regular",
-    text_style: "normal",
     horizontal_alignment: "center",
     name: "hello world!",
   }}
@@ -95,7 +99,6 @@
   name="Color"
   args={{
     font_weight: "regular",
-    text_style: "normal",
     horizontal_alignment: "leading",
     color: {
       dark: { type: "hex", value: "#3471eb" },
@@ -109,123 +112,11 @@
   }}
 />
 
-<!-- Linear Gradient Color text story -->
-<Story
-  name="LinearGradientColor"
-  args={{
-    font_weight: "regular",
-    text_style: "normal",
-    horizontal_alignment: "leading",
-    size: { width: { type: "fixed", value: 200 }, height: { type: "fit" } },
-    padding: { top: 20, trailing: 20, bottom: 20, leading: 20 },
-    color: {
-      dark: {
-        degrees: 90,
-        points: [
-          {
-            color: "#9f009f",
-            percent: 100,
-          },
-          {
-            color: "#090979ff",
-            percent: 35,
-          },
-          {
-            color: "#53d6ec",
-            percent: 0,
-          },
-        ],
-        type: "linear",
-      },
-      light: {
-        degrees: 45,
-        points: [
-          {
-            color: "#9f009f",
-            percent: 0,
-          },
-          {
-            color: "#090979ff",
-            percent: 50,
-          },
-
-          {
-            color: "#53d6ec",
-            percent: 100,
-          },
-        ],
-        type: "linear",
-      },
-    },
-    background_color: {
-      dark: { type: "hex", value: DEFAULT_TEXT_COLOR },
-      light: { type: "hex", value: DEFAULT_TEXT_COLOR },
-    },
-    name: "hello world!",
-  }}
-/>
-
-<!-- Radial Gradient Color text story -->
-<Story
-  name="RadialGradientColor"
-  args={{
-    font_weight: "regular",
-    text_style: "normal",
-    horizontal_alignment: "leading",
-    size: { width: { type: "fixed", value: 200 }, height: { type: "fit" } },
-    padding: { top: 20, trailing: 20, bottom: 20, leading: 20 },
-    color: {
-      dark: {
-        degrees: 90,
-        points: [
-          {
-            color: "#9f009f",
-            percent: 100,
-          },
-          {
-            color: "#090979ff",
-            percent: 35,
-          },
-          {
-            color: "#53d6ec",
-            percent: 0,
-          },
-        ],
-        type: "radial",
-      },
-      light: {
-        points: [
-          {
-            color: "#53d6ec",
-            percent: 0,
-          },
-          {
-            color: "#090979ff",
-            percent: 30,
-          },
-
-          {
-            color: "#9f009f",
-            percent: 50,
-          },
-        ],
-        type: "radial",
-      },
-    },
-    background_color: {
-      dark: { type: "hex", value: DEFAULT_TEXT_COLOR },
-      light: { type: "hex", value: DEFAULT_TEXT_COLOR },
-    },
-    name: "hello world!",
-  }}
-/>
-
 <!-- 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 },
@@ -238,19 +129,20 @@
   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 },
     name: "hello world!",
-    variableDictionary: mockVariableDictionary as VariableDictionary,
-    labels: {
-      en_US: {
-        lb123:
+    text_lid,
+  }}
+  decorators={[variablesDecorator(mockVariableDictionary)]}
+  parameters={{
+    localizations: {
+      [defaultLocale]: {
+        [text_lid]:
           "This is a text that contains variables: {{ product_name }} for {{ price }} per {{ price_per_period }}",
       },
-    },
-    text_lid: "lb123",
+    } satisfies Localizations,
   }}
 />
 <!-- Text with missing variable in dictionary story -->
@@ -258,18 +150,19 @@
   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 },
     name: "hello world!",
-    variableDictionary: mockVariableDictionary as VariableDictionary,
-    labels: {
-      en_US: {
-        lb123:
+    text_lid,
+  }}
+  decorators={[variablesDecorator(mockVariableDictionary)]}
+  parameters={{
+    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 }}",
       },
-    },
-    text_lid: "lb123",
+    } satisfies Localizations,
   }}
 />

package/dist/components/text/TextNode.svelte

@@ -6,25 +6,21 @@
   } from "./text-utils";
   import Text from "./Text.svelte";
   import type { TextNodeProps } from "../../data/entities";
-  import { getLabelAndReplaceVariables } from "../../utils/variable-utils";
+  import { getColorModeContext } from "../../stores/color-mode";
+  import { getLocalizationContext } from "../../stores/localization";
+  import { getVariablesContext } from "../../stores/variables";
+  import { replaceVariables } from "../../utils/variable-utils";
 
-  const {
-    id,
-    labels,
-    text_lid,
-    purchaseState,
-    variableDictionary,
-    background_color,
-    size,
-    ...restProps
-  }: TextNodeProps = $props();
+  const { id, text_lid, background_color, size, ...restProps }: TextNodeProps =
+    $props();
+
+  const getColorMode = getColorModeContext();
+  const colorMode = $derived(getColorMode());
 
   const { tagToRender, textStyles } = $derived(
-    getTextNodeStyles({
+    getTextNodeStyles(colorMode, {
       id,
-      labels,
       text_lid,
-      purchaseState,
       background_color,
       size,
       ...restProps,
@@ -35,16 +31,12 @@
     getTextWrapperStyles(restProps, size, background_color),
   );
 
-  const parsedLabel = $derived(
-    getLabelAndReplaceVariables({
-      text_lid,
-      locale: purchaseState.locale,
-      defaultLocale: purchaseState.defaultLocale,
-      labels,
-      variableDictionary,
-    }),
+  const variables = getVariablesContext();
+  const { getLocalizedString } = getLocalizationContext();
+  const label = $derived(
+    replaceVariables(getLocalizedString(text_lid), $variables),
   );
-  const markdownParsed = $derived(getHtmlFromMarkdown(parsedLabel));
+  const markdownParsed = $derived(getHtmlFromMarkdown(label));
 </script>
 
 <span style={wrapperStyles} class="rc-pw-text-wrapper">

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

@@ -1,18 +1,19 @@
 import type { TextNodeProps } from "../../data/entities";
-import type { ColorType, SizeType } from "../../types";
-export declare const defaultColor: ColorType;
-export declare const defaultBackgroundColor: ColorType;
+import type { ColorMode, SizeType } from "../../types";
+import type { ColorGradientScheme, ColorScheme } from "../../types/colors";
+export declare const defaultColor: ColorScheme;
+export declare const defaultBackgroundColor: ColorGradientScheme;
 /**
  * Generates comprehensive styles for text components by combining text, component and size styles
  * @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: TextNodeProps) => {
+export declare const getTextComponentStyles: (colorMode: ColorMode, props: TextNodeProps) => {
     textStyles: Record<string, string | number>;
     tagToRender: import("../../utils/style-utils").TextComponentTags;
 };
-export declare function getTextWrapperStyles(restProps: Partial<TextNodeProps>, size: SizeType, background_color?: ColorType): string;
-export declare function getTextNodeStyles(props: TextNodeProps): {
+export declare function getTextWrapperStyles(restProps: Partial<TextNodeProps>, size: SizeType, background_color?: ColorGradientScheme | null): string;
+export declare function getTextNodeStyles(colorMode: ColorMode, props: TextNodeProps): {
     tagToRender: import("../../utils/style-utils").TextComponentTags;
     textStyles: string;
 };

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

@@ -1,5 +1,5 @@
-import { getActiveStateProps, getComponentStyles, getSizeStyle, getTextComponentTag, getTextStyles, prefixObject, stringifyStyles, } from "../../utils/style-utils";
 import { DEFAULT_BACKGROUND_COLOR, DEFAULT_TEXT_COLOR, } from "../../utils/constants";
+import { getActiveStateProps, getComponentStyles, getSizeStyle, getTextComponentTag, getTextStyles, prefixObject, stringifyStyles, } from "../../utils/style-utils";
 export const defaultColor = {
     light: { type: "hex", value: DEFAULT_TEXT_COLOR },
 };
@@ -11,8 +11,8 @@ export const defaultBackgroundColor = {
  * @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 const getTextComponentStyles = (props) => {
-    const { font_size = "body_m", color = defaultColor, background_color = defaultBackgroundColor, padding, margin, size, purchaseState, } = props;
+export const getTextComponentStyles = (colorMode, props) => {
+    const { font_size = "body_m", color = defaultColor, background_color = defaultBackgroundColor, padding, margin, size, } = props;
     const styles = {
         "--width": "unset",
         "--height": "unset",
@@ -42,13 +42,13 @@ export const getTextComponentStyles = (props) => {
     };
     const activeStateProps = getActiveStateProps(props.overrides, props.componentState);
     const tagToRender = getTextComponentTag(font_size);
-    const textStyles = getTextStyles({ ...props, ...activeStateProps }, purchaseState.colorMode);
+    const textStyles = getTextStyles({ ...props, ...activeStateProps });
     const componentStyles = getComponentStyles({
         background_color,
         color,
         margin,
         padding,
-        colorMode: purchaseState.colorMode,
+        colorMode,
         ...activeStateProps,
     });
     const sizeStyles = getSizeStyle({ ...size, ...activeStateProps });
@@ -96,7 +96,7 @@ export function getTextWrapperStyles(restProps, size, background_color) {
     const prefixedStyles = prefixObject(styles, "text");
     return stringifyStyles(prefixedStyles);
 }
-export function getTextNodeStyles(props) {
+export function getTextNodeStyles(colorMode, props) {
     const styles = {
         "--text-margin-block-start": "0px",
         "--text-margin-inline-end": "0px",
@@ -124,7 +124,7 @@ export function getTextNodeStyles(props) {
         "--text-height": "unset",
         "--text-flex": "0 1 auto",
     };
-    const { tagToRender, textStyles } = getTextComponentStyles(props);
+    const { tagToRender, textStyles } = getTextComponentStyles(colorMode, props);
     Object.assign(styles, textStyles);
     return { tagToRender, textStyles: stringifyStyles(styles) };
 }

package/dist/components/timeline/Timeline.stories.svelte

@@ -1,48 +1,46 @@
 <script module lang="ts">
-  import { defineMeta } from "@storybook/addon-svelte-csf";
   import { Timeline } from "../..";
-  import type { PurchaseState } from "../../data/state";
   import { defaultColor } from "../text/text-utils";
-  import { type TimelineProps } from "../../data/entities";
-  import { DEFAULT_COLOR_MODE } from "../../utils/constants";
+  import { localizationDecorator } from "../../stories/localization-decorator";
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  const defaultLocale = "en_US";
 
   const { Story } = defineMeta({
     title: "Components/Timeline",
     component: Timeline,
     tags: ["autodocs"],
+    decorators: [
+      localizationDecorator({
+        defaultLocale,
+        localizations: {
+          [defaultLocale]: {
+            asd123: "Item 1",
+            asd123d: "description 1",
+            qwe123: "Item 2",
+            qwe123d: "description 2",
+            zxc123: "Item 3",
+            zxc123d: "description 3",
+            rty123: "Item 4",
+            rty123d: "description 4",
+            fgh123: "Item 5",
+            fgh123d: "description 5",
+            case1: "Case 1",
+            case1d: "No spacing between connector and item",
+            case2: "Case 2",
+            case2d: "Spacing between connector and item",
+            case3: "Case 3",
+            case3d: "Spacing at bottom of connector",
+            case4: "Case 4",
+            case4d: "Spacing at top of connector",
+            case5: "Case 5",
+            case5d: "No Connector",
+          },
+        },
+      }),
+    ],
     argTypes: {},
   });
-
-  const purchaseState: PurchaseState = {
-    locale: "en_US",
-    defaultLocale: "en_US",
-    colorMode: DEFAULT_COLOR_MODE,
-  };
-
-  const labels = {
-    en_US: {
-      asd123: "Item 1",
-      asd123d: "description 1",
-      qwe123: "Item 2",
-      qwe123d: "description 2",
-      zxc123: "Item 3",
-      zxc123d: "description 3",
-      rty123: "Item 4",
-      rty123d: "description 4",
-      fgh123: "Item 5",
-      fgh123d: "description 5",
-      case1: "Case 1",
-      case1d: "No spacing between connector and item",
-      case2: "Case 2",
-      case2d: "Spacing between connector and item",
-      case3: "Case 3",
-      case3d: "Spacing at bottom of connector",
-      case4: "Case 4",
-      case4d: "Spacing at top of connector",
-      case5: "Case 5",
-      case5d: "No Connector",
-    },
-  };
 </script>
 
 <!-- Timeline -->
@@ -50,8 +48,6 @@
   name="Round icon"
   args={{
     type: "timeline",
-    labels,
-    purchaseState,
     item_spacing: 32,
     text_spacing: 16,
     size: { width: { type: "fill" }, height: { type: "fit" } },
@@ -157,15 +153,13 @@
         },
       },
     ],
-  } satisfies TimelineProps}
+  }}
 />
 
 <Story
   name="Square icon"
   args={{
     type: "timeline",
-    labels,
-    purchaseState,
     item_spacing: 32,
     text_spacing: 16,
     size: { width: { type: "fill" }, height: { type: "fit" } },
@@ -295,14 +289,12 @@
         },
       },
     ],
-  } satisfies TimelineProps}
+  }}
 />
 <Story
   name="With connector"
   args={{
     type: "timeline",
-    labels,
-    purchaseState,
     item_spacing: 32,
     text_spacing: 16,
     size: { width: { type: "fill" }, height: { type: "fit" } },
@@ -427,7 +419,6 @@
                   color: "#d3d3d3",
                   percent: 0,
                 },
-
                 {
                   color: "#d3d3d300",
                   percent: 100,
@@ -439,15 +430,13 @@
         },
       },
     ],
-  } satisfies TimelineProps}
+  }}
 />
 
 <Story
   name="Connector possibilities"
   args={{
     type: "timeline",
-    labels,
-    purchaseState,
     item_spacing: 64,
     text_spacing: 8,
     size: { width: { type: "fill" }, height: { type: "fit" } },
@@ -637,5 +626,5 @@
         },
       },
     ],
-  } satisfies TimelineProps}
+  }}
 />

package/dist/components/timeline/Timeline.svelte

@@ -13,11 +13,9 @@
     {#each items as item, index}
       <TimelineItem
         {...item}
-        labels={restProps.labels}
         id={`${restProps.id}-${index}`}
         name={`${restProps.name}-${index}`}
         type="timeline"
-        purchaseState={restProps.purchaseState}
         text_spacing={restProps.text_spacing}
         item_spacing={restProps.item_spacing}
       />