@myzbox/react-overlay 1.0.0

package/src/components/toast/ToastProvider.tsx

@@ -0,0 +1,71 @@
+import React, { createContext, useState, type ReactNode, useCallback } from 'react';
+import { Toast } from './Toast';
+import type { ToastOptions, ToastPosition } from '../../types/Toast';
+import styles from '../../styles/Toast.module.css';
+import classNames from 'classnames';
+
+interface ToastContextProps {
+    addToast: (options: Omit<ToastOptions, 'id'> & { closeOthers?: boolean }) => void;
+    removeToast: (id: string) => void;
+    clearAll: () => void;
+}
+
+export const ToastContext = createContext<ToastContextProps | undefined>(undefined);
+
+let idCounter = 0;
+
+export const ToastProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+    const [toasts, setToasts] = useState<ToastOptions[]>([]);
+
+    const addToast = useCallback(({ closeOthers, delay = 0, ...options }: Omit<ToastOptions, 'id'> & { closeOthers?: boolean }) => {
+        const id = `toast-${idCounter++}`;
+        const newToast = { ...options, duration: options.duration, delay, id };
+
+        const dispatch = () => {
+            setToasts((prev) => {
+                if (closeOthers) {
+                    return [newToast];
+                }
+                return [...prev, newToast];
+            });
+        };
+
+        if (delay > 0) {
+            setTimeout(dispatch, delay);
+        } else {
+            dispatch();
+        }
+    }, []);
+
+    const removeToast = useCallback((id: string) => {
+        setToasts((prev) => prev.filter((t) => t.id !== id));
+    }, []);
+
+    const clearAll = useCallback(() => {
+        setToasts([]);
+    }, []);
+
+    // Group toasts by position to render different containers
+    const toastsByPosition = toasts.reduce((acc, toast) => {
+        const pos = toast.position || 'top-right';
+        if (!acc[pos]) acc[pos] = [];
+        acc[pos].push(toast);
+        return acc;
+    }, {} as Record<ToastPosition, ToastOptions[]>);
+
+    return (
+        <ToastContext.Provider value={{ addToast, removeToast, clearAll }}>
+            {children}
+            {(Object.keys(toastsByPosition) as ToastPosition[]).map((pos) => (
+                <div key={pos} className={classNames(styles.container, styles[pos])}>
+                    {toastsByPosition[pos].map((toast) => (
+                        <Toast key={toast.id} {...toast} onDismiss={removeToast} />
+                    ))}
+                </div>
+            ))}
+        </ToastContext.Provider>
+    );
+};
+
+export default ToastProvider;
+

package/src/components/toast/index.ts

@@ -0,0 +1,3 @@
+export * from './Toast';
+export * from './ToastProvider';
+export * from './useToast';

package/src/components/toast/useToast.ts

@@ -0,0 +1,48 @@
+import { useContext } from 'react';
+import { ToastContext } from './ToastProvider';
+import type { ToastOptions } from '../../types/Toast';
+
+type ToastInput = React.ReactNode | (Omit<ToastOptions, 'id' | 'type'> & { content: React.ReactNode });
+
+export const useToast = () => {
+    const context = useContext(ToastContext);
+
+    if (!context) {
+        throw new Error('useToast must be used within a ToastProvider');
+    }
+
+    const { addToast, removeToast, clearAll } = context;
+
+    const show = (type: ToastOptions['type'], input: ToastInput, options: Partial<ToastOptions> & { closeOthers?: boolean } = {}) => {
+        let content: React.ReactNode;
+        let finalOptions = { ...options };
+
+        if (typeof input === 'object' && input !== null && 'content' in input && !React.isValidElement(input)) {
+            // Handle case where input object contains content and options
+            const inputObj = input as Record<string, unknown>;
+            content = inputObj.content as React.ReactNode;
+            finalOptions = { ...finalOptions, ...inputObj } as Partial<ToastOptions> & { closeOthers?: boolean };
+        } else {
+            content = input as React.ReactNode;
+        }
+
+        addToast({
+            type,
+            content,
+            duration: 3000,
+            position: 'top-right',
+            ...finalOptions,
+        });
+    };
+
+    return {
+        success: (content: React.ReactNode, options?: Partial<ToastOptions> & { closeOthers?: boolean }) => show('success', content, options),
+        error: (content: React.ReactNode, options?: Partial<ToastOptions> & { closeOthers?: boolean }) => show('error', content, options),
+        warning: (content: React.ReactNode, options?: Partial<ToastOptions> & { closeOthers?: boolean }) => show('warning', content, options),
+        info: (content: React.ReactNode, options?: Partial<ToastOptions> & { closeOthers?: boolean }) => show('info', content, options),
+        dismiss: (id: string) => removeToast(id),
+        dismissAll: () => clearAll(),
+    };
+};
+
+import React from 'react'; // fix for React usage in type check above

