@revenuecat/purchases-ui-js 0.0.8

package/dist/components/stack/Stack.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import type { StackProps } from "../../data/entities";
+  import Node from "../paywall/Node.svelte";
+  import { getStackComponentStyles } from "./stack-utils";
+  import { stringifyStyles } from "../../utils";
+
+  const {
+    id,
+    components,
+    labels,
+    onAction,
+    purchaseState,
+    ...restProps
+  }: StackProps = $props();
+
+  const stackStyles = $derived(
+    stringifyStyles(
+      getStackComponentStyles({
+        id,
+        components,
+        labels,
+        onAction,
+        purchaseState,
+        ...restProps,
+      }),
+    ),
+  );
+</script>
+
+<div {id} style={stackStyles} class="stack">
+  {#each components as component}
+    <Node nodeData={component} {labels} {onAction} {purchaseState} />
+  {/each}
+</div>
+
+<style>
+  .stack {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: var(--direction, unset);
+    width: var(--width, unset);
+    height: var(--height, unset);
+    gap: var(--spacing, 0);
+    background-color: var(--background-color, unset);
+    border: var(--border, none);
+    border-radius: var(--border-radius, 0);
+    box-shadow: var(--shadow, none);
+    justify-content: var(--distribution, flex-start);
+    align-items: var(--alignment, flex-start);
+    padding-block-start: var(--padding-block-start, 0);
+    padding-inline-end: var(--padding-inline-end, 0);
+    padding-block-end: var(--padding-block-end, 0);
+    padding-inline-start: var(--padding-inline-start, 0);
+    margin-block-start: var(--margin-block-start, 0);
+    margin-inline-end: var(--margin-inline-end, 0);
+    margin-block-end: var(--margin-block-end, 0);
+    margin-inline-start: var(--margin-inline-start, 0);
+    flex: var(--flex, 0 1 auto);
+    align-self: center;
+  }
+</style>

package/dist/components/stack/Stack.svelte.d.ts

@@ -0,0 +1,3 @@
+import type { StackProps } from "../../data/entities";
+declare const Stack: import("svelte").Component<StackProps, {}, "">;
+export default Stack;

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

@@ -0,0 +1,29 @@
+import type { StackProps } from "../../data/entities";
+type StackStyleVariables = {
+    "--height": string;
+    "--width": string;
+    "--spacing": string;
+    "--direction": string;
+    "--alignment": string;
+    "--distribution": string;
+    "--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 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 declare const getStackComponentStyles: (props: StackProps) => StackStyleVariables;
+export {};

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

@@ -0,0 +1,26 @@
+import { getComponentStyles, getDimensionStyle, getSizeStyle, } from "../../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 = (props) => {
+    const { background_color, margin, padding, spacing, size, border, shape, colorMode, shadow, dimension, } = props;
+    const componentStyles = getComponentStyles({
+        backgroundColor: background_color,
+        margin,
+        padding,
+        border,
+        colorMode,
+        shape,
+        shadow,
+    });
+    const dimensionStyles = getDimensionStyle(dimension);
+    const sizeStyles = getSizeStyle(size);
+    return {
+        ...sizeStyles,
+        ...dimensionStyles,
+        ...componentStyles,
+        "--spacing": `${spacing || 0}px`,
+    };
+};

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

@@ -0,0 +1,101 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import Text from "./Text.svelte";
+  import {
+    colorModeStoryMeta,
+    fontSizeStoryMeta,
+    fontWeightStoryMeta,
+    getColorStoryMeta,
+    getSpacingStoryMeta,
+    getTextControlStoryMeta,
+    horizontalAlignmentStoryMeta,
+  } from "../../stories/meta-templates";
+
+  /*
+   * Documentatino for this component can be found in https://www.notion.so/revenuecat/Text-e257cb046e104351861f8364ede617be?pvs=4
+   */
+
+  const { Story } = defineMeta({
+    title: "Components/Text",
+    component: Text,
+    tags: ["autodocs"],
+    argTypes: {
+      name: getTextControlStoryMeta("Content of the text to render"),
+      font_name: getTextControlStoryMeta(
+        "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"),
+      horizontal_alignment: horizontalAlignmentStoryMeta,
+      padding: getSpacingStoryMeta("Padding values in pixels"),
+      margin: getSpacingStoryMeta("Margin values in pixels"),
+    },
+    args: {
+      labels: { en_US: { lb123: "Test text" } },
+      text_lid: "lb123",
+      size: {
+        width: { type: "fill" },
+        height: { type: "fill" },
+      },
+    },
+  });
+</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: "start",
+    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: "start",
+    color: {
+      dark: { type: "hex", value: "#3471eb" },
+      light: { type: "hex", value: "#3471eb" },
+    },
+    background_color: {
+      dark: { type: "hex", value: "#dde0c1" },
+      light: { type: "hex", value: "#dde0c1" },
+    },
+    name: "hello world!",
+  }}
+/>
+<!-- Text with spacing story -->
+<Story
+  name="With Spacing"
+  args={{
+    font_weight: "regular",
+    text_style: "normal",
+    horizontal_alignment: "start",
+    padding: { top: 16, trailing: 24, bottom: 16, leading: 24 },
+    margin: { top: 8, trailing: 0, bottom: 8, leading: 0 },
+    name: "hello world!",
+  }}
+/>

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

