@finsweet/webflow-apps-utils 1.0.1

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

@@ -0,0 +1,538 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	import { globalStore } from '../../../stores';
+
+	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';
+
+	// Internal state for configuration
+	let activeTab = $state('settings');
+	let showSidebar = $state(true);
+	let showTabs = $state(true);
+	let showPreviewBar = $state(true);
+	let showFooter = $state(true);
+	let editMode = $state(false);
+	let sidebarWidth = $state('239px');
+	let footerSize = $state<'normal' | 'large'>('normal');
+	let showNotifications = $state(false);
+	let notificationSuccess = $state(true);
+	let inputValue = $state('');
+
+	// Dummy data for 2 tabs: settings and code
+	const dummyTabs: LayoutTab[] = [
+		{ path: 'settings', name: 'Settings', icon: SettingsIcon, isActive: false },
+		{ path: 'code', name: 'Code', icon: CodeIcon, isActive: false }
+	];
+
+	// Dummy footer buttons
+	const dummyFooterButtons = [
+		{
+			id: 'save' as const,
+			text: 'Save Changes',
+			variant: 'secondary' as const,
+			icon: CheckCircleIcon,
+			onClick: () => console.log('Save clicked')
+		},
+		{
+			id: 'main' as const,
+			text: 'Apply Settings',
+			variant: 'primary' as const,
+			onClick: () => console.log('Apply clicked')
+		}
+	];
+
+	// Create tabs with active state
+	let tabs = $derived(
+		dummyTabs.map((tab) => ({
+			...tab,
+			isActive: tab.path === activeTab
+		}))
+	);
+
+	// Create notifications
+	let notifications = $derived<LayoutNotification[]>(
+		showNotifications
+			? [
+					{
+						path: activeTab,
+						success: notificationSuccess,
+						message: notificationSuccess
+							? 'Configuration saved successfully'
+							: 'Error in configuration',
+						showNotification: true
+					}
+				]
+			: []
+	);
+
+	// Tab switching function
+	function switchTab(tabPath: string) {
+		activeTab = tabPath;
+		console.log('Switched to tab:', tabPath);
+	}
+
+	onMount(() => {
+		globalStore.set({
+			editMode: true,
+			componentKey: 'dummy-layout',
+			repairMode: false,
+			formKey: 'dummy-layout',
+			formUpdateKey: 'dummy-layout-update',
+			title: 'Example',
+			state: {
+				random: Math.random()
+			}
+		});
+	});
+</script>
+
+<div class="example-container">
+	<!-- Configuration Panel -->
+	<div class="configurator-panel">
+		<div class="config-panel">
+			<div class="config-header">
+				<Text fontSize="xs" fontWeight="bold" fontColor="var(--text1)">Config</Text>
+			</div>
+
+			<div class="config-content">
+				<!-- Controls Section -->
+				<div class="config-section">
+					<!-- Active Tab Selector -->
+					<div class="control-group">
+						<label for="active-tab" class="control-label">Active Tab</label>
+						<select id="active-tab" bind:value={activeTab} class="select-input">
+							<option value="settings">Settings</option>
+							<option value="code">Code</option>
+						</select>
+					</div>
+
+					<!-- Sidebar Width -->
+					<div class="control-group">
+						<label for="sidebar-width" class="control-label">Sidebar Width</label>
+						<select id="sidebar-width" bind:value={sidebarWidth} class="select-input">
+							<option value="239px">239px</option>
+							<option value="270px">270px</option>
+						</select>
+					</div>
+
+					<!-- Footer Size -->
+					<div class="control-group">
+						<label for="footer-size" class="control-label">Footer Size</label>
+						<select id="footer-size" bind:value={footerSize} class="select-input">
+							<option value="normal">Normal</option>
+							<option value="large">Large</option>
+						</select>
+					</div>
+				</div>
+
+				<!-- Toggle Controls Section -->
+				<div class="config-section">
+					<div class="toggles-list">
+						<div class="toggle-control">
+							<input
+								type="checkbox"
+								bind:checked={showSidebar}
+								id="show-sidebar"
+								class="checkbox-input"
+							/>
+							<label for="show-sidebar" class="checkbox-label">Sidebar</label>
+						</div>
+
+						<div class="toggle-control">
+							<input
+								type="checkbox"
+								bind:checked={showTabs}
+								id="show-tabs"
+								class="checkbox-input"
+							/>
+							<label for="show-tabs" class="checkbox-label">Tabs</label>
+						</div>
+
+						<div class="toggle-control">
+							<input
+								type="checkbox"
+								bind:checked={showPreviewBar}
+								id="show-preview"
+								class="checkbox-input"
+							/>
+							<label for="show-preview" class="checkbox-label">Preview</label>
+						</div>
+
+						<div class="toggle-control">
+							<input
+								type="checkbox"
+								bind:checked={showFooter}
+								id="show-footer"
+								class="checkbox-input"
+							/>
+							<label for="show-footer" class="checkbox-label">Footer</label>
+						</div>
+
+						<div class="toggle-control">
+							<input
+								type="checkbox"
+								bind:checked={editMode}
+								id="edit-mode"
+								class="checkbox-input"
+								oninput={() => {
+									editMode = !editMode;
+									globalStore.set({ ...$globalStore, editMode });
+								}}
+							/>
+							<label for="edit-mode" class="checkbox-label">Edit Mode</label>
+						</div>
+
+						<div class="toggle-control">
+							<input
+								type="checkbox"
+								bind:checked={showNotifications}
+								id="show-notifications"
+								class="checkbox-input"
+							/>
+							<label for="show-notifications" class="checkbox-label">Notify</label>
+						</div>
+
+						{#if showNotifications}
+							<div class="toggle-control">
+								<input
+									type="checkbox"
+									bind:checked={notificationSuccess}
+									id="notification-success"
+									class="checkbox-input"
+								/>
+								<label for="notification-success" class="checkbox-label">Success</label>
+							</div>
+						{/if}
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<!-- Layout Preview, 800px x 600px in dimension -->
+	<div class="layout-preview">
+		<Layout
+			{activeTab}
+			{tabs}
+			{switchTab}
+			footer={{ buttons: dummyFooterButtons }}
+			formKey="dummy-layout"
+			{editMode}
+			{showFooter}
+			{showSidebar}
+			{showTabs}
+			{showPreviewBar}
+			{sidebarWidth}
+			{footerSize}
+			{notifications}
+			containerMode={true}
+		>
+			{#snippet sidebar()}
+				{#if activeTab === 'settings'}
+					<Text fontSize="md" fontWeight="normal">App Settings sidebar content</Text>
+				{:else if activeTab === 'code'}
+					<Text fontSize="md" fontWeight="normal">Code Editor sidebar content</Text>
+				{/if}
+			{/snippet}
+
+			{#snippet main()}
+				{#if activeTab === 'settings'}
+					<Text fontSize="xl" fontWeight="normal">Application Settings Tab content</Text>
+
+					<div style="display: flex; flex-direction: column; align-items: center; gap: 8px">
+						<Switch />
+						<Text
+							fontSize="md"
+							fontWeight="normal"
+							icon={InfoIcon}
+							tooltip={{
+								tooltipIcon: InfoIcon,
+								message: 'This is a tooltip'
+							}}>I am a Text with a tooltip</Text
+						>
+						<Button variant="primary">Primary</Button>
+						<Button variant="secondary">Secondary</Button>
+						<Button variant="danger">Danger</Button>
+						<Button variant="cms">CMS</Button>
+						<Button variant="primary" icon={InfoIcon} text="Button with icon" />
+						<Input
+							pill="blue"
+							value={inputValue}
+							oninput={(value) => {
+								inputValue = value;
+							}}
+							placeholder="Type here..."
+							width="130px"
+						/>
+						<!-- Examples with tooltip alerts -->
+						<Input
+							value="Error input"
+							invalid={true}
+							alert={{
+								type: 'error',
+								message: 'This field contains an error'
+							}}
+							width="130px"
+						/>
+						<Input
+							value="Success input"
+							alert={{
+								type: 'success',
+								message: 'Input is valid!'
+							}}
+							width="130px"
+						/>
+						<Input
+							value="Warning input"
+							alert={{
+								type: 'warning',
+								message: 'Please review this input'
+							}}
+							width="130px"
+						/>
+						<Input
+							placeholder="Info tooltip"
+							alert={{
+								type: 'info',
+								message: 'Additional information about this field'
+							}}
+							width="130px"
+						/>
+					</div>
+					<Clickable disabled>
+						<Text fontSize="md" fontWeight="normal">Clickable disabled</Text>
+					</Clickable>
+					<Clickable>
+						<Text fontSize="md" fontWeight="normal">Clickable enabled</Text>
+					</Clickable>
+				{:else if activeTab === 'code'}
+					<Text fontSize="xl" fontWeight="normal">Code Editor Tab content</Text>
+				{/if}
+			{/snippet}
+
+			{#snippet previewBar()}
+				<Text fontSize="md" fontWeight="normal">Preview bar content</Text>
+			{/snippet}
+		</Layout>
+	</div>
+</div>
+
+<style>
+	/* Main container layout */
+	.example-container {
+		display: flex;
+		gap: 24px;
+		align-items: flex-start;
+		min-height: 600px;
+	}
+	.example-container > * {
+		font-size: 11.5px !important;
+	}
+
+	.configurator-panel {
+		flex: 0 0 auto;
+		width: 130px;
+		min-width: 130px;
+		max-height: 600px;
+		overflow-y: auto;
+	}
+
+	.layout-preview {
+		border: 1px solid var(--greenText);
+		width: 800px;
+		height: 600px;
+		background: var(--background1);
+		overflow: hidden;
+		flex: 0 0 auto;
+	}
+
+	/* Configuration Panel Styles */
+	.config-panel {
+		background: var(--background2);
+		border: 1px solid var(--border2);
+		border-radius: 6px;
+		padding: 0;
+		overflow: hidden;
+		box-shadow: var(--boxShadows-menu);
+		width: 100%;
+		height: 100%;
+	}
+
+	.config-header {
+		padding: 8px 10px 6px 10px;
+		border-bottom: 1px solid var(--border1);
+		background: var(--background3);
+		text-align: center;
+	}
+
+	.config-content {
+		display: flex;
+		flex-direction: column;
+		height: calc(100% - 32px);
+		overflow-y: auto;
+	}
+
+	.config-section {
+		padding: 8px 10px;
+		border-bottom: 1px solid var(--border1);
+	}
+
+	.config-section:last-child {
+		border-bottom: none;
+		flex: 1;
+	}
+
+	.control-group {
+		margin-bottom: 8px;
+	}
+
+	.control-group:last-child {
+		margin-bottom: 0;
+	}
+
+	.control-label {
+		display: block;
+		margin-bottom: 3px;
+		font-weight: 500;
+		font-size: 11.5px;
+		color: var(--text1);
+		font-family: var(--font-stack);
+		text-align: center;
+	}
+
+	.select-input {
+		width: 100%;
+		padding: 4px 6px;
+		border: 1px solid var(--border2);
+		border-radius: var(--border-radius);
+		background: var(--background1);
+		color: var(--text1);
+		font-size: 11.5px;
+		font-family: var(--font-stack);
+		box-shadow: var(--boxShadows-input-inner);
+		transition: all 0.2s ease;
+	}
+
+	.select-input:focus {
+		outline: none;
+		border-color: var(--blueBorder);
+		box-shadow:
+			var(--boxShadows-input-inner),
+			0 0 0 1px rgba(128, 194, 255, 0.2);
+	}
+
+	.select-input:hover {
+		border-color: var(--border3);
+	}
+
+	.select-input option {
+		background: var(--background2);
+		color: var(--text1);
+		font-size: 11.5px;
+	}
+
+	.toggles-list {
+		display: flex;
+		flex-direction: column;
+		gap: 6px;
+	}
+
+	.toggle-control {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		padding: 4px 6px;
+		border-radius: var(--border-radius);
+		transition: background-color 0.2s ease;
+	}
+
+	.toggle-control:hover {
+		background: var(--defaultLightHover);
+	}
+
+	.checkbox-input {
+		margin: 0;
+		accent-color: var(--actionPrimaryBackground);
+		width: 12px;
+		height: 12px;
+		flex-shrink: 0;
+	}
+
+	.checkbox-label {
+		cursor: pointer;
+		user-select: none;
+		flex: 1;
+		font-size: 11.5px;
+		color: var(--text1);
+		font-family: var(--font-stack);
+		line-height: 1.2;
+	}
+
+	/* Responsive adjustments */
+	@media (max-width: 980px) {
+		.example-container {
+			flex-direction: column;
+			align-items: center;
+			gap: 16px;
+		}
+
+		.configurator-panel {
+			width: 300px;
+			min-width: 300px;
+			max-height: 200px;
+			order: 2;
+		}
+
+		.layout-preview {
+			order: 1;
+		}
+
+		.config-content {
+			display: grid;
+			grid-template-columns: 1fr 1fr;
+			gap: 0;
+			height: auto;
+		}
+
+		.config-section {
+			border-bottom: none;
+		}
+
+		.config-section:first-child {
+			border-right: 1px solid var(--border1);
+		}
+
+		.toggles-list {
+			display: grid;
+			grid-template-columns: 1fr 1fr;
+			gap: 4px 8px;
+		}
+	}
+
+	@media (max-width: 768px) {
+		.configurator-panel {
+			width: 100%;
+			max-width: 400px;
+		}
+
+		.config-content {
+			grid-template-columns: 1fr;
+		}
+
+		.config-section:first-child {
+			border-right: none;
+			border-bottom: 1px solid var(--border1);
+		}
+
+		.toggles-list {
+			grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+		}
+	}
+</style>

package/dist/ui/components/layout/ExampleLayout.svelte.d.ts

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

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

@@ -0,0 +1,24 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+	import ExampleLayout from './ExampleLayout.svelte';
+
+	const { Story } = defineMeta({
+		title: 'UI/Layout',
+		component: ExampleLayout,
+		tags: ['autodocs'],
+		parameters: {
+			layout: 'centered',
+			docs: {
+				description: {
+					component:
+						'A flexible layout component with sidebar, main content area, tabs, and footer. This demo includes a built-in configurator to test different layout options.'
+				}
+			}
+		}
+	});
+</script>
+
+<Story name="Default">
+	<ExampleLayout />
+</Story>

package/dist/ui/components/layout/Layout.stories.svelte.d.ts

@@ -0,0 +1,18 @@
+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;
+}
+declare const Layout: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Layout = InstanceType<typeof Layout>;
+export default Layout;