migrate ui-components from flow to typescript

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import Button, { 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,36 +1,34 @@
-import * as React from 'react';
-import classNames from 'classnames';
-import { withRouter } from 'react-router-dom';
-import Icon from '../Icon';
+import React, { MouseEvent, ReactNode } from "react";
+import classNames from "classnames";
+import { withRouter, RouteComponentProps } from "react-router-dom";
+import Icon from "../Icon";
 
 export type ButtonProps = {
   label?: string;
   loading?: boolean;
   disabled?: boolean;
-  action?: (event: Event) => void;
+  action?: (event: MouseEvent) => void;
   link?: string;
   className?: string;
   icon?: string;
   fullWidth?: boolean;
   reducedMobile?: boolean;
-  children?: React.Node;
+  children?: ReactNode;
 };
 
-type Props = ButtonProps & {
-  type: string;
-  color: string;
-
-  // context prop
-  history: any;
-};
-
-class Button extends React.Component<Props> {
-  static defaultProps = {
-    type: 'button',
-    color: 'default',
+type Props = ButtonProps &
+  RouteComponentProps & {
+    type?: "button" | "submit" | "reset";
+    color?: string;
   };
 
-  onClick = (event: Event) => {
+class Button extends React.Component<Props> {
+  static defaultProps: Partial<Props> = {
+    type: "button",
+    color: "default"
+  };
+
+  onClick = (event: React.MouseEvent) => {
     const { action, link, history } = this.props;
     if (action) {
       action(event);
@@ -50,11 +48,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
@@ -62,12 +60,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">
@@ -86,11 +84,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,6 +1,6 @@
-import * as React from 'react';
-import classNames from 'classnames';
-import styled from 'styled-components';
+import React, { ReactNode } from "react";
+import classNames from "classnames";
+import styled from "styled-components";
 
 const Flex = styled.div`
   &.field:not(:last-child) {
@@ -10,26 +10,26 @@ const Flex = styled.div`
 
 type Props = {
   className?: string;
-  children: React.Node;
+  children: ReactNode;
 };
 
 class ButtonAddons extends React.Component<Props> {
   render() {
     const { className, children } = this.props;
 
-    const childWrapper = [];
+    const childWrapper: ReactNode[] = [];
     React.Children.forEach(children, child => {
       if (child) {
         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,28 +1,28 @@
-import * as React from 'react';
-import classNames from 'classnames';
+import React, { ReactNode } from "react";
+import classNames from "classnames";
 
 type Props = {
   className?: string;
-  children: React.Node;
+  children: ReactNode;
 };
 
 class ButtonGroup extends React.Component<Props> {
   render() {
     const { className, children } = this.props;
 
-    const childWrapper = [];
+    const childWrapper: ReactNode[] = [];
     React.Children.forEach(children, child => {
       if (child) {
         childWrapper.push(
           <div className="control" key={childWrapper.length}>
             {child}
-          </div>,
+          </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,6 +1,6 @@
-import React from 'react';
-import styled from 'styled-components';
-import Button, { 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,5 +1,5 @@
-import React from 'react';
-import Button, { 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,4 +1,4 @@
-import React from 'react';
+import React from "react";
 
 type Props = {
   displayName: string;
@@ -12,17 +12,24 @@ 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}
-      >
-        <span className="icon is-medium">
-          <i className="fas fa-arrow-circle-down" />
-        </span>
-        <span>{displayName}</span>
-      </a>
+      <>
+        {/*
+        we have to ignore the next line, 
+        because jsx a does not the custom disabled attribute
+        but bulma does.
+        // @ts-ignore */}
+        <a
+          className="button is-link"
+          href={url}
+          disabled={disabled}
+          onClick={onClickOrDefault}
+        >
+          <span className="icon is-medium">
+            <i className="fas fa-arrow-circle-down" />
+          </span>
+          <span>{displayName}</span>
+        </a>
+      </>
     );
   }
 }

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import Button, { 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,6 +1,6 @@
-import React from 'react';
-import { DeleteButton } from '.';
-import classNames from 'classnames';
+import React, { MouseEvent } from "react";
+import { DeleteButton } from ".";
+import classNames from "classnames";
 
 type Props = {
   entryname: string;
@@ -15,10 +15,10 @@ 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) => {
+          action={(event: MouseEvent) => {
             event.preventDefault();
             removeEntry(entryname);
           }}

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

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

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

@@ -1,27 +1,28 @@
-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';
+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";
+import { ReactElement } from "react";
 
 const colors = [
-  'primary',
-  'link',
-  'info',
-  'success',
-  'warning',
-  'danger',
-  'white',
-  'light',
-  'dark',
-  'black',
-  'text',
+  "primary",
+  "link",
+  "info",
+  "success",
+  "warning",
+  "danger",
+  "white",
+  "light",
+  "dark",
+  "black",
+  "text"
 ];
 
 const Spacing = styled.div`
@@ -29,14 +30,14 @@ const Spacing = styled.div`
 `;
 
 const RoutingDecorator = story => (
-  <MemoryRouter initialEntries={['/']}>{story()}</MemoryRouter>
+  <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>
 );
 
 const SpacingDecorator = story => <Spacing>{story()}</Spacing>;
 
-storiesOf('Buttons|Button', module)
+storiesOf("Buttons|Button", module)
   .addDecorator(RoutingDecorator)
-  .add('Colors', () => (
+  .add("Colors", () => (
     <div>
       {colors.map(color => (
         <Spacing key={color}>
@@ -45,30 +46,36 @@ storiesOf('Buttons|Button', module)
       ))}
     </div>
   ))
-  .add('Loading', () => (
+  .add("Loading", () => (
     <Spacing>
-      <Button color={'primary'} loading={true}>
+      <Button color={"primary"} loading={true}>
         Loading Button
       </Button>
     </Spacing>
   ));
 
-const buttonStory = (name: string, storyFn: () => ReactNode) => {
-  return storiesOf('Buttons|' + name, module)
+const buttonStory = (name: string, storyFn: () => ReactElement) => {
+  return storiesOf("Buttons|" + name, module)
     .addDecorator(RoutingDecorator)
     .addDecorator(SpacingDecorator)
-    .add('Default', storyFn);
+    .add("Default", storyFn);
 };
 
-buttonStory('AddButton', () => <AddButton color={'primary'}>Add</AddButton>);
-buttonStory('CreateButton', () => <CreateButton>Create</CreateButton>);
-buttonStory('DeleteButton', () => <DeleteButton>Delete</DeleteButton>);
-buttonStory('DownloadButton', () => (
+buttonStory("AddButton", () => <AddButton>Add</AddButton>);
+buttonStory("CreateButton", () => <CreateButton>Create</CreateButton>);
+buttonStory("DeleteButton", () => <DeleteButton>Delete</DeleteButton>);
+buttonStory("DownloadButton", () => (
   <DownloadButton
     displayName="Download"
     disabled={false}
     url=""
   ></DownloadButton>
+)).add("Disabled", () => (
+  <DownloadButton
+    displayName="Download"
+    disabled={true}
+    url=""
+  ></DownloadButton>
 ));
-buttonStory('EditButton', () => <EditButton>Edit</EditButton>);
-buttonStory('SubmitButton', () => <SubmitButton>Submit</SubmitButton>);
+buttonStory("EditButton", () => <EditButton>Edit</EditButton>);
+buttonStory("SubmitButton", () => <SubmitButton>Submit</SubmitButton>);

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

@@ -1,14 +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 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';
+  default as RemoveEntryOfTableButton
+} from "./RemoveEntryOfTableButton";