@finsweet/webflow-apps-utils 1.0.1

package/dist/stores/forms.js

@@ -0,0 +1,307 @@
+import { derived, get, writable } from 'svelte/store';
+import { z } from 'zod';
+// Registry to track all form states by identifier
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+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
+ * @param identifier - Unique identifier for the form
+ * @param options - Configuration options
+ */
+export class FormValidator {
+    schema;
+    store;
+    form;
+    instancesSet = new Set();
+    initialValues;
+    identifier;
+    currentInstanceToIgnore = null;
+    /**
+     * Generates unique name, instance, and class based on solution name and existing instances
+     * @param existingInstances - Array of existing instance names
+     * @param solution - The base solution name
+     * @returns Object containing name, instance, and class values
+     */
+    static generateNames(existingInstances, solution, name) {
+        const instanceSet = new Set(existingInstances.map((inst) => inst.toLowerCase()));
+        // First try without suffix
+        let instance = `fs-${solution}`.toLowerCase();
+        let finalName = name;
+        // If the base instance is available, use it
+        if (!instanceSet.has(instance)) {
+            const className = instance.replace(/[^a-zA-Z0-9_-]/g, '-');
+            return {
+                name: finalName,
+                instance,
+                class: className
+            };
+        }
+        // If base is taken, find the next available suffix number starting from 1
+        let suffixNumber = 1;
+        do {
+            instance = `fs-${solution}-${suffixNumber}`.toLowerCase();
+            finalName = `${name} ${suffixNumber}`;
+            suffixNumber++;
+        } while (instanceSet.has(instance));
+        // Create class name (ensure it's valid)
+        const className = instance.replace(/[^a-zA-Z0-9_-]/g, '-');
+        return {
+            name: finalName,
+            instance,
+            class: className
+        };
+    }
+    /**
+     * Cleans up the class name to ensure it's valid
+     * @param className - The class name to clean up
+     * @returns The cleaned up class name
+     */
+    static sanitizeClassName(className) {
+        if (!className)
+            return '';
+        // Remove leading/trailing spaces and slashes
+        let sanitized = className.trim().replace(/^\/+|\/+$/g, '');
+        // Replace invalid characters with hyphens (keep only letters, numbers, underscores, hyphens)
+        sanitized = sanitized.replace(/[^a-zA-Z0-9_-]/g, '-');
+        // Remove leading/trailing hyphens and underscores
+        sanitized = sanitized.replace(/^[-_]+|[-_]+$/g, '');
+        // Collapse multiple consecutive hyphens into single hyphens
+        sanitized = sanitized.replace(/-+/g, '-');
+        return sanitized;
+    }
+    constructor(identifier, initialValues, options) {
+        this.identifier = identifier;
+        this.initialValues = initialValues;
+        // Initialize base schema
+        this.schema = z.object({
+            name: z.string().min(1, { message: 'Name is required' }),
+            instance: z.string().min(1, { message: 'Instance is required' }),
+            class: z.string().min(1, { message: 'Class is required' }).regex(classNameRegex, {
+                message: 'Class must contain only letters, numbers, underscores, and hyphens'
+            })
+        });
+        // Add existing instances to the set for uniqueness validation
+        if (options?.existingInstances) {
+            options.existingInstances.forEach((instance) => this.instancesSet.add(instance.toLowerCase()));
+        }
+        // Create the form state store
+        this.store = writable({
+            values: initialValues,
+            errors: {},
+            touched: {},
+            isValid: false,
+            isDirty: false,
+            isSubmitting: false
+        });
+        // Create a derived store that's the primary interface to the form
+        this.form = derived(this.store, ($store) => $store);
+        // Register this form with the global registry
+        formsRegistry.update((registry) => {
+            registry[identifier] = this;
+            return registry;
+        });
+        // Initial validation
+        this.validate();
+    }
+    /**
+     * Set a specific instance to ignore during validation
+     * Used in edit mode to prevent the current instance from being flagged as invalid
+     */
+    ignoreInstanceValidation(instanceValue, existingInstances) {
+        // update instanceset from existingInstances
+        this.instancesSet = new Set(existingInstances.map((inst) => inst.toLowerCase()?.trim()));
+        this.currentInstanceToIgnore = instanceValue?.toLowerCase() || null;
+        // Re-validate with the new ignored instance
+        this.validate();
+    }
+    /**
+     * Set the value of a specific field
+     */
+    setField(field, value) {
+        this.store.update((state) => {
+            const newState = {
+                ...state,
+                values: {
+                    ...state.values,
+                    [field]: value
+                },
+                touched: {
+                    ...state.touched,
+                    [field]: true
+                },
+                isDirty: true
+            };
+            return newState;
+        });
+        this.validate();
+    }
+    /**
+     * Set multiple field values at once
+     */
+    setFields(values) {
+        this.store.update((state) => {
+            const newTouched = { ...state.touched };
+            // Mark all updated fields as touched
+            Object.keys(values).forEach((key) => {
+                newTouched[key] = true;
+            });
+            return {
+                ...state,
+                values: {
+                    ...state.values,
+                    ...values
+                },
+                touched: newTouched,
+                isDirty: true
+            };
+        });
+        this.validate();
+    }
+    /**
+     * Handle instance field validation with uniqueness check
+     */
+    validateWithInstances(existingInstances) {
+        // Update the instance set
+        this.instancesSet = new Set(existingInstances.map((inst) => inst.toLowerCase()));
+        this.validate();
+    }
+    /**
+     * Reset the form to initial values
+     */
+    reset() {
+        this.store.set({
+            values: { ...this.initialValues },
+            errors: {},
+            touched: {},
+            isValid: false,
+            isDirty: false,
+            isSubmitting: false
+        });
+        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, {
+                    message: 'Class must contain only letters, numbers, underscores, and hyphens'
+                })
+            });
+            // Validate the current values against the schema
+            const result = currentSchema.safeParse(state.values);
+            const errors = {};
+            let isValid = true;
+            if (!result.success) {
+                isValid = false;
+                // Convert Zod errors to our error format
+                Object.keys(state.values).forEach((key) => {
+                    const fieldKey = key;
+                    // @ts-expect-error - Zod typing issue
+                    const fieldErrors = result.error.format()[fieldKey]?._errors || [];
+                    errors[fieldKey] = fieldErrors;
+                });
+            }
+            return {
+                ...state,
+                errors,
+                isValid
+            };
+        });
+    }
+    /**
+     * Set the form as submitting
+     */
+    setSubmitting(isSubmitting) {
+        this.store.update((state) => ({
+            ...state,
+            isSubmitting
+        }));
+    }
+    /**
+     * Get the current state of the form
+     */
+    getState() {
+        return get(this.store);
+    }
+}
+/**
+ * Get a form by its identifier
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function getFormById(identifier) {
+    const registry = get(formsRegistry);
+    return registry[identifier];
+}
+/**
+ * Check if a form with a specific identifier is valid
+ */
+export function isFormValid(identifier) {
+    const form = getFormById(identifier);
+    if (!form)
+        return false;
+    return form.getState().isValid;
+}
+/**
+ * Get error messages for a specific form
+ */
+export function getFormErrors(identifier) {
+    const form = getFormById(identifier);
+    if (!form)
+        return null;
+    return form.getState().errors;
+}
+/**
+ * Reset a form by its identifier
+ */
+export function resetForm(identifier) {
+    const form = getFormById(identifier);
+    if (!form)
+        return false;
+    form.reset();
+    return true;
+}
+// Add a store for each form that other components can subscribe to
+export function createFormSubscription(identifier) {
+    const form = getFormById(identifier);
+    if (!form) {
+        return writable({ isValid: false, errors: {}, values: {} });
+    }
+    // Create a store that reflects the current form state
+    const formStore = writable(form.getState());
+    // Set up interval to update the store
+    const intervalId = setInterval(() => {
+        const currentState = form.getState();
+        formStore.set(currentState);
+    }, 100);
+    // Return store with cleanup function
+    return {
+        subscribe: formStore.subscribe,
+        destroy: () => clearInterval(intervalId)
+    };
+}
+/**
+ * Store to track if the form is adding or updating to the Canvas
+ */
+export const isAddingOrUpdating = writable(false);
+export const loadingSelectedElement = writable(false);

