Migrate Diff to tsx

Nick-Lucas · Oct 11, 2021 · 70c68c5 · 70c68c5
1 parent 325c7c0
commit 70c68c5
Show file tree

Hide file tree

Showing 8 changed files with 71 additions and 191 deletions.
diff --git a/...term/app/renderer/components/diff/Diff.js → ...erm/app/renderer/components/diff/Diff.tsx b/...term/app/renderer/components/diff/Diff.js → ...erm/app/renderer/components/diff/Diff.tsx
@@ -2,15 +2,22 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 
-import { Hunk } from './Hunk'
 import { List } from 'app/lib/primitives'
 
+import { DiffEditor } from "app/lib/monaco"
+import type { editor } from "monaco-editor"
+
 export function Diff({ filePatch }) {
   const isRenamed =
     filePatch.oldName !== filePatch.newName &&
     !!filePatch.oldName &&
     !!filePatch.newName
 
+  const options: editor.IDiffEditorOptions = {
+    renderSideBySide: false,
+    renderOverviewRuler: false
+  }
+
   return (
     <DiffContainer>
       <PatchName>
@@ -28,16 +35,8 @@ export function Diff({ filePatch }) {
           </List.Label>
         )}
       </PatchName>
-
-      <HunksContainer>
-        {filePatch.blocks.length === 0 && (
-          <MessageText>Nothing to display!</MessageText>
-        )}
-
-        {filePatch.blocks.map((hunk, i) => (
-          <Hunk key={`hunk_${i}`} hunk={hunk} index={i} />
-        ))}
-      </HunksContainer>
+
+      <DiffEditor original={JSON.stringify(filePatch, null, 2)} modified={JSON.stringify({foo: filePatch}, null, 2)} theme="vs-dark" options={options} />
     </DiffContainer>
   )
 }
@@ -71,15 +70,3 @@ const PatchName = styled.div`
 const PatchNameSeparator = styled.div`
   padding: 0 0.5rem;
 `
-
-const HunksContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex: 0 0 auto;
-
-  margin-top: 1rem;
-`
-
-const MessageText = styled.div`
-  text-align: center;
-`
diff --git a/packages/giterm/app/renderer/components/diff/DiffPanel.js b/packages/giterm/app/renderer/components/diff/DiffPanel.js
@@ -9,8 +9,6 @@ import { Files } from './Files'
 import { Diff } from './Diff'
 import { useDiffData } from './useDiffData'
 
-import { DiffEditor } from "app/lib/monaco";
-
 export function DiffPanel() {
   const { loading, filePath, setFilePath, filePatch, diff } = useDiffData()
 
@@ -28,9 +26,7 @@ export function DiffPanel() {
 
       <Files patches={diff.files} filePath={filePath} onChange={setFilePath} />
 
-      {/* <Diff filePatch={filePatch} /> */}
-
-      <DiffEditor original={JSON.stringify(filePatch, null, 2)} modified={JSON.stringify({foo: filePatch}, null, 2)} theme="vs-dark" />
+      <Diff filePatch={filePatch} />
     </StyledPanel>
   )
 }

diff --git a/packages/giterm/app/renderer/components/diff/Hunk.js b/packages/giterm/app/renderer/components/diff/Hunk.js
diff --git a/...app/renderer/lib/primitives/list/Label.js → ...pp/renderer/lib/primitives/list/Label.tsx b/...app/renderer/lib/primitives/list/Label.js → ...pp/renderer/lib/primitives/list/Label.tsx
@@ -1,6 +1,12 @@
 import styled from 'styled-components'
 
-export const Label = styled.div`
+export interface LabelProps {
+  colour?: string
+  trimStart?: boolean
+  textAlign?: 'left' | 'right' | 'center' | 'justify' | 'match-parent'
+}
+
+export const Label = styled.div<LabelProps>`
   flex: 1;
 
   color: ${({ colour }) => colour || 'inherit'};

diff --git a/...m/app/renderer/lib/primitives/list/Row.js → .../app/renderer/lib/primitives/list/Row.tsx b/...m/app/renderer/lib/primitives/list/Row.js → .../app/renderer/lib/primitives/list/Row.tsx
@@ -1,7 +1,11 @@
 import styled from 'styled-components'
 import { colours } from 'app/lib/theme'
 
