@revenuecat/purchases-ui-js 0.0.15 → 0.0.17

package/dist/components/timeline/Timeline.stories.svelte

@@ -0,0 +1,640 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import { Timeline } from "../..";
+  import type { PurchaseState } from "../../data/state";
+  import { defaultColor } from "../text/text-utils";
+  import { type TimelineProps } from "../../data/entities";
+
+  const { Story } = defineMeta({
+    title: "Components/Timeline",
+    component: Timeline,
+    tags: ["autodocs"],
+    argTypes: {},
+  });
+
+  const purchaseState: PurchaseState = {
+    locale: "en_US",
+    defaultLocale: "en_US",
+    colorMode: "light",
+  };
+
+  const labels = {
+    en_US: {
+      asd123: "Item 1",
+      asd123d: "description 1",
+      qwe123: "Item 2",
+      qwe123d: "description 2",
+      zxc123: "Item 3",
+      zxc123d: "description 3",
+      rty123: "Item 4",
+      rty123d: "description 4",
+      fgh123: "Item 5",
+      fgh123d: "description 5",
+      case1: "Case 1",
+      case1d: "No spacing between connector and item",
+      case2: "Case 2",
+      case2d: "Spacing between connector and item",
+      case3: "Case 3",
+      case3d: "Spacing at bottom of connector",
+      case4: "Case 4",
+      case4d: "Spacing at top of connector",
+      case5: "Case 5",
+      case5d: "No Connector",
+    },
+  };
+</script>
+
+<!-- Timeline -->
+<Story
+  name="Round icon"
+  args={{
+    type: "timeline",
+    labels,
+    purchaseState,
+    item_spacing: 32,
+    text_spacing: 16,
+    size: { width: { type: "fill" }, height: { type: "fit" } },
+    margin: { top: 8, trailing: 8, bottom: 8, leading: 8 },
+    padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+    id: "timeline-1",
+    name: "default timeline",
+    items: [
+      {
+        title: {
+          text_lid: "asd123",
+          color: defaultColor,
+          horizontal_alignment: "center",
+        },
+        description: {
+          text_lid: "asd123d",
+          color: defaultColor,
+          horizontal_alignment: "center",
+        },
+        icon: {
+          name: "check",
+          color: {
+            light: {
+              type: "hex",
+              value: "#FAFAFA",
+            },
+          },
+          width_and_height: 32,
+          padding: 16,
+        },
+        icon_background: {
+          shape: { type: "circle" },
+          color: {
+            light: {
+              type: "hex",
+              value: "#3f3f3f",
+            },
+          },
+        },
+      },
+      {
+        title: {
+          text_lid: "qwe123",
+          color: defaultColor,
+          horizontal_alignment: "center",
+        },
+        description: {
+          text_lid: "qwe123d",
+          color: defaultColor,
+          horizontal_alignment: "center",
+        },
+        icon: {
+          name: "check",
+          color: {
+            light: {
+              type: "hex",
+              value: "#FAFAFA",
+            },
+          },
+          width_and_height: 32,
+          padding: 16,
+        },
+        icon_background: {
+          shape: { type: "circle" },
+          color: {
+            light: {
+              type: "hex",
+              value: "#3f3f3f",
+            },
+          },
+        },
+      },
+      {
+        title: {
+          text_lid: "zxc123",
+          color: defaultColor,
+          horizontal_alignment: "center",
+        },
+        description: {
+          text_lid: "zxc123d",
+          color: defaultColor,
+          horizontal_alignment: "center",
+        },
+        icon: {
+          name: "check",
+          color: {
+            light: {
+              type: "hex",
+              value: "#FAFAFA",
+            },
+          },
+          width_and_height: 32,
+          padding: 16,
+        },
+        icon_background: {
+          shape: { type: "circle" },
+          color: {
+            light: {
+              type: "hex",
+              value: "#3f3f3f",
+            },
+          },
+        },
+      },
+    ],
+  } satisfies TimelineProps}
+/>
+
+<Story
+  name="Square icon"
+  args={{
+    type: "timeline",
+    labels,
+    purchaseState,
+    item_spacing: 32,
+    text_spacing: 16,
+    size: { width: { type: "fill" }, height: { type: "fit" } },
+    margin: { top: 8, trailing: 8, bottom: 8, leading: 8 },
+    padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+    id: "timeline-1",
+    name: "default timeline",
+    items: [
+      {
+        title: {
+          text_lid: "asd123",
+          color: defaultColor,
+          horizontal_alignment: "center",
+        },
+        description: {
+          text_lid: "asd123d",
+          color: defaultColor,
+          horizontal_alignment: "center",
+        },
+        icon: {
+          name: "check",
+          color: {
+            light: {
+              type: "hex",
+              value: "#FAFAFA",
+            },
+          },
+          width_and_height: 32,
+          padding: 16,
+        },
+        icon_background: {
+          shape: {
+            type: "rectangle",
+            corners: {
+              top_leading: 0,
+              top_trailing: 0,
+              bottom_leading: 0,
+              bottom_trailing: 0,
+            },
+          },
+          color: {
+            light: {
+              type: "hex",
+              value: "#3f3f3f",
+            },
+          },
+        },
+      },
+      {
+        title: {
+          text_lid: "qwe123",
+          color: defaultColor,
+          horizontal_alignment: "center",
+        },
+        description: {
+          text_lid: "qwe123d",
+          color: defaultColor,
+          horizontal_alignment: "center",
+        },
+        icon: {
+          name: "check",
+          color: {
+            light: {
+              type: "hex",
+              value: "#FAFAFA",
+            },
+          },
+          width_and_height: 32,
+          padding: 16,
+        },
+        icon_background: {
+          shape: {
+            type: "rectangle",
+            corners: {
+              top_leading: 8,
+              top_trailing: 8,
+              bottom_leading: 8,
+              bottom_trailing: 8,
+            },
+          },
+          color: {
+            light: {
+              type: "hex",
+              value: "#3f3f3f",
+            },
+          },
+        },
+      },
+      {
+        title: {
+          text_lid: "zxc123",
+          color: defaultColor,
+          horizontal_alignment: "center",
+        },
+        description: {
+          text_lid: "zxc123d",
+          color: defaultColor,
+          horizontal_alignment: "center",
+        },
+        icon: {
+          name: "check",
+          color: {
+            light: {
+              type: "hex",
+              value: "#FAFAFA",
+            },
+          },
+          width_and_height: 32,
+          padding: 16,
+        },
+        icon_background: {
+          shape: {
+            type: "rectangle",
+            corners: {
+              top_leading: 16,
+              top_trailing: 16,
+              bottom_leading: 16,
+              bottom_trailing: 16,
+            },
+          },
+          color: {
+            light: {
+              type: "hex",
+              value: "#3f3f3f",
+            },
+          },
+        },
+      },
+    ],
+  } satisfies TimelineProps}
+/>
+<Story
+  name="With connector"
+  args={{
+    type: "timeline",
+    labels,
+    purchaseState,
+    item_spacing: 32,
+    text_spacing: 16,
+    size: { width: { type: "fill" }, height: { type: "fit" } },
+    margin: { top: 8, trailing: 8, bottom: 8, leading: 8 },
+    padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+    id: "timeline-1",
+    name: "default timeline",
+    items: [
+      {
+        title: {
+          text_lid: "asd123",
+          color: defaultColor,
+          horizontal_alignment: "center",
+        },
+        description: {
+          text_lid: "asd123d",
+          color: defaultColor,
+          horizontal_alignment: "center",
+        },
+        icon: {
+          name: "check",
+          color: {
+            light: {
+              type: "hex",
+              value: "#FAFAFA",
+            },
+          },
+          width_and_height: 32,
+          padding: 16,
+        },
+        icon_background: {
+          shape: { type: "circle" },
+          color: {
+            light: {
+              type: "hex",
+              value: "#3f3f3f",
+            },
+          },
+        },
+        connector: {
+          width: 8,
+          margin: { top: 0, bottom: 0 },
+          color: { light: { type: "hex", value: "#d3d3d3" } },
+        },
+      },
+      {
+        title: {
+          text_lid: "qwe123",
+          color: defaultColor,
+          horizontal_alignment: "center",
+        },
+        description: {
+          text_lid: "qwe123d",
+          color: defaultColor,
+          horizontal_alignment: "center",
+        },
+        icon: {
+          name: "check",
+          color: {
+            light: {
+              type: "hex",
+              value: "#FAFAFA",
+            },
+          },
+          width_and_height: 32,
+          padding: 16,
+        },
+        icon_background: {
+          shape: { type: "circle" },
+          color: {
+            light: {
+              type: "hex",
+              value: "#3f3f3f",
+            },
+          },
+        },
+        connector: {
+          width: 8,
+          margin: { top: 0, bottom: 0 },
+          color: { light: { type: "hex", value: "#d3d3d3" } },
+        },
+      },
+      {
+        title: {
+          text_lid: "zxc123",
+          color: defaultColor,
+          horizontal_alignment: "center",
+        },
+        description: {
+          text_lid: "zxc123d",
+          color: defaultColor,
+          horizontal_alignment: "center",
+        },
+        icon: {
+          name: "check",
+          color: {
+            light: {
+              type: "hex",
+              value: "#FAFAFA",
+            },
+          },
+          width_and_height: 32,
+          padding: 16,
+        },
+        icon_background: {
+          shape: { type: "circle" },
+          color: {
+            light: {
+              type: "hex",
+              value: "#3f3f3f",
+            },
+          },
+        },
+        connector: {
+          width: 8,
+          margin: { top: 0, bottom: 0 },
+          color: {
+            light: {
+              degrees: 180,
+              points: [
+                {
+                  color: "#d3d3d3",
+                  percent: 0,
+                },
+
+                {
+                  color: "#d3d3d300",
+                  percent: 100,
+                },
+              ],
+              type: "linear",
+            },
+          },
+        },
+      },
+    ],
+  } satisfies TimelineProps}
+/>
+
+<Story
+  name="Connector possibilities"
+  args={{
+    type: "timeline",
+    labels,
+    purchaseState,
+    item_spacing: 64,
+    text_spacing: 8,
+    size: { width: { type: "fill" }, height: { type: "fit" } },
+    margin: { top: 8, trailing: 8, bottom: 8, leading: 8 },
+    padding: { top: 0, trailing: 0, bottom: 0, leading: 0 },
+    id: "timeline-1",
+    name: "default timeline",
+    items: [
+      {
+        title: {
+          text_lid: "case1",
+          color: defaultColor,
+          horizontal_alignment: "center",
+        },
+        description: {
+          text_lid: "case1d",
+          color: defaultColor,
+          horizontal_alignment: "center",
+        },
+        icon: {
+          name: "check",
+          color: {
+            light: {
+              type: "hex",
+              value: "#FAFAFA",
+            },
+          },
+          width_and_height: 32,
+          padding: 12,
+        },
+        icon_background: {
+          shape: { type: "circle" },
+          color: {
+            light: {
+              type: "hex",
+              value: "#3f3f3f",
+            },
+          },
+        },
+        connector: {
+          width: 8,
+          margin: { top: 0, bottom: 0 },
+          color: { light: { type: "hex", value: "#d3d3d3" } },
+        },
+      },
+      {
+        title: {
+          text_lid: "case2",
+          color: defaultColor,
+          horizontal_alignment: "center",
+        },
+        description: {
+          text_lid: "case2d",
+          color: defaultColor,
+          horizontal_alignment: "center",
+        },
+        icon: {
+          name: "check",
+          color: {
+            light: {
+              type: "hex",
+              value: "#FAFAFA",
+            },
+          },
+          width_and_height: 32,
+          padding: 12,
+        },
+        icon_background: {
+          shape: { type: "circle" },
+          color: {
+            light: {
+              type: "hex",
+              value: "#3f3f3f",
+            },
+          },
+        },
+        connector: {
+          width: 8,
+          margin: { top: 12, bottom: 12 },
+          color: { light: { type: "hex", value: "#d3d3d3" } },
+        },
+      },
+      {
+        title: {
+          text_lid: "case3",
+          color: defaultColor,
+          horizontal_alignment: "center",
+        },
+        description: {
+          text_lid: "case3d",
+          color: defaultColor,
+          horizontal_alignment: "center",
+        },
+        icon: {
+          name: "check",
+          color: {
+            light: {
+              type: "hex",
+              value: "#FAFAFA",
+            },
+          },
+          width_and_height: 32,
+          padding: 12,
+        },
+        icon_background: {
+          shape: { type: "circle" },
+          color: {
+            light: {
+              type: "hex",
+              value: "#3f3f3f",
+            },
+          },
+        },
+        connector: {
+          width: 8,
+          margin: { top: 0, bottom: 12 },
+          color: { light: { type: "hex", value: "#d3d3d3" } },
+        },
+      },
+      {
+        title: {
+          text_lid: "case4",
+          color: defaultColor,
+          horizontal_alignment: "center",
+        },
+        description: {
+          text_lid: "case4d",
+          color: defaultColor,
+          horizontal_alignment: "center",
+        },
+        icon: {
+          name: "check",
+          color: {
+            light: {
+              type: "hex",
+              value: "#FAFAFA",
+            },
+          },
+          width_and_height: 32,
+          padding: 12,
+        },
+        icon_background: {
+          shape: { type: "circle" },
+          color: {
+            light: {
+              type: "hex",
+              value: "#3f3f3f",
+            },
+          },
+        },
+        connector: {
+          width: 8,
+          margin: { top: 12, bottom: 0 },
+          color: { light: { type: "hex", value: "#d3d3d3" } },
+        },
+      },
+      {
+        title: {
+          text_lid: "case5",
+          color: defaultColor,
+          horizontal_alignment: "center",
+        },
+        description: {
+          text_lid: "case5d",
+          color: defaultColor,
+          horizontal_alignment: "center",
+        },
+        icon: {
+          name: "check",
+          color: {
+            light: {
+              type: "hex",
+              value: "#FAFAFA",
+            },
+          },
+          width_and_height: 32,
+          padding: 12,
+        },
+        icon_background: {
+          shape: { type: "circle" },
+          color: {
+            light: {
+              type: "hex",
+              value: "#3f3f3f",
+            },
+          },
+        },
+      },
+    ],
+  } satisfies TimelineProps}
+/>

