@finsweet/webflow-apps-utils 1.0.31 → 1.0.33

package/dist/ui/components/select/Select.stories.d.ts

@@ -68,6 +68,14 @@ declare const meta: {
             control: string;
             description: string;
         };
+        alert: {
+            control: string;
+            description: string;
+        };
+        invalid: {
+            control: string;
+            description: string;
+        };
     };
 };
 export default meta;
@@ -92,3 +100,11 @@ export declare const SingleOption: Story;
 export declare const LongOptions: Story;
 export declare const AccessibilityTest: Story;
 export declare const ManyOptions: Story;
+export declare const WithErrorAlert: Story;
+export declare const WithWarningAlert: Story;
+export declare const WithSuccessAlert: Story;
+export declare const WithInfoAlert: Story;
+export declare const InvalidState: Story;
+export declare const InvalidWithAlert: Story;
+export declare const ValidationStates: Story;
+export declare const FormValidationExample: Story;

package/dist/ui/components/select/Select.stories.js

@@ -114,6 +114,14 @@ const meta = {
         className: {
             control: 'text',
             description: 'Additional CSS classes'
+        },
+        alert: {
+            control: 'object',
+            description: 'Alert configuration for validation messages'
+        },
+        invalid: {
+            control: 'boolean',
+            description: 'Whether the select is in an invalid state'
         }
     }
 };
@@ -394,3 +402,168 @@ export const ManyOptions = {
         }
     }
 };
+// Validation and error states
+export const WithErrorAlert = {
+    args: {
+        options: basicOptions,
+        defaultText: 'Select a required option',
+        alert: {
+            type: 'error',
+            message: 'This field is required. Please select an option.'
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Shows an error alert with a validation message. Hover over the select to see the tooltip.'
+            }
+        }
+    }
+};
+export const WithWarningAlert = {
+    args: {
+        options: basicOptions,
+        selected: 'option3',
+        defaultText: 'Select an option',
+        alert: {
+            type: 'warning',
+            message: 'This option may affect performance. Consider choosing a different option.'
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Warning alert to inform users about potential issues with their selection.'
+            }
+        }
+    }
+};
+export const WithSuccessAlert = {
+    args: {
+        options: basicOptions,
+        selected: 'option1',
+        defaultText: 'Select an option',
+        alert: {
+            type: 'success',
+            message: 'Great choice! This option is optimized for your use case.'
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Success alert to confirm a good selection or provide positive feedback.'
+            }
+        }
+    }
+};
+export const WithInfoAlert = {
+    args: {
+        options: basicOptions,
+        defaultText: 'Select configuration',
+        alert: {
+            type: 'info',
+            message: 'Tip: You can change this setting later in your preferences.'
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Info alert to provide additional context or helpful information.'
+            }
+        }
+    }
+};
+export const InvalidState = {
+    args: {
+        options: basicOptions,
+        defaultText: 'Invalid selection',
+        invalid: true
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Shows the select in an invalid state with red outline styling.'
+            }
+        }
+    }
+};
+export const InvalidWithAlert = {
+    args: {
+        options: basicOptions,
+        defaultText: 'Select a value',
+        invalid: true,
+        alert: {
+            type: 'error',
+            message: 'Please select a valid option to continue.'
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Combines invalid state styling with an error alert message for comprehensive validation feedback.'
+            }
+        }
+    }
+};
+export const ValidationStates = {
+    args: {
+        options: [
+            { label: 'Option A', value: 'a' },
+            { label: 'Option B', value: 'b' },
+            { label: 'Option C', value: 'c' }
+        ],
+        defaultText: 'Validation example'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Basic validation state. See other validation stories (WithErrorAlert, WithWarningAlert, etc.) for different alert types and invalid states.'
+            }
+        }
+    }
+};
+// Form validation example
+export const FormValidationExample = {
+    render: (args) => ({
+        Component: Select,
+        props: {
+            ...args,
+            onchange: (event) => {
+                // Simulate form validation
+                const value = event.value;
+                if (!value) {
+                    // Update to show required field error
+                    console.log('Validation: Field is required');
+                }
+                else if (value === 'option3') {
+                    // Show warning for specific option
+                    console.log('Validation: Warning for option 3');
+                }
+                else {
+                    // Valid selection
+                    console.log('Validation: Valid selection');
+                }
+            }
+        }
+    }),
+    args: {
+        options: [
+            { label: 'Valid Option 1', value: 'option1' },
+            { label: 'Valid Option 2', value: 'option2' },
+            { label: 'Problematic Option', value: 'option3' },
+            { label: 'Another Valid Option', value: 'option4' }
+        ],
+        defaultText: 'Choose wisely...',
+        alert: {
+            type: 'info',
+            message: 'Select an option to see validation feedback'
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Interactive example showing how validation states might change based on user selection in a real form.'
+            }
+        }
+    }
+};

