@juspay/blend-design-system 0.0.37-beta.2 → 0.0.37-beta.3

package/lib/components/CodeBlock/CodeBlockDiffView/CodeBlockDiffView.tsx

@@ -0,0 +1,488 @@
+import {
+    useCallback,
+    useEffect,
+    useMemo,
+    useState,
+    type CSSProperties,
+    type ReactNode,
+} from 'react'
+import styled from 'styled-components'
+import { ChevronDown, ChevronUp, MoreHorizontal } from 'lucide-react'
+import Block from '../../Primitives/Block/Block'
+import {
+    renderDiffUnifiedRowPair,
+    type LineCounter,
+} from '../CodeBlockLineParts'
+import {
+    getGapHiddenLineCount,
+    getGapLineTotal,
+    isGapFullyExpanded,
+} from './utils'
+import { getDiffCollapsedRangeKey } from '../utils'
+import type { CodeBlockDiffViewProps } from './types'
+import type { DiffGapExpansionState } from './types'
+import { DiffLineType } from '../types'
+
+const lineBlockMotion: CSSProperties = {
+    transition: 'opacity 0.2s ease-out',
+}
+
+const expandBarMotion: CSSProperties = {
+    transition: 'background-color 0.15s ease, opacity 0.15s ease',
+}
+
+const ExpandButton = styled.button<{
+    $color?: string | number
+    $padding?: string | number
+    $borderRadius?: string | number
+    $hoverBackgroundColor?: string | number
+}>`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background-color: transparent;
+    color: ${(props) => props.$color ?? 'inherit'};
+    padding: ${(props) => props.$padding || '2px 6px'};
+    border-radius: ${(props) => props.$borderRadius || '4px'};
+    cursor: pointer;
+    flex-shrink: 0;
+    transition:
+        background-color 0.15s ease,
+        opacity 0.15s ease;
+
+    &:hover:not(:disabled) {
+        background-color: ${(props) =>
+            props.$hoverBackgroundColor || 'rgba(0,0,0,0.05)'};
+    }
+
+    &:disabled {
+        cursor: not-allowed;
+    }
+`
+
+const CodeBlockDiffView = ({
+    diffLines,
+    diffViewSegments,
+    codeContentId,
+    tokens,
+    rowCtx,
+    diffExpandChunk,
+}: CodeBlockDiffViewProps) => {
+    const [gapExpansionByKey, setGapExpansionByKey] = useState<
+        Map<string, DiffGapExpansionState>
+    >(() => new Map())
+
+    useEffect(() => {
+        setGapExpansionByKey(new Map())
+    }, [diffLines])
+
+    const expandTowardFileStart = useCallback(
+        (gapStart: number, gapEnd: number, gapKey: string) => {
+            setGapExpansionByKey((prev) => {
+                const next = new Map(prev)
+                const cur = next.get(gapKey) ?? {
+                    revealedFromTop: 0,
+                    revealedFromBottom: 0,
+                }
+                const total = getGapLineTotal(gapStart, gapEnd)
+                const room =
+                    total - cur.revealedFromTop - cur.revealedFromBottom
+                const add = Math.min(diffExpandChunk, room)
+                if (add <= 0) {
+                    return prev
+                }
+                next.set(gapKey, {
+                    revealedFromTop: cur.revealedFromTop + add,
+                    revealedFromBottom: cur.revealedFromBottom,
+                })
+                return next
+            })
+        },
+        [diffExpandChunk]
+    )
+
+    const expandTowardFileEnd = useCallback(
+        (gapStart: number, gapEnd: number, gapKey: string) => {
+            setGapExpansionByKey((prev) => {
+                const next = new Map(prev)
+                const cur = next.get(gapKey) ?? {
+                    revealedFromTop: 0,
+                    revealedFromBottom: 0,
+                }
+                const total = getGapLineTotal(gapStart, gapEnd)
+                const room =
+                    total - cur.revealedFromTop - cur.revealedFromBottom
+                const add = Math.min(diffExpandChunk, room)
+                if (add <= 0) {
+                    return prev
+                }
+                next.set(gapKey, {
+                    revealedFromTop: cur.revealedFromTop,
+                    revealedFromBottom: cur.revealedFromBottom + add,
+                })
+                return next
+            })
+        },
+        [diffExpandChunk]
+    )
+
+    const expandGapFull = useCallback(
+        (gapStart: number, gapEnd: number, gapKey: string) => {
+            setGapExpansionByKey((prev) => {
+                const next = new Map(prev)
+                const total = getGapLineTotal(gapStart, gapEnd)
+                next.set(gapKey, {
+                    revealedFromTop: total,
+                    revealedFromBottom: 0,
+                })
+                return next
+            })
+        },
+        []
+    )
+
+    const renderColumnPair = useCallback(
+        (
+            start: number,
+            end: number,
+            segmentKey: string,
+            lineCounters: LineCounter
+        ) => {
+            const rows: ReactNode[] = []
+
+            let i = start
+            while (i <= end) {
+                const line = diffLines[i]
+
+                if (line.type === DiffLineType.UNCHANGED) {
+                    rows.push(
+                        renderDiffUnifiedRowPair(
+                            line,
+                            line,
+                            `${segmentKey}-same-${i}`,
+                            lineCounters,
+                            rowCtx,
+                            tokens
+                        )
+                    )
+                    i += 1
+                    continue
+                }
+
+                const removedLines: typeof diffLines = []
+                const addedLines: typeof diffLines = []
+                const changeBlockStart = i
+
+                while (
+                    i <= end &&
+                    diffLines[i].type !== DiffLineType.UNCHANGED
+                ) {
+                    if (diffLines[i].type === DiffLineType.REMOVED) {
+                        removedLines.push(diffLines[i])
+                    } else {
+                        addedLines.push(diffLines[i])
+                    }
+                    i += 1
+                }
+
+                const pairedRows = Math.max(
+                    removedLines.length,
+                    addedLines.length
+                )
+                for (let rowIdx = 0; rowIdx < pairedRows; rowIdx++) {
+                    rows.push(
+                        renderDiffUnifiedRowPair(
+                            removedLines[rowIdx],
+                            addedLines[rowIdx],
+                            `${segmentKey}-chg-${changeBlockStart}-${rowIdx}`,
+                            lineCounters,
+                            rowCtx,
+                            tokens
+                        )
+                    )
+                }
+            }
+            const fontSize =
+                typeof tokens.body.code.fontSize === 'number'
+                    ? `${tokens.body.code.fontSize}px`
+                    : tokens.body.code.fontSize
+            return (
+                <Block
+                    key={segmentKey}
+                    width="100%"
+                    style={lineBlockMotion}
+                    padding={`0 ${tokens.body.padding.x}`}
+                    backgroundColor={tokens.backgroundColor}
+                >
+                    <pre
+                        id={`${codeContentId}-diff-${segmentKey}`}
+                        style={{
+                            margin: 0,
+                            display: 'flex',
+                            flexDirection: 'column',
+                            whiteSpace: 'normal',
+                            fontFamily: tokens.body.code.fontFamily,
+                            fontSize,
+                            lineHeight:
+                                typeof tokens.body.code.lineHeight === 'number'
+                                    ? `${tokens.body.code.lineHeight}px`
+                                    : tokens.body.code.lineHeight,
+                        }}
+                    >
+                        {rows}
+                    </pre>
+                </Block>
+            )
+        },
+        [codeContentId, diffLines, rowCtx, tokens]
+    )
+
+    const renderCollapsedGap = useCallback(
+        (
+            gapStart: number,
+            gapEnd: number,
+            lineCounters: LineCounter,
+            segmentIndex: number
+        ) => {
+            const gapKey = getDiffCollapsedRangeKey(gapStart, gapEnd)
+            const expansion = gapExpansionByKey.get(gapKey)
+            const hiddenCount = getGapHiddenLineCount(
+                gapStart,
+                gapEnd,
+                expansion
+            )
+
+            if (isGapFullyExpanded(gapStart, gapEnd, expansion)) {
+                return (
+                    <Block
+                        key={`gap-full-${gapKey}-${segmentIndex}`}
+                        display="flex"
+                        flexDirection="column"
+                        width="100%"
+                        style={lineBlockMotion}
+                    >
+                        {renderColumnPair(
+                            gapStart,
+                            gapEnd,
+                            `gap-expanded-${gapKey}`,
+                            lineCounters
+                        )}
+                    </Block>
+                )
+            }
+
+            const topShown = expansion?.revealedFromTop ?? 0
+            const bottomShown = expansion?.revealedFromBottom ?? 0
+
+            return (
+                <Block
+                    key={`gap-partial-${gapKey}-${segmentIndex}`}
+                    display="flex"
+                    flexDirection="column"
+                    width="100%"
+                >
+                    {topShown > 0 &&
+                        renderColumnPair(
+                            gapStart,
+                            gapStart + topShown - 1,
+                            `gap-top-${gapKey}`,
+                            lineCounters
+                        )}
+
+                    {hiddenCount > 0 && (
+                        <Block
+                            display="flex"
+                            alignItems="center"
+                            width="100%"
+                            padding={tokens.body.expandContext.padding}
+                            borderTop={tokens.body.expandContext.borderTop}
+                            borderBottom={
+                                tokens.body.expandContext.borderBottom
+                            }
+                            backgroundColor={
+                                tokens.body.expandContext.backgroundColor
+                            }
+                            style={expandBarMotion}
+                            role="separator"
+                            aria-label="Collapsed lines. Use controls to load more context."
+                        >
+                            <ExpandButton
+                                type="button"
+                                onClick={() =>
+                                    expandTowardFileStart(
+                                        gapStart,
+                                        gapEnd,
+                                        gapKey
+                                    )
+                                }
+                                disabled={hiddenCount === 0}
+                                aria-label="Load more lines from above"
+                                $color={tokens.body.expandContext.color}
+                                $padding={
+                                    tokens.body.expandContext.button.padding
+                                }
+                                $borderRadius={
+                                    tokens.body.expandContext.button
+                                        .borderRadius as string
+                                }
+                                $hoverBackgroundColor={
+                                    tokens.body.expandContext.button
+                                        .hoverBackgroundColor as string
+                                }
+                                style={{
+                                    opacity:
+                                        hiddenCount === 0
+                                            ? tokens.body.expandContext.button
+                                                  .disabledOpacity
+                                            : tokens.body.expandContext.button
+                                                  .opacity,
+                                }}
+                            >
+                                <ChevronDown
+                                    size={
+                                        tokens.body.expandContext.button
+                                            .iconSize
+                                    }
+                                    aria-hidden="true"
+                                />
+                            </ExpandButton>
+                            <Block
+                                display="flex"
+                                justifyContent="center"
+                                alignItems="center"
+                                minWidth="0"
+                                style={{ flex: '1 1 0%' }}
+                            >
+                                <ExpandButton
+                                    type="button"
+                                    onClick={() =>
+                                        expandGapFull(gapStart, gapEnd, gapKey)
+                                    }
+                                    aria-label="Expand full collapsed section"
+                                    $color={tokens.body.expandContext.color}
+                                    $padding={
+                                        tokens.body.expandContext.button
+                                            .dotsPadding
+                                    }
+                                    $borderRadius={
+                                        tokens.body.expandContext.button
+                                            .borderRadius as string
+                                    }
+                                    $hoverBackgroundColor={
+                                        tokens.body.expandContext.button
+                                            .hoverBackgroundColor as string
+                                    }
+                                    style={{
+                                        opacity: 0.8,
+                                    }}
+                                >
+                                    <MoreHorizontal
+                                        size={
+                                            tokens.body.expandContext.button
+                                                .iconSize
+                                        }
+                                        aria-hidden="true"
+                                    />
+                                </ExpandButton>
+                            </Block>
+                            <ExpandButton
+                                type="button"
+                                onClick={() =>
+                                    expandTowardFileEnd(
+                                        gapStart,
+                                        gapEnd,
+                                        gapKey
+                                    )
+                                }
+                                disabled={hiddenCount === 0}
+                                aria-label="Load more lines from below"
+                                $color={tokens.body.expandContext.color}
+                                $padding={
+                                    tokens.body.expandContext.button.padding
+                                }
+                                $borderRadius={
+                                    tokens.body.expandContext.button
+                                        .borderRadius as string
+                                }
+                                $hoverBackgroundColor={
+                                    tokens.body.expandContext.button
+                                        .hoverBackgroundColor as string
+                                }
+                                style={{
+                                    opacity:
+                                        hiddenCount === 0
+                                            ? tokens.body.expandContext.button
+                                                  .disabledOpacity
+                                            : tokens.body.expandContext.button
+                                                  .opacity,
+                                }}
+                            >
+                                <ChevronUp
+                                    size={
+                                        tokens.body.expandContext.button
+                                            .iconSize
+                                    }
+                                    aria-hidden="true"
+                                />
+                            </ExpandButton>
+                        </Block>
+                    )}
+
+                    {bottomShown > 0 &&
+                        renderColumnPair(
+                            gapEnd - bottomShown + 1,
+                            gapEnd,
+                            `gap-bottom-${gapKey}`,
+                            lineCounters
+                        )}
+                </Block>
+            )
+        },
+        [
+            expandGapFull,
+            expandTowardFileEnd,
+            expandTowardFileStart,
+            gapExpansionByKey,
+            renderColumnPair,
+            tokens,
+        ]
+    )
+
+    const body = useMemo(() => {
+        const lineCounters: LineCounter = { left: 0, right: 0 }
+        return diffViewSegments.map((segment, segIdx) => {
+            if (segment.type === 'lines') {
+                return renderColumnPair(
+                    segment.start,
+                    segment.end,
+                    `lines-${segment.start}-${segment.end}-${segIdx}`,
+                    lineCounters
+                )
+            }
+            return renderCollapsedGap(
+                segment.start,
+                segment.end,
+                lineCounters,
+                segIdx
+            )
+        })
+    }, [diffViewSegments, renderColumnPair, renderCollapsedGap])
+
+    return (
+        <Block
+            display="flex"
+            flexDirection="column"
+            width="100%"
+            height="100%"
+            style={{ minWidth: 'fit-content' }}
+            padding={`${tokens.body.padding.y} 0`}
+        >
+            {body}
+        </Block>
+    )
+}
+
+CodeBlockDiffView.displayName = 'CodeBlockDiffView'
+
+export default CodeBlockDiffView

