@revenuecat/purchases-ui-js 2.0.2 → 2.0.3

package/dist/stories/paywall-decorator.js

@@ -8,11 +8,17 @@ export function paywallDecorator() {
                 window.alert(`Selected package ${packageId}`);
             }
         });
+        const emptyUiConfig = {
+            app: {
+                fonts: {},
+            },
+        };
         setPaywallContext({
             selectedPackageId,
             variablesPerPackage: readable(undefined),
             onPurchase: () => window.alert("Purchase clicked"),
             onButtonAction: (action) => window.alert(`Button clicked: ${JSON.stringify(action, undefined, 2)}`),
+            uiConfig: emptyUiConfig,
         });
         return Story();
     };

package/dist/stories/variables-decorator.d.ts

@@ -1,3 +1,3 @@
-import type { VariableDictionary } from "../utils/variable-utils";
+import type { VariableDictionary } from "../types/variables";
 import type { DecoratorFunction, Renderer } from "storybook/internal/csf";
 export declare function variablesDecorator<TRenderer extends Renderer, TArgs>(variables?: VariableDictionary): DecoratorFunction<TRenderer, TArgs>;

package/dist/stories/viewport-decorator.d.ts

@@ -0,0 +1,2 @@
+import type { DecoratorFunction, Renderer } from "storybook/internal/csf";
+export declare function viewportDecorator<TRenderer extends Renderer, TArgs>(width: number, height: number, elements: number): DecoratorFunction<TRenderer, TArgs>;

package/dist/stories/viewport-decorator.js

@@ -0,0 +1,8 @@
+import ViewportWrapper from "./viewport-wrapper.svelte";
+export function viewportDecorator(width, height, elements) {
+    return (Story) => ({
+        Component: ViewportWrapper,
+        props: { width, height, elements },
+        Slot: Story(),
+    });
+}