package/dist/ui/components/select/Select.svelte

@@ -12,6 +12,7 @@
 
 	import { CheckIcon, ChevronIcon, UndoIcon } from '../../icons';
 
+	import { Tooltip } from '..';
 	import { Text } from '../text';
 	import type { DropdownInstance, SelectInstanceManager, SelectProps } from './types.js';
 
@@ -33,6 +34,8 @@
 		preventNoSelection = false,
 		disabled = false,
 		placement = 'bottom',
+		alert = null,
+		invalid = false,
 		className = '',
 		onchange,
 		children
@@ -85,6 +88,9 @@
 		}
 	});
 
+	// Computed states
+	let hasAlert = $derived(alert?.message);
+
 	// Computed styles based on state
 	const dropdownStyles = $derived(() => {
 		const base = {
@@ -101,17 +107,17 @@
 			};
 		}
 
-		if (hasError) {
+		if (hasError || hasAlert || invalid) {
 			return {
 				...base,
-				border: '1px solid var(--redBorder)'
+				outline: '1px solid var(--redBorder)'
 			};
 		}
 
 		if (isFocused) {
 			return {
 				...base,
-				border: '1px solid var(--blueBorder)'
+				outline: '1px solid var(--blueBorder)'
 			};
 		}
 
@@ -393,6 +399,23 @@
 		debouncedFilterOptions(searchValue, options);
 	};
 
+	/**
+	 * Gets the tooltip background color based on alert type
+	 */
+	const getTooltipColor = (alertType: string) => {
+		switch (alertType) {
+			case 'error':
+				return 'var(--redBackground, #ff4d4d)';
+			case 'warning':
+				return 'var(--orangeBackground, #ff9933)';
+			case 'success':
+				return 'var(--greenBackground, #00cc66)';
+			case 'info':
+			default:
+				return 'var(--blueBackground, #4d9fff)';
+		}
+	};
+
 	// Lifecycle cleanup
 	$effect(() => {
 		return () => {
@@ -401,134 +424,159 @@
 	});
 </script>
 
-<div
-	class="dropdown-wrapper {className}"
-	bind:this={dropdownWrapper}
-	style="{hide ? 'display:none;' : ''} width: {width};"
->
+{#snippet selectWrapper()}
 	<div
-		class="dropdown"
-		class:disabled
-		{id}
-		style="width:{width}; {Object.entries(dropdownStyles())
-			.map(([key, value]) => `${key.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${value}`)
-			.join('; ')}"
-		aria-disabled={disabled}
-		tabindex={disabled || isOpen ? -1 : 0}
-		role="button"
-		aria-haspopup="listbox"
-		aria-labelledby={id}
-		bind:this={target}
-		onmouseenter={() => (isHovered = true)}
-		onmouseleave={() => (isHovered = false)}
-		onfocus={() => (isFocused = true)}
-		onblur={() => (isFocused = false)}
+		class="dropdown-wrapper {className}"
+		bind:this={dropdownWrapper}
+		style="{hide ? 'display:none;' : ''} width: {width};"
 	>
-		<div class="dropdown-header" aria-disabled={disabled}>
-			<div class="label">
-				{selected ? selectedLabel || defaultText : defaultText}
-			</div>
-			<div class="arrow" style="transform:rotate({isOpen ? '270deg' : '90deg'})">
-				<ChevronIcon />
-			</div>
-		</div>
-
 		<div
+			class="dropdown"
+			class:disabled
+			{id}
+			style="width:{width}; {Object.entries(dropdownStyles())
+				.map(([key, value]) => `${key.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${value}`)
+				.join('; ')}"
+			aria-disabled={disabled}
 			tabindex={disabled || isOpen ? -1 : 0}
-			class="dropdown-list"
-			role="listbox"
-			style="width:{dropdownWidth}; max-height:{dropdownHeight};"
-			onkeydown={(e) => {
-				e.stopPropagation();
-				e.preventDefault();
-				handleKeyDown(e);
-			}}
-			bind:this={dropdownItems}
+			role="button"
+			aria-haspopup="listbox"
+			aria-labelledby={id}
+			bind:this={target}
+			onmouseenter={() => (isHovered = true)}
+			onmouseleave={() => (isHovered = false)}
+			onfocus={() => (isFocused = true)}
+			onblur={() => (isFocused = false)}
 		>
-			{#if selectedLabel}
-				<div class="selected">
-					<div class="label">
-						<Text label={selectedLabel} fontSize="normal" fontColor="var(--text1)" />
-					</div>
+			<div class="dropdown-header" aria-disabled={disabled}>
+				<div class="label">
+					{selected ? selectedLabel || defaultText : defaultText}
 				</div>
-			{/if}
-
-			{#if enableSearch}
-				<div class="search-container">
-					<input
-						type="text"
-						placeholder="Search"
-						oninput={(e) => {
+				<div class="arrow" style="transform:rotate({isOpen ? '270deg' : '90deg'})">
+					<ChevronIcon />
+				</div>
+			</div>
+
+			<div
+				tabindex={disabled || isOpen ? -1 : 0}
+				class="dropdown-list"
+				role="listbox"
+				style="width:{dropdownWidth}; max-height:{dropdownHeight};"
+				onkeydown={(e) => {
+					e.stopPropagation();
+					e.preventDefault();
+					handleKeyDown(e);
+				}}
+				bind:this={dropdownItems}
+			>
+				{#if selectedLabel}
+					<div class="selected">
+						<div class="label">
+							<Text label={selectedLabel} fontSize="normal" fontColor="var(--text1)" />
+						</div>
+					</div>
+				{/if}
+
+				{#if enableSearch}
+					<div class="search-container">
+						<input
+							type="text"
+							placeholder="Search"
+							oninput={(e) => {
+								e.stopPropagation();
+								e.preventDefault();
+								handleSearch(e);
+							}}
+							onkeydown={(e) => e.stopPropagation()}
+						/>
+					</div>
+				{/if}
+
+				{#each optionsStore?.length > 0 ? optionsStore : options as { label, value, className = null, description = null, labelIcon = null, descriptionTitle = null, isDisabled = false }, index (index)}
+					{@const indexId = index + 1}
+					{@const itemId = ref ? ref.replace(' ', '-') : 'dropdown'}
+					<button
+						aria-posinset={indexId}
+						aria-selected={value === selected && selected?.trim() !== '' ? 'true' : 'false'}
+						id={`${itemId}-list-${indexId}-${id}`}
+						data-value={value}
+						class="dropdown-item {isDisabled ? 'disabled' : ''} {className}"
+						role="option"
+						onclick={(e) => {
+							e.stopPropagation();
+							if (isDisabled) return;
+							handleSelect(value, label, e.currentTarget);
+						}}
+						onkeydown={(e) => {
 							e.stopPropagation();
 							e.preventDefault();
-							handleSearch(e);
 						}}
-						onkeydown={(e) => e.stopPropagation()}
-					/>
-				</div>
-			{/if}
-
-			{#each optionsStore?.length > 0 ? optionsStore : options as { label, value, className = null, description = null, labelIcon = null, descriptionTitle = null, isDisabled = false }, index (index)}
-				{@const indexId = index + 1}
-				{@const itemId = ref ? ref.replace(' ', '-') : 'dropdown'}
-				<button
-					aria-posinset={indexId}
-					aria-selected={value === selected && selected?.trim() !== '' ? 'true' : 'false'}
-					id={`${itemId}-list-${indexId}-${id}`}
-					data-value={value}
-					class="dropdown-item {isDisabled ? 'disabled' : ''} {className}"
-					role="option"
-					onclick={(e) => {
-						e.stopPropagation();
-						if (isDisabled) return;
-						handleSelect(value, label, e.currentTarget);
-					}}
-					onkeydown={(e) => {
-						e.stopPropagation();
-						e.preventDefault();
-					}}
-					onmouseenter={handleMouseEnter}
-					aria-hidden={!isOpen}
-					tabindex={value === selected ? 0 : -1}
-					style={description ? 'align-items:start;' : ''}
-				>
-					<div class="icon" aria-label={label}>
-						{#if value === selected && selected?.trim() !== ''}
-							<CheckIcon />
-						{/if}
-					</div>
-					<div class="label">
-						{#if description || descriptionTitle || labelIcon}
-							<div class="label-content">
-								<div class="label-name">
-									<Text {label} />
-									{#if labelIcon}
-										{@const IconComponent = labelIcon}
-										<IconComponent />
-									{/if}
-								</div>
-								<div class="label-description-title">
-									<Text
-										label={descriptionTitle || ''}
-										fontColor="var(--greenText)"
-										fontSize="10px"
-									/>
+						onmouseenter={handleMouseEnter}
+						aria-hidden={!isOpen}
+						tabindex={value === selected ? 0 : -1}
+						style={description ? 'align-items:start;' : ''}
+					>
+						<div class="icon" aria-label={label}>
+							{#if value === selected && selected?.trim() !== ''}
+								<CheckIcon />
+							{/if}
+						</div>
+						<div class="label">
+							{#if description || descriptionTitle || labelIcon}
+								<div class="label-content">
+									<div class="label-name">
+										<Text {label} />
+										{#if labelIcon}
+											{@const IconComponent = labelIcon}
+											<IconComponent />
+										{/if}
+									</div>
+									<div class="label-description-title">
+										<Text
+											label={descriptionTitle || ''}
+											fontColor="var(--greenText)"
+											fontSize="10px"
+										/>
+									</div>
+									<div class="label-description">
+										<Text label={description || ''} fontColor="var(--text2)" fontSize="10px" />
+									</div>
 								</div>
-								<div class="label-description">
-									<Text label={description || ''} fontColor="var(--text2)" fontSize="10px" />
-								</div>
-							</div>
-						{:else}
-							<Text {label} fontSize="normal" />
-						{/if}
-					</div>
-				</button>
-			{/each}
+							{:else}
+								<Text {label} fontSize="normal" />
+							{/if}
+						</div>
+					</button>
+				{/each}
+			</div>
 		</div>
 	</div>
-</div>
+{/snippet}
+
+<Tooltip
+	message={hasAlert ? alert?.message || '' : ''}
+	placement="top"
+	listener="hover"
+	listenerout="hover"
+	showArrow={true}
+	hidden={!hasAlert}
+	disabled={!hasAlert || !alert?.message}
+	fontColor="var(--actionPrimaryText)"
+	width="max-content"
+	padding="6px"
+	bgColor={getTooltipColor(alert?.type || 'info')}
+	class="select-tooltip"
+>
+	{#snippet target()}
+		{@render selectWrapper()}
+	{/snippet}
+</Tooltip>
 
 <style>
+	:global(.select-tooltip) {
+		padding: 0;
+	}
+
 	.dropdown-item.disabled {
 		opacity: 0.75;
 		cursor: not-allowed;
@@ -619,7 +667,7 @@
 	}
 
 	.dropdown-list :global(.dropdown-item.hover-state) {
-		border: 1px solid var(--blueBorder);
+		outline: 1px solid var(--blueBorder);
 	}
 
 	.dropdown-list {

package/dist/ui/components/select/types.d.ts

@@ -1,5 +1,10 @@
 import type { Placement } from '@floating-ui/dom';
 import type { Component, Snippet } from 'svelte';
+export type AlertType = 'error' | 'success' | 'info' | 'warning';
+export interface AlertConfig {
+    type: AlertType;
+    message: string;
+}
 export type SelectValue = string & {
     readonly brand: unique symbol;
 };
@@ -37,6 +42,14 @@ export interface SelectProps {
     preventNoSelection?: boolean;
     disabled?: boolean;
     placement?: Placement;
+    /**
+     * Alert configuration for showing validation messages
+     */
+    alert?: AlertConfig | null;
+    /**
+     * If true, the select will be invalid
+     */
+    invalid?: boolean;
     className?: string;
     onchange?: SelectChangeHandler;
     children?: Snippet;

package/dist/ui/components/tooltip/Tooltip.svelte

@@ -345,11 +345,11 @@
 		{#if tooltip}
 			{@render tooltip()}
 		{:else if message && raw}
-			<div class="message" style="color:{fontColor};">
+			<div class="message" style="color:{fontColor}; background-color: {bgColor};">
 				{@html message}
 			</div>
 		{:else if message}
-			<div class="message">
+			<div class="message" style="color:{fontColor}; background-color: {bgColor};">
 				<Text label={formattedMessage} fontSize="11px" fontWeight="500" {fontColor} />
 			</div>
 		{/if}

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

@@ -15,8 +15,8 @@ export declare const getPathname: (page: Page | Folder) => Promise<string>;
 /**
  * Returns a single page with all its properties.
  */
-export declare const getPageMetadata: (page: Page) => Promise<PageWithProps>;
+export declare const getPageMetadata: (page: Page, targetUrl?: URL) => Promise<PageWithProps>;
 /**
  * Returns all pages and folders from the Webflow project.
  */
-export declare const getAllPages: (pagesAndFolders?: boolean, kind?: PageWithProps["kind"]) => Promise<PageWithProps[]>;
+export declare const getAllPages: (pagesAndFolders?: boolean, kind?: PageWithProps["kind"], targetUrl?: URL) => Promise<PageWithProps[]>;

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

@@ -18,10 +18,11 @@ export const getPathname = async (page) => {
 /**
  * Returns a single page with all its properties.
  */
-export const getPageMetadata = async (page) => {
+export const getPageMetadata = async (page, targetUrl) => {
     if (!pageStagingUrl) {
-        const { shortName } = await webflow.getSiteInfo();
-        pageStagingUrl = `https://${shortName}.webflow.io`;
+        const { domains } = await webflow.getSiteInfo();
+        const stagingUrl = domains.find((domain) => domain.stage === 'staging')?.url;
+        pageStagingUrl = targetUrl?.toString() || `https://${stagingUrl}`;
     }
     const [fullPath, parent, name, kind, isDraft, isPasswordProtected, generatedPathname] = await Promise.all([
         page?.getPublishPath(),
@@ -50,7 +51,7 @@ export const getPageMetadata = async (page) => {
 /**
  * Returns all pages and folders from the Webflow project.
  */
-export const getAllPages = async (pagesAndFolders, kind) => {
+export const getAllPages = async (pagesAndFolders, kind, targetUrl) => {
     try {
         const allPages = await webflow?.getAllPagesAndFolders();
         const pagesWithPropsPromises = [];
@@ -58,7 +59,7 @@ export const getAllPages = async (pagesAndFolders, kind) => {
             for (const page of allPages) {
                 if (page.type === 'PageFolder')
                     continue;
-                pagesWithPropsPromises.push(getPageMetadata(page));
+                pagesWithPropsPromises.push(getPageMetadata(page, targetUrl));
             }
         }
         const list = await Promise.all(pagesWithPropsPromises);

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

@@ -2,10 +2,13 @@
  * Returns a valid Webflow project staging URL.
  */
 export const getSiteStagingUrl = async (origin, stagingName) => {
-    const { shortName } = await webflow.getSiteInfo();
+    const { shortName, domains } = await webflow.getSiteInfo();
     if (stagingName)
         return shortName;
+    const stagingUrl = domains.find((domain) => domain.stage === 'staging')?.url;
     if (origin)
-        return `${shortName}.webflow.io`;
+        return stagingUrl || `${shortName}.webflow.io`;
+    if (stagingUrl)
+        return `https://${stagingUrl}`;
     return `https://${shortName}.webflow.io`;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finsweet/webflow-apps-utils",
-  "version": "1.0.31",
+  "version": "1.0.33",
   "description": "Shared utilities for Webflow apps",
   "homepage": "https://github.com/finsweet/webflow-apps-utils",
   "repository": {