@finsweet/webflow-apps-utils 1.0.2 → 1.0.3

package/dist/utils/webflow-canvas/getSiteStagingUrl.js

@@ -1,8 +1,5 @@
 /**
- * Returns a valid webflow project staging URL.
- * @param {boolean} origin - If true, returns the origin URL (without https:// and without trailing slash).
- * @param {boolean} stagingName - If true, returns the staging name (without .webflow.io).
- * @returns {string}
+ * Returns a valid Webflow project staging URL.
  */
 export const getSiteStagingUrl = async (origin, stagingName) => {
     const { shortName } = await webflow.getSiteInfo();

package/dist/utils/webflow-canvas/index.d.ts

@@ -1,3 +1,4 @@
 export * from './attributes';
+export * from './findInstanceElement';
 export * from './getAllPages';
 export * from './getSiteStagingUrl';

package/dist/utils/webflow-canvas/index.js

@@ -1,3 +1,4 @@
 export * from './attributes';
+export * from './findInstanceElement';
 export * from './getAllPages';
 export * from './getSiteStagingUrl';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finsweet/webflow-apps-utils",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Shared utilities for Webflow apps",
   "homepage": "https://github.com/finsweet/webflow-apps-utils",
   "repository": {
@@ -48,6 +48,9 @@
     "@testing-library/svelte": "^5.2.4",
     "@testing-library/user-event": "^14.6.1",
     "@types/js-cookie": "^3.0.6",
+    "@types/lodash": "^4.17.18",
+    "@types/lodash-es": "^4.17.12",
+    "@types/lodash.isequal": "^4.5.8",
     "@types/node": "^22",
     "@vitest/browser": "3.2.3",
     "@vitest/coverage-v8": "3.2.3",
@@ -78,8 +81,12 @@
     "clipboard": "^2.0.11",
     "js-cookie": "^3.0.5",
     "just-debounce": "^1.1.0",
+    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
+    "lodash.isequal": "^4.5.0",
     "logrocket": "^10.1.0",
-    "simplebar": "^6.3.1",
+    "overlayscrollbars": "^2.11.4",
+    "overlayscrollbars-svelte": "^0.5.5",
     "svelte-routing": "^2.13.0",
     "swiper": "^11.2.8",
     "uuid": "^11.1.0",

package/dist/stores/globalStore.d.ts

@@ -1,10 +0,0 @@
-export type GlobalStoreState = {
-    componentKey: string | null;
-    editMode: boolean;
-    state: Record<string, any> | null;
-    repairMode: boolean;
-    formKey: string | null;
-    formUpdateKey: string | null;
-    title: string | null;
-};
-export declare const globalStore: import("svelte/store").Writable<GlobalStoreState>;

package/dist/stores/globalStore.js

@@ -1,10 +0,0 @@
-import { writable } from 'svelte/store';
-export const globalStore = writable({
-    componentKey: null,
-    editMode: false,
-    state: null,
-    formKey: null,
-    formUpdateKey: null,
-    repairMode: false,
-    title: null
-});

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

@@ -1,28 +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 ButtonGroup: $$__sveltets_2_IsomorphicComponent<{
-    id: string;
-    buttons?: {
-        name: string;
-        value: string;
-    }[];
-    selected: string;
-    disabled?: boolean;
-}, {
-    select: CustomEvent<string>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ButtonGroup = InstanceType<typeof ButtonGroup>;
-export default ButtonGroup;

package/dist/ui/components/Checkbox.svelte

@@ -1,94 +0,0 @@
-<script lang="ts">
-	import { createEventDispatcher } from 'svelte';
-
-	import { SquareCheckIcon } from '../icons';
-
-	/**
-	 * This is the value of the checkbox.
-	 */
-	export let value: boolean = false;
-	/**
-	 * This means the checkbox is disabled.
-	 */
-	export let disabled: boolean = false;
-	/**
-	 * This means you are using an external state to control the checkbox.
-	 */
-	export let preventChange: boolean = false;
-	/**
-	 * This is the id of the checkbox.
-	 */
-	export let id: string = '';
-	/**
-	 * This is the type of the checkbox. Defaults to `checkbox`.
-	 */
-	export let type: 'checkbox' | 'radio' = 'checkbox';
-
-	let checked: boolean = false;
-	const dispatch = createEventDispatcher<{
-		change: boolean;
-	}>();
-
-	// Ensure checked is always in sync with value
-	$: checked = value;
-
-	/**
-	 * Handles click events on the toggle, dispatching the change.
-	 */
-	const handleClick = (): void => {
-		if (disabled || preventChange) return;
-		checked = !checked;
-
-		dispatch('change', checked);
-	};
-</script>
-
-<div
-	class="custom-checkbox {type} {checked ? 'checked' : ''} {disabled ? 'disabled' : ''}"
-	on:click={handleClick}
-	on:keydown={() => {}}
-	role="checkbox"
-	tabindex="0"
-	aria-checked={`${checked}`}
-	{id}
->
-	{#if checked}
-		<SquareCheckIcon />
-	{/if}
-</div>
-
-<style>
-	.custom-checkbox {
-		width: 16px;
-		height: 16px;
-		border-radius: 4px;
-		border: 2px solid #ffffff1a;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		cursor: pointer;
-	}
-	.custom-checkbox.radio {
-		border-radius: 50%;
-	}
-	.custom-checkbox :global(svg) {
-		width: 16px;
-		height: 16px;
-	}
-	.custom-checkbox.checked {
-		color: white;
-		border: none;
-	}
-
-	.custom-checkbox.checked :global(svg) {
-		color: white;
-		background: #006acc;
-		border-radius: 4px;
-	}
-	.custom-checkbox.checked.radio :global(svg) {
-		border-radius: 50%;
-	}
-	.custom-checkbox.disabled {
-		cursor: not-allowed;
-	}
-</style>

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

@@ -1,36 +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 Checkbox: $$__sveltets_2_IsomorphicComponent<{
-    /**
-         * This is the value of the checkbox.
-         */ value?: boolean;
-    /**
-         * This means the checkbox is disabled.
-         */ disabled?: boolean;
-    /**
-         * This means you are using an external state to control the checkbox.
-         */ preventChange?: boolean;
-    /**
-         * This is the id of the checkbox.
-         */ id?: string;
-    /**
-         * This is the type of the checkbox. Defaults to `checkbox`.
-         */ type?: "checkbox" | "radio";
-}, {
-    change: CustomEvent<boolean>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Checkbox = InstanceType<typeof Checkbox>;
-export default Checkbox;

package/dist/ui/components/Copy.svelte

@@ -1,329 +0,0 @@
-<script lang="ts">
-	import ClipboardJS from 'clipboard';
-	import { onDestroy } from 'svelte';
-	import { writable } from 'svelte/store';
-	import { v4 as uuidv4 } from 'uuid';
-
-	import { trimExtraSpaces } from '../../utils/helpers';
-
-	import {
-		ArrowIcon,
-		CheckCircleOutlinedIcon,
-		CodeIcon,
-		CopyIcon,
-		EyeIcon,
-		WarningCircleOutlineIcon
-	} from '../icons';
-
-	export let heading;
-	export let upToDate = false;
-	export let hidden = false;
-	export let disabled = false;
-	export let raw = false;
-	export let scriptUpdated = false;
-	export let showHeader = true;
-	export let comment = '';
-	export let shortName = '';
-	export let leftSpacing = '0px';
-	export let title = 'Click to copy snippet';
-	export let showLink = false;
-	let snippetElement: HTMLElement;
-	let copied = writable<boolean>();
-	let notified = writable<boolean>(false);
-
-	export let content: string;
-	const id: string = uuidv4();
-	let isCooldown: boolean = false;
-
-	/**
-	 * Notify the user with a cooldown
-	 * @param type
-	 * @param message
-	 */
-	const notifyWithCooldown = (type: 'Success' | 'Error', message: string) => {
-		if (!isCooldown) {
-			webflow.notify({ type, message });
-			notified.set(true);
-			isCooldown = true;
-			setTimeout(() => {
-				isCooldown = false;
-			}, 1000);
-		}
-	};
-
-	let clipboard: ClipboardJS | null = null;
-
-	$: {
-		clipboard?.destroy();
-		if (snippetElement && !disabled) {
-			clipboard = new ClipboardJS(snippetElement, {
-				text: () => {
-					if (disabled) {
-						webflow?.notify({
-							type: 'Error',
-							message: 'Select a category before updating the script.'
-						});
-						return '';
-					}
-
-					if (raw) {
-						if (comment) return `<!-- ${comment} -->\n${content}`;
-
-						return content;
-					}
-
-					const target = snippetElement?.querySelector<HTMLElement>('#text-content');
-
-					if (target) {
-						return target.innerText;
-					}
-
-					webflow?.notify({
-						type: 'Error',
-						message: 'Failed to copy. Try again or contact Finsweet support.'
-					});
-					return '';
-				}
-			});
-
-			clipboard.on('success', (e: ClipboardJS.Event) => {
-				copied.set(true);
-				notifyWithCooldown('Success', 'Copied to clipboard!');
-				e.clearSelection();
-			});
-		}
-	}
-
-	$: if ($notified) {
-		setTimeout(() => notified.set(false), 2000);
-	}
-
-	onDestroy(() => {
-		clipboard?.destroy();
-	});
-</script>
-
-{#if !hidden}
-	<div class="scripts scan-result" style={hidden ? 'display:none;' : ''}>
-		{#if showHeader}
-			<div class="info">
-				<div class="header {upToDate ? 'completed' : 'pending'}">
-					{#if upToDate}
-						<CheckCircleOutlinedIcon />
-					{:else}
-						<WarningCircleOutlineIcon />
-					{/if}
-					<div class="text-wrapper">
-						{#if raw}
-							<div class="instruction text">{heading}</div>
-						{:else}
-							<div class="instruction script">{@html heading}</div>
-						{/if}
-						<slot name="content" />
-					</div>
-					<!-- <div class="state">
-            <span class="status {upToDate || $copied ? 'success' : 'pending'}"
-              >{$copied ? 'Copied' : upToDate ? '' : 'Pending'}</span
-            >
-          </div> -->
-				</div>
-			</div>
-		{/if}
-		<div
-			class="copy {disabled ? 'disabled' : ''} {scriptUpdated ? 'script-snippet' : ''}"
-			bind:this={snippetElement}
-			on:keydown={() => {}}
-			tabindex="0"
-			role="button"
-			aria-label="Copy snippet"
-			{title}
-			style="{upToDate ? 'display:none' : ''} margin-left:{leftSpacing};"
-		>
-			<div class="content {disabled ? 'disabled' : ''} {id}" data-target="snippet">
-				<span id="text-content">
-					{raw ? content : (trimExtraSpaces(content) ?? '')}
-				</span>
-			</div>
-			<span class="icon">
-				{#if disabled}
-					<EyeIcon />
-				{:else}
-					<CopyIcon size={16} />
-				{/if}
-			</span>
-		</div>
-
-		<slot name="customCodeLinks" />
-
-		{#if (showLink || !upToDate) && !$$slots?.customCodeLinks}
-			<div class="settings-link" style="margin-left:{leftSpacing};">
-				<a
-					href={`https://webflow.com/dashboard/sites/${shortName}/code`}
-					target="_blank"
-					class="new-tab-link"><CodeIcon />Open Custom code in a new tab <ArrowIcon /></a
-				>
-			</div>
-		{/if}
-	</div>
-{/if}
-
-<style>
-	.settings-link {
-		display: flex;
-		align-self: stretch;
-		justify-content: start;
-		width: 100%;
-	}
-	.text-wrapper {
-		display: flex;
-		flex-direction: column;
-		gap: 4px;
-	}
-	.new-tab-link {
-		display: flex;
-		padding: 4px;
-		justify-content: center;
-		align-items: center;
-		gap: 2px;
-		text-decoration: none;
-		color: var(--blueText);
-		text-align: center;
-		font-family: Inter;
-		font-size: 11.5px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 16px;
-		letter-spacing: -0.115px;
-	}
-	.header {
-		display: flex;
-		gap: 10px;
-		align-items: start;
-		height: max-content;
-	}
-	.header.completed :global(svg) {
-		color: var(--green-green-text, #63d489);
-	}
-	.header.pending :global(svg) {
-		color: var(--yellow-yellow-text, #ffc700);
-	}
-	.status.pending {
-		color: var(--yellow-yellow-text, #ffc700);
-	}
-	.status.success {
-		color: var(--green-green-text, #63d489);
-	}
-	.status {
-		text-align: right;
-	}
-	.status,
-	.info {
-		font-family: Inter;
-		font-size: 11px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 16px;
-	}
-	.info {
-		display: flex;
-		justify-content: space-between;
-		width: 100%;
-		min-width: 290px;
-		align-items: center;
-		gap: 4px;
-	}
-	.info .instruction {
-		flex-grow: 1;
-		align-items: center;
-		display: flex;
-		height: 100%;
-		color: #fff;
-		font-family: Inter;
-		font-size: 12px;
-		font-style: normal;
-		font-weight: 500;
-		line-height: 16px;
-	}
-	/* .info .state {
-    flex-grow: 0;
-    flex-shrink: 0;
-    width: 45px;
-  } */
-
-	.copy.script-snippet {
-		margin-left: 25px;
-	}
-	.copy .content span {
-		display: flex;
-	}
-
-	.copy .content {
-		color: var(--text-text-1, #d9d9d9);
-		font-family: Inter;
-		font-size: 11px;
-		font-style: normal;
-		font-weight: 500;
-		line-height: 16px;
-		display: flex;
-		align-items: start;
-		align-self: stretch;
-		overflow: auto;
-		width: 100%;
-		white-space: pre-wrap;
-		word-wrap: break-word;
-		max-width: 600px;
-		min-height: max-content;
-	}
-	.copy .content.disabled {
-		cursor: not-allowed;
-		color: var(--text2);
-		flex: 1 0 0;
-	}
-	.scripts {
-		display: flex;
-		padding: var(--spacing-16, 16px);
-		flex-direction: column;
-		align-items: flex-start;
-		gap: 12px;
-		align-self: stretch;
-	}
-
-	.copy {
-		border-radius: 4px;
-		background: var(
-			--actionSecondaryBackground,
-			linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.1) 100%),
-			rgba(255, 255, 255, 0.08)
-		);
-		box-shadow:
-			0px 0.5px 0.5px 0px rgba(255, 255, 255, 0.12) inset,
-			0px 0.5px 1px 0px #000;
-		display: flex;
-		padding: 6px var(--Spacing-8, 8px);
-		align-items: flex-start;
-		gap: var(--Spacing-8, 8px);
-		align-self: stretch;
-		flex: 1 0 0;
-		color: var(--text2);
-		font-family: Inter;
-		font-size: 12px;
-		font-style: normal;
-		font-weight: 500;
-		line-height: 16px;
-		cursor: pointer;
-		justify-content: space-between;
-		flex-direction: row;
-	}
-	.copy span.icon {
-		height: 16px;
-	}
-	.copy.disabled {
-		background: none;
-		cursor: not-allowed;
-		color: var(--text2);
-		border-radius: var(--border-radius, 4px);
-		border: 1px solid var(--actionSecondaryBorder);
-		opacity: 0.75;
-		box-shadow: none;
-	}
-</style>

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

@@ -1,35 +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 Copy: $$__sveltets_2_IsomorphicComponent<{
-    heading: any;
-    upToDate?: boolean;
-    hidden?: boolean;
-    disabled?: boolean;
-    raw?: boolean;
-    scriptUpdated?: boolean;
-    showHeader?: boolean;
-    comment?: string;
-    shortName?: string;
-    leftSpacing?: string;
-    title?: string;
-    showLink?: boolean;
-    content: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    content: {};
-    customCodeLinks: {};
-}, {}, string>;
-type Copy = InstanceType<typeof Copy>;
-export default Copy;