@revenuecat/purchases-ui-js 2.0.0 → 2.0.2

package/dist/components/button/Button.svelte

@@ -9,13 +9,9 @@
   }
 
   const { onclick, children, style, class: clz }: ButtonProps = $props();
-
-  const handleClick = () => {
-    onclick?.();
-  };
 </script>
 
-<button onclick={handleClick} class={clz} disabled={!onclick} {style}>
+<button {onclick} class={clz} disabled={!onclick} {style}>
   {@render children?.()}
 </button>
 

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

@@ -1,22 +1,29 @@
 <script module lang="ts">
-  import { defineMeta } from "@storybook/addon-svelte-csf";
   import ButtonNode from "./ButtonNode.svelte";
-  import type {
-    ComponentTypes,
-    StackProps,
-    SupportedActions,
-  } from "../../data/entities";
-  import type { PurchaseState } from "../../data/state";
-  import { DEFAULT_COLOR_MODE, DEFAULT_TEXT_COLOR } from "../../utils/constants";
+  import type { StackProps, TextNodeProps } from "../../data/entities";
+  import { localizationDecorator } from "../../stories/localization-decorator";
+  import { DEFAULT_TEXT_COLOR } from "../../utils/constants";
+  import { defineMeta } from "@storybook/addon-svelte-csf";
 
-  const onAction = (action: SupportedActions) => {
-    alert(action.type);
-  };
+  const defaultLocale = "en_US";
 
   const { Story } = defineMeta({
     title: "Components/Button",
     component: ButtonNode,
     tags: ["autodocs"],
+    decorators: [
+      localizationDecorator({
+        defaultLocale,
+        localizations: {
+          [defaultLocale]: {
+            id1: "Restore purchases",
+            id2: "Navigate back",
+            id3: "Navigate to",
+            id4: "URL navigation",
+          },
+        },
+      }),
+    ],
     argTypes: {
       action: {
         control: { type: "object" },
@@ -48,51 +55,34 @@
     },
   });
 
-  const purchaseState: PurchaseState = {
-    locale: "en_US",
-    defaultLocale: "en_US",
-    colorMode: DEFAULT_COLOR_MODE,
-  };
-
-  export const labelsData = {
-    en_US: {
-      id1: "Restore purchases",
-      id2: "Navigate back",
-      id3: "Navigate to",
-      id4: "URL navigation",
-    },
-  };
-
-  const textProps = (id: number) => ({
-    type: "text" as ComponentTypes,
-    name: "Button Text",
-    components: [],
-    id: "button-text-1",
-    text_lid: `id${id}`,
-    font_weight: "medium",
-    horizontal_alignment: "center",
-    background_color: {
-      dark: { type: "hex", value: "transparent" },
-      light: { type: "hex", value: "transparent" },
-    },
-    color: {
-      dark: { type: "hex", value: DEFAULT_TEXT_COLOR },
-      light: { type: "hex", value: "#ffffff" },
-    },
-    font_size: "body_m",
-    margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
-    padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
-    labels: labelsData,
-    size: {
-      width: { type: "fit" },
-      height: { type: "fit" },
-    },
-  });
+  const textProps = (id: number) =>
+    ({
+      type: "text",
+      name: "Button Text",
+      id: "button-text-1",
+      text_lid: `id${id}`,
+      font_weight: "medium",
+      horizontal_alignment: "center",
+      background_color: {
+        dark: { type: "hex", value: "transparent" },
+        light: { type: "hex", value: "transparent" },
+      },
+      color: {
+        dark: { type: "hex", value: DEFAULT_TEXT_COLOR },
+        light: { type: "hex", value: "#ffffff" },
+      },
+      font_size: "body_m",
+      margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+      padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+      size: {
+        width: { type: "fit" },
+        height: { type: "fit" },
+      },
+    }) satisfies Partial<TextNodeProps>;
 
-  const baseStackProps: Partial<StackProps> = {
+  const baseStackProps = {
     type: "stack",
     size: { width: { type: "fill" }, height: { type: "fill" } },
-    labels: labelsData,
     dimension: {
       type: "horizontal",
       alignment: "center",
@@ -109,7 +99,16 @@
       dark: { type: "hex", value: "#3471eb" },
       light: { type: "hex", value: "#3471eb" },
     },
-  };
+    background: {
+      type: "color",
+      value: {
+        dark: { type: "hex", value: "#3471eb" },
+        light: { type: "hex", value: "#3471eb" },
+      },
+    },
+    border: null,
+    shadow: null,
+  } satisfies Partial<StackProps>;
 </script>
 
 <!-- Restore purchases -->
@@ -118,14 +117,10 @@
   args={{
     type: "button",
     action: { type: "restore_purchases" },
-    labels: labelsData,
     stack: {
       ...baseStackProps,
       components: [textProps(1)],
-      purchaseState,
-    } as StackProps,
-    purchaseState: purchaseState,
-    onAction,
+    },
   }}
 />
 
