@finsweet/webflow-apps-utils 1.0.2 → 1.0.4

package/dist/ui/components/modal/Example.svelte

@@ -0,0 +1,320 @@
+<script lang="ts">
+	import { InfoIcon, SaveIcon, WarningTriangleIcon } from '../../icons';
+	import { Button } from '../button';
+	import Modal from './Modal.svelte';
+
+	// Modal states
+	let basicModalOpen = $state(false);
+	let loadingModalOpen = $state(false);
+	let noHeaderModalOpen = $state(false);
+	let preventCloseModalOpen = $state(false);
+	let customStyledModalOpen = $state(false);
+	let longContentModalOpen = $state(false);
+	let customFooterModalOpen = $state(false);
+
+	// Loading simulation
+	let isLoading = $state(false);
+
+	// Handle loading modal
+	async function handleShowLoading() {
+		loadingModalOpen = true;
+		isLoading = true;
+
+		// Simulate async operation
+		setTimeout(() => {
+			isLoading = false;
+		}, 3000);
+	}
+
+	// Handle prevent close modal
+	function handleForceClose() {
+		preventCloseModalOpen = false;
+	}
+</script>
+
+<div class="modal-examples">
+	<h2>Modal Component Examples</h2>
+	<p>Interactive examples demonstrating different modal configurations and behaviors.</p>
+
+	<div class="example-section">
+		<h3>Basic Examples</h3>
+		<div class="button-grid">
+			<Button variant="primary" onclick={() => (basicModalOpen = true)}>Basic Modal</Button>
+			<Button variant="primary" onclick={handleShowLoading}>Loading Modal</Button>
+			<Button variant="primary" onclick={() => (noHeaderModalOpen = true)}
+				>No Header/Footer Modal</Button
+			>
+			<Button variant="primary" onclick={() => (preventCloseModalOpen = true)}>
+				Prevent Close Modal
+			</Button>
+			<Button variant="primary" onclick={() => (customStyledModalOpen = true)}>
+				Custom Styled Modal
+			</Button>
+			<Button variant="primary" onclick={() => (longContentModalOpen = true)}>
+				Long Content Modal
+			</Button>
+			<Button variant="primary" onclick={() => (customFooterModalOpen = true)}>
+				Custom Footer Modal
+			</Button>
+		</div>
+	</div>
+
+	<!-- Basic Modal -->
+	<Modal
+		open={basicModalOpen}
+		width="400px"
+		height="300px"
+		padding="8px 12px"
+		title="Basic Modal"
+		actionText="Confirm"
+		cancelText="Cancel"
+		onOpenChange={(open) => (basicModalOpen = open)}
+		onAction={() => {
+			console.log('Action clicked');
+			basicModalOpen = false;
+		}}
+		onCancel={() => {
+			console.log('Cancel clicked');
+			basicModalOpen = false;
+		}}
+	>
+		<div>
+			<p>
+				This is a basic modal with default header and footer. The header shows the title and close
+				button, while the footer shows action and cancel buttons.
+			</p>
+			<p>The footer is properly positioned at the bottom using flexbox layout.</p>
+			<p>Even with multiple paragraphs of content, the footer stays at the bottom of the modal.</p>
+			<p>This ensures a consistent and predictable layout regardless of content length.</p>
+		</div>
+	</Modal>
+
+	<!-- Loading Modal -->
+	<Modal
+		open={loadingModalOpen}
+		width="400px"
+		height="300px"
+		headerPadding="12px 16px"
+		contentPadding="16px"
+		loading={isLoading}
+		loadingMessage="Processing your request..."
+		onOpenChange={(open) => (loadingModalOpen = open)}
+	>
+		{#snippet header()}
+			<div style="display: flex; align-items: center; gap: 8px;">
+				<SaveIcon />
+				<h3>Processing</h3>
+			</div>
+		{/snippet}
+
+		<p>
+			This modal demonstrates the loading state. The loading overlay will disappear after 3 seconds.
+		</p>
+	</Modal>
+
+	<!-- No Header Modal -->
+	<Modal
+		open={noHeaderModalOpen}
+		width="400px"
+		height="300px"
+		contentPadding="32px"
+		showHeader={false}
+		showFooter={false}
+		onOpenChange={(open) => (noHeaderModalOpen = open)}
+	>
+		<div style="text-align: center;">
+			<div style="margin-bottom: 12px; display: flex; justify-content: center;">
+				<InfoIcon />
+			</div>
+			<h3 style="margin-bottom: 8px;">Welcome!</h3>
+			<p>This modal has no header or footer. Close it by clicking outside or pressing Escape.</p>
+		</div>
+	</Modal>
+
+	<!-- Prevent Close Modal -->
+	<Modal
+		open={preventCloseModalOpen}
+		width="400px"
+		height="300px"
+		headerPadding="12px"
+		contentPadding="12px"
+		footerPadding="12px"
+		closeOnOverlayClick={false}
+		closeOnEscape={false}
+		showCloseButton={false}
+		title="⚠️ Important Notice"
+		actionText="I Understand"
+		cancelText="Dismiss"
+		onOpenChange={(open) => (preventCloseModalOpen = open)}
+		onAction={handleForceClose}
+		onCancel={() => (preventCloseModalOpen = false)}
+	>
+		{#snippet header()}
+			<div style="display: flex; align-items: center; gap: 8px;">
+				<WarningTriangleIcon />
+				<h3>⚠️ Important Notice</h3>
+			</div>
+		{/snippet}
+
+		<p>
+			This modal cannot be closed by clicking outside or pressing Escape. You must use the footer
+			buttons below to close it.
+		</p>
+	</Modal>
+
+	<!-- Custom Styled Modal -->
+	<Modal
+		open={customStyledModalOpen}
+		width="400px"
+		height="300px"
+		headerPadding="24px"
+		contentPadding="24px"
+		overlayColor="rgba(255, 0, 100, 0.3)"
+		style="border: 3px solid #ff6b6b; box-shadow: 0 0 30px rgba(255, 107, 107, 0.5);"
+		onOpenChange={(open) => (customStyledModalOpen = open)}
+	>
+		{#snippet header()}
+			<h3 style="color: #ff6b6b;">🎨 Custom Styled Modal</h3>
+		{/snippet}
+
+		<div>
+			<p>This modal demonstrates custom styling with:</p>
+			<ul style="margin: 16px 0; padding-left: 20px;">
+				<li>Individual section padding</li>
+				<li>Pink overlay background</li>
+				<li>Custom border and shadow</li>
+				<li>Colorful header text</li>
+			</ul>
+		</div>
+	</Modal>
+
+	<!-- Long Content Modal -->
+	<Modal
+		open={longContentModalOpen}
+		width="400px"
+		height="300px"
+		title="Layout Demo"
+		actionText="Confirm"
+		cancelText="Cancel"
+		onOpenChange={(open) => (longContentModalOpen = open)}
+		onAction={() => (longContentModalOpen = false)}
+		onCancel={() => (longContentModalOpen = false)}
+	>
+		<div>
+			<h4>Flexbox Layout Demonstration</h4>
+			<p>This modal demonstrates how the flexbox layout keeps the footer at the bottom.</p>
+			<p>
+				Even when the content is long and exceeds the modal height, the footer remains positioned
+				correctly at the bottom.
+			</p>
+			<p>The content area becomes scrollable while the header and footer stay in place.</p>
+			<p>This provides a consistent user experience regardless of content length.</p>
+			<p>Here's some additional content to show the scrolling behavior:</p>
+			<ul>
+				<li>Item 1: Flexbox provides excellent layout control</li>
+				<li>Item 2: The footer stays anchored at the bottom</li>
+				<li>Item 3: Content area scrolls independently</li>
+				<li>Item 4: Header remains fixed at the top</li>
+				<li>Item 5: This creates a professional modal layout</li>
+			</ul>
+			<p>You can scroll through this content while the footer remains visible and accessible.</p>
+			<p>This is especially important for forms or detailed content that needs action buttons.</p>
+		</div>
+	</Modal>
+
+	<!-- Custom Footer Modal -->
+	<Modal
+		open={customFooterModalOpen}
+		width="400px"
+		height="300px"
+		title="Custom Footer Example"
+		actionText="Save Changes"
+		cancelText="Cancel"
+		onOpenChange={(open) => (customFooterModalOpen = open)}
+		onAction={() => {
+			console.log('Save action triggered');
+			customFooterModalOpen = false;
+		}}
+		onCancel={() => {
+			console.log('Cancel action triggered');
+			customFooterModalOpen = false;
+		}}
+	>
+		<div>
+			<p>This modal demonstrates custom footer styling while maintaining proper functionality.</p>
+			<p>
+				Both the "Save Changes" and "Cancel" buttons will close the modal and trigger their
+				respective callbacks.
+			</p>
+		</div>
+
+		{#snippet footer()}
+			<div style="display: flex; justify-content: space-between; width: 100%;">
+				<div style="display: flex; gap: 8px; width: 100%; justify-content: space-between;">
+					<Button
+						variant="secondary"
+						onclick={() => {
+							console.log('Custom cancel clicked');
+							customFooterModalOpen = false;
+						}}
+					>
+						✕ Cancel
+					</Button>
+					<Button
+						variant="primary"
+						onclick={() => {
+							console.log('Custom save clicked');
+							customFooterModalOpen = false;
+						}}
+					>
+						✓ Save & Close
+					</Button>
+				</div>
+			</div>
+		{/snippet}
+	</Modal>
+</div>
+
+<style>
+	.modal-examples {
+		padding: 24px;
+		width: 800px;
+		height: 600px;
+		margin: 0 auto;
+		position: relative;
+		overflow: hidden;
+	}
+
+	.modal-examples :global(.modal-overlay) {
+		height: 100%;
+		width: 100%;
+	}
+
+	.example-section {
+		margin-bottom: 32px;
+	}
+
+	.example-section h3 {
+		margin-bottom: 16px;
+		color: var(--text1, #ffffff);
+		font-size: 18px;
+		font-weight: 600;
+	}
+
+	.button-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+		gap: 12px;
+		margin-bottom: 16px;
+	}
+
+	h2 {
+		color: var(--text1, #ffffff);
+		margin-bottom: 8px;
+	}
+
+	p {
+		color: var(--text2, rgba(255, 255, 255, 0.8));
+		margin-bottom: 24px;
+	}
+</style>

package/dist/ui/components/modal/Example.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Example: import("svelte").Component<Record<string, never>, {}, "">;
+type Example = ReturnType<typeof Example>;
+export default Example;

package/dist/ui/components/modal/Modal.stories.svelte

@@ -0,0 +1,18 @@
+<!-- eslint-disable svelte/no-useless-children-snippet -->
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+	import Example from './Example.svelte';
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'UI/Modal',
+		component: Example,
+		tags: ['autodocs']
+	});
+</script>
+
+<!-- Interactive Examples -->
+<Story name="Examples">
+	<Example />
+</Story>

package/dist/ui/components/modal/Modal.stories.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Modal;
+type Modal = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Modal: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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;
+}