package/src/components/tooltip/Tooltip.tsx

@@ -0,0 +1,52 @@
+import React, { useState, useRef } from 'react';
+import type { TooltipProps } from '../../types/Tooltip';
+import styles from '../../styles/Tooltip.module.css';
+import classNames from 'classnames';
+
+export const Tooltip: React.FC<TooltipProps> = ({
+    children,
+    content,
+    position = 'top',
+    delay = 200,
+    width,
+    height,
+    className,
+    style,
+}) => {
+    const [isVisible, setIsVisible] = useState(false);
+    const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    const showTooltip = () => {
+        timeoutRef.current = setTimeout(() => {
+            setIsVisible(true);
+        }, delay);
+    };
+
+    const hideTooltip = () => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        setIsVisible(false);
+    };
+
+    return (
+        <div
+            className={styles.wrapper}
+            onMouseEnter={showTooltip}
+            onMouseLeave={hideTooltip}
+            onFocus={showTooltip}
+            onBlur={hideTooltip}
+        >
+            {children}
+            {isVisible && (
+                <div
+                    className={classNames(styles.tooltip, styles[position], className)}
+                    style={{ width, height, ...style }}
+                    role="tooltip"
+                >
+                    {content}
+                </div>
+            )}
+        </div>
+    );
+};

package/src/hooks/useClickOutside.ts

@@ -0,0 +1,24 @@
+import { useEffect, type RefObject } from 'react';
+
+export const useClickOutside = (
+    ref: RefObject<HTMLElement>,
+    handler: (event: MouseEvent | TouchEvent) => void
+) => {
+    useEffect(() => {
+        const listener = (event: MouseEvent | TouchEvent) => {
+            // Do nothing if clicking ref's element or descendent elements
+            if (!ref.current || ref.current.contains(event.target as Node)) {
+                return;
+            }
+            handler(event);
+        };
+
+        document.addEventListener('mousedown', listener);
+        document.addEventListener('touchstart', listener);
+
+        return () => {
+            document.removeEventListener('mousedown', listener);
+            document.removeEventListener('touchstart', listener);
+        };
+    }, [ref, handler]);
+};

package/src/hooks/useDraggable.ts

