Skip to content

Commit 27b19a5

Browse files
Kira-PilotKira-Pilot
committed
POC
1 parent ccf6f4e commit 27b19a5

File tree

6 files changed

+516
-0
lines changed

6 files changed

+516
-0
lines changed

‎package.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"dependencies": {
3+
"react-diff-viewer": "^3.1.1"
4+
}
5+
}

‎site/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@
4444
"history": "5.3.0",
4545
"just-debounce-it": "3.0.1",
4646
"react": "17.0.2",
47+
"react-diff-viewer": "^3.1.1",
4748
"react-dom": "17.0.2",
4849
"react-helmet": "6.1.0",
4950
"react-markdown": "8.0.3",

‎site/src/pages/AuditPage/AuditPageView.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { PageHeader, PageHeaderSubtitle, PageHeaderTitle } from "components/Page
55
import { Stack } from "components/Stack/Stack"
66
import { AuditHelpTooltip } from "components/Tooltips"
77
import { FC } from "react"
8+
import { Test } from "./Test"
89

910
export const Language = {
1011
title: "Audit",
@@ -33,6 +34,7 @@ export const AuditPageView: FC = () => {
3334
code="coder audit [organization_ID]"
3435
/>
3536
</Stack>
37+
<Test />
3638
</Margins>
3739
)
3840
}

‎site/src/pages/AuditPage/Test.tsx

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { FC } from "react"
2+
import ReactDiffViewer, { DiffMethod } from "react-diff-viewer"
3+
import { colors } from "theme/colors"
4+
5+
const oldCode = `
6+
workspace_name: "alice-workspace"
7+
workspace_auto_off: true,
8+
template_version_id: "62dee21f-c66785765a8753a9f2aa6786"
9+
`
10+
const newCode = `
11+
workspace_name: "aharvey"
12+
workspace_auto_off: false,
13+
template_version_id: "6287b30c-b9bd666d3ec9d0a9e067c27f"
14+
`
15+
16+
type ExtendedDiffViewer = React.Component
17+
18+
const Diffed = ReactDiffViewer as any as {
19+
new (): ExtendedDiffViewer
20+
}
21+
22+
const newStyles = {
23+
variables: {
24+
dark: {
25+
removedBackground: colors.red[16],
26+
removedGutterBackground: colors.red[16],
27+
addedBackground: colors.green[16],
28+
addedGutterBackground: colors.green[16],
29+
// wordAddedBackground: colors.green[16],
30+
},
31+
},
32+
line: {
33+
padding: "10px 2px",
34+
"&:hover": {
35+
background: "#a26ea1",
36+
},
37+
},
38+
}
39+
40+
const props: any = {
41+
oldValue: oldCode,
42+
newValue: newCode,
43+
splitView: true,
44+
useDarkTheme: true,
45+
styles: newStyles,
46+
compareMethod: DiffMethod.WORDS,
47+
}
48+
49+
export const Test: FC = () => {
50+
return <Diffed {...props} />
51+
}

‎site/yarn.lock

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5063,6 +5063,11 @@ class-utils@^0.3.5:
50635063
isobject "^3.0.0"
50645064
static-extend "^0.1.1"
50655065

5066+
classnames@^2.2.6:
5067+
version "2.3.1"
5068+
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
5069+
integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
5070+
50665071
clean-css@^4.2.3:
50675072
version "4.2.4"
50685073
resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.4.tgz#733bf46eba4e607c6891ea57c24a989356831178"
@@ -5468,6 +5473,16 @@ create-ecdh@^4.0.0:
54685473
bn.js "^4.1.0"
54695474
elliptic "^6.5.3"
54705475