@@ -135,8 +130,6 @@
   args={{
     type: "button",
     action: { type: "navigate_back" },
-    onAction,
-    labels: labelsData,
     stack: {
       ...baseStackProps,
       shape: {
@@ -153,8 +146,7 @@
         light: { type: "hex", value: "#2E7D32" },
       },
       components: [textProps(2)],
-    } as StackProps,
-    purchaseState: purchaseState,
+    },
   }}
 />
 
@@ -163,12 +155,10 @@
   name="Navigate To"
   args={{
     type: "button",
-    labels: labelsData,
     action: {
       type: "navigate_to",
       destination: "customer_center",
     },
-    onAction,
     stack: {
       ...baseStackProps,
       shape: {
@@ -185,8 +175,7 @@
         light: { type: "hex", value: "#D32F2F" },
       },
       components: [textProps(3)],
-    } as StackProps,
-    purchaseState: purchaseState,
+    },
   }}
 />
 
@@ -195,7 +184,6 @@
   name="URL Navigation"
   args={{
     type: "button",
-    labels: labelsData,
     action: {
       type: "navigate_to",
       destination: "url",
@@ -204,7 +192,6 @@
         method: "in_app_browser",
       },
     },
-    onAction,
     stack: {
       ...baseStackProps,
       background_color: {
@@ -212,7 +199,6 @@
         light: { type: "hex", value: "#4A90E2" },
       },
       components: [textProps(4)],
-    } as StackProps,
-    purchaseState: purchaseState,
+    },
   }}
 />

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

@@ -1,12 +1,4 @@
 import ButtonNode from "./ButtonNode.svelte";
-export declare const labelsData: {
-    en_US: {
-        id1: string;
-        id2: string;
-        id3: string;
-        id4: 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> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/components/button/ButtonNode.svelte

@@ -1,37 +1,26 @@
 <script lang="ts">
-  import { ButtonDeprecated } from "../../index";
-  import type { ButtonNodeProps } from "../../data/entities";
-  import Stack from "../stack/Stack.svelte";
   import { getButtonStyles } from "./button-utils";
+  import Stack from "../stack/Stack.svelte";
+  import { ButtonDeprecated } from "../../index";
+  import { getPaywallContext } from "../../stores/paywall";
+  import type { ButtonProps } from "../../types/components/button";
+
+  const { stack, action, ...restProps }: ButtonProps = $props();
+  const { onButtonAction } = getPaywallContext();
 
-  const {
-    stack,
-    action,
-    onAction,
-    labels,
-    purchaseState,
-    variableDictionary,
-    ...restProps
-  }: ButtonNodeProps = $props();
-  const onClick = () => {
-    onAction && onAction(action);
-  };
+  const onclick = () => onButtonAction(action);
 
   const buttonStyles = $derived(
     getButtonStyles({
       stack,
       action,
-      onAction,
-      labels,
-      purchaseState,
-      variableDictionary,
       ...restProps,
     }),
   );
 </script>
 
-<ButtonDeprecated onclick={onClick} style={buttonStyles} class={"rc-pw-button"}>
-  <Stack {...stack} {labels} {purchaseState} {variableDictionary} />
+<ButtonDeprecated {onclick} style={buttonStyles} class={"rc-pw-button"}>
+  <Stack {...stack} />
 </ButtonDeprecated>
 
 <style>

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

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

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

@@ -1,2 +1,2 @@
-import type { ButtonNodeProps } from "../../data/entities";
-export declare function getButtonStyles({ stack, zStackChildStyles }: ButtonNodeProps): string;
+import type { ButtonProps } from "../../types/components/button";
+export declare function getButtonStyles({ stack, zStackChildStyles }: ButtonProps): string;

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

@@ -1,26 +1,25 @@
 <script module lang="ts">
-  import { defineMeta } from "@storybook/addon-svelte-csf";
   import Footer from "./Footer.svelte";
-  import { DEFAULT_COLOR_MODE } from "../../utils/constants";
+  import { localizationDecorator } from "../../stories/localization-decorator";
+  import { defineMeta } from "@storybook/addon-svelte-csf";
 
-  const purchaseState = {
-    locale: "en_US",
-    defaultLocale: "en_US",
-    colorMode: DEFAULT_COLOR_MODE,
-  };
+  const defaultLocale = "en_US";
 
   const { Story } = defineMeta({
     title: "Components/Footer",
     component: Footer,
     tags: ["autodocs"],
-    argTypes: {},
+    decorators: [
+      localizationDecorator({
+        defaultLocale,
+        localizations: {
+          [defaultLocale]: {
+            GM2Sytqd5p: "Do it now before you regret it!",
+          },
+        },
+      }),
+    ],
   });
-
-  export const labelsData = {
-    en_US: {
-      GM2Sytqd5p: "Do it now before you regret it!",
-    },
-  };
 </script>
 
 <!-- Default  -->
@@ -36,9 +35,16 @@
           value: "#6c6c6cFF",
         },
       },