@@ -0,0 +1,75 @@
+import React, { useRef, useEffect, type RefObject, useCallback } from 'react';
+
+export const useDraggable = (
+    enabled: boolean,
+    elementRef: RefObject<HTMLElement>
+) => {
+    const isDragging = useRef(false);
+    const dragStart = useRef({ x: 0, y: 0 });
+    const translate = useRef({ x: 0, y: 0 });
+
+    const onMouseMove = useCallback((e: globalThis.MouseEvent) => {
+        if (!isDragging.current || !elementRef.current) return;
+
+        const dx = e.clientX - dragStart.current.x;
+        const dy = e.clientY - dragStart.current.y;
+
+        const currentX = translate.current.x + dx;
+        const currentY = translate.current.y + dy;
+
+        elementRef.current.style.transform = `translate(${currentX}px, ${currentY}px)`;
+    }, [elementRef]);
+
+    const onMouseUp = useCallback((e: globalThis.MouseEvent) => {
+        if (!isDragging.current) return;
+        isDragging.current = false;
+
+        const dx = e.clientX - dragStart.current.x;
+        const dy = e.clientY - dragStart.current.y;
+
+        translate.current = {
+            x: translate.current.x + dx,
+            y: translate.current.y + dy
+        };
+
+        // Re-enable transition
+        if (elementRef.current) {
+            elementRef.current.style.transition = '';
+        }
+
+        document.body.style.userSelect = '';
+        window.removeEventListener('mousemove', onMouseMove);
+        window.removeEventListener('mouseup', onMouseUp);
+    }, [elementRef, onMouseMove]);
+
+    const onMouseDown = (e: React.MouseEvent) => {
+        if (!enabled || !elementRef.current) return;
+
+        isDragging.current = true;
+        dragStart.current = { x: e.clientX, y: e.clientY };
+
+        // Disable transition for instant follow
+        elementRef.current.style.transition = 'none';
+
+        document.body.style.userSelect = 'none';
+        window.addEventListener('mousemove', onMouseMove);
+        window.addEventListener('mouseup', onMouseUp);
+    };
+
+    useEffect(() => {
+        const cleanup = () => {
+            window.removeEventListener('mousemove', onMouseMove);
+            window.removeEventListener('mouseup', onMouseUp);
+        };
+        return cleanup;
+    }, [onMouseMove, onMouseUp]);
+
+    // Reset position if disabled
+    useEffect(() => {
+        if (!enabled) {
+            translate.current = { x: 0, y: 0 };
+        }
+    }, [enabled]);
+
+    return { onMouseDown };
+};

package/src/hooks/useModal.ts

@@ -0,0 +1,23 @@
+import { useState, useCallback } from 'react';
+
+export interface UseModalReturn {
+    isOpen: boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+}
+
+export const useModal = (initialState = false): UseModalReturn => {
+    const [isOpen, setIsOpen] = useState(initialState);
+
+    const open = useCallback(() => setIsOpen(true), []);
+    const close = useCallback(() => setIsOpen(false), []);
+    const toggle = useCallback(() => setIsOpen((prev) => !prev), []);
+
+    return {
+        isOpen,
+        open,
+        close,
+        toggle,
+    };
+};

package/src/index.ts

@@ -0,0 +1,8 @@
+export * from './components';
+export * from './hooks/useModal';
+export * from './hooks/useDraggable';
+export * from './hooks/useClickOutside';
+export * from './types/Modal';
+export * from './types/Toast';
+export * from './types/Popover';
+export * from './types/Tooltip';

package/src/styles/Modal.module.css

