@automattic/jetpack-components 0.41.1 → 0.42.0

package/components/boost-score-graph/tooltip.tsx

@@ -0,0 +1,87 @@
+import { getScoreLetter } from '@automattic/jetpack-boost-score-api';
+import { dateI18n } from '@wordpress/date';
+import { __, sprintf } from '@wordpress/i18n';
+import { type FunctionComponent } from 'react';
+import './style-tooltip.scss';
+import { Period } from '.';
+
+export const Tooltip: FunctionComponent = ( { period }: { period: Period } ) => {
+	if ( ! period || ! period.dimensions || ! period.timestamp ) {
+		return null;
+	}
+	const {
+		mobile_overall_score,
+		desktop_overall_score,
+		desktop_cls,
+		desktop_lcp,
+		desktop_tbt,
+		mobile_cls,
+		mobile_lcp,
+		mobile_tbt,
+	} = period.dimensions;
+	const scoreLetter = getScoreLetter( mobile_overall_score, desktop_overall_score );
+	const date = dateI18n( 'F j, Y', new Date( period.timestamp ), false );
+
+	return (
+		<div className="jb-score-tooltip">
+			<div className="jb-score-tooltip__date">{ date }</div>
+			<div className="jb-score-tooltip__row">
+				<div className="jb-score-tooltip__column">{ __( 'Overall score', 'jetpack' ) }</div>
+				<div className="jb-score-tooltip__column">{ scoreLetter }</div>
+			</div>
+			<hr />
+			<div className="jb-score-tooltip__row">
+				<div className="jb-score-tooltip__column">{ __( 'Desktop score', 'jetpack' ) }</div>
+				<div className="jb-score-tooltip__column">
+					{
+						/* translators: %d is the score */
+						sprintf( __( '%d / 100', 'jetpack' ), desktop_overall_score )
+					}
+				</div>
+			</div>
+			<div className="jb-score-tooltip__row jb-score-tooltip__row--secondary">
+				<div className="jb-score-tooltip__column">
+					{ __( 'Largest Contentful Paint', 'jetpack' ) }
+				</div>
+				<div className="jb-score-tooltip__column">{ sprintf( '%0.2fs', desktop_lcp ) }</div>
+			</div>
+			<div className="jb-score-tooltip__row jb-score-tooltip__row--secondary">
+				<div className="jb-score-tooltip__column">{ __( 'Total Blocking Time', 'jetpack' ) }</div>
+				<div className="jb-score-tooltip__column">{ sprintf( '%0.2fs', desktop_tbt ) }</div>
+			</div>
+			<div className="jb-score-tooltip__row jb-score-tooltip__row--secondary">
+				<div className="jb-score-tooltip__column">
+					{ __( 'Cumulative Layout Shift', 'jetpack' ) }
+				</div>
+				<div className="jb-score-tooltip__column">{ sprintf( '%0.2f', desktop_cls ) }</div>
+			</div>
+			<hr />
+			<div className="jb-score-tooltip__row">
+				<div className="jb-score-tooltip__column">{ __( 'Mobile score', 'jetpack' ) }</div>
+				<div className="jb-score-tooltip__column">
+					{
+						/* translators: %d is the score */
+						sprintf( __( '%d / 100', 'jetpack' ), mobile_overall_score )
+					}
+				</div>
+			</div>
+			<div className="jb-score-tooltip__row jb-score-tooltip__row--secondary">
+				<div className="jb-score-tooltip__column">
+					{ __( 'Largest Contentful Paint', 'jetpack' ) }
+				</div>
+				<div className="jb-score-tooltip__column">{ sprintf( '%0.2fs', mobile_lcp ) }</div>
+			</div>
+			<div className="jb-score-tooltip__row jb-score-tooltip__row--secondary">
+				<div className="jb-score-tooltip__column">{ __( 'Total Blocking Time', 'jetpack' ) }</div>
+				<div className="jb-score-tooltip__column">{ sprintf( '%0.2fs', mobile_tbt ) }</div>
+			</div>
+			<div className="jb-score-tooltip__row jb-score-tooltip__row--secondary">
+				<div className="jb-score-tooltip__column">
+					{ __( 'Cumulative Layout Shift', 'jetpack' ) }
+				</div>
+				<div className="jb-score-tooltip__column">{ sprintf( '%0.2f', mobile_cls ) }</div>
+			</div>
+			<div className="jb-score-tooltip__pointer"></div>
+		</div>
+	);
+};