-export const Row = styled.div`
+export interface RowProps {
+  active?: boolean
+}
+
+export const Row = styled.div<RowProps>`
   display: flex;
   flex-direction: row;
   align-items: center;

diff --git a/...app/renderer/lib/primitives/list/index.js → ...pp/renderer/lib/primitives/list/index.tsx b/...app/renderer/lib/primitives/list/index.js → ...pp/renderer/lib/primitives/list/index.tsx
diff --git a/packages/giterm/package.json b/packages/giterm/package.json
@@ -64,7 +64,7 @@
     "redux-actions": "^2.2.1",
     "redux-localstorage": "^0.4.1",
     "redux-saga": "^1.1.3",
-    "styled-components": "^4.4.1",
+    "styled-components": "^5.3.1",
     "tslib": "^2.3.1",
     "xterm": "^4.8.1",
     "xterm-addon-fit": "^0.4.0",
@@ -83,6 +83,7 @@
     "@types/react-dom": "^16.9.14",
     "@types/react-router": "5.1.2",
     "@types/react-router-redux": "^4.0.53",
+    "@types/styled-components": "^5.1.15",
     "babel-plugin-module-resolver": "^4.0.0",
     "browser-sync": "^2.23.6",
     "electron": "8.5.5",

diff --git a/yarn.lock b/yarn.lock
@@ -1339,7 +1339,7 @@
     "@babel/parser" "^7.15.4"
     "@babel/types" "^7.15.4"
 
-"@babel/traverse@^7.0.0", "@babel/traverse@^7.1.0", "@babel/traverse@^7.10.5", "@babel/traverse@^7.12.5", "@babel/traverse@^7.13.0", "@babel/traverse@^7.15.4", "@babel/traverse@^7.4.3", "@babel/traverse@^7.5.5", "@babel/traverse@^7.7.0", "@babel/traverse@^7.7.2", "@babel/traverse@^7.9.0":
+"@babel/traverse@^7.0.0", "@babel/traverse@^7.1.0", "@babel/traverse@^7.10.5", "@babel/traverse@^7.12.5", "@babel/traverse@^7.13.0", "@babel/traverse@^7.15.4", "@babel/traverse@^7.4.3", "@babel/traverse@^7.4.5", "@babel/traverse@^7.5.5", "@babel/traverse@^7.7.0", "@babel/traverse@^7.7.2", "@babel/traverse@^7.9.0":
   version "7.15.4"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.15.4.tgz#ff8510367a144bfbff552d9e18e28f3e2889c22d"
   integrity sha512-W6lQD8l4rUbQR/vYgSuCAE75ADyyQvOpFVsvPPdkhf6lATXAsQIG9YdtOcu8BB1dZ0LKu+Zo3c1wEcbKeuhdlA==
@@ -1420,7 +1420,7 @@
     dir-compare "^2.4.0"
     fs-extra "^9.0.1"
 
-"@emotion/is-prop-valid@^0.8.1":
+"@emotion/is-prop-valid@^0.8.1", "@emotion/is-prop-valid@^0.8.8":
   version "0.8.8"
   resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
   integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
@@ -1432,7 +1432,12 @@
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
   integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
 
-"@emotion/unitless@^0.7.0":
+"@emotion/stylis@^0.8.4":
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
+  integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
+
+"@emotion/unitless@^0.7.0", "@emotion/unitless@^0.7.4":
   version "0.7.5"
   resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
   integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
@@ -3068,7 +3073,7 @@
   resolved "https://registry.yarnpkg.com/@types/history/-/history-3.2.5.tgz#be614208f1a10a20c414b4d3762d1f2b65b53ae4"
   integrity sha512-TqWYI0mlqS5qhH8MHgJJs0RcgvvZLxkn0bi2qK07liZqP7M9rl1kpJ6TCAUo5Cp4vP5DObIqHcky0MWyyQojVQ==
 
-"@types/hoist-non-react-statics@^3.3.0":
+"@types/hoist-non-react-statics@*", "@types/hoist-non-react-statics@^3.3.0":
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
   integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
@@ -3330,6 +3335,15 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c"
   integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==
 
