@revenuecat/purchases-ui-js 2.0.2 → 2.0.4

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

@@ -1,6 +1,9 @@
 <script module lang="ts">
   import Footer from "./Footer.svelte";
+  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";
@@ -8,8 +11,8 @@
   const { Story } = defineMeta({
     title: "Components/Footer",
     component: Footer,
-    tags: ["autodocs"],
     decorators: [
+      componentDecorator(),
       localizationDecorator({
         defaultLocale,
         localizations: {
@@ -19,123 +22,130 @@
         },
       }),
     ],
-  });
-</script>
-
-<!-- Default  -->
-<Story
-  name="Footer component"
-  args={{
-    id: "kHhCWlo9au",
-    name: "",
-    stack: {
-      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

@@ -2,18 +2,22 @@
   import Stack from "../stack/Stack.svelte";
   import type { FooterProps } from "../../types/components/footer";
 
-  const { stack, id }: FooterProps = $props();
+  const { stack }: FooterProps = $props();
 </script>
 
-<div class="rc-pw-footer" {id}>
+<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" },
+    },
+  }}
+/>

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

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

package/dist/components/icon/Icon.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import { getColorModeContext } from "../../stores/color-mode";
+  import { getSelectedStateContext } from "../../stores/selected";
+  import type { IconProps } from "../../types/components/icon";
+  import {
+    css,
+    mapBorder,
+    mapBorderRadius,
+    mapColor,
+    mapShadow,
+    mapSize,
+    mapSpacing,
+  } from "../../utils/base-utils";
+  import { getActiveStateProps } from "../../utils/style-utils";
+
+  const props: IconProps = $props();
+  const selectedState = getSelectedStateContext();
+  const {
+    base_url,
+    formats,
+    size,
+    margin,
+    padding,
+    color,
+    icon_background: background,
+  } = $derived.by(() => {
+    return {
+      ...props,
+      ...getActiveStateProps($selectedState, props.overrides),
+    };
+  });
+
+  const getColorMode = getColorModeContext();
+  const colorMode = $derived(getColorMode());
+
+  const container = $derived(
+    css({
+      width: mapSize(size.width),
+      height: mapSize(size.height),
+      margin: mapSpacing(margin),
+      padding: mapSpacing(padding),
+      "background-color": mapColor(colorMode, background?.color),
+      border: mapBorder(colorMode, background?.border),
+      "border-radius": mapBorderRadius(background?.shape),
+      "box-shadow": mapShadow(colorMode, background?.shadow),
+      flex: "0 0 auto",
+    }),
+  );
+
+  const webpUrl = $derived(`${base_url}/${formats.webp}`);
+  const icon = $derived(
+    css({
+      width: "100%",
+      height: "100%",
+      position: "relative",
+      "z-index": 1,
+      overflow: "hidden",
+      "background-color": mapColor(colorMode, color),
+      "mask-image": `url(${webpUrl})`,
+      "webkit-mask-image": `url(${webpUrl})`,
+      "mask-size": "contain",
+      "webkit-mask-size": "contain",
+      "mask-position": "center",
+      "webkit-mask-position": "center",
+      "mask-repeat": "no-repeat",
+      "webkit-mask-repeat": "no-repeat",
+    }),
+  );
+</script>
+
+<div style={container}>
+  <div style={icon}></div>
+</div>

package/dist/components/icon/Icon.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { IconProps } from "../../types/components/icon";
+declare const Icon: import("svelte").Component<IconProps, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;

package/dist/components/image/ClipPath.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import type { ImageProps } from "../../types/components/image";
+
+  interface ClipPathProps {
+    shape: ImageProps["mask_shape"];
+    width: number;
+    height: number;
+  }
+
+  const { shape, width, height }: ClipPathProps = $props();
+
+  const [topLeft, topRight, bottomRight, bottomLeft] = $derived.by(() => {
+    if (shape?.type !== "rectangle") {
+      return [0, 0, 0, 0];
+    }
+
+    const { corners } = shape;
+    return [
+      corners?.top_leading ?? 0,
+      corners?.top_trailing ?? 0,
+      corners?.bottom_trailing ?? 0,
+      corners?.bottom_leading ?? 0,
+    ];
+  });
+</script>
+
+{#if shape?.type === "circle"}
+  <circle cx={width / 2} cy={height / 2} r={Math.min(width, height) / 2} />
+{/if}
+
+{#if shape?.type === "concave"}
+  <path
+    d={`M 0 0 L ${width} 0 L ${width}  ${height} Q ${width / 2} ${height - 54} 0 ${height} Z`}
+  />
+{/if}
+{#if shape?.type === "convex"}
+  <path
+    d={`M 0 0 L ${width} 0 L ${width} ${height - 27} Q ${width / 2} ${height + 27} 0 ${height - 27} Z`}
+  />
+{/if}
+
+{#if shape?.type === "rectangle" || shape?.type === undefined}
+  <path
+    d={`M ${topLeft} 0 H ${width - topRight} A ${topRight} ${topRight} 0 0 1 ${width} ${topRight}
+        V ${height - bottomRight} A ${bottomRight} ${bottomRight} 0 0 1 ${width - bottomRight} ${height}
+        H ${bottomLeft} A ${bottomLeft} ${bottomLeft} 0 0 1 0 ${height - bottomLeft}
+        V ${topLeft} A ${topLeft} ${topLeft} 0 0 1 ${topLeft} 0 Z`}
+  />
+{/if}

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

@@ -0,0 +1,9 @@
+import type { ImageProps } from "../../types/components/image";
+interface ClipPathProps {
+    shape: ImageProps["mask_shape"];
+    width: number;
+    height: number;
+}
+declare const ClipPath: import("svelte").Component<ClipPathProps, {}, "">;
+type ClipPath = ReturnType<typeof ClipPath>;
+export default ClipPath;