feat: message-input

.vscode/extensions.json

@@ -22,6 +22,7 @@
         "streetsidesoftware.code-spell-checker",
         "1YiB.rust-bundle",
         "bradlc.vscode-tailwindcss",
-        "tauri-apps.tauri-vscode"
+        "tauri-apps.tauri-vscode",
+        "coderabbit.coderabbit-vscode"
     ]
 }

platforms/metagram/src/lib/fragments/MessageInput/MessageInput.stories.ts

@@ -0,0 +1,29 @@
+import type { ComponentProps } from 'svelte';
+import MessageInput from './MessageInput.svelte';
+
+export default {
+	title: 'UI/MessageInput',
+	component: MessageInput,
+	tags: ['autodocs'],
+	render: (args: { Component: MessageInput; props: ComponentProps<typeof MessageInput> }) => ({
+		Component: MessageInput,
+		props: args
+	})
+};
+
+export const Comment = {
+	args: {
+		variant: 'comment',
+		placeholder: 'Write your comment',
+		handleSend: () => alert('sent')
+	}
+};
+
+export const Dm = {
+	args: {
+		variant: 'dm',
+		placeholder: 'Write your message',
+		handleAdd: () => alert('add'),
+		handleSend: () => alert('sent')
+	}
+};

platforms/metagram/src/lib/fragments/MessageInput/MessageInput.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+	import { Avatar, Input } from '$lib/ui';
+	import { cn } from '$lib/utils';
+	import { ImageCompositionOvalIcon, PlusSignIcon, SentIcon } from '@hugeicons/core-free-icons';
+	import { HugeiconsIcon } from '@hugeicons/svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface IMessageInputProps extends HTMLAttributes<HTMLElement> {
+		variant: 'comment' | 'dm';
+		src: string;
+		value: string;
+		placeholder?: string;
+		files?: FileList | undefined;
+		handleAdd?: () => void;
+		handleSend: () => Promise<void>;
+	}
+
+	let {
+		variant = 'comment',
+		src = 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+		value,
+		placeholder,
+		files = $bindable(),
+		handleAdd,
+		handleSend,
+		...restProps
+	}: IMessageInputProps = $props();
+
+	let fileInput: HTMLInputElement | undefined = $state();
+
+	const cBase = 'flex items-center justify-between gap-2';
+</script>
+
+<div {...restProps} class={cn([cBase, restProps.class].join(' '))}>
+	{#if variant === 'comment'}
+		<Avatar size="sm" {src} />
+	{:else}
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<button
+			type="button"
+			class="bg-grey flex aspect-square h-13 w-13 items-center justify-center rounded-full border-0 p-0"
+			onclick={handleAdd}
+			aria-label="Add attachment"
+		>
+			<HugeiconsIcon size="24px" icon={PlusSignIcon} color="var(--color-black-400)" />
+		</button>
+	{/if}
+	<Input type="text" bind:value {placeholder} />
+	{#if value || variant === 'dm'}
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div
+			class="bg-grey flex aspect-square h-13 w-13 items-center justify-center rounded-full"
+			onclick={handleSend}
+		>
+			<HugeiconsIcon size="24px" icon={SentIcon} color="var(--color-black-400)" />
+		</div>
+	{:else}
+		<div class="bg-grey flex aspect-square h-13 w-13 items-center justify-center rounded-full">
+			<input
+				id="add-image"
+				type="file"
+				class="hidden"
+				accept="image/*"
+				bind:files
+				bind:this={fileInput}
+			/>
+			<button
+				type="button"
+				class="bg-grey flex aspect-square h-13 w-13 items-center justify-center rounded-full border-0 p-0"
+				aria-label="add-image"
+				onclick={() => fileInput?.click()}
+			>
+				<HugeiconsIcon
+					size="24px"
+					icon={ImageCompositionOvalIcon}
+					color="var(--color-black-400)"
+				/>
+			</button>
+		</div>
+	{/if}
+</div>

platforms/metagram/src/lib/fragments/Post/Post.stories.ts

@@ -1,41 +1,38 @@
-import type { ComponentProps } from "svelte";
-import Post from "./Post.svelte";
+import type { ComponentProps } from 'svelte';
+import Post from './Post.svelte';
 
 export default {
-    title: "Fragments/Post",
-    component: Post,
-    tags: ["autodocs"],
-    render: (args: {
-        Component: Post;
-        props: ComponentProps<typeof Post>;
-    }) => ({
-        Component: Post,
-        props: args,
-    }),
+	title: 'Fragments/Post',
+	component: Post,
+	tags: ['autodocs'],
+	render: (args: { Component: Post; props: ComponentProps<typeof Post> }) => ({
+		Component: Post,
+		props: args
+	})
 };
 
 export const Primary = {
-    args: {
-        avatar: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
-        username: "blurryface",
-        imgUri: "https://graphicsfamily.com/wp-content/uploads/edd/2023/01/Free-Photographer-Social-Media-Post-Design-Template-870x870.jpg",
-        postAlt: "Sample",
-        text: "Took some pictures today! Really love how this one in particular turned out! ",
-        time: "2 hours ago",
-        count: {
-            likes: 100,
-            comments: 50,
-        },
-        callback: {
-            like: () => {
-                alert("Like clicked");
-            },
-            comment: () => {
-                alert("Comment clicked");
-            },
-            menu: () => {
-                alert("Menu clicked");
-            },
-        },
-    },
+	args: {
+		avatar: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+		username: 'blurryface',
+		imgUri: 'https://graphicsfamily.com/wp-content/uploads/edd/2023/01/Free-Photographer-Social-Media-Post-Design-Template-870x870.jpg',
+		postAlt: 'Sample',
+		text: 'Took some pictures today! Really love how this one in particular turned out! ',
+		time: '2 hours ago',
+		count: {
+			likes: 100,
+			comments: 50
+		},
+		callback: {
+			like: () => {
+				alert('Like clicked');
+			},
+			comment: () => {
+				alert('Comment clicked');
+			},
+			menu: () => {
+				alert('Menu clicked');
+			}
+		}
+	}
 };

platforms/metagram/src/lib/fragments/index.ts

@@ -1,3 +1,4 @@
 export { default as BottomNav } from './BottomNav/BottomNav.svelte';
 export { default as SettingsNavigationButton } from './SettingsNavigationButton/SettingsNavigationButton.svelte';
+export { default as MessageInput } from './MessageInput/MessageInput.svelte';
 export { default as InputFile } from './InputFile/InputFile.svelte';

platforms/metagram/src/lib/ui/Input/Input.stories.ts

@@ -1,59 +1,58 @@
-import { Input } from '..';
+import { Input } from "..";
 
 export default {
-	title: 'UI/Input',
-	component: Input,
-	tags: ['autodocs'],
-	render: (args: { type: string; placeholder: string; helperText: string }) => ({
-		Component: Input,
-		props: args
-	})
+    title: "UI/Input",
+    component: Input,
+    tags: ["autodocs"],
+    render: (args: {
+        type: string;
+        placeholder: string;
+        helperText: string;
+    }) => ({
+        Component: Input,
+        props: args,
+    }),
 };
 
 export const Text = {
-	args: {
-		type: 'text',
-		placeholder: 'Joe Biden',
-		isRequired: true
-	}
+    args: {
+        type: "text",
+        placeholder: "Joe Biden",
+    },
 };
 
 export const Tel = {
-	args: {
-		type: 'tel',
-		placeholder: '987654321',
-		isRequired: true
-	}
+    args: {
+        type: "tel",
+        placeholder: "987654321",
+    },
 };
 
-export const isError = {
-	args: {
-		type: 'text',
-		placeholder: 'Enter something',
-		isError: true
-	}
+export const NumberInput = {
+    args: {
+        type: "number",
+        placeholder: "Enter something",
+    },
 };
 
 export const Email = {
-	args: {
-		type: 'email',
-		placeholder: '[email protected]'
-	}
+    args: {
+        type: "email",
+        placeholder: "[email protected]",
+    },
 };
 
-export const Password = {
-	args: {
-		type: 'password',
-		placeholder: 'Please enter password',
-		isRequired: true
-	}
+export const Invalid = {
+    args: {
+        type: "email",
+        placeholder: "Invalid email",
+        value: "not-an-email",
+    },
 };
 
-export const Disabled = {
-	args: {
-		type: 'text',
-		placeholder: 'Joe Biden',
-		isRequired: true,
-		isDisabled: true
-	}
+export const Password = {
+    args: {
+        type: "password",
+        placeholder: "Please enter password",
+    },
 };

platforms/metagram/src/lib/ui/Input/Input.svelte

@@ -1,28 +1,20 @@
 <script lang="ts">
 	import { cn } from '$lib/utils';
-	import type { HTMLInputAttributes } from 'svelte/elements';
+	import type { HTMLInputAttributes, HTMLInputTypeAttribute } from 'svelte/elements';
 
 	interface IInputProps extends HTMLInputAttributes {
-		type: 'text' | 'number' | 'email' | 'tel' | 'password';
-		value: string | number;
-		placeholder: string;
-		isRequired: boolean;
-		isDisabled: boolean;
-		isError: boolean;
+		type: HTMLInputTypeAttribute;
 	}
 
 	let {
 		type = 'text',
 		value = $bindable(),
 		placeholder = '',
-		isRequired = false,
-		isDisabled = false,
-		isError = false,
 		...restProps
 	}: IInputProps = $props();
 
 	const cbase = $derived(
-		`w-full bg-grey py-3.5 px-6 text-[15px] text-black-800 font-geist font-normal placeholder:text-black-600 rounded-4xl outline-0 border border-transparent ${isError && 'border border-red text-red focus:text-black-800 focus:border-transparent'} ${isDisabled && 'cursor-not-allowed'}`
+		'w-full bg-grey py-3.5 px-6 text-[15px] text-black-800 font-geist font-normal placeholder:text-black-600 rounded-4xl outline-0 border border-transparent invalid:border-red invalid:text-red focus:invalid:text-black-800 focus:invalid:border-transparent'
 	);
 </script>
 
@@ -31,8 +23,6 @@
 	{type}
 	{placeholder}
 	bind:value
-	required={isRequired}
-	disabled={isDisabled}
 	class={cn([cbase, restProps.class].join(' '))}
 	tabindex="0"
 />

platforms/metagram/src/lib/ui/Toggle/Toggle.svelte

@@ -14,7 +14,7 @@
 <label
 	{...restProps}
 	for={uniqueId}
-	class={cn(["relative",restProps.class].join(" "))}
+	class={cn(['relative', restProps.class].join(' '))}
 	aria-label={restProps['aria-label'] || 'Toggle'}
 	role="switch"
 	aria-checked={checked}