@finsweet/webflow-apps-utils 1.0.2 → 1.0.3

package/dist/ui/components/checkbox/Checkbox.stories.js

@@ -0,0 +1,162 @@
+import Checkbox from './Checkbox.svelte';
+const meta = {
+    title: 'Ui/Checkbox',
+    component: Checkbox,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A versatile checkbox component following MUI patterns with support for controlled/uncontrolled usage, checkbox and radio variants, and disabled states.'
+            }
+        }
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        checked: {
+            control: 'boolean',
+            description: 'If true, the component is checked. Use for controlled components.'
+        },
+        defaultChecked: {
+            control: 'boolean',
+            description: 'The default checked state. Use when the component is not controlled.'
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'If true, the component is disabled.'
+        },
+        variant: {
+            control: { type: 'select' },
+            options: ['checkbox', 'radio'],
+            description: 'The checkbox type variant'
+        },
+        onChange: {
+            action: 'onChange',
+            description: 'Callback fired when the state is changed.'
+        }
+    }
+};
+export default meta;
+// Basic stories
+export const Default = {
+    args: {}
+};
+export const DefaultChecked = {
+    args: {
+        defaultChecked: true
+    }
+};
+export const Controlled = {
+    args: {
+        checked: true
+    }
+};
+// Variants
+export const CheckboxVariant = {
+    args: {
+        variant: 'checkbox',
+        defaultChecked: true
+    }
+};
+export const RadioVariant = {
+    args: {
+        variant: 'radio',
+        defaultChecked: true
+    }
+};
+// States
+export const Disabled = {
+    args: {
+        disabled: true
+    }
+};
+export const DisabledChecked = {
+    args: {
+        disabled: true,
+        defaultChecked: true
+    }
+};
+export const DisabledRadio = {
+    args: {
+        disabled: true,
+        defaultChecked: true,
+        variant: 'radio'
+    }
+};
+// Uncontrolled usage (default behavior)
+export const Uncontrolled = {
+    args: {
+        defaultChecked: false
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Uncontrolled component manages its own state. Use defaultChecked to set initial state and onChange to listen for changes.'
+            }
+        }
+    }
+};
+// Interactive examples
+export const Interactive = {
+    args: {
+        onChange: (checked) => {
+            console.log('Checkbox checked:', checked);
+        }
+    }
+};
+export const InteractiveRadio = {
+    args: {
+        variant: 'radio',
+        onChange: (checked) => {
+            console.log('Radio checked:', checked);
+        }
+    }
+};
+// Accessibility testing
+export const AccessibilityTest = {
+    args: {
+        defaultChecked: false,
+        'aria-label': 'Accept terms and conditions'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'This story demonstrates proper ARIA attributes for screen readers. The checkbox can be operated with keyboard (Space or Enter keys).'
+            }
+        },
+        a11y: {
+            config: {
+                rules: [
+                    { id: 'button-name', enabled: true },
+                    { id: 'aria-allowed-attr', enabled: true }
+                ]
+            }
+        }
+    }
+};
+// Multiple checkboxes showcase
+export const MultipleCheckboxes = {
+    render: () => ({
+        Component: Checkbox,
+        props: {}
+    }),
+    parameters: {
+        docs: {
+            description: {
+                story: 'Example showing multiple checkboxes in different states.'
+            }
+        }
+    }
+};
+// Focus demonstration
+export const FocusStates = {
+    args: {
+        defaultChecked: false
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Click on the checkbox and use Tab to see focus indicators. The component supports keyboard navigation with Space and Enter keys.'
+            }
+        }
+    }
+};

package/dist/ui/components/checkbox/Checkbox.svelte

