@dashadmin/dash-components 1.3.24 → 1.3.26

package/src/components/notifications/index.ts

@@ -0,0 +1,42 @@
+/**
+ * Notifications Components
+ * 
+ * A comprehensive notification system for React applications
+ * Includes toast notifications, notification menus, and draggable dialog notifications
+ */
+
+export {
+    // Main Component
+    NotificationsCenter,
+    
+    // Sub-components
+    NotificationButton,
+    NotificationsMenu,
+    NotificationMenuItem,
+    ToastNotificationsStack,
+    DraggableNotificationDialog,
+    
+    // Hook
+    useNotificationsCenter,
+    
+    // Utilities
+    formatTimeAgo,
+    generateNotificationId,
+    
+    // Types
+    type NotificationData,
+    type ToastNotification,
+    type DialogNotification,
+    type NotificationsCenterConfig,
+    type NotificationsCenterLabels,
+    type NotificationsCenterIcons,
+    type NotificationButtonProps,
+    type NotificationsMenuProps,
+    type NotificationMenuItemProps,
+    type ToastNotificationsStackProps,
+    type DraggableNotificationDialogProps,
+    type NotificationsCenterProps,
+    type UseNotificationsCenterReturn,
+} from './NotificationsCenter';
+
+export { default } from './NotificationsCenter';

package/src/components/tables/PaginationComponent.tsx

@@ -0,0 +1,17 @@
+import {  Pagination, PaginationProps } from 'react-admin';
+import { FC } from 'react';
+import React from 'react';
+import { Portal } from '@mui/material';
+
+const PaginationComponent:FC<PaginationProps> = (props) => {
+		return <div
+			className='dash-pagination-component'
+		>
+			<Pagination
+				rowsPerPageOptions={[10,25, 50, 100, 250, 500, 1000]}
+				{...props}
+			/>
+		</div>
+}
+
+export default PaginationComponent;

package/src/components/theme/AppLoadingFallback.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+export interface AppLoadingFallbackProps {
+  message?: string;
+}
+
+const AppLoadingFallback: React.FC<AppLoadingFallbackProps> = ({ message = "Loading..." }) => (
+  <div 
+    style={{
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
+      minHeight: '100vh',
+      gap: '16px',
+      background: 'linear-gradient(to bottom, var(--bodybg-primary), var(--bodybg-secondary))',
+      color: 'var(--text-color, @text-color--dark)'
+    }}
+  >
+    <div 
+      style={{
+        width: '60px',
+        height: '60px',
+        border: '4px solid rgba(255, 255, 255, 0.3)',
+        borderTop: '4px solid #ffffff',
+        borderRadius: '50%',
+        animation: 'spin 1s linear infinite'
+      }}
+    />
+    <h6 style={{ margin: 0, fontSize: '1.25rem', fontWeight: 500 }}>
+      {message}
+    </h6>
+    <style>{`
+      @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+      }
+    `}</style>
+  </div>
+);
+
+export default AppLoadingFallback;

package/src/components/theme/ErrorBoundary.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+
+interface ErrorBoundaryState {
+    hasError: boolean;
+    error?: Error;
+}
+
+class ErrorBoundary extends React.Component<{ children: React.ReactNode }, ErrorBoundaryState> {
+    constructor(props: { children: React.ReactNode }) {
+        super(props);
+        this.state = { hasError: false };
+    }
+
+    static getDerivedStateFromError(error: Error) {
+        return { hasError: true, error };
+    }
+
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+        console.error('Error:', error, errorInfo);
+    }
+
+    render() {
+        if (this.state.hasError) {
+            return (
+                <div style={{
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    height: '100vh',
+                    backgroundColor: '#121212',
+                    color: '#ffffff',
+                    flexDirection: 'column',
+                    gap: '20px'
+                }}>
+                    <h2>Error</h2>
+                    <p>{this.state.error?.message}</p>
+                    <button 
+                        onClick={() => window.location.reload()}
+                        style={{
+                            padding: '10px 20px',
+                            backgroundColor: '#007bff',
+                            color: 'white',
+                            border: 'none',
+                            borderRadius: '4px',
+                            cursor: 'pointer'
+                        }}
+                    >
+                        Reload Page
+                    </button>
+                </div>
+            );
+        }
+        return this.props.children;
+    }
+}
+
+export default ErrorBoundary;

