@finsweet/webflow-apps-utils 1.0.2 → 1.0.3

package/dist/providers/types.d.ts

@@ -0,0 +1,103 @@
+import type { Snippet } from 'svelte';
+export type FormContextState = {
+    currentForm: string | null;
+    validationMode: 'strict' | 'loose';
+    formErrors: Record<string, string[]>;
+};
+export type AppContextState = {
+    editMode: boolean;
+    repairMode: boolean;
+    title: string | null;
+};
+export type DataContextState = {
+    cacheSize: number;
+    syncInterval: number;
+    lastSync: number | null;
+};
+export type ContextState<T = unknown> = {
+    data: T;
+    updatedAt: number;
+    version: number;
+};
+export type GlobalContextState = {
+    contexts: Map<string, ContextState>;
+    activeContexts: Set<string>;
+};
+export interface ContextOperations<T> {
+    get(): T | null;
+    set(data: Partial<T>): void;
+    update(updater: (current: T | null) => T): void;
+    clear(): void;
+    reset(): void;
+    subscribe(callback: (data: T | null) => void): () => void;
+}
+export interface GlobalContextOperations {
+    getContext<T = unknown>(key: string): ContextOperations<T>;
+    hasContext(key: string): boolean;
+    removeContext(key: string): void;
+    clearAll(): void;
+    resetAll(): void;
+    resetByKey(key: string): void;
+    getActiveContexts(): string[];
+    getAllContexts(): Record<string, unknown>;
+    getContextMetadata(key: string): {
+        updatedAt: number;
+        version: number;
+        isActive: boolean;
+    } | null;
+    get state(): Record<string, unknown>;
+    subscribe(callback: (event: ContextEvent | GlobalContextEvent) => void): () => void;
+}
+export interface ContextEvent {
+    type: 'set' | 'update' | 'clear' | 'reset';
+    contextKey: string;
+    data: unknown;
+    previousData?: unknown;
+    timestamp: number;
+}
+export interface GlobalContextEvent {
+    type: 'clearAll' | 'resetAll' | 'remove';
+    contextKey?: string;
+    data?: unknown;
+    previousData?: unknown;
+    timestamp: number;
+}
+export interface ConfiguratorWatchOptions {
+    watchAll?: boolean;
+    watchKeys?: string[];
+    debounceMs?: number;
+}
+export interface ConfiguratorState<T = Record<string, unknown>> {
+    configurator: T | null;
+    configuratorCache: T | null;
+    hasChanged: boolean;
+    watchOptions: ConfiguratorWatchOptions;
+}
+export interface AppContextData<TConfigurator = Record<string, unknown>> {
+    editMode: boolean;
+    repairMode: boolean;
+    title: string | null;
+    debugMode?: boolean;
+    configurator: ConfiguratorState<TConfigurator>;
+}
+export interface FormContextData {
+    formKey: string | null;
+    formUpdateKey: string | null;
+}
+export interface DataContextData<TData = Record<string, unknown>> {
+    state: TData | null;
+}
+export interface GlobalProviderProps {
+    initialContexts?: Record<string, unknown>;
+    debug?: boolean;
+    children?: Snippet;
+}
+export declare const CONTEXT_KEYS: {
+    readonly APP: "app";
+    readonly FORM: "form";
+    readonly DATA: "data";
+};
+export type ContextId = string & {
+    readonly brand: unique symbol;
+};
+export type ContextKey = keyof typeof CONTEXT_KEYS;

package/dist/providers/types.js

@@ -0,0 +1,6 @@
+// Context keys for type safety
+export const CONTEXT_KEYS = {
+    APP: 'app',
+    FORM: 'form',
+    DATA: 'data'
+};

package/dist/router/README.md

@@ -179,9 +179,9 @@ const awaitRouter = async () => {
 </script>
 
 <div class="nav-links-wrapper">
-	<Clickable on:click={goBack}>
+	<Section clickable onclick={goBack}>
 		<!-- ... rest of your template -->
-	</Clickable>
+	</Section>
 </div>
 ```
 

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/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/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;