@rainlanguage/ui-components 0.0.1-alpha.24 → 0.0.1-alpha.241

package/dist/components/TanstackAppTable.svelte

@@ -1,73 +1,283 @@
-<script generics="T">import { invalidateIdQuery } from "../queries/queryClient";
+<script generics="DataItem, InputData = DataItem[]">import { invalidateTanstackQueries } from "../queries/queryClient";
 import Refresh from "./icon/Refresh.svelte";
-import { Button, Table, TableBody, TableBodyRow, TableHead } from "flowbite-svelte";
-import { createEventDispatcher } from "svelte";
+import {
+  Button,
+  Table,
+  TableBody,
+  TableBodyRow,
+  TableHead
+} from "flowbite-svelte";
+import {
+  afterUpdate,
+  createEventDispatcher,
+  onDestroy,
+  onMount
+} from "svelte";
 import { useQueryClient } from "@tanstack/svelte-query";
+import {
+  createWindowVirtualizer
+} from "@tanstack/svelte-virtual";
 const queryClient = useQueryClient();
 const dispatch = createEventDispatcher();
 export let queryKey;
 export let query;
 export let emptyMessage = "None found";
 export let rowHoverable = true;
+export let dataSelector = (pageData) => Array.isArray(pageData) ? pageData : [];
+export let virtualization = {};
+$: enableVirtualization = virtualization.enabled ?? true;
+$: estimatedRowHeight = virtualization.estimatedRowHeight ?? 56;
+$: virtualizationOverscan = virtualization.overscan ?? 8;
+let measuredRowHeight = null;
+$: rowHeight = measuredRowHeight ?? estimatedRowHeight;
+let transformedPages = [];
+let lastPagesRef;
+let lastSelector = dataSelector;
+$: {
+  const currentData = $query.data;
+  const currentPages = currentData?.pages;
+  const selectorChanged = lastSelector !== dataSelector;
+  if (!currentPages) {
+    transformedPages = [];
+    lastPagesRef = void 0;
+    lastSelector = dataSelector;
+  } else if (currentPages !== lastPagesRef || selectorChanged) {
+    transformedPages = currentPages.map((page) => dataSelector(page));
+    lastPagesRef = currentPages;
+    lastSelector = dataSelector;
+  }
+}
+$: flattenedRows = transformedPages.flat();
+$: totalRows = flattenedRows.length;
+$: hasData = totalRows > 0;
+$: isInitialLoading = totalRows === 0 && ($query.isLoading || $query.isFetching);
+const hasWindow = typeof window !== "undefined";
+let tableContainerElement = null;
+let tableOffsetTop = 0;
+let virtualizerStore = null;
+let virtualizer = null;
+let unsubscribeVirtualizer = null;
+let virtualizationActive = false;
+function updateTableOffset() {
+  if (!enableVirtualization || !hasWindow || !tableContainerElement) {
+    tableOffsetTop = 0;
+    return;
+  }
+  const rect = tableContainerElement.getBoundingClientRect();
+  tableOffsetTop = rect.top + window.scrollY;
+}
+onMount(() => {
+  if (!hasWindow) {
+    return;
+  }
+  virtualizerStore = createWindowVirtualizer({
+    count: totalRows,
+    estimateSize: () => rowHeight,
+    overscan: virtualizationOverscan,
+    scrollMargin: tableOffsetTop,
+    getItemKey: (index) => index,
+    enabled: enableVirtualization && totalRows > 0
+  });
+  unsubscribeVirtualizer = virtualizerStore.subscribe((instance) => {
+    virtualizer = instance;
+  });
+  updateTableOffset();
+  return () => {
+    unsubscribeVirtualizer?.();
+  };
+});
+afterUpdate(() => {
+  if (enableVirtualization) {
+    updateTableOffset();
+  }
+});
+$: if (virtualizer) {
+  virtualizer.setOptions({
+    count: totalRows,
+    estimateSize: () => rowHeight,
+    overscan: virtualizationOverscan,
+    scrollMargin: tableOffsetTop,
+    getItemKey: (index) => index,
+    enabled: enableVirtualization && totalRows > 0
+  });
+}
+$: virtualizationActive = enableVirtualization && Boolean(virtualizer);
+let virtualItems = [];
+let totalSize = 0;
+let topPadding = 0;
+let bottomPadding = 0;
+let scrollMargin = 0;
+$: {
+  const hasRows = totalRows > 0;
+  scrollMargin = virtualizationActive ? tableOffsetTop : 0;
+  if (virtualizationActive && virtualizer && hasRows) {
+    virtualItems = virtualizer.getVirtualItems();
+    totalSize = virtualizer.getTotalSize();
+    const firstItem = virtualItems[0];
+    const lastItem = virtualItems[virtualItems.length - 1];
+    topPadding = firstItem ? Math.max(0, firstItem.start - scrollMargin) : 0;
+    bottomPadding = lastItem ? Math.max(0, totalSize - (lastItem.end - scrollMargin)) : Math.max(0, totalSize);
+  } else {
+    virtualItems = [];
+    totalSize = 0;
+    topPadding = 0;
+    bottomPadding = 0;
+  }
+}
+onDestroy(() => {
+  unsubscribeVirtualizer?.();
+});
+afterUpdate(() => {
+  if (!virtualizationActive || !virtualizer || !tableContainerElement) {
+    return;
+  }
+  const rows = Array.from(
+    tableContainerElement.querySelectorAll(
+      'tbody tr[data-virtual-row="true"]'
+    )
+  );
+  if (!rows.length) {
+    return;
+  }
+  for (const row of rows) {
+    virtualizer.measureElement(row);
+  }
+  if (measuredRowHeight === null) {
+    const sampleHeight = rows[0].getBoundingClientRect().height;
+    if (sampleHeight > 0) {
+      measuredRowHeight = sampleHeight;
+    }
+  }
+});
 </script>
 
 <div data-testid="title" class="flex h-16 w-full items-center justify-end">
