@finsweet/webflow-apps-utils 1.0.2 → 1.0.4

package/dist/ui/components/section/Section.stories.svelte

@@ -0,0 +1,263 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { fn } from 'storybook/test';
+
+	import Section from './Section.svelte';
+
+	const { Story } = defineMeta({
+		title: 'UI/Section',
+		component: Section,
+		tags: ['autodocs'],
+		argTypes: {
+			hide: {
+				control: 'boolean',
+				description: 'Whether to hide the section'
+			},
+			borders: {
+				control: 'check',
+				options: ['top', 'bottom', 'left', 'right'],
+				description: 'Which borders to show on the section'
+			},
+			active: {
+				control: 'boolean',
+				description: 'Whether to show an active state'
+			},
+			clickable: {
+				control: 'boolean',
+				description: 'Whether the section is clickable (enables hover effects and interaction)'
+			},
+			disabled: {
+				control: 'boolean',
+				description: 'Whether the section is disabled'
+			},
+			scrollable: {
+				control: 'boolean',
+				description: 'Enable scrollable content with OverlayScrollbars'
+			},
+			class: {
+				control: 'text',
+				description: 'Custom CSS class names'
+			},
+			disabledMessage: {
+				control: 'text',
+				description: 'Message to show in disabled tooltip (enables edit mode warning)'
+			},
+			disabledTooltipWidth: {
+				control: 'text',
+				description: 'Width of the disabled tooltip'
+			},
+			onclick: { action: 'clicked' }
+		},
+		args: {
+			onclick: fn()
+		}
+	});
+
+	const defaultArgs = {
+		backgroundColor: 'black',
+		color: 'white',
+		width: '400px',
+		height: '300px'
+	};
+
+	const scrollableArgs = {
+		backgroundColor: 'black',
+		color: 'white',
+		width: '400px',
+		height: '200px'
+	};
+</script>
+
+<!-- Basic stories -->
+<Story
+	name="Default"
+	args={{
+		...defaultArgs
+	}}>Default section content</Story
+>
+
+<Story
+	name="With Borders"
+	args={{
+		borders: ['top', 'bottom'],
+		...defaultArgs
+	}}
+>
+	Section with top and bottom borders
+</Story>
+
+<Story
+	name="All Borders"
+	args={{
+		borders: ['top', 'bottom', 'left', 'right'],
+		...defaultArgs
+	}}
+>
+	Section with all borders
+</Story>
+
+<Story
+	name="Active"
+	args={{
+		active: true,
+		...defaultArgs
+	}}
+>
+	Active section
+</Story>
+
+<Story
+	name="Clickable"
+	args={{
+		clickable: true,
+		...defaultArgs
+	}}
+>
+	Clickable section - try clicking or using keyboard
+</Story>
+
+<Story
+	name="Disabled Clickable"
+	args={{
+		clickable: true,
+		disabled: true,
+		...defaultArgs
+	}}
+>
+	Disabled clickable section
+</Story>
+
+<Story
+	name="Scrollable"
+	args={{
+		scrollable: true,
+		...defaultArgs
+	}}
+>
+	<div style=" width:100%">
+		<h3 style="margin: 0 0 12px 0; color: white; font-size: 16px;">Scrollable Content Test</h3>
+		<p style="margin: 8px 0; color: #ccc; line-height: 1.4;">
+			This is scrollable content that should overflow the container.
+		</p>
+		<p style="margin: 8px 0; color: #ccc; line-height: 1.4;">Line 2 of content</p>
+		<p style="margin: 8px 0; color: #ccc; line-height: 1.4;">Line 3 of content</p>
+		<p style="margin: 8px 0; color: #ccc; line-height: 1.4;">Line 4 of content</p>
+		<p style="margin: 8px 0; color: #ccc; line-height: 1.4;">Line 5 of content</p>
+		<p style="margin: 8px 0; color: #ccc; line-height: 1.4;">Line 6 of content</p>
+		<p style="margin: 8px 0; color: #ccc; line-height: 1.4;">Line 7 of content</p>
+		<p style="margin: 8px 0; color: #ccc; line-height: 1.4;">Line 8 of content</p>
+		<p style="margin: 8px 0; color: #ccc; line-height: 1.4;">Line 9 of content</p>
+		<p style="margin: 8px 0; color: #ccc; line-height: 1.4;">Line 10 of content</p>
+		<p style="margin: 8px 0; color: #ccc; line-height: 1.4;">Line 11 of content</p>
+		<p style="margin: 8px 0; color: #ccc; line-height: 1.4;">Line 12 of content</p>
+		<p style="margin: 8px 0; color: #ccc; line-height: 1.4;">Line 13 of content</p>
+		<p style="margin: 8px 0; color: #ccc; line-height: 1.4;">Line 14 of content</p>
+		<p style="margin: 8px 0; color: #ccc; line-height: 1.4;">Line 15 of content</p>
+		<p style="margin: 8px 0; color: #ccc; line-height: 1.4;">Line 16 of content</p>
+		<p style="margin: 8px 0; color: #ccc; line-height: 1.4;">Line 17 of content</p>
+		<p style="margin: 8px 0; color: #ccc; line-height: 1.4;">Line 18 of content</p>
+		<p style="margin: 8px 0; color: #ccc; line-height: 1.4;">Line 19 of content</p>
+		<p style="margin: 8px 0; color: #ccc; line-height: 1.4;">This should be scrollable! 🎯</p>
+	</div>
+</Story>
+
+<Story
+	name="With Tooltip"
+	args={{
+		tooltip: {
+			message: 'This is a helpful tooltip message',
+			placement: 'top',
+			...defaultArgs
+		}
+	}}
+>
+	Section with custom tooltip - hover to see
+</Story>
+
+<Story
+	name="Disabled in Edit Mode"
+	args={{
+		disabledMessage:
+			'This option is disabled in edit mode. If you want to change it, please generate a new Component.',
+		...defaultArgs
+	}}
+>
+	Section disabled in edit mode - hover to see warning
+</Story>
+
+<Story
+	name="Combined Features"
+	args={{
+		clickable: true,
+		active: true,
+		borders: ['top', 'bottom'],
+		scrollable: true,
+		width: '400px',
+		height: '120px', // Small height to force scrolling
+		backgroundColor: 'black'
+	}}
+>
+	<div style="padding: 12px;">
+		<p style="margin: 4px 0; color: white;">
+			Combined features: clickable, active, bordered, and scrollable
+		</p>
+		<p style="margin: 4px 0; color: #ccc;">More content to scroll through</p>
+		<p style="margin: 4px 0; color: #ccc;">Even more content here</p>
+		<p style="margin: 4px 0; color: #ccc;">Additional line of text</p>
+		<p style="margin: 4px 0; color: #ccc;">Last line of content</p>
+	</div>
+</Story>
+
+<Story
+	name="Complex Layout"
+	args={{
+		...defaultArgs
+	}}
+>
+	<div class="space-y-4">
+		<h3 class="text-lg font-semibold">Complex Content</h3>
+		<p>This section contains various UI elements:</p>
+		<button class="px-3 py-1 bg-blue-500 text-white rounded">Button</button>
+		<input type="text" placeholder="Input field" class="border rounded px-2 py-1" />
+		<select class="border rounded px-2 py-1">
+			<option>Select option</option>
+		</select>
+	</div>
+</Story>
+
+<Story
+	name="Interactive Demo"
+	args={{
+		clickable: true,
+		borders: ['left'],
+		...defaultArgs
+	}}
+>
+	<div class="p-2">
+		<h4 class="font-medium mb-2">Interactive Demo</h4>
+		<p class="text-sm text-gray-600">
+			Click this section or use keyboard navigation (Tab + Enter/Space)
+		</p>
+	</div>
+</Story>
+
+<Story
+	name="Accessibility Test"
+	args={{
+		clickable: true,
+		borders: ['all'],
+		...defaultArgs
+	}}
+>
+	Accessibility test - proper ARIA attributes and keyboard support
+</Story>
+
+<Story
+	name="Hidden"
+	args={{
+		hide: true,
+		...defaultArgs
+	}}
+>
+	This section is hidden
+</Story>

