feat: add diff viewer component

Author: eshankvaish

package-lock.json

@@ -97,6 +97,7 @@
         "fast-json-patch": "^3.1.1",
         "jsonpath-plus": "^10.0.0",
         "react-dates": "^21.8.0",
+        "react-diff-viewer-continued": "^3.4.0",
         "react-monaco-editor": "^0.54.0",
         "sass": "^1.69.7",
         "tslib": "2.7.0"

package.json

@@ -0,0 +1,18 @@
+import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer-continued'
+import { diffViewerStyles } from './constants'
+import { DiffViewerProps } from './types'
+
+const DiffViewer = ({ oldValue, newValue, leftTitle, rightTitle }: DiffViewerProps) => (
+    <ReactDiffViewer
+        splitView
+        oldValue={oldValue}
+        newValue={newValue}
+        useDarkTheme={false}
+        leftTitle={leftTitle}
+        rightTitle={rightTitle}
+        compareMethod={DiffMethod.WORDS}
+        styles={diffViewerStyles}
+    />
+)
+
+export default DiffViewer

src/Shared/Components/DiffViewer/DiffViewer.component.tsx

@@ -0,0 +1,87 @@
+// Default variables and style keys
+
+import { ReactDiffViewerProps } from 'react-diff-viewer-continued'
+
+export const diffViewerStyles: ReactDiffViewerProps['styles'] = {
+    variables: {
+        light: {
+            diffViewerBackground: 'var(--N0)',
+            diffViewerColor: 'var(--N900)',
+            addedBackground: 'var(--G50)',
+            addedColor: 'var(--N900)',
+            removedBackground: 'var(--R50)',
+            removedColor: 'var(--N900)',
+            wordAddedBackground: 'var(--G200)',
+            wordRemovedBackground: 'var(--R200)',
+            addedGutterBackground: 'var(--G100)',
+            removedGutterBackground: 'var(--R100)',
+            gutterBackground: 'var(--N50)',
+            gutterBackgroundDark: 'var(--N50)',
+            highlightBackground: 'var(--N100)',
+            highlightGutterBackground: 'var(--N100)',
+            codeFoldGutterBackground: 'var(--B100)',
+            codeFoldBackground: 'var(--B50)',
+            emptyLineBackground: 'var(--N0)',
+            gutterColor: 'var(--N500)',
+            addedGutterColor: 'var(--N700)',
+            removedGutterColor: 'var(--N700)',
+            codeFoldContentColor: 'var(--B600)',
+            diffViewerTitleBackground: 'var(--N100)',
+            diffViewerTitleColor: 'var(--N700)',
+            diffViewerTitleBorderColor: 'var(--N200)',
+        },
+    },
+    diffContainer: {
+        fontSize: '13px',
+        fontWeight: 400,
+        lineHeight: '20px',
+
+        pre: {
+            lineHeight: '20px',
+            fontFamily: 'Inconsolata, monospace',
+        },
+    },
+    marker: {
+        pre: {
+            display: 'none',
+        },
+    },
+    gutter: {
+        padding: `0 6px`,
+        minWidth: '36px',
+
+        pre: {
+            opacity: 1,
+        },
+    },
+    wordDiff: {
+        padding: 0,
+    },
+    wordAdded: {
+        paddingInline: '2px',
+    },
+    wordRemoved: {
+        paddingInline: '2px',
+    },
+    codeFold: {
+        fontSize: '13px',
+        fontWeight: 400,
+        lineHeight: '20px',
+        height: '32px',
+
+        a: {
+            textDecoration: 'none !important',
+        },
+    },
+    titleBlock: {
+        padding: '8px 12px',
+        fontSize: '12px',
+        lineHeight: '20px',
+        fontWeight: 600,
+        borderBottom: 'none',
+
+        pre: {
+            fontFamily: 'Open Sans',
+        },
+    },
+}

src/Shared/Components/DiffViewer/constants.ts

@@ -0,0 +1 @@
+export { default as DiffViewer } from './DiffViewer.component'

src/Shared/Components/DiffViewer/index.ts

@@ -0,0 +1,4 @@
+import { ReactDiffViewerProps } from 'react-diff-viewer-continued'
+
+export interface DiffViewerProps
+    extends Pick<ReactDiffViewerProps, 'oldValue' | 'newValue' | 'leftTitle' | 'rightTitle'> {}

src/Shared/Components/DiffViewer/types.ts

@@ -57,3 +57,4 @@ export * from './Collapse'
 export * from './Security'
 export * from './Button'
 export * from './InvalidYAMLTippy'
+export * from './DiffViewer'