@revenuecat/purchases-ui-js 0.0.16 → 0.0.18

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

@@ -2,7 +2,6 @@
   import { defineMeta } from "@storybook/addon-svelte-csf";
   import TextNode from "./TextNode.svelte";
   import {
-    colorModeStoryMeta,
     fontSizeStoryMeta,
     fontWeightStoryMeta,
     getColorStoryMeta,
@@ -10,6 +9,7 @@
     getTextControlStoryMeta,
     horizontalAlignmentStoryMeta,
   } from "../../stories/meta-templates";
+  import type { VariableDictionary } from "../../utils/variable-utils";
 
   /*
    * Documentation for this component can be found in https://www.notion.so/revenuecat/Text-e257cb046e104351861f8364ede617be?pvs=4
@@ -25,7 +25,6 @@
         "Font family to be used, uses GoogleFonts API",
       ),
       font_weight: fontWeightStoryMeta,
-      colorMode: colorModeStoryMeta,
       font_size: fontSizeStoryMeta,
       color: getColorStoryMeta("Text color object"),
       background_color: getColorStoryMeta("Background color object"),
@@ -53,6 +52,7 @@
       purchaseState: {
         locale: "en_US",
         defaultLocale: "en_US",
+        colorMode: "light",
       },
     },
   });
@@ -73,7 +73,7 @@
   args={{
     font_weight: "bold",
     text_style: "normal",
-    horizontal_alignment: "start",
+    horizontal_alignment: "leading",
     name: "hello world!",
   }}
 />
@@ -95,7 +95,7 @@
   args={{
     font_weight: "regular",
     text_style: "normal",
-    horizontal_alignment: "start",
+    horizontal_alignment: "leading",
     color: {
       dark: { type: "hex", value: "#3471eb" },
       light: { type: "hex", value: "#3471eb" },
@@ -114,8 +114,8 @@
   args={{
     font_weight: "regular",
     text_style: "normal",
-    horizontal_alignment: "start",
-    size: { width: { type: "fixed", value: 200 }, height: { type: "fixed" } },
+    horizontal_alignment: "leading",
+    size: { width: { type: "fixed", value: 200 }, height: { type: "fit" } },
     padding: { top: 20, trailing: 20, bottom: 20, leading: 20 },
     color: {
       dark: {
@@ -170,8 +170,8 @@
   args={{
     font_weight: "regular",
     text_style: "normal",
-    horizontal_alignment: "start",
-    size: { width: { type: "fixed", value: 200 }, height: { type: "fixed" } },
+    horizontal_alignment: "leading",
+    size: { width: { type: "fixed", value: 200 }, height: { type: "fit" } },
     padding: { top: 20, trailing: 20, bottom: 20, leading: 20 },
     color: {
       dark: {
@@ -225,7 +225,7 @@
   args={{
     font_weight: "regular",
     text_style: "normal",
-    horizontal_alignment: "start",
+    horizontal_alignment: "leading",
     padding: { top: 16, trailing: 24, bottom: 16, leading: 24 },
     margin: { top: 8, trailing: 0, bottom: 8, leading: 0 },
     name: "hello world!",
@@ -238,11 +238,11 @@
   args={{
     font_weight: "regular",
     text_style: "normal",
-    horizontal_alignment: "start",
+    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,
+    variableDictionary: mockVariableDictionary as VariableDictionary,
     labels: {
       en_US: {
         lb123:
@@ -258,11 +258,11 @@
   args={{
     font_weight: "regular",
     text_style: "normal",
-    horizontal_alignment: "start",
+    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,
+    variableDictionary: mockVariableDictionary as VariableDictionary,
     labels: {
       en_US: {
         lb123:

package/dist/components/text/TextNode.svelte

@@ -1,14 +1,12 @@
 <script lang="ts">
-  import { getTextComponentStyles } from "./text-utils";
+  import {
+    getHtmlFromMarkdown,
+    getTextNodeStyles,
+    getTextWrapperStyles,
+  } from "./text-utils";
   import Text from "./Text.svelte";
   import type { TextNodeProps } from "../../data/entities";
-  import {
-    getComponentStyles,
-    getLabelById,
-    getSizeStyle,
-    stringifyStyles,
-  } from "../../utils/style-utils";
-  import { replaceVariables } from "../../utils/variable-utils";
+  import { getLabelAndReplaceVariables } from "../../utils/variable-utils";
 
   const {
     id,
@@ -22,7 +20,7 @@
   }: TextNodeProps = $props();
 
   const { tagToRender, textStyles } = $derived(
-    getTextComponentStyles({
+    getTextNodeStyles({
       id,
       labels,
       text_lid,
@@ -32,45 +30,37 @@
       ...restProps,
     }),
   );
+
   const wrapperStyles = $derived(
-    stringifyStyles({
-      ...getComponentStyles({
-        backgroundColor: background_color,
-        ...restProps,
-      }),
-      ...getSizeStyle(size),
-    }),
+    getTextWrapperStyles(restProps, size, background_color),
   );
-  const styles = $derived(stringifyStyles(textStyles));
 
-  const label = $derived(
-    getLabelById(
+  const parsedLabel = $derived(
+    getLabelAndReplaceVariables({
       text_lid,
-      purchaseState.locale,
-      purchaseState.defaultLocale,
+      locale: purchaseState.locale,
+      defaultLocale: purchaseState.defaultLocale,
       labels,
-    ),
-  );
-  const parsedLabel = $derived(
-    replaceVariables({
-      value: label,
       variableDictionary,
     }),
   );
+  const markdownParsed = $derived(getHtmlFromMarkdown(parsedLabel));
 </script>
 
-<span style={wrapperStyles} class="text-wrapper">
-  <Text styleVariables={styles} component={tagToRender} {id}>
-    {parsedLabel}
+<span style={wrapperStyles} class="rc-pw-text-wrapper">
+  <Text styleVariables={textStyles} component={tagToRender} {id}>
+    {@html markdownParsed}
   </Text>
 </span>
 
 <style>
-  .text-wrapper {
+  .rc-pw-text-wrapper {
     display: block;
-
-    height: var(--height, unset);
-    width: var(--width, unset);
-    background: var(--background, none);
+    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,3 +1,4 @@
 import type { TextNodeProps } from "../../data/entities";
 declare const TextNode: import("svelte").Component<TextNodeProps, {}, "">;
+type TextNode = ReturnType<typeof TextNode>;
 export default TextNode;

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

@@ -1,22 +1,19 @@
-import { type TextComponentTags } from "../../utils/style-utils";
 import type { TextNodeProps } from "../../data/entities";
-type TextStyleVariables = {
-    "--width": string;
-    "--height": string;
-    "--text-align": string;
-    "--font-weight": number | string;
-    "--font-size": string;
-    "--font-family": string;
-    "--background-clip": string;
-    "--text-fill-color": string;
-};
+import type { ColorType, SizeType } from "../../types";
+export declare const defaultColor: ColorType;
+export declare const defaultBackgroundColor: ColorType;
 /**
  * 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) => {
-    textStyles: Partial<TextStyleVariables>;
-    tagToRender: Partial<TextComponentTags>;
+    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): {
+    tagToRender: import("../../utils/style-utils").TextComponentTags;
+    textStyles: string;
 };
-export {};
+export declare function getHtmlFromMarkdown(text?: string): string;

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

@@ -1,35 +1,150 @@
-import { getActiveStateProps, getComponentStyles, getSizeStyle, getTextComponentTag, getTextStyles, } from "../../utils/style-utils";
+import { getActiveStateProps, getComponentStyles, getSizeStyle, getTextComponentTag, getTextStyles, prefixObject, stringifyStyles, } from "../../utils/style-utils";
+export const defaultColor = {
+    light: { type: "hex", value: "#000000" },
+};
+export const defaultBackgroundColor = {
+    light: { type: "hex", value: "#FFFFFF" },
+};
 /**
  * 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 const getTextComponentStyles = (props) => {
-    const { font_size = "body_m", color = {
-        dark: { type: "hex", value: "#000000" },
-        light: { type: "hex", value: "#000000" },
-    }, background_color = {
-        dark: { type: "hex", value: "#FFFFFF" },
-        light: { type: "hex", value: "#FFFFFF" },
-    }, padding, margin, colorMode, size, } = props;
+    const { font_size = "body_m", color = defaultColor, background_color = defaultBackgroundColor, padding, margin, size, purchaseState, } = props;
+    const styles = {
+        "--width": "unset",
+        "--height": "unset",
+        "--text-align": "initial",
+        "--font-weight": "initial",
+        "--font-size": "initial",
+        "--font-family": "sans-serif",
+        "--background-clip": "unset",
+        "--text-fill-color": "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": "transparent",
+        "--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",
+        "--flex": "0 1 auto",
+    };
     const activeStateProps = getActiveStateProps(props.overrides, props.componentState);
     const tagToRender = getTextComponentTag(font_size);
-    const textStyles = getTextStyles({ ...props, ...activeStateProps }, colorMode);
+    const textStyles = getTextStyles({ ...props, ...activeStateProps }, purchaseState.colorMode);
     const componentStyles = getComponentStyles({
         backgroundColor: background_color,
         textColor: color,
         margin,
         padding,
-        colorMode,
+        colorMode: purchaseState.colorMode,
         ...activeStateProps,
     });
     const sizeStyles = getSizeStyle({ ...size, ...activeStateProps });
+    const stylesObject = {
+        ...styles,
+        ...componentStyles,
+        ...textStyles,
+        ...sizeStyles,
+    };
     return {
-        textStyles: {
-            ...componentStyles,
-            ...textStyles,
-            ...sizeStyles,
-        },
+        textStyles: prefixObject(stylesObject, "text"),
         tagToRender,
     };
 };
+export function getTextWrapperStyles(restProps, size, background_color) {
+    const styles = {
+        "--width": "unset",
+        "--height": "unset",
+        "--flex": "0 1 auto",
+        "--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": "transparent",
+        "--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",
+        "--inset": "0",
+        "--transform": "initial",
+    };
+    Object.assign(styles, getComponentStyles({
+        backgroundColor: background_color,
+        ...restProps,
+    }), getSizeStyle(size));
+    Object.assign(styles, restProps.zStackChildStyles);
+    const prefixedStyles = prefixObject(styles, "text");
+    return stringifyStyles(prefixedStyles);
+}
+export function getTextNodeStyles(props) {
+    const styles = {
+        "--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",
+        "--text-background": "transparent",
+        "--text-text-color": "inherit",
+        "--text-border": "none",
+        "--text-border-end-start-radius": "0px",
+        "--text-border-end-end-radius": "0px",
+        "--text-border-start-start-radius": "0px",
+        "--text-border-start-end-radius": "0px",
+        "--text-shadow": "none",
+        "--text-text-align": "initial",
+        "--text-font-weight": "initial",
+        "--text-font-size": "initial",
+        "--text-font-family": "sans-serif",
+        "--text-background-clip": "initial",
+        "--text-text-fill-color": "initial",
+        "--text-width": "unset",
+        "--text-height": "unset",
+        "--text-flex": "0 1 auto",
+    };
+    const { tagToRender, textStyles } = getTextComponentStyles(props);
+    Object.assign(styles, textStyles);
+    return { tagToRender, textStyles: stringifyStyles(styles) };
+}
+export function getHtmlFromMarkdown(text) {
+    if (!text)
+        return "";
+    const regexpDictionary = {
+        newLine: { regexp: /\\\n/g, output: "<br/>" },
+        bold: { regexp: /\*\*(.*?)\*\*/g, output: "<b>$1</b>" },
+        italic: { regexp: /\*(.*?)\*/g, output: "<i>$1</i>" },
+        strikethrough: { regexp: /~(.*?)~/g, output: "<s>$1</s>" },
+        code: {
+            regexp: /`(.*?)`/g,
+            output: "<span style='font-family: monospace'>$1</span>",
+        },
+        link: {
+            regexp: /\[(.*?)\]\((.*?)\)/g,
+            output: "<a href=$2 target='_blank' rel='noopener noreferrer'>$1</a>",
+        },
+    };
+    return Object.values(regexpDictionary).reduce((parsedText, { regexp, output }) => {
+        return parsedText.replaceAll(regexp, output);
+    }, text);
+}