feat: modal (#154)

* fix: styling of modal

* fix: modal props

* fix: conflicting styles

* fix: styles of drawer

* fix: hide scrollbar in drawer

* fix: padding

* fix: used native method for dismissing of drawer

Author: grv-saini-20

platforms/metagram/src/app.css

@@ -27,6 +27,14 @@
 	.subtext {
 		@apply font-geist text-xs/[1] font-normal;
 	}
+	.hide-scrollbar {
+		-ms-overflow-style: none;
+		scrollbar-width: none;
+	}
+
+	.hide-scrollbar::-webkit-scrollbar {
+		display: none;
+	}
 }
 
 @theme {

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

@@ -1,36 +1,84 @@
 <script module>
-    export {DrawerContent};
+	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}
+	<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

@@ -14,6 +14,6 @@ export default {
 
 export const Main = {
 	args: {
-        children: DrawerContent
-    }
+		children: DrawerContent
+	}
 };

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

@@ -2,9 +2,9 @@
 	import { onMount, type Snippet } from 'svelte';
 	import { CupertinoPane } from 'cupertino-pane';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { clickOutside, cn } from '$lib/utils';
+	import { cn } from '$lib/utils';
 	import { swipe } from 'svelte-gestures';
-    import type { SwipeCustomEvent } from 'svelte-gestures';
+	import type { SwipeCustomEvent } from 'svelte-gestures';
 
 	interface IDrawerProps extends HTMLAttributes<HTMLDivElement> {
 		isPaneOpen?: boolean;
@@ -22,18 +22,17 @@
 	let drawerElement: HTMLElement;
 	let drawer: CupertinoPane;
 
-	const handleClickOutside = () => {
-		drawer?.destroy({ animate: true });
-		isPaneOpen = false;
-	};
+	function dismiss() {
+		if (drawer) drawer.destroy({ animate: true });
+	}
 
-    const handleDrawerSwipe = (event: SwipeCustomEvent) => {
-    if (event.detail.direction === 'down' as string) {
-        handleSwipe?.(false);
-        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;
@@ -47,7 +46,10 @@
 			bottomClose: true,
 			buttonDestroy: false,
 			cssClass: '',
-			initialBreak: 'middle'
+			initialBreak: 'middle',
+			events: {
+					onBackdropTap: () => dismiss()
+				}
 		});
 		if (isPaneOpen) {
 			drawer.present({ animate: true });
@@ -67,8 +69,20 @@
 		minSwipeDistance: 60
 	})}
 	onswipe={handleDrawerSwipe}
-	use:clickOutside={handleClickOutside}
 	class={cn(restProps.class)}
 >
-{@render children?.()}
+	{@render children?.()}
 </div>
+
+<style>
+	:global(.pane) {
+		border-top-left-radius: 32px !important;
+		border-top-right-radius: 32px !important;
+		padding: 20px !important;
+		scrollbar-width: none !important;
+		-ms-overflow-style: none !important;
+		::-webkit-scrollbar {
+			display: none !important;
+		}
+	}
+</style>

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

@@ -1,52 +1,49 @@
-import type { ComponentProps } from "svelte";
-import Header from "./Header.svelte";
+import type { ComponentProps } from 'svelte';
+import Header from './Header.svelte';
 
 export default {
-    title: "Fragments/Header",
-    component: Header,
-    tags: ["autodocs"],
-    render: (args: {
-        Component: Header;
-        props: ComponentProps<typeof Header>;
-    }) => ({
-        Component: Header,
-        props: args,
-    }),
+	title: 'UI/Header',
+	component: Header,
+	tags: ['autodocs'],
+	render: (args: { Component: Header; props: ComponentProps<typeof Header> }) => ({
+		Component: Header,
+		props: args
+	})
 };
 
 export const Primary = {
-    args: {
-        variant: "primary",
-        heading: "metagram",
-        callback: () => alert("clicked"),
-    },
+	args: {
+		variant: 'primary',
+		heading: 'metagram',
+		callback: () => alert('clicked')
+	}
 };
 
 export const PrimaryWithNoFlash = {
-    args: {
-        variant: "primary",
-        heading: "messages",
-    },
+	args: {
+		variant: 'primary',
+		heading: 'messages'
+	}
 };
 
 export const Secondary = {
-    args: {
-        variant: "secondary",
-        heading: "Account",
-    },
+	args: {
+		variant: 'secondary',
+		heading: 'Account'
+	}
 };
 
 export const SecondaryWithMenu = {
-    args: {
-        variant: "secondary",
-        heading: "Account",
-        callback: () => alert("menu clicked"),
-    },
+	args: {
+		variant: 'secondary',
+		heading: 'Account',
+		callback: () => alert('menu clicked')
+	}
 };
 
 export const Tertiary = {
-    args: {
-        variant: "tertiary",
-        callback: () => alert("clicked"),
-    },
+	args: {
+		variant: 'tertiary',
+		callback: () => alert('clicked')
+	}
 };

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

@@ -1,35 +1,32 @@
-import type { ComponentProps } from "svelte";
-import Message from "./Message.svelte";
+import type { ComponentProps } from 'svelte';
+import Message from './Message.svelte';
 
 export default {
-    title: "UI/Message",
-    component: Message,
-    tags: ["autodocs"],
-    render: (args: {
-        Component: Message;
-        props: ComponentProps<typeof Message>;
-    }) => ({
-        Component: Message,
-        props: args,
-    }),
+	title: 'UI/Message',
+	component: Message,
+	tags: ['autodocs'],
+	render: (args: { Component: Message; props: ComponentProps<typeof Message> }) => ({
+		Component: Message,
+		props: args
+	})
 };
 
 export const Primary = {
-    args: {
-        avatar: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
-        username: "donaldthefirstt",
-        text: "i was thinking of making it to the conference so we could take some more fire pictures like last time",
-        unread: false,
-        callback: () => alert("Message clicked"),
-    },
+	args: {
+		avatar: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+		username: 'donaldthefirstt',
+		text: 'i was thinking of making it to the conference so we could take some more fire pictures like last time',
+		unread: false,
+		callback: () => alert('Message clicked')
+	}
 };
 
 export const Unread = {
-    args: {
-        avatar: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
-        username: "donaldthefirstt",
-        text: "i was thinking of making it to the conference so we could take some more fire pictures like last time",
-        unread: true,
-        callback: () => alert("Message clicked"),
-    },
+	args: {
+		avatar: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+		username: 'donaldthefirstt',
+		text: 'i was thinking of making it to the conference so we could take some more fire pictures like last time',
+		unread: true,
+		callback: () => alert('Message clicked')
+	}
 };