@revenuecat/purchases-ui-js 2.0.1 → 2.0.3

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

@@ -1,109 +1,52 @@
 <script module lang="ts">
   import ButtonNode from "./ButtonNode.svelte";
-  import type { StackProps, TextNodeProps } from "../../data/entities";
-  import type { PurchaseState } from "../../data/state";
+  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 purchaseState: PurchaseState = {};
-
-  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",
-          },
-        },
-      }),
-    ],
-    args: { purchaseState },
-    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",
-      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 },
-      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: {
@@ -112,32 +55,54 @@
       },
     },
     border: null,
+    shape: { type: "pill" },
     shadow: null,
-    purchaseState,
-  } 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: {
@@ -151,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: {
@@ -180,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",
@@ -199,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,40 +1,12 @@
 <script lang="ts">
-  import { getButtonStyles } from "./button-utils";
   import Stack from "../stack/Stack.svelte";
-  import type { ButtonProps } from "../../types/components/button";
-  import { ButtonDeprecated } from "../../index";
   import { getPaywallContext } from "../../stores/paywall";
+  import type { ButtonProps } from "../../types/components/button";
 
-  const { stack, action, labels, purchaseState, ...restProps }: ButtonProps =
-    $props();
+  const { stack, action }: ButtonProps = $props();
   const { onButtonAction } = getPaywallContext();
 
   const onclick = () => onButtonAction(action);
-
-  const buttonStyles = $derived(
-    getButtonStyles({
-      stack,
-      action,
-      labels,
-      purchaseState,
-      ...restProps,
-    }),
-  );
 </script>
 
-<ButtonDeprecated {onclick} style={buttonStyles} class={"rc-pw-button"}>
-  <Stack {...stack} {labels} {purchaseState} />
-</ButtonDeprecated>
-
-<style>
-  .rc-pw-button {
-    display: flex;
-    margin: 0;
-    padding: 0;
-    text-align: initial;
-    border: none;
-    cursor: pointer;
-    background: transparent;
-    width: fit-content;
-  }
-</style>
+<Stack {...stack} {onclick} />

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

@@ -1,18 +1,18 @@
 <script module lang="ts">
   import Footer from "./Footer.svelte";
-  import type { PurchaseState } from "../../data/state";
+  import { componentDecorator } from "../../stories/component-decorator";
   import { localizationDecorator } from "../../stories/localization-decorator";
+  import { viewportDecorator } from "../../stories/viewport-decorator";
+  import type { FooterProps } from "../../types/components/footer";
   import { defineMeta } from "@storybook/addon-svelte-csf";
 
   const defaultLocale = "en_US";
-  const purchaseState: PurchaseState = {};
 
   const { Story } = defineMeta({
     title: "Components/Footer",
     component: Footer,
-    tags: ["autodocs"],
-    args: { purchaseState },
     decorators: [
+      componentDecorator(),
       localizationDecorator({
         defaultLocale,
         localizations: {
@@ -22,124 +22,130 @@
         },
       }),
     ],
-  });
-</script>
-
-<!-- Default  -->
-<Story
-  name="Footer component"
-  args={{
-    id: "kHhCWlo9au",
-    name: "",
-    stack: {
-      purchaseState,
-      background_color: {
-        light: {
-          type: "hex",
-          value: "#6c6c6cFF",
-        },
-      },
-      background: {
-        type: "color",
-        value: {
+    args: {
+      type: "footer",
+      id: "footer",
+      name: "Footer",
+      stack: {
+        background_color: {
           light: {
             type: "hex",
             value: "#6c6c6cFF",
           },
         },
-      },
-      border: null,
-      components: [
-        {
-          background_color: null,
-          color: {
+        background: {
+          type: "color",
+          value: {
             light: {
               type: "hex",
-              value: "#ffffffFF",
+              value: "#6c6c6cFF",
             },
           },
-          font_name: null,
-          font_size: "body_m",
-          font_weight: "extra_bold",
-          horizontal_alignment: "center",
-          id: "pFC3qrx4-c",
-          margin: {
-            bottom: 0,
-            leading: 0,
-            top: 0,
-            trailing: 0,
-          },
-          name: "",
-          padding: {
-            bottom: 10,
-            leading: 10,
-            top: 10,
-            trailing: 10,
-          },
-          size: {
-            height: {
-              type: "fit",
-              value: null,
+        },
+        border: null,
+        components: [
+          {
+            background_color: null,
+            color: {
+              light: {
+                type: "hex",
+                value: "#ffffffFF",
+              },
+            },
+            font_name: null,
+            font_size: "body_m",
+            font_weight: "extra_bold",
+            horizontal_alignment: "center",
+            id: "pFC3qrx4-c",
+            margin: {
+              bottom: 0,
+              leading: 0,
+              top: 0,
+              trailing: 0,
             },
-            width: {
-              type: "fit",
-              value: null,
+            name: "",
+            padding: {
+              bottom: 10,
+              leading: 10,
+              top: 10,
+              trailing: 10,
             },
+            size: {
+              height: {
+                type: "fit",
+                value: null,
+              },
+              width: {
+                type: "fit",
+                value: null,
+              },
+            },
+            text_lid: "GM2Sytqd5p",
+            type: "text",
           },
-          text_lid: "GM2Sytqd5p",
-          type: "text",
+        ],
+        dimension: {
+          type: "vertical",
+          alignment: "center",
+          distribution: "center",
         },
-      ],
-      dimension: {
-        type: "vertical",
-        alignment: "center",
-        distribution: "center",
-      },
-      id: "yI_0xF4hlJ",
-      margin: {
-        bottom: 0,
-        leading: 0,
-        top: 0,
-        trailing: 0,
-      },
-      name: "Footer",
-      padding: {
-        bottom: 0,
-        leading: 0,
-        top: 0,
-        trailing: 0,
-      },
-      shadow: {
-        color: {
-          light: {
-            type: "hex",
-            value: "#00000033",
-          },
+        id: "yI_0xF4hlJ",
+        margin: {
+          bottom: 0,
+          leading: 0,
+          top: 0,
+          trailing: 0,
         },
-        radius: 16,
-        x: 0,
-        y: -4,
-      },
-      shape: {
-        corners: {
-          bottom_leading: 0,
-          bottom_trailing: 0,
-          top_leading: 8,
-          top_trailing: 8,
+        name: "Footer",
+        padding: {
+          bottom: 0,
+          leading: 0,
+          top: 0,
+          trailing: 0,
         },
-        type: "rectangle",
-      },
-      size: {
-        height: {
-          type: "fit",
+        shadow: {
+          color: {
+            light: {
+              type: "hex",
+              value: "#00FF007F",
+            },
+          },
+          radius: 16,
+          x: 0,
+          y: -8,
+        },
+        shape: {
+          corners: {
+            bottom_leading: 0,
+            bottom_trailing: 0,
+            top_leading: 8,
+            top_trailing: 8,
+          },
+          type: "rectangle",
         },
-        width: {
-          type: "fill",
+        size: {
+          height: {
+            type: "fit",
+          },
+          width: {
+            type: "fill",
+          },
         },
+        spacing: 0,
+        type: "stack",
       },
-      spacing: 0,
-      type: "stack",
-    },
-    type: "footer",
-  }}
+    } satisfies FooterProps,
+  });
+</script>
+
+<Story name="Footer component" />
+
+<Story
+  name="Footer - no overflow"
+  decorators={[viewportDecorator(300, 600, 3)]}
+/>
+
+<Story
+  name="Footer - overflow"
+  decorators={[viewportDecorator(300, 600, 50)]}
 />

package/dist/components/footer/Footer.svelte

@@ -1,19 +1,23 @@
 <script lang="ts">
-  import type { FooterProps } from "../../types/components/footer";
   import Stack from "../stack/Stack.svelte";
+  import type { FooterProps } from "../../types/components/footer";
 
-  const { stack, id, labels, purchaseState, onAction }: FooterProps = $props();
+  const { stack }: FooterProps = $props();
 </script>
 
-<div class="rc-pw-footer" {id}>
-  <Stack {...stack} {labels} {purchaseState} {onAction} />
+<div>
+  <Stack {...stack} />
 </div>
 
 <style>
-  .rc-pw-footer {
+  div {
     position: sticky;
     bottom: 0;
-    transform: translateY(50%);
     width: 100%;
+    z-index: 1000;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
   }
 </style>

package/dist/components/icon/Icon.stories.svelte

@@ -0,0 +1,100 @@
+<script module lang="ts">
+  import { componentDecorator } from "../../stories/component-decorator";
+  import type { IconBackground, IconProps } from "../../types/components/icon";
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import Icon from "./Icon.svelte";
+
+  const icon_background = {
+    color: {
+      light: { type: "hex", value: "#345e0aFF" },
+    },
+    shape: {
+      type: "rectangle",
+      corners: {
+        top_leading: 0,
+        top_trailing: 8,
+        bottom_trailing: 16,
+        bottom_leading: 32,
+      },
+    },
+    border: {
+      width: 4,
+      color: {
+        light: { type: "hex", value: "#8fb43fff" },
+      },
+    },
+    shadow: {
+      x: 4,
+      y: 4,
+      radius: 8,
+      color: {
+        light: { type: "hex", value: "#00000040" },
+      },
+    },
+  } satisfies IconBackground;
+
+  const { Story } = defineMeta({
+    title: "Components/Icon",
+    component: Icon,
+    decorators: [componentDecorator()],
+    args: {
+      type: "icon",
+      id: "icon",
+      name: "Icon",
+      icon_name: "filled-star",
+      base_url: "https://icons.pawwalls.com/icons",
+      formats: {
+        heic: "filled-star.heic",
+        png: "filled-star.png",
+        svg: "filled-star.svg",
+        webp: "filled-star.webp",
+      },
+      size: {
+        width: { type: "fixed", value: 64 },
+        height: { type: "fixed", value: 64 },
+      },
+      margin: { top: 16, trailing: 16, bottom: 16, leading: 16 },
+      padding: { top: 8, trailing: 8, bottom: 8, leading: 8 },
+      color: {
+        light: { type: "hex", value: "#92c91bFF" },
+      },
+      icon_background,
+    } satisfies IconProps,
+  });
+</script>
+
+<Story name="Square" />
+
+<Story
+  name="Rectangle"
+  args={{
+    size: {
+      width: { type: "fixed", value: 128 },
+      height: { type: "fixed", value: 64 },
+    },
+  }}
+/>
+
+<Story
+  name="Circle"
+  args={{
+    icon_background: {
+      ...icon_background,
+      shape: { type: "circle" },
+    },
+  }}
+/>
+
+<Story
+  name="Pill"
+  args={{
+    size: {
+      width: { type: "fixed", value: 128 },
+      height: { type: "fixed", value: 64 },
+    },
+    icon_background: {
+      ...icon_background,
+      shape: { type: "circle" },
+    },
+  }}
+/>