aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorLeandro Alves <leandroalves@yahooinc.com>2022-06-22 15:53:58 +0200
committerLeandro Alves <leandroalves@yahooinc.com>2022-06-22 15:53:58 +0200
commit99a9c9e471160b226d36ecd3ad4c2f5e640b03e8 (patch)
treeb4c0e43f40630e9ac6560401863f951d42bcdca3
parent5ad11fbd189a625c8809f70af0ccae51ee8c3b6e (diff)
Add basic layout and remove sample code
Diffstat
-rw-r--r--client/js/app/index.html8
-rw-r--r--client/js/app/src/app/app.jsx16
-rw-r--r--client/js/app/src/app/components/index.js2
-rw-r--r--client/js/app/src/app/components/layout/app.jsx43
-rw-r--r--client/js/app/src/app/components/layout/header-logo.jsx7
-rw-r--r--client/js/app/src/app/components/layout/header.jsx11
-rw-r--r--client/js/app/src/app/components/layout/layout.jsx11
-rw-r--r--client/js/app/src/app/main.jsx9
-rw-r--r--client/js/app/src/app/pages/home/home.jsx5
-rw-r--r--client/js/app/src/app/pages/main.jsx15
-rw-r--r--client/js/app/src/app/styles/App.css42
-rw-r--r--client/js/app/src/app/styles/index.css13
12 files changed, 66 insertions, 116 deletions
diff --git a/client/js/app/index.html b/client/js/app/index.html
index f6304d618e5..d245c706374 100644
--- a/client/js/app/index.html
+++ b/client/js/app/index.html
@@ -2,12 +2,16 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
- <link rel="icon" type="image/svg+xml" href="/src/app/assets/favicon.svg" />
+ <link
+ rel="icon"
+ type="image/svg+xml"
+ href="/src/app/assets/img/favicon.svg"
+ />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="root"></div>
- <script type="module" src="/src/app/pages/main.jsx"></script>
+ <script type="module" src="/src/app/main.jsx"></script>
</body>
</html>
diff --git a/client/js/app/src/app/app.jsx b/client/js/app/src/app/app.jsx
new file mode 100644
index 00000000000..57eba3ea95d
--- /dev/null
+++ b/client/js/app/src/app/app.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Layout } from 'app/components';
+import { AppRouter } from 'app/libs/app-router';
+import { Home } from 'app/pages/home/home';
+import { QueryBuilder } from 'app/pages/querybuilder/query-builder';
+
+export function App() {
+ return (
+ <Layout>
+ <AppRouter>
+ <Home path="/" />
+ <QueryBuilder path="querybuilder" />
+ </AppRouter>
+ </Layout>
+ );
+}
diff --git a/client/js/app/src/app/components/index.js b/client/js/app/src/app/components/index.js
index e7c597c3971..488fc1b23fa 100644
--- a/client/js/app/src/app/components/index.js
+++ b/client/js/app/src/app/components/index.js
@@ -1,2 +1,2 @@
-export { App } from 'app/components/layout/app';
export { Error } from 'app/components/layout/error';
+export { Layout } from 'app/components/layout/layout';
diff --git a/client/js/app/src/app/components/layout/app.jsx b/client/js/app/src/app/components/layout/app.jsx
deleted file mode 100644
index ba8047ba04c..00000000000
--- a/client/js/app/src/app/components/layout/app.jsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React, { useState } from 'react';
-import logo from 'app/assets/logo.svg';
-import 'app/styles/App.css';
-
-export function App() {
- const [count, setCount] = useState(0);
-
- return (
- <div className="App">
- <header className="App-header">
- <img src={logo} className="App-logo" alt="logo" />
- <p>Hello Vite + React!</p>
- <p>
- <button type="button" onClick={() => setCount((count) => count + 1)}>
- count is: {count}
- </button>
- </p>
- <p>
- Edit <code>App.jsx</code> and save to test HMR updates.
- </p>
- <p>
- <a
- className="App-link"
- href="https://reactjs.org"
- target="_blank"
- rel="noopener noreferrer"
- >
- Learn React
- </a>
- {' | '}
- <a
- className="App-link"
- href="https://vitejs.dev/guide/features.html"
- target="_blank"
- rel="noopener noreferrer"
- >
- Vite Docs
- </a>
- </p>
- </header>
- </div>
- );
-}
diff --git a/client/js/app/src/app/components/layout/header-logo.jsx b/client/js/app/src/app/components/layout/header-logo.jsx
new file mode 100644
index 00000000000..42b03af4bf6
--- /dev/null
+++ b/client/js/app/src/app/components/layout/header-logo.jsx
@@ -0,0 +1,7 @@
+import React from 'react';
+import { Image } from '@mantine/core';
+import { VespaLogo } from 'app/assets';
+
+export function HeaderLogo() {
+ return <Image height={34} src={VespaLogo} />;
+}
diff --git a/client/js/app/src/app/components/layout/header.jsx b/client/js/app/src/app/components/layout/header.jsx
new file mode 100644
index 00000000000..2ddc3943445
--- /dev/null
+++ b/client/js/app/src/app/components/layout/header.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { Header as MantineHeader } from '@mantine/core';
+import { HeaderLogo } from 'app/components/layout/header-logo';
+
+export function Header() {
+ return (
+ <MantineHeader height={55} sx={{ display: 'flex', alignItems: 'center' }}>
+ <HeaderLogo />
+ </MantineHeader>
+ );
+}
diff --git a/client/js/app/src/app/components/layout/layout.jsx b/client/js/app/src/app/components/layout/layout.jsx
new file mode 100644
index 00000000000..f0f5a0594c0
--- /dev/null
+++ b/client/js/app/src/app/components/layout/layout.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { AppShell } from '@mantine/core';
+import { Header } from 'app/components/layout/header';
+
+export function Layout({ children }) {
+ return (
+ <AppShell header={<Header />} fixed>
+ {children}
+ </AppShell>
+ );
+}
diff --git a/client/js/app/src/app/main.jsx b/client/js/app/src/app/main.jsx
new file mode 100644
index 00000000000..96514d419e1
--- /dev/null
+++ b/client/js/app/src/app/main.jsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { App } from 'app/app';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+ <React.StrictMode>
+ <App />
+ </React.StrictMode>
+);
diff --git a/client/js/app/src/app/pages/home/home.jsx b/client/js/app/src/app/pages/home/home.jsx
new file mode 100644
index 00000000000..d39b696bf08
--- /dev/null
+++ b/client/js/app/src/app/pages/home/home.jsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export function Home() {
+ return <>home</>;
+}
diff --git a/client/js/app/src/app/pages/main.jsx b/client/js/app/src/app/pages/main.jsx
deleted file mode 100644
index 00444180447..00000000000
--- a/client/js/app/src/app/pages/main.jsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import { App } from 'app/components';
-import 'app/styles/index.css';
-import { AppRouter } from 'app/libs/app-router';
-import { QueryBuilder } from 'app/pages/querybuilder/query-builder';
-
-ReactDOM.createRoot(document.getElementById('root')).render(
- <React.StrictMode>
- <AppRouter>
- <App path="/" />
- <QueryBuilder path="querybuilder" />
- </AppRouter>
- </React.StrictMode>
-);
diff --git a/client/js/app/src/app/styles/App.css b/client/js/app/src/app/styles/App.css
deleted file mode 100644
index 8da3fde63d9..00000000000
--- a/client/js/app/src/app/styles/App.css
+++ /dev/null
@@ -1,42 +0,0 @@
-.App {
- text-align: center;
-}
-
-.App-logo {
- height: 40vmin;
- pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
- .App-logo {
- animation: App-logo-spin infinite 20s linear;
- }
-}
-
-.App-header {
- background-color: #282c34;
- min-height: 100vh;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- font-size: calc(10px + 2vmin);
- color: white;
-}
-
-.App-link {
- color: #61dafb;
-}
-
-@keyframes App-logo-spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
-}
-
-button {
- font-size: calc(10px + 2vmin);
-}
diff --git a/client/js/app/src/app/styles/index.css b/client/js/app/src/app/styles/index.css
deleted file mode 100644
index ec2585e8c0b..00000000000
--- a/client/js/app/src/app/styles/index.css
+++ /dev/null
@@ -1,13 +0,0 @@
-body {
- margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
- sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
- monospace;
-}