@finsweet/webflow-apps-utils 1.0.4 → 1.0.5

package/dist/stores/forms/FormDemo.svelte

@@ -0,0 +1,545 @@
+<script lang="ts">
+	import { FormValidator } from '../forms';
+
+	interface DemoFormData {
+		name: string;
+		instance: string;
+		class: string;
+	}
+
+	// Demo state
+	let existingInstances = ['fs-slider-1', 'fs-slider-2', 'fs-tabs-1'];
+	let isEditMode = false;
+	let currentInstance = 'fs-slider-1';
+	let classValidationEnabled = true;
+	let refreshTrigger = 0;
+
+	// Create form validator
+	const formValidator = new FormValidator<DemoFormData>(
+		'demo-form',
+		{
+			name: 'New Component',
+			instance: 'fs-component',
+			class: 'fs-component'
+		},
+		{ existingInstances }
+	);
+
+	// Subscribe to form state using derived stores
+	const formValues = formValidator.values;
+	const formErrors = formValidator.errors;
+	const formTouched = formValidator.touched;
+	const formIsValid = formValidator.isValid;
+	const formIsDirty = formValidator.isDirty;
+	const formIsSubmitting = formValidator.isSubmitting;
+
+	function forceRefresh() {
+		refreshTrigger++;
+	}
+
+	function generateNewNames() {
+		const generated = FormValidator.generateNames(existingInstances, 'demo', 'Demo Component');
+		formValidator.setFields(generated);
+		forceRefresh();
+	}
+
+	function toggleEditMode() {
+		isEditMode = !isEditMode;
+		if (isEditMode) {
+			formValidator.ignoreInstanceValidation(currentInstance, existingInstances);
+			formValidator.setFields({
+				name: currentInstance,
+				instance: currentInstance,
+				class: currentInstance
+			});
+		} else {
+			formValidator.validateWithInstances(existingInstances);
+		}
+		forceRefresh();
+	}
+
+	function toggleClassValidation() {
+		classValidationEnabled = !classValidationEnabled;
+		formValidator.enableClassValidation(classValidationEnabled);
+		forceRefresh();
+	}
+
+	function addExistingInstance() {
+		const newInstance = `fs-new-${Date.now()}`;
+		existingInstances = [...existingInstances, newInstance];
+		formValidator.validateWithInstances(existingInstances);
+		forceRefresh();
+	}
+
+	function resetForm() {
+		formValidator.reset();
+		isEditMode = false;
+		forceRefresh();
+	}
+
+	function submitForm(event: SubmitEvent) {
+		event.preventDefault();
+		if (!$formIsValid) return;
+
+		formValidator.setSubmitting(true);
+
+		// Simulate submission
+		setTimeout(() => {
+			formValidator.setSubmitting(false);
+			console.log('Form submitted:', $formValues);
+			forceRefresh();
+		}, 1000);
+	}
+
+	function handleClassInput(e: Event) {
+		const target = e.target as HTMLInputElement;
+		const sanitized = FormValidator.sanitizeClassName(target.value);
+		formValidator.setField('class', sanitized);
+		forceRefresh();
+	}
+</script>
+
+{#key refreshTrigger}
+	<div class="demo-container">
+		<h3>Form Validation System Demo</h3>
+
+		<div class="demo-controls">
+			<div class="control-section">
+				<h4>Demo Controls</h4>
+				<div class="button-group">
+					<button onclick={generateNewNames} class="btn btn--secondary"> Generate Names </button>
+					<button onclick={toggleEditMode} class="btn btn--secondary">
+						{isEditMode ? 'Exit Edit Mode' : 'Enter Edit Mode'}
+					</button>
+					<button onclick={toggleClassValidation} class="btn btn--secondary">
+						{classValidationEnabled ? 'Disable' : 'Enable'} Class Validation
+					</button>
+					<button onclick={addExistingInstance} class="btn btn--secondary">
+						Add Existing Instance
+					</button>
+					<button onclick={resetForm} class="btn btn--secondary"> Reset Form </button>
+				</div>
+			</div>
+
+			<div class="status-section">
+				<h4>Form Status</h4>
+				<div class="status-grid">
+					<div class="status-item">
+						<span>Valid:</span>
+						<strong class="status-{$formIsValid}">{$formIsValid ? 'YES' : 'NO'}</strong>
+					</div>
+					<div class="status-item">
+						<span>Dirty:</span>
+						<strong class="status-{$formIsDirty}">{$formIsDirty ? 'YES' : 'NO'}</strong>
+					</div>
+					<div class="status-item">
+						<span>Submitting:</span>
+						<strong class="status-{$formIsSubmitting}">{$formIsSubmitting ? 'YES' : 'NO'}</strong>
+					</div>
+					<div class="status-item">
+						<span>Edit Mode:</span>
+						<strong class="status-{isEditMode}">{isEditMode ? 'ON' : 'OFF'}</strong>
+					</div>
+					<div class="status-item">
+						<span>Class Validation:</span>
+						<strong class="status-{classValidationEnabled}"
+							>{classValidationEnabled ? 'ON' : 'OFF'}</strong
+						>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<form class="demo-form" onsubmit={submitForm}>
+			<div class="form-section">
+				<h4>Component Form</h4>
+
+				<div class="field">
+					<label for="name">Component Name</label>
+					<input
+						id="name"
+						type="text"
+						value={$formValues.name}
+						oninput={(e) => {
+							const target = e.target as HTMLInputElement;
+							formValidator.setField('name', target.value);
+							forceRefresh();
+						}}
+						class:error={($formErrors.name?.length || 0) > 0}
+						placeholder="Enter component name"
+					/>
+					{#if $formErrors.name?.length > 0}
+						<span class="error">{$formErrors.name[0]}</span>
+					{/if}
+				</div>
+
+				<div class="field">
+					<label for="instance">Instance Name</label>
+					<input
+						id="instance"
+						type="text"
+						value={$formValues.instance}
+						oninput={(e) => {
+							const target = e.target as HTMLInputElement;
+							formValidator.setField('instance', target.value);
+							forceRefresh();
+						}}
+						class:error={($formErrors.instance?.length || 0) > 0}
+						placeholder="Enter instance name (must be unique)"
+					/>
+					{#if $formErrors.instance?.length > 0}
+						<span class="error">{$formErrors.instance[0]}</span>
+					{/if}
+				</div>
+
+				<div class="field">
+					<label for="class">CSS Class Name</label>
+					<input
+						id="class"
+						type="text"
+						value={$formValues.class}
+						oninput={handleClassInput}
+						class:error={($formErrors.class?.length || 0) > 0}
+						placeholder="Enter CSS class name"
+						disabled={!classValidationEnabled}
+					/>
+					{#if $formErrors.class?.length > 0}
+						<span class="error">{$formErrors.class[0]}</span>
+					{/if}
+					{#if !classValidationEnabled}
+						<span class="helper">Class validation is disabled</span>
+					{/if}
+				</div>
+
+				<button
+					type="submit"
+					disabled={!$formIsValid || $formIsSubmitting}
+					class="btn btn--primary"
+				>
+					{#if $formIsSubmitting}
+						Submitting...
+					{:else if isEditMode}
+						Update Component
+					{:else}
+						Create Component
+					{/if}
+				</button>
+			</div>
+		</form>
+
+		<div class="debug-section">
+			<h4>Debug Information</h4>
+
+			<div class="debug-grid">
+				<div class="debug-item">
+					<h5>Existing Instances</h5>
+					<code>{JSON.stringify(existingInstances, null, 2)}</code>
+				</div>
+
+				<div class="debug-item">
+					<h5>Form Values</h5>
+					<code>{JSON.stringify($formValues, null, 2)}</code>
+				</div>
+
+				<div class="debug-item">
+					<h5>Form Errors</h5>
+					<code>{JSON.stringify($formErrors, null, 2)}</code>
+				</div>
+
+				<div class="debug-item">
+					<h5>Touched Fields</h5>
+					<code>{JSON.stringify($formTouched, null, 2)}</code>
+				</div>
+			</div>
+		</div>
+
+		<div class="examples-section">
+			<h4>Static Method Examples</h4>
+
+			<div class="example">
+				<h5>FormValidator.generateNames()</h5>
+				<button
+					onclick={() => {
+						const result = FormValidator.generateNames(existingInstances, 'test', 'Test Component');
+						console.log('Generated names:', result);
+					}}
+					class="btn btn--secondary"
+				>
+					Generate Test Names (check console)
+				</button>
+			</div>
+
+			<div class="example">
+				<h5>FormValidator.sanitizeClassName()</h5>
+				<div class="sanitize-demo">
+					<input
+						type="text"
+						placeholder="Enter invalid class name"
+						oninput={(e) => {
+							const target = e.target as HTMLInputElement;
+							const sanitized = FormValidator.sanitizeClassName(target.value);
+							const output = target.nextElementSibling as HTMLElement;
+							if (output) output.textContent = sanitized;
+						}}
+					/>
+					<span class="sanitized-output">Sanitized output will appear here</span>
+				</div>
+			</div>
+		</div>
+	</div>
+{/key}
+
+<style>
+	.demo-container {
+		padding: 1.5rem;
+		max-width: 800px;
+		margin: 0 auto;
+		background: var(--background1);
+		color: var(--text1);
+		font-family: var(--font-stack);
+	}
+
+	.demo-controls {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: 1.5rem;
+		margin-bottom: 2rem;
+	}
+
+	.control-section,
+	.status-section {
+		padding: 1rem;
+		border: 1px solid var(--border2);
+		border-radius: var(--border-radius);
+		background: var(--background2);
+	}
+
+	.control-section h4,
+	.status-section h4,
+	.form-section h4,
+	.debug-section h4,
+	.examples-section h4 {
+		margin: 0 0 1rem 0;
+		color: var(--text1);
+		font-size: var(--font-size-large);
+		font-weight: var(--font-weight-medium);
+	}
+
+	.button-group {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.5rem;
+	}
+
+	.status-grid {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: 0.5rem;
+	}
+
+	.status-item {
+		display: flex;
+		justify-content: space-between;
+		padding: 0.25rem 0;
+		font-size: var(--font-size-small);
+	}
+
+	.demo-form {
+		margin-bottom: 2rem;
+	}
+
+	.form-section {
+		padding: 1rem;
+		border: 1px solid var(--border2);
+		border-radius: var(--border-radius);
+		background: var(--background2);
+	}
+
+	.field {
+		margin-bottom: 1rem;
+	}
+
+	label {
+		display: block;
+		margin-bottom: 0.25rem;
+		font-size: var(--font-size-small);
+		font-weight: var(--font-weight-medium);
+		color: var(--text1);
+	}
+
+	input {
+		width: 100%;
+		padding: var(--padding-small);
+		border: 1px solid var(--border2);
+		border-radius: var(--border-radius);
+		background: var(--background1);
+		color: var(--text1);
+		font-size: var(--font-size-small);
+		font-family: var(--font-stack);
+	}
+
+	input:focus {
+		outline: none;
+		border-color: var(--actionPrimaryBackground);
+	}
+
+	input.error {
+		border-color: var(--redText);
+	}
+
+	input:disabled {
+		opacity: 0.6;
+		cursor: not-allowed;
+	}
+
+	.error {
+		color: var(--redText);
+		font-size: var(--font-size-tiny);
+		margin-top: 0.25rem;
+		display: block;
+	}
+
+	.helper {
+		color: var(--text3);
+		font-size: var(--font-size-tiny);
+		margin-top: 0.25rem;
+		display: block;
+	}
+
+	.btn {
+		padding: var(--padding-small) var(--padding-regular);
+		border: none;
+		border-radius: var(--border-radius);
+		cursor: pointer;
+		font-size: var(--font-size-small);
+		font-weight: var(--font-weight-normal);
+		font-family: var(--font-stack);
+		transition: all 0.2s ease;
+	}
+
+	.btn--primary {
+		background: var(--actionPrimaryBackground);
+		color: var(--actionPrimaryText);
+		box-shadow: var(--boxShadows-action-colored);
+	}
+
+	.btn--primary:hover:not(:disabled) {
+		background: var(--actionPrimaryBackgroundHover);
+		color: var(--actionPrimaryTextHover);
+	}
+
+	.btn--secondary {
+		background: var(--actionSecondaryBackground);
+		color: var(--actionSecondaryText);
+		box-shadow: var(--boxShadows-action-secondary);
+	}
+
+	.btn--secondary:hover:not(:disabled) {
+		background: var(--actionSecondaryBackgroundHover);
+		color: var(--actionSecondaryTextHover);
+	}
+
+	.btn:disabled {
+		opacity: 0.6;
+		cursor: not-allowed;
+	}
+
+	.status-true {
+		color: var(--greenText);
+		font-weight: var(--font-weight-medium);
+	}
+
+	.status-false {
+		color: var(--redText);
+		font-weight: var(--font-weight-medium);
+	}
+
+	.debug-section {
+		margin-bottom: 2rem;
+		padding: 1rem;
+		border: 1px solid var(--border2);
+		border-radius: var(--border-radius);
+		background: var(--background2);
+	}
+
+	.debug-grid {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: 1rem;
+	}
+
+	.debug-item h5 {
+		margin: 0 0 0.5rem 0;
+		font-size: var(--font-size-small);
+		font-weight: var(--font-weight-medium);
+		color: var(--text2);
+	}
+
+	.examples-section {
+		padding: 1rem;
+		border: 1px solid var(--border2);
+		border-radius: var(--border-radius);
+		background: var(--background2);
+	}
+
+	.example {
+		margin-bottom: 1rem;
+	}
+
+	.example h5 {
+		margin: 0 0 0.5rem 0;
+		font-size: var(--font-size-small);
+		font-weight: var(--font-weight-medium);
+		color: var(--text2);
+	}
+
+	.sanitize-demo {
+		display: flex;
+		gap: 0.5rem;
+		align-items: center;
+	}
+
+	.sanitize-demo input {
+		flex: 1;
+	}
+
+	.sanitized-output {
+		flex: 1;
+		padding: var(--padding-small);
+		background: var(--background3);
+		border: 1px solid var(--border2);
+		border-radius: var(--border-radius);
+		font-family: monospace;
+		font-size: var(--font-size-tiny);
+		color: var(--text3);
+	}
+
+	code {
+		background: var(--background3);
+		border: 1px solid var(--border2);
+		padding: var(--padding-tiny);
+		border-radius: var(--border-radius);
+		font-family: monospace;
+		font-size: var(--font-size-tiny);
+		color: var(--text2);
+		display: block;
+		white-space: pre-wrap;
+		max-height: 150px;
+		overflow-y: auto;
+	}
+
+	@media (max-width: 768px) {
+		.demo-controls {
+			grid-template-columns: 1fr;
+		}
+
+		.debug-grid {
+			grid-template-columns: 1fr;
+		}
+
+		.sanitize-demo {
+			flex-direction: column;
+			align-items: stretch;
+		}
+	}
+</style>

package/dist/stores/forms/FormDemo.svelte.d.ts

@@ -0,0 +1,18 @@
+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;
+}
+declare const FormDemo: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type FormDemo = InstanceType<typeof FormDemo>;
+export default FormDemo;

package/dist/ui/components/button/Button.svelte

@@ -125,7 +125,7 @@
 	let shouldShowTooltip = $derived(!!tooltip?.message || !!tooltip?.tooltipContent);
 
 	// Default styling (no size variations)
-	let computedPadding = $derived(padding || '4px');
+	let computedPadding = $derived(padding || '4px 8px');
 	let computedIconSize = $derived(iconSize);
 
 	// Computed classes

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

@@ -1,6 +1,6 @@
 import CopyText from './CopyText.svelte';
 const meta = {
-    title: 'Components/CopyText',
+    title: 'Ui/CopyText',
     component: CopyText,
     parameters: {
         layout: 'centered',

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

@@ -165,36 +165,34 @@
 	}
 
 	.copy-button {
+		box-shadow:
+			rgba(255, 255, 255, 0.12) 0px 0.5px 0.5px inset,
+			rgb(0, 0, 0) 0px 0.5px 1px;
 		display: flex;
 		align-items: flex-start;
+		align-self: stretch;
+		color: var(--text2);
+		font-family: Inter;
+		font-size: 12px;
+		font-style: normal;
+		font-weight: 500;
+		line-height: 16px;
+		cursor: pointer;
 		justify-content: space-between;
-		gap: 8px;
-		padding: 6px 8px;
+		flex-direction: row;
 		border-radius: 4px;
 		background: var(
-			--button-secondary-background,
+			--background3,
 			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;
+		padding: 6px var(--Spacing-8, 8px);
+		gap: var(--Spacing-8, 8px);
+		flex: 1 0 0px;
 	}
 
 	.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)
-		);
+		cursor: copy;
 	}
 
 	.copy-button:focus-visible {