@elementor/editor-audits 4.4.0-1114 → 4.4.0-1116

package/src/components/pages/issues-page.tsx

@@ -1,65 +0,0 @@
-import * as React from 'react';
-import { useState } from 'react';
-import { Box, Link, Typography } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-
-import { ALL_CATEGORIES, CATEGORY_LABELS } from '../../constants';
-import { type AuditCategory, type PageAuditReport } from '../../types';
-import { type AuditStatusGroup, getPopulatedCategories } from '../../utils/audit-status-summary';
-import { countSeverities, type SeverityCounts } from '../../utils/severity-counts';
-import AuditStatusesSection from '../audit-statuses-section';
-import IssuesCategoryRow from '../issues-category-row';
-import SeverityFilterChips, { type SeverityFilter } from '../severity-filter-chips';
-
-type Props = {
-	report: PageAuditReport;
-	onCategoryClick: ( category: AuditCategory ) => void;
-	onAllAuditsClick: () => void;
-	onStatusClick: ( status: AuditStatusGroup ) => void;
-};
-
-function filterCounts( counts: SeverityCounts, filter: SeverityFilter ): SeverityCounts {
-	if ( filter === 'all' ) {
-		return counts;
-	}
-
-	return { error: 0, warning: 0, info: 0, [ filter ]: counts[ filter ] };
-}
-
-export default function IssuesPage( { report, onCategoryClick, onAllAuditsClick, onStatusClick }: Props ) {
-	const [ filter, setFilter ] = useState< SeverityFilter >( 'all' );
-	const populatedCategories = getPopulatedCategories( report.categories, ALL_CATEGORIES );
-
-	const categoryRows = populatedCategories
-		.map( ( category ) => ( { category, counts: filterCounts( countSeverities( report, category ), filter ) } ) )
-		.filter( ( { counts } ) => Object.values( counts ).some( ( count ) => count > 0 ) );
-
-	return (
-		<Box sx={ { display: 'flex', flexDirection: 'column', gap: 4, p: 2 } }>
-			<AuditStatusesSection report={ report } onStatusClick={ onStatusClick } />
-			<Link
-				component="button"
-				underline="none"
-				color="inherit"
-				onClick={ onAllAuditsClick }
-				sx={ { textAlign: 'start' } }
-			>
-				<Typography variant="subtitle1" component="h2">
-					{ __( 'All issues', 'elementor' ) }
-				</Typography>
-			</Link>
-			<SeverityFilterChips selected={ filter } onChange={ setFilter } />
-			<Box sx={ { display: 'flex', flexDirection: 'column', gap: 1 } }>
-				{ categoryRows.map( ( { category, counts } ) => (
-					<IssuesCategoryRow
-						key={ category }
-						category={ category }
-						label={ CATEGORY_LABELS[ category ] }
-						counts={ counts }
-						onClick={ () => onCategoryClick( category ) }
-					/>
-				) ) }
-			</Box>
-		</Box>
-	);
-}

package/src/components/score-bar.tsx

@@ -1,56 +0,0 @@
-import * as React from 'react';
-import { ChevronRightIcon } from '@elementor/icons';
-import { Box, LinearProgress, Rotate, Typography, useTheme } from '@elementor/ui';
-
-import { onKeyboardClick } from '../utils/keyboard-click';
-import { getScoreTier } from '../utils/score-thresholds';
-
-type Props = {
-	label: string;
-	score: number;
-	onClick?: () => void;
-};
-
-export default function ScoreBar( { label, score, onClick }: Props ) {
-	const isRtl = 'rtl' === useTheme().direction;
-
-	return (
-		<Box
-			role={ onClick ? 'button' : undefined }
-			tabIndex={ onClick ? 0 : undefined }
-			onClick={ onClick }
-			onKeyDown={ onClick ? onKeyboardClick( onClick ) : undefined }
-			sx={ {
-				display: 'flex',
-				alignItems: 'center',
-				gap: 1,
-				cursor: onClick ? 'pointer' : 'default',
-				outline: 'none',
-				'&:focus-visible': { outline: '2px solid', outlineColor: 'primary.main', borderRadius: 1 },
-				py: 0.5,
-			} }
-		>
-			<Typography variant="body2" sx={ { minWidth: 96 } }>
-				{ label }
-			</Typography>
-			<LinearProgress
-				variant="determinate"
-				value={ score }
-				color={ getScoreTier( score ).color }
-				sx={ { flex: 1, height: 6, borderRadius: 4, bgcolor: 'action.disabledBackground' } }
-			/>
-			<Typography
-				variant="body2"
-				color="text.primary"
-				sx={ { minWidth: 24, textAlign: 'right', fontWeight: 900 } }
-			>
-				{ score }
-			</Typography>
-			{ onClick && (
-				<Rotate in={ isRtl }>
-					<ChevronRightIcon fontSize="small" color="action" />
-				</Rotate>
-			) }
-		</Box>
-	);
-}