+"@types/styled-components@^5.1.15":
+  version "5.1.15"
+  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.15.tgz#30855b40aa80b3b4e4c0e43a4af366e7c246d148"
+  integrity sha512-4evch8BRI3AKgb0GAZ/sn+mSeB+Dq7meYtMi7J/0Mg98Dt1+r8fySOek7Sjw1W+Wskyjc93565o5xWAT/FdY0Q==
+  dependencies:
+    "@types/hoist-non-react-statics" "*"
+    "@types/react" "*"
+    csstype "^3.0.2"
+
 "@types/tmp@^0.0.33":
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/@types/tmp/-/tmp-0.0.33.tgz#1073c4bc824754ae3d10cfab88ab0237ba964e4d"
@@ -4732,7 +4746,7 @@ babel-plugin-remove-graphql-queries@^2.16.1:
   resolved "https://registry.yarnpkg.com/babel-plugin-remove-graphql-queries/-/babel-plugin-remove-graphql-queries-2.16.1.tgz#bacfcd87eabdfffe025072c11602a9586cd0285a"
   integrity sha512-PkHJuRodMp4p617a/ZVhV8elBhRoFpOTpdu2DaApXJFIsDJWhjZ8d4BGbbFCT/yKJrhRDTdqg1r5AhWEaEUKkw==
 
-"babel-plugin-styled-components@>= 1":
+"babel-plugin-styled-components@>= 1", "babel-plugin-styled-components@>= 1.12.0":
   version "1.13.2"
   resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.13.2.tgz#ebe0e6deff51d7f93fceda1819e9b96aeb88278d"
   integrity sha512-Vb1R3d4g+MUfPQPVDMCGjm3cDocJEUTR7Xq7QS95JWWeksN1wdFRYpD2kulDgI3Huuaf1CZd+NK4KQmqUFh5dA==
@@ -6752,6 +6766,15 @@ css-to-react-native@^2.2.2:
     css-color-keywords "^1.0.0"
     postcss-value-parser "^3.3.0"
 
+css-to-react-native@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756"
+  integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==
+  dependencies:
+    camelize "^1.0.0"
+    css-color-keywords "^1.0.0"
+    postcss-value-parser "^4.0.2"
+
 css-tree@1.0.0-alpha.37:
   version "1.0.0-alpha.37"
   resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.37.tgz#98bebd62c4c1d9f960ec340cf9f7522e30709a22"
@@ -10803,7 +10826,7 @@ hogan.js@3.0.2:
     mkdirp "0.3.0"
     nopt "1.0.10"
 
-hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -19835,7 +19858,7 @@ style-to-object@^0.3.0:
   dependencies:
     inline-style-parser "0.1.1"
 
-styled-components@^4.3.2, styled-components@^4.4.1:
+styled-components@^4.3.2:
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-4.4.1.tgz#e0631e889f01db67df4de576fedaca463f05c2f2"
   integrity sha512-RNqj14kYzw++6Sr38n7197xG33ipEOktGElty4I70IKzQF1jzaD1U4xQ+Ny/i03UUhHlC5NWEO+d8olRCDji6g==
@@ -19854,6 +19877,22 @@ styled-components@^4.3.2, styled-components@^4.4.1:
     stylis-rule-sheet "^0.0.10"
     supports-color "^5.5.0"
 
+styled-components@^5.3.1:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.1.tgz#8a86dcd31bff7049c2ed408bae36fa23f03f071a"
+  integrity sha512-JThv2JRzyH0NOIURrk9iskdxMSAAtCfj/b2Sf1WJaCUsloQkblepy1jaCLX/bYE+mhYo3unmwVSI9I5d9ncSiQ==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/traverse" "^7.4.5"
+    "@emotion/is-prop-valid" "^0.8.8"
+    "@emotion/stylis" "^0.8.4"
+    "@emotion/unitless" "^0.7.4"
+    babel-plugin-styled-components ">= 1.12.0"
+    css-to-react-native "^3.0.0"
+    hoist-non-react-statics "^3.0.0"
+    shallowequal "^1.1.0"
+    supports-color "^5.5.0"
+
 stylehacks@^4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.3.tgz#6718fcaf4d1e07d8a1318690881e8d96726a71d5"