From 25c3bd98a97b661222574af4a71748837a6a2c6d Mon Sep 17 00:00:00 2001 From: impruthvi Date: Thu, 27 Feb 2025 21:55:37 +0530 Subject: [PATCH 1/6] feat: add responsive modal component and integrate with delete user functionality --- package-lock.json | 14 +- package.json | 1 + resources/css/app.css | 13 ++ resources/js/components/delete-user.tsx | 36 ++--- resources/js/components/responsive-modal.tsx | 31 +++++ resources/js/components/ui/drawer.tsx | 130 +++++++++++++++++++ 6 files changed, 207 insertions(+), 18 deletions(-) create mode 100644 resources/js/components/responsive-modal.tsx create mode 100644 resources/js/components/ui/drawer.tsx diff --git a/package-lock.json b/package-lock.json index 3a4211e6..a61c7cd0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -36,6 +36,7 @@ "tailwindcss": "^4.0.0", "tailwindcss-animate": "^1.0.7", "typescript": "^5.7.2", + "vaul": "^1.1.2", "vite": "^6.0" }, "devDependencies": { @@ -1301,7 +1302,6 @@ "version": "1.1.6", "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.6.tgz", "integrity": "sha512-/IVhJV5AceX620DUJ4uYVMymzsipdKBzo3edo+omeskCKGm9FRHM0ebIdbPnlQVJqyuHbuBltQUOG2mOTq2IYw==", - "license": "MIT", "dependencies": { "@radix-ui/primitive": "1.1.1", "@radix-ui/react-compose-refs": "1.1.1", @@ -7037,6 +7037,18 @@ } } }, + "node_modules/vaul": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/vaul/-/vaul-1.1.2.tgz", + "integrity": "sha512-ZFkClGpWyI2WUQjdLJ/BaGuV6AVQiJ3uELGk3OYtP+B6yCO7Cmn9vPFXVJkRaGkOJu3m8bQMgtyzNHixULceQA==", + "dependencies": { + "@radix-ui/react-dialog": "^1.1.1" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc" + } + }, "node_modules/vite": { "version": "6.1.1", "resolved": "https://registry.npmjs.org/vite/-/vite-6.1.1.tgz", diff --git a/package.json b/package.json index 11a63af2..7a2839ea 100644 --- a/package.json +++ b/package.json @@ -52,6 +52,7 @@ "tailwindcss": "^4.0.0", "tailwindcss-animate": "^1.0.7", "typescript": "^5.7.2", + "vaul": "^1.1.2", "vite": "^6.0" }, "optionalDependencies": { diff --git a/resources/css/app.css b/resources/css/app.css index b1b07633..7826ec35 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -156,3 +156,16 @@ @apply bg-background text-foreground; } } + +/* + ---break--- +*/ + +@layer base { + * { + @apply border-border outline-ring/50; + } + body { + @apply bg-background text-foreground; + } +} diff --git a/resources/js/components/delete-user.tsx b/resources/js/components/delete-user.tsx index 52caed20..5ad99cfd 100644 --- a/resources/js/components/delete-user.tsx +++ b/resources/js/components/delete-user.tsx @@ -1,19 +1,21 @@ import { useForm } from '@inertiajs/react'; -import { FormEventHandler, useRef } from 'react'; +import { FormEventHandler, useRef, useState } from 'react'; // Components... import InputError from '@/components/input-error'; +import { ResponsiveModal } from '@/components/responsive-modal'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import HeadingSmall from '@/components/heading-small'; -import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogTitle, DialogTrigger } from '@/components/ui/dialog'; +import { DialogDescription, DialogFooter, DialogTitle } from '@/components/ui/dialog'; export default function DeleteUser() { const passwordInput = useRef(null); const { data, setData, delete: destroy, processing, reset, errors, clearErrors } = useForm({ password: '' }); + const [isOpen, setIsOpen] = useState(false); const deleteUser: FormEventHandler = (e) => { e.preventDefault(); @@ -27,6 +29,7 @@ export default function DeleteUser() { }; const closeModal = () => { + setIsOpen(false); clearErrors(); reset(); }; @@ -40,13 +43,14 @@ export default function DeleteUser() {

Please proceed with caution, this cannot be undone.

