@finsweet/webflow-apps-utils 1.0.2 → 1.0.4

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/stores/index.d.ts

@@ -1,7 +1,6 @@
 export * from './breakpoints';
 export * from './forms';
 export * from './componentInjectErrors';
-export * from './globalStore';
 export * from './router';
 export * from './showConfirmActionModal';
 export * from './siteInfo';

package/dist/stores/index.js

@@ -1,7 +1,6 @@
 export * from './breakpoints';
 export * from './forms';
 export * from './componentInjectErrors';
-export * from './globalStore';
 export * from './router';
 export * from './showConfirmActionModal';
 export * from './siteInfo';

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/webflow.d.ts

@@ -75,51 +75,35 @@ export interface Webflow extends Pick<WebflowCallback[], 'push'> {
     };
     require: <Key extends WebflowModule>(key: Key) => (Key extends 'commerce' ? WebflowCommerce : Key extends 'lightbox' ? WebflowLightbox : Key extends 'slider' ? WebflowSlider : Key extends 'tabs' ? WebflowTabs : WebflowIx2) | undefined;
 }
-/**
- * CMS
- */
-export type CollectionListWrapperElement = HTMLDivElement;
-export type CollectionListElement = HTMLDivElement;
-export type CollectionItemElement = HTMLDivElement;
-export type CollectionEmptyElement = HTMLDivElement;
-export type PaginationWrapperElement = HTMLDivElement;
-export type PaginationButtonElement = HTMLAnchorElement;
-export type PageCountElement = HTMLDivElement;
-/**
- * Forms
- */
-export type FormBlockElement = HTMLDivElement;
-export type FormSuccessElement = HTMLDivElement;
-export type FormErrorElement = HTMLDivElement;
-/**
- * Sliders
- */
-export type SliderElement = HTMLDivElement;
-export type SliderMaskElement = HTMLDivElement;
-export type SlideElement = HTMLDivElement;
-export type SliderArrowElement = HTMLDivElement;
-export type SliderNavElement = HTMLDivElement;
-export type SliderDotElement = HTMLDivElement;
-/**
- * Tabs
- */
-export type TabsElement = HTMLDivElement;
-export type TabsMenuElement = HTMLDivElement;
-export type TabLinkElement = HTMLLinkElement;
-export type TabsContentElement = HTMLDivElement;
-export type TabPaneElement = HTMLDivElement;
-/**
- * Rich Text Block
- */
-export type RichTextBlockElement = HTMLDivElement;
-/**
- * Dropdowns
- */
-export type DropdownElement = HTMLDivElement;
-export type DropdownToggle = HTMLDivElement;
-export type DropdownList = HTMLElement;
-/**
- * The default Webflow Breakpoint names.
- */
-export type WebflowBreakpoint = 'main' | 'medium' | 'small' | 'tiny';
+export type XSCPMetadata = {
+    meta: {
+        droppedLinks: number;
+        dynBindRemovedCount: number;
+        dynListBindRemovedCount: number;
+        paginationRemovedCount: number;
+        universalBindingsRemovedCount: number;
+        unlinkedSymbolCount: number;
+    };
+    type: string;
+    payload: {
+        nodes: PastedNodes[];
+        assets: object[];
+        ix1: object[];
+        ix2: object[];
+        styles: {
+            name: string;
+            type: string | 'class';
+        }[];
+    };
+};
+type PastedNodes = {
+    children: string[];
+    classes: string[];
+    tag: string;
+    type: string;
+    _id: string;
+    data: {
+        xattr: Attr[];
+    };
+};
 export {};

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/LoadingScreen.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { WarningTriangleOutlineIcon } from '../icons';
-	import { Loader, Text } from '.';
+	import { Text } from '.';
+	import Loader from './Loader.svelte';
 
 	export let message = '';
 	export let position: 'fixed' | 'absolute' = 'fixed';

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

@@ -98,7 +98,7 @@
 		iconSize = '16px',
 		padding,
 		class: className = '',
-		loadingText = 'Please wait...',
+		loadingText = 'Please wait',
 		fullWidth = false,
 		tooltip,
 		invalid = false,

package/dist/ui/components/button-group/ButtonGroup.stories.js

