@revenuecat/purchases-ui-js 0.0.8

package/dist/stories/meta-templates.d.ts

@@ -0,0 +1,13 @@
+import type { InputType } from "storybook/internal/types";
+export declare const getSpacingStoryMeta: (description: string) => InputType;
+export declare const getColorStoryMeta: (description: string) => InputType;
+export declare const stackDimensionStoryMeta: InputType;
+export declare const getTextControlStoryMeta: (description: string) => InputType;
+export declare const fontWeightStoryMeta: InputType;
+export declare const fontSizeStoryMeta: InputType;
+export declare const textStyleStoryMeta: InputType;
+export declare const horizontalAlignmentStoryMeta: InputType;
+export declare const colorModeStoryMeta: InputType;
+export declare const shadowStoryMeta: InputType;
+export declare const borderStoryMeta: InputType;
+export declare const sizeStoryMeta: InputType;

package/dist/stories/meta-templates.js

@@ -0,0 +1,156 @@
+export const getSpacingStoryMeta = (description) => ({
+    description,
+    control: { type: "object" },
+    defaultValue: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+    table: {
+        type: {
+            summary: "object",
+            detail: "{ top: number, trailing: number, bottom: number, leading: number }",
+        },
+    },
+});
+export const getColorStoryMeta = (description) => ({
+    description,
+    control: {
+        type: "object",
+        fields: {
+            light: { type: "color" },
+            dark: { type: "color" },
+        },
+    },
+    defaultValue: { dark: "#FFFFFF", light: "#FFFFFF" },
+    table: {
+        type: {
+            summary: "object",
+            detail: "{ dark: string, light: string }",
+        },
+    },
+});
+export const stackDimensionStoryMeta = {
+    control: { type: "object" },
+    description: "Stack dimension configuration",
+    table: {
+        type: {
+            summary: "object",
+            detail: `{
+        type: "vertical" | "horizontal" | "zlayer",
+        alignment: "start" | "center" | "end" | "top" | "bottom",
+        distribution: "start" | "center" | "end" | "space_between" | "space_around" | "space_evenly"
+      }`,
+        },
+    },
+};
+export const getTextControlStoryMeta = (description) => ({
+    control: { type: "text" },
+    description,
+});
+export const fontWeightStoryMeta = {
+    control: { type: "select" },
+    options: [
+        "black",
+        "extra-bold",
+        "bold",
+        "semi-bold",
+        "medium",
+        "regular",
+        "light",
+        "extra-light",
+        "thin",
+    ],
+    description: "Font weight to be used",
+};
+export const fontSizeStoryMeta = {
+    control: { type: "select" },
+    options: [
+        "body_s",
+        "body_m",
+        "body_l",
+        "body_xl",
+        "heading_xs",
+        "heading_s",
+        "heading_m",
+        "heading_l",
+        "heading_xl",
+        "heading_xxl",
+    ],
+    description: "Font size to be used",
+};
+export const textStyleStoryMeta = {
+    control: { type: "select" },
+    options: ["normal", "bold", "italic", "strikethrough", "link", "monospace"],
+    description: "Text style to be used",
+};
+export const horizontalAlignmentStoryMeta = {
+    control: { type: "select" },
+    options: ["center", "start", "end"],
+    description: "Text horizontal alignment",
+};
+export const colorModeStoryMeta = {
+    control: { type: "select" },
+    options: ["light", "dark"],
+    description: "Color mode",
+};
+export const shadowStoryMeta = {
+    control: {
+        type: "object",
+        fields: {
+            x: { type: "number" },
+            y: { type: "number" },
+            radius: { type: "number" },
+            color: { type: "color" },
+        },
+    },
+    defaultValue: {
+        x: 0,
+        y: 0,
+        radius: 0,
+        color: { dark: "#000000", light: "#000000" },
+    },
+    table: {
+        type: {
+            summary: "object",
+            detail: "{ x: number, y: number, radius: number, color: { dark: string, light: string } }",
+        },
+    },
+    description: "Shadow properties including x, y, radius, and color",
+};
+export const borderStoryMeta = {
+    control: {
+        type: "object",
+        fields: {
+            width: { type: "number" },
+            color: { type: "color" },
+        },
+    },
+    defaultValue: {
+        width: 0,
+        color: { dark: "#000000", light: "#000000" },
+    },
+    description: "Border properties including width, color, style, and radius",
+};
+export const sizeStoryMeta = {
+    control: {
+        type: "object",
+        fields: {
+            width: {
+                type: "object",
+                fields: {
+                    type: { type: "select", options: ["fit", "fill", "fixed"] },
+                    value: { type: "number" },
+                },
+            },
+            height: {
+                type: "object",
+                fields: {
+                    type: { type: "select", options: ["fit", "fill", "fixed"] },
+                    value: { type: "number" },
+                },
+            },
+        },
+    },
+    defaultValue: {
+        width: { type: "fill" },
+        height: { type: "fill" },
+    },
+    description: "Size properties including width and height",
+};

