use reflow to migrate from flow to typescript

scm-ui/ui-components/src/buttons/AddButton.tsx

@@ -1,6 +1,5 @@
-//@flow
-import React from "react";
-import Button, { type ButtonProps } from "./Button";
+import React from 'react';
+import Button, { ButtonProps } from './Button';
 
 class AddButton extends React.Component<ButtonProps> {
   render() {

scm-ui/ui-components/src/buttons/Button.tsx

@@ -1,34 +1,33 @@
-//@flow
-import * as React from "react";
-import classNames from "classnames";
-import { withRouter } from "react-router-dom";
-import Icon from "../Icon";
+import * as React from 'react';
+import classNames from 'classnames';
+import { withRouter } from 'react-router-dom';
+import Icon from '../Icon';
 
 export type ButtonProps = {
-  label?: string,
-  loading?: boolean,
-  disabled?: boolean,
-  action?: (event: Event) => void,
-  link?: string,
-  className?: string,
-  icon?: string,
-  fullWidth?: boolean,
-  reducedMobile?: boolean,
-  children?: React.Node
+  label?: string;
+  loading?: boolean;
+  disabled?: boolean;
+  action?: (event: Event) => void;
+  link?: string;
+  className?: string;
+  icon?: string;
+  fullWidth?: boolean;
+  reducedMobile?: boolean;
+  children?: React.Node;
 };
 
 type Props = ButtonProps & {
-  type: string,
-  color: string,
+  type: string;
+  color: string;
 
   // context prop
-  history: any
+  history: any;
 };
 
 class Button extends React.Component<Props> {
   static defaultProps = {
-    type: "button",
-    color: "default"
+    type: 'button',
+    color: 'default',
   };
 
   onClick = (event: Event) => {
@@ -51,11 +50,11 @@ class Button extends React.Component<Props> {
       icon,
       fullWidth,
       reducedMobile,
-      children
+      children,
     } = this.props;
-    const loadingClass = loading ? "is-loading" : "";
-    const fullWidthClass = fullWidth ? "is-fullwidth" : "";
-    const reducedMobileClass = reducedMobile ? "is-reduced-mobile" : "";
+    const loadingClass = loading ? 'is-loading' : '';
+    const fullWidthClass = fullWidth ? 'is-fullwidth' : '';
+    const reducedMobileClass = reducedMobile ? 'is-reduced-mobile' : '';
     if (icon) {
       return (
         <button
@@ -63,12 +62,12 @@ class Button extends React.Component<Props> {
           disabled={disabled}
           onClick={this.onClick}
           className={classNames(
-            "button",
-            "is-" + color,
+            'button',
+            'is-' + color,
             loadingClass,
             fullWidthClass,
             reducedMobileClass,
-            className
+            className,
           )}
         >
           <span className="icon is-medium">
@@ -87,11 +86,11 @@ class Button extends React.Component<Props> {
         disabled={disabled}
         onClick={this.onClick}
         className={classNames(
-          "button",
-          "is-" + color,
+          'button',
+          'is-' + color,
           loadingClass,
           fullWidthClass,
-          className
+          className,
         )}
       >
         {label} {children}

scm-ui/ui-components/src/buttons/ButtonAddons.tsx

@@ -1,7 +1,6 @@
-// @flow
-import * as React from "react";
-import classNames from "classnames";
-import styled from "styled-components";
+import * as React from 'react';
+import classNames from 'classnames';
+import styled from 'styled-components';
 
 const Flex = styled.div`
   &.field:not(:last-child) {
@@ -10,8 +9,8 @@ const Flex = styled.div`
 `;
 
 type Props = {
-  className?: string,
-  children: React.Node
+  className?: string;
+  children: React.Node;
 };
 
 class ButtonAddons extends React.Component<Props> {
@@ -24,13 +23,13 @@ class ButtonAddons extends React.Component<Props> {
         childWrapper.push(
           <p className="control" key={childWrapper.length}>
             {child}
-          </p>
+          </p>,
         );
       }
     });
 
     return (
-      <Flex className={classNames("field", "has-addons", className)}>
+      <Flex className={classNames('field', 'has-addons', className)}>
         {childWrapper}
       </Flex>
     );

scm-ui/ui-components/src/buttons/ButtonGroup.tsx

@@ -1,10 +1,9 @@
-// @flow
-import * as React from "react";
-import classNames from "classnames";
+import * as React from 'react';
+import classNames from 'classnames';
 
 type Props = {
-  className?: string,
-  children: React.Node
+  className?: string;
+  children: React.Node;
 };
 
 class ButtonGroup extends React.Component<Props> {
@@ -14,12 +13,16 @@ class ButtonGroup extends React.Component<Props> {
     const childWrapper = [];
     React.Children.forEach(children, child => {
       if (child) {
-        childWrapper.push(<div className="control" key={childWrapper.length}>{child}</div>);
+        childWrapper.push(
+          <div className="control" key={childWrapper.length}>
+            {child}
+          </div>,
+        );
       }
     });
 
     return (
-      <div className={classNames("field", "is-grouped", className)}>
+      <div className={classNames('field', 'is-grouped', className)}>
         {childWrapper}
       </div>
     );

scm-ui/ui-components/src/buttons/CreateButton.tsx

@@ -1,7 +1,6 @@
-//@flow
-import React from "react";
-import styled from "styled-components";
-import Button, { type ButtonProps } from "./Button";
+import React from 'react';
+import styled from 'styled-components';
+import Button, { ButtonProps } from './Button';
 
 const Wrapper = styled.div`
   margin-top: 2em;

scm-ui/ui-components/src/buttons/DeleteButton.tsx

@@ -1,6 +1,5 @@
-//@flow
-import React from "react";
-import Button, { type ButtonProps } from "./Button";
+import React from 'react';
+import Button, { ButtonProps } from './Button';
 
 class DeleteButton extends React.Component<ButtonProps> {
   render() {

scm-ui/ui-components/src/buttons/DownloadButton.tsx

@@ -1,11 +1,10 @@
-//@flow
-import React from "react";
+import React from 'react';
 
 type Props = {
-  displayName: string,
-  url: string,
-  disabled: boolean,
-  onClick?: () => void
+  displayName: string;
+  url: string;
+  disabled: boolean;
+  onClick?: () => void;
 };
 
 class DownloadButton extends React.Component<Props> {
@@ -13,7 +12,12 @@ class DownloadButton extends React.Component<Props> {
     const { displayName, url, disabled, onClick } = this.props;
     const onClickOrDefault = !!onClick ? onClick : () => {};
     return (
-      <a className="button is-link" href={url} disabled={disabled} onClick={onClickOrDefault}>
+      <a
+        className="button is-link"
+        href={url}
+        disabled={disabled}
+        onClick={onClickOrDefault}
+      >
         <span className="icon is-medium">
           <i className="fas fa-arrow-circle-down" />
         </span>

scm-ui/ui-components/src/buttons/EditButton.tsx

@@ -1,6 +1,5 @@
-//@flow
-import React from "react";
-import Button, { type ButtonProps } from "./Button";
+import React from 'react';
+import Button, { ButtonProps } from './Button';
 
 class EditButton extends React.Component<ButtonProps> {
   render() {

scm-ui/ui-components/src/buttons/RemoveEntryOfTableButton.tsx

@@ -1,13 +1,12 @@
-//@flow
-import React from "react";
-import { DeleteButton } from ".";
-import classNames from "classnames";
+import React from 'react';
+import { DeleteButton } from '.';
+import classNames from 'classnames';
 
 type Props = {
-  entryname: string,
-  removeEntry: string => void,
-  disabled: boolean,
-  label: string
+  entryname: string;
+  removeEntry: (p: string) => void;
+  disabled: boolean;
+  label: string;
 };
 
 type State = {};
@@ -16,7 +15,7 @@ class RemoveEntryOfTableButton extends React.Component<Props, State> {
   render() {
     const { label, entryname, removeEntry, disabled } = this.props;
     return (
-      <div className={classNames("is-pulled-right")}>
+      <div className={classNames('is-pulled-right')}>
         <DeleteButton
           label={label}
           action={(event: Event) => {

scm-ui/ui-components/src/buttons/SubmitButton.tsx

@@ -1,14 +1,13 @@
-//@flow
-import React from "react";
-import Button, { type ButtonProps } from "./Button";
+import React from 'react';
+import Button, { ButtonProps } from './Button';
 
 type SubmitButtonProps = ButtonProps & {
-  scrollToTop: boolean
-}
+  scrollToTop: boolean;
+};
 
 class SubmitButton extends React.Component<SubmitButtonProps> {
   static defaultProps = {
-    scrollToTop: true
+    scrollToTop: true,
   };
 
   render() {
@@ -18,7 +17,7 @@ class SubmitButton extends React.Component<SubmitButtonProps> {
         type="submit"
         color="primary"
         {...this.props}
-        action={(event) => {
+        action={event => {
           if (action) {
             action(event);
           }

scm-ui/ui-components/src/buttons/index.js

@@ -1,14 +0,0 @@
-// @create-index
-
-export { default as AddButton } from "./AddButton.js";
-export { default as Button } from "./Button.js";
-export { default as CreateButton } from "./CreateButton.js";
-export { default as DeleteButton } from "./DeleteButton.js";
-export { default as EditButton } from "./EditButton.js";
-export { default as SubmitButton } from "./SubmitButton.js";
-export { default as DownloadButton } from "./DownloadButton.js";
-export { default as ButtonGroup } from "./ButtonGroup.js";
-export { default as ButtonAddons } from "./ButtonAddons.js";
-export {
-  default as RemoveEntryOfTableButton
-} from "./RemoveEntryOfTableButton.js";

scm-ui/ui-components/src/buttons/index.stories.js

@@ -1,75 +0,0 @@
-// @flow
-import React, { type Node } from "react";
-import Button from "./Button";
-import { storiesOf } from "@storybook/react";
-import styled from "styled-components";
-import { MemoryRouter } from "react-router-dom";
-import AddButton from "./AddButton";
-import CreateButton from "./CreateButton";
-import DeleteButton from "./DeleteButton";
-import DownloadButton from "./DownloadButton";
-import EditButton from "./EditButton";
-import SubmitButton from "./SubmitButton";
-
-const colors = [
-  "primary",
-  "link",
-  "info",
-  "success",
-  "warning",
-  "danger",
-  "white",
-  "light",
-  "dark",
-  "black",
-  "text"
-];
-
-const Spacing = styled.div`
-  padding: 1em;
-`;
-
-const RoutingDecorator = story => (
-  <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>
-);
-
-const SpacingDecorator = story => <Spacing>{story()}</Spacing>;
-
-storiesOf("Buttons|Button", module)
-  .addDecorator(RoutingDecorator)
-  .add("Colors", () => (
-    <div>
-      {colors.map(color => (
-        <Spacing key={color}>
-          <Button color={color} label={color} />
-        </Spacing>
-      ))}
-    </div>
-  ))
-  .add("Loading", () => (
-    <Spacing>
-      <Button color={"primary"} loading={true}>
-        Loading Button
-      </Button>
-    </Spacing>
-  ));
-
-const buttonStory = (name: string, storyFn: () => Node) => {
-  return storiesOf("Buttons|" + name, module)
-    .addDecorator(RoutingDecorator)
-    .addDecorator(SpacingDecorator)
-    .add("Default", storyFn);
-};
-
-buttonStory("AddButton", () => <AddButton color={"primary"}>Add</AddButton>);
-buttonStory("CreateButton", () => <CreateButton>Create</CreateButton>);
-buttonStory("DeleteButton", () => <DeleteButton>Delete</DeleteButton>);
-buttonStory("DownloadButton", () => (
-  <DownloadButton
-    displayName="Download"
-    disabled={false}
-    url=""
-  ></DownloadButton>
-));
-buttonStory("EditButton", () => <EditButton>Edit</EditButton>);
-buttonStory("SubmitButton", () => <SubmitButton>Submit</SubmitButton>);

scm-ui/ui-components/src/buttons/index.stories.tsx

@@ -0,0 +1,74 @@
+import React, { ReactNode } from 'react';
+import Button from './Button';
+import { storiesOf } from '@storybook/react';
+import styled from 'styled-components';
+import { MemoryRouter } from 'react-router-dom';
+import AddButton from './AddButton';
+import CreateButton from './CreateButton';
+import DeleteButton from './DeleteButton';
+import DownloadButton from './DownloadButton';
+import EditButton from './EditButton';
+import SubmitButton from './SubmitButton';
+
+const colors = [
+  'primary',
+  'link',
+  'info',
+  'success',
+  'warning',
+  'danger',
+  'white',
+  'light',
+  'dark',
+  'black',
+  'text',
+];
+
+const Spacing = styled.div`
+  padding: 1em;
+`;
+
+const RoutingDecorator = story => (
+  <MemoryRouter initialEntries={['/']}>{story()}</MemoryRouter>
+);
+
+const SpacingDecorator = story => <Spacing>{story()}</Spacing>;
+
+storiesOf('Buttons|Button', module)
+  .addDecorator(RoutingDecorator)
+  .add('Colors', () => (
+    <div>
+      {colors.map(color => (
+        <Spacing key={color}>
+          <Button color={color} label={color} />
+        </Spacing>
+      ))}
+    </div>
+  ))
+  .add('Loading', () => (
+    <Spacing>
+      <Button color={'primary'} loading={true}>
+        Loading Button
+      </Button>
+    </Spacing>
+  ));
+
+const buttonStory = (name: string, storyFn: () => ReactNode) => {
+  return storiesOf('Buttons|' + name, module)
+    .addDecorator(RoutingDecorator)
+    .addDecorator(SpacingDecorator)
+    .add('Default', storyFn);
+};
+
+buttonStory('AddButton', () => <AddButton color={'primary'}>Add</AddButton>);
+buttonStory('CreateButton', () => <CreateButton>Create</CreateButton>);
+buttonStory('DeleteButton', () => <DeleteButton>Delete</DeleteButton>);
+buttonStory('DownloadButton', () => (
+  <DownloadButton
+    displayName="Download"
+    disabled={false}
+    url=""
+  ></DownloadButton>
+));
+buttonStory('EditButton', () => <EditButton>Edit</EditButton>);
+buttonStory('SubmitButton', () => <SubmitButton>Submit</SubmitButton>);

scm-ui/ui-components/src/buttons/index.ts

@@ -0,0 +1,14 @@
+// @create-index
+
+export { default as AddButton } from './AddButton';
+export { default as Button } from './Button';
+export { default as CreateButton } from './CreateButton';
+export { default as DeleteButton } from './DeleteButton';
+export { default as EditButton } from './EditButton';
+export { default as SubmitButton } from './SubmitButton';
+export { default as DownloadButton } from './DownloadButton';
+export { default as ButtonGroup } from './ButtonGroup';
+export { default as ButtonAddons } from './ButtonAddons';
+export {
+  default as RemoveEntryOfTableButton,
+} from './RemoveEntryOfTableButton';