@finsweet/webflow-apps-utils 1.0.1 → 1.0.3

package/dist/ui/components/{buttons → controlled-buttons}/types.d.ts

@@ -1,10 +1,10 @@
 import type { Placement } from '@floating-ui/dom';
 import type { Component } from 'svelte';
 /**
- * Individual button item properties
+ * Controlled button item properties
  */
-export interface ButtonItem {
-    id?: 'main' | 'update-single' | 'update-all' | 'save';
+export interface ControlledButtonItem {
+    id?: string;
     text: string;
     escapeValidation?: boolean;
     variant?: 'primary' | 'secondary' | 'cms';
@@ -13,7 +13,7 @@ export interface ButtonItem {
     type?: 'library' | 'component' | 'popup';
     onClick?: () => void;
     show?: boolean;
-    popupButtons?: ButtonItem[];
+    popupButtons?: ControlledButtonItem[];
     popupTrigger?: 'click' | 'hover';
     icon?: Component;
     description?: string;
@@ -26,3 +26,10 @@ export interface ButtonItem {
         icon?: Component;
     };
 }
+/**
+ * Controlled buttons props
+ */
+export interface ControlledButtonsProps {
+    buttons: ControlledButtonItem[];
+    class?: string;
+}

package/dist/ui/components/divider/Divider.stories.svelte

@@ -0,0 +1,134 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+	import Divider from './Divider.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Ui/Divider',
+		component: Divider,
+		tags: ['autodocs'],
+		parameters: {
+			layout: 'padded',
+			docs: {
+				description: {
+					component:
+						'A simple divider component for creating visual separation between content sections. Supports customizable dimensions, colors, and orientation.'
+				}
+			}
+		},
+		argTypes: {
+			height: {
+				control: 'text',
+				description: 'Height of the divider',
+				table: {
+					defaultValue: { summary: '1px' }
+				}
+			},
+			width: {
+				control: 'text',
+				description: 'Width of the divider',
+				table: {
+					defaultValue: { summary: '100%' }
+				}
+			},
+			background: {
+				control: 'color',
+				description: 'Background color of the divider',
+				table: {
+					defaultValue: { summary: 'var(--border1)' }
+				}
+			},
+			rotate: {
+				control: 'boolean',
+				description: 'Rotates the divider 90 degrees for vertical orientation',
+				table: {
+					defaultValue: { summary: 'false' }
+				}
+			},
+			class: {
+				control: 'text',
+				description: 'Additional CSS classes to apply'
+			}
+		}
+	});
+</script>
+
+<!-- Basic variants -->
+<Story name="Default" />
+
+<Story
+	name="Thick"
+	args={{
+		height: '4px'
+	}}
+/>
+
+<Story
+	name="Custom Color"
+	args={{
+		background: '#007bff',
+		height: '2px'
+	}}
+/>
+
+<Story
+	name="Short Divider"
+	args={{
+		width: '50%',
+		height: '2px'
+	}}
+/>
+
+<Story
+	name="Vertical"
+	args={{
+		rotate: true,
+		height: '100px',
+		width: '2px'
+	}}
+/>
+
+<!-- Color variants -->
+<Story
+	name="Success"
+	args={{
+		background: 'var(--greenIcon)',
+		height: '3px'
+	}}
+/>
+
+<Story
+	name="Warning"
+	args={{
+		background: 'var(--yellowBorder)',
+		height: '3px'
+	}}
+/>
+
+<Story
+	name="Error"
+	args={{
+		background: 'var(--redBorder)',
+		height: '3px'
+	}}
+/>
+
+<!-- Complex example with content context -->
+<Story name="In Content">
+	<div style="padding: 20px; background: var(--background1); border-radius: 8px;">
+		<p style="margin: 0 0 16px 0; color: var(--text1);">Content above divider</p>
+		<Divider height="1px" background="var(--border1)" />
+		<p style="margin: 16px 0 0 0; color: var(--text1);">Content below divider</p>
+	</div>
+</Story>
+
+<!-- Playground -->
+<Story
+	name="Playground"
+	args={{
+		height: '2px',
+		width: '100%',
+		background: '#007bff',
+		rotate: false
+	}}
+/>

package/dist/ui/components/{clickable/Clickable.stories.svelte.d.ts → divider/Divider.stories.svelte.d.ts}

@@ -1,17 +1,17 @@
-export default Clickable;
-type Clickable = SvelteComponent<{
+export default Divider;
+type Divider = SvelteComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
     $$bindings?: string | undefined;
 };
