@revenuecat/purchases-ui-js 0.0.16 → 0.0.17

package/dist/components/button/Button.svelte.d.ts

@@ -1,8 +1,10 @@
 import type { Snippet } from "svelte";
-declare const Button: import("svelte").Component<{
+interface ButtonProps {
     onclick?: () => void;
     children?: Snippet;
     style?: string;
     class?: string;
-}, {}, "">;
+}
+declare const Button: import("svelte").Component<ButtonProps, {}, "">;
+type Button = ReturnType<typeof Button>;
 export default Button;

package/dist/components/button/ButtonNode.stories.svelte

@@ -1,8 +1,7 @@
 <script module lang="ts">
   import { defineMeta } from "@storybook/addon-svelte-csf";
   import ButtonNode from "./ButtonNode.svelte";
-  import { colorModeStoryMeta } from "../../stories/meta-templates";
-  import type { SupportedActions, TextNodeProps } from "../../data/entities";
+  import type { SupportedActions } from "../../data/entities";
 
   const onAction = (action: SupportedActions) => {
     alert(action.type);
@@ -30,7 +29,6 @@
           },
         },
       },
-      colorMode: colorModeStoryMeta,
       stack: {
         control: { type: "object" },
         description: "Stack configuration for button content",
@@ -47,6 +45,7 @@
   const purchaseState = {
     locale: "en_US",
     defaultLocale: "en_US",
+    colorMode: "light",
   };
 
   export const labelsData = {
@@ -78,7 +77,6 @@
     margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
     padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
     labels: labelsData,
-    colorMode: "light",
     size: {
       width: { type: "fit" },
       height: { type: "fit" },

package/dist/components/button/ButtonNode.svelte.d.ts

@@ -1,3 +1,4 @@
 import type { ButtonNodeProps } from "../../data/entities";
 declare const ButtonNode: import("svelte").Component<ButtonNodeProps, {}, "">;
+type ButtonNode = ReturnType<typeof ButtonNode>;
 export default ButtonNode;

package/dist/components/footer/Footer.stories.svelte

@@ -1,96 +1,68 @@
 <script module lang="ts">
   import { defineMeta } from "@storybook/addon-svelte-csf";
   import Footer from "./Footer.svelte";
-  import { colorModeStoryMeta } from "../../stories/meta-templates";
+  import type { ColorMode } from "../../types";
 
   const purchaseState = {
     locale: "en_US",
     defaultLocale: "en_US",
+    colorMode: "light" as ColorMode,
   };
 
   const { Story } = defineMeta({
     title: "Components/Footer",
     component: Footer,
     tags: ["autodocs"],
-    argTypes: {
-      colorMode: colorModeStoryMeta,
-
-      stack: {
-        control: { type: "object" },
-        description: "Stack configuration for package content",
-        table: {
-          type: {
-            summary: "object",
-            detail: "StackProps",
-          },
-        },
-      },
-    },
+    argTypes: {},
   });
 
   export const labelsData = {
     en_US: {
-      "BcX-6YwhoV": "Monthly",
-      QZ4ZmYsqjN: "$1.99",
+      GM2Sytqd5p: "Do it now before you regret it!",
     },
   };
 </script>
 
 <!-- Default  -->
 <Story
-  name="Default Package"
+  name="Footer component"
   args={{
-    id: "6rQSD5e2Kz",
-    is_selected_by_default: false,
-    name: "Package - Monthly",
-    package_id: "$rc_annual",
-    purchaseState: purchaseState,
+    id: "kHhCWlo9au",
+    name: "",
     stack: {
-      purchaseState: purchaseState,
       background_color: {
         light: {
           type: "hex",
-          value: "#09090b",
+          value: "#6c6c6cFF",
         },
       },
-      labels: labelsData,
-      border: {
-        color: {
-          light: {
-            type: "hex",
-            value: "#3b393f",
-          },
-        },
-        width: 1,
-      },
+      border: undefined,
       components: [
         {
           background_color: null,
           color: {
             light: {
               type: "hex",
-              value: "#ffffff",
+              value: "#ffffffFF",
             },
           },
-          labels: labelsData,
-          components: [],
           font_name: null,
-          font_size: "heading_s",
-          font_weight: "bold",
+          font_size: "body_m",
+          font_weight: "extra_bold",
           horizontal_alignment: "center",
-          id: "aSK4Jf1zd4",
+          id: "pFC3qrx4-c",
           margin: {
             bottom: 0,
             leading: 0,
             top: 0,
             trailing: 0,
           },
-          name: "Text",
+          name: "",
           padding: {
-            bottom: 0,
-            leading: 0,
-            top: 0,
-            trailing: 0,
+            bottom: 10,
+            leading: 10,
+            top: 10,
+            trailing: 10,
           },
           size: {
             height: {
@@ -98,124 +70,43 @@
               value: null,
             },
             width: {
-              type: "fit",
+              type: "fill",
               value: null,
             },
           },
-          text_lid: "BcX-6YwhoV",
+          text_lid: "GM2Sytqd5p",
           type: "text",
         },
-        {
-          background_color: {
-            light: {
-              type: "hex",
-              value: "#292631",
-            },
-          },
-          labels: labelsData,
-          border: null,
-          components: [
-            {
-              background_color: null,
-              color: {
-                light: {
-                  type: "hex",
-                  value: "#ffffff",
-                },
-              },
-              components: [],
-              font_name: null,
-              font_size: "body_m",
-              font_weight: "extra_bold",
-              horizontal_alignment: "center",
-              id: "unosKAXGp4",
-              margin: {
-                bottom: 0,
-                leading: 0,
-                top: 0,
-                trailing: 0,
-              },
-              name: "Text",
-              padding: {
-                bottom: 8,
-                leading: 16,
-                top: 8,
-                trailing: 16,
-              },
-              size: {
-                height: {
-                  type: "fit",
-                  value: null,
-                },
-                width: {
-                  type: "fit",
-                  value: null,
-                },
-              },
-              text_lid: "QZ4ZmYsqjN",
-              type: "text",
-            },
-          ],
-          dimension: {
-            alignment: "leading",
-            distribution: "space_between",
-            type: "vertical",
-          },
-          id: "-41AkrT2Ha",
-          margin: {
-            bottom: 0,
-            leading: 0,
-            top: 0,
-            trailing: 0,
-          },
-          name: "Stack",
-          padding: {
-            bottom: 0,
-            leading: 0,
-            top: 0,
-            trailing: 0,
-          },
-          shape: {
-            corners: {
-              bottom_leading: 8,
-              bottom_trailing: 8,
-              top_leading: 8,
-              top_trailing: 8,
-            },
-            type: "rectangle",
-          },
-          size: {
-            height: {
-              type: "fit",
-              value: null,
-            },
-            width: {
-              type: "fit",
-              value: null,
-            },
-          },
-          spacing: 8,
-          type: "stack",
-        },
       ],
       dimension: {
-        alignment: "center",
+        alignment: "top",
         distribution: "space_between",
-        type: "horizontal",
+        type: "vertical",
       },
-      id: "u0KZLUZTQT",
+      id: "yI_0xF4hlJ",
       margin: {
         bottom: 0,
-        leading: 16,
-        top: 16,
-        trailing: 16,
+        leading: 0,
+        top: 0,
+        trailing: 0,
       },
-      name: "Stack",
+      name: "Footer",
       padding: {
-        bottom: 16,
-        leading: 16,
-        top: 16,
-        trailing: 16,
+        bottom: 0,
+        leading: 0,
+        top: 0,
+        trailing: 0,
+      },
+      shadow: {
+        color: {
+          light: {
+            type: "hex",
+            value: "#00000033",
+          },
+        },
+        radius: 16,
+        x: 0,
+        y: -4,
       },
       shape: {
         corners: {
@@ -229,17 +120,16 @@
       size: {
         height: {
           type: "fit",
-          value: null,
         },
         width: {
-          type: "fixed",
-          value: 500,
+          type: "fill",
         },
       },
-      spacing: 8,
+      spacing: 0,
       type: "stack",
     },
+    type: "footer",
+    purchaseState: purchaseState,
     labels: labelsData,
-    type: "package",
   }}
 />

package/dist/components/footer/Footer.stories.svelte.d.ts

@@ -1,8 +1,7 @@
 import Footer from "./Footer.svelte";
 export declare const labelsData: {
     en_US: {
-        "BcX-6YwhoV": string;
-        QZ4ZmYsqjN: string;
+        GM2Sytqd5p: string;
     };
 };
 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> {

package/dist/components/footer/Footer.svelte

@@ -9,3 +9,12 @@
 <div class="footer" {id}>
   <Stack {...stack} {labels} {purchaseState} {variableDictionary} />
 </div>
+
+<style>
+  .footer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+</style>

package/dist/components/footer/Footer.svelte.d.ts

@@ -1,3 +1,4 @@
 import type { FooterProps } from "../../data/entities";
 declare const Footer: import("svelte").Component<FooterProps, {}, "">;
+type Footer = ReturnType<typeof Footer>;
 export default Footer;

package/dist/components/image/Image.stories.svelte

@@ -1,7 +1,10 @@
 <script module lang="ts">
   import { defineMeta } from "@storybook/addon-svelte-csf";
   import Image from "./Image.svelte";
-  import { colorModeStoryMeta } from "../../stories/meta-templates";
+
+  const purchaseState = {
+    colorMode: "light",
+  };
 
   const { Story } = defineMeta({
     title: "Components/Image",
@@ -13,7 +16,6 @@
         control: "object",
         description: "Gradient colors for the overlay",
       },
-      colorMode: colorModeStoryMeta,
       size: {
         control: "object",
         description: "Size configuration for the image",
@@ -39,6 +41,7 @@
 <Story
   name="Rectangle"
   args={{
+    purchaseState,
     id: "example-id",
     fit_mode: "fit",
     size: {
@@ -54,7 +57,6 @@
         webp_low_res: "https://placehold.co/600x400",
       },
     },
-    colorMode: "light",
     mask_shape: { type: "rectangle" },
   }}
 />
@@ -62,6 +64,7 @@
 <Story
   name="Circle"
   args={{
+    purchaseState,
     id: "example-id",
     fit_mode: "fit",
     size: {
@@ -77,7 +80,6 @@
         webp_low_res: "https://placehold.co/600x400",
       },
     },
-    colorMode: "light",
     mask_shape: { type: "circle" },
   }}
 />
@@ -85,6 +87,7 @@
 <Story
   name="Concave"
   args={{
+    purchaseState,
     id: "example-id",
     fit_mode: "fit",
     size: {
@@ -100,7 +103,6 @@
         webp_low_res: "https://placehold.co/600x400",
       },
     },
-    colorMode: "light",
     mask_shape: { type: "concave" },
   }}
 />
@@ -108,6 +110,7 @@
 <Story
   name="Convex"
   args={{
+    purchaseState,
     id: "example-id",
     fit_mode: "fit",
     size: {
@@ -123,7 +126,6 @@
         webp_low_res: "https://placehold.co/600x400",
       },
     },
-    colorMode: "light",
     mask_shape: { type: "convex" },
   }}
 />
@@ -131,6 +133,7 @@
 <Story
   name="Background Gradient"
   args={{
+    purchaseState,
     id: "example-id",
     fit_mode: "fit",
     size: {
@@ -146,7 +149,6 @@
         webp_low_res: "https://placehold.co/600x400",
       },
     },
-    colorMode: "light",
     gradient_colors: [
       {
         dark: { type: "hex", value: "#FFFFFF80" },

package/dist/components/image/Image.svelte

@@ -3,13 +3,28 @@
   import { stringifyStyles } from "../../utils/style-utils";
   import type { ImageProps } from "../../data/entities";
 
-  const { id, colorMode, source, ...restProps }: ImageProps = $props();
+  const { id, source, purchaseState, ...restProps }: ImageProps = $props();
 
   const { gradientStyles, imageStyles } = $derived(
-    getImageComponentStyles({ id, colorMode, source, ...restProps }),
+    getImageComponentStyles({
+      id,
+      colorMode: purchaseState.colorMode,
+      source,
+      purchaseState,
+      ...restProps,
+    }),
   );
   const gradientStylesString = $derived(stringifyStyles(gradientStyles));
   const imageStylesString = $derived(stringifyStyles(imageStyles));
+
+  const imageSource = $derived.by(() => {
+    const colorMode = purchaseState.colorMode;
+    if (source[colorMode]?.original) {
+      return source[colorMode].original;
+    } else {
+      return source["light"].original as string;
+    }
+  });
 </script>
 
 <div
@@ -17,7 +32,7 @@
   id={`image-container-${id}`}
   style={imageStylesString}
 >
-  <img class="image" src={source[colorMode || "light"]?.original} alt="" {id} />
+  <img class="image" src={imageSource} alt="" {id} />
   <span class="image-overlay" style={gradientStylesString}></span>
 </div>
 

package/dist/components/image/Image.svelte.d.ts

@@ -1,3 +1,4 @@
 import type { ImageProps } from "../../data/entities";
 declare const Image: import("svelte").Component<ImageProps, {}, "">;
+type Image = ReturnType<typeof Image>;
 export default Image;

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

@@ -5,12 +5,12 @@ import { getActiveStateProps, getGradientStyle, getMaskStyle, getSizeStyle, } fr
  * @returns Object containing image style variables and gradient style variables
  */
 export const getImageComponentStyles = (props) => {
-    const { gradient_colors, colorMode, mask_shape, size, 
+    const { gradient_colors, mask_shape, size, 
     // max_height, // TODO: implement this. still waiting on spec
     // override_source_lid, // TODO: Implement this once structure is defined
-    overrides, componentState, } = props;
+    overrides, componentState, purchaseState, } = props;
     const activeStateProps = getActiveStateProps(overrides, componentState);
-    const gradientStyles = getGradientStyle(colorMode, activeStateProps?.gradient_colors || gradient_colors);
+    const gradientStyles = getGradientStyle(purchaseState.colorMode, activeStateProps?.gradient_colors || gradient_colors);
     const sizeStyles = getSizeStyle({ ...size, ...activeStateProps });
     const maskStyles = getMaskStyle({
         ...mask_shape,

package/dist/components/package/Package.stories.svelte

@@ -1,7 +1,6 @@
 <script module lang="ts">
   import { defineMeta } from "@storybook/addon-svelte-csf";
   import Package from "./Package.svelte";
-  import { colorModeStoryMeta } from "../../stories/meta-templates";
   import type { Extra, SupportedActions } from "../../data/entities";
 
   const onAction = (action: SupportedActions, data: Extra) => {
@@ -13,7 +12,6 @@
     component: Package,
     tags: ["autodocs"],
     argTypes: {
-      colorMode: colorModeStoryMeta,
       stack: {
         control: { type: "object" },
         description: "Stack configuration for package content",

package/dist/components/package/Package.svelte.d.ts

@@ -1,3 +1,4 @@
 import type { PackageProps } from "../../data/entities";
 declare const Package: import("svelte").Component<PackageProps, {}, "">;
+type Package = ReturnType<typeof Package>;
 export default Package;

package/dist/components/paywall/Node.svelte

@@ -13,6 +13,7 @@
   import ButtonNode from "../button/ButtonNode.svelte";
   import TextNode from "../text/TextNode.svelte";
   import type { VariableDictionary } from "../../utils/variable-utils";
+  import Timeline from "../timeline/Timeline.svelte";
 
   interface Props extends ActionsProps, PurchaseStateProps {
     nodeData: PaywallComponent;
@@ -37,7 +38,13 @@
     purchase_button: PurchaseButton,
     package: Package,
     footer: Footer,
+    timeline: Timeline,
   };
+  if (!ComponentTypes[nodeData.type]) {
+    // manually throwing error for this specific case until
+    // it's handled with fallback components
+    throw new Error(`Invalid component type: ${nodeData.type}`);
+  }
   const MyComponent = $derived(ComponentTypes[nodeData.type]);
 </script>
 
@@ -49,7 +56,7 @@
   {purchaseState}
   {variableDictionary}
 >
-  {#each nodeData.components as childData}
+  {#each nodeData.components as PaywallComponent[] as childData}
     <Self
       nodeData={childData}
       {labels}

package/dist/components/paywall/Node.svelte.d.ts

@@ -1,9 +1,11 @@
 import { type ActionsProps, type ComponentLocalizations, type Extra, type PaywallComponent, type PurchaseStateProps, type SupportedActions } from "../../data/entities";
 import type { VariableDictionary } from "../../utils/variable-utils";
-declare const Node: import("svelte").Component<ActionsProps & PurchaseStateProps & {
+interface Props extends ActionsProps, PurchaseStateProps {
     nodeData: PaywallComponent;
     labels: ComponentLocalizations;
     onAction?: (action: SupportedActions, data?: Extra) => void;
     variableDictionary?: VariableDictionary;
-}, {}, "">;
+}
+declare const Node: import("svelte").Component<Props, {}, "">;
+type Node = ReturnType<typeof Node>;
 export default Node;