@finsweet/webflow-apps-utils 1.0.2 → 1.0.4

package/dist/ui/components/{buttons → controlled-buttons}/types.d.ts

@@ -1,10 +1,10 @@
 import type { Placement } from '@floating-ui/dom';
 import type { Component } from 'svelte';
 /**
- * Individual button item properties
+ * Controlled button item properties
  */
-export interface ButtonItem {
-    id?: 'main' | 'update-single' | 'update-all' | 'save';
+export interface ControlledButtonItem {
+    id?: string;
     text: string;
     escapeValidation?: boolean;
     variant?: 'primary' | 'secondary' | 'cms';
@@ -13,7 +13,7 @@ export interface ButtonItem {
     type?: 'library' | 'component' | 'popup';
     onClick?: () => void;
     show?: boolean;
-    popupButtons?: ButtonItem[];
+    popupButtons?: ControlledButtonItem[];
     popupTrigger?: 'click' | 'hover';
     icon?: Component;
     description?: string;
@@ -26,3 +26,10 @@ export interface ButtonItem {
         icon?: Component;
     };
 }
+/**
+ * Controlled buttons props
+ */
+export interface ControlledButtonsProps {
+    buttons: ControlledButtonItem[];
+    class?: string;
+}

package/dist/ui/components/copy-text/CopyText.stories.d.ts

@@ -0,0 +1,70 @@
+import type { StoryObj } from '@storybook/sveltekit';
+import type { CopyTextProps } from './types.js';
+declare const meta: {
+    title: string;
+    component: import("svelte").Component<CopyTextProps, {}, "">;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+    argTypes: {
+        content: {
+            control: "text";
+            description: string;
+        };
+        title: {
+            control: "text";
+            description: string;
+        };
+        disabled: {
+            control: "boolean";
+            description: string;
+        };
+        raw: {
+            control: "boolean";
+            description: string;
+        };
+        hidden: {
+            control: "boolean";
+            description: string;
+        };
+        comment: {
+            control: "text";
+            description: string;
+        };
+        tooltip: {
+            control: "text";
+            description: string;
+        };
+        class: {
+            control: "text";
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithTitle: Story;
+export declare const Disabled: Story;
+export declare const RawContent: Story;
+export declare const RawContentWithComment: Story;
+export declare const MultilineContent: Story;
+export declare const LongContent: Story;
+export declare const CustomTooltip: Story;
+export declare const WithNotifications: Story;
+export declare const HTMLSnippet: Story;
+export declare const CSSCode: Story;
+export declare const JSONData: Story;
+export declare const CopiedState: Story;
+export declare const WithCustomStyles: Story;
+export declare const EmptyContent: Story;
+export declare const SpecialCharacters: Story;
+export declare const InstallCommand: Story;
+export declare const GitClone: Story;
+export declare const APIEndpoint: Story;

package/dist/ui/components/copy-text/CopyText.stories.js

@@ -0,0 +1,241 @@
+import CopyText from './CopyText.svelte';
+const meta = {
+    title: 'Components/CopyText',
+    component: CopyText,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A reusable copy-to-clipboard component that handles text copying with visual feedback and optional notifications. Built with Svelte 5 runes and proper TypeScript support.'
+            }
+        }
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        content: {
+            control: 'text',
+            description: 'The content to be copied to clipboard'
+        },
+        title: {
+            control: 'text',
+            description: 'Optional title/heading text to display above the copy area'
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the copy functionality is disabled'
+        },
+        raw: {
+            control: 'boolean',
+            description: 'Whether to show the content in raw format (with HTML) or cleaned'
+        },
+        hidden: {
+            control: 'boolean',
+            description: 'Whether the component is in a hidden state'
+        },
+        comment: {
+            control: 'text',
+            description: 'Optional comment to prepend to copied content when in raw mode'
+        },
+        tooltip: {
+            control: 'text',
+            description: 'Custom tooltip text for the copy button'
+        },
+        class: {
+            control: 'text',
+            description: 'Custom CSS classes'
+        }
+    }
+};
+export default meta;
+// Basic stories
+export const Default = {
+    args: {
+        content: 'console.log("Hello, World!");'
+    }
+};
+export const WithTitle = {
+    args: {
+        content: 'npm install @your-org/ui-library',
+        title: 'Installation Command'
+    }
+};
+export const Disabled = {
+    args: {
+        content: 'This content cannot be copied',
+        title: 'Disabled Copy',
+        disabled: true
+    }
+};
+export const RawContent = {
+    args: {
+        content: '<script>\n  console.log("Raw HTML/JS content");\n</script>',
+        title: 'Raw HTML/JavaScript',
+        raw: true
+    }
+};
+export const RawContentWithComment = {
+    args: {
+        content: '<script>\n  // Your custom code here\n  console.log("Hello from script!");\n</script>',
+        title: 'Script with Comment',
+        raw: true,
+        comment: 'Add this script to your site'
+    }
+};
+export const MultilineContent = {
+    args: {
+        content: `function greetUser(name) {
+  return \`Hello, \${name}! Welcome to our app.\`;
+}
+
+// Usage example
+const greeting = greetUser('Alice');
+console.log(greeting);`,
+        title: 'JavaScript Function',
+        tooltip: 'Copy this function to your clipboard'
+    }
+};
+export const LongContent = {
+    args: {
+        content: `// This is a very long line of code that demonstrates how the component handles content that exceeds the maximum width of the container and needs to wrap or scroll horizontally for better user experience and readability.
+const veryLongVariableName = "This is a demonstration of very long content that might need horizontal scrolling";`,
+        title: 'Long Content Example'
+    }
+};
+export const CustomTooltip = {
+    args: {
+        content: 'secret-api-key-12345',
+        title: 'API Key',
+        tooltip: 'Click to copy your API key'
+    }
+};
+// Interactive examples with callbacks
+export const WithNotifications = {
+    args: {
+        content: 'Content with notification feedback',
+        title: 'Copy with Notifications',
+        onNotify: (options) => {
+            // Simulate webflow.notify or any notification system
+            console.log(`${options.type}: ${options.message}`);
+            alert(`${options.type}: ${options.message}`);
+        },
+        onCopy: (content) => {
+            console.log('Copied:', content);
+        },
+        onError: (error) => {
+            console.error('Copy failed:', error);
+        }
+    }
+};
+// Different content types
+export const HTMLSnippet = {
+    args: {
+        content: `<div class="banner">
+  <h1>Welcome to our site!</h1>
+  <p>This is a sample HTML snippet.</p>
+</div>`,
+        title: 'HTML Snippet',
+        raw: true
+    }
+};
+export const CSSCode = {
+    args: {
+        content: `.button {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border: none;
+  border-radius: 8px;
+  padding: 12px 24px;
+  color: white;
+  cursor: pointer;
+  transition: transform 0.2s ease;
+}
+
+.button:hover {
+  transform: translateY(-2px);
+}`,
+        title: 'CSS Styles'
+    }
+};
+export const JSONData = {
+    args: {
+        content: `{
+  "name": "CopyText Component",
+  "version": "1.0.0",
+  "description": "A reusable copy-to-clipboard component",
+  "features": [
+    "Svelte 5 runes",
+    "TypeScript support",
+    "Accessibility compliant",
+    "Customizable styling"
+  ]
+}`,
+        title: 'JSON Configuration'
+    }
+};
+// State demonstrations
+export const CopiedState = {
+    args: {
+        content: 'Content with callback notifications instead of visual styling',
+        title: 'Copy State Demo',
+        onNotify: (options) => {
+            alert(`${options.type}: ${options.message}`);
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'After clicking copy, notifications are handled via callbacks rather than visual styling changes.'
+            }
+        }
+    }
+};
+export const WithCustomStyles = {
+    args: {
+        content: 'Styled copy text component',
+        title: 'Custom Styled',
+        class: 'custom-copy-text'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'The component accepts custom CSS classes for styling customization.'
+            }
+        }
+    }
+};
+// Edge cases
+export const EmptyContent = {
+    args: {
+        content: '',
+        title: 'Empty Content'
+    }
+};
+export const SpecialCharacters = {
+    args: {
+        content: `Special chars: !@#$%^&*()_+-=[]{}|;':",./<>?
+Unicode: 🚀 💻 🎉 ✨ 🔥
+Escaped: "quotes" 'apostrophes' \\backslashes\\`,
+        title: 'Special Characters'
+    }
+};
+// Real-world examples
+export const InstallCommand = {
+    args: {
+        content: 'npm install clipboard svelte @types/node',
+        title: 'Installation',
+        tooltip: 'Copy install command'
+    }
+};
+export const GitClone = {
+    args: {
+        content: 'git clone https://github.com/your-org/your-repo.git',
+        title: 'Clone Repository',
+        tooltip: 'Copy git clone command'
+    }
+};
+export const APIEndpoint = {
+    args: {
+        content: 'https://api.yourservice.com/v1/users',
+        title: 'API Endpoint',
+        tooltip: 'Copy API endpoint URL'
+    }
+};

