@finsweet/webflow-apps-utils 1.0.30 → 1.0.31

package/dist/ui/components/index.d.ts

@@ -11,6 +11,7 @@ export * from './input';
 export * from './layout';
 export * from './modal';
 export * from './notification';
+export * from './progress-bar';
 export * from './regions';
 export * from './section';
 export * from './select';

package/dist/ui/components/index.js

@@ -11,6 +11,7 @@ export * from './input';
 export * from './layout';
 export * from './modal';
 export * from './notification';
+export * from './progress-bar';
 export * from './regions';
 export * from './section';
 export * from './select';

package/dist/ui/components/progress-bar/ProgressBar.stories.svelte

@@ -0,0 +1,185 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { fn } from 'storybook/test';
+
+	import ProgressBar from './ProgressBar.svelte';
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'UI/ProgressBar',
+		component: ProgressBar,
+		tags: ['autodocs'],
+		argTypes: {
+			value: {
+				control: { type: 'range', min: 0, max: 100, step: 1 }
+			},
+			max: {
+				control: { type: 'number' }
+			},
+			variant: {
+				control: { type: 'select' },
+				options: ['default', 'success', 'warning', 'error']
+			},
+			easing: {
+				control: { type: 'select' },
+				options: ['linear', 'cubicIn', 'cubicOut', 'cubicInOut', 'quartOut']
+			},
+			animated: {
+				control: { type: 'boolean' }
+			},
+			duration: {
+				control: { type: 'range', min: 100, max: 2000, step: 100 }
+			},
+			showPercentage: {
+				control: { type: 'boolean' }
+			},
+			showStatus: {
+				control: { type: 'boolean' }
+			},
+			showSpinner: {
+				control: { type: 'boolean' }
+			},
+			completed: {
+				control: { type: 'boolean' }
+			},
+			height: {
+				control: { type: 'range', min: 2, max: 20, step: 1 }
+			},
+			statusText: {
+				control: { type: 'text' }
+			},
+			onComplete: { action: 'completed' }
+		},
+		args: {
+			onComplete: fn()
+		}
+	});
+</script>
+
+<Story
+	name="Default"
+	args={{
+		value: 45,
+		showPercentage: true
+	}}
+/>
+
+<Story
+	name="With Status"
+	args={{
+		value: 60,
+		showStatus: true,
+		showPercentage: true,
+		statusText: 'Processing files...'
+	}}
+/>
+
+<Story
+	name="With Spinner"
+	args={{
+		value: 35,
+		showStatus: true,
+		showPercentage: true,
+		showSpinner: true,
+		statusText: 'Uploading data...'
+	}}
+/>
+
+<Story
+	name="Completed State"
+	args={{
+		value: 100,
+		completed: true,
+		showStatus: true,
+		showPercentage: true,
+		statusText: 'Processing completed'
+	}}
+/>
+
+<Story
+	name="Success Variant"
+	args={{
+		value: 80,
+		variant: 'success',
+		showStatus: true,
+		showPercentage: true,
+		statusText: 'Successfully processing...'
+	}}
+/>
+
+<Story
+	name="Warning Variant"
+	args={{
+		value: 65,
+		variant: 'warning',
+		showStatus: true,
+		showPercentage: true,
+		statusText: 'Warning: Slow connection detected'
+	}}
+/>
+
+<Story
+	name="Error Variant"
+	args={{
+		value: 25,
+		variant: 'error',
+		showStatus: true,
+		showPercentage: true,
+		statusText: 'Error: Connection failed'
+	}}
+/>
+
+<Story
+	name="No Animation"
+	args={{
+		value: 70,
+		animated: false,
+		showPercentage: true,
+		showStatus: true,
+		statusText: 'Instant progress'
+	}}
+/>
+
+<Story
+	name="Slow Animation"
+	args={{
+		value: 85,
+		duration: 2000,
+		easing: 'quartOut',
+		showPercentage: true,
+		showStatus: true,
+		statusText: 'Slow, smooth progress...'
+	}}
+/>
+
+<Story
+	name="Custom Height"
+	args={{
+		value: 55,
+		height: 8,
+		showPercentage: true,
+		showStatus: true,
+		statusText: 'Thick progress bar'
+	}}
+/>
+
+<Story
+	name="Minimal"
+	args={{
+		value: 40,
+		showPercentage: false,
+		showStatus: false
+	}}
+/>
+
+<Story
+	name="Scan Progress Simulation"
+	args={{
+		value: 73,
+		showStatus: true,
+		showPercentage: true,
+		showSpinner: true,
+		statusText: 'Scanning: 73/100 pages',
+		height: 4
+	}}
+/>

package/dist/ui/components/progress-bar/ProgressBar.stories.svelte.d.ts

