@finsweet/webflow-apps-utils 1.0.1

package/dist/ui/components/LoadingScreen.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import { WarningTriangleOutlineIcon } from '../icons';
+	import { Loader, Text } from '.';
+
+	export let message = '';
+	export let position: 'fixed' | 'absolute' = 'fixed';
+	export let active = false;
+	export let error = false;
+	export let raw = false;
+	export let backgroundColor = 'rgba(30, 30, 30, 0.96)';
+	export let spinnerSize = 50;
+</script>
+
+{#if active}
+	<div class="loading-screen" style="position:{position}; background-color: {backgroundColor};">
+		<div class="loading-info {error ? 'error' : ''}">
+			{#if error}
+				<WarningTriangleOutlineIcon />
+				<Text fontSize="20px" fontWeight="600" label="Oops! That was unexpected." />
+			{:else}
+				<Loader size={spinnerSize} />
+			{/if}
+			<Text {raw} label={message} />
+			{#if error}
+				<a href="https://forum.finsweet.com/c/finsweet-components" target="_blank" class="support">
+					<Text fontWeight="600" label="Click here to open Issue" />
+				</a>
+			{/if}
+		</div>
+	</div>
+{/if}
+
+<style>
+	.loading-screen {
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		z-index: 99999999;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 100%;
+	}
+
+	.loading-info.error :global(svg) {
+		width: 40px;
+		height: 40px;
+	}
+
+	.loading-info {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: 10px;
+		color: var(--actionSecondaryText);
+		text-align: center;
+		font-family: Inter;
+		font-size: 11.5px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 16px;
+		letter-spacing: -0.115px;
+	}
+
+	a {
+		color: var(--actionSecondaryText);
+		text-decoration: none;
+	}
+</style>

package/dist/ui/components/LoadingScreen.svelte.d.ts

@@ -0,0 +1,26 @@
+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: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const LoadingScreen: $$__sveltets_2_IsomorphicComponent<{
+    message?: string;
+    position?: "fixed" | "absolute";
+    active?: boolean;
+    error?: boolean;
+    raw?: boolean;
+    backgroundColor?: string;
+    spinnerSize?: number;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type LoadingScreen = InstanceType<typeof LoadingScreen>;
+export default LoadingScreen;

package/dist/ui/components/Modal.svelte

@@ -0,0 +1,139 @@
+<!-- 
+  NOTE: There is a custom Modal that uses DIVs only, checkout ./CustomModal.svelte
+        This CustomModal was made with the purpose of overcoming the z-index property of dialog element
+        It uses the same APIs made available as this
+-->
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	import { CloseIcon } from '../icons';
+
+	// Example Use: https://svelte.dev/examples/modal
+	export let showModal: boolean;
+	/**
+	 * If true, the header bar will not be shown.
+	 */
+	export let showHeader: boolean = true;
+	export let padding: string = 'var(--padding-regular)';
+	let dialog: HTMLDialogElement;
+	let button: HTMLButtonElement;
+
+	onMount(() => {
+		button.focus();
+	});
+
+	$: {
+		if (dialog) {
+			if (showModal) {
+				dialog.showModal();
+			} else {
+				dialog.close();
+			}
+		}
+	}
+
+	/**
+	 * Handles the keydown event on the dialog element.
+	 * @param event
+	 */
+	const handleKeyDown = (e: KeyboardEvent) => {
+		if (e.key === 'Escape') dialog.close();
+	};
+</script>
+
+<dialog
+	bind:this={dialog}
+	on:close={() => {
+		showModal = false;
+	}}
+	on:click|self={() => dialog.close()}
+	on:keydown|self={handleKeyDown}
+>
+	<div
+		on:click|stopPropagation
+		on:keydown|stopPropagation
+		tabindex="0"
+		role="button"
+		style="padding:{padding};"
+	>
+		<div class="header-bar" style="display: {showHeader ? 'flex' : 'none'}">
+			<slot class="flex-grow" name="header" />
+			<button on:click={() => dialog.close()} bind:this={button}><CloseIcon /></button>
+		</div>
+		<slot />
+	</div>
+</dialog>
+
+<style>
+	dialog {
+		max-width: 42em;
+		border-radius: var(--border-radius);
+		border: none;
+		padding: 0;
+		background: var(--background1);
+		color: var(--text1);
+	}
+	dialog::backdrop {
+		z-index: 9999990;
+		background: rgba(0, 0, 0, 0.4);
+	}
+
+	dialog[open] {
+		animation: zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+	}
+	@keyframes zoom {
+		from {
+			transform: scale(0.95);
+		}
+		to {
+			transform: scale(1);
+		}
+	}
+	dialog[open]::backdrop {
+		animation: fade 0.2s ease-out;
+	}
+	@keyframes fade {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+	button {
+		border: none;
+		cursor: default;
+		user-select: none;
+		width: 24px;
+		padding: 0px 4px;
+		font-family: inherit;
+		font-size: inherit;
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 24px;
+		border-radius: 4px;
+		color: rgb(171, 171, 171);
+		background: transparent;
+		box-sizing: border-box;
+		box-shadow: none;
+		align-self: center;
+	}
+
+	button:hover {
+		color: var(--text1);
+		background: var(--hoverColor);
+	}
+
+	.header-bar {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding-bottom: var(--padding-small);
+		border-bottom: 1px solid var(--border1);
+		gap: 4px;
+		width: 100%;
+		margin-bottom: var(--padding-regular);
+	}
+</style>

package/dist/ui/components/Modal.svelte.d.ts

@@ -0,0 +1,42 @@
+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: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const Modal: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    showModal: boolean;
+    /**
+         * If true, the header bar will not be shown.
+         */ showHeader?: boolean;
+    padding?: string;
+}, {
+    header: {
+        class: string;
+    };
+    default: {};
+}>, {
+    click: MouseEvent;
+    keydown: KeyboardEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    header: {
+        class: string;
+    };
+    default: {};
+}, {}, string>;
+type Modal = InstanceType<typeof Modal>;
+export default Modal;

package/dist/ui/components/Navbar.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">
+	import { type Component } from 'svelte';
+
+	import { routerStore } from '../../stores';
+
+	interface NavLink {
+		title: string;
+		link: string;
+		key: string;
+		icon: Component;
+		alignRight?: boolean;
+		disabled?: boolean;
+		showTitle?: boolean;
+	}
+
+	export let items: NavLink[] = [];
+
+	let leftMenus: NavLink[] = [];
+	let rightMenus: NavLink[] = [];
+
+	$: {
+		leftMenus = items.filter((item) => !item.alignRight);
+		rightMenus = items.filter((item) => item.alignRight);
+	}
+
+	/**
+	 * Returns true if the current path matches the link.
+	 */
+	const isPathMatching = (curr: string): boolean => {
+		const current = $routerStore?.url?.pathname;
+		const link = new URL(curr, $routerStore?.url?.origin).pathname;
+
+		return current === link;
+	};
+</script>
+
+<nav class="navbar">
+	{#each [leftMenus, rightMenus] as menus, index (index)}
+		<div class={index === 0 ? 'left' : 'right'} role="tablist">
+			{#each menus as item, index (index)}
+				{@const matches = isPathMatching(item?.link)}
+				<a
+					role="tab"
+					href={item.link}
+					title={item.title}
+					class:active={matches}
+					class:disabled={item.disabled}
+					on:click={() => {
+						routerStore.update((state) => {
+							return {
+								...state,
+								url: new URL(item.link, state?.url?.origin)
+							};
+						});
+					}}
+					aria-label="Opens {item.title} tab."
+				>
+					<svelte:component this={item.icon} />
+					{#if item.showTitle}
+						<span>{item.title}</span>
+					{/if}
+				</a>
+			{/each}
+		</div>
+	{/each}
+</nav>
+
+<style>
+	.navbar {
+		display: flex;
+		justify-content: space-between;
+		align-items: flex-start;
+		align-self: stretch;
+		background: var(--background1, #1e1e1e);
+		padding: 0px var(--spacing-8, 8px);
+		border-bottom: 1px solid var(--border1, rgba(255, 255, 255, 0.13));
+	}
+
+	.navbar .left {
+		display: flex;
+		width: max-content;
+		align-items: flex-start;
+	}
+
+	.left,
+	.right {
+		gap: 8px;
+	}
+
+	.navbar a {
+		display: flex;
+		padding: var(--spacing-12, 12px) 4px;
+		justify-content: center;
+		align-items: center;
+		gap: var(--space-space-1, 4px);
+		color: var(--text1, #f5f5f5);
+		text-decoration: none;
+		text-align: center;
+		font-family: Inter;
+		font-size: 11.5px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 16px;
+		letter-spacing: -0.115px;
+		margin-bottom: -1px;
+		border-bottom: 1px solid var(--background5); /* prevents annoying layout shift on hover*/
+	}
+
+	.navbar .right {
+		display: flex;
+		width: max-content;
+		align-items: flex-end;
+	}
+
+	.navbar a.active {
+		border-bottom: 1px solid var(--text1, #f5f5f5);
+	}
+
+	.navbar a.disabled {
+		opacity: 0.75;
+		cursor: not-allowed;
+	}
+
+	.navbar a :global(svg) {
+		width: 16px;
+		height: 16px;
+	}
+	.navbar a:hover:not(.active) {
+		/* background-color: var(--hoverColor); */
+		border-bottom: 1px solid var(--text1, #f5f5f5);
+	}
+</style>

package/dist/ui/components/Navbar.svelte.d.ts

@@ -0,0 +1,29 @@
+import { type Component } from '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: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Navbar: $$__sveltets_2_IsomorphicComponent<{
+    items?: {
+        title: string;
+        link: string;
+        key: string;
+        icon: Component;
+        alignRight?: boolean;
+        disabled?: boolean;
+        showTitle?: boolean;
+    }[];
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Navbar = InstanceType<typeof Navbar>;
+export default Navbar;

package/dist/ui/components/NoSettingsNeeded.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import PinIcon from '../icons/PinIcon.svelte';
+</script>
+
+<div class="no-settings-wrap">
+	<h2 class="heading">Script settings</h2>
+	<div class="no-settings-card">
+		<PinIcon />
+		<p>No script settings needed</p>
+	</div>
+</div>
+
+<style>
+	.heading {
+		margin-bottom: var(--padding-regular);
+	}
+
+	.no-settings-wrap {
+		padding: var(--padding-regular);
+	}
+
+	.no-settings-card {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		background: var(--background2);
+		border-radius: var(--border-radius);
+		padding: var(--padding-large);
+	}
+</style>

package/dist/ui/components/NoSettingsNeeded.svelte.d.ts

@@ -0,0 +1,18 @@
+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 NoSettingsNeeded: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type NoSettingsNeeded = InstanceType<typeof NoSettingsNeeded>;
+export default NoSettingsNeeded;

package/dist/ui/components/Notification.svelte

@@ -0,0 +1,193 @@
+<script lang="ts">
+	import type { Component } from 'svelte';
+
+	import { TimesIcon, WarningCircleOutlineIcon } from '../icons';
+	import { Text } from '.';
+
+	/**
+	 * The class name to apply to the notification.
+	 */
+	export let className = '';
+	/**
+	 * The message to display.
+	 */
+	export let message = '';
+	/**
+	 * The link to navigate to.
+	 */
+	export let link = '';
+	/**
+	 * The title of the notification.
+	 */
+	export let title = '';
+	/**
+	 * Title font weight
+	 */
+	export let titleFontWeight = 600;
+	/**
+	 * The title of the link.
+	 */
+	export let linkTitle = '';
+	/**
+	 * Whether to show the close icon.
+	 */
+	export let closeIcon = true;
+	/**
+	 * The icon to display.
+	 */
+	export let defaultIcon: Component = WarningCircleOutlineIcon;
+	/**
+	 * The icon to display for the link.
+	 */
+	export let linkIcon: Component | null = null;
+	/**
+	 * The type of notification. Defaults to 'warning'.
+	 * You can pass a color string to use a custom color.
+	 */
+	export let type: 'warning' | 'error' | string = 'warning';
+	/**
+	 * Whether to show the richtext message
+	 */
+	export let richtextMessage = false;
+	/**
+	 * Whether to show the richtext title
+	 */
+	export let richTextTitle = false;
+	/**
+	 * Whether to show the border left
+	 */
+	export let borderLeft = true;
+
+	let colors: {
+		icon: string;
+		border: string;
+	};
+
+	$: {
+		if (type === 'warning') {
+			colors = {
+				icon: '#FFD301',
+				border: 'var(--yellowBorder)'
+			};
+		}
+
+		if (type === 'error') {
+			colors = {
+				icon: '#FF8A8A',
+				border: 'var(--redBorder)'
+			};
+		}
+
+		if (type === 'success') {
+			colors = {
+				icon: '#63D489',
+				border: 'var(--greenIcon)'
+			};
+		}
+
+		if (type !== 'warning' && type !== 'error' && type !== 'success') {
+			// accept string as color code
+			colors = {
+				icon: type,
+				border: type
+			};
+		}
+	}
+</script>
+
+<div
+	class="wrapper {className}"
+	style={!borderLeft ? '' : `border-left: 2px solid ${colors.border};`}
+>
+	<span style="color:{colors.icon};">
+		<svelte:component this={defaultIcon} />
+	</span>
+	<div class="content">
+		{#if title}
+			<Text
+				label={title}
+				fontSize="normal"
+				fontWeight={titleFontWeight.toString()}
+				raw={richTextTitle}
+			/>
+		{/if}
+		<div class="message">
+			{#if message}
+				<Text label={message} fontColor="var(--text2)" raw={richtextMessage} />
+			{/if}
+
+			{#if link && linkTitle}
+				<a href={link} class="link" target="_blank"
+					><span>{linkTitle}</span>
+					<svelte:component this={linkIcon} />
+				</a>
+			{/if}
+		</div>
+		<slot name="actions" />
+	</div>
+	<div
+		style={!closeIcon ? 'display:none;' : ''}
+		on:click
+		on:keydown={() => {}}
+		tabindex="0"
+		role="button"
+		aria-label="Close"
+		class="close-icon"
+	>
+		<TimesIcon />
+	</div>
+</div>
+
+<style>
+	.content {
+		display: flex;
+		padding-right: var(--spacing-24, 24px);
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 4px;
+		flex: 1 0 0;
+	}
+	.close-icon {
+		cursor: pointer;
+	}
+	.link :global(svg) {
+		color: var(--blue-blue-text, #8ac2ff);
+	}
+	.link {
+		color: var(--blue-blue-text, #8ac2ff);
+		font-family: Inter;
+		font-size: 11px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 16px;
+		cursor: pointer;
+		text-decoration: none;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: max-content;
+	}
+	.wrapper {
+		display: flex;
+		padding: 8px;
+		align-items: flex-start;
+		gap: 8px;
+		align-self: stretch;
+		border-radius: 4px;
+		background: var(--background-background-3, #363636);
+	}
+	.message {
+		color: var(--text-text-2, #bdbdbd);
+		font-family: Inter;
+		font-size: 11px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 16px;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: flex-start;
+		gap: 4px;
+		align-self: stretch;
+	}
+</style>