package/dist/ui/components/copy-text/CopyText.svelte

@@ -0,0 +1,249 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	import { CopyIcon, EyeIcon } from '../../icons';
+	import { trimExtraSpaces } from '../../../utils/helpers';
+
+	import type { CopyTextProps } from './types';
+
+	let {
+		content,
+		title,
+		disabled = false,
+		raw = false,
+		hidden = false,
+		comment = '',
+		tooltip = 'Click to copy',
+		onNotify,
+		onCopy,
+		onError,
+		header,
+		footer,
+		class: className = '',
+		...restProps
+	}: CopyTextProps = $props();
+
+	// Component state
+	let isCopied = $state(false);
+	let isCooldown = $state(false);
+
+	// Simple computed values to avoid infinite loops
+	function getProcessedContent() {
+		if (raw) {
+			return comment ? `<!-- ${comment} -->\n${content}` : content;
+		}
+		return trimExtraSpaces(content) ?? '';
+	}
+
+	function getCopyButtonClasses() {
+		return [
+			'copy-button',
+			disabled ? 'copy-button--disabled' : '',
+			isCopied ? 'copy-button--copied' : '',
+			className || ''
+		]
+			.filter(Boolean)
+			.join(' ');
+	}
+
+	/**
+	 * Handles notifications with cooldown to prevent spam
+	 */
+	const handleNotification = (type: 'Success' | 'Error', message: string) => {
+		if (!isCooldown) {
+			onNotify?.({ type, message });
+			isCooldown = true;
+			setTimeout(() => {
+				isCooldown = false;
+			}, 1000);
+		}
+	};
+
+	// Simple click handler without reactive effects to avoid infinite loops
+	function handleClick() {
+		if (disabled) return;
+
+		// Use modern clipboard API instead of ClipboardJS to avoid issues
+		const textToCopy = getProcessedContent();
+
+		if (navigator.clipboard) {
+			navigator.clipboard
+				.writeText(textToCopy)
+				.then(() => {
+					isCopied = true;
+					handleNotification('Success', 'Copied to clipboard!');
+					onCopy?.(textToCopy);
+
+					// Reset copied state after 2 seconds
+					setTimeout(() => {
+						isCopied = false;
+					}, 2000);
+				})
+				.catch(() => {
+					const errorMessage = 'Failed to copy. Please try again.';
+					handleNotification('Error', errorMessage);
+					onError?.(errorMessage);
+				});
+		} else {
+			// Fallback for browsers that don't support navigator.clipboard
+			const errorMessage = 'Clipboard not supported in this browser';
+			handleNotification('Error', errorMessage);
+			onError?.(errorMessage);
+		}
+	}
+</script>
+
+{#if !hidden}
+	<div class="copy-text" {...restProps}>
+		{#if header}
+			<div class="copy-text__header">
+				{@render header()}
+			</div>
+		{:else if title}
+			<div class="copy-text__header">
+				<h3 class="copy-text__title">{title}</h3>
+			</div>
+		{/if}
+
+		<div
+			class={getCopyButtonClasses()}
+			role="button"
+			tabindex="0"
+			aria-label={disabled ? 'Copy disabled' : tooltip}
+			title={tooltip}
+			onclick={handleClick}
+			onkeydown={(e) => {
+				if ((e.key === 'Enter' || e.key === ' ') && !disabled) {
+					e.preventDefault();
+					handleClick();
+				}
+			}}
+		>
+			<div class="copy-button__content" id="copy-content">
+				{getProcessedContent()}
+			</div>
+
+			<div class="copy-button__icon" aria-hidden="true">
+				{#if disabled}
+					<EyeIcon />
+				{:else}
+					<CopyIcon size={16} />
+				{/if}
+			</div>
+		</div>
+
+		{#if footer}
+			<div class="copy-text__footer">
+				{@render footer()}
+			</div>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.copy-text {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+		width: 100%;
+	}
+
+	.copy-text__header {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
+
+	.copy-text__title {
+		margin: 0;
+		color: var(--text-color-primary, #ffffff);
+		font-family: Inter, sans-serif;
+		font-size: 12px;
+		font-weight: 500;
+		line-height: 16px;
+	}
+
+	.copy-button {
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+		gap: 8px;
+		padding: 6px 8px;
+		border-radius: 4px;
+		background: var(
+			--button-secondary-background,
+			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;
+		color: var(--text-color-secondary, #d9d9d9);
+		font-family: Inter, sans-serif;
+		font-size: 11px;
+		font-weight: 500;
+		line-height: 16px;
+		cursor: pointer;
+		transition: all 0.2s ease-in-out;
+		outline: none;
+	}
+
+	.copy-button:hover:not(.copy-button--disabled) {
+		background: var(
+			--button-secondary-background-hover,
+			linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.14) 100%),
+			rgba(255, 255, 255, 0.12)
+		);
+	}
+
+	.copy-button:focus-visible {
+		outline: 2px solid var(--focus-color, #0066cc);
+		outline-offset: 2px;
+	}
+
+	.copy-button--disabled {
+		background: none;
+		border: 1px solid var(--border-color-disabled, rgba(255, 255, 255, 0.2));
+		box-shadow: none;
+		opacity: 0.75;
+		cursor: not-allowed;
+		color: var(--text-color-disabled, #999999);
+	}
+
+	.copy-button__content {
+		display: flex;
+		align-items: flex-start;
+		flex: 1;
+		overflow: auto;
+		white-space: pre-wrap;
+		word-wrap: break-word;
+		max-width: 600px;
+		min-height: max-content;
+	}
+
+	.copy-button__content:disabled {
+		cursor: not-allowed;
+		color: var(--text-color-disabled, #999999);
+	}
+
+	.copy-button__icon {
+		display: flex;
+		align-items: center;
+		height: 16px;
+		flex-shrink: 0;
+	}
+
+	.copy-text__footer {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	/* Responsive design */
+	@media (max-width: 768px) {
+		.copy-button__content {
+			max-width: 300px;
+		}
+	}
+</style>

package/dist/ui/components/copy-text/CopyText.svelte.d.ts

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

package/dist/ui/components/copy-text/index.d.ts

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

package/dist/ui/components/copy-text/index.js

@@ -0,0 +1 @@
+export { default as CopyText } from './CopyText.svelte';

package/dist/ui/components/copy-text/types.d.ts

@@ -0,0 +1,52 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+/**
+ * Notification function type for copy operations
+ */
+export interface NotificationFunction {
+    (options: {
+        type: 'Success' | 'Error';
+        message: string;
+    }): void;
+}
+/**
+ * Props for the CopyText component
+ */
+export interface CopyTextProps extends HTMLAttributes<HTMLDivElement> {
+    /** The content to be copied to clipboard */
+    content: string;
+    /** Optional title/heading text to display above the copy area */
+    title?: string;
+    /** Whether the copy functionality is disabled */
+    disabled?: boolean;
+    /** Whether to show the content in raw format (with HTML) or cleaned */
+    raw?: boolean;
+    /** Whether the component is in a hidden state */
+    hidden?: boolean;
+    /** Optional comment to prepend to copied content when in raw mode */
+    comment?: string;
+    /** Custom tooltip text for the copy button */
+    tooltip?: string;
+    /** Optional notification function to call on copy success/error */
+    onNotify?: NotificationFunction;
+    /** Callback fired when content is successfully copied */
+    onCopy?: (content: string) => void;
+    /** Callback fired when copy fails */
+    onError?: (error: string) => void;
+    /** Optional snippet for custom header content */
+    header?: Snippet;
+    /** Optional snippet for additional content below the copy area */
+    footer?: Snippet;
+    /** Custom CSS classes */
+    class?: string;
+}
+/**
+ * Event types for clipboard operations
+ */
+export interface CopyEvent {
+    text: string;
+    clearSelection: () => void;
+}
+export interface CopyErrorEvent {
+    message: string;
+}

package/dist/ui/components/copy-text/types.js

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