@@ -0,0 +1,141 @@
+<script lang="ts">
+	import { SquareCheckIcon } from '../../icons';
+	import type { CheckboxProps } from './types.js';
+
+	let {
+		checked,
+		defaultChecked = false,
+		disabled = false,
+		variant = 'checkbox',
+		onChange,
+		class: className = '',
+		...restProps
+	}: CheckboxProps = $props();
+
+	// Component state using Svelte 5 runes
+	let checkboxElement: HTMLDivElement | undefined = $state();
+
+	// Internal state for uncontrolled usage
+	let internalChecked = $state(defaultChecked);
+
+	// Determine if component is controlled (checked prop is provided)
+	let isControlled = $derived(checked !== undefined);
+
+	// Current checked state - use controlled value if provided, otherwise internal state
+	let isChecked = $derived(isControlled ? checked : internalChecked);
+	let isDisabled = $derived(disabled);
+
+	// CSS class computation
+	let checkboxClasses = $derived(
+		`
+		checkbox
+		checkbox--${variant}
+		${isChecked ? 'checkbox--checked' : ''}
+		${isDisabled ? 'checkbox--disabled' : ''}
+		${className}
+	`
+			.trim()
+			.replace(/\s+/g, ' ')
+	);
+
+	/**
+	 * Handles click events on the checkbox
+	 */
+	const handleClick = (): void => {
+		if (isDisabled) return;
+
+		const newChecked = !isChecked;
+
+		// Update internal state if uncontrolled
+		if (!isControlled) {
+			internalChecked = newChecked;
+		}
+
+		// Always call onChange callback
+		onChange?.(newChecked);
+	};
+
+	/**
+	 * Handles keyboard events for accessibility
+	 */
+	const handleKeydown = (event: KeyboardEvent): void => {
+		if (isDisabled) return;
+
+		if (event.key === ' ' || event.key === 'Enter') {
+			event.preventDefault();
+			handleClick();
+		}
+	};
+</script>
+
+<div
+	bind:this={checkboxElement}
+	class={checkboxClasses}
+	onclick={handleClick}
+	onkeydown={handleKeydown}
+	role="checkbox"
+	tabindex={isDisabled ? -1 : 0}
+	aria-checked={isChecked}
+	aria-disabled={isDisabled}
+	{...restProps}
+>
+	{#if isChecked}
+		<SquareCheckIcon />
+	{/if}
+</div>
+
+<style>
+	.checkbox {
+		width: 16px;
+		height: 16px;
+		border-radius: 4px;
+		border: 2px solid #ffffff1a;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		cursor: pointer;
+		transition: all 0.2s ease-in-out;
+	}
+
+	.checkbox--radio {
+		border-radius: 50%;
+	}
+
+	.checkbox :global(svg) {
+		width: 16px;
+		height: 16px;
+	}
+
+	.checkbox--checked {
+		color: white;
+		border: none;
+	}
+
+	.checkbox--checked :global(svg) {
+		color: white;
+		background: #006acc;
+		border-radius: 4px;
+	}
+
+	.checkbox--checked.checkbox--radio :global(svg) {
+		border-radius: 50%;
+	}
+
+	.checkbox--disabled {
+		cursor: not-allowed;
+		opacity: 0.6;
+	}
+
+	.checkbox:focus-visible {
+		outline: 2px solid var(--color-focus, #006acc);
+		outline-offset: 2px;
+	}
+
+	.checkbox:hover:not(.checkbox--disabled) {
+		border-color: #ffffff33;
+	}
+
+	.checkbox--checked:hover:not(.checkbox--disabled) :global(svg) {
+		background: #0056a3;
+	}
+</style>

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

@@ -0,0 +1,4 @@
+import type { CheckboxProps } from './types.js';
+declare const Checkbox: import("svelte").Component<CheckboxProps, {}, "">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;

package/dist/ui/components/checkbox/index.d.ts

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

package/dist/ui/components/checkbox/index.js

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

package/dist/ui/components/checkbox/types.d.ts

@@ -0,0 +1,32 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export type CheckboxVariant = 'checkbox' | 'radio';
+export interface CheckboxProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onclick' | 'onchange'> {
+    /**
+     * If true, the component is checked.
+     */
+    checked?: boolean;
+    /**
+     * The default checked state. Use when the component is not controlled.
+     */
+    defaultChecked?: boolean;
+    /**
+     * If true, the component is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The checkbox type variant
+     */
+    variant?: CheckboxVariant;
+    /**
+     * Callback fired when the state is changed.
+     * @param checked - The new checked state
+     */
+    onChange?: (checked: boolean) => void;
+    /**
+     * Additional CSS classes
+     */
+    class?: string;
+}
+export interface CheckboxChangeEvent {
+    checked: boolean;
+}

package/dist/ui/components/controlled-buttons/ControlledButtons.stories.d.ts

@@ -0,0 +1,32 @@
+import type { StoryObj } from '@storybook/sveltekit';
+import type { ControlledButtonsProps } from './types.js';
+declare const meta: {
+    title: string;
+    component: import("svelte").Component<ControlledButtonsProps, {}, "">;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+    argTypes: {
+        buttons: {
+            control: "object";
+            description: string;
+        };
+        class: {
+            control: "text";
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const WithLoading: Story;
+export declare const WithTooltip: Story;
+export declare const WithPopup: Story;
+export declare const Mixed: Story;

package/dist/ui/components/controlled-buttons/ControlledButtons.stories.js

@@ -0,0 +1,152 @@
+import ControlledButtons from './ControlledButtons.svelte';
+const meta = {
+    title: 'UI/ControlledButtons',
+    component: ControlledButtons,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A controlled buttons component that renders multiple buttons with various configurations including tooltips, popups, and different variants.'
+            }
+        }
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        buttons: {
+            control: 'object',
+            description: 'Array of button configurations to render'
+        },
+        class: {
+            control: 'text',
+            description: 'Additional CSS classes to apply to the component'
+        }
+    }
+};
+export default meta;
+// Basic buttons
+export const Primary = {
+    args: {
+        buttons: [
+            {
+                id: 'save',
+                text: 'Save',
+                variant: 'primary',
+                onClick: () => console.log('Save clicked')
+            },
+            {
+                id: 'cancel',
+                text: 'Cancel',
+                variant: 'secondary',
+                onClick: () => console.log('Cancel clicked')
+            }
+        ]
+    }
+};
+// Buttons with loading states
+export const WithLoading = {
+    args: {
+        buttons: [
+            {
+                id: 'save',
+                text: 'Saving...',
+                variant: 'primary',
+                loading: true,
+                onClick: () => console.log('Save clicked')
+            },
+            {
+                id: 'cancel',
+                text: 'Cancel',
+                variant: 'secondary',
+                disabled: true,
+                onClick: () => console.log('Cancel clicked')
+            }
+        ]
+    }
+};
+// Button with tooltip
+export const WithTooltip = {
+    args: {
+        buttons: [
+            {
+                id: 'save',
+                text: 'Save',
+                variant: 'primary',
+                onClick: () => console.log('Save clicked'),
+                tooltip: {
+                    content: 'Save your changes to the project',
+                    placement: 'top',
+                    showArrow: true
+                }
+            }
+        ]
+    }
+};
+// Button with popup menu
+export const WithPopup = {
+    args: {
+        buttons: [
+            {
+                id: 'actions',
+                text: 'Actions',
+                variant: 'primary',
+                popupButtons: [
+                    {
+                        text: 'Edit',
+                        description: 'Edit the current item',
+                        onClick: () => console.log('Edit clicked')
+                    },
+                    {
+                        text: 'Delete',
+                        description: 'Remove the current item',
+                        onClick: () => console.log('Delete clicked')
+                    },
+                    {
+                        text: 'Duplicate',
+                        description: 'Create a copy of the item',
+                        onClick: () => console.log('Duplicate clicked')
+                    }
+                ]
+            }
+        ]
+    }
+};
+// Mixed button types
+export const Mixed = {
+    args: {
+        buttons: [
+            {
+                id: 'save',
+                text: 'Save',
+                variant: 'primary',
+                onClick: () => console.log('Save clicked'),
+                tooltip: {
+                    content: 'Save your changes',
+                    placement: 'top'
+                }
+            },
+            {
+                id: 'actions',
+                text: 'More Actions',
+                variant: 'secondary',
+                popupButtons: [
+                    {
+                        text: 'Export',
+                        description: 'Export data to file',
+                        onClick: () => console.log('Export clicked')
+                    },
+                    {
+                        text: 'Import',
+                        description: 'Import data from file',
+                        onClick: () => console.log('Import clicked')
+                    }
+                ]
+            },
+            {
+                id: 'cancel',
+                text: 'Cancel',
+                variant: 'secondary',
+                onClick: () => console.log('Cancel clicked')
+            }
+        ]
+    }
+};

package/dist/ui/components/{buttons/FooterButton.svelte → controlled-buttons/ControlledButtons.svelte}

@@ -1,70 +1,17 @@
 <script lang="ts">
-	import { type Component, onDestroy } from 'svelte';
-
-	import { createFormSubscription, globalStore } from '../../../stores';
-	import { canAccessFeature, finsweetUser } from '../../../utils';
+	import type { Snippet } from 'svelte';
 
 	import { ChevronIcon } from '../../icons';
 	import { Button, Text, Tooltip } from '..';
-	import Section from '../Section.svelte';
-	import type { ButtonItem } from './types';
-
-	/**
-	 * Accept individual buttons
-	 */
-	let {
-		editMode = false,
-		formKey,
-		buttons
-	}: {
-		buttons: ButtonItem[];
-		editMode: boolean;
-		formKey: string;
-	} = $props();
-
-	// Create reactive state for selected element
-	let selectedElement = $state<AnyElement | null>(null);
-
-	/**
-	 * Check if user is logged in
-	 */
-	const isLoggedIn = $derived(!!$finsweetUser?.user?.userId);
-	const form = createFormSubscription(formKey);
-
-	const unsubscribe =
-		typeof webflow !== 'undefined'
-			? webflow?.subscribe?.('selectedelement', (el) => {
-					selectedElement = el;
-				})
-			: () => {};
-
-	onDestroy(() => unsubscribe());
-
-	const buttonItems = $derived(() => {
-		const isEditting = editMode || !!$globalStore?.editMode;
-		const needsRepair = $globalStore?.repairMode && isEditting;
+	import { Section } from '../section';
+	import type { ControlledButtonItem, ControlledButtonsProps } from './types';
 
-		const hasAccess = canAccessFeature(isLoggedIn, $finsweetUser?.user?.libraryAccess, [
-			'canManageLibrary'
-		]);
-
-		return buttons.filter((item: ButtonItem) => {
-			// validation is handled in parent component
-			if (item.escapeValidation) return true;
-
-			//if not logged in remove library
-			if (!hasAccess?.granted) return item.type !== 'library';
-
-			// Filter out library buttons in create mode
-			if (isEditting && !needsRepair) return true;
-			return item.id !== 'save' && item.type !== 'library';
-		});
-	});
+	let { buttons, class: className = '' }: ControlledButtonsProps = $props();
 </script>
 
-<div class="footer">
-	<div class="grouped-buttons">
-		{#each buttonItems() as button, index (button.id || index)}
+<div class="footer {className}">
+	<div class="controlled-buttons">
+		{#each buttons as button, index (button.id || index)}
 			{#if button.show !== false}
 				<!-- Button with popup menu -->
 				{#if button?.popupButtons?.length}
@@ -72,6 +19,7 @@
 						position="fixed"
 						placement="top-start"
 						offsetVal={8}
+						padding="0"
 						showArrow={false}
 						listener={button.popupTrigger || 'click'}
 						listenerout={button.popupTrigger || 'click'}
@@ -93,10 +41,10 @@
 									{#each button.popupButtons || [] as popupButton, popupIndex (popupIndex)}
 										{#if popupButton.show !== false}
 											<Section
-												className="link"
+												class="link"
 												clickable
 												disabled={popupButton.disabled || popupButton.loading}
-												on:click={(e: MouseEvent) => {
+												onclick={(e: MouseEvent) => {
 													e.stopPropagation();
 													e.preventDefault();
 													if (popupButton.disabled || popupButton.loading) return;
@@ -132,6 +80,7 @@
 					<!-- Button with tooltip -->
 				{:else if button.tooltip}
 					<Tooltip
+						padding="0"
 						width={button.tooltip?.width || '160px'}
 						placement={button.tooltip?.placement || 'top'}
 						offsetVal={10}
@@ -180,10 +129,10 @@
 	.footer :global(.w-button svg) {
 		transform: rotate(270deg);
 	}
-	.grouped-buttons :global(.target:not(:has(.dropdown-label))) {
+	.controlled-buttons :global(.target:not(:has(.dropdown-label))) {
 		width: max-content !important;
 	}
-	.grouped-buttons :global(.target .tooltip) {
+	.controlled-buttons :global(.target .tooltip) {
 		padding: 8px 0;
 		gap: 0;
 	}
@@ -191,9 +140,12 @@
 		color: var(--yellowText);
 	}
 	.footer :global(.tooltip) {
-		padding: 0;
 		width: 100%;
 	}
+	.footer :global(.tooltip .content-wrapper) {
+		width: 100%;
+	}
+
 	.footer :global(.tooltip) {
 		padding: 0 !important;
 		flex-direction: column;
@@ -211,7 +163,7 @@
 	.tooltip-content.invalid-selection :global(svg) {
 		color: var(--yellowText);
 	}
-	.grouped-buttons {
+	.controlled-buttons {
 		display: flex;
 		flex-direction: row;
 		align-items: center;
@@ -236,7 +188,6 @@
 		min-width: 150px;
 		background: var(--background);
 		border-radius: 4px;
-		padding: 4px;
 	}
 
 	.popup-content-list {

package/dist/ui/components/controlled-buttons/ControlledButtons.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ControlledButtonsProps } from './types';
+declare const ControlledButtons: import("svelte").Component<ControlledButtonsProps, {}, "">;
+type ControlledButtons = ReturnType<typeof ControlledButtons>;
+export default ControlledButtons;

package/dist/ui/components/controlled-buttons/index.d.ts

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

package/dist/ui/components/controlled-buttons/index.js

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