@revenuecat/purchases-ui-js 2.0.0 → 2.0.1

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,39 @@
     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" },
+      },
+      purchaseState: {},
+    },
     argTypes: {
       name: getTextControlStoryMeta("Content of the text to render"),
       font_name: getTextControlStoryMeta(
@@ -38,23 +60,13 @@
         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 +74,7 @@
     product_name: "CatGPT",
     price: "$39.99",
     price_per_period: "$39.99/yr",
-  };
+  } as VariableDictionary;
 </script>
 
 <!-- Default story -->
@@ -109,117 +121,6 @@
   }}
 />
 
-<!-- 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"
@@ -243,14 +144,16 @@
     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 -->
@@ -263,13 +166,15 @@
     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,21 +6,26 @@
   } 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 getColorMode = getColorModeContext();
+  const colorMode = $derived(getColorMode());
+
   const { tagToRender, textStyles } = $derived(
-    getTextNodeStyles({
+    getTextNodeStyles(colorMode, {
       id,
       labels,
       text_lid,
@@ -35,16 +40,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): 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,50 @@
 <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 type { PurchaseState } from "../../data/state";
+  import { localizationDecorator } from "../../stories/localization-decorator";
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  const defaultLocale = "en_US";
+
+  const purchaseState: PurchaseState = {};
 
   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",
+          },
+        },
+      }),
+    ],
+    args: { purchaseState },
     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 +52,6 @@
   name="Round icon"
   args={{
     type: "timeline",
-    labels,
-    purchaseState,
     item_spacing: 32,
     text_spacing: 16,
     size: { width: { type: "fill" }, height: { type: "fit" } },
@@ -157,15 +157,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 +293,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" } },
@@ -439,15 +435,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 +631,5 @@
         },
       },
     ],
-  } satisfies TimelineProps}
+  }}
 />

package/dist/components/timeline/TimelineItem.svelte

@@ -4,21 +4,38 @@
     getTimelineItemTextStyles,
   } from "./timeline-utils";
   import type { TimelineItemProps } 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 props: TimelineItemProps = $props();
-  const styles = $derived(getTimelineItemStyles(props));
 
-  const {
-    tagToRender: titleTagToRender,
-    textStyles: titleStyles,
-    textLabel: titleLabel,
-  } = $derived(getTimelineItemTextStyles(props, "title"));
+  const getColorMode = getColorModeContext();
+  const colorMode = $derived(getColorMode());
 
-  const {
-    tagToRender: descriptionTagToRender,
-    textStyles: descriptionStyles,
-    textLabel: descriptionLabel,
-  } = $derived(getTimelineItemTextStyles(props, "description"));
+  const styles = $derived(getTimelineItemStyles(colorMode, props));
+
+  const { getLocalizedString } = getLocalizationContext();
+
+  const variables = getVariablesContext();
+  const titleLabel = $derived(
+    replaceVariables(getLocalizedString(props.title.text_lid), $variables),
+  );
+
+  const descriptionLabel = $derived(
+    replaceVariables(
+      getLocalizedString(props.description?.text_lid),
+      $variables,
+    ),
+  );
+
+  const { tagToRender: titleTagToRender, textStyles: titleStyles } = $derived(
+    getTimelineItemTextStyles(colorMode, props, "title"),
+  );
+
+  const { tagToRender: descriptionTagToRender, textStyles: descriptionStyles } =
+    $derived(getTimelineItemTextStyles(colorMode, props, "description"));
   // TODO: Object mapping icon name to icon component
 </script>
 

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

@@ -1,8 +1,8 @@
 import type { TimelineItemProps, TimelineProps } from "../../data/entities";
+import type { ColorMode } from "../../types";
 export declare function getTimelineStyles(props: TimelineProps): string;
