@revenuecat/purchases-ui-js 0.0.8

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

@@ -0,0 +1,165 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import Image from "./Image.svelte";
+  import { colorModeStoryMeta } from "../../stories/meta-templates";
+
+  const { Story } = defineMeta({
+    title: "Components/Image",
+    component: Image,
+    tags: ["autodocs"],
+    argTypes: {
+      id: { control: "text", description: "Unique identifier for the image" },
+      gradient_colors: {
+        control: "object",
+        description: "Gradient colors for the overlay",
+      },
+      colorMode: colorModeStoryMeta,
+      size: {
+        control: "object",
+        description: "Size configuration for the image",
+      },
+      max_height: {
+        control: "number",
+        description: "Maximum height of the image",
+      },
+      override_source_lid: {
+        control: "text",
+        description: "Override source lid",
+      },
+      fit_mode: {
+        control: { type: "select" },
+        options: ["fit", "fill"],
+        description: "Fit mode for the image",
+      },
+    },
+  });
+</script>
+
+<!-- Rectangle story -->
+<Story
+  name="Rectangle"
+  args={{
+    id: "example-id",
+    fit_mode: "fit",
+    size: {
+      width: { type: "fill" },
+      height: { type: "fill" },
+    },
+    source: {
+      light: {
+        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",
+      },
+    },
+    colorMode: "light",
+    mask_shape: { type: "rectangle" },
+  }}
+/>
+<!-- Circle story -->
+<Story
+  name="Circle"
+  args={{
+    id: "example-id",
+    fit_mode: "fit",
+    size: {
+      width: { type: "fill" },
+      height: { type: "fill" },
+    },
+    source: {
+      light: {
+        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",
+      },
+    },
+    colorMode: "light",
+    mask_shape: { type: "circle" },
+  }}
+/>
+<!-- Concave story -->
+<Story
+  name="Concave"
+  args={{
+    id: "example-id",
+    fit_mode: "fit",
+    size: {
+      width: { type: "fill" },
+      height: { type: "fill" },
+    },
+    source: {
+      light: {
+        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",
+      },
+    },
+    colorMode: "light",
+    mask_shape: { type: "concave" },
+  }}
+/>
+<!-- Convex story -->
+<Story
+  name="Convex"
+  args={{
+    id: "example-id",
+    fit_mode: "fit",
+    size: {
+      width: { type: "fill" },
+      height: { type: "fill" },
+    },
+    source: {
+      light: {
+        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",
+      },
+    },
+    colorMode: "light",
+    mask_shape: { type: "convex" },
+  }}
+/>
+<!-- Gradient story -->
+<Story
+  name="Background Gradient"
+  args={{
+    id: "example-id",
+    fit_mode: "fit",
+    size: {
+      width: { type: "fill" },
+      height: { type: "fill" },
+    },
+    source: {
+      light: {
+        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",
+      },
+    },
+    colorMode: "light",
+    gradient_colors: [
+      {
+        dark: { type: "hex", value: "#FFFFFF80" },
+        light: { type: "hex", value: "#FFFFFF80" },
+      },
+      {
+        dark: { type: "hex", value: "#FFFFFF80" },
+        light: { type: "hex", value: "#FFFFFF80" },
+      },
+      {
+        dark: { type: "hex", value: "#000000" },
+        light: { type: "hex", value: "#000000" },
+      },
+    ],
+  }}
+/>

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

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

package/dist/components/image/Image.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { getImageComponentStyles } from "./image-utils";
+  import { stringifyStyles } from "../../utils";
+  import type { ImageProps } from "../../data/entities";
+
+  const { id, colorMode, source, ...restProps }: ImageProps = $props();
+
+  const { gradientStyles, imageStyles } = $derived(
+    getImageComponentStyles({ id, colorMode, source, ...restProps }),
+  );
+  const gradientStylesString = $derived(stringifyStyles(gradientStyles));
+  const imageStylesString = $derived(stringifyStyles(imageStyles));
+</script>
+
+<div
+  class="image-container"
+  id={`image-container-${id}`}
+  style={imageStylesString}
+>
+  <img class="image" src={source[colorMode || "light"]?.original} alt="" {id} />
+  <span class="image-overlay" style={gradientStylesString}></span>
+</div>
+
+<style>
+  .image-container {
+    position: relative;
+    height: var(--height, unset);
+    width: var(--width, unset);
+    overflow: hidden;
+    border-radius: var(--corner-radius, unset);
+    clip-path: var(--clip-path, unset);
+    display: flex;
+    flex: 1 0 auto;
+  }
+  .image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  .image-overlay {
+    position: absolute;
+    inset: 0;
+    background: var(--background, unset);
+  }
+</style>

package/dist/components/image/Image.svelte.d.ts

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

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

@@ -0,0 +1,20 @@
+import type { ImageProps } from "../../data/entities";
+type ImageStyleVariables = {
+    "--height": string;
+    "--width": string;
+    "--clip-path": string;
+    "--corner-radius": string;
+};
+type GradientStyleVariables = {
+    "--background": string;
+};
+/**
+ * Generates comprehensive styles for image components by combining gradient and size styles
+ * @param props - Image component properties including gradient, mask and size
+ * @returns Object containing image style variables and gradient style variables
+ */
+export declare const getImageComponentStyles: (props: ImageProps) => {
+    imageStyles: ImageStyleVariables;
+    gradientStyles: GradientStyleVariables;
+};
+export {};

package/dist/components/image/image-utils.js