package/dist/types.d.ts

@@ -0,0 +1,125 @@
+export type ColorMode = "light" | "dark";
+type Color = {
+    type: "hex" | "alias";
+    value: string;
+};
+export type ColorType = {
+    dark?: Color;
+    light: Color;
+};
+export declare enum FontSizeTags {
+    body_s = "p",
+    body_m = "p",
+    body_l = "p",
+    body_xl = "p",
+    heading_xs = "h6",
+    heading_s = "h5",
+    heading_m = "h4",
+    heading_l = "h3",
+    heading_xl = "h2",
+    heading_xxl = "h1"
+}
+export declare enum FontWeights {
+    extra_light = 100,
+    thin = 200,
+    light = 300,
+    regular = 400,
+    medium = 500,
+    semi_bold = 600,
+    bold = 700,
+    extra_bold = 800,
+    black = 900
+}
+export declare enum FontSizes {
+    body_s = "13px",
+    body_m = "14px",
+    body_l = "15px",
+    body_xl = "16px",
+    heading_xs = "14px",
+    heading_s = "16px",
+    heading_m = "18px",
+    heading_l = "20px",
+    heading_xl = "26px",
+    heading_xxl = "32px"
+}
+export type TextAlignment = "center" | "start" | "end";
+export type SizeType = {
+    width: Size;
+    height: Size;
+};
+export type Size = FixedSize | RelativeSize;
+export type FitTypes = "fit" | "fill";
+type FixedSize = {
+    type: "fixed";
+    value: number;
+};
+type RelativeSize = {
+    type: FitTypes;
+};
+export type ShapeType = RectangleShape | PillShape;
+type RectangleShape = {
+    type: "rectangle";
+    corners: CornerRadiusType;
+};
+type PillShape = {
+    type: "pill";
+};
+export type BorderType = {
+    color: ColorType;
+    width: number;
+};
+export type Spacing = {
+    top: number;
+    bottom: number;
+    leading: number;
+    trailing: number;
+};
+export type CornerRadiusType = {
+    bottom_leading: number;
+    bottom_trailing: number;
+    top_leading: number;
+    top_trailing: number;
+};
+export type DimensionType = VerticalAlignment | HorizontalAlignment | ZAlignment;
+type VerticalAlignment = {
+    type: "vertical";
+    alignment: "top" | "center" | "bottom";
+    distribution?: Distribution;
+};
+type HorizontalAlignment = {
+    type: "horizontal";
+    alignment: "leading" | "center" | "trailing";
+    distribution?: Distribution;
+};
+type ZAlignment = {
+    type: "zlayer";
+    alignment: "top_leading" | "top" | "top_trailing" | "leading" | "center" | "trailing" | "bottom_leading" | "bottom" | "bottom_trailing";
+    distribution: never;
+};
+type Distribution = "space_between" | "space_around" | "space_evenly" | "start" | "center" | "end";
+export type ShadowType = {
+    x: number;
+    y: number;
+    radius: number;
+    color: ColorType;
+};
+export declare enum StackDirection {
+    vertical = "column",
+    horizontal = "row"
+}
+export declare enum StackAlignment {
+    top = "flex-start",
+    leading = "flex-start",
+    center = "center",
+    bottom = "flex-end",
+    trailing = "flex-end"
+}
+export declare enum StackDistribution {
+    space_between = "space-between",
+    space_around = "space-around",
+    space_evenly = "space-evenly",
+    start = "flex-start",
+    center = "center",
+    end = "flex-end"
+}
+export {};

package/dist/types.js

