@revenuecat/purchases-ui-js 2.0.2 → 2.0.4

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

@@ -1,104 +1,52 @@
 <script module lang="ts">
   import ButtonNode from "./ButtonNode.svelte";
-  import type { StackProps, TextNodeProps } from "../../data/entities";
+  import type { TextNodeProps } from "../../types/components/text";
+  import { componentDecorator } from "../../stories/component-decorator";
   import { localizationDecorator } from "../../stories/localization-decorator";
+  import type { ButtonProps } from "../../types/components/button";
+  import type { StackProps } from "../../types/components/stack";
   import { DEFAULT_TEXT_COLOR } from "../../utils/constants";
   import { defineMeta } from "@storybook/addon-svelte-csf";
 
-  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" },
-        description: "Action configuration for the button",
-        table: {
-          type: {
-            summary: "object",
-            detail: `{
-              type: "restore_purchases" | "navigate_back" | "navigate_to",
-              destination?: "customer_center" | "privacy_policy" | "terms" | "url",
-              url?: {
-                url_lid: string,
-                method: "in_app_browser" | "external_browser" | "deep_link"
-              }
-            }`,
-          },
-        },
-      },
-      stack: {
-        control: { type: "object" },
-        description: "Stack configuration for button content",
-        table: {
-          type: {
-            summary: "object",
-            detail: "StackProps",
-          },
-        },
-      },
+  const textProps = (id: number): TextNodeProps => ({
+    type: "text",
+    id: `button-text-${id}`,
+    name: `button-text-${id}`,
+    text_lid: `id${id}`,
+    font_size: "body_m",
+    font_weight: "medium",
+    horizontal_alignment: "center",
+    size: {
+      width: { type: "fit" },
+      height: { type: "fit" },
+    },
+    margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+    padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+    color: {
+      dark: { type: "hex", value: DEFAULT_TEXT_COLOR },
+      light: { type: "hex", value: "#ffffff" },
+    },
+    background_color: {
+      dark: { type: "hex", value: "transparent" },
+      light: { type: "hex", value: "transparent" },
     },
   });
 
-  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 = {
+  const stackProps = (id: number): StackProps => ({
     type: "stack",
+    id: `stack-${id}`,
+    name: `Stack ${id}`,
+    components: [textProps(id)],
     size: { width: { type: "fill" }, height: { type: "fill" } },
     dimension: {
       type: "horizontal",
       alignment: "center",
       distribution: "center",
     },
-    components: [],
     spacing: 16,
-    padding: { top: 16, trailing: 16, bottom: 16, leading: 16 },
     margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
-    shape: { type: "pill" },
-    id: "vertical-stack",
-    name: "Vertical Stack",
-    background_color: {
-      dark: { type: "hex", value: "#3471eb" },
-      light: { type: "hex", value: "#3471eb" },
-    },
+    padding: { top: 16, trailing: 16, bottom: 16, leading: 16 },
+    background_color: null,
     background: {
       type: "color",
       value: {
@@ -107,31 +55,54 @@
       },
     },
     border: null,
+    shape: { type: "pill" },
     shadow: null,
-  } satisfies Partial<StackProps>;
+    badge: null,
+  });
+
+  const defaultLocale = "en_US";
+
+  const { Story } = defineMeta({
+    title: "Components/Button",
+    component: ButtonNode,
+    decorators: [
+      componentDecorator(),
+      localizationDecorator({
+        defaultLocale,
+        localizations: {
+          [defaultLocale]: {
+            id1: "Restore purchases",
+            id2: "Navigate back",
+            id3: "Navigate to",
+            id4: "URL navigation",
+          },
+        },
+      }),
+    ],
+    args: {
+      type: "button",
+      id: "button",
+      name: "Button",
+      action: { type: "navigate_back" },
+      stack: stackProps(1),
+    } satisfies ButtonProps,
+  });
 </script>
 
-<!-- Restore purchases -->
 <Story
   name="Restore purchases"
   args={{
-    type: "button",
     action: { type: "restore_purchases" },
-    stack: {
-      ...baseStackProps,
-      components: [textProps(1)],
-    },
+    stack: stackProps(1),
   }}
 />
 
-<!-- Navigate Back story -->
 <Story
   name="Navigate Back"
   args={{
-    type: "button",
     action: { type: "navigate_back" },
     stack: {
-      ...baseStackProps,
+      ...stackProps(2),
       shape: {
         type: "rectangle",
         corners: {
@@ -145,22 +116,19 @@
         dark: { type: "hex", value: "#2E7D32" },
         light: { type: "hex", value: "#2E7D32" },
       },
-      components: [textProps(2)],
     },
   }}
 />
 
-<!-- Navigate To story -->
 <Story
   name="Navigate To"
   args={{
-    type: "button",
     action: {
       type: "navigate_to",
       destination: "customer_center",
     },
     stack: {
-      ...baseStackProps,
+      ...stackProps(3),
       shape: {
         type: "rectangle",
         corners: {
@@ -174,16 +142,13 @@
         dark: { type: "hex", value: "#D32F2F" },
         light: { type: "hex", value: "#D32F2F" },
       },
-      components: [textProps(3)],
     },
   }}
 />
 
-<!-- URL Navigation story -->
 <Story
   name="URL Navigation"
   args={{
-    type: "button",
     action: {
       type: "navigate_to",
       destination: "url",
@@ -193,12 +158,11 @@
       },
     },
     stack: {
-      ...baseStackProps,
+      ...stackProps(4),
       background_color: {
         dark: { type: "hex", value: "#4A90E2" },
         light: { type: "hex", value: "#4A90E2" },
       },
-      components: [textProps(4)],
     },
   }}
 />

package/dist/components/button/ButtonNode.svelte

@@ -1,37 +1,29 @@
 <script lang="ts">
-  import { getButtonStyles } from "./button-utils";
   import Stack from "../stack/Stack.svelte";
-  import { ButtonDeprecated } from "../../index";
   import { getPaywallContext } from "../../stores/paywall";
+  import { getSelectedStateContext } from "../../stores/selected";
   import type { ButtonProps } from "../../types/components/button";
+  import { getActiveStateProps } from "../../utils/style-utils";
+
+  const props: ButtonProps = $props();
+
+  const selectedState = getSelectedStateContext();
+  const { action } = $derived.by(() => {
+    return {
+      ...props,
+      ...getActiveStateProps($selectedState, props.overrides),
+    };
+  });
 
-  const { stack, action, ...restProps }: ButtonProps = $props();
   const { onButtonAction } = getPaywallContext();
 
-  const onclick = () => onButtonAction(action);
+  const onclick = () => onButtonAction(props.action);
 
-  const buttonStyles = $derived(
-    getButtonStyles({
-      stack,
-      action,
-      ...restProps,
-    }),
+  const isWebPurchaseLink = $derived(
+    action.type === "navigate_to" && action.destination === "web_paywall_link",
   );
 </script>
 
-<ButtonDeprecated {onclick} style={buttonStyles} class={"rc-pw-button"}>
-  <Stack {...stack} />
-</ButtonDeprecated>
-
-<style>
-  .rc-pw-button {
-    display: flex;
-    margin: 0;
-    padding: 0;
-    text-align: initial;
-    border: none;
-    cursor: pointer;
-    background: transparent;
-    width: fit-content;
-  }
-</style>
+{#if !isWebPurchaseLink}
+  <Stack {...props.stack} {onclick} />
+{/if}