5476+
create-emotion@^10.0.14, create-emotion@^10.0.27:
5477+
version "10.0.27"
5478+
resolved "https://registry.yarnpkg.com/create-emotion/-/create-emotion-10.0.27.tgz#cb4fa2db750f6ca6f9a001a33fbf1f6c46789503"
5479+
integrity sha512-fIK73w82HPPn/RsAij7+Zt8eCE8SptcJ3WoRMfxMtjteYxud8GDTKKld7MYwAX2TVhrw29uR1N/bVGxeStHILg==
5480+
dependencies:
5481+
"@emotion/cache" "^10.0.27"
5482+
"@emotion/serialize" "^0.11.15"
5483+
"@emotion/sheet" "0.9.4"
5484+
"@emotion/utils" "0.11.3"
5485+
54715486
create-hash@^1.1.0, create-hash@^1.1.2, create-hash@^1.2.0:
54725487
version "1.2.0"
54735488
resolved "https://registry.yarnpkg.com/create-hash/-/create-hash-1.2.0.tgz#889078af11a63756bcfb59bd221996be3a9ef196"
@@ -6199,6 +6214,14 @@ emotion-theming@^10.0.27:
61996214
"@emotion/weak-memoize" "0.2.5"
62006215
hoist-non-react-statics "^3.3.0"
62016216

6217+
emotion@^10.0.14:
6218+
version "10.0.27"
6219+
resolved "https://registry.yarnpkg.com/emotion/-/emotion-10.0.27.tgz#f9ca5df98630980a23c819a56262560562e5d75e"
6220+
integrity sha512-2xdDzdWWzue8R8lu4G76uWX5WhyQuzATon9LmNeCy/2BHVC6dsEpfhN1a0qhELgtDVdjyEA6J8Y/VlI5ZnaH0g==
6221+
dependencies:
6222+
babel-plugin-emotion "^10.0.27"
6223+
create-emotion "^10.0.27"
6224+
62026225
encodeurl@~1.0.2:
62036226
version "1.0.2"
62046227
resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
@@ -9707,6 +9730,11 @@ memfs@^3.1.2, memfs@^3.4.1:
97079730
dependencies:
97089731
fs-monkey "1.0.3"
97099732

9733+
memoize-one@^5.0.4:
9734+
version "5.2.1"
9735+
resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
9736+
integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
9737+
97109738
memoizerific@^1.11.3:
97119739
version "1.11.3"
97129740
resolved "https://registry.yarnpkg.com/memoizerific/-/memoizerific-1.11.3.tgz#7c87a4646444c32d75438570905f2dbd1b1a805a"
@@ -11590,6 +11618,18 @@ react-colorful@^5.1.2:
1159011618
resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.5.1.tgz#29d9c4e496f2ca784dd2bb5053a3a4340cfaf784"
1159111619
integrity sha512-M1TJH2X3RXEt12sWkpa6hLc/bbYS0H6F4rIqjQZ+RxNBstpY67d9TrFXtqdZwhpmBXcCwEi7stKqFue3ZRkiOg==
1159211620

11621+
react-diff-viewer@^3.1.1:
11622+
version "3.1.1"
11623+
resolved "https://registry.yarnpkg.com/react-diff-viewer/-/react-diff-viewer-3.1.1.tgz#21ac9c891193d05a3734bfd6bd54b107ee6d46cc"
11624+
integrity sha512-rmvwNdcClp6ZWdS11m1m01UnBA4OwYaLG/li0dB781e/bQEzsGyj+qewVd6W5ztBwseQ72pO7nwaCcq5jnlzcw==
11625+
dependencies:
11626+
classnames "^2.2.6"
11627+
create-emotion "^10.0.14"
11628+
diff "^4.0.1"
11629+
emotion "^10.0.14"
11630+
memoize-one "^5.0.4"
11631+
prop-types "^15.6.2"
11632+
1159311633
react-docgen-typescript@^2.0.0:
1159411634
version "2.2.2"
1159511635
resolved "https://registry.yarnpkg.com/react-docgen-typescript/-/react-docgen-typescript-2.2.2.tgz#4611055e569edc071204aadb20e1c93e1ab1659c"

0 commit comments

Comments
 (0)