package/components/boost-score-graph/tooltips-plugin.ts

@@ -0,0 +1,98 @@
+import ReactDOM from 'react-dom/client';
+import uPlot from 'uplot';
+import { Tooltip } from './tooltip';
+import { Period } from '.';
+
+/**
+ * Custom tooltips plugin for uPlot.
+ *
+ * @param {Period[]} periods - The periods to display in the tooltip.
+ * @returns {object} The uPlot plugin object with hooks.
+ */
+export function tooltipsPlugin( periods ) {
+	const reactRoot = document.createElement( 'div' );
+	let reactDom;
+
+	/**
+	 * Initializes the tooltips plugin.
+	 *
+	 * @param {uPlot} u - The uPlot instance.
+	 * @param {object} _opts - Options for the uPlot instance.
+	 */
+	function init( u, _opts ) {
+		const over = u.over;
+		reactDom = ReactDOM.createRoot( reactRoot );
+		reactRoot.style.position = 'absolute';
+		reactRoot.style.bottom = -20 + 'px';
+		reactRoot.style.translate = '-50% calc( 100% - 20px )';
+
+		over.appendChild( reactRoot );
+
+		/**
+		 * Hides all tooltips.
+		 */
+		function hideTips() {
+			reactRoot.style.display = 'none';
+		}
+
+		/**
+		 * Shows all tooltips.
+		 */
+		function showTips() {
+			reactRoot.style.display = null;
+		}
+
+		over.addEventListener( 'mouseleave', () => {
+			if ( ! u.cursor._lock ) {
+				hideTips();
+			}
+		} );
+
+		over.addEventListener( 'mouseenter', () => {
+			showTips();
+		} );
+
+		if ( u.cursor.left < 0 ) {
+			hideTips();
+		} else {
+			showTips();
+		}
+	}
+
+	/**
+	 * Sets the cursor for tooltips.
+	 *
+	 * @param {uPlot} u - The uPlot instance.
+	 */
+	function setCursor( u ) {
+		const { idx } = u.cursor;
+
+		const period = periods[ idx ];
+
+		// Timestamp of the cursor position
+		const timestamp = u.data[ 0 ][ idx ];
+
+		// Find start and end of day for the cursor position
+		const startOfDay = timestamp - ( timestamp % 86400 );
+		const endOfDay = startOfDay + 86400;
+
+		// Find the left position, and width of the box, bounded by the range of the graph
+		const boxLeft = u.valToPos( Math.max( startOfDay, u.scales.x.min ), 'x' );
+		const boxWidth = u.valToPos( Math.min( endOfDay, u.scales.x.max ), 'x' ) - boxLeft;
+		const boxCenter = boxLeft + boxWidth / 2;
+
+		reactRoot.style.left = boxCenter + 'px';
+		reactDom.render(
+			Tooltip( {
+				period,
+			} )
+		);
+	}
+
+	return {
+		hooks: {
+			init,
+			setCursor,
+		},
+	};
+}

package/components/boost-score-graph/types/declarations.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+	const content: string;
+	export default content;
+}

package/components/boost-score-graph/uplot-line-chart.tsx

