@finsweet/webflow-apps-utils 1.0.3 → 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/stores/forms.d.ts

@@ -8,7 +8,7 @@ interface FormState<T> {
     isSubmitting: boolean;
 }
 /**
- * Creates a form validation utility with Zod
+ * Creates a form validation utility with Svelte 5 reactive stores
  * @param identifier - Unique identifier for the form
  * @param options - Configuration options
  */
@@ -18,12 +18,18 @@ export declare class FormValidator<T extends {
     class: string;
 }> {
     private schema;
-    private store;
-    form: ReturnType<typeof derived<typeof this.store, FormState<T>>>;
+    private _store;
     private instancesSet;
     private initialValues;
     private identifier;
     private currentInstanceToIgnore;
+    private classValidationEnabled;
+    readonly values: ReturnType<typeof derived<typeof this._store, T>>;
+    readonly errors: ReturnType<typeof derived<typeof this._store, Record<keyof T, string[]>>>;
+    readonly touched: ReturnType<typeof derived<typeof this._store, Record<keyof T, boolean>>>;
+    readonly isValid: ReturnType<typeof derived<typeof this._store, boolean>>;
+    readonly isDirty: ReturnType<typeof derived<typeof this._store, boolean>>;
+    readonly isSubmitting: ReturnType<typeof derived<typeof this._store, boolean>>;
     /**
      * Generates unique name, instance, and class based on solution name and existing instances
      * @param existingInstances - Array of existing instance names
@@ -65,6 +71,11 @@ export declare class FormValidator<T extends {
      * Reset the form to initial values
      */
     reset(): void;
+    /**
+     * Enable or disable class name validation
+     * @param enabled - Whether to enable class validation
+     */
+    enableClassValidation(enabled: boolean): void;
     /**
      * Validate the form values
      */
@@ -74,10 +85,36 @@ export declare class FormValidator<T extends {
      */
     setSubmitting(isSubmitting: boolean): void;
     /**
-     * Get the current state of the form
+     * Get the current state of the form (for legacy compatibility)
      */
     getState(): FormState<T>;
 }
+/**
+ * Setup form hook
+ */
+export declare function createForm<T extends {
+    name: string;
+    instance: string;
+    class: string;
+}>(identifier: string, initialValues: T, options?: {
+    existingInstances?: string[];
+    enableClassValidation?: boolean;
+}): {
+    values: import("svelte/store").Readable<T>;
+    errors: import("svelte/store").Readable<Record<keyof T, string[]>>;
+    touched: import("svelte/store").Readable<Record<keyof T, boolean>>;
+    isValid: import("svelte/store").Readable<boolean>;
+    isDirty: import("svelte/store").Readable<boolean>;
+    isSubmitting: import("svelte/store").Readable<boolean>;
+    setField: <K extends keyof T>(field: K, value: T[K]) => void;
+    setFields: (values: Partial<T>) => void;
+    reset: () => void;
+    enableClassValidation: (enabled: boolean) => void;
+    ignoreInstanceValidation: (instanceValue: string, existingInstances: string[]) => void;
+    setSubmitting: (isSubmitting: boolean) => void;
+    validate: () => void;
+    getState: () => FormState<T>;
+};
 /**
  * Get a form by its identifier
  */