Merge pull request #277 from guardian/jsh/add-page-layout-to-manager

Add basic page layout with EUI

apps/rule-manager/rule-manager-client/conf/webpack.common.config.js

@@ -12,7 +12,7 @@ module.exports = {
    plugins: [new TSConfigPathsPlugin()],
   },
   entry: {
-    app: "./src/index.tsx"
+    app: "./src/ts/index.tsx"
   },
   output: {
     filename: "rule-manager-app.js",
@@ -26,7 +26,10 @@ module.exports = {
         exclude: /node_modules/,
         use: [
           {
-            loader: "ts-loader"
+            loader: "ts-loader",
+            options: {
+              transpileOnly: true
+            }
           }
         ]
       },

apps/rule-manager/rule-manager-client/package.json

@@ -15,27 +15,29 @@
     "@babel/core": "^7.12.10",
     "@babel/preset-env": "^7.12.11",
     "@babel/preset-react": "^7.12.10",
-    "@types/react": "^16.14.2",
-    "@types/react-dom": "^16.9.10",
+    "@types/react": "~17.0.53",
+    "@types/react-dom": "~17.0.19",
     "babel-loader": "^8.2.2",
     "clean-webpack-plugin": "^3.0.0",
     "css-loader": "^5.0.1",
     "html-webpack-plugin": "^4.5.0",
     "style-loader": "^2.0.0",
     "ts-loader": "^8.0.12",
     "tsconfig-paths-webpack-plugin": "^3.3.0",
-    "typescript": "^4.1.3",
+    "typescript": "4.5",
     "webpack": "^5.11.0",
     "webpack-cli": "^4.2.0"
   },
   "dependencies": {
-    "@emotion/core": "^10.0.14",
-    "@guardian/src-button": "^2.7.1",
-    "@guardian/src-foundations": "^2.7.1",
-    "@guardian/src-layout": "^2.7.1",
-    "@guardian/src-text-input": "^2.7.1",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0"
+    "@elastic/datemath": "^5.0.3",
+    "@elastic/eui": "^76.2.0",
+    "@emotion/css": "^11.10.6",
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "moment": "^2.29.4",
+    "prop-types": "^15.8.1",
+    "react": "~17.0.2",
+    "react-dom": "~17.0.2"
   },
   "engines": {
     "node": ">=14.15.1",

apps/rule-manager/rule-manager-client/src/css/reset.css

@@ -0,0 +1,29 @@
+/* Use a more-intuitive box-sizing model. */
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+/* Remove default margin. */
+* {
+  margin: 0;
+}
+
+/* Allow percentage-based heights in the application. */
+html, body {
+  height: 100%;
+}
+
+/* Improve text rendering. */
+body {
+  -webkit-font-smoothing: antialiased;
+}
+
+/* Avoid text overflows. */
+p, h1, h2, h3, h4, h5, h6 {
+  overflow-wrap: break-word;
+}
+
+/* Ensure headings are the correct font – EUI does not have a separate font for headings. */
+h1, h2, h3, h4, h5, h6 {
+  font-family: "Guardian Egyptian Text" !important;
+}

apps/rule-manager/rule-manager-client/src/css/typography.css

@@ -0,0 +1,29 @@
+@font-face {
+  font-family: "Guardian Agate Sans";
+  src: url("../fonts/GuardianAgateSans1Web-Regular.woff2") format("woff2"),
+  url("../fonts/GuardianAgateSans1Web-Regular.woff") format("woff"),
+  url("../fonts/GuardianAgateSans1Web-Regular.ttf") format("truetype");
+  font-weight: 400;
+  font-style: normal;
+  font-stretch: normal;
+}
+
+@font-face {
+  font-family: "Guardian Agate Sans";
+  src: url("../fonts/GuardianAgateSans1Web-Bold.woff2") format("woff2"),
+  url("../fonts/GuardianAgateSans1Web-Bold.woff") format("woff"),
+  url("../fonts/GuardianAgateSans1Web-Bold.ttf") format("truetype");
+  font-weight: 700;
+  font-style: normal;
+  font-stretch: normal;
+}
+
+@font-face {
+  font-family: "Guardian Egyptian Text";
+  src: url("../fonts/GuardianTextEgyptianWeb-Regular.woff2") format("woff2"),
+  url("../fonts/GuardianTextEgyptianWeb-Regular.woff") format("woff"),
+  url("../fonts/GuardianTextEgyptianWeb-Regular.ttf") format("truetype");
+  font-weight: 400;
+  font-style: normal;
+  font-stretch: normal;
+}

apps/rule-manager/rule-manager-client/src/ts/components/layout/Header.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import styled from "@emotion/styled"
+import {Logo} from "./Logo";
+import {colors} from "../../constants/constants";
+
+const HeaderContainer = styled.div`
+  display: flex;
+  height: 50px;
+  background-color: white;
+`;
+
+const HeaderLogo = styled.div`
+  height: 50px;
+  width: 50px;
+  margin-right: auto;
+  background-color: ${colors.backgroundColorDark};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const Header = () => <HeaderContainer>
+  <HeaderLogo><Logo/></HeaderLogo>
+</HeaderContainer>;

apps/rule-manager/rule-manager-client/src/ts/components/layout/Logo.tsx

@@ -0,0 +1,6 @@
+import React from "react";
+
+export const Logo = () => <svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M14.0735 16.5351L13.4463 14.4381H9.70059L9.03957 16.5351L10.243 16.9346V17.8333H6.66669V16.9346L7.4633 16.5351L11.1752 5.83334H14.0904L17.8023 16.5351L18.6667 16.9346V17.8333H12.8701V16.9346L14.0735 16.5351ZM11.565 8.49631L10.1413 13.0234H13.0226L11.6497 8.49631H11.565Z" fill="white"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.34346 20.3964L8.44446 21.2954L12.9395 27.5884H13.3665L26.2222 14.2832L25.3232 13.4067L13.3665 24.2397L9.34346 20.3964Z" fill="white"/>
+</svg>

apps/rule-manager/rule-manager-client/src/ts/components/layout/Page.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { EuiPageTemplate, EuiProvider } from "@elastic/eui";
+import {Header} from "./Header";
+import {Rules} from "../pages/Rules";
+import {euiThemeOverrides} from "../../constants/euiTheme";
+
+export const Page = () =>
+  <EuiProvider modify={euiThemeOverrides}>
+    <EuiPageTemplate>
+      <Header />
+      <EuiPageTemplate.Section color="subdued">
+        <Rules />
+      </EuiPageTemplate.Section>
+    </EuiPageTemplate>
+  </EuiProvider>

apps/rule-manager/rule-manager-client/src/ts/components/pages/Rules.tsx

@@ -0,0 +1,11 @@
+import {EuiTitle, EuiText} from "@elastic/eui";
+import React from "react";
+
+export const Rules = () => <>
+  <EuiTitle>
+    <h1>Manage rules</h1>
+  </EuiTitle>
+  <EuiText>
+    <p>Rule management goes here.</p>
+  </EuiText>
+</>

apps/rule-manager/rule-manager-client/src/ts/constants/constants.ts

@@ -0,0 +1,4 @@
+export const colors = {
+  backgroundColorDark: "#2B2B29",
+  backgroundColorLight: "#DBDBDB",
+}

apps/rule-manager/rule-manager-client/src/ts/constants/euiTheme.ts

@@ -0,0 +1,5 @@
+export const euiThemeOverrides = {
+  "font": {
+    "family": "'Guardian Agate Sans', BlinkMacSystemFont, Helvetica, Arial, sans-serif"
+  }
+};

apps/rule-manager/rule-manager-client/src/index.tsx → apps/rule-manager/rule-manager-client/src/ts/index.tsx

@@ -1,10 +1,11 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
-
-import App from "./components/App";
+import {Page} from "./components/layout/Page";
+import "../css/reset.css";
+import "../css/typography.css";
 
 let rootElem: HTMLElement | null;
 
 rootElem = document.getElementById("rule-manager-app");
 
-ReactDOM.render(<App />, rootElem);
+ReactDOM.render(<Page />, rootElem);

apps/rule-manager/rule-manager-client/tsconfig.json

@@ -6,9 +6,10 @@
         "module": "commonjs",
         "target": "es6",
         "jsx": "react",
-        "baseUrl": "./src",
+        "baseUrl": "./src/ts",
         "esModuleInterop": true,
         "strict": true,
-        "alwaysStrict": true
+        "alwaysStrict": true,
+        "skipLibCheck": true
     }
 }