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

scm-ui-components/packages/ui-components/src/navigation/NavAction.js

@@ -0,0 +1,20 @@
+//@flow
+import React from "react";
+
+type Props = {
+  label: string,
+  action: () => void
+};
+
+class NavAction extends React.Component<Props> {
+  render() {
+    const { label, action } = this.props;
+    return (
+      <li>
+        <a onClick={action}>{label}</a>
+      </li>
+    );
+  }
+}
+
+export default NavAction;

scm-ui-components/packages/ui-components/src/navigation/NavLink.js

@@ -0,0 +1,37 @@
+//@flow
+import * as React from "react";
+import { Route, Link } from "react-router-dom";
+
+// TODO mostly copy of PrimaryNavigationLink
+
+type Props = {
+  to: string,
+  label: string,
+  activeOnlyWhenExact?: boolean
+};
+
+class NavLink extends React.Component<Props> {
+  static defaultProps = {
+    activeOnlyWhenExact: true
+  };
+
+  renderLink = (route: any) => {
+    const { to, label } = this.props;
+    return (
+      <li>
+        <Link className={route.match ? "is-active" : ""} to={to}>
+          {label}
+        </Link>
+      </li>
+    );
+  };
+
+  render() {
+    const { to, activeOnlyWhenExact } = this.props;
+    return (
+      <Route path={to} exact={activeOnlyWhenExact} children={this.renderLink} />
+    );
+  }
+}
+
+export default NavLink;

scm-ui-components/packages/ui-components/src/navigation/Navigation.js

@@ -0,0 +1,14 @@
+//@flow
+import * as React from "react";
+
+type Props = {
+  children?: React.Node
+};
+
+class Navigation extends React.Component<Props> {
+  render() {
+    return <aside className="menu">{this.props.children}</aside>;
+  }
+}
+
+export default Navigation;

scm-ui-components/packages/ui-components/src/navigation/PrimaryNavigation.js

@@ -0,0 +1,45 @@
+//@flow
+import React from "react";
+import { translate } from "react-i18next";
+import PrimaryNavigationLink from "./PrimaryNavigationLink";
+
+type Props = {
+  t: string => string
+};
+
+class PrimaryNavigation extends React.Component<Props> {
+  render() {
+    const { t } = this.props;
+    return (
+      <nav className="tabs is-boxed">
+        <ul>
+          <PrimaryNavigationLink
+            to="/repos"
+            match="/(repo|repos)"
+            label={t("primary-navigation.repositories")}
+          />
+          <PrimaryNavigationLink
+            to="/users"
+            match="/(user|users)"
+            label={t("primary-navigation.users")}
+          />
+          <PrimaryNavigationLink
+            to="/groups"
+            match="/(group|groups)"
+            label={t("primary-navigation.groups")}
+          />
+          <PrimaryNavigationLink
+            to="/config"
+            label={t("primary-navigation.config")}
+          />
+          <PrimaryNavigationLink
+            to="/logout"
+            label={t("primary-navigation.logout")}
+          />
+        </ul>
+      </nav>
+    );
+  }
+}
+
+export default translate("commons")(PrimaryNavigation);

scm-ui-components/packages/ui-components/src/navigation/PrimaryNavigationLink.js

@@ -0,0 +1,35 @@
+//@flow
+import * as React from "react";
+import { Route, Link } from "react-router-dom";
+
+type Props = {
+  to: string,
+  label: string,
+  match?: string,
+  activeOnlyWhenExact?: boolean
+};
+
+class PrimaryNavigationLink extends React.Component<Props> {
+  renderLink = (route: any) => {
+    const { to, label } = this.props;
+    return (
+      <li className={route.match ? "is-active" : ""}>
+        <Link to={to}>{label}</Link>
+      </li>
+    );
+  };
+
+  render() {
+    const { to, match, activeOnlyWhenExact } = this.props;
+    const path = match ? match : to;
+    return (
+      <Route
+        path={path}
+        exact={activeOnlyWhenExact}
+        children={this.renderLink}
+      />
+    );
+  }
+}
+
+export default PrimaryNavigationLink;

scm-ui-components/packages/ui-components/src/navigation/Section.js

@@ -0,0 +1,21 @@
+//@flow
+import * as React from "react";
+
+type Props = {
+  label: string,
+  children?: React.Node
+};
+
+class Section extends React.Component<Props> {
+  render() {
+    const { label, children } = this.props;
+    return (
+      <div>
+        <p className="menu-label">{label}</p>
+        <ul className="menu-list">{children}</ul>
+      </div>
+    );
+  }
+}
+
+export default Section;

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

@@ -0,0 +1,9 @@
+// @create-index
+
+export { default as NavAction } from "./NavAction.js";
+export { default as NavLink } from "./NavLink.js";
+export { default as Navigation } from "./Navigation.js";
+export { default as PrimaryNavigation } from "./PrimaryNavigation.js";
+export { default as PrimaryNavigationLink } from "./PrimaryNavigationLink.js";
+export { default as Section } from "./Section.js";
+