@@ -0,0 +1,61 @@
+// Text types
+export var FontSizeTags;
+(function (FontSizeTags) {
+    FontSizeTags["body_s"] = "p";
+    FontSizeTags["body_m"] = "p";
+    FontSizeTags["body_l"] = "p";
+    FontSizeTags["body_xl"] = "p";
+    FontSizeTags["heading_xs"] = "h6";
+    FontSizeTags["heading_s"] = "h5";
+    FontSizeTags["heading_m"] = "h4";
+    FontSizeTags["heading_l"] = "h3";
+    FontSizeTags["heading_xl"] = "h2";
+    FontSizeTags["heading_xxl"] = "h1";
+})(FontSizeTags || (FontSizeTags = {}));
+export var FontWeights;
+(function (FontWeights) {
+    FontWeights[FontWeights["extra_light"] = 100] = "extra_light";
+    FontWeights[FontWeights["thin"] = 200] = "thin";
+    FontWeights[FontWeights["light"] = 300] = "light";
+    FontWeights[FontWeights["regular"] = 400] = "regular";
+    FontWeights[FontWeights["medium"] = 500] = "medium";
+    FontWeights[FontWeights["semi_bold"] = 600] = "semi_bold";
+    FontWeights[FontWeights["bold"] = 700] = "bold";
+    FontWeights[FontWeights["extra_bold"] = 800] = "extra_bold";
+    FontWeights[FontWeights["black"] = 900] = "black";
+})(FontWeights || (FontWeights = {}));
+export var FontSizes;
+(function (FontSizes) {
+    FontSizes["body_s"] = "13px";
+    FontSizes["body_m"] = "14px";
+    FontSizes["body_l"] = "15px";
+    FontSizes["body_xl"] = "16px";
+    FontSizes["heading_xs"] = "14px";
+    FontSizes["heading_s"] = "16px";
+    FontSizes["heading_m"] = "18px";
+    FontSizes["heading_l"] = "20px";
+    FontSizes["heading_xl"] = "26px";
+    FontSizes["heading_xxl"] = "32px";
+})(FontSizes || (FontSizes = {}));
+export var StackDirection;
+(function (StackDirection) {
+    StackDirection["vertical"] = "column";
+    StackDirection["horizontal"] = "row";
+})(StackDirection || (StackDirection = {}));
+export var StackAlignment;
+(function (StackAlignment) {
+    StackAlignment["top"] = "flex-start";
+    StackAlignment["leading"] = "flex-start";
+    StackAlignment["center"] = "center";
+    StackAlignment["bottom"] = "flex-end";
+    StackAlignment["trailing"] = "flex-end";
+})(StackAlignment || (StackAlignment = {}));
+export var StackDistribution;
+(function (StackDistribution) {
+    StackDistribution["space_between"] = "space-between";
+    StackDistribution["space_around"] = "space-around";
+    StackDistribution["space_evenly"] = "space-evenly";
+    StackDistribution["start"] = "flex-start";
+    StackDistribution["center"] = "center";
+    StackDistribution["end"] = "flex-end";
+})(StackDistribution || (StackDistribution = {}));

package/dist/utils.d.ts

@@ -0,0 +1,93 @@
+import type { ImageMaskShapeType, TextProps } from "./data/entities.js";
+import { FontSizeTags, type BorderType, type ColorMode, type ColorType, type DimensionType, type ShadowType, type ShapeType, type SizeType, type Spacing } from "./types.js";
+export type TextComponentTags = "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+/**
+ * Maps font size to appropriate HTML heading tag
+ * @param fontSize - Key from FontSizeTags enum
+ * @returns Corresponding HTML heading tag
+ */
+export declare function getTextComponentTag(fontSize: keyof typeof FontSizeTags): TextComponentTags;
+/**
+ * Generates comprehensive component styles including spacing, colors, borders and shadows
+ * @param params - Component style configuration object
+ * @returns CSS style object with component styles
+ */
+export declare function getComponentStyles({ backgroundColor, border, margin, padding, textColor, colorMode, shape, shadow, }: {
+    padding?: Spacing;
+    margin?: Spacing;
+    backgroundColor?: ColorType;
+    textColor?: ColorType;
+    border?: BorderType;
+    colorMode?: ColorMode;
+    shape?: ShapeType;
+    shadow?: ShadowType;
+}): {
+    "--margin-block-start": string;
+    "--margin-inline-end": string;
+    "--margin-block-end": string;
+    "--margin-inline-start": string;
+    "--padding-block-start": string;
+    "--padding-inline-end": string;
+    "--padding-block-end": string;
+    "--padding-inline-start": string;
+    "--background-color": string;
+    "--text-color": string;
+    "--border": string;
+    "--border-radius": string;
+    "--shadow": string;
+};
+/**
+ * Generates size-related CSS styles for components
+ * @param size - Size configuration object
+ * @returns CSS style object with size properties
+ */
+export declare function getSizeStyle(size: SizeType): {
+    "--width": string;
+    "--height": string;
+    "--flex": string;
+};
+/**
+ * Generates gradient background styles
+ * @param colorMode - Color mode (light/dark)
+ * @param gradientColors - Array of colors for gradient
+ * @returns CSS style object with gradient background
+ */
+export declare function getGradientStyle(colorMode: ColorMode, gradientColors?: ColorType[]): {
+    "--background": string;
+};
+/**
+ * Generates mask styles for images
+ * @param maskShape - Shape configuration for image mask
+ * @returns CSS style object with mask properties
+ */
+export declare const getMaskStyle: (maskShape?: ImageMaskShapeType) => {
+    "--corner-radius": string;
+    "--clip-path": string;
+};
+/**
+ * Generates dimension-related styles for stack components
+ * @param dimension - Dimension configuration object
+ * @returns CSS style object with flex layout properties
+ */
+export declare function getDimensionStyle(dimension: DimensionType): {
+    "--direction": string;
+    "--alignment": string;
+    "--distribution": string;
+};
+/**
+ * Generates text-related styles
+ * @param props - Text component properties
+ * @returns CSS style object with text formatting properties
+ */
+export declare function getTextStyles(props: TextProps): {
+    "--text-align": string;
+    "--font-weight": number;
+    "--font-size": string;
+    "--font-family": string;
+};
+/**
+ * Converts a style object to a CSS string
+ * @param styles - Object containing CSS properties and values
+ * @returns CSS string
+ */
+export declare function stringifyStyles(styles: Record<string, string | number>): string;