-      labels: labelsData,
-      purchaseState,
-      border: undefined,
+      background: {
+        type: "color",
+        value: {
+          light: {
+            type: "hex",
+            value: "#6c6c6cFF",
+          },
+        },
+      },
+      border: null,
       components: [
         {
           background_color: null,
@@ -72,7 +78,7 @@
               value: null,
             },
             width: {
-              type: "fill",
+              type: "fit",
               value: null,
             },
           },
@@ -81,9 +87,9 @@
         },
       ],
       dimension: {
-        alignment: "top",
-        distribution: "space_between",
         type: "vertical",
+        alignment: "center",
+        distribution: "center",
       },
       id: "yI_0xF4hlJ",
       margin: {
@@ -131,7 +137,5 @@
       type: "stack",
     },
     type: "footer",
-    purchaseState: purchaseState,
-    labels: labelsData,
   }}
 />

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

@@ -1,9 +1,4 @@
 import Footer from "./Footer.svelte";
-export declare const labelsData: {
-    en_US: {
-        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> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/components/footer/Footer.svelte

@@ -1,19 +1,12 @@
 <script lang="ts">
-  import type { FooterProps } from "../../data/entities";
   import Stack from "../stack/Stack.svelte";
+  import type { FooterProps } from "../../types/components/footer";
 
-  const {
-    stack,
-    id,
-    labels,
-    purchaseState,
-    variableDictionary,
-    onAction,
-  }: FooterProps = $props();
+  const { stack, id }: FooterProps = $props();
 </script>
 
 <div class="rc-pw-footer" {id}>
-  <Stack {...stack} {labels} {purchaseState} {variableDictionary} {onAction} />
+  <Stack {...stack} />
 </div>
 
 <style>

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

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

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

@@ -1,14 +1,6 @@
 <script module lang="ts">
-  import { defineMeta } from "@storybook/addon-svelte-csf";
   import Image from "./Image.svelte";
-  import type { PurchaseState } from "../../data/state";
-  import { DEFAULT_COLOR_MODE } from "../../utils/constants";
-
-  const purchaseState: PurchaseState = {
-    colorMode: DEFAULT_COLOR_MODE,
-    locale: "en_US",
-    defaultLocale: "en_US",
-  };
+  import { defineMeta } from "@storybook/addon-svelte-csf";
 
   const { Story } = defineMeta({
     title: "Components/Image",
@@ -16,9 +8,9 @@
     tags: ["autodocs"],
     argTypes: {
       id: { control: "text", description: "Unique identifier for the image" },
-      gradient_colors: {
+      color_overlay: {
         control: "object",
-        description: "Gradient colors for the overlay",
+        description: "Image overlay",
       },
       size: {
         control: "object",
@@ -45,7 +37,6 @@
 <Story
   name="Rectangle"
   args={{
-    purchaseState,
     id: "example-id",
     fit_mode: "fit",
     size: {
@@ -54,12 +45,15 @@
     },
     source: {
       light: {
+        width: 600,
+        height: 400,
         original: "https://placehold.co/600x400",
         heic: "https://placehold.co/600x400",
         heic_low_res: "https://placehold.co/600x400",
         webp: "https://placehold.co/600x400",
         webp_low_res: "https://placehold.co/600x400",
       },
+      dark: null,
     },
     mask_shape: { type: "rectangle" },
   }}
@@ -69,7 +63,6 @@
 <Story
   name="Rounded Rectangle"
   args={{
-    purchaseState,
     id: "example-id",
     fit_mode: "fit",
     size: {
@@ -78,12 +71,15 @@
     },
     source: {
       light: {
+        width: 600,
+        height: 400,
         original: "https://placehold.co/600x400",
         heic: "https://placehold.co/600x400",
         heic_low_res: "https://placehold.co/600x400",
         webp: "https://placehold.co/600x400",
         webp_low_res: "https://placehold.co/600x400",
       },
+      dark: null,
     },
     mask_shape: {
       type: "rectangle",
@@ -100,7 +96,6 @@
 <Story
   name="Circle"
   args={{
-    purchaseState,
     id: "example-id",
     fit_mode: "fit",
     size: {
@@ -109,12 +104,15 @@
     },
     source: {
       light: {
+        width: 600,
+        height: 400,
         original: "https://placehold.co/600x400",
         heic: "https://placehold.co/600x400",
         heic_low_res: "https://placehold.co/600x400",
         webp: "https://placehold.co/600x400",
         webp_low_res: "https://placehold.co/600x400",
       },
+      dark: null,
     },
     mask_shape: { type: "circle" },
   }}
@@ -123,7 +121,6 @@
 <Story
   name="Concave"
   args={{
-    purchaseState,
     id: "example-id",
     fit_mode: "fit",
     size: {
@@ -132,12 +129,15 @@
     },
     source: {
       light: {
+        width: 600,
+        height: 400,
         original: "https://placehold.co/600x400",
         heic: "https://placehold.co/600x400",
         heic_low_res: "https://placehold.co/600x400",
         webp: "https://placehold.co/600x400",
         webp_low_res: "https://placehold.co/600x400",
       },
+      dark: null,
     },
     mask_shape: { type: "concave" },
   }}
@@ -146,7 +146,6 @@
 <Story
   name="Convex"
   args={{
-    purchaseState,
     id: "example-id",
     fit_mode: "fit",
     size: {
@@ -155,12 +154,15 @@
     },
     source: {
       light: {
+        width: 600,
+        height: 400,
         original: "https://placehold.co/600x400",
         heic: "https://placehold.co/600x400",
         heic_low_res: "https://placehold.co/600x400",
         webp: "https://placehold.co/600x400",
         webp_low_res: "https://placehold.co/600x400",
       },
+      dark: null,
     },
     mask_shape: { type: "convex" },
   }}
@@ -169,7 +171,6 @@
 <Story
   name="Overlay Radial Gradient"
   args={{
-    purchaseState,
     id: "example-id",
     fit_mode: "fit",
     size: {
@@ -178,12 +179,15 @@
     },
     source: {
       light: {
+        width: 600,
+        height: 400,
         original: "https://placehold.co/600x400",
         heic: "https://placehold.co/600x400",
         heic_low_res: "https://placehold.co/600x400",
         webp: "https://placehold.co/600x400",
         webp_low_res: "https://placehold.co/600x400",
       },
+      dark: null,
     },
     color_overlay: {
       dark: {
@@ -210,7 +214,6 @@
 <Story
   name="Overlay Linear Gradient"
   args={{
-    purchaseState,
     id: "example-id",
     fit_mode: "fit",
     size: {
@@ -219,12 +222,15 @@
     },
     source: {
       light: {
+        width: 600,
+        height: 400,
         original: "https://placehold.co/600x400",
         heic: "https://placehold.co/600x400",
         heic_low_res: "https://placehold.co/600x400",
         webp: "https://placehold.co/600x400",
         webp_low_res: "https://placehold.co/600x400",
       },
+      dark: null,
     },
     color_overlay: {
       dark: {
@@ -252,7 +258,6 @@
 <Story
   name="Overlay Solid"
   args={{
-    purchaseState,
     id: "example-id",
     fit_mode: "fit",
     size: {
@@ -261,12 +266,15 @@
     },
     source: {
       light: {
+        width: 600,
+        height: 400,
         original: "https://placehold.co/600x400",
         heic: "https://placehold.co/600x400",
         heic_low_res: "https://placehold.co/600x400",
         webp: "https://placehold.co/600x400",
         webp_low_res: "https://placehold.co/600x400",
       },
+      dark: null,
     },
     color_overlay: {
       dark: {