@finsweet/webflow-apps-utils 1.0.3 → 1.0.5

package/dist/stores/forms.js

@@ -6,18 +6,25 @@ const formsRegistry = writable({});
 // Validates class name according to HTML class name rules
 const classNameRegex = /^[a-zA-Z0-9_-]+$/;
 /**
- * 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
  */
 export class FormValidator {
     schema;
-    store;
-    form;
+    _store;
     instancesSet = new Set();
     initialValues;
     identifier;
     currentInstanceToIgnore = null;
+    classValidationEnabled = true;
+    // Public reactive stores that components can directly use
+    values;
+    errors;
+    touched;
+    isValid;
+    isDirty;
+    isSubmitting;
     /**
      * Generates unique name, instance, and class based on solution name and existing instances
      * @param existingInstances - Array of existing instance names
@@ -86,8 +93,8 @@ export class FormValidator {
         if (options?.existingInstances) {
             options.existingInstances.forEach((instance) => this.instancesSet.add(instance.toLowerCase()));
         }
-        // Create the form state store
-        this.store = writable({
+        // Create the internal form state store
+        this._store = writable({
             values: initialValues,
             errors: {},
             touched: {},
@@ -96,7 +103,12 @@ export class FormValidator {
             isSubmitting: false
         });
         // Create a derived store that's the primary interface to the form
-        this.form = derived(this.store, ($store) => $store);
+        this.values = derived(this._store, ($store) => $store.values);
+        this.errors = derived(this._store, ($store) => $store.errors);
+        this.touched = derived(this._store, ($store) => $store.touched);
+        this.isValid = derived(this._store, ($store) => $store.isValid);
+        this.isDirty = derived(this._store, ($store) => $store.isDirty);
+        this.isSubmitting = derived(this._store, ($store) => $store.isSubmitting);
         // Register this form with the global registry
         formsRegistry.update((registry) => {
             registry[identifier] = this;
@@ -120,7 +132,7 @@ export class FormValidator {
      * Set the value of a specific field
      */
     setField(field, value) {
-        this.store.update((state) => {
+        this._store.update((state) => {
             const newState = {
                 ...state,
                 values: {
@@ -141,7 +153,7 @@ export class FormValidator {
      * Set multiple field values at once
      */
     setFields(values) {
-        this.store.update((state) => {
+        this._store.update((state) => {
             const newTouched = { ...state.touched };
             // Mark all updated fields as touched
             Object.keys(values).forEach((key) => {
@@ -171,7 +183,7 @@ export class FormValidator {
      * Reset the form to initial values
      */
     reset() {
-        this.store.set({
+        this._store.set({
             values: { ...this.initialValues },
             errors: {},
             touched: {},
@@ -181,32 +193,46 @@ export class FormValidator {
         });
         this.validate();
     }
+    /**
+     * Enable or disable class name validation
+     * @param enabled - Whether to enable class validation
+     */
+    enableClassValidation(enabled) {
+        this.classValidationEnabled = enabled;
+        this.validate();
+    }
     /**
      * Validate the form values
      */
     validate() {
-        this.store.update((state) => {
-            // Create a custom schema for validation that includes instance uniqueness
-            const currentSchema = z.object({
-                name: z.string().min(1, { message: 'Name is required' }),
-                instance: z
-                    .string()
-                    .min(1, { message: 'Instance is required' })
-                    .refine((value) => {
-                    // Skip if empty (handled by min(1) above)
-                    if (!value)
-                        return true;
-                    // If we're in edit mode and this is the current instance, skip duplicate validation
-                    if (this.currentInstanceToIgnore &&
-                        value.toLowerCase() === this.currentInstanceToIgnore) {
-                        return true;
-                    }
-                    // Check for uniqueness against the set of existing instances
-                    return !this.instancesSet.has(value.toLowerCase());
-                }, { message: 'Instance name must be unique' }),
-                class: z.string().min(1, { message: 'Class is required' }).regex(classNameRegex, {
+        this._store.update((state) => {
+            // Create a custom schema for validation that includes instance uniqueness and conditional class validation
+            const nameSchema = z.string().min(1, { message: 'Name is required' });
+            const instanceSchema = z
+                .string()
+                .min(1, { message: 'Instance is required' })
+                .refine((value) => {
+                // Skip if empty (handled by min(1) above)
+                if (!value)
+                    return true;
+                // If we're in edit mode and this is the current instance, skip duplicate validation
+                if (this.currentInstanceToIgnore &&
+                    value.toLowerCase() === this.currentInstanceToIgnore) {
+                    return true;
+                }
+                // Check for uniqueness against the set of existing instances
+                return !this.instancesSet.has(value.toLowerCase());
+            }, { message: 'Instance name must be unique' });
+            // Conditionally create class validation
+            const classSchema = this.classValidationEnabled
+                ? z.string().min(1, { message: 'Class is required' }).regex(classNameRegex, {
                     message: 'Class must contain only letters, numbers, underscores, and hyphens'
                 })
+                : z.string();
+            const currentSchema = z.object({
+                name: nameSchema,
+                instance: instanceSchema,
+                class: classSchema
             });
             // Validate the current values against the schema
             const result = currentSchema.safeParse(state.values);
@@ -233,18 +259,46 @@ export class FormValidator {
      * Set the form as submitting
      */
     setSubmitting(isSubmitting) {
-        this.store.update((state) => ({
+        this._store.update((state) => ({
             ...state,
             isSubmitting
         }));
     }
     /**
-     * Get the current state of the form
+     * Get the current state of the form (for legacy compatibility)
      */
     getState() {
-        return get(this.store);
+        return get(this._store);
     }
 }
+/**
+ * Setup form hook
+ */
+export function createForm(identifier, initialValues, options) {
+    const form = new FormValidator(identifier, initialValues, options);
+    if (options?.enableClassValidation !== undefined) {
+        form.enableClassValidation(options.enableClassValidation);
+    }
+    return {
+        // Reactive stores that components can directly subscribe to
+        values: form.values,
+        errors: form.errors,
+        touched: form.touched,
+        isValid: form.isValid,
+        isDirty: form.isDirty,
+        isSubmitting: form.isSubmitting,
+        // Helper methods
+        setField: form.setField.bind(form),
+        setFields: form.setFields.bind(form),
+        reset: form.reset.bind(form),
+        enableClassValidation: form.enableClassValidation.bind(form),
+        ignoreInstanceValidation: form.ignoreInstanceValidation.bind(form),
+        setSubmitting: form.setSubmitting.bind(form),
+        // For advanced use cases
+        validate: () => form.validateWithInstances(options?.existingInstances || []),
+        getState: form.getState.bind(form)
+    };
+}
 /**
  * Get a form by its identifier
  */

package/dist/types/customCode.d.ts

@@ -2,7 +2,7 @@ interface CustomCodeAttributes {
     async: string;
     type: string;
     siteId: string;
-    finsweet: 'components';
+    finsweet: 'components' | 'cmp' | 'fast-search';
 }
 export interface CustomCodeBlock {
     id?: string;

package/dist/types/window.d.ts

@@ -9,6 +9,7 @@ declare global {
             event: string;
         } | IArguments>;
         Webflow?: Webflow | WebflowCallback[];
+        isLoadingCustomCodeConfigs: boolean;
     }
 }
 export type ALLOWED_BREAKPOINTS = '320' | '480' | '768' | '991' | '1280' | '1440' | '1920';

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.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: 'Ui/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'
+    }
+};