@revenuecat/purchases-ui-js 0.0.8

package/dist/components/paywall/Paywall.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import Paywall from "./Paywall.svelte";
+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 Paywall: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Paywall = InstanceType<typeof Paywall>;
+export default Paywall;

package/dist/components/paywall/Paywall.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+  import type {
+    Extra,
+    PaywallData,
+    SupportedActions,
+  } from "../../data/entities";
+
+  import Node from "./Node.svelte";
+  import type { PurchaseState } from "../../data/state";
+
+  interface Props {
+    data: PaywallData;
+    onPurchaseClicked: (selectedPackageId: string) => void;
+  }
+
+  const findSelectedPackage = (data: PaywallData) => {
+    return undefined;
+  };
+  const { data, onPurchaseClicked }: Props = $props();
+
+  let purchaseState: PurchaseState = $state({
+    selectedPackageId: findSelectedPackage(data),
+  });
+
+  const onSelectPackageAction = (action: SupportedActions, data?: Extra) => {
+    purchaseState.selectedPackageId = data?.packageId;
+  };
+
+  const onPurchaseAction = (action: SupportedActions, data?: Extra) => {
+    if (purchaseState.selectedPackageId === undefined) {
+      return;
+    }
+    onPurchaseClicked(purchaseState.selectedPackageId);
+  };
+
+  const onAction = (action: SupportedActions, data?: Extra) => {
+    switch (action.type) {
+      case "select_package":
+        onSelectPackageAction(action, data);
+        break;
+      case "purchase":
+        onPurchaseAction(action, data);
+        break;
+      default:
+        alert(action.type);
+        break;
+    }
+  };
+</script>
+
+<div>
+  <Node
+    {onAction}
+    nodeData={data.components_config.base.stack}
+    labels={data.components_localizations}
+    {purchaseState}
+  />
+</div>
+
+<style>
+  /* 1. Use a more-intuitive box-sizing model */
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+  /* 2. Remove default margin */
+  * {
+    margin: 0;
+  }
+  body {
+    /* 3. Add accessible line-height */
+    line-height: 1.5;
+    /* 4. Improve text rendering */
+    -webkit-font-smoothing: antialiased;
+  }
+  /* 5. Improve media defaults */
+  img,
+  picture,
+  video,
+  canvas,
+  svg {
+    display: block;
+    max-width: 100%;
+  }
+  /* 6. Inherit fonts for form controls */
+  input,
+  button,
+  textarea,
+  select {
+    font: inherit;
+  }
+  /* 7. Avoid text overflows */
+  p,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    overflow-wrap: break-word;
+  }
+  /* 8. Improve line wrapping */
+  p {
+    text-wrap: pretty;
+  }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    text-wrap: balance;
+  }
+  /*
+    9. Create a root stacking context
+  */
+  #root,
+  #__next {
+    isolation: isolate;
+  }
+</style>

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

@@ -0,0 +1,6 @@
+import type { PaywallData } from "../../data/entities";
+declare const Paywall: import("svelte").Component<{
+    data: PaywallData;
+    onPurchaseClicked: (selectedPackageId: string) => void;
+}, {}, "">;
+export default Paywall;

package/dist/components/paywall/global-styles.css

@@ -0,0 +1,9 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+body {
+  margin: 0;
+  padding: 0;
+}

package/dist/components/purchase-button/PurchaseButton.stories.svelte

@@ -0,0 +1,133 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import PurchaseButton from "./PurchaseButton.svelte";
+  import { colorModeStoryMeta } from "../../stories/meta-templates";
+
+  const { Story } = defineMeta({
+    title: "Components/PurchaseButton",
+    component: PurchaseButton,
+    tags: ["autodocs"],
+    argTypes: {
+      colorMode: colorModeStoryMeta,
+      stack: {
+        control: { type: "object" },
+        description: "Stack configuration for button content",
+        table: {
+          type: {
+            summary: "object",
+            detail: "StackProps",
+          },
+        },
+      },
+    },
+  });
+
+  export const labelsData = {
+    en_US: {
+      "6gpcQ4q6T8": "Continue",
+    },
+  };
+</script>
+
+<!-- Default button -->
+<Story
+  name="Default button"
+  args={{
+    id: "mjaE9fOv5z",
+    name: "Purchase_button",
+    stack: {
+      background_color: {
+        light: {
+          type: "hex",
+          value: "#a229f3",
+        },
+      },
+      border: null,
+      components: [
+        {
+          background_color: null,
+          color: {
+            light: {
+              type: "hex",
+              value: "#ffffff",
+            },
+          },
+          labels: labelsData,
+          components: [],
+          font_name: null,
+          font_size: "heading_m",
+          font_weight: "extra_bold",
+          horizontal_alignment: "center",
+          id: "MI_dDBpD4z",
+          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: "fill",
+              value: null,
+            },
+          },
+          text_lid: "6gpcQ4q6T8",
+          type: "text",
+        },
+      ],
+      dimension: {
+        alignment: "leading",
+        distribution: "space_between",
+        type: "vertical",
+      },
+      id: "pbvAUBvilP",
+      margin: {
+        bottom: 16,
+        leading: 16,
+        top: 16,
+        trailing: 16,
+      },
+      name: "Stack",
+      padding: {
+        bottom: 16,
+        leading: 16,
+        top: 16,
+        trailing: 16,
+      },
+      shape: {
+        corners: {
+          bottom_leading: 8,
+          bottom_trailing: 8,
+          top_leading: 8,
+          top_trailing: 8,
+        },
+        type: "rectangle",
+      },
+      size: {
+        height: {
+          type: "fit",
+          value: null,
+        },
+        width: {
+          type: "fill",
+          value: null,
+        },
+      },
+      spacing: 8,
+      type: "stack",
+    },
+    labels: labelsData,
+    type: "purchase_button",
+  }}
+/>