@@ -0,0 +1,193 @@
+import { __ } from '@wordpress/i18n';
+import React, { useMemo, useRef, useCallback } from 'react';
+import uPlot from 'uplot';
+import UplotReact from 'uplot-react';
+import { getUserLocale } from '../../lib/locale';
+import numberFormat from '../number-format';
+import { dayHighlightPlugin } from './day-highlight-plugin';
+import getDateFormat from './get-date-format';
+import { tooltipsPlugin } from './tooltips-plugin';
+import { useBoostScoreTransform } from './use-boost-score-transform';
+import useResize from './use-resize';
+import { Period } from '.';
+
+import './style-uplot.scss';
+
+const DEFAULT_DIMENSIONS = {
+	height: 300,
+	width: 600,
+};
+
+interface UplotChartProps {
+	periods: Period[];
+	options?: Partial< uPlot.Options >;
+	legendContainer?: React.RefObject< HTMLDivElement >;
+	solidFill?: boolean;
+	period?: string;
+	range?: { startDate: number; endDate: number };
+}
+
+/**
+ * Creates a series information object for uPlot based on the label and color.
+ *
+ * @param {string} label - The label for the series.
+ * @param {number} score - The last score for the series.
+ * @returns {object} The series information object.
+ */
+function createSerieInfo( label: string, score ) {
+	const { spline } = uPlot.paths;
+	return {
+		label: label,
+		stroke: getColor( score ),
+		fill: u => {
+			const gradient = u.ctx.createLinearGradient( 0, 0, 0, DEFAULT_DIMENSIONS.height );
+			gradient.addColorStop( 0, getColor( score, '44' ) );
+			gradient.addColorStop( 1, getColor( score, '11' ) );
+
+			return gradient;
+		}, // use the gradient as fill for the series
+		width: 2,
+		paths: ( u, seriesIdx, idx0, idx1 ) => {
+			return spline?.()( u, seriesIdx, idx0, idx1 ) || null;
+		},
+		points: {
+			show: true,
+		},
+		value: ( self: uPlot, rawValue: number ) => {
+			if ( ! rawValue ) {
+				return '-';
+			}
+
+			return numberFormat( rawValue );
+		},
+	};
+}
+
+/**
+ * Get the color value based on the score.
+ *
+ * @param {number} score - The score to get the color for.
+ * @param {string} opacity - Whether to return a transparent color.
+ * @returns {string} The color value.
+ */
+function getColor( score: number, opacity = 'FF' ) {
+	let color = '#D63638'; // bad
+
+	if ( score > 70 ) {
+		color = '#069e08'; // good
+	} else if ( score > 50 ) {
+		color = '#faa754'; //mediocre
+	}
+
+	return `${ color }${ opacity }`;
+}
+
+/**
+ * UplotLineChart component.
+ *
+ * @param {object} props - The props object for the UplotLineChart component.
+ * @param {{ startDate: number, endDate: number }} props.range - The date range of the chart.
+ * @param {Period[]} props.periods - The periods to display in the chart.
+ * @returns {React.Element} The JSX element representing the UplotLineChart component.
+ */
+export default function UplotLineChart( { range, periods }: UplotChartProps ) {
+	const uplot = useRef< uPlot | null >( null );
+	const uplotContainer = useRef( null );
+
+	let lastDesktopScore = 0;
+	let lastMobileScore = 0;
+
+	if ( periods.length > 0 ) {
+		lastDesktopScore = periods[ periods.length - 1 ].dimensions.desktop_overall_score;
+		lastMobileScore = periods[ periods.length - 1 ].dimensions.mobile_overall_score;
+	}
+
+	const data = useBoostScoreTransform( periods );
+
+	const options: uPlot.Options = useMemo( () => {
+		const defaultOptions: uPlot.Options = {
+			class: 'boost-score-graph',
+			...DEFAULT_DIMENSIONS,
+			tzDate: ts => uPlot.tzDate( new Date( ts * 1e3 ), 'Etc/UTC' ),
+			fmtDate: ( chartDateStringTemplate: string ) => {
+				return date => getDateFormat( chartDateStringTemplate, date, getUserLocale() );
+			},
+			padding: [ 17, 0, 17, 0 ],
+			axes: [
+				{
+					// x-axis
+					grid: {
+						show: false,
+					},
+					ticks: {
+						stroke: '#50575E',
+						width: 1,
+						size: 3,
+					},
+				},
+				{
+					// y-axis
+					side: 1,
+					gap: 8,
+					space: 100,
+					size: 30,
+					grid: {
+						stroke: 'rgba(220, 220, 222, 0.5)', // #DCDCDE with 0.5 opacity
+						width: 1,
+					},
+					ticks: {
+						show: false,
+					},
+				},
+			],
+			cursor: {
+				x: false,
+				y: false,
+			},
+			series: [
+				{
+					label: __( 'Date', 'jetpack' ),
+					value: ( self: uPlot, rawValue: number ) => {
+						// outputs legend content - value available when mouse is hovering the chart
+						if ( ! rawValue ) {
+							return '-';
+						}
+						const date = new Date( rawValue );
+						return date.toLocaleDateString( getUserLocale() );
+					},
+				},
+				createSerieInfo( __( 'Desktop', 'jetpack' ), lastDesktopScore ),
+				createSerieInfo( __( 'Mobile', 'jetpack' ), lastMobileScore ),
+			],
+			scales: {
+				x: {
+					time: true,
+					auto: false,
+					range: [ range.startDate / 1000, range.endDate / 1000 ],
+				},
+				y: {
+					range: [ 0, 100 ],
+					auto: false,
+				},
+			},
+			legend: {
+				show: false,
+			},
+			plugins: [ tooltipsPlugin( periods ), dayHighlightPlugin() ],
+		};
+		return {
+			...defaultOptions,
+		};
+	}, [ lastDesktopScore, lastMobileScore, periods, range.endDate, range.startDate ] );
+
+	useResize( uplot, uplotContainer );
+	const onCreate = useCallback( chart => {
+		return ( uplot.current = chart );
+	}, [] );
+
+	return (
+		<div ref={ uplotContainer }>
+			<UplotReact data={ data } onCreate={ onCreate } options={ options } />
+		</div>
+	);
+}

