restructure scm-ui and use ui-components and ui-types

scm-ui-components/packages/ui-components/src/layout/Footer.js

@@ -0,0 +1,25 @@
+//@flow
+import React from "react";
+import type { Me } from "@scm-manager/ui-types";
+
+type Props = {
+  me?: Me
+};
+
+class Footer extends React.Component<Props> {
+  render() {
+    const { me } = this.props;
+    if (!me) {
+      return "";
+    }
+    return (
+      <footer className="footer">
+        <div className="container is-centered">
+          <p className="has-text-centered">{me.displayName}</p>
+        </div>
+      </footer>
+    );
+  }
+}
+
+export default Footer;

scm-ui-components/packages/ui-components/src/layout/Header.js

@@ -0,0 +1,31 @@
+//@flow
+import * as React from "react";
+import Logo from "./../Logo";
+
+type Props = {
+  children?: React.Node
+};
+
+class Header extends React.Component<Props> {
+  render() {
+    const { children } = this.props;
+    return (
+      <section className="hero is-dark is-small">
+        <div className="hero-body">
+          <div className="container">
+            <div className="columns is-vcentered">
+              <div className="column">
+                <Logo />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="hero-foot">
+          <div className="container">{children}</div>
+        </div>
+      </section>
+    );
+  }
+}
+
+export default Header;

scm-ui-components/packages/ui-components/src/layout/Page.js

@@ -0,0 +1,44 @@
+//@flow
+import * as React from "react";
+import Loading from "./../Loading";
+import ErrorNotification from "./../ErrorNotification";
+import Title from "./Title";
+import Subtitle from "./Subtitle";
+
+type Props = {
+  title?: string,
+  subtitle?: string,
+  loading?: boolean,
+  error?: Error,
+  showContentOnError?: boolean,
+  children: React.Node
+};
+
+class Page extends React.Component<Props> {
+  render() {
+    const { title, error, subtitle } = this.props;
+    return (
+      <section className="section">
+        <div className="container">
+          <Title title={title} />
+          <Subtitle subtitle={subtitle} />
+          <ErrorNotification error={error} />
+          {this.renderContent()}
+        </div>
+      </section>
+    );
+  }
+
+  renderContent() {
+    const { loading, children, showContentOnError, error } = this.props;
+    if (error && !showContentOnError) {
+      return null;
+    }
+    if (loading) {
+      return <Loading />;
+    }
+    return children;
+  }
+}
+
+export default Page;

scm-ui-components/packages/ui-components/src/layout/Subtitle.js

@@ -0,0 +1,18 @@
+// @flow
+import React from "react";
+
+type Props = {
+  subtitle?: string
+};
+
+class Subtitle extends React.Component<Props> {
+  render() {
+    const { subtitle } = this.props;
+    if (subtitle) {
+      return <h1 className="subtitle">{subtitle}</h1>;
+    }
+    return null;
+  }
+}
+
+export default Subtitle;

scm-ui-components/packages/ui-components/src/layout/Title.js

@@ -0,0 +1,18 @@
+// @flow
+import React from "react";
+
+type Props = {
+  title?: string
+};
+
+class Title extends React.Component<Props> {
+  render() {
+    const { title } = this.props;
+    if (title) {
+      return <h1 className="title">{title}</h1>;
+    }
+    return null;
+  }
+}
+
+export default Title;

scm-ui-components/packages/ui-components/src/layout/index.js

@@ -0,0 +1,8 @@
+// @create-index
+
+export { default as Footer } from "./Footer.js";
+export { default as Header } from "./Header.js";
+export { default as Page } from "./Page.js";
+export { default as Subtitle } from "./Subtitle.js";
+export { default as Title } from "./Title.js";
+