diff --git a/tauri-runner/package.json b/tauri-runner/package.json index 372df05..8d7bb4b 100644 --- a/tauri-runner/package.json +++ b/tauri-runner/package.json @@ -10,21 +10,22 @@ "tauri": "tauri" }, "dependencies": { - "react": "^18.2.0", - "react-dom": "^18.2.0", - "@tauri-apps/api": "^1.0.2", "@emotion/react": "^11.8.2", "@emotion/styled": "^11.8.1", "@mui/icons-material": "^5.5.1", - "@mui/material": "^5.5.1" + "@mui/material": "^5.5.1", + "@tauri-apps/api": "^1.0.2", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-router-dom": "^6.4.0" }, "devDependencies": { + "@tauri-apps/cli": "^1.0.5", "@types/node": "^18.7.10", "@types/react": "^18.0.15", "@types/react-dom": "^18.0.6", "@vitejs/plugin-react": "^2.0.0", "typescript": "^4.6.4", - "vite": "^3.0.2", - "@tauri-apps/cli": "^1.0.5" + "vite": "^3.0.2" } } diff --git a/tauri-runner/src/App.tsx b/tauri-runner/src/App.tsx index 727680d..c056d38 100644 --- a/tauri-runner/src/App.tsx +++ b/tauri-runner/src/App.tsx @@ -1,21 +1,17 @@ -import { useState } from "react"; -import StepOneContent from "./step-one-content"; -import StepTwoContent from "./step-two-content"; +import { Outlet } from 'react-router-dom'; +import Sidebar from "./components/Sidebar/Sidebar"; +import "./app.css"; function App() { - const [commands, setCommands] = useState([] as string[]); - - const getCommands = (cmds: string[]) => { - setCommands(cmds); - } return ( -
-

NPM Dev Runner (beta)

- - - - -
+ <> + +
+ +
+ ); } diff --git a/tauri-runner/src/app.css b/tauri-runner/src/app.css new file mode 100644 index 0000000..5eacb67 --- /dev/null +++ b/tauri-runner/src/app.css @@ -0,0 +1,17 @@ +#root { + display: flex; + height: 100%; + width: 100%; +} + +#sidebar { + border-right: solid 1px #e3e3e3; + display: flex; + flex-direction: column; +} + +#detail { + flex: 1; + padding: 2rem 4rem; + width: 100%; +} \ No newline at end of file diff --git a/tauri-runner/src/components/Sidebar/Sidebar.tsx b/tauri-runner/src/components/Sidebar/Sidebar.tsx new file mode 100644 index 0000000..1ce4a38 --- /dev/null +++ b/tauri-runner/src/components/Sidebar/Sidebar.tsx @@ -0,0 +1,20 @@ +import "./sidebar.css"; +import {Link} from "react-router-dom"; + +function Sidebar() { + return (<> + + + +); +} +export default Sidebar; \ No newline at end of file diff --git a/tauri-runner/src/components/Sidebar/sidebar.css b/tauri-runner/src/components/Sidebar/sidebar.css new file mode 100644 index 0000000..c1a9f2e --- /dev/null +++ b/tauri-runner/src/components/Sidebar/sidebar.css @@ -0,0 +1,36 @@ +.link { + text-transform: uppercase; + text-decoration: none; + color: #e7e8f2; + font-size: 13px; + opacity: 0.8; +} +.link:hover { + opacity: 1; +} + +li { + list-style-type: none; +} + +.sidebar-items { + width: 203px; + padding: 0; + margin: 45px 0 0; + visibility: visible; + /* animation: linear 260ms hidden; */ +} + +.sidebar-item { + align-items: center; + display: flex; + box-sizing: content-box; + height: 32px; + padding: 0 16px 0 16px; + vertical-align: middle; + cursor: pointer; +} + +.sidebar-item:hover { + background-color: rgba(44,45,82, .5); +} \ No newline at end of file diff --git a/tauri-runner/src/main.tsx b/tauri-runner/src/main.tsx index 7d6d78e..3a3d751 100644 --- a/tauri-runner/src/main.tsx +++ b/tauri-runner/src/main.tsx @@ -1,10 +1,11 @@ import React from "react"; import ReactDOM from "react-dom/client"; -import App from "./App"; +import {RouterProvider} from 'react-router-dom'; +import {router} from "./router"; import "./style.css"; ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( - + ); diff --git a/tauri-runner/src/pages/runner/Runner.tsx b/tauri-runner/src/pages/runner/Runner.tsx new file mode 100644 index 0000000..d4ad014 --- /dev/null +++ b/tauri-runner/src/pages/runner/Runner.tsx @@ -0,0 +1,27 @@ +import StepOneContent from "./step-one-content"; +import StepTwoContent from "./step-two-content"; +import {useState} from "react"; +import "./runner.css"; + + +function Runner() { + const [commands, setCommands] = useState([] as string[]); + + const getCommands = (cmds: string[]) => { + setCommands(cmds); + } + + return ( + <> +
+

NPM Dev Runner (beta)