package/components/boost-score-graph/use-boost-score-transform.ts

@@ -0,0 +1,36 @@
+import { useMemo } from 'react';
+import { Period } from './index';
+
+type ScoreGraphAlignedData = [
+	number[], // timestamps
+	number[], // desktop_overall_score
+	number[] // mobile_overall_score
+];
+
+// Extract the value of a dimension from an array of periods
+const getPeriodDimension = function ( key: string, periods: Period[] ) {
+	return periods.map( ( { dimensions } ) => {
+		return dimensions[ key ];
+	} );
+};
+
+/**
+ * Transforms an array of periods into an array of arrays, where the first array is the timestamps, and the rest are the values for each key
+ *
+ * @param {Period[]} periods - Array of periods to transform
+ * @returns {ScoreGraphAlignedData | []} - Array of arrays, where the first array is the timestamps, and the rest are the values for each key
+ */
+export function useBoostScoreTransform( periods: Period[] ): ScoreGraphAlignedData | [] {
+	return useMemo( () => {
+		if ( ! periods?.length || ! periods[ 0 ].dimensions ) {
+			return [];
+		}
+		const timestamps = periods.map( ( { timestamp } ) => timestamp / 1000 );
+
+		return [
+			timestamps,
+			getPeriodDimension( 'desktop_overall_score', periods ),
+			getPeriodDimension( 'mobile_overall_score', periods ),
+		];
+	}, [ periods ] );
+}

package/components/boost-score-graph/use-resize.ts

@@ -0,0 +1,40 @@
+import { throttle } from '@wordpress/compose';
+import React, { useEffect } from 'react';
+import uPlot from 'uplot';
+
+const THROTTLE_DURATION = 400; // in ms
+
+/**
+ * Custom hook to handle resizing of uPlot charts.
+ *
+ * @param {React.RefObject<uPlot>} uplotRef - The ref object for the uPlot instance.
+ * @param {React.RefObject<HTMLDivElement>} containerRef - The ref object for the container div.
+ */
+export default function useResize(
+	uplotRef: React.RefObject< uPlot >,
+	containerRef: React.RefObject< HTMLDivElement >
+) {
+	useEffect( () => {
+		if ( ! uplotRef.current || ! containerRef.current ) {
+			return;
+		}
+
+		const resizeChart = throttle( () => {
+			// Repeat the check since resize can happen much later than event registration.
+			if ( ! uplotRef.current || ! containerRef.current ) {
+				return;
+			}
+
+			// Only update width, not height.
+			uplotRef.current.setSize( {
+				height: uplotRef.current.height,
+				width: containerRef.current.clientWidth,
+			} );
+		}, THROTTLE_DURATION );
+		resizeChart();
+		window.addEventListener( 'resize', resizeChart );
+
+		// Cleanup on unmount.
+		return () => window.removeEventListener( 'resize', resizeChart );
+	}, [ uplotRef, containerRef ] );
+}

