@revenuecat/purchases-ui-js 2.0.1 → 2.0.2

package/dist/components/stack/Stack.stories.svelte

@@ -1,6 +1,8 @@
 <script module lang="ts">
-  import { defineMeta } from "@storybook/addon-svelte-csf";
   import Stack from "./Stack.svelte";
+  import type { StackProps, TextNodeProps } from "../../data/entities";
+  import { localizations } from "../../stories/fixtures";
+  import { localizationDecorator } from "../../stories/localization-decorator";
   import {
     borderStoryMeta,
     getColorStoryMeta,
@@ -9,18 +11,13 @@
     sizeStoryMeta,
     stackDimensionStoryMeta,
   } from "../../stories/meta-templates";
-  import { labelsData } from "../../stories/fixtures";
-  import type { PurchaseState } from "../../data/state";
-  import type { PaywallComponent } from "../../data/entities";
   import {
     DEFAULT_BACKGROUND_COLOR,
     DEFAULT_TEXT_COLOR,
   } from "../../utils/constants";
-  import { localizationDecorator } from "../../stories/localization-decorator";
-
-  const defaultLocale = Object.keys(labelsData)[0];
+  import { defineMeta } from "@storybook/addon-svelte-csf";
 
-  const purchaseState: PurchaseState = {};
+  const defaultLocale = Object.keys(localizations)[0];
 
   const { Story } = defineMeta({
     title: "Components/Stack",
@@ -29,10 +26,9 @@
     decorators: [
       localizationDecorator({
         defaultLocale,
-        localizations: labelsData,
+        localizations,
       }),
     ],
-    args: { purchaseState },
     argTypes: {
       dimension: stackDimensionStoryMeta,
       spacing: {
@@ -48,7 +44,7 @@
     },
   });
 
-  const components: PaywallComponent[] = [
+  const components = [
     {
       type: "text",
       size: {
@@ -57,7 +53,6 @@
       },
       horizontal_alignment: "center",
       name: "Item 1",
-      components: [],
       id: "1",
       text_lid: "id1",
       background_color: {
@@ -73,7 +68,6 @@
       },
       horizontal_alignment: "center",
       name: "Item 2",
-      components: [],
       id: "2",
       text_lid: "id2",
       background_color: {
@@ -89,7 +83,6 @@
       },
       horizontal_alignment: "center",
       name: "Item 3",
-      components: [],
       id: "3",
       text_lid: "id3",
       background_color: {
@@ -97,7 +90,7 @@
         light: { type: "alias", value: "transparent" },
       },
     },
-  ];
+  ] as unknown as TextNodeProps[];
 </script>
 
 <!-- Vertical Stack -->
@@ -321,7 +314,6 @@
     components: [
       {
         type: "stack",
-
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -336,7 +328,6 @@
       },
       {
         type: "stack",
-
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -378,7 +369,6 @@
       },
       {
         type: "stack",
-
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -420,7 +410,6 @@
       },
       {
         type: "stack",
-
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -462,7 +451,6 @@
       },
       {
         type: "stack",
-
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -504,7 +492,6 @@
       },
       {
         type: "stack",
-
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -546,7 +533,6 @@
       },
       {
         type: "stack",
-
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -588,7 +574,6 @@
       },
       {
         type: "stack",
-
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -630,7 +615,6 @@
       },
       {
         type: "stack",
-
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -670,7 +654,7 @@
           },
         },
       },
