@finsweet/webflow-apps-utils 1.0.2 → 1.0.4

package/dist/ui/components/Divider.svelte

@@ -1,31 +0,0 @@
-<script lang="ts">
-	/**
-	 * Height of the divider
-	 */
-	export let height: string = '1px';
-	/**
-	 * Width of the divider
-	 */
-	export let width: string = '100%';
-	/**
-	 * Background color of the divider
-	 */
-	export let background: string = 'var(--border1)';
-	/**
-	 * Orientation of the divider
-	 */
-	export let rotate = false;
-</script>
-
-<div
-	class="divider"
-	style="height:{height}; width:{width}; 
-  background: {background};
-  {rotate ? 'transform: rotate(0deg)' : ''}"
-></div>
-
-<style>
-	.divider {
-		align-self: stretch;
-	}
-</style>

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

@@ -1,31 +0,0 @@
-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 Divider: $$__sveltets_2_IsomorphicComponent<{
-    /**
-         * Height of the divider
-         */ height?: string;
-    /**
-         * Width of the divider
-         */ width?: string;
-    /**
-         * Background color of the divider
-         */ background?: string;
-    /**
-         * Orientation of the divider
-         */ rotate?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Divider = InstanceType<typeof Divider>;
-export default Divider;

package/dist/ui/components/Header.svelte

@@ -1,30 +0,0 @@
-<script lang="ts">
-	import { TriangleDownIcon } from '../icons';
-	export let title = 'Header';
-</script>
-
-<div class="header">
-	<TriangleDownIcon />
-	<span class="title">
-		{title}
-	</span>
-</div>
-
-<style>
-	.header {
-		display: flex;
-		padding: 6px 10px;
-		align-items: center;
-		gap: 8px;
-		border-bottom: 1px solid var(--border1, rgba(255, 255, 255, 0.13));
-		background: var(--background1, #1e1e1e);
-	}
-	.title {
-		color: var(--text-text-1, #d9d9d9);
-		font-family: Inter;
-		font-size: 12px;
-		font-style: normal;
-		font-weight: 500;
-		line-height: 16px;
-	}
-</style>

package/dist/ui/components/Iframe.svelte

@@ -1,89 +0,0 @@
-<script lang="ts">
-	import { FINSWEET_REVERSE_PROXY_URL } from '../../utils';
-
-	/**
-	 * The URL of the iframe
-	 */
-	export let src: string;
-
-	/**
-	 * The ID of the iframe
-	 */
-	export let id: string;
-
-	/**
-	 * The width of the iframe
-	 */
-	export let width: string = '100%';
-
-	/**
-	 * The height of the iframe
-	 */
-	export let height: string = '100%';
-
-	/**
-	 * The title of the iframe
-	 */
-	export let title: string = 'Iframe';
-
-	/**
-	 * Event handler for successful iframe load
-	 */
-	export let onLoadSuccess: () => void = () => {};
-
-	/**
-	 * Event handler for failed iframe load
-	 */
-	export let onLoadError: () => void = () => {};
-
-	let iframeElement: HTMLIFrameElement;
-
-	/**
-	 * Handle the iframe load event
-	 */
-	const handleIframeLoad = () => {
-		const iframe = iframeElement;
-
-		if (iframe?.contentDocument) {
-			const iframeTitle = iframe.contentDocument.title;
-			const { body } = iframe.contentDocument;
-
-			if (
-				body.childNodes.length === 0 ||
-				iframeTitle.indexOf('404') >= 0 ||
-				body.outerHTML.includes('<span>404</span>')
-			) {
-				// Notify parent of the error
-				onLoadError();
-				return;
-			}
-
-			// Notify parent of successful load
-			onLoadSuccess();
-
-			return;
-		}
-
-		// Notify parent of the error
-		onLoadError();
-	};
-</script>
-
-<iframe
-	{id}
-	bind:this={iframeElement}
-	{title}
-	src={`${FINSWEET_REVERSE_PROXY_URL}${src}`}
-	on:load={handleIframeLoad}
-	class="iframe"
-	{width}
-	{height}
-></iframe>
-
-<style>
-	.iframe {
-		border: none;
-		border-radius: 4px;
-		background: var(--text2);
-	}
-</style>

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

@@ -1,40 +0,0 @@
-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 Iframe: $$__sveltets_2_IsomorphicComponent<{
-    /**
-         * The URL of the iframe
-         */ src: string;
-    /**
-         * The ID of the iframe
-         */ id: string;
-    /**
-         * The width of the iframe
-         */ width?: string;
-    /**
-         * The height of the iframe
-         */ height?: string;
-    /**
-         * The title of the iframe
-         */ title?: string;
-    /**
-         * Event handler for successful iframe load
-         */ onLoadSuccess?: () => void;
-    /**
-         * Event handler for failed iframe load
-         */ onLoadError?: () => void;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Iframe = InstanceType<typeof Iframe>;
-export default Iframe;

package/dist/ui/components/InjectComponent.svelte

@@ -1,297 +0,0 @@
-<script lang="ts">
-	import { createEventDispatcher, onMount } from 'svelte';
-	import { writable } from 'svelte/store';
-
-	import { componentInjectErrors } from '../../stores';
-	import { FINSWEET_REVERSE_PROXY_URL } from '../../utils';
-
-	import LoadingScreen from './LoadingScreen.svelte';
-
-	export let sourceUrl: string;
-	export let elementId: string;
-	const targetId = 'target-content';
-
-	const loadingStore = writable(true);
-	const dispatch = createEventDispatcher<{
-		error: { message: string; error: unknown };
-		ready: boolean;
-	}>();
-
-	let errorMessage = '';
-
-	/**
-	 * Handle errors when injecting a component
-	 */
-	function handleError(message: string, error: unknown, consoleDetails?: unknown) {
-		componentInjectErrors.set(true);
-
-		dispatch('error', {
-			message,
-			error
-		});
-
-		// Update local state
-		errorMessage = message;
-		loadingStore.set(false);
-
-		// Dispatch ready event with false to indicate error state
-		dispatch('ready', false);
-
-		throw new Error('Failed to load Component preview, please try again or contact support');
-	}
-
-	/**
-	 * Imports and renders a component from Webflow
-	 */
-	async function importFromWebflow() {
-		try {
-			const url = `${FINSWEET_REVERSE_PROXY_URL}${sourceUrl}`;
-			const response = await fetch(url);
-			if (!response.ok) {
-				handleError(
-					`Failed to fetch: ${response.statusText}`,
-					new Error(`Failed to fetch: ${response.statusText}`),
-					response
-				);
-				return;
-			}
-			const html = await response.text();
-
-			const parser = new DOMParser();
-			const doc = parser.parseFromString(html, 'text/html');
-
-			const sourceElement = doc.getElementById(elementId);
-			if (!sourceElement) {
-				handleError(
-					`Element with ID "${elementId}" not found`,
-					new Error(`Element with ID "${elementId}" not found`)
-				);
-				return;
-			}
-
-			const styles = Array.from(doc.querySelectorAll('style, link[rel="stylesheet"]'))
-				.map((el) => el.outerHTML)
-				.join('\n');
-
-			const headScripts = Array.from(doc.head.querySelectorAll('script'))
-				.map((el) => el.outerHTML)
-				.join('\n');
-
-			const bodyScripts = Array.from(doc.body.querySelectorAll('script'))
-				.map((el) => el.outerHTML)
-				.join('\n');
-
-			const targetElement = document.getElementById(targetId);
-			if (!targetElement) {
-				handleError(
-					`Target element with ID "${targetId}" not found`,
-					new Error(`Target element with ID "${targetId}" not found`)
-				);
-				return;
-			}
-
-			targetElement.innerHTML = '';
-
-			const shadowContainer = document.createElement('div');
-			shadowContainer.style.display = 'contents';
-			const shadowRoot = shadowContainer.attachShadow({ mode: 'open' });
-
-			const iframe = document.createElement('iframe');
-			iframe.style.width = '1280px';
-			iframe.style.height = '720px';
-			iframe.style.border = 'none';
-			iframe.style.display = 'block';
-			iframe.style.transform = 'scale(calc(100% / 1280))';
-			iframe.style.transformOrigin = 'top left';
-			iframe.setAttribute('scrolling', 'no');
-
-			const iframeWrapper = document.createElement('div');
-			iframeWrapper.style.width = '100%';
-			iframeWrapper.style.height = '100%';
-			iframeWrapper.style.overflow = 'hidden';
-			iframeWrapper.style.position = 'relative';
-			iframeWrapper.appendChild(iframe);
-
-			shadowRoot.appendChild(iframeWrapper);
-
-			let lastWidth = 0;
-			const updateIframeScale = () => {
-				const containerWidth = iframeWrapper.clientWidth;
-				if (containerWidth === lastWidth || containerWidth === 0) return;
-				lastWidth = containerWidth;
-
-				const scale = containerWidth / 1280;
-				iframe.style.transform = `scale(${scale})`;
-
-				const scaledHeight = Math.ceil(720 * scale);
-				iframeWrapper.style.height = `${scaledHeight}px`;
-			};
-
-			window.addEventListener('resize', () => {
-				requestAnimationFrame(updateIframeScale);
-			});
-
-			setTimeout(updateIframeScale, 100);
-
-			const htmlAttrs = Array.from(doc.documentElement.attributes)
-				.map((attr) => `${attr.name}="${attr.value}"`)
-				.join(' ');
-
-			const bodyAttrs = Array.from(doc.body.attributes)
-				.map((attr) => `${attr.name}="${attr.value}"`)
-				.join(' ');
-
-			const iframeContent = `
-        <!DOCTYPE html>
-        <html ${htmlAttrs}>
-          <head>
-            <meta charset="UTF-8">
-            <meta name="viewport" content="width=1280, height=720, initial-scale=1.0">
-            <base href="${new URL('/', sourceUrl).href}">
-            ${styles}
-            ${headScripts}
-            <style>
-              html, body {
-                width: 1280px;
-                height: 720px;
-                margin: 0;
-                padding: 0;
-                border-radius: 4px;
-                overflow: hidden;
-                background-color: #353535;
-              }
-            </style>
-          </head>
-          <body ${bodyAttrs} data-source-url="${sourceUrl}" data-element-id="${elementId}">
-            ${sourceElement.outerHTML}
-            ${bodyScripts}
-          </body>
-        </html>
-      `;
-
-			iframe.srcdoc = iframeContent;
-
-			iframe.onload = () => {
-				updateIframeScale();
-
-				try {
-					const iframeDoc = iframe.contentDocument || iframe.contentWindow?.document;
-
-					if (!iframeDoc) return;
-
-					const existingBadges = iframeDoc.querySelectorAll('a.w-webflow-badge');
-					existingBadges.forEach((badge) => badge.remove());
-
-					const script = iframeDoc.createElement('script');
-					script.textContent = `
-            (function() {
-              
-              function removeBadge() {
-                const badges = document.querySelectorAll('a.w-webflow-badge');
-                if (badges.length > 0) {
-                  badges.forEach(badge => badge.remove());
-                }
-              }
-              
-              removeBadge();
-              
-              const observer = new MutationObserver(mutations => {
-                mutations.forEach(mutation => {
-                  if (mutation.addedNodes && mutation.addedNodes.length > 0) {
-                    for (let i = 0; i < mutation.addedNodes.length; i++) {
-                      const node = mutation.addedNodes[i];
-                      
-                      if (node.nodeType === 1) {
-                        if (node.matches && node.matches('a.w-webflow-badge')) {
-                          node.remove();
-                        } else if (node.querySelectorAll) {
-                          const badges = node.querySelectorAll('a.w-webflow-badge');
-                          badges.forEach(badge => badge.remove());
-                        }
-                      }
-                    }
-                  }
-                });
-              });
-              
-              observer.observe(document.body, {
-                childList: true,
-                subtree: true
-              });
-              
-              setInterval(removeBadge, 1000);
-            })();
-          `;
-
-					iframeDoc.body.appendChild(script);
-				} catch (err) {
-					handleError('Failed to inject badge removal script', err);
-				}
-			};
-
-			targetElement.appendChild(shadowContainer);
-
-			await new Promise((resolve) => setTimeout(resolve, 2000));
-
-			loadingStore.set(false);
-
-			// Dispatch ready event with true to indicate successful loading
-			dispatch('ready', true);
-		} catch (error) {
-			const message = error instanceof Error ? error.message : 'Unknown error occurred';
-			handleError(`Import failed: ${message}`, error);
-		}
-	}
-
-	onMount(() => {
-		importFromWebflow();
-	});
-</script>
-
-<div class="inject-wrapper">
-	<LoadingScreen
-		backgroundColor="var(--background1)"
-		active={$loadingStore || !!errorMessage}
-		spinnerSize={30}
-		message={errorMessage ? errorMessage : 'Loading Component preview...'}
-		position="absolute"
-		error={!!errorMessage}
-	/>
-
-	<div
-		class="inject-target"
-		id={targetId}
-		data-target-href={sourceUrl}
-		data-target-id={elementId}
-	></div>
-</div>
-
-<style>
-	.inject-wrapper {
-		width: 100%;
-		position: relative;
-		overflow: hidden;
-		height: 420px;
-		background-color: var(--background1);
-	}
-
-	.inject-target {
-		height: 420px;
-		background-color: var(--background1);
-		width: 100%;
-		border-radius: 4px;
-		overflow: hidden;
-	}
-
-	#target-content {
-		width: 100%;
-		height: 100%;
-		transition: all 0.3s ease;
-	}
-
-	@keyframes spin {
-		to {
-			transform: rotate(360deg);
-		}
-	}
-</style>

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

@@ -1,27 +0,0 @@
-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 InjectComponent: $$__sveltets_2_IsomorphicComponent<{
-    sourceUrl: string;
-    elementId: string;
-}, {
-    error: CustomEvent<{
-        message: string;
-        error: unknown;
-    }>;
-    ready: CustomEvent<boolean>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type InjectComponent = InstanceType<typeof InjectComponent>;
-export default InjectComponent;

package/dist/ui/components/Modal.svelte

@@ -1,139 +0,0 @@
-<!-- 
-  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>