@dashadmin/dash-admin 1.3.73 → 1.3.74-srcfree.2

package/src/components/navigation/Breadcrumbs.tsx

@@ -1,220 +0,0 @@
-import React, { JSX, useMemo } from 'react';
-import { Box, Typography } from '@mui/material';
-import { Link } from 'react-router-dom';
-import { useSelector } from 'react-redux';
-import NavigateNextIcon from '@mui/icons-material/NavigateNext';
-import HomeIcon from '@mui/icons-material/Home';
-import { IBreadcrumbItem, IDASHAppState, IPageState } from 'dash-admin-state';
-import { IDashAutoAdminResourceConfig } from 'dash-auto-admin';
-
-// ============================================================================
-// TYPES & INTERFACES
-// ============================================================================
-
-export interface BreadcrumbsProps {
-    /** Override the breadcrumbs from Redux state */
-    items?: IBreadcrumbItem[];
-    /** Custom separator between breadcrumb items */
-    separator?: React.ReactNode;
-    /** Maximum number of items to show (others will be collapsed) */
-    maxItems?: number;
-    /** Custom class name */
-    className?: string;
-    /** Show home icon as first item */
-    showHomeIcon?: boolean;
-    /** Home path (default: '/') */
-    homePath?: string;
-    /** Home label (default: 'Home') */
-    homeLabel?: string;
-    /** Custom styles */
-    sx?: Record<string, any>;
-}
-
-// ============================================================================
-// BREADCRUMB ITEM COMPONENT
-// ============================================================================
-
-interface BreadcrumbItemProps {
-    item: IBreadcrumbItem;
-    isLast: boolean;
-}
-
-const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({ item, isLast }) => {
-    const content = (
-        <Box
-            component="span"
-            className={`dash-breadcrumb-item ${isLast ? 'dash-breadcrumb-item--active' : ''}`}
-            sx={{
-                display: 'inline-flex',
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: '2px',
-                flexShrink: 0,
-            }}
-        >
-            {item.icon && (
-                <Box
-                    component="span"
-                    className="dash-breadcrumb-icon"
-                    sx={{
-                        display: 'inline-flex',
-                        alignItems: 'center',
-                        flexShrink: 0,
-                        '& svg': {
-                            fontSize: '12px',
-                        },
-                    }}
-                >
-                    {item.icon}
-                </Box>
-            )}
-            <Typography
-                component="span"
-                className="dash-breadcrumb-label"
-                sx={{
-                    fontSize: '11px',
-                    fontWeight: isLast ? 500 : 400,
-                    lineHeight: 1.2,
-                    color: isLast 
-                        ? 'var(--text-header, #ffffff)' 
-                        : 'var(--text-header-muted, rgba(255, 255, 255, 0.7))',
-                    whiteSpace: 'nowrap',
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                    maxWidth: '120px',
-                }}
-            >
-                {item.label}
-            </Typography>
-        </Box>
-    );
-
-    // If it's the last item or no path, don't make it a link
-    if (isLast || !item.path) {
-        return content;
-    }
-
-    // Ensure path starts with / to avoid relative navigation issues
-    const path = !item.path.startsWith('/') ? `/${item.path}` : item.path;
-
-    // Use React Router's Link for client-side navigation
-    return (
-        <Link
-            to={path}
-            className="dash-breadcrumb-link"
-            style={{
-                textDecoration: 'none',
-                display: 'inline-flex',
-                alignItems: 'center',
-            }}
-        >
-            {content}
-        </Link>
-    );
-};
-
-// ============================================================================
-// MAIN BREADCRUMBS COMPONENT
-// ============================================================================
-
-export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({
-    items: propItems,
-    separator,
-    maxItems,
-    className = '',
-    showHomeIcon = false,
-    homePath = '/',
-    homeLabel = 'Home',
-    sx = {},
-}): JSX.Element | null => {
-    // Create default separator inside component to avoid hook issues
-    const defaultSeparator = <NavigateNextIcon sx={{ fontSize: '12px', color: 'var(--text-header-muted, rgba(255, 255, 255, 0.5))' }} />;
-    const actualSeparator = separator ?? defaultSeparator;
-    // Get breadcrumbs from Redux state if not provided via props
-    const pageState: IPageState = useSelector(
-        (state: IDASHAppState<any, any, IDashAutoAdminResourceConfig>) => state.page
-    );
-
-    const breadcrumbs = propItems || pageState.breadcrumbs;
-
-    // Build final items list
-    const displayItems = useMemo(() => {
-        if (!breadcrumbs || breadcrumbs.length === 0) {
-            return [];
-        }
-
-        let items = [...breadcrumbs];
-
-        // Add home item if requested
-        if (showHomeIcon) {
-            const homeItem: IBreadcrumbItem = {
-                label: homeLabel,
-                path: homePath,
-                icon: <HomeIcon />,
-            };
-            items = [homeItem, ...items];
-        }
-
-        // Apply maxItems limit if specified
-        if (maxItems && items.length > maxItems) {
-            const start = items.slice(0, 1);
-            const end = items.slice(-(maxItems - 2));
-            const ellipsis: IBreadcrumbItem = {
-                label: '...',
-                path: undefined,
-            };
-            items = [...start, ellipsis, ...end];
-        }
-
-        return items;
-    }, [breadcrumbs, showHomeIcon, homeLabel, homePath, maxItems]);
-
-    // Don't render if no items
-    if (displayItems.length === 0) {
-        return null;
-    }
-
-    return (
-        <Box
-            component="nav"
-            aria-label="breadcrumb"
-            className={`dash-breadcrumbs ${className}`}
-            sx={{
-                display: 'flex',
-                flexDirection: 'row',
-                alignItems: 'center',
-                flexWrap: 'nowrap',
-                gap: '2px',
-                padding: 0,
-                margin: 0,
-                ...sx,
-            }}
-        >
-            {displayItems.map((item, index) => {
-                const isLast = index === displayItems.length - 1;
-                
-                return (
-                    <React.Fragment key={`breadcrumb-${index}-${item.label}`}>
-                        <BreadcrumbItem item={item} isLast={isLast} />
-                        {!isLast && (
-                            <Box
-                                component="span"
-                                className="dash-breadcrumb-separator"
-                                sx={{
-                                    display: 'inline-flex',
-                                    alignItems: 'center',
-                                    mx: '1px',
-                                    flexShrink: 0,
-                                }}
-                            >
-                                {actualSeparator}
-                            </Box>
-                        )}
-                    </React.Fragment>
-                );
-            })}
-        </Box>
-    );
-};
-
-export default Breadcrumbs;