package/components/gridicon/index.tsx

@@ -259,6 +259,19 @@ class Gridicon extends Component< GridiconProps > {
 						<path d="M20 4v2h-2V4H6v2H4V4c-1.105 0-2 .895-2 2v12c0 1.105.895 2 2 2v-2h2v2h12v-2h2v2c1.105 0 2-.895 2-2V6c0-1.105-.895-2-2-2zM6 16H4v-3h2v3zm0-5H4V8h2v3zm4 4V9l4.5 3-4.5 3zm10 1h-2v-3h2v3zm0-5h-2V8h2v3z" />
 					</g>
 				);
+			case 'gridicons-lock':
+				return (
+					<>
+						<g id="lock">
+							<path
+								d="M18,8h-1V7c0-2.757-2.243-5-5-5S7,4.243,7,7v1H6c-1.105,0-2,0.895-2,2v10c0,1.105,0.895,2,2,2h12c1.105,0,2-0.895,2-2V10
+									C20,8.895,19.105,8,18,8z M9,7c0-1.654,1.346-3,3-3s3,1.346,3,3v1H9V7z M13,15.723V18h-2v-2.277c-0.595-0.346-1-0.984-1-1.723
+									c0-1.105,0.895-2,2-2s2,0.895,2,2C14,14.738,13.595,15.376,13,15.723z"
+							/>
+						</g>
+						<g id="Layer_1"></g>
+					</>
+				);
 		}
 	}
 

package/components/{pricing-slider → number-slider}/index.tsx

@@ -1,17 +1,17 @@
 import classNames from 'classnames';
 import React from 'react';
 import ReactSlider from 'react-slider';
-import { PricingSliderProps } from './types';
+import { NumberSliderProps } from './types';
 import './style.scss';
 
 /**
- * Generate Pricing Slider
+ * Generate Number Slider
  * More support from the original ReactSlider component: https://zillow.github.io/react-slider/
  *
- * @param {PricingSliderProps} props - Props
+ * @param {NumberSliderProps} props - Props
  * @returns {React.ReactElement} - JSX element
  */
