AlertDialog Component (#448)

Author: kotAPI

.babelrc.json

@@ -15,5 +15,8 @@
                 }
             }
         ]
+    ],
+    "ignore": [
+        "docs/**"
     ]
 }

package-lock.json

@@ -28,7 +28,7 @@ const ColorSelect = ({ color, colorName, changeAccentColor }: ColorSelectProps)
         style={{ width: dimensions, height: dimensions, backgroundColor: color.light['900'] }}></div>;
 };
 
-type SandboxProps = {className: string} & PropsWithChildren
+type SandboxProps = {className?: string} & PropsWithChildren
 
 const SandboxEditor = ({ children, className } : SandboxProps) => {
     const [isDarkMode, setIsDarkMode] = useState(false);

src/components/tools/SandboxEditor/SandboxEditor.tsx

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import AlertDialogRoot from './shards/AlertDialogRoot';
+import AlertDialogContent from './shards/AlertDialogContent';
+import AlertDialogTrigger from './shards/AlertDialogTrigger';
+import AlertDialogPortal from './shards/AlertDialogPortal';
+import AlertDialogOverlay from './shards/AlertDialogOverlay';
+import AlertDialogCancel from './shards/AlertDialogCancel';
+import AlertDialogAction from './shards/AlertDialogAction';
+export type AlertDialogProps = {
+    children: React.ReactNode;
+    content: React.ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+
+const AlertDialog = ({ children, open = false, onOpenChange, content } : AlertDialogProps) => {
+    const [isOpen, setIsOpen] = useState(open);
+    return (
+        <AlertDialogRoot open={isOpen} onOpenChange={onOpenChange} >
+            <AlertDialogTrigger>
+                {children}
+            </AlertDialogTrigger>
+
+            <AlertDialogPortal>
+                <AlertDialogOverlay/>
+                <AlertDialogContent>
+                    {content}
+                    <AlertDialogCancel>
+                        Cancel
+                    </AlertDialogCancel>
+                    <AlertDialogAction>
+                        Action
+                    </AlertDialogAction>
+                </AlertDialogContent>
+
+            </AlertDialogPortal>
+
+        </AlertDialogRoot>
+    );
+};
+
+export default AlertDialog;

src/components/ui/AlertDialog/AlertDialog.tsx

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+export const AlertDialogContext = createContext({
+
+});

src/components/ui/AlertDialog/contexts/AlertDialogContext.tsx

@@ -0,0 +1,18 @@
+import React, { useContext } from 'react';
+import { AlertDialogContext } from '../contexts/AlertDialogContext';
+import ButtonPrimitive from '~/core/primitives/Button';
+
+export type AlertDialogActionProps = {
+    children: React.ReactNode;
+}
+
+const AlertDialogAction = ({ children } : AlertDialogActionProps) => {
+    const { handleOpenChange } = useContext(AlertDialogContext);
+    return (
+        <ButtonPrimitive onClick={() => handleOpenChange(false)}>
+            {children}
+        </ButtonPrimitive>
+    );
+};
+
+export default AlertDialogAction;

src/components/ui/AlertDialog/shards/AlertDialogAction.tsx

@@ -0,0 +1,18 @@
+import React, { useContext } from 'react';
+import { AlertDialogContext } from '../contexts/AlertDialogContext';
+import ButtonPrimitive from '~/core/primitives/Button';
+
+export type AlertDialogCancelProps = {
+    children: React.ReactNode;
+}
+
+const AlertDialogCancel = ({ children } : AlertDialogCancelProps) => {
+    const { handleOpenChange } = useContext(AlertDialogContext);
+    return (
+        <ButtonPrimitive onClick={() => handleOpenChange(false)}>
+            {children}
+        </ButtonPrimitive>
+    );
+};
+
+export default AlertDialogCancel;

src/components/ui/AlertDialog/shards/AlertDialogCancel.tsx

@@ -0,0 +1,22 @@
+import React, { useContext } from 'react';
+import { AlertDialogContext } from '../contexts/AlertDialogContext';
+
+export type AlertDialogContentProps = {
+    children: React.ReactNode;
+}
+
+const AlertDialogContent = ({ children } : AlertDialogContentProps) => {
+    const { isOpen, rootClass } = useContext(AlertDialogContext);
+
+    return (
+        <>
+            {isOpen && (
+                <div className={`${rootClass}-content`}>
+                    {children}
+                </div>
+            )}
+        </>
+    );
+};
+
+export default AlertDialogContent;

src/components/ui/AlertDialog/shards/AlertDialogContent.tsx

@@ -0,0 +1,19 @@
+import React, { useContext } from 'react';
+import Floater from '~/core/primitives/Floater';
+import { AlertDialogContext } from '../contexts/AlertDialogContext';
+
+const AlertDialogOverlay = () => {
+    const { isOpen, rootClass, handleOverlayClick } = useContext(AlertDialogContext);
+    return (
+        <>
+            {isOpen && (
+                <Floater.Overlay
+                    className={`${rootClass}-overlay`} onClick={handleOverlayClick}>
+
+                </Floater.Overlay>
+            )}
+        </>
+    );
+};
+
+export default AlertDialogOverlay;

src/components/ui/AlertDialog/shards/AlertDialogOverlay.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import Floater from '~/core/primitives/Floater';
+
+export type AlertDialogPortalProps = {
+    children: React.ReactNode;
+}
+
+const AlertDialogPortal = ({ children } : AlertDialogPortalProps) => {
+    return (
+        <Floater.Portal>
+            {children}
+        </Floater.Portal>
+    );
+};
+
+export default AlertDialogPortal;