@@ -0,0 +1,112 @@
+import ButtonGroup from './ButtonGroup.svelte';
+const meta = {
+    title: 'Ui/ButtonGroup',
+    component: ButtonGroup,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A button group component that allows users to select one option from multiple choices. Provides keyboard navigation and accessibility features.'
+            }
+        }
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        buttons: {
+            control: 'object',
+            description: 'Array of button options with name and value properties'
+        },
+        selected: {
+            control: 'text',
+            description: 'Currently selected value'
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the entire button group is disabled'
+        },
+        id: {
+            control: 'text',
+            description: 'Unique identifier for the button group'
+        },
+        onselect: {
+            action: 'onselect',
+            description: 'Event handler called when a button is selected'
+        }
+    }
+};
+export default meta;
+// Basic stories
+export const Default = {
+    args: {
+        buttons: [
+            { name: 'Option 1', value: 'option1' },
+            { name: 'Option 2', value: 'option2' }
+        ],
+        selected: 'option1'
+    }
+};
+export const WithoutSelection = {
+    args: {
+        buttons: [
+            { name: 'Left', value: 'left' },
+            { name: 'Center', value: 'center' },
+            { name: 'Right', value: 'right' }
+        ]
+    }
+};
+export const Disabled = {
+    args: {
+        buttons: [
+            { name: 'Edit', value: 'edit' },
+            { name: 'Preview', value: 'preview' },
+            { name: 'Publish', value: 'publish' }
+        ],
+        selected: 'edit',
+        disabled: true
+    }
+};
+export const LongLabels = {
+    args: {
+        buttons: [
+            { name: 'Short', value: 'short' },
+            { name: 'Medium Length', value: 'medium' },
+            { name: 'Very Long Button Label', value: 'long' }
+        ],
+        selected: 'medium'
+    }
+};
+export const ManyOptions = {
+    args: {
+        buttons: [
+            { name: 'XS', value: 'xs' },
+            { name: 'SM', value: 'sm' },
+            { name: 'MD', value: 'md' },
+            { name: 'LG', value: 'lg' },
+            { name: 'XL', value: 'xl' },
+            { name: 'XXL', value: 'xxl' }
+        ],
+        selected: 'md'
+    }
+};
+// Interactive example
+export const Interactive = {
+    render: (args) => ({
+        Component: ButtonGroup,
+        props: {
+            ...args,
+            onselect: (value) => {
+                console.log('Selected:', value);
+                // Update the selected value to show selection change
+                args.selected = value;
+            }
+        }
+    }),
+    args: {
+        buttons: [
+            { name: 'Grid', value: 'grid' },
+            { name: 'List', value: 'list' },
+            { name: 'Card', value: 'card' }
+        ],
+        selected: 'grid'
+    }
+};

package/dist/ui/components/{ButtonGroup.svelte → button-group/ButtonGroup.svelte}

@@ -1,14 +1,13 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte';
-
-	export let id: string;
-	export let buttons: { name: string; value: string }[] = [];
-	export let selected: string;
-	export let disabled = false;
+	interface Props {
+		id?: string;
+		buttons?: { name: string; value: string }[];
+		selected?: string;
+		disabled?: boolean;
+		onselect?: (value: string) => void;
+	}
 
