feat:Drawer (#152)

* feat:Drawer

* feat: Drawer with clickoutside

* fix: settings

Author: grv-saini-20

platforms/metagram/package.json

@@ -32,6 +32,7 @@
 		"@sveltejs/vite-plugin-svelte": "^5.0.0",
 		"@tailwindcss/vite": "^4.0.0",
 		"clsx": "^2.1.1",
+		"cupertino-pane": "^1.4.22",
 		"eslint": "^9.18.0",
 		"eslint-config-prettier": "^10.0.1",
 		"eslint-plugin-svelte": "^3.0.0",
@@ -42,6 +43,7 @@
 		"storybook": "^8.6.12",
 		"svelte": "^5.0.0",
 		"svelte-check": "^4.0.0",
+		"svelte-gestures": "^5.1.3",
 		"tailwindcss": "^4.0.0",
 		"typescript": "^5.0.0",
 		"typescript-eslint": "^8.20.0",

platforms/metagram/src/lib/fragments/Drawer/Drawer.stories.snippet.svelte

@@ -0,0 +1,36 @@
+<script module>
+    export {DrawerContent};
+</script>
+
+{#snippet DrawerContent()}
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero dolore, necessitatibus quam expedita repudiandae cum nulla totam officiis itaque earum explicabo vel soluta libero ea exercitationem iusto velit incidunt quibusdam.
+    Incidunt maiores sed, voluptas magnam magni reiciendis ipsa. Totam molestias commodi incidunt obcaecati fugiat temporibus voluptatum ea excepturi cumque, nostrum quod quae aperiam, nemo asperiores consectetur doloremque repellat, alias consequatur.
+    Inventore deleniti aliquam sapiente, vel ipsam tempore veritatis explicabo minus harum hic itaque dolorem nostrum tenetur dicta dolores delectus eveniet nisi accusantium aperiam cumque iure culpa, eos adipisci! Vel, iusto.
+    Repellendus unde incidunt a saepe reiciendis? Nam, esse voluptas aliquam repellendus cupiditate placeat quis autem minima reiciendis ex unde eveniet neque qui dolorum. Dignissimos inventore quidem ipsum sequi non vel?
+    Nemo aspernatur incidunt veniam quia animi vel asperiores quidem, expedita eum in qui provident, consequuntur officiis veritatis quisquam quo, necessitatibus similique autem odit officia numquam cum dolore pariatur eius! Cupiditate.
+    Facilis aliquid nihil doloremque officiis fugit in minus dicta et, omnis nesciunt suscipit sequi atque perferendis alias exercitationem eaque aliquam provident praesentium quae sunt quas magni consequatur. Praesentium, dolor ipsa?
+    Et, veritatis saepe animi harum eligendi fugit accusamus tempore, reiciendis eveniet, dolores rerum optio earum magnam nam laudantium necessitatibus incidunt minima labore laboriosam voluptatum mollitia quia? Consectetur, reprehenderit! Mollitia, neque.
+    Optio nam eius voluptatem. Facilis hic cum non est quod modi sapiente ex asperiores earum, temporibus ipsum dolore optio aut mollitia fuga ducimus ipsam deleniti et adipisci maxime in velit.
+    Praesentium doloribus earum sunt quasi voluptas quo expedita tempora consequatur ratione maiores accusantium dolorem sit corporis quibusdam esse molestias facilis nemo, non quam? Dolores recusandae neque ex consequatur in atque?
+    Animi recusandae minus eaque nisi dicta earum sit tempore neque porro vero assumenda tempora alias, quis sunt iste illo fuga in inventore quaerat? Magnam cum vero fugiat quaerat provident necessitatibus.
+    Consequatur iusto est sint doloribus quis porro quibusdam inventore numquam nisi nam ullam consectetur mollitia molestiae molestias necessitatibus recusandae voluptate cum aut pariatur, asperiores nobis et perspiciatis ipsam labore. Delectus.
+    Laborum quisquam ea eligendi ut nesciunt aut minima iusto sint esse laboriosam! Doloremque deserunt enim et recusandae quo, nobis expedita maxime error inventore, officiis nulla ipsa tempora eos commodi beatae!
+    Atque vel vitae perspiciatis quam soluta eaque sed illo autem ea ut, exercitationem sit ad quidem eius modi alias facilis labore porro esse. Vel nihil expedita reprehenderit culpa facilis omnis!
+    Non eum minima eius sapiente quo nulla culpa maiores laudantium quos! Consequatur adipisci ad neque nemo! Iste aperiam, tenetur nisi distinctio saepe, reiciendis sed reprehenderit, eum assumenda vel provident in.
+    Magni ex commodi soluta quod ipsum repellendus laborum assumenda velit, aperiam praesentium nemo, dolor aut similique libero tenetur eum! Atque maxime laborum tenetur similique nam ipsam possimus eos officia voluptates.
+    Deleniti quas amet corporis enim possimus nostrum laboriosam nisi. Quisquam, perspiciatis. Quidem unde ut sequi maxime omnis inventore sed qui minima neque, accusamus officia, labore delectus et itaque repellendus. Quia.
+    Quod unde id ipsum labore ex. Non quam, provident, excepturi expedita in, fuga repellendus quibusdam qui numquam similique eaque corrupti exercitationem dolorem mollitia quas! Eius facere nihil natus rerum saepe.
+    Quos atque dolorem, eaque explicabo vel sequi, nam debitis nihil velit adipisci libero praesentium. Modi blanditiis odio, quis explicabo minus vel sunt eius! Odit, libero exercitationem dolore sequi odio assumenda.
+    Cum nostrum iusto ratione excepturi mollitia reiciendis illo eius quisquam veniam non sunt ullam, porro suscipit beatae nesciunt temporibus optio quam tempora possimus. Facere, officia quasi tempora repudiandae quo rem!
+    Explicabo cum ratione sapiente. Obcaecati at enim delectus aperiam iure ex, dolore, quae, id cupiditate quam facere similique perferendis voluptates vel ut. Dolorum delectus, officiis placeat amet rerum inventore nesciunt!
+    Qui voluptas dolor similique id ratione magnam quas dolore ipsum dolores consectetur, error consequuntur nemo veniam tempora temporibus modi fugiat, quam officia exercitationem iusto veritatis dicta magni. Doloribus, harum provident.
+    Veniam tempora quasi, pariatur omnis temporibus ipsam modi mollitia eum fuga tempore quia? Vel aliquam odit aut a! Perspiciatis sint nisi quidem, fuga eligendi architecto porro quos nemo ex provident!
+    Modi nesciunt, aspernatur iure accusamus laborum incidunt? Suscipit amet dolor nihil odio id blanditiis beatae quos harum. Quasi dolorum voluptatum eaque sed vero cum. Impedit, esse. Voluptates tempora saepe repellendus!
+    Quaerat quod animi suscipit error. Similique quae eaque accusantium fugit sint vero voluptas alias quidem? Animi cumque repudiandae quas deleniti ea repellat provident, esse, voluptatum nam dolore consequatur non blanditiis?
+    Qui reiciendis quidem dicta iusto minima aliquam, iste itaque illo dolor earum eligendi, harum sed doloremque quo voluptatum amet consectetur at quod a officiis perspiciatis! Debitis perferendis pariatur cum odio!
+    Est eveniet commodi dolorem numquam voluptatibus aliquid, unde accusamus, tempora laudantium consequatur autem repudiandae, quaerat magnam ducimus atque hic facilis officiis aspernatur. Ducimus necessitatibus, labore praesentium consectetur libero at voluptatibus.
+    Consequatur repudiandae magnam sit blanditiis impedit fugiat totam reiciendis facilis porro sapiente harum veniam in, quos excepturi commodi perspiciatis ad voluptas! Perferendis cum nulla soluta ipsa at? Fugit, dignissimos mollitia!
+    Adipisci voluptatem molestiae doloribus alias quisquam neque commodi incidunt libero maiores aut consequatur error corrupti, modi illo veritatis itaque numquam facere eveniet? Tenetur consectetur ipsum excepturi quaerat, facilis labore modi?
+    Alias harum dolor tempora voluptatibus nam? Incidunt laborum debitis consequuntur, blanditiis laudantium ad facilis laboriosam, cupiditate optio similique saepe a, praesentium veniam dignissimos modi placeat reiciendis! Quia doloribus blanditiis labore.
+    Suscipit dolorum nobis incidunt voluptatibus fugiat minima nostrum natus cum, quas magni obcaecati qui perspiciatis maxime, eligendi aperiam doloribus doloremque totam asperiores a labore! Explicabo quaerat doloremque labore harum vitae!</p>
+{/snippet}

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

@@ -0,0 +1,19 @@
+import type { ComponentProps } from 'svelte';
+import { Drawer } from '..';
+import { DrawerContent } from './Drawer.stories.snippet.svelte';
+
+export default {
+	title: 'UI/Drawer',
+	component: Drawer,
+	tags: ['autodocs'],
+	render: (args: { Component: Drawer; props: ComponentProps<typeof Drawer> }) => ({
+		Component: Drawer,
+		props: args
+	})
+};
+
+export const Main = {
+	args: {
+        children: DrawerContent
+    }
+};

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

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import { onMount, type Snippet } from 'svelte';
+	import { CupertinoPane } from 'cupertino-pane';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { clickOutside, cn } from '$lib/utils';
+	import { swipe } from 'svelte-gestures';
+    import type { SwipeCustomEvent } from 'svelte-gestures';
+
+	interface IDrawerProps extends HTMLAttributes<HTMLDivElement> {
+		isPaneOpen?: boolean;
+		children?: Snippet;
+		handleSwipe?: (isOpen: boolean | undefined) => void;
+	}
+
+	let {
+		isPaneOpen = $bindable(),
+		children = undefined,
+		handleSwipe,
+		...restProps
+	}: IDrawerProps = $props();
+
+	let drawerElement: HTMLElement;
+	let drawer: CupertinoPane;
+
+	const handleClickOutside = () => {
+		drawer?.destroy({ animate: true });
+		isPaneOpen = false;
+	};
+
+    const handleDrawerSwipe = (event: SwipeCustomEvent) => {
+    if (event.detail.direction === 'down' as string) {
+        handleSwipe?.(false);
+        drawer?.destroy({ animate: true });
+        isPaneOpen = false;
+    }
+};
+
+	onMount(() => {
+		if (!drawerElement) return;
+		drawer = new CupertinoPane(drawerElement, {
+			showDraggable: false,
+			backdrop: true,
+			backdropBlur: true,
+			backdropOpacity: 0.4,
+			animationType: 'ease',
+			animationDuration: 300,
+			bottomClose: true,
+			buttonDestroy: false,
+			cssClass: '',
+			initialBreak: 'middle'
+		});
+		if (isPaneOpen) {
+			drawer.present({ animate: true });
+		} else {
+			drawer.destroy({ animate: true });
+		}
+
+		drawer.present();
+	});
+</script>
+
+<div
+	bind:this={drawerElement}
+	{...restProps}
+	use:swipe={() => ({
+		timeframe: 300,
+		minSwipeDistance: 60
+	})}
+	onswipe={handleDrawerSwipe}
+	use:clickOutside={handleClickOutside}
+	class={cn(restProps.class)}
+>
+{@render children?.()}
+</div>

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

@@ -2,7 +2,7 @@ import type { ComponentProps } from 'svelte';
 import Post from './Post.svelte';
 
 export default {
-	title: 'Fragments/Post',
+	title: 'ui/Post',
 	component: Post,
 	tags: ['autodocs'],
 	render: (args: { Component: Post; props: ComponentProps<typeof Post> }) => ({

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

@@ -2,3 +2,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';
+export { default as Drawer } from './Drawer/Drawer.svelte';

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

@@ -1,58 +1,54 @@
-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",
-    },
+	args: {
+		type: 'text',
+		placeholder: 'Joe Biden'
+	}
 };
 
 export const Tel = {
-    args: {
-        type: "tel",
-        placeholder: "987654321",
-    },
+	args: {
+		type: 'tel',
+		placeholder: '987654321'
+	}
 };
 
 export const NumberInput = {
-    args: {
-        type: "number",
-        placeholder: "Enter something",
-    },
+	args: {
+		type: 'number',
+		placeholder: 'Enter something'
+	}
 };
 
 export const Email = {
-    args: {
-        type: "email",
-        placeholder: "[email protected]",
-    },
+	args: {
+		type: 'email',
+		placeholder: '[email protected]'
+	}
 };
 
 export const Invalid = {
-    args: {
-        type: "email",
-        placeholder: "Invalid email",
-        value: "not-an-email",
-    },
+	args: {
+		type: 'email',
+		placeholder: 'Invalid email',
+		value: 'not-an-email'
+	}
 };
 
 export const Password = {
-    args: {
-        type: "password",
-        placeholder: "Please enter password",
-    },
+	args: {
+		type: 'password',
+		placeholder: 'Please enter password'
+	}
 };

platforms/metagram/src/lib/utils/clickOutside.ts

@@ -0,0 +1,17 @@
+/** Dispatch event on click outside of node */
+export const clickOutside = (node: HTMLElement, callback: () => void) => {
+	const handleClick = (event: Event) => {
+		if (node && !node.contains(event.target as Node) && !event.defaultPrevented) {
+			callback(); // Call the provided callback
+			node.dispatchEvent(new CustomEvent('click_outside'));
+		}
+	};
+
+	document.addEventListener('click', handleClick, true);
+
+	return {
+		destroy() {
+			document.removeEventListener('click', handleClick, true);
+		}
+	};
+};

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

@@ -1 +1,2 @@
 export * from './mergeClasses';
+export * from './clickOutside';