@revenuecat/purchases-ui-js 0.0.8

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 RevenueCat
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,11 @@
+# Purchases UI Web
+
+Web components for Paywalls. Powered by RevenueCat
+
+## Building
+
+To build your library:
+
+```bash
+npm run package
+```

package/dist/components/button/Button.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  interface ButtonProps {
+    onclick?: () => void;
+    children?: Snippet;
+    style?: string;
+    class?: string;
+  }
+
+  const { onclick, children, style, class: clz }: ButtonProps = $props();
+
+  const handleClick = () => {
+    onclick?.();
+  };
+</script>
+
+<button onclick={handleClick} class={clz} disabled={!onclick} {style}>
+  {@render children?.()}
+</button>
+
+<style>
+  button {
+    border: none;
+    cursor: pointer;
+    background-color: transparent;
+    padding: 0;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+</style>

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

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

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

@@ -0,0 +1,204 @@
+<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, TextProps } from "../../data/entities";
+
+  const onAction = (action: SupportedActions) => {
+    alert(action.type);
+  };
+
+  const { Story } = defineMeta({
+    title: "Components/Button",
+    component: ButtonNode,
+    tags: ["autodocs"],
+    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"
+              }
+            }`,
+          },
+        },
+      },
+      colorMode: colorModeStoryMeta,
+      stack: {
+        control: { type: "object" },
+        description: "Stack configuration for button content",
+        table: {
+          type: {
+            summary: "object",
+            detail: "StackProps",
+          },
+        },
+      },
+    },
+  });
+
+  export const labelsData = {
+    en_US: {
+      id1: "Restore purchases",
+      id2: "Navigate back",
+      id3: "Navigate to",
+      id4: "URL navigation",
+    },
+  };
+
+  const textProps = (id: number): TextProps => ({
+    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: "#000000" },
+      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,
+    colorMode: "light",
+    size: {
+      width: { type: "fit" },
+      height: { type: "fit" },
+    },
+  });
+
+  const baseStackProps = {
+    type: "stack",
+    size: { width: { type: "fill" }, height: { type: "fill" } },
+    labels: labelsData,
+    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" },
+    },
+  };
+</script>
+
+<!-- Restore purchases -->
+<Story
+  name="Restore purchases"
+  args={{
+    type: "button",
+    action: { type: "restore_purchases" },
+    labels: labelsData,
+    stack: {
+      ...baseStackProps,
+      components: [textProps(1)],
+    },
+    onAction,
+  }}
+/>
+
+<!-- Navigate Back story -->
+<Story
+  name="Navigate Back"
+  args={{
+    type: "button",
+    action: { type: "navigate_back" },
+    onAction,
+    labels: labelsData,
+    stack: {
+      ...baseStackProps,
+      shape: {
+        type: "rectangle",
+        corners: {
+          top_leading: 16,
+          top_trailing: 16,
+          bottom_leading: 16,
+          bottom_trailing: 16,
+        },
+      },
+      background_color: {
+        dark: { type: "hex", value: "#2E7D32" },
+        light: { type: "hex", value: "#2E7D32" },
+      },
+      components: [textProps(2)],
+    },
+  }}
+/>
+
+<!-- Navigate To story -->
+<Story
+  name="Navigate To"
+  args={{
+    type: "button",
+    labels: labelsData,
+    action: {
+      type: "navigate_to",
+      destination: "customer_center",
+    },
+    onAction,
+    stack: {
+      ...baseStackProps,
+      shape: {
+        type: "rectangle",
+        corners: {
+          top_leading: 8,
+          top_trailing: 8,
+          bottom_leading: 8,
+          bottom_trailing: 8,
+        },
+      },
+      background_color: {
+        dark: { type: "hex", value: "#D32F2F" },
+        light: { type: "hex", value: "#D32F2F" },
+      },
+      components: [textProps(3)],
+    },
+  }}
+/>
+
+<!-- URL Navigation story -->
+<Story
+  name="URL Navigation"
+  args={{
+    type: "button",
+    labels: labelsData,
+    action: {
+      type: "navigate_to",
+      destination: "url",
+      url: {
+        url_lid: "terms_url",
+        method: "in_app_browser",
+      },
+    },
+    onAction,
+    stack: {
+      ...baseStackProps,
+      background_color: {
+        dark: { type: "hex", value: "#4A90E2" },
+        light: { type: "hex", value: "#4A90E2" },
+      },
+      components: [textProps(4)],
+    },
+  }}
+/>

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

@@ -0,0 +1,27 @@
+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;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ButtonNode: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ButtonNode = InstanceType<typeof ButtonNode>;
+export default ButtonNode;

package/dist/components/button/ButtonNode.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import Button from "./Button.svelte";
+  import type { ButtonNodeProps } from "../../data/entities";
+  import Stack from "../stack/Stack.svelte";
+
+  const { stack, action, labels, onAction, purchaseState }: ButtonNodeProps =
+    $props();
+  const onClick = () => {
+    onAction && onAction(action);
+  };
+</script>
+
+<Button onclick={onClick}>
+  <Stack {...stack} {labels} {purchaseState} />
+</Button>

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

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

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

@@ -0,0 +1,237 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import Footer from "./Footer.svelte";
+  import { colorModeStoryMeta } from "../../stories/meta-templates";
+
+  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",
+          },
+        },
+      },
+    },
+  });
+
+  export const labelsData = {
+    en_US: {
+      "BcX-6YwhoV": "Monthly",
+      QZ4ZmYsqjN: "$1.99",
+    },
+  };
+</script>
+
+<!-- Default  -->
+<Story
+  name="Default Package"
+  args={{
+    id: "6rQSD5e2Kz",
+    is_selected_by_default: false,
+    name: "Package - Monthly",
+    package_id: "$rc_annual",
+    stack: {
+      background_color: {
+        light: {
+          type: "hex",
+          value: "#09090b",
+        },
+      },
+      labels: labelsData,
+      border: {
+        color: {
+          light: {
+            type: "hex",
+            value: "#3b393f",
+          },
+        },
+        width: 1,
+      },
+      components: [
+        {
+          background_color: null,
+          color: {
+            light: {
+              type: "hex",
+              value: "#ffffff",
+            },
+          },
+          labels: labelsData,
+          components: [],
+          font_name: null,
+          font_size: "heading_s",
+          font_weight: "bold",
+          horizontal_alignment: "center",
+          id: "aSK4Jf1zd4",
+          margin: {
+            bottom: 0,
+            leading: 0,
+            top: 0,
+            trailing: 0,
+          },
+          name: "Text",
+          padding: {
+            bottom: 0,
+            leading: 0,
+            top: 0,
+            trailing: 0,
+          },
+          size: {
+            height: {
+              type: "fit",
+              value: null,
+            },
+            width: {
+              type: "fit",
+              value: null,
+            },
+          },
+          text_lid: "BcX-6YwhoV",
+          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",
+        distribution: "space_between",
+        type: "horizontal",
+      },
+      id: "u0KZLUZTQT",
+      margin: {
+        bottom: 0,
+        leading: 16,
+        top: 16,
+        trailing: 16,
+      },
+      name: "Stack",
+      padding: {
+        bottom: 16,
+        leading: 16,
+        top: 16,
+        trailing: 16,
+      },
+      shape: {
+        corners: {
+          bottom_leading: 0,
+          bottom_trailing: 0,
+          top_leading: 8,
+          top_trailing: 8,
+        },
+        type: "rectangle",
+      },
+      size: {
+        height: {
+          type: "fit",
+          value: null,
+        },
+        width: {
+          type: "fixed",
+          value: 500,
+        },
+      },
+      spacing: 8,
+      type: "stack",
+    },
+    labels: labelsData,
+    type: "package",
+  }}
+/>

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

@@ -0,0 +1,25 @@
+import Footer from "./Footer.svelte";
+export declare const labelsData: {
+    en_US: {
+        "BcX-6YwhoV": string;
+        QZ4ZmYsqjN: 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;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Footer: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Footer = InstanceType<typeof Footer>;
+export default Footer;

package/dist/components/footer/Footer.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import type { FooterProps } from "../../data/entities";
+  import Stack from "../stack/Stack.svelte";
+
+  const props: FooterProps = $props();
+  const { stack, labels, id } = $derived(props);
+</script>
+
+<div class="footer" {id}>
+  <Stack {...stack} {labels} />
+</div>

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

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