@finsweet/webflow-apps-utils 1.0.1

package/dist/ui/components/text/Text.stories.svelte

@@ -0,0 +1,203 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { fn } from 'storybook/test';
+
+	import { AccountIcon, DeleteIcon, ToolTipInfoCircleIcon } from '../../icons';
+	import Text from './Text.svelte';
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'UI/Text',
+		component: Text,
+		tags: ['autodocs'],
+		argTypes: {
+			label: {
+				control: { type: 'text' },
+				description: 'The text content to display'
+			},
+			fontSize: {
+				control: { type: 'select' },
+				options: ['normal', 'large'],
+				description: 'Size of the text'
+			},
+			fontWeight: {
+				control: { type: 'select' },
+				options: ['normal', 'bold'],
+				description: 'Weight of the text'
+			},
+			fontColor: {
+				control: { type: 'color' },
+				description: 'Color of the text'
+			},
+			textAlign: {
+				control: { type: 'select' },
+				options: ['left', 'center', 'right'],
+				description: 'Text alignment'
+			},
+			wrap: {
+				control: { type: 'select' },
+				options: ['normal', 'nowrap'],
+				description: 'Text wrapping behavior'
+			},
+			disabled: {
+				control: { type: 'boolean' },
+				description: 'Disabled state'
+			},
+			loading: {
+				control: { type: 'boolean' },
+				description: 'Loading state with spinner'
+			},
+			link: {
+				control: { type: 'boolean' },
+				description: 'Render as clickable link'
+			},
+			raw: {
+				control: { type: 'boolean' },
+				description: 'Render text as raw HTML'
+			},
+			ellipsisOnWidth: {
+				control: { type: 'text' },
+				description: 'Width at which text should ellipsis'
+			},
+			tooltip: {
+				control: { type: 'object' },
+				description: 'Tooltip configuration'
+			},
+			popup: {
+				control: { type: 'object' },
+				description: 'Popup action configuration'
+			},
+			onclick: { action: 'clicked' }
+		},
+		args: {
+			onclick: fn()
+		}
+	});
+</script>
+
+<!-- Basic Examples -->
+<Story
+	name="Default"
+	args={{
+		label: 'Default text'
+	}}
+/>
+
+<Story
+	name="With Icon"
+	args={{
+		label: 'Text with icon',
+		icon: AccountIcon
+	}}
+/>
+
+<Story
+	name="Loading State"
+	args={{
+		label: 'Loading text',
+		loading: true
+	}}
+/>
+
+<Story
+	name="Clickable Link"
+	args={{
+		label: 'Clickable text',
+		link: true
+	}}
+/>
+
+<!-- Alignment and Ellipsis -->
+<Story name="Text Alignment & Ellipsis">
+	<div
+		style="width: 300px; border: 1px solid #ddd; padding: 16px; display: flex; flex-direction: column; gap: 12px;"
+	>
+		<div style="border: 1px dashed #ccc; padding: 8px;">
+			<h4 style="margin: 0 0 8px 0; font-size: 12px; color: #666;">Alignment:</h4>
+			<Text label="Left aligned" textAlign="left" />
+			<Text label="Center aligned" textAlign="center" />
+			<Text label="Right aligned" textAlign="right" />
+		</div>
+
+		<div style="border: 1px dashed #ccc; padding: 8px;">
+			<h4 style="margin: 0 0 8px 0; font-size: 12px; color: #666;">Ellipsis (150px):</h4>
+			<Text
+				label="This is a long text that will be truncated with ellipsis when it exceeds the width"
+				ellipsisOnWidth="150px"
+			/>
+		</div>
+
+		<div style="border: 1px dashed #ccc; padding: 8px;">
+			<h4 style="margin: 0 0 8px 0; font-size: 12px; color: #666;">Icon + Ellipsis (120px):</h4>
+			<Text label="Long text with icon and ellipsis" icon={DeleteIcon} ellipsisOnWidth="120px" />
+		</div>
+
+		<div style="border: 1px dashed #ccc; padding: 8px;">
+			<h4 style="margin: 0 0 8px 0; font-size: 12px; color: #666;">Loading + Ellipsis (120px):</h4>
+			<Text label="Loading text with ellipsis" loading={true} ellipsisOnWidth="120px" />
+		</div>
+
+		<div style="border: 1px dashed #ccc; padding: 8px;">
+			<h4 style="margin: 0 0 8px 0; font-size: 12px; color: #666;">Center + Ellipsis (120px):</h4>
+			<Text label="Centered text with ellipsis" textAlign="center" ellipsisOnWidth="120px" />
+		</div>
+	</div>
+</Story>
+
+<!-- Tooltip Example -->
+<Story
+	name="With Tooltip"
+	args={{
+		label: 'Text with tooltip',
+		tooltip: {
+			message: 'This is a helpful tooltip message',
+			placement: 'top'
+		}
+	}}
+/>
+
+<!-- Popup Example -->
+<Story
+	name="With Popup Action"
+	args={{
+		label: 'Text with popup action',
+		popup: {
+			active: true,
+			title: 'Remove',
+			subtitle: 'Alt + click',
+			description: 'This will remove the current selection.'
+		}
+	}}
+/>
+
+<!-- Styling Examples -->
+<Story name="Styling Options">
+	<div style="display: flex; flex-direction: column; gap: 8px;">
+		<Text label="Large bold text" fontSize="large" fontWeight="bold" />
+		<Text label="Colored text" fontColor="#007acc" />
+		<Text label="Text with <strong>bold</strong> formatting" raw={true} />
+		<Text label="Disabled text" disabled={true} />
+	</div>
+</Story>
+
+<!-- Complex Example -->
+<Story
+	name="Complex Example"
+	args={{
+		label: 'Complex text with all features',
+		fontSize: 'large',
+		fontWeight: 'bold',
+		fontColor: '#2563eb',
+		icon: AccountIcon,
+		link: true,
+		tooltip: {
+			message: 'This demonstrates multiple features working together'
+		},
+		popup: {
+			active: true,
+			title: 'Advanced Action',
+			subtitle: 'Alt + click',
+			description: 'This demonstrates a complex text component.'
+		}
+	}}
+/>

package/dist/ui/components/text/Text.stories.svelte.d.ts

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