@@ -0,0 +1,314 @@
+:root {
+  --rm-overlay-bg: rgba(0, 0, 0, 0.5);
+  --rm-modal-bg: #ffffff;
+  --rm-modal-shadow:
+    0 4px 6px rgba(0, 0, 0, 0.1), 0 10px 15px rgba(0, 0, 0, 0.1);
+  --rm-text-color: #374151;
+  --rm-title-color: #111827;
+  --rm-border-color: #e5e7eb;
+  --rm-close-color: #374151;
+  --rm-close-hover-bg: #f3f4f6;
+  --rm-close-hover-color: #111827;
+  --rm-footer-bg: #f9fafb;
+}
+
+.overlay {
+  box-sizing: border-box;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: var(--rm-overlay-bg);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+  pointer-events: none;
+}
+
+.overlay.open {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* Positions */
+.overlay.center {
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+}
+
+.overlay.top {
+  align-items: flex-start;
+  padding-top: 2rem;
+  box-sizing: border-box;
+}
+
+.overlay.bottom {
+  align-items: flex-end;
+  padding-bottom: 2rem;
+}
+
+.overlay.left {
+  justify-content: flex-start;
+  height: 100vh;
+  box-sizing: border-box;
+}
+
+.overlay.right {
+  justify-content: flex-end;
+  height: 100vh;
+}
+
+.overlay.top-left {
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding: 2rem;
+  box-sizing: border-box;
+}
+
+.overlay.top-right {
+  justify-content: flex-end;
+  align-items: flex-start;
+  padding: 2rem;
+  box-sizing: border-box;
+}
+
+.overlay.bottom-left {
+  justify-content: flex-start;
+  align-items: flex-end;
+  padding: 2rem;
+  box-sizing: border-box;
+}
+
+.overlay.bottom-right {
+  justify-content: flex-end;
+  align-items: flex-end;
+  padding: 2rem;
+  box-sizing: border-box;
+}
+
+.modal {
+  box-sizing: border-box;
+  background: var(--rm-modal-bg);
+  border-radius: 8px;
+  box-shadow: var(--rm-modal-shadow);
+  width: 100%;
+  max-width: 100%;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+  opacity: 0;
+  transform: scale(0.95);
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.modal *,
+.modal *::before,
+.modal *::after {
+  box-sizing: border-box;
+}
+
+.modal.open {
+  opacity: 1;
+  transform: scale(1);
+  animation: openScale 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Sizes */
+.modal.sm {
+  width: 400px;
+}
+
+.modal.md {
+  width: 600px;
+}
+
+.modal.lg {
+  width: 800px;
+}
+
+.modal.xl {
+  width: 1140px;
+}
+
+.modal.full {
+  width: 98vw;
+  height: 96vh;
+  max-height: 96vh;
+  border-radius: 8px;
+}
+
+.modal.auto {
+  width: auto;
+}
+
+@keyframes openScale {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* Animations */
+.modal.slide-up {
+  transform: translateY(20px);
+}
+
+.modal.slide-up.open {
+  transform: translateY(0);
+}
+
+.modal.slide-down {
+  transform: translateY(-20px);
+}
+
+.modal.slide-down.open {
+  transform: translateY(0);
+}
+
+.modal.fade {
+  transform: none;
+}
+
+.modal.fade.open {
+  transform: none;
+}
+
+.modal.slide-left {
+  transform: translateX(-20px);
+}
+
+.modal.slide-left.open {
+  transform: translateX(0);
+}
+
+.modal.slide-right {
+  transform: translateX(20px);
+}
+
+.modal.slide-right.open {
+  transform: translateX(0);
+}
+
+/* Drawer Animations */
+.modal.drawer-slide-right {
+  transform: translateX(100%);
+}
+
+.modal.drawer-slide-right.open {
+  transform: translateX(0);
+}
+
+.modal.drawer-slide-left {
+  transform: translateX(-100%);
+}
+
+.modal.drawer-slide-left.open {
+  transform: translateX(0);
+}
+
+.modal.drawer-slide-up {
+  transform: translateY(100%);
+}
+
+.modal.drawer-slide-up.open {
+  transform: translateY(0);
+}
+
+.modal.drawer-slide-down {
+  transform: translateY(-100%);
+}
+
+.modal.drawer-slide-down.open {
+  transform: translateY(0);
+}
+
+.header {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid var(--rm-border-color);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.header.draggable {
+  cursor: move;
+  user-select: none;
+}
+
+.title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--rm-title-color);
+  margin: 0;
+}
+
+.closeButton {
+  box-sizing: border-box;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  color: var(--rm-close-color);
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: -4px;
+  background-color: transparent;
+}
+
+.closeButton:hover {
+  color: var(--rm-close-hover-color);
+  transform: scale(1.15);
+}
+
+.closeButton:active {
+  transform: scale(0.95);
+}
+
+.closeButton svg {
+  width: 16px;
+  height: 16px;
+  stroke: currentColor;
+  stroke-width: 3;
+  display: block;
+  transition: transform 0.2s;
+}
+
+.content {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 1.5rem;
+  overflow-y: auto;
+  flex: 1;
+  color: var(--rm-text-color);
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
+.footer {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 1rem 1.5rem;
+  border-top: 1px solid var(--rm-border-color);
+  background-color: var(--rm-footer-bg);
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+}