-declare const Clickable: $$__sveltets_2_IsomorphicComponent<{
+declare const Divider: $$__sveltets_2_IsomorphicComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-import Clickable from './Clickable.svelte';
+import Divider from './Divider.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;

package/dist/ui/components/divider/Divider.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import type { DividerProps } from './types.js';
+
+	let {
+		height = '1px',
+		width = '100%',
+		background = 'var(--border1)',
+		rotate = false,
+		class: className = '',
+		...restProps
+	}: DividerProps = $props();
+
+	// Computed classes
+	let dividerClasses = $derived(`divider ${className}`.trim());
+
+	// Computed styles
+	let dividerStyles = $derived(
+		`height: ${height}; width: ${width}; background: ${background}; ${
+			rotate ? 'transform: rotate(180deg);' : ''
+		}`
+	);
+</script>
+
+<div class={dividerClasses} style={dividerStyles} data-testid="divider" {...restProps}></div>
+
+<style>
+	.divider {
+		align-self: stretch;
+	}
+</style>

package/dist/ui/components/divider/Divider.svelte.d.ts

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

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

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

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

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

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

@@ -0,0 +1,23 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export interface DividerProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Height of the divider
+     */
+    height?: string;
+    /**
+     * Width of the divider
+     */
+    width?: string;
+    /**
+     * Background color of the divider
+     */
+    background?: string;
+    /**
+     * Orientation of the divider - when true, rotates the divider 90 degrees
+     */
+    rotate?: boolean;
+    /**
+     * Additional CSS classes to apply
+     */
+    class?: string;
+}

package/dist/ui/components/divider/types.js

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

package/dist/ui/components/iframe/Iframe.stories.svelte

@@ -0,0 +1,122 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+	import Iframe from './Iframe.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Ui/Iframe',
+		component: Iframe,
+		tags: ['autodocs'],
+		argTypes: {
+			url: {
+				control: 'text',
+				description: 'The URL to load in the iframe'
+			},
+			title: {
+				control: 'text',
+				description: 'Accessible title for the iframe content'
+			},
+			width: {
+				control: 'text',
+				description: 'Width of the iframe'
+			},
+			height: {
+				control: 'text',
+				description: 'Height of the iframe'
+			},
+			useProxy: {
+				control: 'boolean',
+				description: 'Whether to use the Finsweet reverse proxy for CORS'
+			},
+			class: {
+				control: 'text',
+				description: 'Custom CSS class name'
+			},
+			id: {
+				control: 'text',
+				description: 'HTML id attribute'
+			},
+			onLoadSuccess: {
+				action: 'loadSuccess',
+				description: 'Called when iframe loads successfully'
+			},
+			onLoadError: {
+				action: 'loadError',
+				description: 'Called when iframe fails to load'
+			}
+		}
+	});
+</script>
+
+<Story
+	name="Default"
+	args={{
+		url: 'https://example.com',
+		title: 'Example Website',
+		width: '100%',
+		height: '400px'
+	}}
+/>
+
+<Story
+	name="With Proxy"
+	args={{
+		url: 'https://httpbin.org/html',
+		title: 'HTTPBin HTML Page',
+		width: '100%',
+		height: '400px',
+		useProxy: true
+	}}
+/>
+
+<Story
+	name="Without Proxy"
+	args={{
+		url: 'https://example.com',
+		title: 'Direct URL Load',
+		width: '100%',
+		height: '400px',
+		useProxy: false
+	}}
+/>
+
+<Story
+	name="Custom Dimensions"
+	args={{
+		url: 'https://httpbin.org/html',
+		title: 'Custom Size Iframe',
+		width: '800px',
+		height: '600px'
+	}}
+/>
+
+<Story
+	name="Small Iframe"
+	args={{
+		url: 'https://httpbin.org/html',
+		title: 'Small Iframe',
+		width: '400px',
+		height: '300px'
+	}}
+/>
+
+<Story
+	name="With Custom Class"
+	args={{
+		url: 'https://httpbin.org/html',
+		title: 'Styled Iframe',
+		width: '100%',
+		height: '400px',
+		class: 'custom-styled-iframe'
+	}}
+/>
+
+<Story
+	name="Responsive Iframe"
+	args={{
+		url: 'https://httpbin.org/html',
+		title: 'Responsive Iframe',
+		width: '100%',
+		height: '50vh'
+	}}
+/>

package/dist/ui/components/{ToggleItem.svelte.d.ts → iframe/Iframe.stories.svelte.d.ts}

