docs: refactor site demo to TypeScript

otakustay · Feb 24, 2023 · 964094d · 964094d
1 parent 3685f87
commit 964094d
Show file tree

Hide file tree

Showing 32 changed files with 552 additions and 271 deletions.
diff --git a/package.json b/package.json
@@ -46,6 +46,8 @@
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@ecomfe/eslint-config": "^7.4.0",
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
     "@reskript/cli": "5.7.4",
     "@reskript/cli-build": "5.7.4",
     "@reskript/cli-dev": "5.7.4",
@@ -56,6 +58,7 @@
     "@types/lodash": "^4.14.191",
     "@types/react-test-renderer": "^18.0.0",
     "@types/refractor": "^2.8.0",
+    "@types/sha1": "^1.1.3",
     "@types/warning": "^3.0.0",
     "@typescript-eslint/eslint-plugin": "^5.53.0",
     "@typescript-eslint/parser": "^5.53.0",
@@ -106,7 +109,6 @@
     "sha1": "^1.1.1",
     "standard-version": "^9.5.0",
     "style-loader": "^3.3.1",
-    "styled-components": "^5.3.6",
     "typescript": "^4.9.5",
     "unidiff": "^1.0.2",
     "vitest": "^0.28.5",

diff --git a/site/components/App/app.global.less b/site/components/App/app.global.less
@@ -5,6 +5,10 @@
     --background-color-pure: #fff;
     --border-color: #e8e8e8;
     --heading-color: #252525;
+    --link-text-color: #1890ff;
+    --link-text-hover-color: #40a9ff;
+    --link-text-active-color: #096dd9;
+    --disabled-text-color: #d9d9d9;
 }
 
 html,

diff --git a/site/components/App/index.js → site/components/App/index.tsx b/site/components/App/index.js → site/components/App/index.tsx
@@ -11,8 +11,13 @@ import './app.global.less';
 
 const fakeIndex = () => sha(uniqueId()).slice(0, 9);
 
