@finsweet/webflow-apps-utils 1.0.1

package/dist/ui/components/ButtonGroup.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+
+	export let id: string;
+	export let buttons: { name: string; value: string }[] = [];
+	export let selected: string;
+	export let disabled = false;
+
+	const dispatch = createEventDispatcher<{
+		select: string;
+	}>();
+
+	/**
+	 * Sets selected value and dispatches the select event.
+	 * @param value
+	 */
+	const selectButton = (value: string) => {
+		if (disabled) return;
+		selected = value;
+		dispatch('select', value);
+	};
+
+	/**
+	 * Handles the keydown event for the button.
+	 * @param event
+	 * @param value
+	 */
+	const handleKeydown = (event: KeyboardEvent, value: string) => {
+		if (disabled) return;
+		if (event.key === 'Enter' || event.key === ' ') {
+			selectButton(value);
+			event.preventDefault();
+		}
+	};
+</script>
+
+<div class="button-group">
+	{#each buttons as { name, value }, index (index)}
+		<div
+			{id}
+			class="button {selected === value ? 'active' : ''} {disabled ? 'disabled' : ''}"
+			role="button"
+			tabindex={disabled ? -1 : 0}
+			on:click={() => selectButton(value)}
+			{...{
+				// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+				//@ts-ignore - svelte v4 types for markdown not supported https://github.com/sveltejs/svelte/issues/4701
+				//on:keydown: (event: KeyboardEvent) => handleKeydown(event, value)
+			}}
+			on:keydown={(event) => handleKeydown(event, value)}
+			aria-disabled={disabled}
+		>
+			{name}
+		</div>
+	{/each}
+</div>
+
+<style>
+	.button-group {
+		display: flex;
+		background: var(
+			--action-action-secondary-background,
+			linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.1) 100%)
+		);
+		border-radius: var(--border-radius);
+		box-shadow: var(--boxShadows-action-secondary);
+	}
+
+	.button {
+		padding: 4px 8px;
+		cursor: pointer;
+		background: transparent;
+		border-radius: 0px;
+		transition: background-color 0.2s;
+		border-width: 0px;
+		margin: 2px 0px;
+		color: var(--text1);
+	}
+
+	.button.disabled {
+		opacity: 0.75;
+		cursor: not-allowed;
+	}
+
+	.button-group .button:first-of-type {
+		margin-left: 2px;
+		border-top-left-radius: var(--border-radius);
+		border-bottom-left-radius: var(--border-radius);
+	}
+
+	.button-group .button:last-of-type {
+		margin-right: 2px;
+		border-top-right-radius: var(--border-radius);
+		border-bottom-right-radius: var(--border-radius);
+	}
+
+	.button:hover {
+		background-color: var(--actionSecondaryBackgroundHover);
+	}
+
+	.button.active {
+		background: var(--background1);
+		color: white;
+		border-radius: var(--border-radius);
+	}
+</style>

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

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

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

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

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

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