package/src/components/theme/InitialLoader.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+const InitialLoader: React.FC = () => (
+    <div style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: '100vh',
+        background: 'linear-gradient(to bottom, var(--bodybg-primary), var(--bodybg-secondary))',
+        color: 'var(--text-color, @text-color--dark)'
+    }}>
+        <div>Loading...</div>
+    </div>
+);
+
+export default InitialLoader;

package/src/components/theme/NotFound.tsx

@@ -0,0 +1,124 @@
+import * as React from 'react';
+import {
+	TitleComponent,
+} from 'react-admin';
+
+import { Button } from '@mui/material';
+import  ErrorOutline  from '@mui/icons-material/ErrorOutline'
+import { useNavigate } from 'react-router';
+
+
+function goBack() {
+	window.history.go(-1);
+}
+
+const sanitizeRestProps = ({
+	staticContext,
+	history,
+	location,
+	match,
+	...rest
+}) => rest;
+
+// 🆕 Enhanced interface with new optional props
+interface NotFoundProps {
+	title?: TitleComponent;
+	time?: number;
+	redirect?: string | null;
+	disableCountdown?: boolean; // 🆕 Disable countdown functionality
+	disableGoBack?: boolean;    // 🆕 Disable go back button
+	customMessage?: string;     // 🆕 Optional custom message
+	customButtonText?: string;  // 🆕 Optional custom button text
+}
+
+const NotFound /* :CatchAllComponent */ = (props: NotFoundProps) => {
+	const { 
+		title, 
+		time = false, 
+		redirect = null,
+		disableCountdown = false,  // 🆕 Default to false (countdown enabled)
+		disableGoBack = false,     // 🆕 Default to false (go back enabled)
+		customMessage,             // 🆕 Optional custom message
+		customButtonText,          // 🆕 Optional custom button text
+		...rest 
+	} = props;
+	
+    const [countdown, setCountdown] = React.useState<number>(time || 0);
+    const navigate = useNavigate();
+    
+    // 🆕 Only setup countdown if not disabled and time is provided
+    React.useEffect(() => {
+        if (!disableCountdown && typeof time === 'number' && time > 0) {
+            const timer = setInterval(() => {
+                setCountdown((prev) => {
+                    if (prev <= 1) {
+                        const currentPath = window.location.pathname;
+                        navigate(`${redirect || '/'}?redirect=${encodeURIComponent(currentPath)}`);
+                        return 0;
+                    }
+                    return prev - 1;
+                });
+            }, 1000);
+            return () => clearInterval(timer);
+        }
+    }, [time, navigate, redirect, disableCountdown]);
+
+    React.useEffect(() => {
+       //DASHAuthenticationService.setPendingRedirect(window.location.pathname);
+    });
+
+    // 🆕 Determine if countdown should be shown
+    const shouldShowCountdown = !disableCountdown && time && time > 0;
+    
+    // 🆕 Determine button text and action
+    const getButtonConfig = () => {
+        if (disableGoBack) {
+            return null; // No button
+        }
+        
+        return {
+            text: customButtonText || 'Aceptar',
+            action: goBack
+        };
+    };
+
+    const buttonConfig = getButtonConfig();
+	
+	return (
+		<div
+			className={'dash-app-module not-found'}
+			{...sanitizeRestProps(rest as any)}
+		>
+			<div className='dash-app-notfound'>
+				<div className='dash-app-notfound-img'>
+                    <ErrorOutline sx={{ fontSize: 300 }} />
+				</div>
+				<div className='dash-app-notfound-content'>
+					<h1>Oops!</h1>
+					<span>
+						{customMessage || 'No encontramos este enlace.'}
+					</span>
+                    
+                    {/* 🆕 Conditional countdown display */}
+                    {shouldShowCountdown && (
+                        <p style={{ fontSize: '0.9em', color: '#666' }}>
+                            Serás redirigido en {countdown} segundos...
+                        </p>
+                    )}
+                    
+                    {/* 🆕 Conditional button display */}
+                    {buttonConfig && (
+                        <Button
+                            color={'primary'}
+                            onClick={buttonConfig.action}
+                        >
+                            {buttonConfig.text}
+                        </Button>
+                    )}
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default NotFound;

package/src/components/theme/NotResults.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { Card, CardContent, Typography } from '@mui/material';
+import InfoIcon from '@mui/icons-material/Info';
+
+export interface INoResults extends React.PropsWithChildren {
+    title?: string;
+    description?: string;
+}
+
+const NoResults: React.FC<INoResults> = React.memo((props) => {
+    const { title, description, children } = props;
+
+    // Memoize styles to prevent recalculation on every render
+    const styles = React.useMemo(() => ({
+        card: { p: 0 },
+        cardContent: { 
+            display: 'flex', 
+            flexDirection: 'column', 
+            alignItems: 'left', 
+            gap: 2 
+        },
+        header: { 
+            display: 'flex', 
+            alignItems: 'center', 
+            gap: 2 
+        },
+        icon: { fontSize: 32 }
+    }), []);
+
+    React.useEffect(() => {
+        console.log("Reloaded");
+    },[])
+
+    return (
+        <Card sx={styles.card}>
+            <CardContent sx={styles.cardContent}>
+                <div style={styles.header}>
+                    <InfoIcon sx={styles.icon} />
+                    {title && <Typography variant="h5">{title}</Typography>}
+                </div>
+                {description && (
+                    <Typography variant="body1" color="text.secondary">
+                        {description}
+                    </Typography>
+                )}
+                {children}
+            </CardContent>
+        </Card>
+    );
+});
+
+NoResults.displayName = 'NoResults';
+
+export default NoResults;

package/src/hooks/useDraggable.ts

@@ -0,0 +1,11 @@
+/**
+ * @deprecated Import from 'dash-utils' instead
+ * Re-exported for backward compatibility
+ */
+export {
+    useDraggable,
+    type DraggablePosition,
+    type UseDraggableOptions,
+    type UseDraggableReturn
+} from 'dash-utils';
+

package/src/hooks/useNotifications.ts

@@ -0,0 +1,14 @@
+/**
+ * @deprecated Import from 'dash-utils' instead
+ * Re-exported for backward compatibility
+ */
+export {
+    useNotifications,
+    type ProcessedNotification,
+    type ToastNotification,
+    type DialogNotification,
+    type UseNotificationsOptions,
+    type UseNotificationsReturn
+} from 'dash-utils';
+
+export { useNotifications as default } from 'dash-utils';

package/src/hooks/useQuickSearch.tsx

@@ -0,0 +1,29 @@
+import React, { useState } from 'react';
+
+const useQuickSearch = () => {
+	const quickSearchUseState = useState<string>(null);
+
+	const sendQuickSearchEvent = (quickSearchString: string) => {
+		window.dispatchEvent(
+			new MessageEvent('quickSearch', { data: { value: quickSearchString } }),
+		);
+	};
+
+	const eventHook = (e: any) => {
+		quickSearchUseState[1](e.data.value);
+	};
+
+	React.useEffect(() => {
+		window.addEventListener('quickSearch', eventHook);
+		return () => {
+			window.removeEventListener('quickSearch', eventHook);
+		};
+	}, []);
+
+	return {
+		quickSearchUseState: quickSearchUseState,
+		sendQuickSearchEvent: sendQuickSearchEvent,
+	};
+};
+
+export default useQuickSearch;

package/src/index.tsx

@@ -0,0 +1,77 @@
+export { default as PackageRadioButtonGroup } from './components/custom/PackageRadioButtonGroup';
+export { default as PackageCopyMethod } from './components/custom/PackageCopyMethod';
+export { default as NotResults } from './components/theme/NotResults';
+export { default as NotFound } from './components/theme/NotFound';
+export { default as QuickSearch } from './components/dialog/QuickSearch';
+
+export { default as PaginationComponent } from './components/tables/PaginationComponent';
+
+export { default as AutocompleteCheckBoxArrayInput } from './components/AutoCompleteArrayInput/AutocompleteCheckBoxArrayInput';
+export { default as AutoCompleteCheckBoxInput } from './components/AutoCompleteArrayInput/AutoCompleteCheckBoxInput';
+export { default as AutocompleteCheckBoxArrayInputAutoSearch } from './components/AutoCompleteArrayInputAutoSearch/AutocompleteCheckBoxArrayInput';
+export { default as AutoCompleteCheckBoxInputAutoSearch } from './components/AutoCompleteArrayInputAutoSearch/AutoCompleteCheckBoxInput';
+// TODO: AutocompleteCheckBoxArrayAutoSearch.tsx.wip
+export { default as SortableDatagrid } from './components/SortableDataGrid/SortableDataGrid';
+
+export { default as SearchableSelectCheckboxes } from './components/SearchableSelects/SearchableSelectCheckboxes';
+export { default as SingleImageUploader } from './components/Upload/SingleImageUploader' 
+export { default as ListActive } from './components/ListActive/ListActive';
+
+// Custom Components
+
+export { default as JsonColorSelector } from './components/JsonColorSelector/JsonColorSelector'
+export { default as JsonColorSelectorEnhanced } from './components/JsonColorSelector/JsonColorSelectorEnhanced'
+//export { default as useAsyncColorThief } from ''
+export { default as Json } from './components/Json/Json'
+export { default as JsonCssVarValues } from './components/JsonColorSelector/JsonCssVarValues'
+export { default as NotificationPreferences } from './components/NotificationPreferences/NotificationPreferences'
+
+// Audit Log Component
+export { AuditLog } from './components/AuditLog';
+export type { AuditLogProps, ActivityLogRecord } from './components/AuditLog';
+
+// Notifications Components
+export {
+    NotificationsCenter,
+    NotificationButton,
+    NotificationsMenu,
+    NotificationMenuItem,
+    ToastNotificationsStack,
+    DraggableNotificationDialog,
+    useNotificationsCenter,
+    formatTimeAgo,
+    generateNotificationId,
+} from './components/notifications';
+
+export type {
+    NotificationData,
+    ToastNotification as NotificationToast,
+    DialogNotification as NotificationDialog,
+    NotificationsCenterConfig,
+    NotificationsCenterLabels,
+    NotificationsCenterIcons,
+    NotificationButtonProps,
+    NotificationsMenuProps,
+    NotificationMenuItemProps,
+    ToastNotificationsStackProps,
+    DraggableNotificationDialogProps,
+    NotificationsCenterProps,
+    UseNotificationsCenterReturn,
+} from './components/notifications';
+
+// Hooks - Re-exported from dash-utils for backward compatibility
+// @deprecated Import directly from 'dash-utils' instead
+export { useDraggable } from './hooks/useDraggable';
+export type { DraggablePosition, UseDraggableOptions, UseDraggableReturn } from './hooks/useDraggable';
+
+export { useNotifications } from './hooks/useNotifications';
+export type {
+    ProcessedNotification,
+    ToastNotification,
+    DialogNotification,
+    UseNotificationsOptions,
+    UseNotificationsReturn
+} from './hooks/useNotifications';
+
+export { useQuickSearch } from 'dash-utils';
+export type { UseQuickSearchReturn } from 'dash-utils';

package/src/utils/setNativeValue.tsx

@@ -0,0 +1,23 @@
+const setNativeValue = (element, value) => {
+  
+  if(!element) {
+    return;
+  }
+
+  let lastValue = element.value;
+  
+  element.value = value;
+  /* @ts-ignore */
+  let event = new Event("input", { target: element, bubbles: true });
+
+  let tracker = element._valueTracker;
+
+  if (tracker) {
+      tracker.setValue(lastValue);
+  }
+
+  element.dispatchEvent(event);
+
+}
+
+export default setNativeValue;