package/dist/stores/globalStore.d.ts

@@ -0,0 +1,10 @@
+export type GlobalStoreState = {
+    componentKey: string | null;
+    editMode: boolean;
+    state: Record<string, any> | null;
+    repairMode: boolean;
+    formKey: string | null;
+    formUpdateKey: string | null;
+    title: string | null;
+};
+export declare const globalStore: import("svelte/store").Writable<GlobalStoreState>;

package/dist/stores/globalStore.js

@@ -0,0 +1,10 @@
+import { writable } from 'svelte/store';
+export const globalStore = writable({
+    componentKey: null,
+    editMode: false,
+    state: null,
+    formKey: null,
+    formUpdateKey: null,
+    repairMode: false,
+    title: null
+});

package/dist/stores/index.d.ts

@@ -0,0 +1,7 @@
+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

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

package/dist/stores/router.d.ts

@@ -0,0 +1,4 @@
+export declare const routerStore: import("svelte/store").Writable<{
+    hash: string;
+    url: URL | null;
+}>;

package/dist/stores/router.js

@@ -0,0 +1,5 @@
+import { writable } from 'svelte/store';
+export const routerStore = writable({
+    hash: '',
+    url: typeof window !== 'undefined' ? new URL(window.location.href) : null
+});

package/dist/stores/showConfirmActionModal.d.ts

