@finsweet/webflow-apps-utils 1.0.1 → 1.0.3

package/dist/ui/components/layout/Layout.svelte

@@ -2,7 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 
-	import { globalStore } from '../../../stores';
+	import { useAppContext } from '../../../providers';
 	import {
 		CheckCircleOutlinedIcon,
 		WarningCircleIcon,
@@ -198,7 +198,7 @@
 
 	<!-- Sidebar -->
 	{#if showSidebar}
-		<div class="sidebar" data-area="sidebar" data-simplebar="">
+		<div class="sidebar" data-area="sidebar">
 			{#if sidebar}
 				{@render sidebar()}
 			{:else}
@@ -217,9 +217,7 @@
 	<div class="main-content" data-area="main">
 		{#if main}
 			<div class="main-content-container">
-				{#if $globalStore.editMode || $globalStore.repairMode}
-					<EditModeMessage />
-				{/if}
+				<EditModeMessage />
 				{@render main()}
 			</div>
 		{:else}

package/dist/ui/components/layout/common/EditModeMessage.svelte

@@ -1,24 +1,36 @@
 <script lang="ts">
-	import { globalStore } from '../../../../stores';
+	import { useAppContext } from '../../../../providers';
 	import { Pencil, WarningTriangleOutlineIcon } from '../../../icons';
 	import { BRAND } from '../../../../utils';
 
-	import Notification from '../../Notification.svelte';
+	import { Notification } from '../../notification';
 
-	const isEditMode = $derived($globalStore.editMode);
-	const isRepairMode = $derived($globalStore.repairMode);
-	const title = $derived($globalStore.title);
+	const appContext = useAppContext();
+	let appData = $state(appContext.get());
+
+	// Subscribe to context changes
+	appContext.subscribe((data) => {
+		appData = data;
+	});
+
+	const isEditMode = $derived(appData?.editMode);
+	const isRepairMode = $derived(appData?.repairMode);
+	const title = $derived(appData?.title);
+
+	$effect(() => {
+		console.log('appData', { appData, editMode: appData?.editMode });
+	});
 </script>
 
 {#if isEditMode && !isRepairMode}
 	<div class="edit-mode">
 		<Notification
-			type="warning"
+			variant="warning"
 			title="You are in edit mode for {title} {BRAND.COMPONENT}."
 			message={`Make your edits and click on the "Update ${title}" button. You can review and confirm all changes before we proceed with the updates.`}
-			richtextMessage
-			defaultIcon={Pencil}
-			closeIcon={false}
+			richTextMessage={true}
+			icon={Pencil}
+			showCloseButton={false}
 		/>
 	</div>
 {/if}
@@ -26,11 +38,11 @@
 {#if isRepairMode}
 	<div class="edit-mode">
 		<Notification
-			type="warning"
+			variant="warning"
 			title="Component instance not found"
 			message="We have detected {BRAND.COMPONENT} as valid, but we couldn't find the associated configurations. This may be a {BRAND.COMPONENT} from another project. Click the 'Repair' button to fix it."
-			defaultIcon={WarningTriangleOutlineIcon}
-			closeIcon={false}
+			icon={WarningTriangleOutlineIcon}
+			showCloseButton={false}
 		/>
 	</div>
 {/if}

package/dist/ui/components/layout/{ExampleLayout.svelte → examples/ExampleLayout.svelte}

@@ -1,16 +1,16 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 
-	import { globalStore } from '../../../stores';
+	import { useAppContext } from '../../../../providers';
 
-	import { CheckCircleIcon, CodeIcon, InfoIcon, SettingsIcon } from '../../icons';
-	import { Button } from '../button';
-	import { Clickable } from '../clickable';
-	import { Input } from '../input';
-	import { Switch } from '../switch';
-	import Text from '../text/Text.svelte';
-	import Layout from './Layout.svelte';
-	import type { LayoutNotification, LayoutTab } from './types';
+	import { CheckCircleIcon, CodeIcon, InfoIcon, SettingsIcon } from '../../../icons';
+	import { Button } from '../../button';
+	import { Input } from '../../input';
+	import { Section } from '../../section';
+	import { Switch } from '../../switch';
+	import Text from '../../text/Text.svelte';
+	import Layout from '../Layout.svelte';
+	import type { LayoutNotification, LayoutTab } from '../types';
 
 	// Internal state for configuration
 	let activeTab = $state('settings');
@@ -25,6 +25,16 @@
 	let notificationSuccess = $state(true);
 	let inputValue = $state('');
 
+	// Get app context and keep editMode in sync
+	const appContext = useAppContext();
+
+	// Subscribe to context changes to keep local editMode in sync
+	appContext.subscribe((data) => {
+		if (data?.editMode !== undefined && data.editMode !== editMode) {
+			editMode = data.editMode;
+		}
+	});
+
 	// Dummy data for 2 tabs: settings and code
 	const dummyTabs: LayoutTab[] = [
 		{ path: 'settings', name: 'Settings', icon: SettingsIcon, isActive: false },
@@ -79,17 +89,19 @@
 	}
 
 	onMount(() => {
-		globalStore.set({
+		appContext.set({
 			editMode: true,
-			componentKey: 'dummy-layout',
 			repairMode: false,
-			formKey: 'dummy-layout',
-			formUpdateKey: 'dummy-layout-update',
 			title: 'Example',
-			state: {
-				random: Math.random()
+			configurator: {
+				configurator: null,
+				configuratorCache: null,
+				hasChanged: false,
+				watchOptions: { watchAll: true, debounceMs: 50 }
 			}
 		});
+		// Initialize local editMode state
+		editMode = true;
 	});
 </script>
 
@@ -181,9 +193,9 @@
 								bind:checked={editMode}
 								id="edit-mode"
 								class="checkbox-input"
-								oninput={() => {
-									editMode = !editMode;
-									globalStore.set({ ...$globalStore, editMode });
+								onchange={() => {
+									const current = appContext.get();
+									appContext.set({ ...current, editMode });
 								}}
 							/>
 							<label for="edit-mode" class="checkbox-label">Edit Mode</label>
@@ -306,12 +318,12 @@
 							width="130px"
 						/>
 					</div>
-					<Clickable disabled>
+					<Section clickable disabled>
 						<Text fontSize="md" fontWeight="normal">Clickable disabled</Text>
-					</Clickable>
-					<Clickable>
+					</Section>
+					<Section clickable>
 						<Text fontSize="md" fontWeight="normal">Clickable enabled</Text>
-					</Clickable>
+					</Section>
 				{:else if activeTab === 'code'}
 					<Text fontSize="xl" fontWeight="normal">Code Editor Tab content</Text>
 				{/if}

package/dist/ui/components/layout/examples/Wrapper.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { GlobalProvider } from '../../../../providers';
+
+	import ExampleLayout from './ExampleLayout.svelte';
+</script>
+
+<GlobalProvider>
+	<ExampleLayout />
+</GlobalProvider>

package/dist/ui/components/{NoSettingsNeeded.svelte.d.ts → layout/examples/Wrapper.svelte.d.ts}

@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const NoSettingsNeeded: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const Wrapper: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-type NoSettingsNeeded = InstanceType<typeof NoSettingsNeeded>;
-export default NoSettingsNeeded;
+type Wrapper = InstanceType<typeof Wrapper>;
+export default Wrapper;

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

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

package/dist/ui/components/layout/examples/index.js

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

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

@@ -1,3 +1,4 @@
 export { default as Layout } from './Layout.svelte';
-export { default as DummyLayoutWrapper } from './ExampleLayout.svelte';
+export * from './examples';
+export * from './common';
 export type { LayoutProps, LayoutTab, LayoutFooter } from './types';

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

@@ -1,2 +1,3 @@
 export { default as Layout } from './Layout.svelte';
-export { default as DummyLayoutWrapper } from './ExampleLayout.svelte';
+export * from './examples';
+export * from './common';

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;
+}