scm-ui: new repository layout

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

@@ -0,0 +1,11 @@
+//@flow
+import React from "react";
+import Button, { type ButtonProps } from "./Button";
+
+class AddButton extends React.Component<ButtonProps> {
+  render() {
+    return <Button color="default" icon="plus" {...this.props} />;
+  }
+}
+
+export default AddButton;

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

@@ -0,0 +1,106 @@
+//@flow
+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,
+
+  // context props
+  classes: any
+};
+
+type Props = ButtonProps & {
+  type: string,
+  color: string,
+
+  // context prop
+  history: any
+};
+
+class Button extends React.Component<Props> {
+  static defaultProps = {
+    type: "button",
+    color: "default"
+  };
+
+  onClick = (event: Event) => {
+    const { action, link, history } = this.props;
+    if (action) {
+      action(event);
+    } else if (link) {
+      history.push(link);
+    }
+  };
+
+  render() {
+    const {
+      label,
+      loading,
+      disabled,
+      type,
+      color,
+      className,
+      icon,
+      fullWidth,
+      reducedMobile,
+      children
+    } = this.props;
+    const loadingClass = loading ? "is-loading" : "";
+    const fullWidthClass = fullWidth ? "is-fullwidth" : "";
+    const reducedMobileClass = reducedMobile ? "is-reduced-mobile" : "";
+    if (icon) {
+      return (
+        <button
+          type={type}
+          disabled={disabled}
+          onClick={this.onClick}
+          className={classNames(
+            "button",
+            "is-" + color,
+            loadingClass,
+            fullWidthClass,
+            reducedMobileClass,
+            className
+          )}
+        >
+          <span className="icon is-medium">
+            <Icon name={icon} color="inherit" />
+          </span>
+          <span>
+            {label} {children}
+          </span>
+        </button>
+      );
+    }
+
+    return (
+      <button
+        type={type}
+        disabled={disabled}
+        onClick={this.onClick}
+        className={classNames(
+          "button",
+          "is-" + color,
+          loadingClass,
+          fullWidthClass,
+          className
+        )}
+      >
+        {label} {children}
+      </button>
+    );
+  }
+}
+
+export default withRouter(Button);

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

@@ -0,0 +1,29 @@
+// @flow
+import * as React from "react";
+import classNames from "classnames";
+
+type Props = {
+  className?: string,
+  children: React.Node
+};
+
+class ButtonAddons extends React.Component<Props> {
+  render() {
+    const { className, children } = this.props;
+
+    const childWrapper = [];
+    React.Children.forEach(children, child => {
+      if (child) {
+        childWrapper.push(<p className="control" key={childWrapper.length}>{child}</p>);
+      }
+    });
+
+    return (
+      <div className={classNames("field", "has-addons", className)}>
+        {childWrapper}
+      </div>
+    );
+  }
+}
+
+export default ButtonAddons;

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

@@ -0,0 +1,29 @@
+// @flow
+import * as React from "react";
+import classNames from "classnames";
+
+type Props = {
+  className?: string,
+  children: React.Node
+};
+
+class ButtonGroup extends React.Component<Props> {
+  render() {
+    const { className, children } = this.props;
+
+    const childWrapper = [];
+    React.Children.forEach(children, child => {
+      if (child) {
+        childWrapper.push(<p className="control" key={childWrapper.length}>{child}</p>);
+      }
+    });
+
+    return (
+      <div className={classNames("field", "is-grouped", className)}>
+        {childWrapper}
+      </div>
+    );
+  }
+}
+
+export default ButtonGroup;

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

@@ -0,0 +1,28 @@
+//@flow
+import React from "react";
+import injectSheet from "react-jss";
+import { type ButtonProps } from "./Button";
+import classNames from "classnames";
+import Button from "./Button";
+
+const styles = {
+  spacing: {
+    marginTop: "2em",
+    border: "2px solid #e9f7fd",
+    padding: "1em 1em"
+  }
+  
+};
+
+class CreateButton extends React.Component<ButtonProps> {
+  render() {
+    const { classes } = this.props;
+    return (
+      <div className={classNames("has-text-centered", classes.spacing)}>
+        <Button color="primary" {...this.props} />
+      </div>
+    );
+  }
+}
+
+export default injectSheet(styles)(CreateButton);

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

@@ -0,0 +1,11 @@
+//@flow
+import React from "react";
+import Button, { type ButtonProps } from "./Button";
+
+class DeleteButton extends React.Component<ButtonProps> {
+  render() {
+    return <Button color="warning" icon="times" {...this.props} />;
+  }
+}
+
+export default DeleteButton;

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

@@ -0,0 +1,26 @@
+//@flow
+import React from "react";
+
+type Props = {
+  displayName: string,
+  url: string,
+  disabled: boolean,
+  onClick?: () => void
+};
+
+class DownloadButton extends React.Component<Props> {
+  render() {
+    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>
+    );
+  }
+}
+
+export default DownloadButton;

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

@@ -0,0 +1,11 @@
+//@flow
+import React from "react";
+import Button, { type ButtonProps } from "./Button";
+
+class EditButton extends React.Component<ButtonProps> {
+  render() {
+    return <Button color="default" {...this.props} />;
+  }
+}
+
+export default EditButton;

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

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

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

@@ -0,0 +1,34 @@
+//@flow
+import React from "react";
+import Button, { type ButtonProps } from "./Button";
+
+type SubmitButtonProps = ButtonProps & {
+  scrollToTop: boolean
+}
+
+class SubmitButton extends React.Component<SubmitButtonProps> {
+  static defaultProps = {
+    scrollToTop: true
+  };
+
+  render() {
+    const { action, scrollToTop } = this.props;
+    return (
+      <Button
+        type="submit"
+        color="primary"
+        {...this.props}
+        action={(event) => {
+          if (action) {
+            action(event);
+          }
+          if (scrollToTop) {
+            window.scrollTo(0, 0);
+          }
+        }}
+      />
+    );
+  }
+}
+
+export default SubmitButton;

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

@@ -0,0 +1,14 @@
+// @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";