-	<slot name="info" />
-	<slot name="timeFilter" />
-	<slot name="title" />
-	<Refresh
-		class="ml-2 h-8 w-5 cursor-pointer text-gray-400 dark:text-gray-400"
-		data-testid="refreshButton"
-		spin={$query.isLoading || $query.isFetching}
-		on:click={async () => {
-			if (queryKey) {
-				await invalidateIdQuery(queryClient, queryKey);
-			}
-			$query.refetch();
-		}}
-	/>
+  <slot name="info" />
+  <slot name="timeFilter" />
+  <slot name="title" />
+  <Refresh
+    class="ml-2 h-8 w-5 cursor-pointer text-gray-400 dark:text-gray-400"
+    data-testid="refreshButton"
+    title="Refresh"
+    ariaLabel="Refresh"
+    spin={$query.isLoading || $query.isFetching}
+    on:click={async () => {
+      if (queryKey) {
+        invalidateTanstackQueries(queryClient, [queryKey]);
+      }
+    }}
+  />
 </div>
-{#if $query.data?.pages[0].length === 0}
-	<div data-testid="emptyMessage" class="text-center text-gray-900 dark:text-white">
-		{emptyMessage}
-	</div>
-{:else if $query.data}
-	<Table
-		divClass="cursor-pointer rounded-lg overflow-auto dark:border-none border"
-		hoverable={rowHoverable}
-	>
-		<TableHead data-testid="head">
-			<slot name="head" />
-		</TableHead>
-		<TableBody>
-			{#each $query.data?.pages as page}
-				{#each page as item}
-					<TableBodyRow
-						class="whitespace-nowrap"
-						data-testid="bodyRow"
-						on:click={() => {
-							dispatch('clickRow', { item });
-						}}
-					>
-						<slot name="bodyRow" {item} />
-					</TableBodyRow>
-				{/each}
-			{/each}
-		</TableBody>
-	</Table>
-	<div class="mt-2 flex justify-center">
-		<Button
-			data-testid="loadMoreButton"
-			size="xs"
-			color="dark"
-			on:click={() => $query.fetchNextPage()}
-			disabled={!$query.hasNextPage || $query.isFetchingNextPage}
-		>
-			{#if $query.isFetchingNextPage}
-				Loading more...
-			{:else if $query.hasNextPage}
-				Load More
-			{:else}Nothing more to load{/if}
-		</Button>
-	</div>
+{#if isInitialLoading}
+  <div
+    data-testid="tableLoadingSkeleton"
+    class="animate-pulse overflow-hidden rounded-lg border dark:border-gray-700"
+  >
+    <div
+      class="grid grid-cols-5 gap-4 border-b bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-800"
+    >
+      {#each [0, 1, 2, 3, 4] as columnIndex (columnIndex)}
+        <div class="h-3 rounded bg-gray-200 dark:bg-gray-700" />
+      {/each}
+    </div>
+    {#each [0, 1, 2, 3, 4, 5, 6, 7] as rowIndex (rowIndex)}
+      <div
+        class="grid grid-cols-5 gap-4 border-b p-4 last:border-b-0 dark:border-gray-700"
+      >
+        <div class="h-4 rounded bg-gray-200 dark:bg-gray-700" />
+        <div class="h-4 rounded bg-gray-200 dark:bg-gray-700" />
+        <div class="h-4 rounded bg-gray-200 dark:bg-gray-700" />
+        <div class="h-4 rounded bg-gray-200 dark:bg-gray-700" />
+        <div class="h-4 rounded bg-gray-200 dark:bg-gray-700" />
+      </div>
+    {/each}
+  </div>
+{:else if totalRows === 0}
+  <div
+    data-testid="emptyMessage"
+    class="text-center text-gray-900 dark:text-white"
+  >
+    {emptyMessage}
+  </div>
+{:else if hasData}
+  <div
+    class="cursor-pointer overflow-x-auto rounded-lg border dark:border-none"
+    data-testid="tanstackTableContainer"
+    bind:this={tableContainerElement}
+  >
+    <Table
+      divClass="min-w-full"
+      class="w-full table-fixed"
+      hoverable={rowHoverable}
+    >
+      <TableHead data-testid="head">
+        <slot name="head" />
+      </TableHead>
+      <TableBody>
+        {#if virtualizationActive && topPadding > 0}
+          <tr aria-hidden="true">
+            <td
+              colspan="1000"
+              class="border-0 p-0"
+              style={`height:${topPadding}px;`}
+            />
+          </tr>
+        {/if}
+        {#if virtualizationActive}
+          {#each virtualItems as virtualItem (virtualItem.key)}
+            <TableBodyRow
+              class="whitespace-nowrap"
+              data-testid="bodyRow"
+              data-virtual-row="true"
+              on:click={() => {
+                dispatch("clickRow", {
+                  item: flattenedRows[virtualItem.index],
+                });
+              }}
+            >
+              <slot name="bodyRow" item={flattenedRows[virtualItem.index]} />
+            </TableBodyRow>
+          {/each}
+        {:else}
+          {#each transformedPages as page}
+            {#each page as item}
+              <TableBodyRow
+                class="whitespace-nowrap"
+                data-testid="bodyRow"
+                on:click={() => {
+                  dispatch("clickRow", { item });
+                }}
+              >
+                <slot name="bodyRow" {item} />
+              </TableBodyRow>
+            {/each}
+          {/each}
+        {/if}
+        {#if virtualizationActive && bottomPadding > 0}
+          <tr aria-hidden="true">
+            <td
+              colspan="1000"
+              class="border-0 p-0"
+              style={`height:${bottomPadding}px;`}
+            />
+          </tr>
+        {/if}
+      </TableBody>
+    </Table>
+  </div>
+  <div class="mt-2 flex justify-center">
+    <Button
+      data-testid="loadMoreButton"
+      size="xs"
+      color="dark"
+      on:click={() => $query.fetchNextPage()}
+      disabled={!$query.hasNextPage || $query.isFetchingNextPage}
+    >
+      {#if $query.isFetchingNextPage}
+        Loading more...
+      {:else if $query.hasNextPage}
+        Load More
+      {:else}Nothing more to load{/if}
+    </Button>
+  </div>
 {/if}

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

@@ -1,11 +1,17 @@
 import { SvelteComponent } from "svelte";
-import type { CreateInfiniteQueryResult, InfiniteData } from '@tanstack/svelte-query';
-declare class __sveltets_Render<T> {
+import type { CreateInfiniteQueryResult, InfiniteData } from "@tanstack/svelte-query";
+declare class __sveltets_Render<DataItem, InputData = DataItem[]> {
     props(): {
-        queryKey: string | undefined;
-        query: CreateInfiniteQueryResult<InfiniteData<T[], unknown>, Error>;
+        queryKey: string;
+        query: CreateInfiniteQueryResult<InfiniteData<InputData, unknown>, Error>;
         emptyMessage?: string;
         rowHoverable?: boolean;
+        dataSelector?: ((pageData: InputData) => DataItem[]) | undefined;
+        virtualization?: {
+            enabled?: boolean;
+            estimatedRowHeight?: number;
+            overscan?: number;
+        } | undefined;
     };
     events(): {
         clickRow: CustomEvent<any>;
@@ -18,13 +24,13 @@ declare class __sveltets_Render<T> {
         title: {};
         head: {};
         bodyRow: {
-            item: T;
+            item: DataItem;
         };
     };
 }
-export type TanstackAppTableProps<T> = ReturnType<__sveltets_Render<T>['props']>;
-export type TanstackAppTableEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
-export type TanstackAppTableSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
-export default class TanstackAppTable<T> extends SvelteComponent<TanstackAppTableProps<T>, TanstackAppTableEvents<T>, TanstackAppTableSlots<T>> {
+export type TanstackAppTableProps<DataItem, InputData = DataItem[]> = ReturnType<__sveltets_Render<DataItem, InputData>['props']>;
+export type TanstackAppTableEvents<DataItem, InputData = DataItem[]> = ReturnType<__sveltets_Render<DataItem, InputData>['events']>;
+export type TanstackAppTableSlots<DataItem, InputData = DataItem[]> = ReturnType<__sveltets_Render<DataItem, InputData>['slots']>;
+export default class TanstackAppTable<DataItem, InputData = DataItem[]> extends SvelteComponent<TanstackAppTableProps<DataItem, InputData>, TanstackAppTableEvents<DataItem, InputData>, TanstackAppTableSlots<DataItem, InputData>> {
 }
 export {};

package/dist/components/ToastDetail.svelte

@@ -0,0 +1,42 @@
+<script>import { Toast } from "flowbite-svelte";
+import { slide } from "svelte/transition";
+import { CheckCircleSolid, CloseCircleSolid } from "flowbite-svelte-icons";
+import { useToasts } from "../providers/toasts/useToasts";
+export let toast;
+export let i;
+const { removeToast } = useToasts();
+</script>
+
+<Toast
+	on:close={() => removeToast(i)}
+	dismissable={true}
+	transition={slide}
+	color={toast.color}
+	class="mb-2"
+>
+	<svelte:fragment slot="icon">
+		{#if toast.type === 'success'}
+			<CheckCircleSolid class="h-5 w-5" data-testid="success-icon" />
+		{:else if toast.type === 'error'}
+			<CloseCircleSolid class="h-5 w-5" data-testid="error-icon" />
+		{/if}
+	</svelte:fragment>
+	<p class="font-semibold">{toast.message}</p>
+	{#if toast.detail}
+		<p>{toast.detail}</p>
+	{/if}
+	{#if toast.links}
+		<div class="flex flex-col">
+			{#each toast.links as { link, label }}
+				<a
+					href={link}
+					target="_blank"
+					rel="noopener noreferrer"
+					class="text-blue-500 hover:underline"
+				>
+					{label}
+				</a>
+			{/each}
+		</div>
+	{/if}
+</Toast>

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

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { ToastProps } from '../types/toast';
+declare const __propDef: {
+    props: {
+        toast: ToastProps;
+        i: number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type ToastDetailProps = typeof __propDef.props;
+export type ToastDetailEvents = typeof __propDef.events;
+export type ToastDetailSlots = typeof __propDef.slots;
+export default class ToastDetail extends SvelteComponent<ToastDetailProps, ToastDetailEvents, ToastDetailSlots> {
+}
+export {};

package/dist/components/Tooltip.svelte

@@ -0,0 +1,8 @@
+<script>import { Tooltip } from "flowbite-svelte";
+export let triggeredBy = "";
+export let customClass = "";
+</script>
+
+<Tooltip {triggeredBy} class={`z-[99] shadow-none ${customClass}`}>
+	<slot />
+</Tooltip>

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

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        triggeredBy?: string;
+        customClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type TooltipProps = typeof __propDef.props;
+export type TooltipEvents = typeof __propDef.events;
+export type TooltipSlots = typeof __propDef.slots;
+export default class Tooltip extends SvelteComponent<TooltipProps, TooltipEvents, TooltipSlots> {
+}
+export {};

package/dist/components/VaultBalanceChangeTypeFilter.svelte

@@ -0,0 +1,23 @@
+<script>import {} from "@rainlanguage/raindex";
+import DropdownCheckbox from "./dropdown/DropdownCheckbox.svelte";
+import { VAULT_BALANCE_CHANGE_FILTER_LABELS } from "../utils/vaultBalanceChangeLabels";
+export let value = void 0;
+const filterOptions = VAULT_BALANCE_CHANGE_FILTER_LABELS;
+let typeFilter = {};
+$: {
+  const keys = Object.keys(typeFilter);
+  if (keys.length > 0 && keys.length < Object.keys(filterOptions).length) {
+    value = keys.sort();
+  } else {
+    value = void 0;
+  }
+}
+</script>
+
+<DropdownCheckbox
+	options={filterOptions}
+	bind:value={typeFilter}
+	label="Change Type"
+	allLabel="All types"
+	onlyTitle={true}
+/>

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

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import { type VaultBalanceChangeFilter } from '@rainlanguage/raindex';
+declare const __propDef: {
+    props: {
+        value?: VaultBalanceChangeFilter[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type VaultBalanceChangeTypeFilterProps = typeof __propDef.props;
+export type VaultBalanceChangeTypeFilterEvents = typeof __propDef.events;
+export type VaultBalanceChangeTypeFilterSlots = typeof __propDef.slots;
+export default class VaultBalanceChangeTypeFilter extends SvelteComponent<VaultBalanceChangeTypeFilterProps, VaultBalanceChangeTypeFilterEvents, VaultBalanceChangeTypeFilterSlots> {
+}
+export {};

package/dist/components/VaultCard.svelte

@@ -0,0 +1,18 @@
+<script>import { goto } from "$app/navigation";
+export let vault;
+const handleClick = (event) => {
+  event.stopPropagation();
+  event.preventDefault();
+  goto(`/vaults/${vault.chainId}-${vault.raindex}-${vault.id}`);
+};
+</script>
+
+<button
+	type="button"
+	class="flex flex-col rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 text-left shadow-sm transition-colors hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:hover:bg-gray-600"
+	on:click={handleClick}
+	data-testid="vault-card"
+>
+	<span class="font-semibold text-gray-800 dark:text-gray-200">{vault.token.symbol}</span>
+	<span class="truncate text-xs text-gray-500 dark:text-gray-400">{vault.formattedBalance}</span>
+</button>

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

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { RaindexVault } from '@rainlanguage/raindex';
+declare const __propDef: {
+    props: {
+        vault: RaindexVault;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type VaultCardProps = typeof __propDef.props;
+export type VaultCardEvents = typeof __propDef.events;
+export type VaultCardSlots = typeof __propDef.slots;
+export default class VaultCard extends SvelteComponent<VaultCardProps, VaultCardEvents, VaultCardSlots> {
+}
+export {};

package/dist/components/charts/LightweightChart.svelte

@@ -1,4 +1,4 @@
-<script generics="T extends keyof SeriesOptionsMap, D, O">import { Spinner } from "flowbite-svelte";
+<script generics="T extends keyof SeriesOptionsMap, O">import { Spinner } from "flowbite-svelte";
 import {
   createChart
 } from "lightweight-charts";

package/dist/components/charts/LightweightChart.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponent } from "svelte";
 import type { Readable } from 'svelte/store';
 import { type IChartApi, type UTCTimestamp, type ISeriesApi, type WhitespaceData, type Time, type DeepPartial, type SeriesOptionsCommon, type SeriesOptionsMap } from 'lightweight-charts';
-declare class __sveltets_Render<T extends keyof SeriesOptionsMap, D, O> {
+declare class __sveltets_Render<T extends keyof SeriesOptionsMap, O> {
     props(): {
         [x: string]: any;
         data?: {
@@ -21,9 +21,9 @@ declare class __sveltets_Render<T extends keyof SeriesOptionsMap, D, O> {
     };
     slots(): {};
 }
-export type LightweightChartProps<T extends keyof SeriesOptionsMap, D, O> = ReturnType<__sveltets_Render<T, D, O>['props']>;
-export type LightweightChartEvents<T extends keyof SeriesOptionsMap, D, O> = ReturnType<__sveltets_Render<T, D, O>['events']>;
-export type LightweightChartSlots<T extends keyof SeriesOptionsMap, D, O> = ReturnType<__sveltets_Render<T, D, O>['slots']>;
-export default class LightweightChart<T extends keyof SeriesOptionsMap, D, O> extends SvelteComponent<LightweightChartProps<T, D, O>, LightweightChartEvents<T, D, O>, LightweightChartSlots<T, D, O>> {
+export type LightweightChartProps<T extends keyof SeriesOptionsMap, O> = ReturnType<__sveltets_Render<T, O>['props']>;
+export type LightweightChartEvents<T extends keyof SeriesOptionsMap, O> = ReturnType<__sveltets_Render<T, O>['events']>;
+export type LightweightChartSlots<T extends keyof SeriesOptionsMap, O> = ReturnType<__sveltets_Render<T, O>['slots']>;
+export default class LightweightChart<T extends keyof SeriesOptionsMap, O> extends SvelteComponent<LightweightChartProps<T, O>, LightweightChartEvents<T, O>, LightweightChartSlots<T, O>> {
 }
 export {};