@@ -0,0 +1,19 @@
+import Text from "./Text.svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Text: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Text = InstanceType<typeof Text>;
+export default Text;

package/dist/components/text/Text.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { getTextComponentStyles } from "./text-utils";
+  import type { TextProps } from "../../data/entities";
+  import { stringifyStyles } from "../../utils";
+
+  const { id, labels, text_lid, ...restProps }: TextProps = $props();
+
+  const { tagToRender, textStyles } = $derived(
+    getTextComponentStyles({ id, labels, text_lid, ...restProps }),
+  );
+  const stylesString = $derived(stringifyStyles(textStyles));
+
+  // TODO: drill down the selected locale.
+  const label = $derived(labels["en_US"][text_lid]);
+</script>
+
+<svelte:element this={tagToRender} {id} style={stylesString} class="text-block">
+  {label}
+</svelte:element>
+
+<style>
+  .text-block {
+    padding-block-start: var(--padding-block-start, unset);
+    padding-inline-end: var(--padding-inline-end, unset);
+    padding-block-end: var(--padding-block-end, unset);
+    padding-inline-start: var(--padding-inline-start, unset);
+    margin-block-start: var(--margin-block-start, unset);
+    margin-inline-end: var(--margin-inline-end, unset);
+    margin-block-end: var(--margin-block-end, unset);
+    margin-inline-start: var(--margin-inline-start, unset);
+    color: var(--text-color, #ffffff);
+    background-color: var(--background-color, #ffffff);
+    font-size: var(--font-size, 1rem);
+    font-weight: var(--font-weight, normal);
+    text-align: var(--text-align, center);
+    height: var(--height, unset);
+    width: var(--width, unset);
+    font-family: var(--font-family, sans-serif);
+  }
+</style>

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

@@ -0,0 +1,3 @@
+import type { TextProps } from "../../data/entities";
+declare const Text: import("svelte").Component<TextProps, {}, "">;
+export default Text;

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

@@ -0,0 +1,20 @@
+import { type TextComponentTags } from "../../utils";
+import type { TextProps } from "../../data/entities";
+type TextStyleVariables = {
+    "--width": string;
+    "--height": string;
+    "--text-align": string;
+    "--font-weight": number | string;
+    "--font-size": string;
+    "--font-family": string;
+};
+/**
+ * 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: TextProps) => {
+    textStyles: TextStyleVariables;
+    tagToRender: TextComponentTags;
+};
+export {};

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

@@ -0,0 +1,34 @@
+import { getSizeStyle, getTextComponentTag, getTextStyles, } from "../../utils";
+import { getComponentStyles } from "../../utils";
+/**
+ * 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 tagToRender = getTextComponentTag(font_size);
+    const textStyles = getTextStyles(props);
+    const componentStyles = getComponentStyles({
+        backgroundColor: background_color,
+        textColor: color,
+        margin,
+        padding,
+        colorMode,
+    });
+    const sizeStyles = getSizeStyle(size);
+    return {
+        textStyles: {
+            ...textStyles,
+            ...componentStyles,
+            ...sizeStyles,
+        },
+        tagToRender,
+    };
+};

package/dist/data/entities.d.ts

@@ -0,0 +1,139 @@
+import type { BorderType, ColorMode, ColorType, CornerRadiusType, DimensionType, FitTypes, FontWeights, ShadowType, ShapeType, SizeType, Spacing, TextAlignment, FontSizeTags } from "../types";
+import type { PurchaseState } from "./state";
+export interface Extra {
+    [key: string]: any;
+}
+export type ComponentTypes = "stack" | "text" | "image" | "button" | "purchase_button" | "footer" | "package";
+export interface PaywallComponent extends Extra {
+    type: ComponentTypes;
+    id: string;
+    name: string;
+}
+export interface Text extends PaywallComponent {
+}
+export interface Stack extends PaywallComponent {
+    spacing: number;
+    components: PaywallComponent[];
+}
+export interface ComponentConfig {
+    base: {
+        stack: Stack;
+        sticky_footer?: {
+            stack: {
+                type: "stack";
+                components: PaywallComponent[];
+            };
+        } | null;
+    };
+}
+export interface ComponentLocalizations extends Extra {
+    en_US: {
+        [key: string]: string;
+    };
+}
+export interface PaywallData extends Extra {
+    components_config: ComponentConfig;
+    components_localizations: ComponentLocalizations;
+}
+export interface ActionsProps {
+    onAction?: (action: SupportedActions, data?: Extra) => void;
+}
+export interface PurchaseStateProps {
+    purchaseState?: PurchaseState;
+}
+interface SharedComponentProps extends PaywallComponent, ActionsProps, PurchaseStateProps {
+    labels: ComponentLocalizations;
+    id: string;
+    colorMode: ColorMode;
+    name: string;
+}
+interface Action {
+    type: "restore_purchases" | "navigate_to" | "navigate_back" | "purchase" | "select_package";
+}
+export interface RestorePurchasesAction extends Action {
+    type: "restore_purchases";
+}
+export interface NavigateBackAction extends Action {
+    type: "navigate_back";
+}
+export interface NavigateToAction extends Action {
+    type: "navigate_to";
+    destination: "customer_center" | "privacy_policy" | "terms" | "url";
+    url?: {
+        url_lid: string;
+        method: "in_app_browser" | "external_browser" | "deep_link";
+    };
+}
+export interface PurchaseAction extends Action {
+    type: "purchase";
+}
+export interface SelectPackageAction extends Action {
+    type: "select_package";
+}
+export type SupportedActions = RestorePurchasesAction | NavigateBackAction | NavigateToAction | PurchaseAction | SelectPackageAction;
+export interface ButtonNodeProps extends SharedComponentProps {
+    type: "button";
+    action: SupportedActions;
+    stack: StackProps;
+}
+export interface PurchaseButtonProps extends SharedComponentProps {
+    type: "purchase_button";
+    stack: StackProps;
+}
+export interface FooterProps extends SharedComponentProps {
+    type: "footer";
+    stack: StackProps;
+}
+export interface PackageProps extends SharedComponentProps {
+    type: "package";
+    stack: StackProps;
+    package_id: string;
+    is_selected_by_default: boolean;
+}
+export interface StackProps extends SharedComponentProps {
+    background_color?: ColorType;
+    border?: BorderType;
+    components: PaywallComponent[];
+    dimension: DimensionType;
+    margin: Spacing;
+    padding: Spacing;
+    shadow?: ShadowType;
+    shape?: ShapeType;
+    size: SizeType;
+    spacing?: number;
+    type: "stack";
+}
+export interface TextProps extends SharedComponentProps {
+    background_color?: ColorType;
+    color: ColorType;
+    components: PaywallComponent[];
+    font_name?: string;
+    font_size: keyof typeof FontSizeTags;
+    font_weight: keyof typeof FontWeights;
+    horizontal_alignment: TextAlignment;
+    margin: Spacing;
+    padding: Spacing;
+    text_lid: string;
+    type: "text";
+    size: SizeType;
+}
+type ImageSourceDictionaryType = Record<"original" | "heic" | "heic_low_res" | "webp" | "webp_low_res", string>;
+type ImageSourceType = {
+    light: ImageSourceDictionaryType;
+    dark?: ImageSourceDictionaryType;
+};
+export interface ImageMaskShapeType {
+    type: "circle" | "rectangle" | "concave" | "convex";
+    corners?: CornerRadiusType;
+}
+export interface ImageProps extends SharedComponentProps {
+    type: "image";
+    fit_mode: FitTypes;
+    size: SizeType;
+    source: ImageSourceType;
+    gradient_colors?: ColorType[];
+    mask_shape?: ImageMaskShapeType;
+    max_height?: number;
+    override_source_lid?: string;
+}
+export {};

package/dist/data/entities.js

@@ -0,0 +1 @@
+export {};

package/dist/data/state.d.ts

@@ -0,0 +1,3 @@
+export interface PurchaseState {
+    selectedPackageId?: string;
+}

package/dist/data/state.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+export { type PaywallData as PaywallData } from "./data/entities";
+export * from "./types";
+export { default as Paywall } from "./components/paywall/Paywall.svelte";
+export { default as Stack } from "./components/stack/Stack.svelte";
+export { default as Button } from "./components/button/Button.svelte";
+export { default as Text } from "./components/text/Text.svelte";
+export { default as Image } from "./components/image/Image.svelte";
+export { default as PurchaseButton } from "./components/purchase-button/PurchaseButton.svelte";
+export { default as Package } from "./components/package/Package.svelte";
+export { default as Footer } from "./components/footer/Footer.svelte";

package/dist/index.js

@@ -0,0 +1,11 @@
+// Reexport your entry components here
+export {} from "./data/entities";
+export * from "./types";
+export { default as Paywall } from "./components/paywall/Paywall.svelte";
+export { default as Stack } from "./components/stack/Stack.svelte";
+export { default as Button } from "./components/button/Button.svelte";
+export { default as Text } from "./components/text/Text.svelte";
+export { default as Image } from "./components/image/Image.svelte";
+export { default as PurchaseButton } from "./components/purchase-button/PurchaseButton.svelte";
+export { default as Package } from "./components/package/Package.svelte";
+export { default as Footer } from "./components/footer/Footer.svelte";

package/dist/stores/theme.d.ts

@@ -0,0 +1 @@
+export declare const prefersDarkMode: import("svelte/store").Readable<boolean>;

package/dist/stores/theme.js

@@ -0,0 +1,17 @@
+import { readable } from "svelte/store";
+// Create a readable store that updates when the system theme changes
+export const prefersDarkMode = readable(false, (set) => {
+    // Check if window is defined (client-side)
+    if (typeof window !== "undefined") {
+        // Set initial value
+        const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+        set(mediaQuery.matches);
+        // Update value when system preference changes
+        const handler = (e) => set(e.matches);
+        mediaQuery.addEventListener("change", handler);
+        // Cleanup when store is destroyed
+        return () => mediaQuery.removeEventListener("change", handler);
+    }
+    // Return empty cleanup function for SSR
+    return () => { };
+});

package/dist/stories/fixtures.d.ts

@@ -0,0 +1,12 @@
+import type { PaywallData } from "../data/entities";
+export declare const paywallData: PaywallData;
+export declare const alignmentPaywallData: PaywallData;
+export declare const fontsPaywallData: PaywallData;
+export declare const pastaPaywallData: PaywallData;
+export declare const labelsData: {
+    en_US: {
+        id1: string;
+        id2: string;
+        id3: string;
+    };
+};