use reflow to migrate from flow to typescript

scm-ui/ui-extensions/src/ExtensionPoint.test.tsx

@@ -1,27 +1,26 @@
-// @flow
-import React from "react";
-import ExtensionPoint from "./ExtensionPoint";
-import { shallow, mount } from "enzyme";
-import "@scm-manager/ui-tests/enzyme";
-import binder from "./binder";
+import React from 'react';
+import ExtensionPoint from './ExtensionPoint';
+import { shallow, mount } from 'enzyme';
+import '@scm-manager/ui-tests/enzyme';
+import binder from './binder';
 
-jest.mock("./binder");
+jest.mock('./binder');
 
-describe("ExtensionPoint test", () => {
+describe('ExtensionPoint test', () => {
   beforeEach(() => {
     binder.hasExtension.mockReset();
     binder.getExtension.mockReset();
     binder.getExtensions.mockReset();
   });
 
-  it("should render nothing, if no extension was bound", () => {
+  it('should render nothing, if no extension was bound', () => {
     binder.hasExtension.mockReturnValue(true);
     binder.getExtensions.mockReturnValue([]);
     const rendered = shallow(<ExtensionPoint name="something.special" />);
-    expect(rendered.text()).toBe("");
+    expect(rendered.text()).toBe('');
   });
 
-  it("should render the given component", () => {
+  it('should render the given component', () => {
     const label = () => {
       return <label>Extension One</label>;
     };
@@ -29,18 +28,16 @@ describe("ExtensionPoint test", () => {
     binder.getExtension.mockReturnValue(label);
 
     const rendered = mount(<ExtensionPoint name="something.special" />);
-    expect(rendered.text()).toBe("Extension One");
+    expect(rendered.text()).toBe('Extension One');
   });
 
-
   // We use this wrapper since Enzyme cannot handle React Fragments (see https://github.com/airbnb/enzyme/issues/1213)
   class ExtensionPointEnzymeFix extends ExtensionPoint {
     render() {
-      return <div>{super.render()}</div>
+      return <div>{super.render()}</div>;
+    }
   }
-
-  }
-  it("should render the given components", () => {
+  it('should render the given components', () => {
     const labelOne = () => {
       return <label>Extension One</label>;
     };
@@ -52,16 +49,16 @@ describe("ExtensionPoint test", () => {
     binder.getExtensions.mockReturnValue([labelOne, labelTwo]);
 
     const rendered = mount(
-      <ExtensionPointEnzymeFix name="something.special" renderAll={true} />
+      <ExtensionPointEnzymeFix name="something.special" renderAll={true} />,
     );
     const text = rendered.text();
-    expect(text).toContain("Extension One");
-    expect(text).toContain("Extension Two");
+    expect(text).toContain('Extension One');
+    expect(text).toContain('Extension Two');
   });
 
-  it("should render the given component, with the given props", () => {
+  it('should render the given component, with the given props', () => {
     type Props = {
-      value: string
+      value: string;
     };
 
     const label = (props: Props) => {
@@ -72,23 +69,28 @@ describe("ExtensionPoint test", () => {
     binder.getExtension.mockReturnValue(label);
 
     const rendered = mount(
-      <ExtensionPoint name="something.special" props={{ value: "Awesome" }} />
+      <ExtensionPoint
+        name="something.special"
+        props={{
+          value: 'Awesome',
+        }}
+      />,
     );
     const text = rendered.text();
-    expect(text).toContain("Awesome");
+    expect(text).toContain('Awesome');
   });
 
-  it("should render children, if no extension is bound", () => {
+  it('should render children, if no extension is bound', () => {
     const rendered = mount(
       <ExtensionPoint name="something.special">
         <p>Cool stuff</p>
-      </ExtensionPoint>
+      </ExtensionPoint>,
     );
     const text = rendered.text();
-    expect(text).toContain("Cool stuff");
+    expect(text).toContain('Cool stuff');
   });
 
-  it("should not render children, if an extension was bound", () => {
+  it('should not render children, if an extension was bound', () => {
     const label = () => {
       return <label>Bound Extension</label>;
     };
@@ -99,17 +101,19 @@ describe("ExtensionPoint test", () => {
     const rendered = mount(
       <ExtensionPoint name="something.special">
         <p>Cool stuff</p>
-      </ExtensionPoint>
+      </ExtensionPoint>,
     );
     const text = rendered.text();
-    expect(text).toContain("Bound Extension");
+    expect(text).toContain('Bound Extension');
   });
 
-  it("should pass the context of the parent component", () => {
-    const UserContext = React.createContext({ name: "anonymous" });
+  it('should pass the context of the parent component', () => {
+    const UserContext = React.createContext({
+      name: 'anonymous',
+    });
 
     type HelloProps = {
-      name: string
+      name: string;
     };
 
     const Hello = (props: HelloProps) => {
@@ -129,7 +133,11 @@ describe("ExtensionPoint test", () => {
 
     const App = () => {
       return (
-        <UserContext.Provider value={{ name: "Trillian" }}>
+        <UserContext.Provider
+          value={{
+            name: 'Trillian',
+          }}
+        >
           <ExtensionPoint name="hello" />
         </UserContext.Provider>
       );
@@ -137,6 +145,6 @@ describe("ExtensionPoint test", () => {
 
     const rendered = mount(<App />);
     const text = rendered.text();
-    expect(text).toBe("Hello Trillian");
+    expect(text).toBe('Hello Trillian');
   });
 });

scm-ui/ui-extensions/src/ExtensionPoint.tsx

@@ -1,19 +1,18 @@
-//@flow
-import * as React from "react";
-import binder from "./binder";
+import * as React from 'react';
+import binder from './binder';
 
 type Props = {
-  name: string,
-  renderAll?: boolean,
-  props?: Object,
-  children?: React.Node
+  name: string;
+  renderAll?: boolean;
+  props?: object;
+  children?: React.Node;
 };
 
 /**
  * ExtensionPoint renders components which are bound to an extension point.
  */
 class ExtensionPoint extends React.Component<Props> {
-  renderAll(name: string, props?: Object) {
+  renderAll(name: string, props?: object) {
     const extensions = binder.getExtensions(name, props);
     return (
       <>
@@ -24,7 +23,7 @@ class ExtensionPoint extends React.Component<Props> {
     );
   }
 
-  renderSingle(name: string, props?: Object) {
+  renderSingle(name: string, props?: object) {
     const Component = binder.getExtension(name, props);
     if (!Component) {
       return null;

scm-ui/ui-extensions/src/binder.test.js

@@ -1,52 +0,0 @@
-// @flow
-import { Binder } from "./binder";
-
-describe("binder tests", () => {
-  let binder;
-
-  beforeEach(() => {
-    binder = new Binder();
-  });
-
-  it("should return an empty array for non existing extension points", () => {
-    const extensions = binder.getExtensions("hitchhiker");
-    expect(extensions).toEqual([]);
-  });
-
-  it("should return the binded extensions", () => {
-    binder.bind("hitchhicker.trillian", "heartOfGold");
-    binder.bind("hitchhicker.trillian", "earth");
-
-    const extensions = binder.getExtensions("hitchhicker.trillian");
-    expect(extensions).toEqual(["heartOfGold", "earth"]);
-  });
-
-  it("should return the first bound extension", () => {
-    binder.bind("hitchhicker.trillian", "heartOfGold");
-    binder.bind("hitchhicker.trillian", "earth");
-
-    expect(binder.getExtension("hitchhicker.trillian")).toBe("heartOfGold");
-  });
-
-  it("should return null if no extension was bound", () => {
-    expect(binder.getExtension("hitchhicker.trillian")).toBe(null);
-  });
-
-  it("should return true, if an extension is bound", () => {
-    binder.bind("hitchhicker.trillian", "heartOfGold");
-    expect(binder.hasExtension("hitchhicker.trillian")).toBe(true);
-  });
-
-  it("should return false, if no extension is bound", () => {
-    expect(binder.hasExtension("hitchhicker.trillian")).toBe(false);
-  });
-
-  it("should return only extensions which predicates matches", () => {
-    binder.bind("hitchhicker.trillian", "heartOfGold", (props: Object) => props.category === "a");
-    binder.bind("hitchhicker.trillian", "earth", (props: Object) => props.category === "b");
-    binder.bind("hitchhicker.trillian", "earth2", (props: Object) => props.category === "a");
-
-    const extensions = binder.getExtensions("hitchhicker.trillian", { category: "b" });
-    expect(extensions).toEqual(["earth"]);
-  });
-});

scm-ui/ui-extensions/src/binder.test.ts

@@ -0,0 +1,65 @@
+import { Binder } from './binder';
+
+describe('binder tests', () => {
+  let binder;
+
+  beforeEach(() => {
+    binder = new Binder();
+  });
+
+  it('should return an empty array for non existing extension points', () => {
+    const extensions = binder.getExtensions('hitchhiker');
+    expect(extensions).toEqual([]);
+  });
+
+  it('should return the binded extensions', () => {
+    binder.bind('hitchhicker.trillian', 'heartOfGold');
+    binder.bind('hitchhicker.trillian', 'earth');
+
+    const extensions = binder.getExtensions('hitchhicker.trillian');
+    expect(extensions).toEqual(['heartOfGold', 'earth']);
+  });
+
+  it('should return the first bound extension', () => {
+    binder.bind('hitchhicker.trillian', 'heartOfGold');
+    binder.bind('hitchhicker.trillian', 'earth');
+
+    expect(binder.getExtension('hitchhicker.trillian')).toBe('heartOfGold');
+  });
+
+  it('should return null if no extension was bound', () => {
+    expect(binder.getExtension('hitchhicker.trillian')).toBe(null);
+  });
+
+  it('should return true, if an extension is bound', () => {
+    binder.bind('hitchhicker.trillian', 'heartOfGold');
+    expect(binder.hasExtension('hitchhicker.trillian')).toBe(true);
+  });
+
+  it('should return false, if no extension is bound', () => {
+    expect(binder.hasExtension('hitchhicker.trillian')).toBe(false);
+  });
+
+  it('should return only extensions which predicates matches', () => {
+    binder.bind(
+      'hitchhicker.trillian',
+      'heartOfGold',
+      (props: object) => props.category === 'a',
+    );
+    binder.bind(
+      'hitchhicker.trillian',
+      'earth',
+      (props: object) => props.category === 'b',
+    );
+    binder.bind(
+      'hitchhicker.trillian',
+      'earth2',
+      (props: object) => props.category === 'a',
+    );
+
+    const extensions = binder.getExtensions('hitchhicker.trillian', {
+      category: 'b',
+    });
+    expect(extensions).toEqual(['earth']);
+  });
+});

scm-ui/ui-extensions/src/binder.ts

@@ -1,10 +1,8 @@
-// @flow
-
-type Predicate = (props: Object) => boolean;
+type Predicate = (props: object) => boolean;
 
 type ExtensionRegistration = {
-  predicate: (props: Object) => boolean,
-  extension: any
+  predicate: (props: object) => boolean;
+  extension: any;
 };
 
 /**
@@ -12,7 +10,9 @@ type ExtensionRegistration = {
  * The Binder class is mainly exported for testing, plugins should only use the default export.
  */
 export class Binder {
-  extensionPoints: { [string]: Array<ExtensionRegistration> };
+  extensionPoints: {
+    [key: string]: Array<ExtensionRegistration>;
+  };
 
   constructor() {
     this.extensionPoints = {};
@@ -31,7 +31,7 @@ export class Binder {
     }
     const registration = {
       predicate: predicate ? predicate : () => true,
-      extension
+      extension,
     };
     this.extensionPoints[extensionPoint].push(registration);
   }
@@ -42,7 +42,7 @@ export class Binder {
    * @param extensionPoint name of extension point
    * @param props of the extension point
    */
-  getExtension(extensionPoint: string, props?: Object) {
+  getExtension(extensionPoint: string, props?: object) {
     const extensions = this.getExtensions(extensionPoint, props);
     if (extensions.length > 0) {
       return extensions[0];
@@ -56,7 +56,7 @@ export class Binder {
    * @param extensionPoint name of extension point
    * @param props of the extension point
    */
-  getExtensions(extensionPoint: string, props?: Object): Array<any> {
+  getExtensions(extensionPoint: string, props?: object): Array<any> {
     let registrations = this.extensionPoints[extensionPoint] || [];
     if (props) {
       registrations = registrations.filter(reg => reg.predicate(props || {}));
@@ -67,7 +67,7 @@ export class Binder {
   /**
    * Returns true if at least one extension is bound to the extension point and its props.
    */
-  hasExtension(extensionPoint: string, props?: Object): boolean {
+  hasExtension(extensionPoint: string, props?: object): boolean {
     return this.getExtensions(extensionPoint, props).length > 0;
   }
 }

scm-ui/ui-extensions/src/index.js

@@ -1,3 +0,0 @@
-// @flow
-export { default as binder } from "./binder";
-export { default as ExtensionPoint } from "./ExtensionPoint";

scm-ui/ui-extensions/src/index.ts

@@ -0,0 +1,2 @@
+export { default as binder } from './binder';
+export { default as ExtensionPoint } from './ExtensionPoint';

scm-ui/ui-extensions/src/testing/Label.tsx

@@ -1,8 +1,7 @@
-//@flow
-import React from "react";
+import React from 'react';
 
 type Props = {
-  value: string
+  value: string;
 };
 
 class Label extends React.Component<Props> {