package/dist/components/timeline/Timeline.stories.svelte.d.ts

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

package/dist/components/timeline/Timeline.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { getTimelineStyles } from "./timeline-utils";
+  import TimelineItem from "./TimelineItem.svelte";
+  import type { TimelineProps } from "../../data/entities";
+  import { stringifyStyles } from "../../utils/style-utils";
+
+  const { items, ...restProps }: TimelineProps = $props();
+
+  const timelineStyles = $derived(
+    stringifyStyles(getTimelineStyles({ items, ...restProps })),
+  );
+</script>
+
+{#if items.length}
+  <div class="timeline-container" style={timelineStyles}>
+    {#each items as item, index}
+      <TimelineItem
+        {...item}
+        labels={restProps.labels}
+        id={`${restProps.id}-${index}`}
+        name={`${restProps.name}-${index}`}
+        type="timeline"
+        purchaseState={restProps.purchaseState}
+        text_spacing={restProps.text_spacing}
+        item_spacing={restProps.item_spacing}
+      />
+    {/each}
+  </div>
+{/if}
+
+<style>
+  .timeline-container {
+    display: flex;
+    flex: var(--flex, 0 1 auto);
+    flex-direction: column;
+    gap: var(--item-spacing, 0);
+    width: var(--width, unset);
+    height: var(--height, unset);
+  }
+</style>

package/dist/components/timeline/Timeline.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { TimelineProps } from "../../data/entities";
+declare const Timeline: import("svelte").Component<TimelineProps, {}, "">;
+type Timeline = ReturnType<typeof Timeline>;
+export default Timeline;