@revenuecat/purchases-ui-js 2.0.3 → 2.0.4

package/dist/components/carousel/Carousel.stories.svelte

@@ -0,0 +1,1039 @@
+<script module lang="ts">
+  import { componentDecorator } from "../../stories/component-decorator";
+  import { localizationDecorator } from "../../stories/localization-decorator";
+  import { viewportDecorator } from "../../stories/viewport-decorator";
+  import type { CarouselProps } from "../../types/components/carousel";
+  import { DEFAULT_SPACING } from "../../utils/constants";
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import Carousel from "./Carousel.svelte";
+
+  const defaultLocale = "en_US";
+
+  const pages: CarouselProps["pages"] = [
+    {
+      background: {
+        type: "color",
+        value: {
+          light: {
+            degrees: 180,
+            points: [
+              {
+                color: "#EAEDFB2E",
+                percent: 0,
+              },
+              {
+                color: "#EAEDFBFF",
+                percent: 100,
+              },
+            ],
+            type: "linear",
+          },
+        },
+      },
+      background_color: null,
+      badge: null,
+      border: {
+        color: {
+          light: {
+            type: "hex",
+            value: "#cccccc",
+          },
+        },
+        width: 1,
+      },
+      components: [
+        {
+          background_color: null,
+          color: {
+            light: {
+              type: "hex",
+              value: "#000000",
+            },
+          },
+          font_name: null,
+          font_size: 14,
+          font_weight: "regular",
+          font_weight_int: 400,
+          horizontal_alignment: "leading",
+          id: "soRLOc3Acb",
+          margin: {
+            bottom: 0,
+            leading: 0,
+            top: 0,
+            trailing: 0,
+          },
+          name: "",
+          padding: {
+            bottom: 0,
+            leading: 0,
+            top: 0,
+            trailing: 0,
+          },
+          size: {
+            height: {
+              type: "fit",
+              value: null,
+            },
+            width: {
+              type: "fit",
+              value: null,
+            },
+          },
+          text_lid: "first",
+          type: "text",
+        },
+      ],
+      dimension: {
+        alignment: "center",
+        distribution: "center",
+        type: "horizontal",
+      },
+      id: "N3iBhLTsUa",
+      margin: {
+        bottom: 0,
+        leading: 0,
+        top: 0,
+        trailing: 0,
+      },
+      name: "Page 1",
+      padding: {
+        bottom: 0,
+        leading: 0,
+        top: 0,
+        trailing: 0,
+      },
+      shadow: null,
+      shape: {
+        corners: {
+          bottom_leading: 16,
+          bottom_trailing: 16,
+          top_leading: 16,
+          top_trailing: 16,
+        },
+        type: "rectangle",
+      },
+      size: {
+        height: {
+          type: "fixed",
+          value: 160,
+        },
+        width: {
+          type: "fill",
+          value: null,
+        },
+      },
+      spacing: 0,
+      type: "stack",
+    },
+    {
+      background: {
+        type: "color",
+        value: {
+          light: {
+            degrees: 180,
+            points: [
+              {
+                color: "#E1F9EF2E",
+                percent: 0,
+              },
+              {
+                color: "#E1F9EFFF",
+                percent: 100,
+              },
+            ],
+            type: "linear",
+          },
+        },
+      },
+      background_color: null,
+      badge: null,
+      border: {
+        color: {
+          light: {
+            type: "hex",
+            value: "#cccccc",
+          },
+        },
+        width: 1,
+      },
+      components: [
+        {
+          background_color: null,
+          color: {
+            light: {
+              type: "hex",
+              value: "#000000",
+            },
+          },
+          font_name: null,
+          font_size: 14,
+          font_weight: "regular",
+          font_weight_int: 400,
+          horizontal_alignment: "leading",
+          id: "RAsFXX8203",
+          margin: {
+            bottom: 0,
+            leading: 0,
+            top: 0,
+            trailing: 0,
+          },
+          name: "",
+          padding: {
+            bottom: 0,
+            leading: 0,
+            top: 0,
+            trailing: 0,
+          },
+          size: {
+            height: {
+              type: "fit",
+              value: null,
+            },
+            width: {
+              type: "fit",
+              value: null,
+            },
+          },
+          text_lid: "second",
+          type: "text",
+        },
+      ],
+      dimension: {
+        alignment: "center",
+        distribution: "center",
+        type: "horizontal",
+      },
+      id: "xQIsfuIIN0",
+      margin: {
+        bottom: 0,
+        leading: 0,
+        top: 0,
+        trailing: 0,
+      },
+      name: "Page 2",
+      padding: {
+        bottom: 0,
+        leading: 0,
+        top: 0,
+        trailing: 0,
+      },
+      shadow: null,
+      shape: {
+        corners: {
+          bottom_leading: 16,
+          bottom_trailing: 16,
+          top_leading: 16,
+          top_trailing: 16,
+        },
+        type: "rectangle",
+      },
+      size: {
+        height: {
+          type: "fixed",
+          value: 120,
+        },
+        width: {
+          type: "fill",
+          value: null,
+        },
+      },
+      spacing: 0,
+      type: "stack",
+    },
+    {
+      background: {
+        type: "color",
+        value: {
+          light: {
+            degrees: 180,
+            points: [
+              {
+                color: "#FDE7E72E",
+                percent: 0,
+              },
+              {
+                color: "#FDE7E7FF",
+                percent: 100,
+              },
+            ],
+            type: "linear",
+          },
+        },
+      },
+      background_color: null,
+      badge: null,
+      border: {
+        color: {
+          light: {
+            type: "hex",
+            value: "#cccccc",
+          },
+        },
+        width: 1,
+      },
+      components: [
+        {
+          background_color: null,
+          color: {
+            light: {
+              type: "hex",
+              value: "#000000",
+            },
+          },
+          font_name: null,
+          font_size: 14,
+          font_weight: "regular",
+          font_weight_int: 400,
+          horizontal_alignment: "leading",
+          id: "QMk1xrZOgz",
+          margin: {
+            bottom: 0,
+            leading: 0,
+            top: 0,
+            trailing: 0,
+          },
+          name: "",
+          padding: {
+            bottom: 0,
+            leading: 0,
+            top: 0,
+            trailing: 0,
+          },
+          size: {
+            height: {
+              type: "fit",
+              value: null,
+            },
+            width: {
+              type: "fit",
+              value: null,
+            },
+          },
+          text_lid: "third",
+          type: "text",
+        },
+      ],
+      dimension: {
+        alignment: "center",
+        distribution: "center",
+        type: "horizontal",
+      },
+      id: "7zbI8t5CmX",
+      margin: {
+        bottom: 0,
+        leading: 0,
+        top: 0,
+        trailing: 0,
+      },
+      name: "Page 3",
+      padding: {
+        bottom: 0,
+        leading: 0,
+        top: 0,
+        trailing: 0,
+      },
+      shadow: null,
+      shape: {
+        corners: {
+          bottom_leading: 16,
+          bottom_trailing: 16,
+          top_leading: 16,
+          top_trailing: 16,
+        },
+        type: "rectangle",
+      },
+      size: {
+        height: {
+          type: "fixed",
+          value: 80,
+        },
+        width: {
+          type: "fill",
+          value: null,
+        },
+      },
+      spacing: 0,
+      type: "stack",
+    },
+  ];
+
+  const lastPage = pages.length - 1;
+
+  const { Story } = defineMeta({
+    title: "Components/Carousel",
+    component: Carousel,
+    decorators: [
+      viewportDecorator(400, 300, 0),
+      componentDecorator(),
+      localizationDecorator({
+        defaultLocale,
+        localizations: {
+          [defaultLocale]: {
+            first: "First",
+            second: "Second",
+            third: "Third",
+            badge: "Badge",
+          },
+        },
+      }),
+    ],
+    args: {
+      type: "carousel",
+      id: "carousel",
+      name: "Carousel",
+      padding: { bottom: 8, leading: 0, top: 8, trailing: 0 },
+      margin: DEFAULT_SPACING,
+      background: null,
+      shape: null,
+      border: null,
+      shadow: null,
+      page_alignment: "center",
+      page_spacing: 16,
+      page_peek: 16,
+      initial_page_index: 0,
+      loop: false,
+      auto_advance: {
+        ms_time_per_page: 2500,
+        ms_transition_time: 500,
+        transition_type: "slide",
+      },
+      page_control: {
+        active: {
+          color: {
+            light: {
+              type: "hex",
+              value: "#00000088",
+            },
+          },
+          height: 5,
+          width: 5,
+        },
+        background_color: null,
+        border: null,
+        default: {
+          color: {
+            light: {
+              type: "hex",
+              value: "#0000004C",
+            },
+          },
+          height: 5,
+          width: 5,
+        },
+        margin: {
+          bottom: 0,
+          leading: 0,
+          top: 8,
+          trailing: 0,
+        },
+        padding: {
+          bottom: 8,
+          leading: 8,
+          top: 8,
+          trailing: 8,
+        },
+        position: "bottom",
+        shadow: null,
+        shape: null,
+        spacing: 8,
+      },
+      pages,
+    } satisfies CarouselProps,
+  });
+</script>
+
+<Story
+  name="No loop - first page"
+  args={{
+    loop: false,
+    initial_page_index: 0,
+    auto_advance: null,
+  }}
+/>
+
+<Story
+  name="No loop - last page"
+  args={{
+    loop: false,
+    initial_page_index: lastPage,
+    auto_advance: null,
+  }}
+/>
+
+<Story
+  name="Loop - first page"
+  args={{
+    loop: true,
+    initial_page_index: 0,
+    auto_advance: null,
+  }}
+/>
+
+<Story
+  name="Loop - last page"
+  args={{
+    loop: true,
+    initial_page_index: lastPage,
+    auto_advance: null,
+  }}
+/>
+
+<Story
+  name="Fancy"
+  args={{
+    initial_page_index: 0,
+    loop: true,
+    margin: {
+      bottom: 16,
+      leading: 16,
+      top: 16,
+      trailing: 16,
+    },
+    padding: {
+      bottom: 16,
+      leading: 0,
+      top: 16,
+      trailing: 0,
+    },
+    page_alignment: "top",
+    page_control: {
+      active: {
+        color: {
+          light: {
+            type: "hex",
+            value: "#3fe33fFF",
+          },
+        },
+        height: 16,
+        stroke_color: {
+          light: {
+            type: "hex",
+            value: "#20a50bFF",
+          },
+        },
+        stroke_width: 2,
+        width: 16,
+      },
+      background_color: null,
+      border: {
+        color: {
+          light: {
+            type: "hex",
+            value: "#00000040",
+          },
+        },
+        width: 2,
+      },
+      default: {
+        color: {
+          light: {
+            type: "hex",
+            value: "#00000040",
+          },
+        },
+        height: 16,
+        stroke_color: {
+          light: {
+            type: "hex",
+            value: "#000000FF",
+          },
+        },
+        stroke_width: 1,
+        width: 16,
+      },
+      margin: {
+        bottom: 16,
+        leading: 16,
+        top: 16,
+        trailing: 16,
+      },
+      padding: {
+        bottom: 16,
+        leading: 16,
+        top: 16,
+        trailing: 16,
+      },
+      position: "bottom",
+      shadow: {
+        color: {
+          light: {
+            type: "hex",
+            value: "#00000040",
+          },
+        },
+        radius: 8,
+        x: 4,
+        y: 4,
+      },
+      shape: {
+        corners: null,
+        type: "pill",
+      },
+      spacing: 16,
+    },
+    page_peek: 32,
+    page_spacing: 8,
+    pages: [
+      {
+        background: {
+          type: "color",
+          value: {
+            light: {
+              degrees: 180,
+              points: [
+                {
+                  color: "#EAEDFB2E",
+                  percent: 0,
+                },
+                {
+                  color: "#EAEDFBFF",
+                  percent: 100,
+                },
+              ],
+              type: "linear",
+            },
+          },
+        },
+        background_color: null,
+        badge: {
+          alignment: "top",
+          stack: {
+            background: {
+              type: "color",
+              value: {
+                light: {
+                  type: "hex",
+                  value: "#11D483FF",
+                },
+              },
+            },
+            background_color: {
+              light: {
+                type: "hex",
+                value: "#11D483FF",
+              },
+            },
+            badge: null,
+            border: null,
+            components: [
+              {
+                background_color: null,
+                color: {
+                  light: {
+                    type: "hex",
+                    value: "#000000",
+                  },
+                },
+                font_name: null,
+                font_size: 14,
+                font_weight: "regular",
+                font_weight_int: 400,
+                horizontal_alignment: "center",
+                id: "cKjC2eAb7t",
+                margin: {
+                  bottom: 0,
+                  leading: 0,
+                  top: 0,
+                  trailing: 0,
+                },
+                name: "",
+                padding: {
+                  bottom: 0,
+                  leading: 0,
+                  top: 0,
+                  trailing: 0,
+                },
+                size: {
+                  height: {
+                    type: "fit",
+                    value: null,
+                  },
+                  width: {
+                    type: "fit",
+                    value: null,
+                  },
+                },
+                text_lid: "badge",
+                type: "text",
+              },
+            ],
+            dimension: {
+              alignment: "center",
+              distribution: "center",
+              type: "vertical",
+            },
+            id: "CprMWfZc-p",
+            margin: {
+              bottom: 0,
+              leading: 0,
+              top: 0,
+              trailing: 0,
+            },
+            name: "",
+            padding: {
+              bottom: 4,
+              leading: 8,
+              top: 4,
+              trailing: 8,
+            },
+            shadow: null,
+            shape: {
+              corners: {
+                bottom_leading: 0,
+                bottom_trailing: 0,
+                top_leading: 0,
+                top_trailing: 0,
+              },
+              type: "pill",
+            },
+            size: {
+              height: {
+                type: "fit",
+                value: null,
+              },
+              width: {
+                type: "fit",
+                value: null,
+              },
+            },
+            spacing: 0,
+            type: "stack",
+          },
+          style: "overlay",
+        },
+        border: {
+          color: {
+            light: {
+              type: "hex",
+              value: "#cccccc",
+            },
+          },
+          width: 1,
+        },
+        components: [
+          {
+            background_color: null,
+            color: {
+              light: {
+                type: "hex",
+                value: "#000000",
+              },
+            },
+            font_name: null,
+            font_size: 14,
+            font_weight: "regular",
+            font_weight_int: 400,
+            horizontal_alignment: "leading",
+            id: "Ux4DRHWPn2",
+            margin: {
+              bottom: 0,
+              leading: 0,
+              top: 0,
+              trailing: 0,
+            },
+            name: "",
+            padding: {
+              bottom: 0,
+              leading: 0,
+              top: 0,
+              trailing: 0,
+            },
+            size: {
+              height: {
+                type: "fit",
+                value: null,
+              },
+              width: {
+                type: "fit",
+                value: null,
+              },
+            },
+            text_lid: "first",
+            type: "text",
+          },
+        ],
+        dimension: {
+          alignment: "center",
+          distribution: "center",
+          type: "horizontal",
+        },
+        id: "AQKHrLfmTu",
+        margin: {
+          bottom: 0,
+          leading: 0,
+          top: 0,
+          trailing: 0,
+        },
+        name: "Page 1",
+        padding: {
+          bottom: 0,
+          leading: 0,
+          top: 0,
+          trailing: 0,
+        },
+        shadow: {
+          color: {
+            light: {
+              type: "hex",
+              value: "#000000FF",
+            },
+          },
+          radius: 8,
+          x: 4,
+          y: 4,
+        },
+        shape: {
+          corners: {
+            bottom_leading: 16,
+            bottom_trailing: 16,
+            top_leading: 16,
+            top_trailing: 16,
+          },
+          type: "rectangle",
+        },
+        size: {
+          height: {
+            type: "fixed",
+            value: 160,
+          },
+          width: {
+            type: "fill",
+            value: null,
+          },
+        },
+        spacing: 0,
+        type: "stack",
+      },
+      {
+        background: {
+          type: "color",
+          value: {
+            light: {
+              degrees: 180,
+              points: [
+                {
+                  color: "#E1F9EF2E",
+                  percent: 0,
+                },
+                {
+                  color: "#E1F9EFFF",
+                  percent: 100,
+                },
+              ],
+              type: "linear",
+            },
+          },
+        },
+        background_color: null,
+        badge: null,
+        border: {
+          color: {
+            light: {
+              type: "hex",
+              value: "#cccccc",
+            },
+          },
+          width: 1,
+        },
+        components: [
+          {
+            background_color: null,
+            color: {
+              light: {
+                type: "hex",
+                value: "#000000",
+              },
+            },
+            font_name: null,
+            font_size: 14,
+            font_weight: "regular",
+            font_weight_int: 400,
+            horizontal_alignment: "leading",
+            id: "xQZSdZKraB",
+            margin: {
+              bottom: 0,
+              leading: 0,
+              top: 0,
+              trailing: 0,
+            },
+            name: "",
+            padding: {
+              bottom: 0,
+              leading: 0,
+              top: 0,
+              trailing: 0,
+            },
+            size: {
+              height: {
+                type: "fit",
+                value: null,
+              },
+              width: {
+                type: "fit",
+                value: null,
+              },
+            },
+            text_lid: "second",
+            type: "text",
+          },
+        ],
+        dimension: {
+          alignment: "center",
+          distribution: "center",
+          type: "horizontal",
+        },
+        id: "0WDm5elVWc",
+        margin: {
+          bottom: 0,
+          leading: 0,
+          top: 0,
+          trailing: 0,
+        },
+        name: "Page 2",
+        padding: {
+          bottom: 0,
+          leading: 0,
+          top: 0,
+          trailing: 0,
+        },
+        shadow: null,
+        shape: {
+          corners: {
+            bottom_leading: 16,
+            bottom_trailing: 16,
+            top_leading: 16,
+            top_trailing: 16,
+          },
+          type: "rectangle",
+        },
+        size: {
+          height: {
+            type: "fixed",
+            value: 120,
+          },
+          width: {
+            type: "fill",
+            value: null,
+          },
+        },
+        spacing: 0,
+        type: "stack",
+      },
+      {
+        background: {
+          type: "color",
+          value: {
+            light: {
+              degrees: 180,
+              points: [
+                {
+                  color: "#FDE7E72E",
+                  percent: 0,
+                },
+                {
+                  color: "#FDE7E7FF",
+                  percent: 100,
+                },
+              ],
+              type: "linear",
+            },
+          },
+        },
+        background_color: null,
+        badge: null,
+        border: {
+          color: {
+            light: {
+              type: "hex",
+              value: "#cccccc",
+            },
+          },
+          width: 1,
+        },
+        components: [
+          {
+            background_color: null,
+            color: {
+              light: {
+                type: "hex",
+                value: "#000000",
+              },
+            },
+            font_name: null,
+            font_size: 14,
+            font_weight: "regular",
+            font_weight_int: 400,
+            horizontal_alignment: "leading",
+            id: "wqvw-od0-k",
+            margin: {
+              bottom: 0,
+              leading: 0,
+              top: 0,
+              trailing: 0,
+            },
+            name: "",
+            padding: {
+              bottom: 0,
+              leading: 0,
+              top: 0,
+              trailing: 0,
+            },
+            size: {
+              height: {
+                type: "fit",
+                value: null,
+              },
+              width: {
+                type: "fit",
+                value: null,
+              },
+            },
+            text_lid: "third",
+            type: "text",
+          },
+        ],
+        dimension: {
+          alignment: "center",
+          distribution: "center",
+          type: "horizontal",
+        },
+        id: "ce6DWrkJtQ",
+        margin: {
+          bottom: 0,
+          leading: 0,
+          top: 0,
+          trailing: 0,
+        },
+        name: "Page 3",
+        padding: {
+          bottom: 0,
+          leading: 0,
+          top: 0,
+          trailing: 0,
+        },
+        shadow: null,
+        shape: {
+          corners: {
+            bottom_leading: 16,
+            bottom_trailing: 16,
+            top_leading: 16,
+            top_trailing: 16,
+          },
+          type: "rectangle",
+        },
+        size: {
+          height: {
+            type: "fixed",
+            value: 80,
+          },
+          width: {
+            type: "fill",
+            value: null,
+          },
+        },
+        spacing: 0,
+        type: "stack",
+      },
+    ],
+  }}
+/>