@finsweet/webflow-apps-utils 1.0.1

package/dist/ui/components/ImageUpload.svelte

@@ -0,0 +1,213 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	import { onDestroy } from 'svelte';
+
+	import { DeleteOutlinedIcon, FileUploadIcon, RefreshIcon } from '../icons';
+	import { Button } from './button';
+	import { Text } from './text';
+
+	type FileChangeEvent = {
+		file: File | null;
+		error: string | null;
+	};
+
+	export let id: string = crypto.randomUUID();
+	export let name: string = 'image';
+	export let label: string = '';
+	export let invalidFileTypeMessage: string;
+	export let required: boolean = false;
+	export let showPreview: boolean = false;
+	export let error: string = '';
+	export let buttonText: string;
+	export let acceptedTypes: string[];
+	export let maxFileSize: number;
+	export let invalidFileSizeMessage: string;
+
+	let input: HTMLInputElement;
+	let previewUrl = '';
+	let showImage = false;
+	let localError = '';
+
+	const dispatch = createEventDispatcher<{
+		change: FileChangeEvent;
+	}>();
+
+	/**
+	 * Validate the file type and size
+	 * @param file
+	 */
+	const validateFile = (file: File): string | null => {
+		if (!acceptedTypes.includes(file.type)) {
+			return invalidFileTypeMessage;
+		}
+		if (file.size > maxFileSize) {
+			return invalidFileSizeMessage;
+		}
+		return null;
+	};
+
+	/**
+	 * Handle the file change event
+	 */
+	const handleChange = (): void => {
+		const file = input.files?.[0];
+		localError = '';
+
+		if (previewUrl) {
+			URL.revokeObjectURL(previewUrl);
+			previewUrl = '';
+		}
+		showImage = false;
+
+		if (!file) {
+			dispatch('change', { file: null, error: null });
+			return;
+		}
+
+		const validationError = validateFile(file);
+		if (validationError) {
+			localError = validationError;
+			input.value = '';
+			dispatch('change', { file: null, error: validationError });
+			return;
+		}
+
+		// Create preview
+		previewUrl = URL.createObjectURL(file);
+		showImage = true;
+
+		dispatch('change', { file, error: null });
+	};
+
+	/**
+	 * Trigger the file input
+	 */
+	const triggerFileInput = () => {
+		input.click();
+	};
+
+	/**
+	 * Delete the file input
+	 */
+	export const reset = () => {
+		input.value = '';
+		previewUrl = '';
+		showImage = false;
+		dispatch('change', { file: null, error: null });
+	};
+
+	onDestroy(() => {
+		if (previewUrl) {
+			URL.revokeObjectURL(previewUrl);
+		}
+	});
+</script>
+
+<div class="image-upload">
+	{#if label}
+		<label for={id} class="label">
+			<Text {label} />
+			{#if required}<span class="required">*</span>{/if}
+		</label>
+	{/if}
+
+	<div class="upload-container" class:hidden={!!previewUrl}>
+		<input
+			{id}
+			{name}
+			{required}
+			accept=".jpg,.jpeg,.png"
+			bind:this={input}
+			on:change={handleChange}
+			type="file"
+			class="file-input"
+		/>
+
+		<Button text={buttonText} onclick={triggerFileInput} icon={FileUploadIcon} />
+	</div>
+
+	{#if showImage && previewUrl && showPreview}
+		<div class="preview-container">
+			<div class="file-preview" style="background-image: url({previewUrl})"></div>
+		</div>
+	{/if}
+	{#if previewUrl}
+		<div class="action-buttons">
+			<Button text="Replace" variant="secondary" onclick={triggerFileInput} icon={RefreshIcon} />
+			<Button text="Delete" variant="secondary" onclick={reset} icon={DeleteOutlinedIcon} />
+		</div>
+	{/if}
+
+	{#if error || localError}
+		<Text label={error || localError} fontColor="var(--redText)" />
+	{/if}
+</div>
+
+<style>
+	.action-buttons {
+		display: flex;
+		padding-top: 4px;
+		align-items: flex-start;
+		gap: var(--Spacing-8, 8px);
+	}
+	.file-preview {
+		width: 222px;
+		aspect-ratio: 16/9;
+		border-radius: 2.553px;
+		background: var(--background3);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background-size: cover !important;
+		background-repeat: no-repeat !important;
+		background-position: center !important;
+	}
+	.image-upload {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+		width: 100%;
+	}
+
+	.label {
+		display: flex;
+		gap: 4px;
+	}
+
+	.required {
+		color: #dc2626;
+	}
+
+	.upload-container :global(.button-left-icon) {
+		display: flex;
+		align-items: center;
+	}
+	.upload-container {
+		position: relative;
+		display: inline-block;
+	}
+	.upload-container.hidden {
+		display: none;
+	}
+
+	.file-input {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		border: 0;
+	}
+
+	.preview-container {
+		display: flex;
+		width: 240px;
+		padding: 7.66px;
+		flex-direction: column;
+		align-items: flex-start;
+		border-radius: 2.553px;
+		border: 0.638px solid var(--border1);
+	}
+</style>

package/dist/ui/components/ImageUpload.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;
+}
+declare const ImageUpload: $$__sveltets_2_IsomorphicComponent<{
+    id?: string;
+    name?: string;
+    label?: string;
+    invalidFileTypeMessage: string;
+    required?: boolean;
+    showPreview?: boolean;
+    error?: string;
+    buttonText: string;
+    acceptedTypes: string[];
+    maxFileSize: number;
+    invalidFileSizeMessage: string;
+    /**
+         * Delete the file input
+         */ reset?: () => void;
+}, {
+    change: CustomEvent<{
+        file: File | null;
+        error: string | null;
+    }>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    /**
+         * Delete the file input
+         */ reset: () => void;
+}, string>;
+type ImageUpload = InstanceType<typeof ImageUpload>;
+export default ImageUpload;

package/dist/ui/components/InjectComponent.svelte

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

@@ -0,0 +1,27 @@
+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/Loader.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	export let size: number = 48;
+	export let color: string = 'white';
+	export let speed: number = 1;
+	export let margin: string = '0';
+	export let trackColor: string = 'var(--text2)';
+
+	// Calculate proportional values based on the original design (24px size, 9px radius, 2px stroke)
+	$: radius = (size * 9) / 24; // Original radius was 9 for 24px size
+	$: strokeWidth = (size * 2) / 24; // Original stroke was 2 for 24px size
+	$: center = size / 2;
+	$: circumference = 2 * Math.PI * radius;
+	$: dashLength = circumference / 4; // Quarter circle
+	$: gapLength = circumference - dashLength;
+</script>
+
+<div class="wrapper" style={`margin: ${margin};`}>
+	<svg class="loader-svg" width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+		<!-- Background track circle with opacity -->
+		<circle
+			cx={center}
+			cy={center}
+			r={radius}
+			fill="none"
+			stroke={trackColor}
+			stroke-width={strokeWidth}
+			opacity="0.2"
+		/>
+
+		<!-- Animated quarter arc -->
+		<circle
+			cx={center}
+			cy={center}
+			r={radius}
+			fill="none"
+			stroke={color}
+			stroke-width={strokeWidth}
+			stroke-dasharray={`${dashLength} ${gapLength}`}
+			stroke-linecap="round"
+			class="loader-arc"
+			style={`animation-duration: ${speed}s; transform-origin: ${center}px ${center}px;`}
+		/>
+	</svg>
+</div>
+
+<style>
+	.wrapper {
+		height: 100%;
+		width: 100%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.loader-arc {
+		animation: rotation linear infinite;
+		transform-origin: center;
+	}
+
+	@keyframes rotation {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+</style>

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

@@ -0,0 +1,24 @@
+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 Loader: $$__sveltets_2_IsomorphicComponent<{
+    size?: number;
+    color?: string;
+    speed?: number;
+    margin?: string;
+    trackColor?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Loader = InstanceType<typeof Loader>;
+export default Loader;