@@ -0,0 +1 @@
+export declare const showConfirmActionModal: import("svelte/store").Writable<boolean>;

package/dist/stores/showConfirmActionModal.js

@@ -0,0 +1,2 @@
+import { writable } from 'svelte/store';
+export const showConfirmActionModal = writable(false);

package/dist/stores/siteInfo.d.ts

@@ -0,0 +1,13 @@
+export declare const siteInfo: import("svelte/store").Writable<{
+    siteId: string;
+    siteName: string;
+    shortName: string;
+    isPasswordProtected: boolean;
+    isPrivateStaging: boolean;
+    domains: Array<{
+        url: string;
+        lastPublished: string | null;
+        default: boolean;
+        stage: "staging" | "production";
+    }>;
+}>;

package/dist/stores/siteInfo.js

@@ -0,0 +1,2 @@
+import { writable } from 'svelte/store';
+export const siteInfo = writable();

package/dist/types/auth.d.ts

@@ -0,0 +1,40 @@
+export interface Subscription {
+    id: string;
+    product_id: string;
+    price_id: string;
+    status: string;
+    canceled_at: number | null;
+    current_period_end: number | null;
+    current_period_start: number | null;
+    metadata: SubscriptionMetadata;
+}
+export interface SubscriptionMetadata {
+    siteId: string;
+    rewardful: string;
+    siteUrl: string;
+    siteHostname: string;
+}
+export interface FinsweetAuth {
+    access_token: string;
+    expires_in: number;
+    id_token: string;
+    refresh_token: string;
+    scope: string;
+    token_type: string;
+    expires: number;
+    user: {
+        userId: string;
+        firstname: string;
+        admin: boolean;
+        auth0Id: string;
+        premium: boolean;
+        role: string;
+        libraryAccess: ('canFavourite' | 'canManageLibrary')[] | null;
+        folders: {
+            favourites: number;
+            configs: number;
+            savedComponents: number;
+        };
+    };
+    subscriptions: Subscription[];
+}