package/src/components/navigation/BreadcrumbsManager.tsx

@@ -1,310 +0,0 @@
-import React, { useEffect, useMemo } from 'react';
-import { useLocation } from 'react-router-dom';
-import { useDispatch } from 'react-redux';
-import { useStore } from 'react-admin';
-import { IBreadcrumbItem, DASH_REDUX_ACTIONS } from 'dash-admin-state';
-import { IDashAutoAdminResourceConfig } from 'dash-auto-admin';
-import { DASHAdminSystemConstants } from 'dash-constants';
-
-// ============================================================================
-// TYPES & INTERFACES
-// ============================================================================
-
-export interface BreadcrumbsManagerProps {
-    /** Custom label map for route segments */
-    labelMap?: Record<string, string>;
-    /** Whether to include the home item */
-    includeHome?: boolean;
-    /** Home path */
-    homePath?: string;
-    /** Home label */
-    homeLabel?: string;
-    /** Custom breadcrumb generator function */
-    customGenerator?: (
-        pathname: string, 
-        resourceConfig?: IDashAutoAdminResourceConfig,
-        record?: any
-    ) => IBreadcrumbItem[];
-    /** Field to use as record name (default: 'name') */
-    recordNameField?: string;
-    /** Children components */
-    children?: React.ReactNode;
-}
-
-// ============================================================================
-// DEFAULT LABEL MAPPINGS
-// ============================================================================
-
-const defaultLabelMap: Record<string, string> = {
-    // Common actions
-    'create': 'Crear',
-    'edit': 'Editar',
-    'show': 'Ver',
-    'list': 'Lista',
-    'inline': 'Detalle',
-    'trash': 'Papelera',
-    
-    // Common routes
-    'admin': 'Admin',
-    'system': 'Sistema',
-    'settings': 'Configuración',
-    'users': 'Usuarios',
-    'roles': 'Roles',
-    'permissions': 'Permisos',
-    'tenants': 'Tenants',
-    'profile': 'Perfil',
-    'dashboard': 'Dashboard',
-    'apps': 'Aplicaciones',
-    'client': 'Cliente',
-    'mall': 'Mall',
-    'public': 'Público',
-};
-
-// ============================================================================
-// HELPER FUNCTIONS
-// ============================================================================
-
-/**
- * Parse a route segment into a readable label
- */
-const parseSegmentLabel = (
-    segment: string, 
-    labelMap: Record<string, string>,
-    resourceConfig?: IDashAutoAdminResourceConfig
-): string => {
-    // Check custom label map first
-    if (labelMap[segment]) {
-        return labelMap[segment];
-    }
-    
-    // Check default label map
-    if (defaultLabelMap[segment]) {
-        return defaultLabelMap[segment];
-    }
-    
-    // Check if segment matches resource model
-    if (resourceConfig) {
-        const modelParts = resourceConfig.model?.split('/') || [];
-        if (modelParts.includes(segment)) {
-            return resourceConfig.label || segment;
-        }
-    }
-    
-    // Convert kebab-case or snake_case to Title Case
-    return segment
-        .replace(/[-_]/g, ' ')
-        .replace(/\b\w/g, char => char.toUpperCase());
-};
-
-/**
- * Check if a segment is an ID (numeric or UUID-like)
- */
-const isIdSegment = (segment: string): boolean => {
-    // Check for numeric ID
-    if (/^\d+$/.test(segment)) {
-        return true;
-    }
-    // Check for UUID
-    if (/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(segment)) {
-        return true;
-    }
-    // Check for short hash-like IDs (at least 20 chars alphanumeric)
-    if (/^[a-z0-9]{20,}$/i.test(segment)) {
-        return true;
-    }
-    return false;
-};
-
-/**
- * Generate breadcrumbs from pathname
- */
-const generateBreadcrumbsFromPath = (
-    pathname: string,
-    labelMap: Record<string, string>,
-    resourceConfig?: IDashAutoAdminResourceConfig,
-    includeHome?: boolean,
-    homePath?: string,
-    homeLabel?: string,
-    recordName?: string
-): IBreadcrumbItem[] => {
-    const URL_PREFIX = DASHAdminSystemConstants.system.URL_PREFIX || '';
-    
-    // Remove URL prefix and clean path
-    let cleanPath = pathname;
-    if (URL_PREFIX && cleanPath.startsWith(URL_PREFIX)) {
-        cleanPath = cleanPath.slice(URL_PREFIX.length);
-    }
-    
-    // Split into segments and filter empty ones
-    const segments = cleanPath.split('/').filter(Boolean);
-    
-    if (segments.length === 0) {
-        return [];
-    }
-    
-    const breadcrumbs: IBreadcrumbItem[] = [];
-    
-    // Add home item if requested
-    if (includeHome) {
-        breadcrumbs.push({
-            label: homeLabel || 'Home',
-            path: homePath || '/',
-        });
-    }
-    
-    let currentPath = URL_PREFIX;
-    
-    // Ensure path starts with slash if prefix doesn't have one
-    if (currentPath && !currentPath.startsWith('/')) {
-        currentPath = `/${currentPath}`;
-    }
-    
-    // Build breadcrumbs for each segment
-    segments.forEach((segment, index) => {
-        currentPath += `/${segment}`;
-        const isLast = index === segments.length - 1;
-        const isId = isIdSegment(segment);
-        
-        // Handle ID segments
-        if (isId) {
-            // If we have a record name and this is the last segment or second-to-last, use it
-            if (recordName && (isLast || index === segments.length - 2)) {
-                breadcrumbs.push({
-                    label: recordName,
-                    path: isLast ? undefined : currentPath,
-                    isActive: isLast,
-                    data: { id: segment },
-                });
-            } else {
-                // Use a generic "Record #ID" label (truncated for display)
-                const displayId = segment.length > 8 
-                    ? `#${segment.substring(0, 8)}...` 
-                    : `#${segment}`;
-                breadcrumbs.push({
-                    label: displayId,
-                    path: isLast ? undefined : currentPath,
-                    isActive: isLast,
-                    data: { id: segment },
-                });
-            }
-            return;
-        }
-        
-        // Get the label for this segment
-        const label = parseSegmentLabel(segment, labelMap, resourceConfig);
-        
-        breadcrumbs.push({
-            label,
-            path: isLast ? undefined : currentPath,
-            isActive: isLast,
-        });
-    });
-    
-    return breadcrumbs;
-};
-
-// ============================================================================
-// COMPONENT
-// ============================================================================
-
-/**
- * BreadcrumbsManager
- * 
- * A component that automatically manages breadcrumb state based on the current route.
- * Place this component in your app layout to enable automatic breadcrumb generation.
- * 
- * @example
- * ```tsx
- * // In your app layout
- * <BreadcrumbsManager includeHome homeLabel="Dashboard">
- *     {children}
- * </BreadcrumbsManager>
- * ```
- */
-export const BreadcrumbsManager: React.FC<BreadcrumbsManagerProps> = ({
-    labelMap = {},
-    includeHome = false,
-    homePath = '/',
-    homeLabel = 'Home',
-    customGenerator,
-    recordNameField = 'name',
-    children,
-}) => {
-    const dispatch = useDispatch();
-    const location = useLocation();
-    
-    // Get resource config from store
-    const [resourceConfig] = useStore<IDashAutoAdminResourceConfig>('resourceConfig');
-    
-    // Note: We don't use useRecordContext here because it requires RecordContextProvider
-    // The record name will be handled by the useBreadcrumbs hook in resource templates instead
-    const record: any = null;
-    
-    // Merge label maps
-    const mergedLabelMap = useMemo(() => ({
-        ...defaultLabelMap,
-        ...labelMap,
-    }), [labelMap]);
-    
-    // Get record name from record context
-    const recordName = useMemo(() => {
-        if (!record) return undefined;
-        
-        // Try common name fields
-        const nameFields = [recordNameField, 'name', 'title', 'label', 'displayName', 'username'];
-        for (const field of nameFields) {
-            if (record[field]) {
-                return String(record[field]);
-            }
-        }
-        
-        // Use recordRepresentation if available
-        if (resourceConfig?.recordRepresentation) {
-            const repr = resourceConfig.recordRepresentation;
-            if (typeof repr === 'string' && record[repr]) {
-                return String(record[repr]);
-            }
-        }
-        
-        return undefined;
-    }, [record, recordNameField, resourceConfig]);
-    
-    // Generate and dispatch breadcrumbs on route change
-    useEffect(() => {
-        let breadcrumbs: IBreadcrumbItem[];
-        
-        if (customGenerator) {
-            breadcrumbs = customGenerator(location.pathname, resourceConfig, record);
-        } else {
-            breadcrumbs = generateBreadcrumbsFromPath(
-                location.pathname,
-                mergedLabelMap,
-                resourceConfig,
-                includeHome,
-                homePath,
-                homeLabel,
-                recordName
-            );
-        }
-        
-        // Only update if we have breadcrumbs
-        if (breadcrumbs.length > 0) {
-            dispatch(DASH_REDUX_ACTIONS.updatePage({ breadcrumbs }));
-        }
-    }, [
-        location.pathname,
-        mergedLabelMap,
-        resourceConfig,
-        includeHome,
-        homePath,
-        homeLabel,
-        recordName,
-        customGenerator,
-        dispatch,
-        record,
-    ]);
-    
-    return <>{children}</>;
-};
-
-export default BreadcrumbsManager;