package/dist/stories/viewport-wrapper.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  interface Props {
+    width: number;
+    height: number;
+    elements: number;
+    children: Snippet;
+  }
+
+  const { width, height, elements, children }: Props = $props();
+
+  const style = $derived(`width: ${width}px; height: ${height}px`);
+</script>
+
+<div class="container" {style}>
+  <div class="content">
+    {#each Array(elements) as _, index}
+      <div>Item {index + 1}</div>
+    {/each}
+  </div>
+  {@render children()}
+</div>
+
+<style>
+  .container {
+    position: relative;
+    overflow: hidden;
+    outline: 1px solid #dddddd;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+  }
+
+  .content {
+    flex: 1;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+
+    & > div {
+      min-height: 50px;
+      border-bottom: 1px solid #dddddd;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+</style>

package/dist/stories/viewport-wrapper.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from "svelte";
+interface Props {
+    width: number;
+    height: number;
+    elements: number;
+    children: Snippet;
+}
+declare const ViewportWrapper: import("svelte").Component<Props, {}, "">;
+type ViewportWrapper = ReturnType<typeof ViewportWrapper>;
+export default ViewportWrapper;

package/dist/stories/with-layout.d.ts

@@ -1,10 +1,2 @@
-export declare function withLayout(Story: unknown, context: unknown): {
-    Component: import("svelte").Component<import("./with-layout.svelte").Props, {}, "">;
-    props: {
-        globals: any;
-        children: () => {
-            Component: unknown;
-            props: any;
-        };
-    };
-};
+import type { DecoratorFunction, Renderer } from "storybook/internal/types";
+export declare function withLayout<TRenderer extends Renderer, TArgs>(): DecoratorFunction<TRenderer, TArgs>;

package/dist/stories/with-layout.js

@@ -1,15 +1,13 @@
 import WithLayout from "./with-layout.svelte";
-export function withLayout(Story, context) {
-    return {
+export function withLayout() {
+    return (Story, context) => ({
         Component: WithLayout,
         props: {
-            // @ts-expect-error too hard to get the type right
             globals: context.globals,
             children: () => ({
                 Component: Story,
-                // @ts-expect-error too hard to get the type right
                 props: context.args,
             }),
         },
-    };
+    });
 }

package/dist/types/alignment.d.ts

@@ -1,19 +1,21 @@
 export type Distribution = "start" | "center" | "end" | "space_between" | "space_around" | "space_evenly";
 export type VerticalAlignment = "top" | "center" | "bottom";
-export type HorizontalDimension = {
+type HorizontalDimension = {
     type: "horizontal";
     alignment: VerticalAlignment;
     distribution: Distribution;
 };
 export type HorizontalAlignment = "leading" | "center" | "trailing";
-export type VerticalDimension = {
+type VerticalDimension = {
     type: "vertical";
     alignment: HorizontalAlignment;
     distribution: Distribution;
 };
 export type ZAlignment = "top_leading" | "top" | "top_trailing" | "leading" | "center" | "trailing" | "bottom_leading" | "bottom" | "bottom_trailing";
-export type ZDimension = {
+type ZDimension = {
     type: "zlayer";
     alignment: ZAlignment;
+    distribution?: unknown;
 };
 export type Dimension = HorizontalDimension | VerticalDimension | ZDimension;
+export {};

package/dist/types/background.d.ts

@@ -1,18 +1,19 @@
 import type { ColorGradientScheme } from "./colors";
-import type { ImageInfo, ImageObjectFit, VideoInfo } from "./media";
-export type BackgroundColor = {
+import type { ImageInfo, FitMode, VideoInfo } from "./media";
+type BackgroundColor = {
     type: "color";
     value: ColorGradientScheme;
 };
-export type BackgroundImage = {
+type BackgroundImage = {
     type: "image";
     value: ImageInfo;
     color_overlay: ColorGradientScheme | null;
-    fit_mode: ImageObjectFit;
+    fit_mode: FitMode;
 };
-export type BackgroundVideo = {
+type BackgroundVideo = {
     type: "video";
     value: VideoInfo;
     color_overlay: ColorGradientScheme | null;
 };
 export type Background = BackgroundColor | BackgroundImage | BackgroundVideo;
+export {};

package/dist/types/base.d.ts

@@ -0,0 +1,7 @@
+import type { Component } from "./component";
+export interface BaseComponent {
+    type: string;
+    id: string;
+    name: string;
+    fallback?: Component;
+}

package/dist/types/base.js

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

package/dist/types/colors.d.ts

@@ -1,4 +1,4 @@
-export type GradientPoint = {
+type GradientPoint = {
     percent: number;
     color: string;
 };
@@ -6,11 +6,11 @@ type GradientColorInfo = {
     type: "linear" | "radial";
     points: GradientPoint[];
 };
-export type LinearGradientColorInfo = GradientColorInfo & {
+type LinearGradientColorInfo = GradientColorInfo & {
     type: "linear";
     degrees: number;
 };
-export type RadialGradientColorInfo = GradientColorInfo & {
+type RadialGradientColorInfo = GradientColorInfo & {
     type: "radial";
 };
 type AliasColorInfo = {
@@ -21,7 +21,7 @@ type HexColorInfo = {
     type: "hex";
     value: string;
 };
-export type ColorInfo = AliasColorInfo | HexColorInfo;
+type ColorInfo = AliasColorInfo | HexColorInfo;
 export type ColorGradientInfo = ColorInfo | LinearGradientColorInfo | RadialGradientColorInfo;
 export type ColorScheme = {
     light: ColorInfo;

package/dist/types/component.d.ts

@@ -1,6 +1,10 @@
-import type { ImageProps, StackProps, TextNodeProps, TimelineProps } from "../data/entities";
+import type { TimelineProps } from "./components/timeline";
+import type { TextNodeProps } from "./components/text";
 import type { ButtonProps } from "./components/button";
 import type { FooterProps } from "./components/footer";
+import type { IconProps } from "./components/icon";
+import type { ImageProps } from "./components/image";
 import type { PackageProps } from "./components/package";
 import type { PurchaseButtonProps } from "./components/purchase-button";
-export type Component = ButtonProps | FooterProps | ImageProps | PackageProps | PurchaseButtonProps | StackProps | TextNodeProps | TimelineProps;
+import type { StackProps } from "./components/stack";
+export type Component = ButtonProps | FooterProps | IconProps | ImageProps | PackageProps | PurchaseButtonProps | StackProps | TextNodeProps | TimelineProps;

package/dist/types/components/button.d.ts

@@ -1,4 +1,5 @@
-import type { BaseComponent, StackProps } from "../../data/entities";
+import type { BaseComponent } from "../base";
+import type { StackProps } from "./stack";
 interface RestorePurchasesAction {
     type: "restore_purchases";
 }
@@ -22,6 +23,7 @@ interface NavigateToWebPurchase {
 interface NavigateToUrlAction {
     type: "navigate_to";
     destination: "privacy_policy" | "terms" | "url";
+    sheet?: null;
     url: {
         url_lid: string;
         method: "deep_link" | "external_browser" | "in_app_browser";
@@ -32,5 +34,6 @@ export interface ButtonProps extends BaseComponent {
     type: "button";
     action: Action;
     stack: StackProps;
+    transition?: null;
 }
 export {};

package/dist/types/components/footer.d.ts

@@ -1,4 +1,5 @@
-import type { BaseComponent, StackProps } from "../../data/entities";
+import type { BaseComponent } from "../base";
+import type { StackProps } from "./stack";
 export interface FooterProps extends BaseComponent {
     type: "footer";
     stack: StackProps;

package/dist/types/components/icon.d.ts

@@ -0,0 +1,28 @@
+import type { BorderType, CircleShape, RectangleShape, ShadowType, SizeType, Spacing } from "..";
+import type { BaseComponent } from "../base";
+import type { ColorScheme } from "../colors";
+import type { Overrides } from "../overrides";
+export interface IconBackground {
+    color: ColorScheme | null;
+    shape: RectangleShape | CircleShape;
+    border?: BorderType | null;
+    shadow?: ShadowType | null;
+}
+export interface IconProps extends BaseComponent {
+    type: "icon";
+    visible?: boolean | null;
+    icon_name: string;
+    base_url: string;
+    formats: {
+        svg?: string;
+        png?: string;
+        webp?: string;
+        heic?: string;
+    };
+    size: SizeType;
+    padding?: Spacing | null;
+    margin?: Spacing | null;
+    color: ColorScheme;
+    icon_background?: IconBackground | null;
+    overrides?: Overrides<IconProps>;
+}

package/dist/types/components/icon.js

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

package/dist/types/components/image.d.ts

@@ -0,0 +1,20 @@
+import type { BorderType, CircleShape, ConcaveShape, ConvexShape, RectangleShape, ShadowType, SizeType, Spacing } from "..";
+import type { BaseComponent } from "../base";
+import type { ColorGradientScheme } from "../colors";
+import type { FitMode, ImageInfo } from "../media";
+import type { Overrides } from "../overrides";
+export interface ImageProps extends BaseComponent {
+    type: "image";
+    visible?: boolean | null;
+    source: ImageInfo;
+    override_source_lid?: string;
+    size: SizeType;
+    mask_shape?: RectangleShape | CircleShape | ConcaveShape | ConvexShape | null;
+    fit_mode: FitMode;
+    padding?: Spacing | null;
+    margin?: Spacing | null;
+    color_overlay?: ColorGradientScheme | null;
+    border?: BorderType | null;
+    shadow?: ShadowType | null;
+    overrides?: Overrides<ImageProps>;
+}

package/dist/types/components/image.js

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

package/dist/types/components/package.d.ts

@@ -1,4 +1,5 @@
-import type { BaseComponent, StackProps } from "../../data/entities";
+import type { BaseComponent } from "../base";
+import type { StackProps } from "./stack";
 export interface PackageProps extends BaseComponent {
     type: "package";
     package_id: string;

package/dist/types/components/purchase-button.d.ts

@@ -1,4 +1,5 @@
-import type { BaseComponent, StackProps } from "../../data/entities";
+import type { BaseComponent } from "../base";
+import type { StackProps } from "./stack";
 export interface PurchaseButtonProps extends BaseComponent {
     type: "purchase_button";
     stack: StackProps;

package/dist/types/components/stack.d.ts

@@ -0,0 +1,32 @@
+import type { BorderType, ShadowType, ShapeType, SizeType, Spacing } from "..";
+import type { Dimension } from "../alignment";
+import type { Background } from "../background";
+import type { ColorGradientScheme } from "../colors";
+import type { Component } from "../component";
+import type { BaseComponent } from "../base";
+import type { Overrides } from "../overrides";
+type BadgeStyle = "overlay" | "nested" | "edge_to_edge";
+type BadgeAlignment = "top_leading" | "top" | "top_trailing" | "bottom_leading" | "bottom" | "bottom_trailing";
+export type Badge = {
+    style: BadgeStyle;
+    alignment: BadgeAlignment;
+    stack: StackProps;
+};
+export interface StackProps extends BaseComponent {
+    type: "stack";
+    visible?: boolean | null;
+    components: Component[];
+    size: SizeType;
+    dimension: Dimension;
+    spacing: number;
+    margin: Spacing;
+    padding: Spacing;
+    background_color: ColorGradientScheme | null;
+    background: Background | null;
+    border: BorderType | null;
+    shape: ShapeType | null;
+    shadow: ShadowType | null;
+    badge?: Badge | null;
+    overrides?: Overrides<StackProps>;
+}
+export {};

package/dist/types/components/stack.js

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

package/dist/types/components/text.d.ts

@@ -0,0 +1,20 @@
+import type { FontSizes, FontWeights, SizeType, Spacing, TextAlignments } from "..";
+import type { BaseComponent } from "../base";
+import type { ColorGradientScheme, ColorScheme } from "../colors";
+import type { Overrides } from "../overrides";
+export interface TextNodeProps extends BaseComponent {
+    text_lid: string;
+    font_name?: string | null;
+    font_size: number | keyof typeof FontSizes;
+    font_weight: keyof typeof FontWeights;
+    font_weight_int?: number;
+    horizontal_alignment: keyof typeof TextAlignments;
+    color: ColorScheme;
+    background_color?: ColorGradientScheme | null;
+    type: "text";
+    visible?: boolean | null;
+    padding: Spacing;
+    margin: Spacing;
+    size: SizeType;
+    overrides?: Overrides<TextNodeProps>;
+}

package/dist/types/components/text.js

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

package/dist/types/components/timeline.d.ts

@@ -0,0 +1,35 @@
+import type { SizeType, Spacing } from "..";
+import type { BaseComponent } from "../base";
+import type { ColorGradientScheme } from "../colors";
+import type { Overrides } from "../overrides";
+import type { IconProps } from "./icon";
+import type { TextNodeProps } from "./text";
+export interface TimelineProps extends BaseComponent {
+    type: "timeline";
+    visible?: boolean | null;
+    icon_alignment: "title" | "title_and_description";
+    item_spacing: number;
+    text_spacing: number;
+    column_gutter: number;
+    size: SizeType;
+    padding: Spacing;
+    margin: Spacing;
+    items: TimelineItemProps[];
+    overrides?: Overrides<TimelineProps>;
+}
+export interface TimelineConnectorProps {
+    width: number;
+    margin: {
+        top: number;
+        bottom: number;
+    };
+    color: ColorGradientScheme | null;
+}
+export interface TimelineItemProps extends BaseComponent {
+    type: "timeline_item";
+    icon: IconProps;
+    title: TextNodeProps;
+    description?: TextNodeProps | null;
+    connector?: TimelineConnectorProps;
+    overrides?: Overrides<TimelineItemProps>;
+}

package/dist/types/components/timeline.js

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

package/dist/types/localization.d.ts

@@ -1,4 +1,5 @@
 import type { ImageInfo } from "./media";
 export type LocalizationValue = string | ImageInfo;
-export type Localization = Partial<Record<string, string>>;
+type Localization = Partial<Record<string, string>>;
 export type Localizations = Partial<Record<string, Localization>>;
+export {};

package/dist/types/media.d.ts

@@ -1,4 +1,4 @@
-export type ImageFiles = {
+type ImageFiles = {
     width: number;
     height: number;
     original: string;
@@ -9,10 +9,11 @@ export type ImageFiles = {
 };
 export type ImageInfo = {
     light: ImageFiles;
-    dark: ImageFiles | null;
+    dark?: ImageFiles | null;
 };
 export type VideoInfo = {
     light: string;
     dark: string | null;
 };
-export type ImageObjectFit = "fit" | "fill";
+export type FitMode = "fit" | "fill";
+export {};

package/dist/types/overrides.d.ts

@@ -0,0 +1,48 @@
+type ScreenSize = "desktop" | "tablet" | "mobile";
+type Orientation = "portrait" | "landscape";
+type EqualityOperator = "is" | "is not";
+type ArrayOperator = "in" | "not in";
+type IntroOfferCondition = {
+    type: "intro_offer";
+};
+type MultipleIntroOffersCondition = {
+    type: "multiple_intro_offers";
+};
+type SelectedCondition = {
+    type: "selected";
+};
+type ScreenSizeCondition = {
+    type: "screen_size";
+    operator: ArrayOperator;
+    sizes: ScreenSize[];
+};
+type OrientationCondition = {
+    type: "orientation";
+    operator: ArrayOperator;
+    orientations: Orientation[];
+};
+type IntroductoryOfferCondition = {
+    type: "introductory_offer";
+    operator: EqualityOperator;
+    value: boolean;
+};
+type SelectedPackageCondition = {
+    type: "selected_package";
+    operator: ArrayOperator;
+    packages: string[];
+};
+type PromoOfferCondition = {
+    type: "promo_offer";
+};
+type OverrideCondition = IntroOfferCondition | MultipleIntroOffersCondition | SelectedCondition | ScreenSizeCondition | OrientationCondition | IntroductoryOfferCondition | SelectedPackageCondition | PromoOfferCondition;
+/**
+ * The reserved properties of an override that should not be included in the override properties
+ */
+type ReservedProperty = "id" | "type" | "overrides" | "stack" | "components" | "items" | "pages" | "tabs";
+type OverrideProperties<C> = Partial<Omit<C, ReservedProperty>>;
+type Override<C> = {
+    conditions: OverrideCondition[];
+    properties: OverrideProperties<C>;
+};
+export type Overrides<C> = Override<C>[];
+export {};

package/dist/types/overrides.js

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

package/dist/types/variables.d.ts

@@ -0,0 +1,13 @@
+export declare enum PackageIdentifier {
+    weekly = "$rc_weekly",
+    monthly = "$rc_monthly",
+    two_month = "$rc_two_month",
+    three_month = "$rc_three_month",
+    six_month = "$rc_six_month",
+    annual = "$rc_annual",
+    lifetime = "$rc_lifetime"
+}
+type VariableName = "product.price" | "product.price_per_period" | "product.price_per_period_abbreviated" | "product.price_per_day" | "product.price_per_week" | "product.price_per_month" | "product.price_per_year" | "product.period" | "product.period_abbreviated" | "product.periodly" | "product.period_in_days" | "product.period_in_weeks" | "product.period_in_months" | "product.period_in_years" | "product.period_with_unit" | "product.currency_code" | "product.currency_symbol" | "product.offer_price" | "product.offer_price_per_day" | "product.offer_price_per_week" | "product.offer_price_per_month" | "product.offer_price_per_year" | "product.offer_period" | "product.offer_period_abbreviated" | "product.offer_period_in_days" | "product.offer_period_in_weeks" | "product.offer_period_in_months" | "product.offer_period_in_years" | "product.offer_period_with_unit" | "product.offer_end_date" | "product.secondary_offer_price" | "product.secondary_offer_period" | "product.secondary_offer_period_abbreviated" | "product.relative_discount" | "product.store_product_name";
+export type VariableDictionary = Record<VariableName, string>;
+export type VariablesDictionary = Record<PackageIdentifier, VariableDictionary>;
+export {};

package/dist/types/variables.js

@@ -0,0 +1,10 @@
+export var PackageIdentifier;
+(function (PackageIdentifier) {
+    PackageIdentifier["weekly"] = "$rc_weekly";
+    PackageIdentifier["monthly"] = "$rc_monthly";
+    PackageIdentifier["two_month"] = "$rc_two_month";
+    PackageIdentifier["three_month"] = "$rc_three_month";
+    PackageIdentifier["six_month"] = "$rc_six_month";
+    PackageIdentifier["annual"] = "$rc_annual";
+    PackageIdentifier["lifetime"] = "$rc_lifetime";
+})(PackageIdentifier || (PackageIdentifier = {}));

package/dist/types.d.ts

@@ -40,29 +40,37 @@ export declare enum TextAlignments {
     center = "center",
     trailing = "end"
 }
-export type SizeType = {
-    width: Size;
-    height: Size;
-};
-export type Size = FixedSize | RelativeSize;
 type FixedSize = {
     type: "fixed";
     value: number;
 };
 type RelativeSize = {
-    type: "fit" | "fill";
+    type: "fit" | "fill" | "relative";
     value?: null;
 };
-export type ShapeType = RectangleShape | PillShape;
+export type Size = FixedSize | RelativeSize;
+export type SizeType = {
+    width: Size;
+    height: Size;
+};
+export type ShapeType = CircleShape | RectangleShape | PillShape;
 export type RectangleShape = {
     type: "rectangle";
-    corners: CornerRadiusType;
+    corners: CornerRadiusType | null;
 };
 export type CircleShape = {
     type: "circle";
+    corners?: null;
 };
-type PillShape = {
+export type PillShape = {
     type: "pill";
+    corners?: CornerRadiusType | null;
+};
+export type ConcaveShape = {
+    type: "concave";
+};
+export type ConvexShape = {
+    type: "convex";
 };
 export type BorderType = {
     color: ColorScheme;

package/dist/ui/atoms/typography.stories.svelte

@@ -3,35 +3,11 @@
   import { default as Typography } from "./typography.svelte";
   import { defineMeta } from "@storybook/addon-svelte-csf";
   import { type ComponentProps } from "svelte";
-  import { brandingViewportModes } from "../../../../.storybook/modes";
 
   const { Story } = defineMeta({
     component: Typography,
     title: "Atoms/Typography",
-    // @ts-expect-error ignore typing of decorator
-    decorators: [withLayout],
-    argTypes: {
-      size: {
-        control: "select",
-        options: [
-          "heading-2xl",
-          "heading-xl",
-          "heading-lg",
-          "heading-md",
-          "body-base",
-          "body-small",
-          "label-button",
-          "label-default",
-          "caption-default",
-          "caption-link",
-        ],
-      },
-    },
-    parameters: {
-      chromatic: {
-        modes: brandingViewportModes,
-      },
-    },
+    decorators: [withLayout()],
     render: template,
   });
 
@@ -46,7 +22,6 @@
   </Typography>
 {/snippet}
 
-<!-- Stories for each typography variant -->
 <Story name="Heading 2XL">
   <Typography size="heading-2xl">
     Heading 2XL - {baseContent}
@@ -107,7 +82,6 @@
   </Typography>
 </Story>
 
-<!-- Story showing all variants -->
 <Story name="All Variants">
   <div class="story-container">
     <div class="variant-row">