@revenuecat/purchases-ui-js 2.0.1 → 2.0.3

package/dist/data/entities.d.ts

@@ -1,35 +1,12 @@
-import type { ZStackChildStyles } from "../components/stack/stack-utils";
-import type { PurchaseState } from "./state";
-import type { AlignmentType, BorderType, CircleShape, CornerRadiusType, FontSizeTags, FontWeights, RectangleShape, ShadowType, ShapeType, SizeType, Spacing, TextAlignments } from "../types";
-import type { Dimension } from "../types/alignment";
 import type { Background } from "../types/background";
-import type { ColorGradientScheme, ColorScheme } from "../types/colors";
+import type { FooterProps } from "../types/components/footer";
+import type { StackProps } from "../types/components/stack";
 import type { Localizations } from "../types/localization";
-import type { ImageInfo, ImageObjectFit } from "../types/media";
-export interface Extra {
-    [key: string]: unknown;
-}
-export type ComponentTypes = "stack" | "text" | "image" | "button" | "purchase_button" | "footer" | "package" | "timeline";
-export interface PaywallComponent extends Extra {
-    type: ComponentTypes;
-    id: string;
-    name: string;
-    fallback?: PaywallComponent;
-}
-export interface Stack extends PaywallComponent {
-    spacing: number;
-    components: PaywallComponent[];
-}
-export type RootPaywall = {
+interface RootPaywall {
     background?: Background;
-    stack: Stack;
-    sticky_footer?: null | {
-        stack: Stack;
-        id: string;
-        name: string;
-        type: "footer";
-    };
-};
+    stack: StackProps;
+    sticky_footer?: FooterProps | null;
+}
 export interface ComponentConfig {
     colors?: Record<string, string>;
     fonts?: {
@@ -43,150 +20,27 @@ export interface ComponentConfig {
     base: RootPaywall;
 }
 export interface PaywallData {
-    template_name: string;
-    offering_id: string;
-    created_at: string;
-    updated_at: string;
-    published_at?: string | null;
-    asset_base_url: string;
     default_locale: string;
-    revision: number;
     components_config: ComponentConfig;
     components_localizations: Localizations;
-    published_revision?: number | null;
-    published_components_config?: ComponentConfig | null;
-    published_components_localizations?: Localizations | null;
 }
-export interface PurchaseStateProps {
-    purchaseState: PurchaseState;
-}
-export type ComponentState = {
-    [state: string]: boolean;
+type AppFontFamilyConfig = {
+    type: "name" | "url";
+    value?: string;
+    family: string;
+    hash: string;
+    style: string;
+    url: string;
+    weight: number;
 };
-export interface SharedComponentProps extends PaywallComponent, PurchaseStateProps {
-    id: string;
-    name: string;
-    componentState?: ComponentState;
-    zStackChildStyles?: ZStackChildStyles;
-}
-export type OverrideProps<T> = {
-    states?: {
-        [state: string]: T;
+type AppFontsConfig = Record<string, {
+    ios?: AppFontFamilyConfig;
+    android?: AppFontFamilyConfig;
+    web?: AppFontFamilyConfig;
+}>;
+export type UIConfig = {
+    app: {
+        fonts: AppFontsConfig;
     };
 };
-export interface StackProps extends SharedComponentProps {
-    type: "stack";
-    visible?: boolean | null;
-    components: PaywallComponent[];
-    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?: null | {
-        stack: {
-            components: PaywallComponent[];
-            type: "stack";
-        };
-        style: "overlay" | "edge_to_edge" | "nested";
-        alignment: Exclude<AlignmentType, "center">;
-        border?: BorderType | null;
-        shape: ShapeType | null;
-        shadow?: ShadowType | null;
-        padding: Spacing;
-        margin: Spacing;
-        text_lid: string;
-        color: ColorScheme;
-        font_name?: string;
-        font_weight: keyof typeof FontWeights;
-        font_size: keyof typeof FontSizeTags;
-        horizontal_alignment: keyof typeof TextAlignments;
-        background_color: ColorGradientScheme;
-    };
-    overrides?: OverrideProps<StackProps>;
-}
-export interface TextNodeProps extends SharedComponentProps {
-    background_color?: ColorGradientScheme;
-    color: ColorScheme;
-    components: PaywallComponent[];
-    font_name?: string;
-    font_size: keyof typeof FontSizeTags;
-    font_weight: keyof typeof FontWeights;
-    horizontal_alignment: keyof typeof TextAlignments;
-    margin: Spacing;
-    padding: Spacing;
-    text_lid: string;
-    type: "text";
-    size: SizeType;
-    overrides?: OverrideProps<TextNodeProps>;
-}
-export interface ImageMaskShapeType {
-    type: "circle" | "rectangle" | "concave" | "convex";
-    corners?: CornerRadiusType;
-}
-export interface ImageProps extends SharedComponentProps {
-    type: "image";
-    fit_mode: ImageObjectFit;
-    size: SizeType;
-    source: ImageInfo;
-    color_overlay?: ColorGradientScheme | null;
-    mask_shape?: ImageMaskShapeType;
-    max_height?: number;
-    override_source_lid?: string;
-    overrides?: OverrideProps<ImageProps>;
-}
-export type ItemProps = {
-    title: {
-        text_lid: string;
-        color: ColorScheme;
-        font_name?: string;
-        font_weight?: keyof typeof FontWeights;
-        font_size?: keyof typeof FontSizeTags;
-        horizontal_alignment?: keyof typeof TextAlignments;
-    };
-    description?: {
-        text_lid: string;
-        color: ColorScheme;
-        font_name?: string;
-        font_weight?: keyof typeof FontWeights;
-        font_size?: keyof typeof FontSizeTags;
-        horizontal_alignment?: keyof typeof TextAlignments;
-    };
-    icon: {
-        name: string;
-        color: ColorScheme;
-        width_and_height: number;
-        padding: number;
-    };
-    icon_background?: {
-        shape: CircleShape | RectangleShape;
-        color: ColorScheme;
-        border?: BorderType;
-    };
-    connector?: {
-        width: number;
-        margin: {
-            top: number;
-            bottom: number;
-        };
-        color: ColorGradientScheme;
-    };
-};
-export interface TimelineProps extends SharedComponentProps {
-    type: "timeline";
-    item_spacing: number;
-    text_spacing: number;
-    size: SizeType;
-    padding: Spacing;
-    margin: Spacing;
-    items: ItemProps[];
-}
-export interface TimelineItemProps extends ItemProps, SharedComponentProps {
-    text_spacing: number;
-    item_spacing: number;
-}
+export {};

package/dist/index.d.ts

@@ -1,14 +1,15 @@
-export * from "./types";
-export * from "./ui/globals";
-export { type PaywallData as PaywallData } from "./data/entities";
-export { type VariableDictionary } from "./utils/variable-utils";
-export { default as Paywall } from "./components/paywall/Paywall.svelte";
-export { default as Stack } from "./components/stack/Stack.svelte";
 export { default as ButtonDeprecated } from "./components/button/Button.svelte";
-export { default as Button } from "./ui/molecules/button.svelte";
-export { default as Text } from "./components/text/Text.svelte";
+export { default as Footer } from "./components/footer/Footer.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";
+export { default as Paywall } from "./components/paywall/Paywall.svelte";
+export { default as PurchaseButton } from "./components/purchase-button/PurchaseButton.svelte";
+export { default as Stack } from "./components/stack/Stack.svelte";
+export { default as Text } from "./components/text/Text.svelte";
 export { default as Timeline } from "./components/timeline/Timeline.svelte";
+export { type PaywallData as PaywallData } from "./data/entities";
+export { type UIConfig as UIConfig } from "./data/entities";
+export * from "./types";
+export { type VariableDictionary } from "./types/variables";
+export * from "./ui/globals";
+export { default as Button } from "./ui/molecules/button.svelte";

package/dist/index.js

@@ -1,15 +1,16 @@
 // Reexport your entry components here
-export * from "./types";
-export * from "./ui/globals";
-export {} from "./data/entities";
-export {} from "./utils/variable-utils";
-export { default as Paywall } from "./components/paywall/Paywall.svelte";
-export { default as Stack } from "./components/stack/Stack.svelte";
 export { default as ButtonDeprecated } from "./components/button/Button.svelte";
-export { default as Button } from "./ui/molecules/button.svelte";
-export { default as Text } from "./components/text/Text.svelte";
+export { default as Footer } from "./components/footer/Footer.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";
+export { default as Paywall } from "./components/paywall/Paywall.svelte";
+export { default as PurchaseButton } from "./components/purchase-button/PurchaseButton.svelte";
+export { default as Stack } from "./components/stack/Stack.svelte";
+export { default as Text } from "./components/text/Text.svelte";
 export { default as Timeline } from "./components/timeline/Timeline.svelte";
+export {} from "./data/entities";
+export {} from "./data/entities";
+export * from "./types";
+export {} from "./types/variables";
+export * from "./ui/globals";
+export { default as Button } from "./ui/molecules/button.svelte";

package/dist/stores/color-mode.d.ts

@@ -1,5 +1,5 @@
 import type { ColorMode } from "../types";
-export type ColorModeOverride = () => ColorMode | undefined;
+type ColorModeOverride = () => ColorMode | undefined;
 type GetColorMode = () => ColorMode;
 export declare function setColorModeContext(colorModeOverride?: ColorModeOverride): GetColorMode;
 export declare function getColorModeContext(): GetColorMode;

package/dist/stores/localization.d.ts

@@ -8,6 +8,6 @@ export interface LocalizationContextProps {
     selectedLocale?: string;
     localizations: Localizations;
 }
-export declare function setLocalizationContext({ defaultLocale, selectedLocale, localizations, }: LocalizationContextProps): LocalizationContext;
+export declare function setLocalizationContext(props: () => LocalizationContextProps): LocalizationContext;
 export declare function getLocalizationContext(): LocalizationContext;
 export {};

package/dist/stores/localization.js

@@ -1,11 +1,12 @@
 import { getContext, setContext } from "svelte";
 const key = Symbol("localization");
-export function setLocalizationContext({ defaultLocale, selectedLocale, localizations, }) {
-    const locale = selectedLocale ?? defaultLocale;
+export function setLocalizationContext(props) {
     const getLocalizedString = (id) => {
         if (!id) {
             return "";
         }
+        const { selectedLocale, defaultLocale, localizations } = props();
+        const locale = selectedLocale ?? defaultLocale;
         const selected = localizations[locale]?.[id];
         const fallback = localizations[defaultLocale]?.[id];
         return selected ?? fallback;

package/dist/stores/paywall.d.ts

@@ -1,10 +1,14 @@
+import type { UIConfig } from "../data/entities";
 import type { Action } from "../types/components/button";
-import { type Writable } from "svelte/store";
-interface PaywallContext {
+import type { VariableDictionary } from "../types/variables";
+import { type Readable, type Writable } from "svelte/store";
+type PaywallContext = Readonly<{
     selectedPackageId: Writable<string | undefined>;
+    variablesPerPackage: Readable<Record<string, VariableDictionary> | undefined>;
     onPurchase: () => void;
     onButtonAction: (action: Action) => void;
-}
+    uiConfig: UIConfig;
+}>;
 export declare function setPaywallContext(context: PaywallContext): void;
 export declare function getPaywallContext(): PaywallContext;
 export {};

package/dist/stores/selected.d.ts

@@ -0,0 +1,5 @@
+import { type Readable } from "svelte/store";
+type SelectedContext = Readable<boolean>;
+export declare function setSelectedStateContext(packageId: string): void;
+export declare function getSelectedStateContext(): SelectedContext;
+export {};

package/dist/stores/selected.js

@@ -0,0 +1,12 @@
+import { getContext, setContext } from "svelte";
+import { derived, readable } from "svelte/store";
+import { getPaywallContext } from "./paywall";
+const key = Symbol("selected");
+export function setSelectedStateContext(packageId) {
+    const { selectedPackageId } = getPaywallContext();
+    setContext(key, derived(selectedPackageId, (value) => value === packageId));
+}
+export function getSelectedStateContext() {
+    const context = getContext(key);
+    return context ?? readable(false);
+}

package/dist/stores/variables.d.ts

@@ -1,6 +1,5 @@
-import { type VariableDictionary } from "../utils/variable-utils";
+import type { VariableDictionary } from "../types/variables";
 import { type Readable } from "svelte/store";
-type VariablesStore = Readable<VariableDictionary | undefined>;
+export type VariablesStore = Readable<VariableDictionary | undefined>;
 export declare function setVariablesContext(variables: VariablesStore): void;
 export declare function getVariablesContext(): VariablesStore;
-export {};

package/dist/stores/variables.js

@@ -1,4 +1,3 @@
-import {} from "../utils/variable-utils";
 import { getContext, setContext } from "svelte";
 import {} from "svelte/store";
 const key = Symbol("variables");

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

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

package/dist/stories/component-decorator.js

@@ -0,0 +1,12 @@
+export function componentDecorator() {
+    return (Story, ctx) => {
+        return Story({
+            ...ctx,
+            args: {
+                ...ctx.args,
+                id: ctx.name.toLowerCase().replaceAll(" ", "-"),
+                name: ctx.name,
+            },
+        });
+    };
+}

package/dist/stories/fixtures.d.ts

@@ -1,16 +1,17 @@
-import type { PaywallData } from "../data/entities";
+import type { PaywallData, UIConfig } from "../data/entities";
 import type { BrandingAppearance } from "../ui/utils/branding";
+export declare const uiConfigData: UIConfig;
 export declare const paywallData: PaywallData;
 export declare const alignmentPaywallData: PaywallData;
 export declare const fontsPaywallData: PaywallData;
+export declare const customFontsPaywallData: PaywallData;
 export declare const pastaPaywallData: PaywallData;
-export declare const variablesPastaPaywallData: PaywallData;
 export declare const gradientPaywallData: PaywallData;
 export declare const calmPaywallData: PaywallData;
 export declare const stateTemplate: PaywallData;
 export declare const posterMakerTemplate: PaywallData;
 export declare const zStackTemplate: PaywallData;
-export declare const labelsData: {
+export declare const localizations: {
     en_US: {
         id1: string;
         id2: string;
@@ -22,5 +23,6 @@ export declare const colorModeOverrideTemplate: PaywallData;
 export declare const paywallWithFooter: PaywallData;
 export declare const errorPaywallData: PaywallData;
 export declare const fallbackPaywallData: PaywallData;
-export declare const e2eTestTemplate: PaywallData;
 export declare const brandingAppearances: Record<string, BrandingAppearance | null>;
+export declare const timelineTemplate: PaywallData;
+export declare const listTemplate: PaywallData;