-export declare function getTimelineItemStyles(props: TimelineItemProps): string;
-export declare function getTimelineItemTextStyles(props: TimelineItemProps, kind?: "title" | "description"): {
+export declare function getTimelineItemStyles(colorMode: ColorMode, props: TimelineItemProps): string;
+export declare function getTimelineItemTextStyles(colorMode: ColorMode, props: TimelineItemProps, kind?: "title" | "description"): {
     textStyles: string;
     tagToRender: import("../../utils/style-utils").TextComponentTags;
-    textLabel: string | undefined;
 };

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

@@ -1,6 +1,5 @@
 import { defaultColor, getTextComponentStyles, } from "../text/text-utils";
 import { getBorderStyle, getColor, getCornerRadiusStyle, getSizeStyle, prefixObject, stringifyStyles, } from "../../utils/style-utils";
-import { getLabelAndReplaceVariables } from "../../utils/variable-utils";
 export function getTimelineStyles(props) {
     const styles = {
         "--item-spacing": `${props.item_spacing}px`,
@@ -16,19 +15,19 @@ export function getTimelineStyles(props) {
     const prefixedStyles = prefixObject(styles, "timeline");
     return stringifyStyles(prefixedStyles);
 }
-export function getTimelineItemStyles(props) {
+export function getTimelineItemStyles(colorMode, props) {
     const styles = {
         "--icon-size": `${props.icon.width_and_height}px`,
         "--icon-padding": `${props.icon.padding}px`,
         "--icon-color": getColor({
             colorMap: props.icon.color,
-            colorMode: props.purchaseState?.colorMode,
+            colorMode,
         }),
         "--icon-background-color": getColor({
             colorMap: props.icon_background?.color,
-            colorMode: props.purchaseState.colorMode,
+            colorMode,
         }),
-        "--icon-border": getBorderStyle(props.icon_background?.border, props.purchaseState?.colorMode),
+        "--icon-border": getBorderStyle(props.icon_background?.border, colorMode),
         "--text-spacing": `${props.text_spacing}px`,
         "--border-start-start-radius": `0px`,
         "--border-start-end-radius": `0px`,
@@ -36,7 +35,7 @@ export function getTimelineItemStyles(props) {
         "--border-end-end-radius": `0px`,
         "--connector-color": getColor({
             colorMap: props.connector?.color,
-            colorMode: props.purchaseState.colorMode,
+            colorMode,
         }),
         "--connector-width": `${props.connector?.width || 0}px`,
         "--connector-top": "0px",
@@ -80,7 +79,7 @@ export function getTimelineItemStyles(props) {
     const prefixedStyles = prefixObject(styles, "timeline-item");
     return stringifyStyles(prefixedStyles);
 }
-export function getTimelineItemTextStyles(props, kind = "title") {
+export function getTimelineItemTextStyles(colorMode, props, kind = "title") {
     const styles = {
         "--text-color": "inherit",
         "--text-font-size": "initial",
@@ -101,7 +100,7 @@ export function getTimelineItemTextStyles(props, kind = "title") {
         font_weight: props[kind]?.font_weight || "regular",
         horizontal_alignment: props[kind]?.horizontal_alignment || "leading",
     };
-    const { tagToRender, textStyles } = getTextComponentStyles({
+    const { tagToRender, textStyles } = getTextComponentStyles(colorMode, {
         ...props,
         components: [],
         ...textProps,
@@ -113,16 +112,8 @@ export function getTimelineItemTextStyles(props, kind = "title") {
     });
     Object.assign(styles, textStyles);
     const stringifiedStyles = stringifyStyles(prefixObject(styles, "timeline-item"));
-    const textLabel = getLabelAndReplaceVariables({
-        text_lid: props[kind]?.text_lid,
-        locale: props.purchaseState.locale,
-        defaultLocale: props.purchaseState.defaultLocale,
-        labels: props.labels,
-        variableDictionary: props.variableDictionary,
-    });
     return {
         textStyles: stringifiedStyles,
         tagToRender,
-        textLabel,
     };
 }