@@ -0,0 +1,27 @@
+export default ProgressBar;
+type ProgressBar = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const ProgressBar: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import ProgressBar from './ProgressBar.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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/ui/components/progress-bar/ProgressBar.svelte

@@ -0,0 +1,290 @@
+<script lang="ts">
+	import { cubicIn, cubicInOut, cubicOut, linear, quartOut } from 'svelte/easing';
+	import { tweened } from 'svelte/motion';
+
+	import { CheckCircleOutlinedIcon, WarningTriangleOutlineIcon } from '../../icons';
+	import Loader from '../Loader.svelte';
+	import { Text } from '../text';
+	import type { ProgressBarEasing, ProgressBarProps, ProgressBarVariant } from './types.js';
+
+	let {
+		value = 0,
+		max = 100,
+		animated = true,
+		duration = 400,
+		easing = 'cubicOut',
+		showPercentage = true,
+		showStatus = false,
+		statusText = '',
+		showSpinner = false,
+		variant = 'default',
+		height = 4,
+		completed = false,
+		class: className = '',
+		onComplete,
+		...restProps
+	}: ProgressBarProps = $props();
+
+	const easingFunctions = {
+		linear,
+		cubicIn,
+		cubicOut,
+		cubicInOut,
+		quartOut
+	};
+
+	let currentProgress = $state(0);
+	let isCompleted = $state(false);
+	let completedValue = $state<number | null>(null);
+
+	let percentage = $derived(
+		Math.min(100, Math.round((Math.max(0, value) / Math.max(1, max)) * 100))
+	);
+
+	let tweenedProgress = $state(0);
+	const progress = tweened(0, {
+		duration,
+		easing: easingFunctions[easing]
+	});
+
+	$effect(() => {
+		const unsubscribe = progress.subscribe((val) => {
+			tweenedProgress = val;
+		});
+
+		return unsubscribe;
+	});
+
+	let displayWidth = $derived(
+		isCompleted && completedValue !== null ? completedValue : tweenedProgress
+	);
+
+	let displayPercentage = $derived(
+		isCompleted && completedValue !== null
+			? Math.round(completedValue)
+			: Math.round(tweenedProgress)
+	);
+
+	$effect(() => {
+		const currentPercentage = percentage;
+		if (!completed) {
+			currentProgress = currentPercentage;
+			if (animated) {
+				progress.set(currentPercentage, {
+					duration,
+					easing: easingFunctions[easing]
+				});
+			} else {
+				progress.set(currentPercentage, { duration: 0 });
+			}
+		}
+	});
+
+	$effect(() => {
+		if (completed && !isCompleted) {
+			completedValue = tweenedProgress;
+			isCompleted = true;
+
+			onComplete?.();
+		}
+
+		if (!completed && isCompleted) {
+			isCompleted = false;
+			completedValue = null;
+		}
+	});
+
+	let containerClasses = $derived(() => {
+		const classes = ['progress-container'];
+		if (className) classes.push(className);
+		return classes.join(' ');
+	});
+
+	let progressClasses = $derived(() => {
+		const classes = ['progress-fill'];
+		if (isCompleted) classes.push('completed');
+		if (variant !== 'default') classes.push(`progress-fill--${variant}`);
+		return classes.join(' ');
+	});
+
+	let displayStatusText = $derived(() => {
+		if (isCompleted) {
+			return 'Completed successfully';
+		}
+		return statusText || `${displayPercentage}%`;
+	});
+
+	let StatusIcon = $derived(() => {
+		if (isCompleted) {
+			return CheckCircleOutlinedIcon;
+		}
+		return WarningTriangleOutlineIcon;
+	});
+
+	let statusColor = $derived(() => {
+		if (isCompleted) return 'var(--greenText)';
+
+		switch (variant) {
+			case 'success':
+				return 'var(--greenText)';
+			case 'warning':
+				return 'var(--yellowText)';
+			case 'error':
+				return 'var(--redText)';
+			default:
+				return 'var(--text1)';
+		}
+	});
+
+	let progressFillColor = $derived(() => {
+		if (isCompleted) return 'var(--greenText)';
+
+		switch (variant) {
+			case 'success':
+				return 'var(--greenText)';
+			case 'warning':
+				return 'var(--yellowText)';
+			case 'error':
+				return 'var(--redText)';
+			default:
+				return 'var(--actionPrimaryBackground)';
+		}
+	});
+</script>
+
+<div
+	class={containerClasses()}
+	role="progressbar"
+	aria-valuenow={displayPercentage}
+	aria-valuemin="0"
+	aria-valuemax="100"
+	aria-label={displayStatusText()}
+	aria-live="polite"
+	{...restProps}
+>
+	{#if showStatus || showPercentage || showSpinner}
+		<div class="progress-header">
+			<div class="status-info">
+				{#if showSpinner && !isCompleted}
+					<div class="progress-spinner">
+						<Loader size={12} margin="0" />
+					</div>
+				{/if}
+
+				<div class="status-icon" class:success={isCompleted}>
+					<StatusIcon />
+				</div>
+
+				{#if showStatus}
+					<Text
+						label={displayStatusText()}
+						fontColor={statusColor()}
+						fontSize="normal"
+						class="progress-status"
+					/>
+				{/if}
+			</div>
+
+			<div class="progress-details">
+				{#if showPercentage}
+					<Text
+						label="{displayPercentage}%"
+						fontColor={statusColor()}
+						fontSize="normal"
+						class="progress-percentage"
+					/>
+				{/if}
+			</div>
+		</div>
+	{/if}
+
+	<div class="progress-track" style="height: {height}px;">
+		<div
+			class={progressClasses()}
+			style="width: {displayWidth}%; height: {height}px; background-color: {progressFillColor()};"
+		></div>
+	</div>
+</div>
+
+<style>
+	.progress-container {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		width: 100%;
+	}
+
+	.progress-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		gap: 4px;
+	}
+
+	.status-info {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+		flex: 1;
+		min-width: 0;
+	}
+
+	.status-icon :global(svg) {
+		width: 20px;
+		height: 20px;
+		color: var(--text1);
+	}
+
+	.status-icon.success :global(svg) {
+		color: var(--greenText);
+	}
+
+	.progress-details {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		flex-shrink: 0;
+	}
+
+	.progress-spinner {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.progress-track {
+		width: 100%;
+		background-color: var(--black);
+		border-radius: 2px;
+		overflow: hidden;
+		position: relative;
+	}
+
+	.progress-fill {
+		height: 100%;
+		border-radius: 2px;
+		transition: width 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
+		min-width: 1px;
+	}
+
+	.progress-fill.completed {
+		background-color: var(--greenText) !important;
+	}
+
+	.progress-fill--success {
+		background-color: var(--greenText);
+	}
+
+	.progress-fill--warning {
+		background-color: var(--yellowText);
+	}
+
+	.progress-fill--error {
+		background-color: var(--redText);
+	}
+
+	/* Ensure smooth transitions */
+	.progress-fill {
+		will-change: width;
+	}
+</style>

package/dist/ui/components/progress-bar/ProgressBar.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ProgressBarProps } from './types.js';
+declare const ProgressBar: import("svelte").Component<ProgressBarProps, {}, "">;
+type ProgressBar = ReturnType<typeof ProgressBar>;
+export default ProgressBar;

package/dist/ui/components/progress-bar/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ProgressBar } from './ProgressBar.svelte';
+export * from './types.js';

package/dist/ui/components/progress-bar/index.js

@@ -0,0 +1,2 @@
+export { default as ProgressBar } from './ProgressBar.svelte';
+export * from './types.js';

package/dist/ui/components/progress-bar/types.d.ts

@@ -0,0 +1,63 @@
+export type ProgressBarVariant = 'default' | 'success' | 'warning' | 'error';
+export type ProgressBarEasing = 'linear' | 'cubicIn' | 'cubicOut' | 'cubicInOut' | 'quartOut';
+export interface ProgressBarProps {
+    /**
+     * Current progress value (0-100)
+     */
+    value: number;
+    /**
+     * Maximum value (default: 100)
+     */
+    max?: number;
+    /**
+     * Enable smooth animations (default: true)
+     */
+    animated?: boolean;
+    /**
+     * Animation duration in milliseconds (default: 400)
+     */
+    duration?: number;
+    /**
+     * Easing function (default: 'cubicOut')
+     */
+    easing?: ProgressBarEasing;
+    /**
+     * Show percentage text (default: true)
+     */
+    showPercentage?: boolean;
+    /**
+     * Show status text (default: false)
+     */
+    showStatus?: boolean;
+    /**
+     * Custom status text
+     */
+    statusText?: string;
+    /**
+     * Show loading spinner during progress (default: false)
+     */
+    showSpinner?: boolean;
+    /**
+     * Color scheme
+     */
+    variant?: ProgressBarVariant;
+    /**
+     * Height in pixels (default: 4)
+     */
+    height?: number;
+    /**
+     * Completed state - locks progress at final value
+     */
+    completed?: boolean;
+    /**
+     * Custom CSS class
+     */
+    class?: string;
+    /**
+     * Callback when progress completes
+     */
+    onComplete?: () => void;
+}
+export interface ProgressBarEvents {
+    complete: CustomEvent<void>;
+}

package/dist/ui/components/progress-bar/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

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