@automattic/jetpack-components 0.68.2 → 0.69.1

package/build/components/boost-score-graph/uplot-line-chart.js

@@ -0,0 +1,187 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { __ } from '@wordpress/i18n';
+import { useMemo, useRef, useCallback } from 'react';
+import uPlot from 'uplot';
+import UplotReact from 'uplot-react';
+import { getUserLocale } from '../../lib/locale/index.js';
+import numberFormat from '../number-format/index.js';
+import { annotationsPlugin } from './annotations-plugin.js';
+import { dayHighlightPlugin } from './day-highlight-plugin.js';
+import getDateFormat from './get-date-format.js';
+import { tooltipsPlugin } from './tooltips-plugin.js';
+import { useBoostScoreTransform } from './use-boost-score-transform.js';
+import useResize from './use-resize.js';
+import './style-uplot.scss';
+const DEFAULT_DIMENSIONS = {
+    height: 300,
+    width: 600,
+};
+/**
+ * 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.
+ * @return {object} The series information object.
+ */
+function createSerieInfo(label, 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;
+        },
+        width: 2,
+        paths: (u, seriesIdx, idx0, idx1) => {
+            return spline?.()(u, seriesIdx, idx0, idx1) || null;
+        },
+        points: {
+            show: true,
+        },
+        value: (self, rawValue) => {
+            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.
+ * @return {string} The color value.
+ */
+function getColor(score, 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.
+ * @param {Annotation[]}                           props.annotations - The annotations to display in the chart.
+ * @return {React.Element} The JSX element representing the UplotLineChart component.
+ */
+export default function UplotLineChart({ range, periods, annotations = [] }) {
+    const uplot = useRef(null);
+    const uplotContainer = useRef(null);
+    const width = uplotContainer.current?.clientWidth || DEFAULT_DIMENSIONS.width;
+    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 = useMemo(() => {
+        const defaultOptions = {
+            class: 'boost-score-graph',
+            height: DEFAULT_DIMENSIONS.height,
+            width: width,
+            tzDate: ts => uPlot.tzDate(new Date(ts * 1e3), 'Etc/UTC'),
+            fmtDate: (chartDateStringTemplate) => {
+                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)',
+                        width: 1,
+                    },
+                    ticks: {
+                        show: false,
+                    },
+                },
+            ],
+            cursor: {
+                x: false,
+                y: false,
+            },
+            series: [
+                {
+                    label: __('Date', 'jetpack-components'),
+                    value: (self, rawValue) => {
+                        // 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-components'), lastDesktopScore),
+                createSerieInfo(__('Mobile', 'jetpack-components'), lastMobileScore),
+            ],
+            scales: {
+                x: {
+                    time: true,
+                    auto: false,
+                    range: [range.startDate / 1000, range.endDate / 1000],
+                },
+                y: {
+                    range: [0, 100],
+                    auto: false,
+                },
+            },
+            legend: {
+                show: false,
+            },
+            plugins: [
+                annotationsPlugin(annotations),
+                tooltipsPlugin(periods),
+                dayHighlightPlugin(),
+            ],
+        };
+        return {
+            ...defaultOptions,
+        };
+    }, [
+        width,
+        lastDesktopScore,
+        lastMobileScore,
+        range.startDate,
+        range.endDate,
+        periods,
+        annotations,
+    ]);
+    useResize(uplot, uplotContainer);
+    const onCreate = useCallback(chart => {
+        return (uplot.current = chart);
+    }, []);
+    /**
+     * Type casting to prevent TypeScript error:
+     * TS2604: JSX element type 'UplotReact' does not have any construct or call signatures.
+     */
+    const TypedUplotReact = UplotReact;
+    return (_jsx("div", { ref: uplotContainer, className: "boost-uplot-container", children: _jsx(TypedUplotReact, { data: data, onCreate: onCreate, options: options }) }));
+}

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

@@ -0,0 +1,14 @@
+import { Period } from './index.js';
+type ScoreGraphAlignedData = [
+    number[],
+    number[],
+    number[]
+];
+/**
+ * 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
+ * @return {ScoreGraphAlignedData | []} - Array of arrays, where the first array is the timestamps, and the rest are the values for each key
+ */
+export declare function useBoostScoreTransform(periods: Period[]): ScoreGraphAlignedData | [];
+export {};

package/build/components/boost-score-graph/use-boost-score-transform.js

@@ -0,0 +1,26 @@
+import { useMemo } from 'react';
+// Extract the value of a dimension from an array of periods
+const getPeriodDimension = function (key, periods) {
+    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
+ * @return {ScoreGraphAlignedData | []} - Array of arrays, where the first array is the timestamps, and the rest are the values for each key
+ */
+export function useBoostScoreTransform(periods) {
+    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/build/components/boost-score-graph/use-resize.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import uPlot from 'uplot';
+/**
+ * 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>): void;

package/build/components/boost-score-graph/use-resize.js

@@ -0,0 +1,31 @@
+import { throttle } from '@wordpress/compose';
+import { useEffect } from 'react';
+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, containerRef) {
+    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/build/components/button/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { ButtonProps } from './types.js';
+/**
+ * Button component
+ *
+ * @param {ButtonProps} props - Component Props
+ * @return {React.ReactNode} Rendered button
+ */
+declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export default Button;

package/build/components/button/index.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * External dependencies
+ */
+import { Button as WPButton, Spinner, VisuallyHidden } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { Icon, external } from '@wordpress/icons';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+/**
+ * Internal dependencies
+ */
+import styles from './style.module.scss';
+/**
+ * Button component
+ *
+ * @param {ButtonProps} props - Component Props
+ * @return {React.ReactNode} Rendered button
+ */
+const Button = forwardRef((props, ref) => {
+    const { children, variant = 'primary', size = 'normal', weight = 'bold', icon, iconSize, disabled, isDestructive, isLoading, isExternalLink, className: propsClassName, text, fullWidth, ...componentProps } = props;
+    const className = clsx(styles.button, propsClassName, {
+        [styles.normal]: size === 'normal',
+        [styles.small]: size === 'small',
+        [styles.icon]: Boolean(icon),
+        [styles.loading]: isLoading,
+        [styles.regular]: weight === 'regular',
+        [styles['full-width']]: fullWidth,
+        [styles['is-icon-button']]: Boolean(icon) && !children,
+    });
+    componentProps.ref = ref;
+    const externalIconSize = size === 'normal' ? 20 : 16;
+    const externalIcon = isExternalLink && (_jsxs(_Fragment, { children: [_jsx(Icon, { size: externalIconSize, icon: external, className: styles['external-icon'] }), _jsx(VisuallyHidden, { as: "span", children: 
+                /* translators: accessibility text */
+                __('(opens in a new tab)', 'jetpack-components') })] }));
+    const externalTarget = isExternalLink ? '_blank' : undefined;
+    // ref https://github.com/WordPress/gutenberg/pull/44198
+    const hasChildren = children?.[0] &&
+        children[0] !== null &&
+        // Tooltip should not considered as a child
+        children?.[0]?.props?.className !== 'components-tooltip';
+    return (_jsxs(WPButton, { target: externalTarget, variant: variant, className: clsx(className, { 'has-text': !!icon && hasChildren }), icon: !isExternalLink ? icon : undefined, iconSize: iconSize, disabled: disabled, "aria-disabled": disabled, isDestructive: isDestructive, text: text, ...componentProps, children: [isLoading && _jsx(Spinner, {}), _jsx("span", { children: children }), externalIcon] }));
+});
+Button.displayName = 'Button';
+export default Button;

package/build/components/button/types.d.ts

@@ -0,0 +1,19 @@
+import { Button } from '@wordpress/components';
+import type React from 'react';
+type JetpackButtonBaseProps = {
+    className?: string;
+    children?: React.ReactNode;
+    disabled?: boolean;
+    isDestructive?: boolean;
+    isLoading?: boolean;
+    isExternalLink?: boolean;
+    size?: 'normal' | 'small';
+    text?: string;
+    variant?: 'primary' | 'secondary' | 'link' | 'tertiary';
+    weight?: 'bold' | 'regular';
+    fullWidth?: boolean;
+    ref?: React.ForwardedRef<unknown>;
+};
+type WPButtonProps = Omit<React.ComponentProps<typeof Button>, 'size' | 'variant'>;
+export type ButtonProps = JetpackButtonBaseProps & WPButtonProps;
+export {};

package/build/components/button/types.js

@@ -0,0 +1 @@
+export {};

package/build/components/chip/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+type ChipProps = {
+    text?: string;
+    type?: 'new' | 'info';
+};
+/**
+ * Chip component
+ *
+ * @param {object} props      - The component properties.
+ * @param {string} props.type - The type new or info
+ * @param {string} props.text - Chip text
+ * @return {React.ReactElement} The `Chip` component.
+ */
+declare const Chip: React.FC<ChipProps>;
+export default Chip;

package/build/components/chip/index.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import styles from './style.module.scss';
+/**
+ * Chip component
+ *
+ * @param {object} props      - The component properties.
+ * @param {string} props.type - The type new or info
+ * @param {string} props.text - Chip text
+ * @return {React.ReactElement} The `Chip` component.
+ */
+const Chip = ({ type = 'info', text }) => {
+    const classes = clsx(styles.chip, styles[`is-${type}`]);
+    return _jsx("span", { className: classes, children: text });
+};
+export default Chip;

package/build/components/contextual-upgrade-trigger/index.d.ts

@@ -0,0 +1,4 @@
+import { CutBaseProps } from './types.js';
+import type React from 'react';
+declare const ContextualUpgradeTrigger: React.FC<CutBaseProps>;
+export default ContextualUpgradeTrigger;

package/build/components/contextual-upgrade-trigger/index.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon, arrowRight } from '@wordpress/icons';
+import clsx from 'clsx';
+import IconTooltip from '../icon-tooltip/index.js';
+import Text from '../text/index.js';
+import styles from './style.module.scss';
+const ContextualUpgradeTrigger = ({ description, cta, onClick, href, openInNewTab = false, className, tooltipText = '', }) => {
+    const Tag = href !== undefined ? 'a' : 'button';
+    const tagProps = Tag === 'a' ? { href, ...(openInNewTab && { target: '_blank' }) } : { onClick };
+    return (_jsxs("div", { className: clsx(styles.cut, className), children: [_jsxs("div", { children: [_jsxs("div", { children: [_jsx(Text, { className: styles.description, children: description }), tooltipText && (_jsx(IconTooltip, { className: styles.iconContainer, iconSize: 16, offset: 4, children: _jsx(Text, { variant: "body-small", children: tooltipText }) }))] }), _jsx("div", { children: _jsx(Tag, { ...tagProps, children: _jsx(Text, { className: styles.cta, children: cta }) }) })] }), _jsx(Icon, { icon: arrowRight, className: styles.icon, size: 30 })] }));
+};
+export default ContextualUpgradeTrigger;

package/build/components/contextual-upgrade-trigger/types.d.ts

@@ -0,0 +1,9 @@
+export type CutBaseProps = {
+    description: string;
+    cta: string;
+    className?: string;
+    href?: string;
+    openInNewTab?: boolean;
+    onClick?: () => void;
+    tooltipText?: string;
+};

package/build/components/contextual-upgrade-trigger/types.js

@@ -0,0 +1 @@
+export {};

package/build/components/copy-to-clipboard/index.d.ts

@@ -0,0 +1,4 @@
+import { CopyToClipboardProps } from './types.js';
+import type React from 'react';
+export declare const CopyToClipboard: React.FC<CopyToClipboardProps>;
+export default CopyToClipboard;

package/build/components/copy-to-clipboard/index.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCopyToClipboard } from '@wordpress/compose';
+import { useState, useRef, useEffect } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import Button from '../button/index.js';
+import { ClipboardIcon, CheckmarkIcon } from '../icons/index.js';
+export const CopyToClipboard = ({ buttonStyle = 'icon', textToCopy, onCopy, ...buttonProps }) => {
+    const [hasCopied, setHasCopied] = useState(false);
+    const copyTimer = useRef();
+    const copyRef = useCopyToClipboard(textToCopy, () => {
+        if (copyTimer.current) {
+            clearTimeout(copyTimer.current);
+        }
+        setHasCopied(true);
+        onCopy?.();
+        copyTimer.current = setTimeout(() => {
+            setHasCopied(false);
+            copyTimer.current = undefined;
+        }, 3000);
+    });
+    useEffect(() => {
+        // Clear copyTimer on component unmount.
+        return () => {
+            if (copyTimer.current) {
+                clearTimeout(copyTimer.current);
+            }
+        };
+    }, []);
+    let icon = null;
+    let label = null;
+    if ('text' !== buttonStyle) {
+        icon = hasCopied ? _jsx(CheckmarkIcon, {}) : _jsx(ClipboardIcon, {});
+    }
+    const defaultLabel = __('Copy to clipboard', 'jetpack-components');
+    if ('icon' !== buttonStyle) {
+        label = hasCopied ? __('Copied!', 'jetpack-components') : defaultLabel;
+    }
+    return (_jsx(Button, { "aria-label": defaultLabel, icon: icon, children: label, ref: copyRef, ...buttonProps }));
+};
+export default CopyToClipboard;

package/build/components/copy-to-clipboard/types.d.ts

@@ -0,0 +1,6 @@
+import { ButtonProps } from '../button/types.js';
+export type CopyToClipboardProps = ButtonProps & {
+    buttonStyle?: 'icon' | 'text' | 'icon-text';
+    textToCopy: string | (() => string);
+    onCopy?: VoidFunction;
+};

package/build/components/copy-to-clipboard/types.js

@@ -0,0 +1 @@
+export {};

package/build/components/decorative-card/index.d.ts

@@ -0,0 +1,11 @@
+import type { DecorativeCardProps } from './types.js';
+import type React from 'react';
+import './style.scss';
+/**
+ * A decorative card used in the disconnection flow.
+ *
+ * @param {DecorativeCardProps} props - The properties.
+ * @return {React.ReactNode} - The DecorativeCard component.
+ */
+declare const DecorativeCard: React.FC<DecorativeCardProps>;
+export default DecorativeCard;

package/build/components/decorative-card/index.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './style.scss';
+/**
+ * A decorative card used in the disconnection flow.
+ *
+ * @param {DecorativeCardProps} props - The properties.
+ * @return {React.ReactNode} - The DecorativeCard component.
+ */
+const DecorativeCard = ({ format = 'horizontal', icon, imageUrl, }) => {
+    return (_jsxs("div", { className: 'jp-components__decorative-card ' +
+            (format ? 'jp-components__decorative-card--' + format : ''), children: [_jsx("div", { className: "jp-components__decorative-card__image", style: { backgroundImage: imageUrl ? `url( ${imageUrl} )` : '' } }), _jsx("div", { className: "jp-components__decorative-card__content", children: _jsx("div", { className: "jp-components__decorative-card__lines" }) }), icon ? (_jsx("div", { className: "jp-components__decorative-card__icon-container", children: _jsx("span", { className: 'jp-components__decorative-card__icon jp-components__decorative-card__icon--' + icon }) })) : null] }));
+};
+export default DecorativeCard;

package/build/components/decorative-card/types.d.ts

@@ -0,0 +1,14 @@
+export type DecorativeCardProps = {
+    /**
+     * The format of the card (horizontal or vertical)
+     */
+    format?: 'horizontal' | 'vertical';
+    /**
+     * An icon slug that can be used to show an icon (options are limited to what is in the stylesheet)
+     */
+    icon?: 'unlink';
+    /**
+     * URL for an image to show in the card.
+     */
+    imageUrl?: string;
+};

package/build/components/decorative-card/types.js

@@ -0,0 +1 @@
+export {};

package/build/components/dialog/index.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+type DialogProps = {
+    primary: React.ReactNode;
+    secondary?: React.ReactNode;
+    isTwoSections?: boolean;
+    isCard?: boolean;
+    containerProps: object;
+};
+/**
+ * Dialog component.
+ *
+ * @param {object}          props                - React component props.
+ * @param {React.ReactNode} props.primary        - Primary-section content.
+ * @param {React.ReactNode} props.secondary      - Secondary-section content.
+ * @param {boolean}         props.isTwoSections  - Handle two sections layout when true.
+ * @param {object}          props.containerProps - Props to pass to the container component.
+ * @return {React.ReactNode}                 Rendered dialog
+ */
+declare const Dialog: React.FC<DialogProps>;
+export default Dialog;

package/build/components/dialog/index.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import Col from '../layout/col/index.js';
+import Container from '../layout/container/index.js';
+import useBreakpointMatch from '../layout/use-breakpoint-match/index.js';
+import styles from './style.module.scss';
+/**
+ * Dialog component.
+ *
+ * @param {object}          props                - React component props.
+ * @param {React.ReactNode} props.primary        - Primary-section content.
+ * @param {React.ReactNode} props.secondary      - Secondary-section content.
+ * @param {boolean}         props.isTwoSections  - Handle two sections layout when true.
+ * @param {object}          props.containerProps - Props to pass to the container component.
+ * @return {React.ReactNode}                 Rendered dialog
+ */
+const Dialog = ({ primary, secondary, isTwoSections = false, ...containerProps }) => {
+    const [isSmall, isLowerThanLarge] = useBreakpointMatch(['sm', 'lg'], [null, '<']);
+    /*
+     * By convention, secondary section is not shown when:
+     * - layout is a two-sections setup
+     * - on mobile breakpoint (sm)
+     */
+    const hideSecondarySection = !isTwoSections && isSmall;
+    const classNames = clsx({
+        [styles['one-section-style']]: !isTwoSections,
+        [styles['is-viewport-small']]: isSmall,
+    });
+    return (_jsxs(Container, { className: classNames, horizontalSpacing: 0, horizontalGap: 0, fluid: false, ...containerProps, children: [!hideSecondarySection && (_jsxs(_Fragment, { children: [_jsx(Col, { sm: 4, md: isLowerThanLarge ? 4 : 5, lg: 7, className: styles.primary, children: primary }), _jsx(Col, { sm: 4, md: isLowerThanLarge ? 4 : 3, lg: 5, className: styles.secondary, children: secondary })] })), hideSecondarySection && _jsx(Col, { children: primary })] }));
+};
+export default Dialog;

package/build/components/diff-viewer/index.d.ts

@@ -0,0 +1,4 @@
+export declare const DiffViewer: ({ diff }: {
+    diff: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export default DiffViewer;

package/build/components/diff-viewer/index.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import parseFilename from './parse-filename.js';
+import parsePatch from './parse-patch.js';
+import styles from './styles.module.scss';
+const filename = ({ oldFileName, newFileName, }) => {
+    const { prev, next } = parseFilename(oldFileName, newFileName);
+    if (prev.prefix + prev.path === next.prefix + next.path) {
+        return (_jsxs(Fragment, { children: [prev.prefix && (_jsx("span", { className: styles['diff-viewer__path-prefix'], children: prev.prefix })), _jsx("span", { className: styles['diff-viewer__path'], children: prev.path })] }));
+    }
+    return (_jsxs(Fragment, { children: [!!prev.prefix && (_jsx("span", { className: styles['diff-viewer__path-prefix'], children: prev.prefix })), _jsx("span", { className: styles['diff-viewer__path'], children: prev.path }), ' → ', !!next.prefix && (_jsx("span", { className: styles['diff-viewer__path-prefix'], children: next.prefix })), _jsx("span", { className: styles['diff-viewer__path'], children: next.path })] }));
+};
+export const DiffViewer = ({ diff }) => (_jsx("div", { className: styles['diff-viewer'], children: parsePatch(diff).map((file, fileIndex) => (_jsxs(Fragment, { children: [_jsx("div", { className: styles['diff-viewer__filename'], children: filename(file) }, `file-${fileIndex}`), _jsxs("div", { className: styles['diff-viewer__file'], children: [_jsx("div", { className: styles['diff-viewer__line-numbers'], children: file.hunks.map((hunk, hunkIndex) => {
+                            let lineOffset = 0;
+                            return hunk.lines.map((line, index) => (_jsx("div", { children: line[0] === '+' ? '\u00a0' : hunk.oldStart + lineOffset++ }, `${hunkIndex}-${index}`)));
+                        }) }, "left-numbers"), _jsx("div", { className: styles['diff-viewer__line-numbers'], children: file.hunks.map((hunk, hunkIndex) => {
+                            let lineOffset = 0;
+                            return hunk.lines.map((line, index) => (_jsx("div", { children: line[0] === '-' ? '\u00a0' : hunk.newStart + lineOffset++ }, `${hunkIndex}-${index}`)));
+                        }) }, "right-numbers"), _jsx("div", { className: styles['diff-viewer__lines'], children: file.hunks.map((hunk, hunkIndex) => hunk.lines.map((line, index) => {
+                            const output = line.slice(1).replace(/^\s*$/, '\u00a0');
+                            const key = `${hunkIndex}-${index}`;
+                            switch (line[0]) {
+                                case ' ':
+                                    return _jsx("div", { children: output }, key);
+                                case '-':
+                                    return _jsx("del", { children: output }, key);
+                                case '+':
+                                    return _jsx("ins", { children: output }, key);
+                                default:
+                                    return undefined;
+                            }
+                        })) })] }, `diff-${fileIndex}`)] }, fileIndex))) }));
+export default DiffViewer;

package/build/components/diff-viewer/parse-filename.d.ts

@@ -0,0 +1,29 @@
+type ParsedFilename = {
+    prefix: string;
+    path: string;
+};
+/**
+ * Parse the filename from a diff
+ *
+ * Uses a heuristic to return proper file name indicators
+ *
+ * It searches for the longest shared prefix and returns
+ * whatever remains after that. If the paths are identical
+ * it only returns a single filename as we have detected
+ * that the diff compares changes to only one file.
+ *
+ * An exception is made for `a/` and `b/` prefixes often
+ * added by `git` and other utilities to separate the left
+ * from the right when looking at the contents of a single
+ * file over time.
+ *
+ * @param {string} prev - filename of left contents
+ * @param {string} next - filename of right contents
+ *
+ * @return {object} - parsed filename
+ */
+export default function (prev: string, next: string): {
+    prev: ParsedFilename;
+    next: ParsedFilename;
+};
+export {};