AlertDialog Component

.babelrc.json

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

src/components/tools/SandboxEditor/SandboxEditor.tsx

@@ -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/ui/AlertDialog/AlertDialog.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/contexts/AlertDialogContext.tsx

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

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 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/AlertDialogCancel.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/AlertDialogContent.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/AlertDialogOverlay.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/AlertDialogPortal.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;

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

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import { customClassSwitcher } from '~/core';
+import { AlertDialogContext } from '../contexts/AlertDialogContext';
+
+import Floater from '~/core/primitives/Floater';
+
+export type AlertDialogRootProps = {
+    children: React.ReactNode;
+    customRootClass?: string;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onClickOutside: () => void;
+}
+
+const COMPONENT_NAME = 'AlertDialog';
+
+const AlertDialogRoot = ({ children, customRootClass = '', open, onOpenChange, onClickOutside } : AlertDialogRootProps) => {
+    const { context: floaterContext } = Floater.useFloating();
+    const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
+    const [isOpen, setIsOpen] = useState(open);
+
+    const handleOpenChange = (open: boolean) => {
+        setIsOpen(open);
+        onOpenChange(open);
+    };
+
+    const handleOverlayClick = () => {
+        onClickOutside();
+    };
+
+    const props = { isOpen, handleOpenChange, floaterContext, rootClass, handleOverlayClick };
+    return (
+        <AlertDialogContext.Provider value={props}>
+            <div className={rootClass}>
+                {children}
+            </div>
+        </AlertDialogContext.Provider>
+    );
+};
+
+AlertDialogRoot.displayName = COMPONENT_NAME;
+export default AlertDialogRoot;

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

@@ -0,0 +1,20 @@
+import React, { useContext } from 'react';
+
+import ButtonPrimitive from '~/core/primitives/Button';
+import { AlertDialogContext } from '../contexts/AlertDialogContext';
+
+export type AlertDialogTriggerProps = {
+    children: React.ReactNode;
+}
+
+const AlertDialogTrigger = ({ children, ...props } : AlertDialogTriggerProps) => {
+    const { isOpen, handleOpenChange, floaterContext } = useContext(AlertDialogContext);
+
+    return (
+        <ButtonPrimitive onClick={() => handleOpenChange(true)} {...props}>
+            {children}
+        </ButtonPrimitive>
+    );
+};
+
+export default AlertDialogTrigger;

src/components/ui/AlertDialog/stories/AlertDialog.stories.tsx

@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+
+// import Button from '@/rad-';
+import AlertDialog from '../AlertDialog';
+import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+    title: 'UI/Data-Display/AlertDialog',
+    component: AlertDialog,
+    render: (args:any) => {
+        const [isOpen, setIsOpen] = useState(false);
+
+        const handleOpenChange = (open: boolean) => {
+            console.log('open', open);
+            setIsOpen(open);
+        };
+
+        return (
+            <SandboxEditor>
+                <AlertDialog
+                    open={isOpen}
+                    onOpenChange={handleOpenChange}
+                    {...args} content={
+                        <div className="flex flex-col gap-4 ">
+                            <h2 className="text-lg font-bold">Are you sure you want to delete this item?</h2>
+                            <div>
+                                <p>This action cannot be undone.</p>
+                            </div>
+                        </div>
+                    } />
+            </SandboxEditor>
+        );
+    }
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Default = {
+    args: {
+        children: 'This is trigger',
+        actionButton: <button>Delete</button>
+    }
+};

src/core/primitives/Floater/index.tsx

@@ -0,0 +1,10 @@
+import { FloatingOverlay, FloatingPortal, FloatingFocusManager, useFloating } from '@floating-ui/react';
+
+const Floater = {
+    Portal: FloatingPortal,
+    Overlay: FloatingOverlay,
+    FocusManager: FloatingFocusManager,
+    useFloating
+};
+
+export default Floater;

styles/themes/components/alert-dialog.scss

@@ -0,0 +1,19 @@
+.rad-ui-alert-dialog-overlay {  
+        z-index: 50;
+        background-color: rgba(0, 0, 0, 0.8);
+}
+
+.rad-ui-alert-dialog-content {
+    padding: 16px;
+    border-radius: 8px;
+    background-color: white;
+    color: black;
+   width: 100%;
+   max-width: 800px;
+   margin: 10px auto;
+   position: fixed;
+   left: 50%;
+   top: 50%;
+   transform: translate(-50%, -50%);
+   z-index: 50;
+}

styles/themes/default.scss

@@ -1,4 +1,5 @@
 @import "./components/accordion.scss";
+@import "./components/alert-dialog.scss";
 @import "./components/avatar.scss";
 @import "./components/badge.scss";
 @import "./components/blockquote.scss";

tsconfig.json

@@ -19,6 +19,6 @@
       }
     },
     "include": ["src/**/*"],
-    "exclude": ["node_modules", "dist", "build"]
+    "exclude": ["node_modules", "dist", "build","docs"]
   }