From 15d68e86152baa4fd75f32e464e6931d084d225d Mon Sep 17 00:00:00 2001 From: gourav Date: Tue, 20 May 2025 15:54:43 +0530 Subject: [PATCH 1/7] fix: styling of modal --- platforms/metagram/src/app.css | 8 ++ .../Drawer/Drawer.stories.snippet.svelte | 112 +++++++++++++----- .../lib/fragments/Drawer/Drawer.stories.ts | 4 +- .../src/lib/fragments/Drawer/Drawer.svelte | 18 +-- .../lib/fragments/Header/Header.stories.ts | 65 +++++----- .../lib/fragments/Message/Message.stories.ts | 49 ++++---- .../Modal/Modal.stories.snippet.svelte | 18 +++ .../src/lib/fragments/Modal/Modal.stories.ts | 19 +++ .../src/lib/fragments/Modal/Modal.svelte | 82 +++++++++++++ platforms/metagram/src/lib/fragments/index.ts | 15 +-- platforms/metagram/src/lib/ui/index.ts | 12 +- 11 files changed, 286 insertions(+), 116 deletions(-) create mode 100644 platforms/metagram/src/lib/fragments/Modal/Modal.stories.snippet.svelte create mode 100644 platforms/metagram/src/lib/fragments/Modal/Modal.stories.ts create mode 100644 platforms/metagram/src/lib/fragments/Modal/Modal.svelte diff --git a/platforms/metagram/src/app.css b/platforms/metagram/src/app.css index 6a569cbc..1dbd5c4a 100644 --- a/platforms/metagram/src/app.css +++ b/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 { diff --git a/platforms/metagram/src/lib/fragments/Drawer/Drawer.stories.snippet.svelte b/platforms/metagram/src/lib/fragments/Drawer/Drawer.stories.snippet.svelte index cb15ccd9..2bb573d8 100644 --- a/platforms/metagram/src/lib/fragments/Drawer/Drawer.stories.snippet.svelte +++ b/platforms/metagram/src/lib/fragments/Drawer/Drawer.stories.snippet.svelte @@ -1,36 +1,84 @@ {#snippet DrawerContent()} -

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!

-{/snippet} \ No newline at end of file +

+ 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! +

+{/snippet} diff --git a/platforms/metagram/src/lib/fragments/Drawer/Drawer.stories.ts b/platforms/metagram/src/lib/fragments/Drawer/Drawer.stories.ts index f95076f2..02ea5ca1 100644 --- a/platforms/metagram/src/lib/fragments/Drawer/Drawer.stories.ts +++ b/platforms/metagram/src/lib/fragments/Drawer/Drawer.stories.ts @@ -14,6 +14,6 @@ export default { export const Main = { args: { - children: DrawerContent - } + children: DrawerContent + } }; diff --git a/platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte b/platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte index 9c3d5bff..66718285 100644 --- a/platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte +++ b/platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte @@ -4,7 +4,7 @@ import type { HTMLAttributes } from 'svelte/elements'; import { clickOutside, 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 { isPaneOpen?: boolean; @@ -27,13 +27,13 @@ isPaneOpen = false; }; - 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; @@ -70,5 +70,5 @@ use:clickOutside={handleClickOutside} class={cn(restProps.class)} > -{@render children?.()} + {@render children?.()} diff --git a/platforms/metagram/src/lib/fragments/Header/Header.stories.ts b/platforms/metagram/src/lib/fragments/Header/Header.stories.ts index 9cc56dfd..798561f3 100644 --- a/platforms/metagram/src/lib/fragments/Header/Header.stories.ts +++ b/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; - }) => ({ - Component: Header, - props: args, - }), + title: 'UI/Header', + component: Header, + tags: ['autodocs'], + render: (args: { Component: Header; props: ComponentProps }) => ({ + 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') + } }; diff --git a/platforms/metagram/src/lib/fragments/Message/Message.stories.ts b/platforms/metagram/src/lib/fragments/Message/Message.stories.ts index 624e54fb..d2c8a074 100644 --- a/platforms/metagram/src/lib/fragments/Message/Message.stories.ts +++ b/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; - }) => ({ - Component: Message, - props: args, - }), + title: 'UI/Message', + component: Message, + tags: ['autodocs'], + render: (args: { Component: Message; props: ComponentProps }) => ({ + 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') + } }; diff --git a/platforms/metagram/src/lib/fragments/Modal/Modal.stories.snippet.svelte b/platforms/metagram/src/lib/fragments/Modal/Modal.stories.snippet.svelte new file mode 100644 index 00000000..c46a3515 --- /dev/null +++ b/platforms/metagram/src/lib/fragments/Modal/Modal.stories.snippet.svelte @@ -0,0 +1,18 @@ + + +{#snippet ModalContent()} +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam rem ipsum possimus maxime + modi laborum inventore autem cupiditate, voluptas ex quas, eaque accusantium ipsam natus + sapiente libero fuga temporibus eligendi. + Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam rem ipsum possimus maxime + modi laborum inventore autem cupiditate, voluptas ex quas, eaque accusantium ipsam natus + sapiente libero fuga temporibus eligendi.Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam rem ipsum possimus maxime + modi laborum inventore autem cupiditate, voluptas ex quas, eaque accusantium ipsam natus + sapiente libero fuga temporibus eligendi.Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam rem ipsum possimus maxime + modi laborum inventore autem cupiditate, voluptas ex quas, eaque accusantium ipsam natus + sapiente libero fuga temporibus eligendi. +

+{/snippet} diff --git a/platforms/metagram/src/lib/fragments/Modal/Modal.stories.ts b/platforms/metagram/src/lib/fragments/Modal/Modal.stories.ts new file mode 100644 index 00000000..1d253c83 --- /dev/null +++ b/platforms/metagram/src/lib/fragments/Modal/Modal.stories.ts @@ -0,0 +1,19 @@ +import type { ComponentProps } from 'svelte'; +import { Modal } from '..'; +import { ModalContent } from './Modal.stories.snippet.svelte'; + +export default { + title: 'UI/Modal', + component: Modal, + tags: ['autodocs'], + render: (args: { Component: Modal; props: ComponentProps }) => ({ + Component: Modal, + props: args + }) +}; + +export const Main = { + args: { + children: ModalContent + } +}; diff --git a/platforms/metagram/src/lib/fragments/Modal/Modal.svelte b/platforms/metagram/src/lib/fragments/Modal/Modal.svelte new file mode 100644 index 00000000..348f0b2d --- /dev/null +++ b/platforms/metagram/src/lib/fragments/Modal/Modal.svelte @@ -0,0 +1,82 @@ + + +
+ {#if children} + {@render children?.()} + {/if} +
+ + \ No newline at end of file diff --git a/platforms/metagram/src/lib/fragments/index.ts b/platforms/metagram/src/lib/fragments/index.ts index 0a30834d..677cdbe5 100644 --- a/platforms/metagram/src/lib/fragments/index.ts +++ b/platforms/metagram/src/lib/fragments/index.ts @@ -1,7 +1,8 @@ -export { default as Header } from "./Header/Header.svelte"; -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"; -export { default as Message } from "./Message/Message.svelte"; +export { default as Header } from './Header/Header.svelte'; +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'; +export { default as Message } from './Message/Message.svelte'; +export { default as Modal } from './Modal/Modal.svelte'; diff --git a/platforms/metagram/src/lib/ui/index.ts b/platforms/metagram/src/lib/ui/index.ts index 3cf81df8..73b2cfbc 100644 --- a/platforms/metagram/src/lib/ui/index.ts +++ b/platforms/metagram/src/lib/ui/index.ts @@ -1,6 +1,6 @@ -export { default as Button } from "./Button/Button.svelte"; -export { default as Avatar } from "./Avatar/Avatar.svelte"; -export { default as Input } from "./Input/Input.svelte"; -export { default as Select } from "./Select/Select.svelte"; -export { default as Label } from "./Label/Label.svelte"; -export { default as Toggle } from "./Toggle/Toggle.svelte"; +export { default as Button } from './Button/Button.svelte'; +export { default as Avatar } from './Avatar/Avatar.svelte'; +export { default as Input } from './Input/Input.svelte'; +export { default as Select } from './Select/Select.svelte'; +export { default as Label } from './Label/Label.svelte'; +export { default as Toggle } from './Toggle/Toggle.svelte'; From 051c6c14fc51dc0eb488c644475e195a68a4a693 Mon Sep 17 00:00:00 2001 From: gourav Date: Tue, 20 May 2025 16:09:17 +0530 Subject: [PATCH 2/7] fix: modal props --- platforms/metagram/src/app.css | 2 +- .../Modal/Modal.stories.snippet.svelte | 7 -- .../src/lib/fragments/Modal/Modal.svelte | 93 +++++++++---------- 3 files changed, 47 insertions(+), 55 deletions(-) diff --git a/platforms/metagram/src/app.css b/platforms/metagram/src/app.css index 1dbd5c4a..01ab83cf 100644 --- a/platforms/metagram/src/app.css +++ b/platforms/metagram/src/app.css @@ -31,7 +31,7 @@ -ms-overflow-style: none; scrollbar-width: none; } - + .hide-scrollbar::-webkit-scrollbar { display: none; } diff --git a/platforms/metagram/src/lib/fragments/Modal/Modal.stories.snippet.svelte b/platforms/metagram/src/lib/fragments/Modal/Modal.stories.snippet.svelte index c46a3515..6ac5d57d 100644 --- a/platforms/metagram/src/lib/fragments/Modal/Modal.stories.snippet.svelte +++ b/platforms/metagram/src/lib/fragments/Modal/Modal.stories.snippet.svelte @@ -7,12 +7,5 @@ Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam rem ipsum possimus maxime modi laborum inventore autem cupiditate, voluptas ex quas, eaque accusantium ipsam natus sapiente libero fuga temporibus eligendi. - Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam rem ipsum possimus maxime - modi laborum inventore autem cupiditate, voluptas ex quas, eaque accusantium ipsam natus - sapiente libero fuga temporibus eligendi.Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam rem ipsum possimus maxime - modi laborum inventore autem cupiditate, voluptas ex quas, eaque accusantium ipsam natus - sapiente libero fuga temporibus eligendi.Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam rem ipsum possimus maxime - modi laborum inventore autem cupiditate, voluptas ex quas, eaque accusantium ipsam natus - sapiente libero fuga temporibus eligendi.

{/snippet} diff --git a/platforms/metagram/src/lib/fragments/Modal/Modal.svelte b/platforms/metagram/src/lib/fragments/Modal/Modal.svelte index 348f0b2d..f18d88be 100644 --- a/platforms/metagram/src/lib/fragments/Modal/Modal.svelte +++ b/platforms/metagram/src/lib/fragments/Modal/Modal.svelte @@ -1,82 +1,81 @@ -
+
{#if children} {@render children?.()} {/if}
\ No newline at end of file + :global(.pane) { + width: 95% !important; + max-height: 300px !important; + min-height: 100px !important; + height: auto !important; + position: fixed !important; + bottom: 30px !important; + left: 50% !important; + transform: translateX(-50%) !important; + border-radius: 32px !important; + padding-block-start: 20px !important; + padding-block-end: 20px !important; + background-color: var(--color-white) !important; + overflow: scroll !important; + scrollbar-width: none !important; + -ms-overflow-style: none !important; + ::-webkit-scrollbar { + display: none !important; + } + } + From 0c20ef061c9d010a4dc10acf6dff2844be75c81a Mon Sep 17 00:00:00 2001 From: gourav Date: Tue, 20 May 2025 16:40:42 +0530 Subject: [PATCH 3/7] fix: conflicting styles --- platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte | 6 ++++++ platforms/metagram/src/lib/fragments/Modal/Modal.svelte | 3 ++- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte b/platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte index 66718285..f648c32b 100644 --- a/platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte +++ b/platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte @@ -72,3 +72,9 @@ > {@render children?.()}
+ + diff --git a/platforms/metagram/src/lib/fragments/Modal/Modal.svelte b/platforms/metagram/src/lib/fragments/Modal/Modal.svelte index f18d88be..6494f9b8 100644 --- a/platforms/metagram/src/lib/fragments/Modal/Modal.svelte +++ b/platforms/metagram/src/lib/fragments/Modal/Modal.svelte @@ -38,6 +38,7 @@ bottom: { enabled: true, height: 250 } }, initialBreak: 'bottom', + cssClass: "modal", events: { onBackdropTap: () => dismiss() } @@ -58,7 +59,7 @@ --> + From f355127dbd4c712ab50018414f0a6abc551d7100 Mon Sep 17 00:00:00 2001 From: gourav Date: Wed, 21 May 2025 08:54:12 +0530 Subject: [PATCH 5/7] fix: hide scrollbar in drawer --- platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte | 5 +++++ platforms/metagram/src/lib/fragments/Modal/Modal.svelte | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte b/platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte index dc240a8e..85396d8f 100644 --- a/platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte +++ b/platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte @@ -78,5 +78,10 @@ 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; + } } diff --git a/platforms/metagram/src/lib/fragments/Modal/Modal.svelte b/platforms/metagram/src/lib/fragments/Modal/Modal.svelte index 6494f9b8..347ebb9c 100644 --- a/platforms/metagram/src/lib/fragments/Modal/Modal.svelte +++ b/platforms/metagram/src/lib/fragments/Modal/Modal.svelte @@ -38,7 +38,7 @@ bottom: { enabled: true, height: 250 } }, initialBreak: 'bottom', - cssClass: "modal", + cssClass: 'modal', events: { onBackdropTap: () => dismiss() } From ba602a24ea8480c899a559091f7638b81ba4ab23 Mon Sep 17 00:00:00 2001 From: gourav Date: Wed, 21 May 2025 08:59:14 +0530 Subject: [PATCH 6/7] fix: padding --- platforms/metagram/src/lib/fragments/Modal/Modal.svelte | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/platforms/metagram/src/lib/fragments/Modal/Modal.svelte b/platforms/metagram/src/lib/fragments/Modal/Modal.svelte index 347ebb9c..ff99a6f9 100644 --- a/platforms/metagram/src/lib/fragments/Modal/Modal.svelte +++ b/platforms/metagram/src/lib/fragments/Modal/Modal.svelte @@ -52,7 +52,7 @@ }); -
+
{#if children} {@render children?.()} {/if} @@ -69,8 +69,7 @@ left: 50% !important; transform: translateX(-50%) !important; border-radius: 32px !important; - padding-block-start: 20px !important; - padding-block-end: 20px !important; + padding: 20px !important; background-color: var(--color-white) !important; overflow: scroll !important; scrollbar-width: none !important; From bcadf99eef6f5d9c22487b8113a862909a1249fa Mon Sep 17 00:00:00 2001 From: gourav Date: Wed, 21 May 2025 09:08:20 +0530 Subject: [PATCH 7/7] fix: used native method for dismissing of drawer --- .../src/lib/fragments/Drawer/Drawer.svelte | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte b/platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte index 85396d8f..0f9e4a92 100644 --- a/platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte +++ b/platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte @@ -2,7 +2,7 @@ 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'; @@ -22,10 +22,9 @@ 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)) { @@ -47,7 +46,10 @@ bottomClose: true, buttonDestroy: false, cssClass: '', - initialBreak: 'middle' + initialBreak: 'middle', + events: { + onBackdropTap: () => dismiss() + } }); if (isPaneOpen) { drawer.present({ animate: true }); @@ -67,7 +69,6 @@ minSwipeDistance: 60 })} onswipe={handleDrawerSwipe} - use:clickOutside={handleClickOutside} class={cn(restProps.class)} > {@render children?.()}