@finsweet/webflow-apps-utils 1.0.1 → 1.0.3

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>

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

@@ -1,42 +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;
-}
-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

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

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

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