package/dist/types/auth.js

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

package/dist/types/customCode.d.ts

@@ -0,0 +1,16 @@
+interface CustomCodeAttributes {
+    async: string;
+    type: string;
+    siteId: string;
+    finsweet: 'components';
+}
+export interface CustomCodeBlock {
+    id?: string;
+    displayName?: string;
+    location: string;
+    hostedLocation?: string;
+    sourceCode?: string;
+    attributes: CustomCodeAttributes;
+    canCopy: boolean;
+}
+export {};

package/dist/types/customCode.js

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

package/dist/types/index.d.ts

@@ -0,0 +1,5 @@
+export * from './auth';
+export * from './customCode';
+export * from './license';
+export * from './webflow';
+export * from './window';

package/dist/types/index.js

@@ -0,0 +1,5 @@
+export * from './auth';
+export * from './customCode';
+export * from './license';
+export * from './webflow';
+export * from './window';

package/dist/types/license.d.ts

@@ -0,0 +1,5 @@
+export type License = {
+    app: string;
+    licensed: boolean;
+    name: string | null;
+};

package/dist/types/license.js

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

package/dist/types/webflow.d.ts

@@ -0,0 +1,125 @@
+/**
+ * Callback type for the Webflow.push() method.
+ */
+export type WebflowCallback = (value?: unknown) => unknown;
+export type WebflowModule = 'ix2' | 'commerce' | 'lottie' | 'lightbox' | 'slider' | 'tabs';
+interface WebflowCommerce {
+    destroy: () => void;
+    init: (params: {
+        siteId: string;
+        apiUrl: string;
+    }) => void;
+}
+interface WebflowLightbox {
+    preview: () => void;
+    design: () => void;
+    ready: () => void;
+}
+interface WebflowSlider {
+    preview: () => void;
+    design: () => void;
+    ready: () => void;
+    destroy: () => void;
+    redraw: () => void;
+}
+type WebflowTabs = WebflowSlider;
+interface WebflowIx2 {
+    destroy: () => void;
+    init: () => void;
+    actions: {
+        [key: string]: (...params: unknown[]) => unknown;
+    };
+    store: {
+        dispatch: (param: unknown) => void;
+        getState: () => {
+            ixData: {
+                actionLists: unknown;
+                eventTypeMap: unknown;
+                events: unknown;
+                mediaQueries: unknown;
+                mediaQueryKeys: unknown;
+            };
+            ixElements: {
+                [key: string]: unknown;
+            };
+            ixInstances: {
+                [key: string]: unknown;
+            };
+            ixRequest: {
+                [key: string]: unknown;
+            };
+            ixSession: {
+                eventState: {
+                    [key: string]: unknown;
+                };
+                [key: string]: unknown;
+            };
+        };
+    };
+}
+/**
+ * Includes methods of the Webflow.js object
+ */
+export interface Webflow extends Pick<WebflowCallback[], 'push'> {
+    destroy: () => void;
+    ready: () => void;
+    env: () => boolean;
+    analytics: {
+        optIn: ({ reload }: {
+            reload?: boolean;
+        }) => void;
+        optOut: ({ reload }: {
+            reload?: boolean;
+        }) => void;
+        getIsOptedOut: () => 'true' | null;
+    };
+    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 {};

package/dist/types/webflow.js

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

package/dist/types/window.d.ts

@@ -0,0 +1,14 @@
+import type { Webflow, WebflowCallback } from './webflow';
+/**
+ * Window object.
+ */
+declare global {
+    interface Window {
+        doNotTrack: string | null;
+        dataLayer: Array<{
+            event: string;
+        } | IArguments>;
+        Webflow?: Webflow | WebflowCallback[];
+    }
+}
+export type ALLOWED_BREAKPOINTS = '320' | '480' | '768' | '991' | '1280' | '1440' | '1920';

package/dist/types/window.js

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