@finsweet/webflow-apps-utils 1.0.28 → 1.0.29

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

@@ -11,6 +11,7 @@ export * from './input';
 export * from './layout';
 export * from './modal';
 export * from './notification';
+export * from './regions';
 export * from './section';
 export * from './select';
 export * from './shared';

package/dist/ui/components/index.js

@@ -11,6 +11,7 @@ export * from './input';
 export * from './layout';
 export * from './modal';
 export * from './notification';
+export * from './regions';
 export * from './section';
 export * from './select';
 export * from './shared';

package/dist/ui/components/regions/RegionSelector.stories.svelte

@@ -0,0 +1,383 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { fn } from 'storybook/test';
+
+	import RegionSelector from './RegionSelector.svelte';
+	import type { RegionGroup, UsedRegions } from './types.js';
+
+	// Dummy data that mimics real region structure
+	const dummyRegionGroups: RegionGroup[] = [
+		{
+			key: 'global',
+			name: 'Global',
+			regions: [
+				{
+					code: 'Global',
+					name: 'Global'
+				}
+			],
+			total: 1
+		},
+		{
+			key: 'europe',
+			name: 'European Union',
+			regions: [
+				{
+					code: 'EU',
+					name: 'European Union'
+				}
+			],
+			total: 1
+		},
+		{
+			key: 'us',
+			name: 'United States',
+			regions: [
+				{ code: 'US-AL', name: 'Alabama' },
+				{ code: 'US-AK', name: 'Alaska' },
+				{ code: 'US-AZ', name: 'Arizona' },
+				{ code: 'US-CA', name: 'California' },
+				{ code: 'US-CO', name: 'Colorado' },
+				{ code: 'US-CT', name: 'Connecticut' },
+				{ code: 'US-DE', name: 'Delaware' },
+				{ code: 'US-FL', name: 'Florida' },
+				{ code: 'US-GA', name: 'Georgia' },
+				{ code: 'US-HI', name: 'Hawaii' }
+			],
+			total: 10
+		},
+		{
+			key: 'countries',
+			name: 'Countries',
+			regions: [
+				{ code: 'CA', name: 'Canada' },
+				{ code: 'MX', name: 'Mexico' },
+				{ code: 'BR', name: 'Brazil' },
+				{ code: 'AR', name: 'Argentina' },
+				{ code: 'GB', name: 'United Kingdom' },
+				{ code: 'FR', name: 'France' },
+				{ code: 'DE', name: 'Germany' },
+				{ code: 'IT', name: 'Italy' },
+				{ code: 'ES', name: 'Spain' },
+				{ code: 'JP', name: 'Japan' },
+				{ code: 'CN', name: 'China' },
+				{ code: 'IN', name: 'India' },
+				{ code: 'AU', name: 'Australia' },
+				{ code: 'NZ', name: 'New Zealand' }
+			],
+			total: 14
+		}
+	];
+
+	const emptyUsedRegions: UsedRegions = {
+		regions: new Set(),
+		isGlobalUsed: false,
+		isEUGroupUsed: false,
+		byInstance: new Map()
+	};
+
+	const someUsedRegions: UsedRegions = {
+		regions: new Set(['US-CA', 'US-CO', 'CA', 'GB']),
+		isGlobalUsed: false,
+		isEUGroupUsed: false,
+		byInstance: new Map()
+	};
+
+	const globalUsedRegions: UsedRegions = {
+		regions: new Set(['Global']),
+		isGlobalUsed: true,
+		isEUGroupUsed: false,
+		byInstance: new Map()
+	};
+
+	const { Story } = defineMeta({
+		title: 'UI/RegionSelector',
+		component: RegionSelector,
+		tags: ['autodocs'],
+		argTypes: {
+			regionGroups: {
+				control: 'object',
+				description: 'Array of region groups containing regions'
+			},
+			selectedRegions: {
+				control: 'object',
+				description: 'Array of selected region codes'
+			},
+			onRegionsChange: {
+				action: 'onRegionsChange',
+				description: 'Callback fired when region selection changes'
+			},
+			usedRegions: {
+				control: 'object',
+				description: 'Object containing regions that are already in use'
+			},
+			isLoading: {
+				control: 'boolean',
+				description: 'If true, shows loading state'
+			},
+			error: {
+				control: 'text',
+				description: 'Error message to display'
+			},
+			maxVisibleBadges: {
+				control: 'number',
+				description: 'Maximum number of selected region badges to show before "more" indicator'
+			},
+			searchPlaceholder: {
+				control: 'text',
+				description: 'Placeholder text for search input'
+			}
+		},
+		args: {
+			onRegionsChange: fn()
+		}
+	});
+</script>
+
+<Story
+	name="Default"
+	args={{
+		regionGroups: dummyRegionGroups,
+		selectedRegions: [],
+		usedRegions: emptyUsedRegions
+	}}
+/>
+
+<Story
+	name="With Pre-selected Regions"
+	args={{
+		regionGroups: dummyRegionGroups,
+		selectedRegions: ['US-CA', 'US-FL', 'CA', 'MX'],
+		usedRegions: emptyUsedRegions
+	}}
+/>
+
+<Story
+	name="Global Selected"
+	args={{
+		regionGroups: dummyRegionGroups,
+		selectedRegions: ['Global'],
+		usedRegions: emptyUsedRegions
+	}}
+/>
+
+<Story
+	name="EU Selected"
+	args={{
+		regionGroups: dummyRegionGroups,
+		selectedRegions: ['EU'],
+		usedRegions: emptyUsedRegions
+	}}
+/>
+
+<Story
+	name="Multiple US States Selected"
+	args={{
+		regionGroups: dummyRegionGroups,
+		selectedRegions: ['US-CA', 'US-CO', 'US-FL', 'US-GA', 'US-HI'],
+		usedRegions: emptyUsedRegions
+	}}
+/>
+
+<Story
+	name="With Used Regions"
+	args={{
+		regionGroups: dummyRegionGroups,
+		selectedRegions: ['US-FL', 'MX'],
+		usedRegions: someUsedRegions
+	}}
+	parameters={{
+		docs: {
+			description: {
+				story:
+					'Regions marked as "in-use" (California, Colorado, Canada, UK) are disabled and cannot be selected.'
+			}
+		}
+	}}
+/>
+
+<Story
+	name="Global In Use"
+	args={{
+		regionGroups: dummyRegionGroups,
+		selectedRegions: [],
+		usedRegions: globalUsedRegions
+	}}
+	parameters={{
+		docs: {
+			description: {
+				story: 'When Global is in use, the Global option is disabled.'
+			}
+		}
+	}}
+/>
+
+<Story
+	name="Loading State"
+	args={{
+		regionGroups: [],
+		selectedRegions: [],
+		usedRegions: emptyUsedRegions,
+		isLoading: true
+	}}
+/>
+
+<Story
+	name="Error State"
+	args={{
+		regionGroups: [],
+		selectedRegions: [],
+		usedRegions: emptyUsedRegions,
+		error: 'Failed to load regions. Please try again.'
+	}}
+/>
+
+<Story
+	name="Custom Max Visible Badges"
+	args={{
+		regionGroups: dummyRegionGroups,
+		selectedRegions: ['US-CA', 'US-CO', 'US-FL', 'US-GA', 'CA', 'MX', 'BR'],
+		usedRegions: emptyUsedRegions,
+		maxVisibleBadges: 3
+	}}
+	parameters={{
+		docs: {
+			description: {
+				story: 'Shows 3 region badges before displaying "+N more" indicator.'
+			}
+		}
+	}}
+/>
+
+<Story
+	name="Custom Search Placeholder"
+	args={{
+		regionGroups: dummyRegionGroups,
+		selectedRegions: [],
+		usedRegions: emptyUsedRegions,
+		searchPlaceholder: 'Find your region...'
+	}}
+/>
+
+<Story
+	name="Interactive - Clear Selections"
+	args={{
+		regionGroups: dummyRegionGroups,
+		selectedRegions: ['US-CA', 'US-FL', 'CA'],
+		usedRegions: emptyUsedRegions
+	}}
+	parameters={{
+		docs: {
+			description: {
+				story:
+					'Test the "Clear all" functionality. Select some regions and click "Clear all" button.'
+			}
+		}
+	}}
+/>
+
+<Story
+	name="Interactive - Search Functionality"
+	args={{
+		regionGroups: dummyRegionGroups,
+		selectedRegions: [],
+		usedRegions: emptyUsedRegions
+	}}
+	parameters={{
+		docs: {
+			description: {
+				story: 'Test search functionality. Try searching for "California", "CA", "United", etc.'
+			}
+		}
+	}}
+/>
+
+<Story
+	name="Interactive - Nested Groups"
+	args={{
+		regionGroups: dummyRegionGroups,
+		selectedRegions: [],
+		usedRegions: emptyUsedRegions
+	}}
+	parameters={{
+		docs: {
+			description: {
+				story:
+					'Test expanding/collapsing groups. Select "Select Countries" to see US States nested inside.'
+			}
+		}
+	}}
+/>
+
+<Story
+	name="Many Selected Regions"
+	args={{
+		regionGroups: dummyRegionGroups,
+		selectedRegions: [
+			'US-CA',
+			'US-CO',
+			'US-FL',
+			'US-GA',
+			'US-HI',
+			'CA',
+			'MX',
+			'BR',
+			'AR',
+			'GB',
+			'FR',
+			'DE'
+		],
+		usedRegions: emptyUsedRegions,
+		maxVisibleBadges: 2
+	}}
+	parameters={{
+		docs: {
+			description: {
+				story: 'Shows how the component handles many selected regions with badge overflow.'
+			}
+		}
+	}}
+/>
+
+<Story
+	name="Empty Search Results"
+	args={{
+		regionGroups: dummyRegionGroups,
+		selectedRegions: [],
+		usedRegions: emptyUsedRegions
+	}}
+	parameters={{
+		docs: {
+			description: {
+				story:
+					'Type a search term that yields no results (like "xyz123") to see empty search state.'
+			}
+		}
+	}}
+/>
+
+<Story
+	name="Accessibility Test"
+	args={{
+		regionGroups: dummyRegionGroups,
+		selectedRegions: ['US-CA'],
+		usedRegions: emptyUsedRegions
+	}}
+	parameters={{
+		docs: {
+			description: {
+				story:
+					'Test keyboard navigation: Tab to focus elements, Space/Enter to select, Arrow keys for navigation.'
+			}
+		},
+		a11y: {
+			config: {
+				rules: [
+					{ id: 'button-name', enabled: true },
+					{ id: 'aria-allowed-attr', enabled: true },
+					{ id: 'aria-valid-attr', enabled: true }
+				]
+			}
+		}
+	}}
+/>

package/dist/ui/components/regions/RegionSelector.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import RegionSelector from './RegionSelector.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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const RegionSelector: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type RegionSelector = InstanceType<typeof RegionSelector>;
+export default RegionSelector;