package/src/components/panel/Error.tsx

@@ -1,168 +0,0 @@
-import { ComponentType, ErrorInfo, Fragment, HtmlHTMLAttributes } from 'react';
-import { FallbackProps } from 'react-error-boundary';
-import { styled } from '@mui/material/styles';
-import PropTypes from 'prop-types';
-import {
-	Button,
-	Accordion,
-	AccordionDetails,
-	AccordionSummary,
-	Typography,
-} from '@mui/material';
-import ErrorIcon from '@mui/icons-material/Report';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import History from '@mui/icons-material/History';
-import { useTranslate } from 'react-admin';
-import { useResetErrorBoundaryOnLocationChange } from 'react-admin';
-import { Title } from 'react-admin';
-
-export const Error = (
-	props: InternalErrorProps & {
-		errorComponent?: ComponentType<ErrorProps>;
-	},
-) => {
-	const {
-		error,
-		errorComponent: ErrorComponent,
-		errorInfo,
-		resetErrorBoundary,
-		className,
-		title,
-		...rest
-	} = props;
-
-	const translate = useTranslate();
-	useResetErrorBoundaryOnLocationChange(resetErrorBoundary);
-
-	if (ErrorComponent) {
-		return <ErrorComponent error={error} errorInfo={errorInfo} title={title} />;
-	}
-
-	return (
-		<Fragment>
-			{title && <Title title={title} />}
-			<Root className={className} {...rest}>
-				<h1 className={ErrorClasses.title} role='alert'>
-					<ErrorIcon className={ErrorClasses.icon} />
-					{translate('ra.page.error')}
-				</h1>
-				<div>{translate('ra.message.error')}</div>
-				{/* @ts-ignore */}
-				{process.env.NODE_ENV !== 'production' && (
-					<>
-						<Accordion className={ErrorClasses.panel}>
-							<AccordionSummary
-								expandIcon={<ExpandMoreIcon />}
-								className={ErrorClasses.panelSumary}
-							>
-								{translate(error.message, {
-									_: error.message,
-								})}
-							</AccordionSummary>
-							<AccordionDetails className={ErrorClasses.panelDetails}>
-								{/*
-                                    error message is repeated here to allow users to copy it. AccordionSummary doesn't support text selection.
-                                */}
-								<p>
-									{translate(error.message, {
-										_: error.message,
-									})}
-								</p>
-								<p>{errorInfo?.componentStack}</p>
-							</AccordionDetails>
-						</Accordion>
-					</>
-				)}
-				<div className={ErrorClasses.toolbar}>
-					<Button variant='contained' startIcon={<History />} onClick={goBack}>
-						{translate('ra.action.back')}
-					</Button>
-				</div>
-			</Root>
-		</Fragment>
-	);
-};
-
-Error.propTypes = {
-	className: PropTypes.string,
-	error: PropTypes.object.isRequired,
-	errorInfo: PropTypes.object,
-	title: PropTypes.string,
-};
-
-interface InternalErrorProps
-	extends Omit<HtmlHTMLAttributes<HTMLDivElement>, 'title'>,
-		FallbackProps,
-		ErrorProps {
-	className?: string;
-}
-
-export interface ErrorProps extends Pick<FallbackProps, 'error'> {
-	errorInfo?: ErrorInfo;
-	//title?: TitleComponent;
-	title?: any;
-}
-
-const PREFIX = 'RaError';
-
-export const ErrorClasses = {
-	container: `${PREFIX}-container`,
-	title: `${PREFIX}-title`,
-	icon: `${PREFIX}-icon`,
-	panel: `${PREFIX}-panel`,
-	panelSumary: `${PREFIX}-panelSumary`,
-	panelDetails: `${PREFIX}-panelDetails`,
-	toolbar: `${PREFIX}-toolbar`,
-	advice: `${PREFIX}-advice`,
-};
-
-const Root = styled('div', {
-	name: PREFIX,
-	overridesResolver: (props, styles) => styles.root,
-})(({ theme }) => ({
-	display: 'flex',
-	flexDirection: 'column',
-	alignItems: 'center',
-	justifyContent: 'center',
-	[theme.breakpoints.down('md')]: {
-		padding: '1em',
-	},
-	fontFamily: 'Roboto, sans-serif',
-	opacity: 0.5,
-
-	[`& .${ErrorClasses.title}`]: {
-		display: 'flex',
-		alignItems: 'center',
-	},
-
-	[`& .${ErrorClasses.icon}`]: {
-		width: '2em',
-		height: '2em',
-		marginRight: '0.5em',
-	},
-
-	[`& .${ErrorClasses.panel}`]: {
-		marginTop: '1em',
-		maxWidth: '60em',
-	},
-
-	[`& .${ErrorClasses.panelSumary}`]: {
-		userSelect: 'all',
-	},
-
-	[`& .${ErrorClasses.panelDetails}`]: {
-		whiteSpace: 'pre-wrap',
-	},
-
-	[`& .${ErrorClasses.toolbar}`]: {
-		marginTop: '2em',
-	},
-
-	[`& .${ErrorClasses.advice}`]: {
-		marginTop: '2em',
-	},
-}));
-
-function goBack() {
-	window.history.go(-1);
-}