package/dist/components/purchase-button/PurchaseButton.stories.svelte.d.ts

@@ -0,0 +1,24 @@
+import PurchaseButton from "./PurchaseButton.svelte";
+export declare const labelsData: {
+    en_US: {
+        "6gpcQ4q6T8": 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 PurchaseButton: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type PurchaseButton = InstanceType<typeof PurchaseButton>;
+export default PurchaseButton;

package/dist/components/purchase-button/PurchaseButton.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import type { PurchaseButtonProps } from "../../data/entities";
+  import Stack from "../stack/Stack.svelte";
+  import { Button } from "../../index";
+
+  const { stack, labels, onAction, purchaseState }: PurchaseButtonProps =
+    $props();
+  const handleClick = () => {
+    onAction && onAction({ type: "purchase" });
+  };
+</script>
+
+<Button onclick={handleClick} class="purchase-button">
+  <Stack {...stack} {labels} {purchaseState} />
+</Button>
+
+<style>
+  .purchase-button {
+    border: none;
+    cursor: pointer;
+    background-color: transparent;
+    padding: 0;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+</style>

package/dist/components/purchase-button/PurchaseButton.svelte.d.ts

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

package/dist/components/stack/Stack.stories.svelte

@@ -0,0 +1,306 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import Stack from "./Stack.svelte";
+  import {
+    borderStoryMeta,
+    colorModeStoryMeta,
+    getColorStoryMeta,
+    getSpacingStoryMeta,
+    shadowStoryMeta,
+    sizeStoryMeta,
+    stackDimensionStoryMeta,
+  } from "../../stories/meta-templates";
+  import { labelsData as labels } from "../../stories/fixtures";
+
+  const { Story } = defineMeta({
+    title: "Components/Stack",
+    component: Stack,
+    tags: ["autodocs"],
+    argTypes: {
+      dimension: stackDimensionStoryMeta,
+      spacing: {
+        control: { type: "number" },
+        description: "Space between stack items in pixels",
+      },
+      colorMode: colorModeStoryMeta,
+      shadow: shadowStoryMeta,
+      background_color: getColorStoryMeta("Background color object"),
+      padding: getSpacingStoryMeta("Padding values in pixels"),
+      margin: getSpacingStoryMeta("Margin values in pixels"),
+      border: borderStoryMeta,
+      size: sizeStoryMeta,
+    },
+  });
+
+  const components = [
+    {
+      type: "text",
+      size: {
+        width: { type: "fit" },
+        height: { type: "fit" },
+      },
+      horizontal_alignment: "center",
+      name: "Item 1",
+      components: [],
+      id: "1",
+      text_lid: "id1",
+      background_color: {
+        dark: { type: "alias", value: "transparent" },
+        light: { type: "alias", value: "transparent" },
+      },
+    },
+    {
+      type: "text",
+      size: {
+        width: { type: "fit" },
+        height: { type: "fit" },
+      },
+      horizontal_alignment: "center",
+      name: "Item 2",
+      components: [],
+      id: "2",
+      text_lid: "id2",
+      background_color: {
+        dark: { type: "alias", value: "transparent" },
+        light: { type: "alias", value: "transparent" },
+      },
+    },
+    {
+      type: "text",
+      size: {
+        width: { type: "fit" },
+        height: { type: "fit" },
+      },
+      horizontal_alignment: "center",
+      name: "Item 3",
+      components: [],
+      id: "3",
+      text_lid: "id3",
+      background_color: {
+        dark: { type: "alias", value: "transparent" },
+        light: { type: "alias", value: "transparent" },
+      },
+    },
+  ];
+</script>
+
+<!-- Vertical Stack -->
+<Story
+  name="Vertical Stack"
+  args={{
+    type: "stack",
+
+    size: { width: { type: "fill" }, height: { type: "fill" } },
+    labels,
+    dimension: {
+      type: "vertical",
+      alignment: "center",
+      distribution: "start",
+    },
+    components,
+    spacing: 16,
+    padding: { top: 16, trailing: 16, bottom: 16, leading: 16 },
+    margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+    id: "vertical-stack",
+    name: "Vertical Stack",
+  }}
+/>
+
+<!-- Horizontal Stack -->
+<Story
+  name="Horizontal Stack"
+  args={{
+    type: "stack",
+    dimension: {
+      type: "horizontal",
+      alignment: "center",
+      distribution: "space_between",
+    },
+    labels,
+    components,
+    spacing: 16,
+    padding: { top: 16, trailing: 16, bottom: 16, leading: 16 },
+    margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+    id: "horizontal-stack",
+    name: "Horizontal Stack",
+    size: { width: { type: "fill" }, height: { type: "fill" } },
+  }}
+/>
+
+<!-- Space Around -->
+<Story
+  name="Space Around"
+  args={{
+    type: "stack",
+    dimension: {
+      type: "horizontal",
+      alignment: "center",
+      distribution: "space_around",
+    },
+    labels,
+    components,
+    spacing: 16,
+    padding: { top: 16, trailing: 16, bottom: 16, leading: 16 },
+    margin: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+    id: "space-between",
+    name: "Space Between",
+    size: { width: { type: "fill" }, height: { type: "fill" } },
+  }}
+/>
+
+<!-- Background Color -->
+<Story
+  name="Background Colors"
+  args={{
+    type: "stack",
+    dimension: {
+      type: "vertical",
+      alignment: "center",
+      distribution: "start",
+    },
+    components,
+    labels,
+    background_color: {
+      light: { type: "hex", value: "#C8E6FF" },
+      dark: { type: "hex", value: "#C8E6FF" },
+    },
+    spacing: 16,
+    padding: { top: 16, trailing: 16, bottom: 16, leading: 16 },
+    size: { width: { type: "fill" }, height: { type: "fill" } },
+  }}
+/>
+
+<!-- Border Styles -->
+<Story
+  name="Border Styles"
+  args={{
+    type: "stack",
+    dimension: {
+      type: "vertical",
+      alignment: "center",
+      distribution: "start",
+    },
+    components,
+    labels,
+    border: {
+      width: 2,
+      color: {
+        light: { type: "hex", value: "#646464" },
+        dark: { type: "hex", value: "#646464" },
+      },
+      style: "solid",
+    },
+    shape: {
+      type: "rectangle",
+      corners: {
+        top_leading: 8,
+        top_trailing: 8,
+        bottom_leading: 8,
+        bottom_trailing: 8,
+      },
+    },
+    spacing: 16,
+    padding: { top: 16, trailing: 16, bottom: 16, leading: 16 },
+    size: { width: { type: "fill" }, height: { type: "fill" } },
+  }}
+/>
+
+<!-- Shapes -->
+<Story
+  name="Rounded Corners"
+  args={{
+    type: "stack",
+    dimension: {
+      type: "vertical",
+      alignment: "center",
+      distribution: "start",
+    },
+    components,
+    labels,
+    shape: {
+      type: "rectangle",
+      corners: {
+        top_leading: 24,
+        top_trailing: 24,
+        bottom_leading: 24,
+        bottom_trailing: 24,
+      },
+    },
+    background_color: {
+      light: { type: "hex", value: "#F0F0F0" },
+      dark: { type: "hex", value: "#F0F0F0" },
+    },
+    spacing: 16,
+    padding: { top: 16, trailing: 16, bottom: 16, leading: 16 },
+    size: { width: { type: "fill" }, height: { type: "fill" } },
+  }}
+/>
+
+<!-- Fixed Size -->
+<Story
+  name="Fixed Size"
+  args={{
+    type: "stack",
+    dimension: {
+      type: "vertical",
+      alignment: "center",
+      distribution: "start",
+    },
+    components,
+    labels,
+    size: {
+      width: { type: "fixed", value: 300 },
+      height: { type: "fixed", value: 200 },
+    },
+    background_color: {
+      light: { type: "hex", value: "#F0F0F0" },
+      dark: { type: "hex", value: "#F0F0F0" },
+    },
+    spacing: 16,
+    padding: { top: 16, trailing: 16, bottom: 16, leading: 16 },
+  }}
+/>
+
+<!-- Shadow -->
+<Story
+  name="Shadow"
+  args={{
+    shadow: {
+      x: 16,
+      y: 16,
+      radius: 8,
+      color: {
+        dark: { type: "hex", value: "#d3d3d3" },
+        light: { type: "hex", value: "#d3d3d3" },
+      },
+    },
+    type: "stack",
+    dimension: {
+      type: "vertical",
+      alignment: "center",
+      distribution: "start",
+    },
+    components,
+    labels,
+    border: {
+      width: 2,
+      color: {
+        light: { type: "hex", value: "#646464" },
+        dark: { type: "hex", value: "#646464" },
+      },
+      style: "solid",
+    },
+    shape: {
+      type: "rectangle",
+      corners: {
+        top_leading: 8,
+        top_trailing: 8,
+        bottom_leading: 8,
+        bottom_trailing: 8,
+      },
+    },
+    spacing: 16,
+    padding: { top: 16, trailing: 16, bottom: 16, leading: 16 },
+    size: { width: { type: "fill" }, height: { type: "fill" } },
+  }}
+/>

package/dist/components/stack/Stack.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import Stack from "./Stack.svelte";
+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 Stack: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Stack = InstanceType<typeof Stack>;
+export default Stack;