@finsweet/webflow-apps-utils 1.0.2 → 1.0.4

package/dist/router/Router.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/sveltekit';
+import RouterExample from './examples/RouterExample.svelte';
+declare const meta: Meta<typeof RouterExample>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const CompleteExample: Story;

package/dist/router/Router.stories.js

@@ -0,0 +1,47 @@
+import RouterExample from './examples/RouterExample.svelte';
+const meta = {
+    title: 'Containers/Router',
+    component: RouterExample,
+    parameters: {
+        layout: 'fullscreen'
+    },
+    tags: ['autodocs'],
+    argTypes: {}
+};
+export default meta;
+export const CompleteExample = {
+    args: {},
+    parameters: {
+        docs: {
+            description: {
+                story: `
+## Complete Router Example
+
+This is a full-featured router implementation demonstrating:
+
+### Routes Implemented:
+- **Home Route** (\`/\`) - Landing page with feature overview
+- **About Route** (\`/about\`) - Main about page with navigation cards
+- **About Sections** (\`/about/:section\`) - Dynamic sections (team, history, mission)
+- **404 Route** - Custom not found page with helpful navigation
+
+### Features Demonstrated:
+- **Link Components** - Active state management and navigation
+- **Programmatic Navigation** - Using \`useNavigate()\` hook
+- **Route Parameters** - Dynamic \`:section\` parameter handling
+- **App Version Support** - Persistent version hash across all navigation
+- **Debug Information** - Real-time route and parameter display
+- **History Management** - Back/forward navigation support
+
+### Navigation Examples:
+- Click navigation links to see active states
+- Use back/forward buttons to test history
+- Try direct URL changes to test route matching
+- Visit invalid routes to see 404 handling
+
+The example shows how the router maintains app version hashes automatically while providing clean route definitions and reactive state management.
+			`
+            }
+        }
+    }
+};

package/dist/router/examples/RouterExample.svelte