package/dist/ui/components/section/Section.stories.svelte.d.ts

@@ -0,0 +1,27 @@
+export default Section;
+type Section = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Section: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import Section from './Section.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/ui/components/section/Section.svelte

@@ -0,0 +1,326 @@
+<script lang="ts">
+	import 'overlayscrollbars/overlayscrollbars.css';
+
+	import type { PartialOptions } from 'overlayscrollbars';
+	import { OverlayScrollbarsComponent } from 'overlayscrollbars-svelte';
+
+	import { BRAND } from '../../../utils';
+
+	import { WarningCircleOutlineIcon } from '../../icons';
+	import { Tooltip } from '../tooltip';
+	import type { SectionProps } from './types.js';
+
+	let {
+		hide = false,
+		borders = [],
+		active = false,
+		clickable = false,
+		disabled = false,
+		scrollable = false,
+		width,
+		height,
+		backgroundColor,
+		padding = 'var(--Spacing-12, 12px)',
+		gap = 'var(--Spacing-8, 8px)',
+		class: className = '',
+		tooltip,
+		disabledMessage,
+		disabledTooltipWidth = '249px',
+		children,
+		onclick,
+		onkeydown,
+		onmouseover,
+		onmouseleave,
+		onfocus,
+		onblur,
+		...restProps
+	}: SectionProps = $props();
+
+	// Generate unique ID using $state for reactivity
+	let uniqueId = $state(crypto.randomUUID());
+
+	// Component state
+	let sectionElement: HTMLDivElement | undefined = $state();
+
+	// Handle click events
+	function handleClick(event: MouseEvent) {
+		if (disabled || !clickable) return;
+		onclick?.(event);
+	}
+
+	// Handle keyboard events
+	function handleKeydown(event: KeyboardEvent) {
+		if (disabled || !clickable) return;
+
+		// Activate on Enter or Space
+		if (event.key === 'Enter' || event.key === ' ') {
+			event.preventDefault();
+			// Call the click handler directly for better test compatibility
+			handleClick(new MouseEvent('click', { bubbles: true, cancelable: true }));
+		}
+
+		onkeydown?.(event);
+	}
+
+	// Handle other events
+	function handleMouseOver(event: MouseEvent) {
+		if (disabled) return;
+		onmouseover?.(event);
+	}
+
+	function handleMouseLeave(event: MouseEvent) {
+		if (disabled) return;
+		onmouseleave?.(event);
+	}
+
+	function handleFocus(event: FocusEvent) {
+		if (disabled) return;
+		onfocus?.(event);
+	}
+
+	function handleBlur(event: FocusEvent) {
+		if (disabled) return;
+		onblur?.(event);
+	}
+
+	// Computed classes
+	let computedClasses = $derived.by(() => {
+		const classes = ['section-wrap'];
+
+		if (active) classes.push('active');
+		if (clickable) classes.push('clickable');
+		if (disabled || disabledMessage) classes.push('disabled');
+		if (scrollable) classes.push('scrollable');
+		if (disabledMessage) classes.push('disabled-in-edit-mode');
+		if (className) classes.push(className);
+
+		// Add border classes
+		borders.forEach((border) => {
+			classes.push(`border-${border}`);
+		});
+
+		return classes.join(' ');
+	});
+
+	// Computed inline styles
+	let computedStyles = $derived.by(() => {
+		const styles: Record<string, string> = {};
+
+		if (width) styles.width = width;
+		if (height) styles.height = height;
+		if (backgroundColor) styles['background-color'] = backgroundColor;
+		if (padding) styles.padding = padding;
+		if (gap) styles.gap = gap;
+
+		return styles;
+	});
+
+	// Determine accessibility attributes based on clickable state
+	let role = $derived(clickable ? 'button' : undefined);
+	let tabindex = $derived(clickable ? (disabled ? -1 : 0) : undefined);
+	let ariaDisabled = $derived(clickable ? disabled : undefined);
+
+	// Determine tooltip configuration
+	let shouldShowTooltip = $derived(!!tooltip?.message || !!tooltip?.tooltipContent);
+	let shouldShowDisabledTooltip = $derived(!!disabledMessage);
+	let hasAnyTooltip = $derived(shouldShowTooltip || shouldShowDisabledTooltip);
+
+	// Default disabled message
+	let defaultDisabledMessage = $derived(
+		disabledMessage ||
+			`This option is disabled in edit mode. If you want to change it, please generate a new ${BRAND.COMPONENT}.`
+	);
+
+	// OverlayScrollbars options
+	let overlayScrollbarsOptions: PartialOptions = {
+		overflow: {
+			x: 'hidden',
+			y: 'scroll'
+		},
+		scrollbars: {
+			theme: 'os-theme-dark',
+			visibility: 'auto',
+			autoHide: 'never',
+			autoHideDelay: 800
+		}
+	};
+</script>
+
+{#snippet sectionContent()}
+	<div
+		bind:this={sectionElement}
+		id={uniqueId}
+		class={computedClasses}
+		style={Object.keys(computedStyles).length > 0
+			? Object.entries(computedStyles)
+					.map(([key, value]) => `${key}: ${value}`)
+					.join('; ')
+			: undefined}
+		{role}
+		{...clickable ? { tabindex } : {}}
+		aria-disabled={ariaDisabled}
+		onclick={handleClick}
+		onkeydown={handleKeydown}
+		onmouseover={handleMouseOver}
+		onmouseleave={handleMouseLeave}
+		onfocus={handleFocus}
+		onblur={handleBlur}
+		{...restProps}
+	>
+		{#if scrollable}
+			<OverlayScrollbarsComponent options={overlayScrollbarsOptions} defer>
+				{#if children}
+					{@render children()}
+				{/if}
+			</OverlayScrollbarsComponent>
+		{:else if children}
+			{@render children()}
+		{/if}
+	</div>
+{/snippet}
+
+{#if !hide}
+	{#if shouldShowDisabledTooltip}
+		<Tooltip
+			tooltipIcon={WarningCircleOutlineIcon}
+			tooltipIconColor="var(--yellowText)"
+			message={defaultDisabledMessage}
+			width={disabledTooltipWidth}
+		>
+			{#snippet target()}
+				{@render sectionContent()}
+			{/snippet}
+		</Tooltip>
+	{:else if shouldShowTooltip}
+		<Tooltip {...tooltip}>
+			{#snippet target()}
+				{@render sectionContent()}
+			{/snippet}
+		</Tooltip>
+	{:else}
+		{@render sectionContent()}
+	{/if}
+{/if}
+
+<style>
+	.section-wrap {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		align-self: stretch;
+		position: relative;
+		border: 1px solid transparent;
+		transition:
+			opacity 0.2s ease,
+			background-color 0.2s ease,
+			transform 0.1s ease;
+	}
+
+	.section-wrap :global(.dropdown-wrapper) {
+		align-self: stretch;
+		justify-content: space-between;
+		width: 100%;
+	}
+
+	/* Border styles */
+	.section-wrap.border-top {
+		border-top: 1px solid var(--border1);
+	}
+	.section-wrap.border-left {
+		border-left: 1px solid var(--border1);
+	}
+	.section-wrap.border-right {
+		border-right: 1px solid var(--border1);
+	}
+	.section-wrap.border-bottom {
+		border-bottom: 1px solid var(--border1);
+	}
+
+	/* Clickable styles */
+	.section-wrap.clickable {
+		cursor: pointer;
+	}
+
+	.section-wrap.clickable:hover:not(.disabled) {
+		background: var(--defaultLightHover);
+		opacity: 0.8;
+	}
+
+	.section-wrap.clickable:active:not(.disabled) {
+		transform: translateY(1px);
+	}
+
+	.section-wrap.clickable:focus-visible {
+		outline: 2px solid var(--color-focus, #007bff);
+		outline-offset: 2px;
+	}
+
+	/* Active state */
+	.section-wrap.active {
+		border-bottom: 1px solid var(--background2);
+		background: var(--defaultLightActive);
+	}
+
+	/* Disabled state */
+	.section-wrap.disabled {
+		opacity: 0.6;
+		cursor: not-allowed;
+		pointer-events: none;
+	}
+
+	/* Disabled in edit mode styles */
+	.section-wrap.disabled-in-edit-mode {
+		pointer-events: none;
+	}
+
+	.section-wrap.disabled-in-edit-mode :global(.label-popup .labels span) {
+		opacity: 1;
+		pointer-events: none;
+	}
+
+	/* Make sure disabled state overrides any other cursor styles */
+	.section-wrap.disabled,
+	.section-wrap.disabled:hover,
+	.section-wrap.disabled:active,
+	.section-wrap.disabled:focus {
+		cursor: not-allowed !important;
+		pointer-events: none !important;
+		opacity: 0.6 !important;
+		transform: none !important;
+	}
+
+	.section-wrap.scrollable :global([data-overlayscrollbars-initialize]) {
+		width: 100% !important;
+		height: 100% !important;
+	}
+
+	/* Scrollable content styles */
+	.section-wrap.scrollable {
+		overflow: hidden; /* Let OverlayScrollbars handle the overflow */
+	}
+
+	/* OverlayScrollbars dark theme customization using design system */
+	.section-wrap :global(.os-scrollbar) {
+		--os-size: var(--sb-size, 6px);
+		--os-padding-perpendicular: 2px;
+		--os-padding-axis: 2px;
+	}
+
+	.section-wrap :global(.os-scrollbar-track) {
+		background: var(--sb-track-color);
+		border-radius: 4px;
+	}
+
+	.section-wrap :global(.os-scrollbar-handle) {
+		background: var(--sb-thumb-color);
+		border-radius: 4px;
+	}
+
+	.section-wrap :global(.os-scrollbar-handle:hover) {
+		background: var(--background3);
+	}
+
+	.section-wrap :global(.os-scrollbar-handle:active) {
+		background: var(--background2);
+	}
+</style>

package/dist/ui/components/section/Section.svelte.d.ts

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

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

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

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

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