added storybook stories for diff

scm-ui/ui-components/src/repos/Diff.stories.tsx

@@ -0,0 +1,47 @@
+import React, { useEffect, useState } from "react";
+import { storiesOf } from "@storybook/react";
+import Diff from "./Diff";
+// @ts-ignore
+import parser from "gitdiff-parser";
+import simpleDiff from "../__resources__/Diff.simple";
+import Button from "../buttons/Button";
+import { DiffEventContext } from "./DiffTypes";
+import Toast from "../toast/Toast";
+
+const diffFiles = parser.parse(simpleDiff);
+
+storiesOf("Diff", module)
+  .add("Default", () => <Diff diff={diffFiles} />)
+  .add("Side-By-Side", () => <Diff diff={diffFiles} sideBySide={true} />)
+  .add("Collapsed", () => <Diff diff={diffFiles} defaultCollapse={true} />)
+  .add("File Controls", () => <Diff diff={diffFiles} fileControlFactory={() => <Button>Custom Control</Button>} />)
+  .add("File Annotation", () => (
+    <Diff diff={diffFiles} fileAnnotationFactory={file => [<p>Custom File annotation for {file.newPath}</p>]} />
+  ))
+  .add("Line Annotation", () => (
+    <Diff
+      diff={diffFiles}
+      annotationFactory={ctx => {
+        return {
+          N2: [<p>Line Annotation</p>]
+        };
+      }}
+    />
+  ))
+  .add("OnClick", () => {
+    const OnClickDemo = ({}) => {
+      const [changeId, setChangeId] = useState();
+      useEffect(() => {
+        const interval = setInterval(() => setChangeId(undefined), 2000);
+        return () => clearInterval(interval);
+      });
+      const onClick = (context: DiffEventContext) => setChangeId(context.changeId);
+      return (
+        <>
+          {changeId && <Toast type="info" title={"Change " + changeId} />}
+          <Diff diff={diffFiles} onClick={onClick} />
+        </>
+      );
+    };
+    return <OnClickDemo />;
+  });

scm-ui/ui-components/src/repos/DiffFile.tsx

@@ -20,7 +20,7 @@ type Collapsible = {
 };
 
 type State = Collapsible & {
-  sideBySide: boolean;
+  sideBySide?: boolean;
 };
 
 const DiffFilePanel = styled.div`
@@ -87,7 +87,7 @@ class DiffFile extends React.Component<Props, State> {
     super(props);
     this.state = {
       collapsed: !!this.props.defaultCollapse,
-      sideBySide: false
+      sideBySide: props.sideBySide
     };
   }
 

scm-ui/ui-components/src/repos/DiffTypes.ts

@@ -66,7 +66,7 @@ export type DiffEventHandler = (context: DiffEventContext) => void;
 export type FileControlFactory = (file: File, setCollapseState: (p: boolean) => void) => ReactNode | null | undefined;
 
 export type DiffObjectProps = {
-  sideBySide: boolean;
+  sideBySide?: boolean;
   onClick?: DiffEventHandler;
   fileControlFactory?: FileControlFactory;
   fileAnnotationFactory?: FileAnnotationFactory;