+ + + + +
+ + ); +} + +export default Runner; \ No newline at end of file diff --git a/tauri-runner/src/pages/runner/runner.css b/tauri-runner/src/pages/runner/runner.css new file mode 100644 index 0000000..bb44c33 --- /dev/null +++ b/tauri-runner/src/pages/runner/runner.css @@ -0,0 +1,57 @@ +.container { + margin: 0; + padding-top: 10vh; + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; +} + + +input { + width: 60%; +} + +input, +button { + border-radius: 8px; + border: 1px solid transparent; + padding: 0.6em 1.2em; + font-size: 1em; + font-weight: 500; + font-family: inherit; + color: #0f0f0f; + background-color: #ffffff; + transition: border-color 0.25s; + box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); +} + +button { + cursor: pointer; +} + +button:hover { + border-color: #396cd8; +} + +input, +button { + outline: none; +} + +.textField { + width: 600px; +} + +.alertPos { + width: 600px; + transform: translateY(5px); +} + +.btnPos { + transform: translateY(10px); +} + +.nextButtonsG { + padding-top: 10px; +} \ No newline at end of file diff --git a/tauri-runner/src/step-one-content.tsx b/tauri-runner/src/pages/runner/step-one-content.tsx similarity index 100% rename from tauri-runner/src/step-one-content.tsx rename to tauri-runner/src/pages/runner/step-one-content.tsx diff --git a/tauri-runner/src/step-two-content.tsx b/tauri-runner/src/pages/runner/step-two-content.tsx similarity index 100% rename from tauri-runner/src/step-two-content.tsx rename to tauri-runner/src/pages/runner/step-two-content.tsx diff --git a/tauri-runner/src/router.tsx b/tauri-runner/src/router.tsx new file mode 100644 index 0000000..37f4e3e --- /dev/null +++ b/tauri-runner/src/router.tsx @@ -0,0 +1,24 @@ +import {createBrowserRouter} from 'react-router-dom'; +import App from './App'; +import Runner from "./pages/runner/Runner"; + +export const router = createBrowserRouter([ + { +path: '', + element: , + children: [ + { + path: 'runner', + element: , + }, + { + path: 'results-history', + element: 'Results History' + }, + { + path: 'p3', + element: `page 3 `, + }, +], +}, +]); \ No newline at end of file diff --git a/tauri-runner/src/style.css b/tauri-runner/src/style.css index 072a8c0..becc535 100644 --- a/tauri-runner/src/style.css +++ b/tauri-runner/src/style.css @@ -4,87 +4,28 @@ line-height: 24px; font-weight: 400; - color: #0f0f0f; - background-color: #f6f6f6; - font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; -} - -.container { - margin: 0; - padding-top: 10vh; - display: flex; - flex-direction: column; - justify-content: center; - text-align: center; -} - - -input { - width: 60%; -} - -input, -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - color: #0f0f0f; - background-color: #ffffff; - transition: border-color 0.25s; - box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); -} -button { - cursor: pointer; + height: 100%; + box-sizing: border-box; + background-color: #191a2e; + color: #e7e8f2; } -button:hover { - border-color: #396cd8; +* { + box-sizing: border-box; } -input, -button { - outline: none; -} - -.textField { - width: 600px; -} - -.alertPos { - width: 600px; - transform: translateY(5px); -} - -.btnPos { - transform: translateY(10px); -} - -.nextButtonsG { - padding-top: 10px; +body { + height: 100%; + margin: 0; + padding: 0; + position: relative; } -@media (prefers-color-scheme: dark) { - :root { - color: #f6f6f6; - background-color: #2f2f2f; - } - a:hover { - color: #24c8db; - } - input, - button { - color: #ffffff; - background-color: #0f0f0f98; - } -} diff --git a/tauri-runner/yarn.lock b/tauri-runner/yarn.lock index cef1535..80a9844 100644 --- a/tauri-runner/yarn.lock +++ b/tauri-runner/yarn.lock @@ -491,6 +491,11 @@ resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.6.tgz#cee20bd55e68a1720bdab363ecf0c821ded4cd45" integrity sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw== +"@remix-run/router@1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.0.0.tgz#a2189335a5f6428aa904ccc291988567018b6e01" + integrity sha512-SCR1cxRSMNKjaVYptCzBApPDqGwa3FGdjVHc+rOToocNPHQdIYLZBfv/3f+KvYuXDkUGVIW9IAzmPNZDRL1I4A== + "@tauri-apps/api@^1.0.2": version "1.0.2" resolved "https://registry.yarnpkg.com/@tauri-apps/api/-/api-1.0.2.tgz#5228720e35d50fd08df87067dc29e7306c1f7a10" @@ -1069,6 +1074,20 @@ react-refresh@^0.14.0: resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e" integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ== +react-router-dom@^6.4.0: + version "6.4.0" + resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.4.0.tgz#a7d7c394c9e730b045cdd4f5d6c2d1ccb9e26947" + integrity sha512-4Aw1xmXKeleYYQ3x0Lcl2undHR6yMjXZjd9DKZd53SGOYqirrUThyUb0wwAX5VZAyvSuzjNJmZlJ3rR9+/vzqg== + dependencies: + react-router "6.4.0" + +react-router@6.4.0: + version "6.4.0" + resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.4.0.tgz#68449c23dc893fc7a57db068c19987be1de72edb" + integrity sha512-B+5bEXFlgR1XUdHYR6P94g299SjrfCBMmEDJNcFbpAyRH1j1748yt9NdDhW3++nw1lk3zQJ6aOO66zUx3KlTZg== + dependencies: + "@remix-run/router" "1.0.0" + react-transition-group@^4.4.5: version "4.4.5" resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"