-    ],
+    ] as unknown as StackProps[],
     border: {
       width: 2,
       color: {
@@ -706,7 +690,6 @@
     components: [
       {
         type: "stack",
-
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -721,7 +704,6 @@
       },
       {
         type: "stack",
-
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -763,7 +745,6 @@
       },
       {
         type: "stack",
-
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -805,7 +786,6 @@
       },
       {
         type: "stack",
-
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -847,7 +827,6 @@
       },
       {
         type: "stack",
-
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -889,7 +868,6 @@
       },
       {
         type: "stack",
-
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -931,7 +909,6 @@
       },
       {
         type: "stack",
-
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -971,7 +948,7 @@
           },
         },
       },
-    ],
+    ] as unknown as StackProps[],
     border: {
       width: 2,
       color: {
@@ -1142,7 +1119,6 @@
     components: [
       {
         type: "stack",
-
         dimension: {
           type: "zlayer",
           alignment: "center",
@@ -1157,13 +1133,11 @@
       },
       {
         type: "stack",
-
         dimension: {
           type: "zlayer",
           alignment: "center",
         },
         components: [],
-
         border: {
           width: 2,
           color: {
@@ -1215,13 +1189,11 @@
       },
       {
         type: "stack",
-
         dimension: {
           type: "zlayer",
           alignment: "center",
         },
         components: [],
-
         border: {
           width: 2,
           color: {
@@ -1273,13 +1245,11 @@
       },
       {
         type: "stack",
-
         dimension: {
           type: "zlayer",
           alignment: "center",
         },
         components: [],
-
         border: {
           width: 2,
           color: {
@@ -1331,13 +1301,11 @@
       },
       {
         type: "stack",
-
         dimension: {
           type: "zlayer",
           alignment: "center",
         },
         components: [],
-
         border: {
           width: 2,
           color: {
@@ -1387,7 +1355,7 @@
           },
         },
       },
-    ],
+    ] as unknown as StackProps[],
     border: {
       width: 2,
       color: {

package/dist/components/stack/Stack.svelte

@@ -13,15 +13,8 @@
   import { getVariablesContext } from "../../stores/variables";
   import { replaceVariables } from "../../utils/variable-utils";
 
-  const {
-    id,
-    components,
-    labels,
-    purchaseState,
-    badge,
-    zStackChildStyles,
-    ...restProps
-  }: StackProps = $props();
+  const { id, components, badge, zStackChildStyles, ...restProps }: StackProps =
+    $props();
 
   const getColorMode = getColorModeContext();
   const colorMode = $derived(getColorMode());
@@ -30,8 +23,6 @@
     getStackComponentStyles(colorMode, {
       id,
       components,
-      labels,
-      purchaseState,
       zStackChildStyles,
       ...restProps,
     }),
@@ -40,8 +31,6 @@
     getBadgeStyles(colorMode, {
       id,
       components,
-      labels,
-      purchaseState,
       badge,
       ...restProps,
     }),
@@ -51,8 +40,6 @@
     getZStackChildStyles({
       id,
       components,
-      labels,
-      purchaseState,
       ...restProps,
     }),
   );
@@ -67,8 +54,6 @@
     getStackBadgeTextStyles(colorMode, {
       id,
       components,
-      labels,
-      purchaseState,
       badge,
       ...restProps,
     }),
@@ -88,16 +73,11 @@
       {#if zStackChildrenStyles}
         <Node
           nodeData={component}
-          {purchaseState}
           componentState={restProps.componentState}
           zStackChildStyles={index > 0 ? zStackChildrenStyles : undefined}
         />
       {:else}
-        <Node
-          nodeData={component}
-          {purchaseState}
-          componentState={restProps.componentState}
-        />
+        <Node nodeData={component} componentState={restProps.componentState} />
       {/if}
     {/each}
   </div>

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

@@ -217,9 +217,7 @@ export function getStackBadgeTextStyles(colorMode, props) {
         return { tagToRender: "", textStyles: "" };
     const { tagToRender, textStyles } = getTextComponentStyles(colorMode, {
         id: props.id,
-        purchaseState: props.purchaseState,
         ...badge,
-        components: [],
         type: "text",
         size: {
             width: { type: "fit" },

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

@@ -40,7 +40,6 @@
         width: { type: "fill" },
         height: { type: "fill" },
       },
-      purchaseState: {},
     },
     argTypes: {
       name: getTextControlStoryMeta("Content of the text to render"),
@@ -54,11 +53,6 @@
       horizontal_alignment: horizontalAlignmentStoryMeta,
       padding: getSpacingStoryMeta("Padding values in pixels"),
       margin: getSpacingStoryMeta("Margin values in pixels"),
-      variableDictionary: {
-        description: "Dictionary containing the values for the variables",
-        control: { type: "object" },
-        defaultValue: {},
-      },
     },
     parameters: {
       localizations: {
@@ -85,7 +79,6 @@
   name="Font Weight"
   args={{
     font_weight: "bold",
-    text_style: "normal",
     horizontal_alignment: "leading",
     name: "hello world!",
   }}
@@ -96,7 +89,6 @@
   name="Text Alignment"
   args={{
     font_weight: "regular",
-    text_style: "normal",
     horizontal_alignment: "center",
     name: "hello world!",
   }}
@@ -107,7 +99,6 @@
   name="Color"
   args={{
     font_weight: "regular",
-    text_style: "normal",
     horizontal_alignment: "leading",
     color: {
       dark: { type: "hex", value: "#3471eb" },
@@ -126,7 +117,6 @@
   name="With Spacing"
   args={{
     font_weight: "regular",
-    text_style: "normal",
     horizontal_alignment: "leading",
     padding: { top: 16, trailing: 24, bottom: 16, leading: 24 },
     margin: { top: 8, trailing: 0, bottom: 8, leading: 0 },
@@ -139,7 +129,6 @@
   name="With variable dictionary"
   args={{
     font_weight: "regular",
-    text_style: "normal",
     horizontal_alignment: "leading",
     padding: { top: 16, trailing: 24, bottom: 16, leading: 24 },
     margin: { top: 8, trailing: 0, bottom: 8, leading: 0 },
@@ -161,7 +150,6 @@
   name="With missing variable in dictionary"
   args={{
     font_weight: "regular",
-    text_style: "normal",
     horizontal_alignment: "leading",
     padding: { top: 16, trailing: 24, bottom: 16, leading: 24 },
     margin: { top: 8, trailing: 0, bottom: 8, leading: 0 },

package/dist/components/text/TextNode.svelte

@@ -11,15 +11,8 @@
   import { getVariablesContext } from "../../stores/variables";
   import { replaceVariables } from "../../utils/variable-utils";
 
-  const {
-    id,
-    labels,
-    text_lid,
-    purchaseState,
-    background_color,
-    size,
-    ...restProps
-  }: TextNodeProps = $props();
+  const { id, text_lid, background_color, size, ...restProps }: TextNodeProps =
+    $props();
 
   const getColorMode = getColorModeContext();
   const colorMode = $derived(getColorMode());
@@ -27,9 +20,7 @@
   const { tagToRender, textStyles } = $derived(
     getTextNodeStyles(colorMode, {
       id,
-      labels,
       text_lid,
-      purchaseState,
       background_color,
       size,
       ...restProps,

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

@@ -12,7 +12,7 @@ export declare const getTextComponentStyles: (colorMode: ColorMode, props: TextN
     textStyles: Record<string, string | number>;
     tagToRender: import("../../utils/style-utils").TextComponentTags;
 };
-export declare function getTextWrapperStyles(restProps: Partial<TextNodeProps>, size: SizeType, background_color?: ColorGradientScheme): string;
+export declare function getTextWrapperStyles(restProps: Partial<TextNodeProps>, size: SizeType, background_color?: ColorGradientScheme | null): string;
 export declare function getTextNodeStyles(colorMode: ColorMode, props: TextNodeProps): {
     tagToRender: import("../../utils/style-utils").TextComponentTags;
     textStyles: string;

package/dist/components/timeline/Timeline.stories.svelte

@@ -1,14 +1,11 @@
 <script module lang="ts">
   import { Timeline } from "../..";
   import { defaultColor } from "../text/text-utils";
-  import type { PurchaseState } from "../../data/state";
   import { localizationDecorator } from "../../stories/localization-decorator";
   import { defineMeta } from "@storybook/addon-svelte-csf";
 
   const defaultLocale = "en_US";
 
-  const purchaseState: PurchaseState = {};
-
   const { Story } = defineMeta({
     title: "Components/Timeline",
     component: Timeline,
@@ -42,7 +39,6 @@
         },
       }),
     ],
-    args: { purchaseState },
     argTypes: {},
   });
 </script>
@@ -423,7 +419,6 @@
                   color: "#d3d3d3",
                   percent: 0,
                 },
-
                 {
                   color: "#d3d3d300",
                   percent: 100,

package/dist/components/timeline/Timeline.svelte

@@ -13,11 +13,9 @@
     {#each items as item, index}
       <TimelineItem
         {...item}
-        labels={restProps.labels}
         id={`${restProps.id}-${index}`}
         name={`${restProps.name}-${index}`}
         type="timeline"
-        purchaseState={restProps.purchaseState}
         text_spacing={restProps.text_spacing}
         item_spacing={restProps.item_spacing}
       />

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

@@ -102,7 +102,6 @@ export function getTimelineItemTextStyles(colorMode, props, kind = "title") {
     };
     const { tagToRender, textStyles } = getTextComponentStyles(colorMode, {
         ...props,
-        components: [],
         ...textProps,
         size: { width: { type: "fit" }, height: { type: "fit" } },
         type: "text",

package/dist/data/entities.d.ts

@@ -1,35 +1,17 @@
 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 { Component } from "../types/component";
+import type { FooterProps } from "../types/components/footer";
 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 = {
+export 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,29 +25,18 @@ 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;
 };
-export interface SharedComponentProps extends PaywallComponent, PurchaseStateProps {
+export interface BaseComponent {
+    type: string;
     id: string;
     name: string;
+    fallback?: Component;
     componentState?: ComponentState;
     zStackChildStyles?: ZStackChildStyles;
 }
@@ -74,10 +45,10 @@ export type OverrideProps<T> = {
         [state: string]: T;
     };
 };
-export interface StackProps extends SharedComponentProps {
+export interface StackProps extends BaseComponent {
     type: "stack";
     visible?: boolean | null;
-    components: PaywallComponent[];
+    components: Component[];
     size: SizeType;
     dimension: Dimension;
     spacing: number;
@@ -90,7 +61,7 @@ export interface StackProps extends SharedComponentProps {
     shadow: ShadowType | null;
     badge?: null | {
         stack: {
-            components: PaywallComponent[];
+            components: Component[];
             type: "stack";
         };
         style: "overlay" | "edge_to_edge" | "nested";
@@ -110,11 +81,10 @@ export interface StackProps extends SharedComponentProps {
     };
     overrides?: OverrideProps<StackProps>;
 }
-export interface TextNodeProps extends SharedComponentProps {
-    background_color?: ColorGradientScheme;
+export interface TextNodeProps extends BaseComponent {
+    background_color?: ColorGradientScheme | null;
     color: ColorScheme;
-    components: PaywallComponent[];
-    font_name?: string;
+    font_name?: string | null;
     font_size: keyof typeof FontSizeTags;
     font_weight: keyof typeof FontWeights;
     horizontal_alignment: keyof typeof TextAlignments;
@@ -129,7 +99,7 @@ export interface ImageMaskShapeType {
     type: "circle" | "rectangle" | "concave" | "convex";
     corners?: CornerRadiusType;
 }
-export interface ImageProps extends SharedComponentProps {
+export interface ImageProps extends BaseComponent {
     type: "image";
     fit_mode: ImageObjectFit;
     size: SizeType;
@@ -177,7 +147,7 @@ export type ItemProps = {
         color: ColorGradientScheme;
     };
 };
-export interface TimelineProps extends SharedComponentProps {
+export interface TimelineProps extends BaseComponent {
     type: "timeline";
     item_spacing: number;
     text_spacing: number;
@@ -186,7 +156,7 @@ export interface TimelineProps extends SharedComponentProps {
     margin: Spacing;
     items: ItemProps[];
 }
-export interface TimelineItemProps extends ItemProps, SharedComponentProps {
+export interface TimelineItemProps extends ItemProps, BaseComponent {
     text_spacing: number;
     item_spacing: number;
 }

package/dist/index.d.ts

@@ -1,14 +1,14 @@
-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 * from "./types";
+export * from "./ui/globals";
+export { default as Button } from "./ui/molecules/button.svelte";
+export { type VariableDictionary } from "./utils/variable-utils";