-	const dispatch = createEventDispatcher<{
-		select: string;
-	}>();
+	let { id, buttons = [], selected = $bindable(), disabled = false, onselect }: Props = $props();
 
 	/**
 	 * Sets selected value and dispatches the select event.
@@ -17,7 +16,7 @@
 	const selectButton = (value: string) => {
 		if (disabled) return;
 		selected = value;
-		dispatch('select', value);
+		onselect?.(value);
 	};
 
 	/**
@@ -34,20 +33,15 @@
 	};
 </script>
 
-<div class="button-group">
+<div class="btn-group">
 	{#each buttons as { name, value }, index (index)}
 		<div
 			{id}
-			class="button {selected === value ? 'active' : ''} {disabled ? 'disabled' : ''}"
+			class="btn {selected === value ? 'active' : ''} {disabled ? 'disabled' : ''}"
 			role="button"
 			tabindex={disabled ? -1 : 0}
-			on:click={() => selectButton(value)}
-			{...{
-				// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-				//@ts-ignore - svelte v4 types for markdown not supported https://github.com/sveltejs/svelte/issues/4701
-				//on:keydown: (event: KeyboardEvent) => handleKeydown(event, value)
-			}}
-			on:keydown={(event) => handleKeydown(event, value)}
+			onclick={() => selectButton(value)}
+			onkeydown={(event) => handleKeydown(event, value)}
 			aria-disabled={disabled}
 		>
 			{name}
@@ -56,7 +50,7 @@
 </div>
 
 <style>
-	.button-group {
+	.btn-group {
 		display: flex;
 		background: var(
 			--action-action-secondary-background,
@@ -66,41 +60,34 @@
 		box-shadow: var(--boxShadows-action-secondary);
 	}
 
-	.button {
+	.btn {
 		padding: 4px 8px;
 		cursor: pointer;
 		background: transparent;
-		border-radius: 0px;
-		transition: background-color 0.2s;
-		border-width: 0px;
+		border-radius: var(--border-radius);
 		margin: 2px 0px;
 		color: var(--text1);
 	}
 
-	.button.disabled {
+	.btn.disabled {
 		opacity: 0.75;
 		cursor: not-allowed;
 	}
 
-	.button-group .button:first-of-type {
+	.btn-group .btn:first-of-type {
 		margin-left: 2px;
 		border-top-left-radius: var(--border-radius);
 		border-bottom-left-radius: var(--border-radius);
 	}
 
-	.button-group .button:last-of-type {
+	.btn-group .btn:last-of-type {
 		margin-right: 2px;
 		border-top-right-radius: var(--border-radius);
 		border-bottom-right-radius: var(--border-radius);
 	}
 
-	.button:hover {
-		background-color: var(--actionSecondaryBackgroundHover);
-	}
-
-	.button.active {
+	.btn.active {
 		background: var(--background1);
 		color: white;
-		border-radius: var(--border-radius);
 	}
 </style>

package/dist/ui/components/button-group/ButtonGroup.svelte.d.ts

@@ -0,0 +1,13 @@
+interface Props {
+    id?: string;
+    buttons?: {
+        name: string;
+        value: string;
+    }[];
+    selected?: string;
+    disabled?: boolean;
+    onselect?: (value: string) => void;
+}
+declare const ButtonGroup: import("svelte").Component<Props, {}, "selected">;
+type ButtonGroup = ReturnType<typeof ButtonGroup>;
+export default ButtonGroup;

package/dist/ui/components/button-group/index.d.ts

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

package/dist/ui/components/button-group/index.js

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

package/dist/ui/components/button-group/types.d.ts

@@ -0,0 +1,32 @@
+export interface ButtonGroupOption {
+    /**
+     * Display name for the button
+     */
+    name: string;
+    /**
+     * Value associated with the button
+     */
+    value: string;
+}
+export interface ButtonGroupProps {
+    /**
+     * Unique identifier for the button group
+     */
+    id?: string;
+    /**
+     * Array of button options
+     */
+    buttons?: ButtonGroupOption[];
+    /**
+     * Currently selected value
+     */
+    selected?: string;
+    /**
+     * Whether the entire button group is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Event handler called when a button is selected
+     */
+    onselect?: (value: string) => void;
+}

package/dist/ui/components/checkbox/Checkbox.stories.d.ts

@@ -0,0 +1,55 @@
+import type { StoryObj } from '@storybook/sveltekit';
+declare const meta: {
+    title: string;
+    component: import("svelte").Component<import("./types").CheckboxProps, {}, "">;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+    argTypes: {
+        checked: {
+            control: string;
+            description: string;
+        };
+        defaultChecked: {
+            control: string;
+            description: string;
+        };
+        disabled: {
+            control: string;
+            description: string;
+        };
+        variant: {
+            control: {
+                type: string;
+            };
+            options: string[];
+            description: string;
+        };
+        onChange: {
+            action: string;
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const DefaultChecked: Story;
+export declare const Controlled: Story;
+export declare const CheckboxVariant: Story;
+export declare const RadioVariant: Story;
+export declare const Disabled: Story;
+export declare const DisabledChecked: Story;
+export declare const DisabledRadio: Story;
+export declare const Uncontrolled: Story;
+export declare const Interactive: Story;
+export declare const InteractiveRadio: Story;
+export declare const AccessibilityTest: Story;
+export declare const MultipleCheckboxes: Story;
+export declare const FocusStates: Story;