package/lib/components/CodeBlock/CodeBlockDiffView/types.ts

@@ -0,0 +1,18 @@
+import type { CodeBlockTokenType } from '../codeBlock.token'
+import type { DiffLine, DiffViewSegment } from '../types'
+import type { DiffRowRenderContext } from '../CodeBlockLineParts'
+
+export type DiffGapExpansionState = {
+    revealedFromTop: number
+    revealedFromBottom: number
+}
+
+export interface CodeBlockDiffViewProps {
+    diffLines: DiffLine[]
+    diffViewSegments: DiffViewSegment[]
+    codeContentId: string
+    tokens: CodeBlockTokenType
+    rowCtx: DiffRowRenderContext
+    /** Lines to reveal per click when expanding from the top or bottom of a gap */
+    diffExpandChunk: number
+}

package/lib/components/CodeBlock/CodeBlockDiffView/utils.ts

@@ -0,0 +1,26 @@
+import type { DiffGapExpansionState } from './types'
+
+export const getGapLineTotal = (start: number, end: number): number =>
+    end - start + 1
+
+export const getGapHiddenLineCount = (
+    start: number,
+    end: number,
+    state: DiffGapExpansionState | undefined
+): number => {
+    const total = getGapLineTotal(start, end)
+    const top = state?.revealedFromTop ?? 0
+    const bottom = state?.revealedFromBottom ?? 0
+    return Math.max(0, total - top - bottom)
+}
+
+export const isGapFullyExpanded = (
+    start: number,
+    end: number,
+    state: DiffGapExpansionState | undefined
+): boolean => {
+    const total = getGapLineTotal(start, end)
+    const top = state?.revealedFromTop ?? 0
+    const bottom = state?.revealedFromBottom ?? 0
+    return top + bottom >= total
+}