package/src/components/score-circle.tsx

@@ -1,60 +0,0 @@
-import * as React from 'react';
-import { Box, CircularProgress, Typography } from '@elementor/ui';
-
-import { getScoreTier, type ScoreColor } from '../utils/score-thresholds';
-
-type Props = {
-	color?: ScoreColor;
-	score: number;
-};
-
-const SCORE_CIRCLE_SIZE = 88;
-const SCORE_CIRCLE_THICKNESS = 3;
-
-export default function ScoreCircle( { color, score }: Props ) {
-	const progressColor = color ?? getScoreTier( score ).color;
-
-	return (
-		<Box
-			role="progressbar"
-			aria-valuenow={ score }
-			aria-valuemin={ 0 }
-			aria-valuemax={ 100 }
-			sx={ { position: 'relative', display: 'inline-flex' } }
-		>
-			<CircularProgress
-				variant="determinate"
-				value={ 100 }
-				size={ SCORE_CIRCLE_SIZE }
-				thickness={ SCORE_CIRCLE_THICKNESS }
-				sx={ { color: 'action.disabledBackground' } }
-			/>
-			<CircularProgress
-				variant="determinate"
-				value={ score }
-				size={ SCORE_CIRCLE_SIZE }
-				thickness={ SCORE_CIRCLE_THICKNESS }
-				color={ progressColor }
-				sx={ { position: 'absolute', left: 0 } }
-			/>
-			<Box
-				sx={ {
-					position: 'absolute',
-					inset: 0,
-					display: 'flex',
-					alignItems: 'center',
-					justifyContent: 'center',
-				} }
-			>
-				<Typography
-					variant="h4"
-					component="span"
-					color="text.primary"
-					sx={ { fontWeight: 700, lineHeight: 1 } }
-				>
-					{ score }
-				</Typography>
-			</Box>
-		</Box>
-	);
-}

package/src/components/severity-filter-chips.tsx

@@ -1,57 +0,0 @@
-import * as React from 'react';
-import { Box, Chip } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-
-import { type AuditSeverity } from '../types';
-import { ALL_SEVERITIES, severityPluralLabel } from '../utils/severity-counts';
-import SeverityIcon from './severity-icons';
-
-export type SeverityFilter = 'all' | AuditSeverity;
-
-type Props = {
-	selected: SeverityFilter;
-	onChange: ( filter: SeverityFilter ) => void;
-};
-
-export default function SeverityFilterChips( { selected, onChange }: Props ) {
-	return (
-		<Box sx={ { display: 'flex', alignItems: 'center', gap: 1 } }>
-			<FilterChip
-				label={ __( 'All', 'elementor' ) }
-				isSelected={ selected === 'all' }
-				onClick={ () => onChange( 'all' ) }
-			/>
-			{ ALL_SEVERITIES.map( ( severity ) => (
-				<FilterChip
-					key={ severity }
-					label={ severityPluralLabel( severity ) }
-					icon={ <SeverityIcon severity={ severity } /> }
-					isSelected={ selected === severity }
-					onClick={ () => onChange( severity ) }
-				/>
-			) ) }
-		</Box>
-	);
-}
-
-type FilterChipProps = {
-	label: string;
-	icon?: React.ReactElement;
-	isSelected: boolean;
-	onClick: () => void;
-};
-
-function FilterChip( { label, icon, isSelected, onClick }: FilterChipProps ) {
-	return (
-		<Chip
-			label={ label }
-			icon={ icon }
-			size="small"
-			variant="filled"
-			color="default"
-			onClick={ onClick }
-			aria-pressed={ isSelected }
-			sx={ { bgcolor: isSelected ? 'action.selected' : 'transparent' } }
-		/>
-	);
-}

package/src/utils/score-thresholds.ts

@@ -1,23 +0,0 @@
-import { __ } from '@wordpress/i18n';
-
-export const GOOD_THRESHOLD = 90;
-export const OK_THRESHOLD = 50;
-
-export type ScoreColor = 'success' | 'warning' | 'error';
-
-export type ScoreTier = {
-	color: ScoreColor;
-	label: string;
-};
-
-export function getScoreTier( score: number ): ScoreTier {
-	if ( score >= GOOD_THRESHOLD ) {
-		return { color: 'success', label: __( 'Good', 'elementor' ) };
-	}
-
-	if ( score >= OK_THRESHOLD ) {
-		return { color: 'warning', label: __( 'Needs work', 'elementor' ) };
-	}
-
-	return { color: 'error', label: __( 'At risk', 'elementor' ) };
-}