-const PricingSlider: React.FC< PricingSliderProps > = ( {
+const NumberSlider: React.FC< NumberSliderProps > = ( {
 	className,
 	maxValue = 100,
 	minValue = 0,
@@ -24,8 +24,8 @@ const PricingSlider: React.FC< PricingSliderProps > = ( {
 } ) => {
 	const [ isThumbHolding, setIsThumbHolding ] = React.useState( false );
 
-	const componentClassName = classNames( 'jp-components-pricing-slider', className, {
-		'jp-components-pricing-slider--is-holding': isThumbHolding,
+	const componentClassName = classNames( 'jp-components-number-slider', className, {
+		'jp-components-number-slider--is-holding': isThumbHolding,
 	} );
 
 	const onBeforeChangeCallback = beforeValue => {
@@ -51,12 +51,12 @@ const PricingSlider: React.FC< PricingSliderProps > = ( {
 		  };
 
 	return (
-		<div className={ componentClassName } data-testid="pricing-slider">
+		<div className={ componentClassName } data-testid="number-slider">
 			<ReactSlider
-				className="jp-components-pricing-slider__control"
-				thumbClassName="jp-components-pricing-slider__thumb"
-				thumbActiveClassName="jp-components-pricing-slider__thumb--is-active"
-				trackClassName="jp-components-pricing-slider__track"
+				className="jp-components-number-slider__control"
+				thumbClassName="jp-components-number-slider__thumb"
+				thumbActiveClassName="jp-components-number-slider__thumb--is-active"
+				trackClassName="jp-components-number-slider__track"
 				value={ value }
 				max={ maxValue }
 				min={ minValue }
@@ -70,4 +70,4 @@ const PricingSlider: React.FC< PricingSliderProps > = ( {
 	);
 };
 
-export default PricingSlider;
+export default NumberSlider;

package/components/{pricing-slider → number-slider}/style.scss

@@ -9,33 +9,33 @@ $track-height: 8px;
 }
 
 // On holding thumb styling
-.jp-components-pricing-slider--is-holding {
-	.jp-components-pricing-slider__thumb {
+.jp-components-number-slider--is-holding {
+	.jp-components-number-slider__thumb {
 		box-shadow: 0 6px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04), 0 0 0 3px rgba(6, 158, 8, 0.25);
 	}
 }
 
 // Base styles
-.jp-components-pricing-slider__control {
+.jp-components-number-slider__control {
 	width: 100%;
 	height: $thumb-height;
 }
 
-.jp-components-pricing-slider__track {
+.jp-components-number-slider__track {
 	@include adjust-track-rail-styles;
 	top: calc(($thumb-height / 2) - ($track-height / 2));
 	background: var(--jp-gray);
 
-	&.jp-components-pricing-slider__track-0 {
+	&.jp-components-number-slider__track-0 {
 		background: var(--jp-green-40);
 	}
 
-	&.jp-components-pricing-slider__track-1 {
+	&.jp-components-number-slider__track-1 {
 		background: var(--jp-gray);
 	}
 }
 
-.jp-components-pricing-slider__thumb {
+.jp-components-number-slider__thumb {
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -56,7 +56,7 @@ $track-height: 8px;
 	cursor: pointer;
 
 	// On focus thumb styling
-	&.jp-components-pricing-slider__thumb--is-active {
+	&.jp-components-number-slider__thumb--is-active {
 		outline: none;
 	}
 

package/components/{pricing-slider → number-slider}/types.ts

@@ -4,9 +4,9 @@ interface HTMLPropsWithRefCallback< T > extends HTMLProps< T > {
 	ref: RefCallback< T >;
 }
 
-export type PricingSliderProps = {
+export type NumberSliderProps = {
 	/**
-	 * The wrapper class name of this PricingSlider component.
+	 * The wrapper class name of this NumberSlider component.
 	 */
 	className?: string;
 

package/components/popover/index.tsx

@@ -0,0 +1,19 @@
+import './style.scss';
+
+type PopoverProps = {
+	action: React.ReactNode;
+	icon?: React.ReactNode;
+	children?: React.ReactNode;
+};
+
+const Popover: React.FC< PopoverProps > = ( { icon, children, action } ) => {
+	return (
+		<div className="jp-popover">
+			<div className="jp-popover__icon">{ icon }</div>
+			<div className="jp-popover__body">{ children }</div>
+			<div className="jp-popover__action">{ action }</div>
+		</div>
+	);
+};
+
+export default Popover;

package/components/popover/style.scss

@@ -0,0 +1,25 @@
+.jp-popover {
+	width: 600px;
+	max-width: calc( 100% - 32px );
+	padding: 16px;
+	background-color: #fff;
+	box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.06), 0px 4px 8px 0px rgba(0, 0, 0, 0.03);
+	border: 1px solid rgba(220, 220, 222, 1);
+	border-radius: 4px;
+	text-align: center;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+
+	> * {
+		margin: 16px;
+		clear: both;
+	}
+
+	&__body p {
+		font-weight: 400;
+		line-height: 1.6em;
+		font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
+	}
+}

package/components/product-price/index.tsx

@@ -63,6 +63,11 @@ const ProductPrice: React.FC< ProductPriceProps > = ( {
 							hidePriceFraction={ hidePriceFraction }
 						/>
 					) }
+					{ discountElt && (
+						<Text className={ classnames( styles[ 'promo-label' ], 'product-price_promo_label' ) }>
+							{ discountElt }
+						</Text>
+					) }
 				</div>
 			</div>
 			<div className={ styles.footer }>
@@ -76,11 +81,6 @@ const ProductPrice: React.FC< ProductPriceProps > = ( {
 						{ promoLabel }
 					</Text>
 				) }
-				{ discountElt && (
-					<Text className={ classnames( styles[ 'promo-label' ], 'product-price_promo_label' ) }>
-						{ discountElt }
-					</Text>
-				) }
 			</div>
 		</>
 	);