@@ -1,23 +1,22 @@
-export default ToggleItem;
-type ToggleItem = SvelteComponent<{
-    title?: string | undefined;
-    isActive?: boolean | undefined;
+export default Iframe;
+type Iframe = SvelteComponent<{
+    [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
     $$bindings?: string | undefined;
 };
-declare const ToggleItem: $$__sveltets_2_IsomorphicComponent<{
-    title?: string | undefined;
-    isActive?: boolean | undefined;
+declare const Iframe: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
+import Iframe from './Iframe.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: Props & {
+    (internal: unknown, props: {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {

package/dist/ui/components/iframe/Iframe.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import { FINSWEET_REVERSE_PROXY_URL } from '../../../utils';
+
+	import type { IframeProps } from './types.js';
+
+	type Props = IframeProps;
+
+	let {
+		url,
+		title,
+		width = '100%',
+		height = '100%',
+		useProxy = true,
+		onLoadSuccess = () => {},
+		onLoadError = () => {},
+		class: className = '',
+		id,
+		...restProps
+	}: Props = $props();
+
+	// Component state
+	let iframeElement: HTMLIFrameElement | undefined = $state();
+
+	// Derived computed src URL
+	let src = $derived(useProxy ? `${FINSWEET_REVERSE_PROXY_URL}${url}` : url);
+
+	// CSS classes
+	let iframeClasses = $derived(`iframe ${className}`.trim());
+
+	/**
+	 * Handle the iframe load event
+	 */
+	function handleLoad(): void {
+		if (!iframeElement?.contentDocument) {
+			onLoadError();
+			return;
+		}
+
+		const { contentDocument } = iframeElement;
+		const iframeTitle = contentDocument.title;
+		const { body } = contentDocument;
+
+		// Check for various error conditions
+		const hasNoContent = body.childNodes.length === 0;
+		const has404InTitle = iframeTitle.includes('404');
+		const has404InBody = body.outerHTML.includes('<span>404</span>');
+
+		if (hasNoContent || has404InTitle || has404InBody) {
+			onLoadError();
+			return;
+		}
+
+		onLoadSuccess();
+	}
+</script>
+
+<iframe
+	bind:this={iframeElement}
+	{id}
+	{title}
+	{src}
+	{width}
+	{height}
+	class={iframeClasses}
+	onload={handleLoad}
+	{...restProps}
+></iframe>
+
+<style>
+	.iframe {
+		border: none;
+		border-radius: var(--border-radius-md, 4px);
+		background: var(--text2);
+	}
+</style>

package/dist/ui/components/iframe/Iframe.svelte.d.ts

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

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

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

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

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

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

@@ -0,0 +1,38 @@
+import type { HTMLIframeAttributes } from 'svelte/elements';
+export interface IframeProps extends Omit<HTMLIframeAttributes, 'src' | 'title' | 'onload'> {
+    /**
+     * The URL to load in the iframe
+     */
+    url: string;
+    /**
+     * Accessible title for the iframe content
+     */
+    title: string;
+    /**
+     * Width of the iframe
+     * @default '100%'
+     */
+    width?: string;
+    /**
+     * Height of the iframe
+     * @default '100%'
+     */
+    height?: string;
+    /**
+     * Whether to use the Finsweet reverse proxy for CORS
+     * @default true
+     */
+    useProxy?: boolean;
+    /**
+     * Event handler called when iframe loads successfully
+     */
+    onLoadSuccess?: () => void;
+    /**
+     * Event handler called when iframe fails to load
+     */
+    onLoadError?: () => void;
+    /**
+     * Custom CSS class name
+     */
+    class?: string;
+}

package/dist/ui/components/iframe/types.js

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

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

@@ -1,46 +1,19 @@
-/**
- * All Re-usable Components
- */
-import BreakpointItem from './breakpoints/BreakpointItem.svelte';
-import ButtonGroup from './ButtonGroup.svelte';
-import Checkbox from './Checkbox.svelte';
-import { Clickable } from './clickable';
-import Copy from './Copy.svelte';
-import CustomModal from './CustomModal.svelte';
-import DisableInEditMode from './DisableInEditMode.svelte';
-import Divider from './Divider.svelte';
-import Header from './Header.svelte';
-import Iframe from './Iframe.svelte';
-import ImageUpload from './ImageUpload.svelte';
-import InjectComponent from './InjectComponent.svelte';
-import { Input } from './input';
-import { Layout } from './layout';
-import Loader from './Loader.svelte';
-import LoadingScreen from './LoadingScreen.svelte';
-import Modal from './Modal.svelte';
-import Navbar from './Navbar.svelte';
-import NoSettingsNeeded from './NoSettingsNeeded.svelte';
-import Notification from './Notification.svelte';
-import PreviewBar from './PreviewBar.svelte';
-import ScrollableContent from './ScrollableContent.svelte';
-import Section from './Section.svelte';
-import SelectBodyOrDivBlock from './SelectBodyOrDivBlock.svelte';
-import Spacer from './Spacer.svelte';
-import SpinnerPlusMinus from './SpinnerPlusMinus.svelte';
-import SpinnerUpDown from './SpinnerUpDown.svelte';
-import Switch from './switch/Switch.svelte';
-import Tabs from './Tabs.svelte';
-import { Text } from './text';
-import ToggleItem from './ToggleItem.svelte';
-import ToggleList from './ToggleList.svelte';
-import { Tooltip } from './tooltip';
-export { BreakpointItem, ButtonGroup, Checkbox, Clickable, Copy, CustomModal, DisableInEditMode, Notification, Divider, Header, Iframe, ImageUpload, InjectComponent, Layout, Loader, LoadingScreen, Modal, Navbar, NoSettingsNeeded, PreviewBar, ScrollableContent, Section, SelectBodyOrDivBlock, Spacer, SpinnerPlusMinus, SpinnerUpDown, Switch, Tabs, Text, ToggleItem, ToggleList, Tooltip, Input };
 export * from './breakpoints';
-export * from './clickable';
+export * from './button';
+export * from './button-group';
+export * from './checkbox';
+export * from './controlled-buttons';
+export * from './divider';
+export * from './iframe';
 export * from './input';
 export * from './layout';
+export * from './modal';
+export * from './notification';
+export * from './section';
 export * from './select';
+export * from './shared';
 export * from './switch';
 export * from './text';
 export * from './tooltip';
-export * from './buttons';
+export { default as Loader } from './Loader.svelte';
+export { default as LoadingScreen } from './LoadingScreen.svelte';

package/dist/ui/components/index.js

@@ -1,46 +1,19 @@
-/**
- * All Re-usable Components
- */
-import BreakpointItem from './breakpoints/BreakpointItem.svelte';
-import ButtonGroup from './ButtonGroup.svelte';
-import Checkbox from './Checkbox.svelte';
-import { Clickable } from './clickable';
-import Copy from './Copy.svelte';
-import CustomModal from './CustomModal.svelte';
-import DisableInEditMode from './DisableInEditMode.svelte';
-import Divider from './Divider.svelte';
-import Header from './Header.svelte';
-import Iframe from './Iframe.svelte';
-import ImageUpload from './ImageUpload.svelte';
-import InjectComponent from './InjectComponent.svelte';
-import { Input } from './input';
-import { Layout } from './layout';
-import Loader from './Loader.svelte';
-import LoadingScreen from './LoadingScreen.svelte';
-import Modal from './Modal.svelte';
-import Navbar from './Navbar.svelte';
-import NoSettingsNeeded from './NoSettingsNeeded.svelte';
-import Notification from './Notification.svelte';
-import PreviewBar from './PreviewBar.svelte';
-import ScrollableContent from './ScrollableContent.svelte';
-import Section from './Section.svelte';
-import SelectBodyOrDivBlock from './SelectBodyOrDivBlock.svelte';
-import Spacer from './Spacer.svelte';
-import SpinnerPlusMinus from './SpinnerPlusMinus.svelte';
-import SpinnerUpDown from './SpinnerUpDown.svelte';
-import Switch from './switch/Switch.svelte';
-import Tabs from './Tabs.svelte';
-import { Text } from './text';
-import ToggleItem from './ToggleItem.svelte';
-import ToggleList from './ToggleList.svelte';
-import { Tooltip } from './tooltip';
-export { BreakpointItem, ButtonGroup, Checkbox, Clickable, Copy, CustomModal, DisableInEditMode, Notification, Divider, Header, Iframe, ImageUpload, InjectComponent, Layout, Loader, LoadingScreen, Modal, Navbar, NoSettingsNeeded, PreviewBar, ScrollableContent, Section, SelectBodyOrDivBlock, Spacer, SpinnerPlusMinus, SpinnerUpDown, Switch, Tabs, Text, ToggleItem, ToggleList, Tooltip, Input };
 export * from './breakpoints';
-export * from './clickable';
+export * from './button';
+export * from './button-group';
+export * from './checkbox';
+export * from './controlled-buttons';
+export * from './divider';
+export * from './iframe';
 export * from './input';
 export * from './layout';
+export * from './modal';
+export * from './notification';
+export * from './section';
 export * from './select';
+export * from './shared';
 export * from './switch';
 export * from './text';
 export * from './tooltip';
-export * from './buttons';
+export { default as Loader } from './Loader.svelte';
+export { default as LoadingScreen } from './LoadingScreen.svelte';