@@ -0,0 +1,271 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	import { Link, Route, RouterProvider } from '../providers';
+	import { createRouter } from '../router.svelte';
+	import AboutPage from './pages/AboutPage.svelte';
+	// Page Components
+	import HomePage from './pages/HomePage.svelte';
+	import NotFoundPage from './pages/NotFoundPage.svelte';
+
+	// Create router instance with configuration
+	const router = createRouter({
+		basePath: '',
+		hashMode: false,
+		fallbackRoute: '/',
+		autoInit: false
+	});
+
+	// Add routes
+	router.addRoutes([
+		{ path: '/', component: HomePage, meta: { title: 'Home' } },
+		{ path: '/about', component: AboutPage, meta: { title: 'About' } },
+		{ path: '/about/:section', component: AboutPage, meta: { title: 'About Section' } },
+		{ path: '*', component: NotFoundPage, meta: { title: 'Not Found' } }
+	]);
+
+	onMount(() => {
+		router.init();
+	});
+</script>
+
+<div class="router-example">
+	<h2>Router Example</h2>
+	<p>This example demonstrates the Router component with navigation between pages.</p>
+
+	<RouterProvider {router}>
+		{#snippet children({ router, currentRoute, currentLocation, isNavigating })}
+			<div class="app-layout">
+				<!-- Navigation -->
+				<nav class="navigation">
+					<div class="nav-brand">
+						<h3>My App</h3>
+					</div>
+					<ul class="nav-links">
+						<li>
+							<Link to="/" exact activeClass="active">Home</Link>
+						</li>
+						<li>
+							<Link to="/about" activeClass="active">About</Link>
+						</li>
+						<li>
+							<Link to="/about/team" activeClass="active">About Team</Link>
+						</li>
+						<li>
+							<Link to="/contact" activeClass="active">Contact (404)</Link>
+						</li>
+					</ul>
+				</nav>
+
+				<!-- Loading indicator -->
+				{#if isNavigating}
+					<div class="loading-indicator">
+						<div class="spinner"></div>
+						Navigating...
+					</div>
+				{/if}
+
+				<!-- Route information display -->
+				<div class="route-info">
+					<strong>Current Route:</strong>
+					{currentLocation?.pathname || 'None'}<br />
+					<strong>Route Title:</strong>
+					{currentRoute?.meta?.title || 'Unknown'}<br />
+					<strong>Parameters:</strong>
+					{JSON.stringify(currentLocation?.params || {})}<br />
+					<strong>Query:</strong>
+					{currentLocation?.search || 'None'}
+				</div>
+
+				<!-- Main content area -->
+				<main class="main-content">
+					<!-- Home Route -->
+					<Route path="/">
+						{#snippet children({ params, location, router, isActive })}
+							{#if isActive}
+								<HomePage {params} {location} {router} />
+							{/if}
+						{/snippet}
+					</Route>
+
+					<!-- About Route (with optional section parameter) -->
+					<Route path="/about">
+						{#snippet children({ params, location, router, isActive })}
+							{#if isActive}
+								<AboutPage {params} {location} {router} />
+							{/if}
+						{/snippet}
+					</Route>
+
+					<!-- About with section parameter -->
+					<Route path="/about/:section">
+						{#snippet children({ params, location, router, isActive })}
+							{#if isActive}
+								<AboutPage {params} {location} {router} />
+							{/if}
+						{/snippet}
+					</Route>
+
+					<!-- Fallback route (404) -->
+					<Route path="*" exact={false}>
+						{#snippet children({ params, location, router, isActive })}
+							{#if isActive && !router.isActive('/') && !router.isActive('/about')}
+								<NotFoundPage {params} {location} {router} />
+							{/if}
+						{/snippet}
+					</Route>
+				</main>
+
+				<!-- Router controls -->
+				<div class="router-controls">
+					<h4>Router Controls</h4>
+					<div class="controls-grid">
+						<button onclick={() => router.navigate('/')}> Go Home </button>
+						<button onclick={() => router.navigate('/about')}> Go to About </button>
+						<button onclick={() => router.navigate('/about/team')}> Go to Team </button>
+						<button onclick={() => router.back()}> ← Back </button>
+						<button onclick={() => router.forward()}> Forward → </button>
+						<button onclick={() => router.navigate('/random-page')}> 404 Page </button>
+					</div>
+				</div>
+			</div>
+		{/snippet}
+	</RouterProvider>
+</div>
+
+<style>
+	.router-example {
+		width: 100%;
+		max-width: 800px;
+		margin: 0 auto;
+		padding: 1rem;
+		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+	}
+
+	.app-layout {
+		border: 1px solid #e1e5e9;
+		border-radius: 8px;
+		overflow: hidden;
+		background: white;
+	}
+
+	.navigation {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 1rem 1.5rem;
+		background: #f8f9fa;
+		border-bottom: 1px solid #e1e5e9;
+	}
+
+	.nav-brand h3 {
+		margin: 0;
+		color: #2c3e50;
+	}
+
+	.nav-links {
+		display: flex;
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		gap: 1rem;
+	}
+
+	.nav-links :global(a) {
+		padding: 0.5rem 1rem;
+		text-decoration: none;
+		color: #6c757d;
+		border-radius: 4px;
+		transition: all 0.2s ease;
+	}
+
+	.nav-links :global(a:hover) {
+		background: #e9ecef;
+		color: #495057;
+	}
+
+	.nav-links :global(a.active) {
+		background: #007bff;
+		color: white;
+	}
+
+	.loading-indicator {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.75rem 1.5rem;
+		background: #fff3cd;
+		border-bottom: 1px solid #ffeaa7;
+		color: #856404;
+		font-size: 0.875rem;
+	}
+
+	.spinner {
+		width: 16px;
+		height: 16px;
+		border: 2px solid #ffeaa7;
+		border-top: 2px solid #856404;
+		border-radius: 50%;
+		animation: spin 1s linear infinite;
+	}
+
+	@keyframes spin {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+
+	.route-info {
+		padding: 1rem 1.5rem;
+		background: #f8f9fa;
+		border-bottom: 1px solid #e1e5e9;
+		font-size: 0.875rem;
+		color: #6c757d;
+		line-height: 1.5;
+	}
+
+	.main-content {
+		min-height: 300px;
+		padding: 2rem 1.5rem;
+	}
+
+	.router-controls {
+		padding: 1.5rem;
+		background: #f8f9fa;
+		border-top: 1px solid #e1e5e9;
+	}
+
+	.router-controls h4 {
+		margin: 0 0 1rem 0;
+		color: #2c3e50;
+	}
+
+	.controls-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+		gap: 0.5rem;
+	}
+
+	.controls-grid button {
+		padding: 0.5rem 1rem;
+		border: 1px solid #ddd;
+		border-radius: 4px;
+		background: white;
+		color: #495057;
+		cursor: pointer;
+		font-size: 0.875rem;
+		transition: all 0.2s ease;
+	}
+
+	.controls-grid button:hover {
+		background: #f8f9fa;
+		border-color: #adb5bd;
+	}
+
+	.controls-grid button:active {
+		background: #e9ecef;
+	}
+</style>

package/dist/{ui/components/NoSettingsNeeded.svelte.d.ts → router/examples/RouterExample.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 RouterExample: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-type NoSettingsNeeded = InstanceType<typeof NoSettingsNeeded>;
-export default NoSettingsNeeded;
+type RouterExample = InstanceType<typeof RouterExample>;
+export default RouterExample;

package/dist/router/examples/index.d.ts

@@ -0,0 +1,4 @@
+export { default as RouterExample } from './RouterExample.svelte';
+export { default as HomePage } from './pages/HomePage.svelte';
+export { default as AboutPage } from './pages/AboutPage.svelte';
+export { default as NotFoundPage } from './pages/NotFoundPage.svelte';

package/dist/router/examples/index.js

@@ -0,0 +1,4 @@
+export { default as RouterExample } from './RouterExample.svelte';
+export { default as HomePage } from './pages/HomePage.svelte';
+export { default as AboutPage } from './pages/AboutPage.svelte';
+export { default as NotFoundPage } from './pages/NotFoundPage.svelte';