- - - - - + + + +
Are you sure you want to delete your account? - + Once your account is deleted, all of its resources and data will also be permanently deleted. Please enter your password to confirm you would like to permanently delete your account. @@ -71,19 +75,17 @@ export default function DeleteUser() {
- - - + - + - - + + ); diff --git a/resources/js/components/responsive-modal.tsx b/resources/js/components/responsive-modal.tsx new file mode 100644 index 00000000..0e496568 --- /dev/null +++ b/resources/js/components/responsive-modal.tsx @@ -0,0 +1,31 @@ +import { useIsMobile } from '@/hooks/use-mobile'; + +import { Dialog, DialogContent } from '@/components/ui/dialog'; +import { Drawer, DrawerContent } from '@/components/ui/drawer'; +import React from 'react'; + +interface ResponsiveModalProps { + children: React.ReactNode; + open: boolean; + onOpenChange: (open: boolean) => void; +} + +export const ResponsiveModal = ({ children, onOpenChange, open }: ResponsiveModalProps) => { + const isMobile = useIsMobile(); + + if (isMobile) { + return ( + + +
{children}
+ + + ); + } + + return ( + + {children} + + ); +}; diff --git a/resources/js/components/ui/drawer.tsx b/resources/js/components/ui/drawer.tsx new file mode 100644 index 00000000..94f4329e --- /dev/null +++ b/resources/js/components/ui/drawer.tsx @@ -0,0 +1,130 @@ +import * as React from "react" +import { Drawer as DrawerPrimitive } from "vaul" + +import { cn } from "@/lib/utils" + +function Drawer({ + ...props +}: React.ComponentProps) { + return +} + +function DrawerTrigger({ + ...props +}: React.ComponentProps) { + return +} + +function DrawerPortal({ + ...props +}: React.ComponentProps) { + return +} + +function DrawerClose({ + ...props +}: React.ComponentProps) { + return +} + +function DrawerOverlay({ + className, + ...props +}: React.ComponentProps) { + return ( + + ) +} + +function DrawerContent({ + className, + children, + ...props +}: React.ComponentProps) { + return ( + + + +
+ {children} + + + ) +} + +function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ) +} + +function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ) +} + +function DrawerTitle({ + className, + ...props +}: React.ComponentProps) { + return ( + + ) +} + +function DrawerDescription({ + className, + ...props +}: React.ComponentProps) { + return ( + + ) +} + +export { + Drawer, + DrawerPortal, + DrawerOverlay, + DrawerTrigger, + DrawerClose, + DrawerContent, + DrawerHeader, + DrawerFooter, + DrawerTitle, + DrawerDescription, +} From 1cd7584208a325db429716e7070dba8d0c980bd8 Mon Sep 17 00:00:00 2001 From: impruthvi Date: Thu, 27 Feb 2025 22:08:51 +0530 Subject: [PATCH 2/6] fix: add type attribute to Cancel button in DeleteUser component --- resources/js/components/delete-user.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/js/components/delete-user.tsx b/resources/js/components/delete-user.tsx index 5bcf7dc5..36b9a09b 100644 --- a/resources/js/components/delete-user.tsx +++ b/resources/js/components/delete-user.tsx @@ -74,7 +74,7 @@ export default function DeleteUser() {
- From 8829c6ccb542b07d07bec06f51f507369dc31192 Mon Sep 17 00:00:00 2001 From: impruthvi Date: Thu, 27 Feb 2025 22:23:01 +0530 Subject: [PATCH 3/6] refactor: simplify modal handling in DeleteUser component --- resources/js/components/delete-user.tsx | 29 +++++++++++++++---------- 1 file changed, 18 insertions(+), 11 deletions(-) diff --git a/resources/js/components/delete-user.tsx b/resources/js/components/delete-user.tsx index 36b9a09b..ace023fe 100644 --- a/resources/js/components/delete-user.tsx +++ b/resources/js/components/delete-user.tsx @@ -1,5 +1,5 @@ import { useForm } from '@inertiajs/react'; -import { FormEventHandler, useRef, useState } from 'react'; +import { FormEventHandler, useCallback, useRef, useState } from 'react'; import InputError from '@/components/input-error'; import { ResponsiveModal } from '@/components/responsive-modal'; @@ -16,23 +16,30 @@ export default function DeleteUser() { const { data, setData, delete: destroy, processing, reset, errors, clearErrors } = useForm({ password: '' }); const [isOpen, setIsOpen] = useState(false); + const handleModalClose = useCallback(() => { + setIsOpen(false); + clearErrors(); + reset(); + }, [clearErrors, reset]); + + const handleOpenChange = useCallback( + (open: boolean) => { + if (!open) handleModalClose(); + else setIsOpen(true); + }, + [handleModalClose], + ); + const deleteUser: FormEventHandler = (e) => { e.preventDefault(); destroy(route('profile.destroy'), { preserveScroll: true, - onSuccess: () => closeModal(), + onSuccess: () => handleModalClose(), onError: () => passwordInput.current?.focus(), onFinish: () => reset(), }); }; - - const closeModal = () => { - setIsOpen(false); - clearErrors(); - reset(); - }; - return (
@@ -46,7 +53,7 @@ export default function DeleteUser() { Delete account - +
Are you sure you want to delete your account? @@ -74,7 +81,7 @@ export default function DeleteUser() {
- From 10582dfad2fd7867b5f727a199cac78c40e9e08d Mon Sep 17 00:00:00 2001 From: impruthvi Date: Fri, 28 Feb 2025 10:39:57 +0530 Subject: [PATCH 4/6] fix: add type attribute to Cancel button in DeleteUser component --- resources/js/components/delete-user.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/js/components/delete-user.tsx b/resources/js/components/delete-user.tsx index ace023fe..b2d57cef 100644 --- a/resources/js/components/delete-user.tsx +++ b/resources/js/components/delete-user.tsx @@ -81,7 +81,7 @@ export default function DeleteUser() {
- From 833ba0dd5f436c55a409c84f37a2c5011e73e6d0 Mon Sep 17 00:00:00 2001 From: impruthvi Date: Wed, 5 Mar 2025 10:49:41 +0530 Subject: [PATCH 5/6] Cleanup: Remove redundant CSS rules and comments from app.css --- resources/css/app.css | 15 +-------------- 1 file changed, 1 insertion(+), 14 deletions(-) diff --git a/resources/css/app.css b/resources/css/app.css index 7b0843f7..05129c5b 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -156,17 +156,4 @@ body { @apply bg-background text-foreground; } -} - -/* - ---break--- -*/ - -@layer base { - * { - @apply border-border outline-ring/50; - } - body { - @apply bg-background text-foreground; - } -} +} \ No newline at end of file From bef9af886dce87cdc170c83e85f67d674bb310aa Mon Sep 17 00:00:00 2001 From: impruthvi Date: Wed, 5 Mar 2025 10:51:25 +0530 Subject: [PATCH 6/6] Fix: Add newline at end of file in app.css --- resources/css/app.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/css/app.css b/resources/css/app.css index 05129c5b..d4a1d6f0 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -156,4 +156,4 @@ body { @apply bg-background text-foreground; } -} \ No newline at end of file +}