@@ -0,0 +1,19 @@
+import { getGradientStyle, getMaskStyle, getSizeStyle } from "../../utils";
+/**
+ * Generates comprehensive styles for image components by combining gradient and size styles
+ * @param props - Image component properties including gradient, mask and size
+ * @returns Object containing image style variables and gradient style variables
+ */
+export const getImageComponentStyles = (props) => {
+    const { gradient_colors, colorMode, mask_shape, size, max_height, // TODO: implement this. still waiting on spec
+    override_source_lid, // TODO: Implement this once structure is defined
+     } = props;
+    const gradientStyles = getGradientStyle(colorMode, gradient_colors);
+    const sizeStyles = getSizeStyle(size);
+    const maskStyles = getMaskStyle(mask_shape);
+    const imageStylesObject = {
+        ...sizeStyles,
+        ...maskStyles,
+    };
+    return { imageStyles: imageStylesObject, gradientStyles };
+};

package/dist/components/package/Package.stories.svelte

@@ -0,0 +1,243 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import Package from "./Package.svelte";
+  import { colorModeStoryMeta } from "../../stories/meta-templates";
+  import type { Extra, SupportedActions } from "../../data/entities";
+
+  const onAction = (action: SupportedActions, data: Extra) => {
+    alert(`${action.type} ${JSON.stringify(data)}`);
+  };
+
+  const { Story } = defineMeta({
+    title: "Components/Package",
+    component: Package,
+    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",
+    },
+    onAction,
+    labels: labelsData,
+    type: "package",
+  }}
+/>

package/dist/components/package/Package.stories.svelte.d.ts

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

package/dist/components/package/Package.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import type { PackageProps, SelectPackageAction } from "../../data/entities";
+  import Stack from "../stack/Stack.svelte";
+
+  const {
+    stack,
+    package_id,
+    labels,
+    id,
+    onAction,
+    purchaseState,
+  }: PackageProps = $props();
+
+  const onPackageClick = (evt: MouseEvent) => {
+    evt.preventDefault();
+    evt.stopPropagation();
+    onAction &&
+      onAction({ type: "select_package" } as SelectPackageAction, {
+        packageId: package_id,
+      });
+  };
+
+  const isSelected = $derived(purchaseState?.selectedPackageId === package_id);
+</script>
+
+<div class="package" class:selected={isSelected} {id} onclick={onPackageClick}>
+  <Stack {...stack} {labels} {onAction} {purchaseState} />
+</div>
+
+<style>
+  .package {
+    width: 100%;
+    display: flex;
+    cursor: pointer;
+  }
+
+  .selected {
+  }
+</style>

package/dist/components/package/Package.svelte.d.ts

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

package/dist/components/paywall/Node.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import {
+    Stack,
+    Text,
+    Button,
+    Image,
+    PurchaseButton,
+    Package,
+    Footer,
+  } from "../..";
+  import Self from "./Node.svelte";
+  import {
+    type ActionsProps,
+    type ComponentLocalizations,
+    type Extra,
+    type PaywallComponent,
+    type PurchaseStateProps,
+    type SupportedActions,
+  } from "../../data/entities";
+  import { prefersDarkMode } from "../../stores/theme";
+  import ButtonNode from "../button/ButtonNode.svelte";
+  import type { PurchaseState } from "../../data/state";
+
+  interface Props extends ActionsProps, PurchaseStateProps {
+    nodeData: PaywallComponent;
+    labels: ComponentLocalizations;
+    onAction?: (action: SupportedActions, data?: Extra) => void;
+    purchaseState?: PurchaseState;
+  }
+
+  const { nodeData, labels, onAction, purchaseState }: Props = $props();
+
+  const ComponentTypes = {
+    text: Text,
+    stack: Stack,
+    image: Image,
+    button: ButtonNode,
+    purchase_button: PurchaseButton,
+    package: Package,
+    footer: Footer,
+  };
+  const MyComponent = $derived(ComponentTypes[nodeData.type]);
+</script>
+
+<MyComponent
+  {...(nodeData as any) || {}}
+  {labels}
+  prefersDarkMode={$prefersDarkMode}
+  {onAction}
+  {purchaseState}
+>
+  {#each nodeData.components as childData}
+    <Self nodeData={childData} {labels} {onAction} {purchaseState} />
+  {/each}
+</MyComponent>

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

@@ -0,0 +1,9 @@
+import { type ActionsProps, type ComponentLocalizations, type Extra, type PaywallComponent, type PurchaseStateProps, type SupportedActions } from "../../data/entities";
+import type { PurchaseState } from "../../data/state";
+declare const Node: import("svelte").Component<ActionsProps & PurchaseStateProps & {
+    nodeData: PaywallComponent;
+    labels: ComponentLocalizations;
+    onAction?: (action: SupportedActions, data?: Extra) => void;
+    purchaseState?: PurchaseState;
+}, {}, "">;
+export default Node;

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

@@ -0,0 +1,24 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  import Paywall from "./Paywall.svelte";
+  import { paywallData } from "../../stories/fixtures";
+
+  const { Story } = defineMeta({
+    title: "Example/Paywall",
+    component: Paywall,
+    tags: ["autodocs"],
+    argTypes: {},
+    args: {},
+  });
+
+  const onPurchaseClicked = (selectedPackageId: string) => {
+    alert(`Purchasing: ${selectedPackageId}`);
+  };
+</script>
+
+<!-- Default story -->
+<Story
+  name="Primary"
+  args={{ data: paywallData, onPurchaseClicked: onPurchaseClicked }}
+/>