-const App = () => {
-    const [{diff, source}, setData] = useState({diff: '', source: ''});
+interface DiffData {
+    diff: string;
+    source: string | null;
+}
+
+export default function App() {
+    const [{diff, source}, setData] = useState<DiffData>({diff: '', source: ''});
     const file = useMemo(
         () => {
             if (!diff) {
@@ -39,7 +44,7 @@ const App = () => {
                         <>
                             <Configuration />
                             <DiffView
-                                key={sha(diff) + (source ? sha(source) : '')}
+                                key={`${sha(diff)}${source ? sha(source) : ''}`}
                                 type={file.type}
                                 hunks={file.hunks}
                                 oldSource={source}
@@ -50,6 +55,4 @@ const App = () => {
             </div>
         </ConfigurationProvider>
     );
-};
-
-export default App;
+}
diff --git a/.../components/Configuration/OptionsModal.js → ...components/Configuration/OptionsModal.tsx b/.../components/Configuration/OptionsModal.js → ...components/Configuration/OptionsModal.tsx
@@ -1,25 +1,46 @@
+import {ReactNode} from 'react';
 import {Modal, Radio, Switch} from 'antd';
 import styles from './OptionsModal.less';
+import {MarkEditsType, ViewType} from 'react-diff-view';
 
 /* eslint-disable react/jsx-no-bind */
 
 const {Group: RadioGroup, Button: RadioButton} = Radio;
 
-const Row = ({title, tooltip, children}) => (
-    <div className={styles.row}>
-        <div className={styles.field}>
-            <span className={styles.rowTitle}>
-                {title}
-            </span>
-            {children}
-        </div>
-        <div className={styles.tooltip}>
-            {tooltip}
+interface RowProps {
+    title: string;
+    tooltip: string;
+    children: ReactNode;
+}
+
+function Row({title, tooltip, children}: RowProps) {
+    return (
+        <div className={styles.row}>
+            <div className={styles.field}>
+                <span className={styles.rowTitle}>
+                    {title}
+                </span>
+                {children}
+            </div>
+            <div className={styles.tooltip}>
+                {tooltip}
+            </div>
         </div>
-    </div>
-);
+    );
+}
+
+interface Props {
+    visible: boolean;
+    viewType: ViewType;
+    editsType: MarkEditsType;
+    showGutter: boolean;
+    onSwitchViewType: (value: ViewType) => void;
+    onSwitchEditsType: (value: MarkEditsType) => void;
+    onSwitchGutterVisibility: (value: boolean) => void;
+    onClose: () => void;
+}
 
-const OptionsModal = props => {
+export default function OptionsModal(props: Props) {
     const {
         visible,
         viewType,
@@ -51,6 +72,4 @@ const OptionsModal = props => {
             </Row>
         </Modal>
     );
-};
-
-export default OptionsModal;
+}
diff --git a/site/components/Configuration/index.js → site/components/Configuration/index.tsx b/site/components/Configuration/index.js → site/components/Configuration/index.tsx
@@ -13,14 +13,14 @@ import styles from './index.less';
 
 const {Option} = Select;
 
-const useBoolean = initialValue => {
+function useBoolean(initialValue: boolean) {
     const [value, setValue] = useState(initialValue);
     const on = useCallback(() => setValue(true), []);
     const off = useCallback(() => setValue(false), []);
-    return [value, on, off];
-};
+    return [value, on, off] as const;
+}
 
-const Configuration = () => {
+export default function Configuration() {
     const [isModalVisible, openModal, closeModal] = useBoolean(false);
     const configuration = useConfiguration();
     const switchViewType = useSwitchViewType();
@@ -54,6 +54,4 @@ const Configuration = () => {
             />
         </div>
     );
-};
-
-export default Configuration;
+}
diff --git a/site/components/DiffView/Comment/Display.js → site/components/DiffView/Comment/Display.tsx b/site/components/DiffView/Comment/Display.js → site/components/DiffView/Comment/Display.tsx
@@ -1,5 +1,6 @@
 import {useCallback} from 'react';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
+import InteractiveLabel from '../../InteractiveLabel';
 
 const Text = styled.div`
     white-space: pre;
@@ -14,7 +15,15 @@ const Footer = styled.footer`
     margin-top: 12px;
 `;
 
-export default function CommentDisplay({commentId, content, time, onEdit, onDelete}) {
+interface Props {
+    commentId: string;
+    content: string;
+    time: Date;
+    onEdit: (id: string) => void;
+    onDelete: (id: string) => void;
+}
+
+export default function CommentDisplay({commentId, content, time, onEdit, onDelete}: Props) {
     const edit = useCallback(
         () => onEdit(commentId),
         [commentId, onEdit]
@@ -31,8 +40,8 @@ export default function CommentDisplay({commentId, content, time, onEdit, onDele
             </Text>
             <Footer>
                 <time>{time.toLocaleDateString()} {time.toLocaleTimeString()}</time>
-                <a onClick={edit}>edit</a>
-                <a onClick={remove}>delete</a>
+                <InteractiveLabel onClick={edit}>edit</InteractiveLabel>
+                <InteractiveLabel onClick={remove}>delete</InteractiveLabel>
             </Footer>
         </>
     );

diff --git a/site/components/DiffView/Comment/Editor.js → site/components/DiffView/Comment/Editor.tsx b/site/components/DiffView/Comment/Editor.js → site/components/DiffView/Comment/Editor.tsx
@@ -1,5 +1,5 @@
-import {useCallback, useState} from 'react';
-import styled from 'styled-components';
+import {ChangeEvent, useCallback, useState} from 'react';
+import styled from '@emotion/styled';
 import {Button, Input} from 'antd';
 
 const Layout = styled.div`
@@ -15,10 +15,19 @@ const Footer = styled.footer`
     justify-content: flex-end;
 `;
 
-export default function CommentEditor({commentId, type, defaultContent, onSave, onCancel, onDelete}) {
+interface Props {
+    commentId: string;
+    type: 'edit' | 'create';
+    defaultContent: string;
+    onSave: (id: string, value: string) => void;
+    onCancel: (id: string) => void;
+    onDelete: (id: string) => void;
+}
+
+export default function CommentEditor({commentId, type, defaultContent, onSave, onCancel, onDelete}: Props) {
     const [value, setValue] = useState(defaultContent);
     const updateValue = useCallback(
-        e => setValue(e.target.value),
+        (e: ChangeEvent<HTMLTextAreaElement>) => setValue(e.target.value),
         []
     );
     const save = useCallback(

diff --git a/site/components/DiffView/Comment/index.js → site/components/DiffView/Comment/index.tsx b/site/components/DiffView/Comment/index.js → site/components/DiffView/Comment/index.tsx
@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import Editor from './Editor';
 import Display from './Display';
 
@@ -7,7 +7,18 @@ const Layout = styled.div`
     background-color: var(--background-color-secondary);
 `;
 
-export default function Comment({id, content, state, time, onSave, onEdit, onCancel, onDelete}) {
+interface Props {
+    id: string;
+    content: string;
+    state: 'create' | 'edit' | 'display';
+    time: Date;
+    onSave: (id: string, content: string) => void;
+    onEdit: (id: string) => void;
+    onCancel: (id: string) => void;
+    onDelete: (id: string) => void;
+}
+
+export default function Comment({id, content, state, time, onSave, onEdit, onCancel, onDelete}: Props) {
     return (
         <Layout>
             {

diff --git a/site/components/DiffView/CommentTrigger.js → site/components/DiffView/CommentTrigger.tsx b/site/components/DiffView/CommentTrigger.js → site/components/DiffView/CommentTrigger.tsx
@@ -1,6 +1,6 @@
 import {useCallback} from 'react';
-import styled from 'styled-components';
-import {getChangeKey} from 'react-diff-view';
+import styled from '@emotion/styled';
+import {ChangeData, getChangeKey} from 'react-diff-view';
 
 const Trigger = styled.span`
     display: flex;
@@ -14,18 +14,23 @@ const Trigger = styled.span`
     height: 22px;
     font-size: 16px;
     font-weight: bold;
-    background-color: #fff;
+    background-color: var(--background-color-pure);
     box-shadow: 0 1px 4px rgba(27, 31, 35, .15);
-    color: #999;
+    color: var(--diff-decoration-content-color);
 
     :hover {
         transition: all .2s linear;
-        background-color: #fafafa;
+        background-color: var(--background-color-secondary);
         color: #333;
     }
 `;
 
-export default function CommentTrigger({change, onClick}) {
+interface Props {
+    change: ChangeData;
+    onClick: (value: string) => void;
+}
+
+export default function CommentTrigger({change, onClick}: Props) {
     const click = useCallback(
         () => onClick(getChangeKey(change)),
         [change, onClick]

diff --git a/site/components/DiffView/HunkInfo.js b/site/components/DiffView/HunkInfo.js
diff --git a/site/components/DiffView/HunkInfo.tsx b/site/components/DiffView/HunkInfo.tsx
@@ -0,0 +1,14 @@
+import {Decoration, DecorationProps, HunkData} from 'react-diff-view';
+
+interface Props extends Omit<DecorationProps, 'children'> {
+    hunk: HunkData;
+}
+
+export default function HunkInfo({hunk, ...props}: Props) {
+    return (
+        <Decoration {...props}>
+            {null}
+            {hunk.content}
+        </Decoration>
+    );
+}
diff --git a/site/components/DiffView/Tokenize.js → site/components/DiffView/Tokenize.ts b/site/components/DiffView/Tokenize.js → site/components/DiffView/Tokenize.ts
@@ -32,7 +32,7 @@ self.addEventListener(
         catch (ex) {
             const payload = {
                 success: false,
-                reason: ex.message,
+                reason: ex instanceof Error ? ex.message : `${ex}`,
             };
             self.postMessage({id, payload});
         }

diff --git a/site/components/DiffView/Unfold.js → site/components/DiffView/Unfold.tsx b/site/components/DiffView/Unfold.js → site/components/DiffView/Unfold.tsx
@@ -1,6 +1,6 @@
 import {createElement, useCallback} from 'react';
 import {CaretUpOutlined, CaretDownOutlined, PlusCircleOutlined} from '@ant-design/icons';
-import {Decoration} from 'react-diff-view';
+import {Decoration, DecorationProps} from 'react-diff-view';
 import styles from './Unfold.less';
 
 const ICON_TYPE_MAPPING = {
@@ -9,7 +9,14 @@ const ICON_TYPE_MAPPING = {
     none: PlusCircleOutlined,
 };
 
-const Unfold = ({start, end, direction, onExpand, ...props}) => {
+interface Props extends Omit<DecorationProps, 'children'> {
+    start: number;
+    end: number;
+    direction: 'up' | 'down' | 'none';
+    onExpand: (start: number, end: number) => void;
+}
+
+export default function Unfold({start, end, direction, onExpand, ...props}: Props) {
     const expand = useCallback(
         () => onExpand(start, end),
         [onExpand, start, end]
@@ -26,6 +33,4 @@ const Unfold = ({start, end, direction, onExpand, ...props}) => {
             </div>
         </Decoration>
     );
-};
-
-export default Unfold;
+}