package/dist/utils.js

@@ -0,0 +1,227 @@
+import { FontSizes, FontWeights, StackAlignment, StackDirection, StackDistribution, FontSizeTags, } from "./types.js";
+/**
+ * Generates CSS spacing styles for margin or padding
+ * @param spacing - The spacing object containing top, trailing, bottom, and leading values
+ * @param spacingKey - The type of spacing ('margin' or 'padding')
+ * @returns CSS style object with logical properties for spacing
+ */
+function getSpacingStyle(spacing, spacingKey) {
+    if (!spacing || !spacingKey)
+        return "";
+    return {
+        [`--${spacingKey}-block-start`]: `${spacing.top ?? 0}px`,
+        [`--${spacingKey}-inline-end`]: `${spacing.trailing ?? 0}px`,
+        [`--${spacingKey}-block-end`]: `${spacing.bottom ?? 0}px`,
+        [`--${spacingKey}-inline-start`]: `${spacing.leading ?? 0}px`,
+    };
+}
+/**
+ * Maps font size to appropriate HTML heading tag
+ * @param fontSize - Key from FontSizeTags enum
+ * @returns Corresponding HTML heading tag
+ */
+export function getTextComponentTag(fontSize) {
+    return FontSizeTags[fontSize];
+}
+/**
+ * Gets color value based on color mode with fallback
+ * @param params - Object containing color map, mode and fallback color
+ * @returns Color value as string
+ */
+function getColor({ colorMap, colorMode = "light", fallback = "FFFFFF", }) {
+    return colorMap?.[colorMode]?.value || fallback;
+}
+/**
+ * Generates CSS border style string
+ * @param border - Border configuration object
+ * @param colorMode - Color mode (light/dark)
+ * @returns CSS border style string
+ */
+function getBorderStyle(border, colorMode = "light") {
+    const color = getColor({ colorMap: border.color, colorMode });
+    return `${border.width}px solid ${color}`;
+}
+/**
+ * Generates CSS border radius style for corners
+ * @param corners - Corner radius configuration
+ * @returns CSS border radius string
+ */
+function getCornerRadiusStyle(corners) {
+    return `${corners.top_leading}px ${corners.top_trailing}px ${corners.bottom_trailing}px ${corners.bottom_leading}px`;
+}
+/**
+ * Generates comprehensive component styles including spacing, colors, borders and shadows
+ * @param params - Component style configuration object
+ * @returns CSS style object with component styles
+ */
+export function getComponentStyles({ backgroundColor, border, margin, padding, textColor, colorMode = "light", shape, shadow, }) {
+    const stylesObject = {
+        "--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-color": "transparent",
+        "--text-color": "#000000",
+        "--border": "none",
+        "--border-radius": "0px",
+        "--shadow": "none",
+    };
+    if (padding) {
+        Object.assign(stylesObject, getSpacingStyle(padding, "padding"));
+    }
+    if (margin) {
+        Object.assign(stylesObject, getSpacingStyle(margin, "margin"));
+    }
+    if (backgroundColor) {
+        stylesObject["--background-color"] = getColor({
+            colorMap: backgroundColor,
+            colorMode,
+            fallback: "transparent",
+        });
+    }
+    if (textColor) {
+        stylesObject["--text-color"] = getColor({
+            colorMap: textColor,
+            colorMode,
+            fallback: "#000000",
+        });
+    }
+    if (border) {
+        stylesObject["--border"] = getBorderStyle(border, colorMode);
+    }
+    if (shape?.type === "rectangle" && shape.corners) {
+        stylesObject["--border-radius"] = getCornerRadiusStyle(shape.corners);
+    }
+    if (shape?.type === "pill") {
+        stylesObject["--border-radius"] = "9999px;";
+    }
+    if (shadow) {
+        stylesObject["--shadow"] = `${shadow.x}px ${shadow.y}px ${shadow.radius}px 
+      ${getColor({ colorMap: shadow.color, colorMode, fallback: "#000000" })};`;
+    }
+    return stylesObject;
+}
+/**
+ * Generates size-related CSS styles for components
+ * @param size - Size configuration object
+ * @returns CSS style object with size properties
+ */
+export function getSizeStyle(size) {
+    function getSizeValue(size) {
+        if (size.type === "fixed") {
+            return `${size.value}px`;
+        }
+        if (size.type === "fit") {
+            return "fit-content";
+        }
+        if (size.type === "fill") {
+            const userAgent = navigator.userAgent;
+            const isFirefox = userAgent.match(/firefox|fxios/i);
+            return isFirefox ? "-moz-available" : "-webkit-fill-available";
+        }
+        return "unset";
+    }
+    const width = getSizeValue(size.width);
+    const height = getSizeValue(size.height);
+    const isGrow = size.width.type === "fill" || size.height.type === "fill";
+    return {
+        "--width": width,
+        "--height": height,
+        "--flex": isGrow ? "unset" : "0 1 auto",
+    };
+}
+/**
+ * Generates gradient background styles
+ * @param colorMode - Color mode (light/dark)
+ * @param gradientColors - Array of colors for gradient
+ * @returns CSS style object with gradient background
+ */
+export function getGradientStyle(colorMode, gradientColors) {
+    if (!gradientColors)
+        return { "--background": "unset" };
+    return {
+        "--background": `linear-gradient(${gradientColors.map((color) => color[colorMode]?.value).join(", ")})`,
+    };
+}
+/**
+ * Generates mask styles for images
+ * @param maskShape - Shape configuration for image mask
+ * @returns CSS style object with mask properties
+ */
+export const getMaskStyle = (maskShape) => {
+    let maskStyles = {
+        "--corner-radius": "0px",
+        "--clip-path": "none",
+    };
+    if (maskShape?.type === "circle") {
+        maskStyles["--corner-radius"] = "50%";
+    }
+    if (maskShape?.type === "rectangle" && maskShape.corners) {
+        maskStyles["--corner-radius"] = getCornerRadiusStyle(maskShape.corners);
+    }
+    // TODO: rework this implementation
+    if (maskShape?.type === "convex") {
+        maskStyles["--corner-radius"] = "0 0 50% 50%;";
+    }
+    if (maskShape?.type === "concave") {
+        maskStyles["--clip-path"] =
+            "polygon(0 0, 100% 0, 100% 100%, 50% 110%, 0 100%);";
+    }
+    return maskStyles;
+};
+/**
+ * Generates dimension-related styles for stack components
+ * @param dimension - Dimension configuration object
+ * @returns CSS style object with flex layout properties
+ */
+export function getDimensionStyle(dimension) {
+    const styles = {
+        "--direction": "row",
+        "--alignment": "unset",
+        "--distribution": "unset",
+    };
+    if (dimension.type === "zlayer") {
+        // TODO: Review with Monetization team
+    }
+    else {
+        styles["--direction"] = StackDirection[dimension.type];
+        styles["--alignment"] = StackAlignment[dimension.alignment];
+        if (dimension.distribution) {
+            styles["--distribution"] = StackDistribution[dimension.distribution];
+        }
+    }
+    return styles;
+}
+/**
+ * Generates text-related styles
+ * @param props - Text component properties
+ * @returns CSS style object with text formatting properties
+ */
+export function getTextStyles(props) {
+    const { font_size, horizontal_alignment, font_weight, font_name } = props;
+    const styles = {
+        "--text-align": "initial",
+        "--font-weight": 400,
+        "--font-size": "initial",
+        "--font-family": "sans-serif",
+    };
+    styles["--text-align"] = horizontal_alignment;
+    styles["--font-weight"] = FontWeights[font_weight];
+    styles["--font-size"] = FontSizes[font_size];
+    styles["--font-family"] = font_name || "sans-serif";
+    return styles;
+}
+/**
+ * Converts a style object to a CSS string
+ * @param styles - Object containing CSS properties and values
+ * @returns CSS string
+ */
+export function stringifyStyles(styles) {
+    return Object.entries(styles)
+        .map(([key, value]) => `${key}: ${value};`)
+        .join("; ");
+}