diff --git a/.editorconfig b/.editorconfig index fd684fd..7415d8f 100644 --- a/.editorconfig +++ b/.editorconfig @@ -2,12 +2,11 @@ root = true [*] charset = utf-8 -end_of_line = lf insert_final_newline = true trim_trailing_whitespace = true max_line_length = 120 indent_size = 4 indent_style = space -[*.json] +[{*.html,*.json}] indent_size = 2 diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..de46be6 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,11 @@ +{ + "arrowParens": "always", + "bracketSpacing": true, + "jsxSingleQuote": false, + "jsxBracketSameLine": false, + "semi": true, + "singleQuote": false, + "tabWidth": 4, + "trailingComma": "none", + "useTabs": false +} diff --git a/index.html b/index.html index 68b621a..2d4c271 100644 --- a/index.html +++ b/index.html @@ -4,11 +4,10 @@ - Tauri + Peact + TS + Cultivation - -
+ diff --git a/package.json b/package.json index 092f09d..eb214bd 100644 --- a/package.json +++ b/package.json @@ -10,9 +10,13 @@ "tauri": "tauri" }, "dependencies": { + "react": "npm:@preact/compat", + "react-dom": "npm:@preact/compat", + "@fluentui/react-components": "^9.41.0", "@tauri-apps/api": "^1.5.1", "preact": "^10.16.0", "react-icons": "^4.12.0", + "react-router-dom": "^6.20.0", "zustand": "^4.4.6" }, "devDependencies": { diff --git a/src/App.css b/src/App.css deleted file mode 100644 index ef2225f..0000000 --- a/src/App.css +++ /dev/null @@ -1,7 +0,0 @@ -.logo.vite:hover { - filter: drop-shadow(0 0 2em #747bff); -} - -.logo.preact:hover { - filter: drop-shadow(0 0 2em #673ab8); -} diff --git a/src/App.tsx b/src/App.tsx deleted file mode 100644 index 525d75b..0000000 --- a/src/App.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { useState } from "preact/hooks"; -import preactLogo from "./assets/preact.svg"; -import { invoke } from "@tauri-apps/api/tauri"; -import "./App.css"; - -function App() { - const [greetMsg, setGreetMsg] = useState(""); - const [name, setName] = useState(""); - - async function greet() { - // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command - setGreetMsg(await invoke("greet", { name })); - } - - return ( -
-

Welcome to Tauri!

- -
- - - - - - - - - -
- -

Click on the Tauri, Vite, and Preact logos to learn more.

- -
{ - e.preventDefault(); - greet(); - }} - > - setName(e.currentTarget.value)} - placeholder="Enter a name..." - /> - -
- -

{greetMsg}

-
- ); -} - -export default App; diff --git a/src/assets/preact.svg b/src/assets/preact.svg deleted file mode 100644 index 2d23db7..0000000 --- a/src/assets/preact.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/constants.ts b/src/constants.ts new file mode 100644 index 0000000..b41ae85 --- /dev/null +++ b/src/constants.ts @@ -0,0 +1,4 @@ +export const PageRoutes = { + HOME: "/", + SETTINGS: "/settings" +}; diff --git a/src/main.tsx b/src/main.tsx index 435ae44..2f789f5 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,5 +1,14 @@ import { render } from "preact"; -import App from "./App"; -import "./styles.css"; -render(, document.getElementById("root")!); +import { createBrowserRouter, RouterProvider } from "react-router-dom"; + +import App from "@ui/App"; + +export const router = createBrowserRouter([ + { path: "*", element: } +]); + +render( + , + document.getElementById("root")! +); diff --git a/src/styles.css b/src/styles.css deleted file mode 100644 index f7de85b..0000000 --- a/src/styles.css +++ /dev/null @@ -1,109 +0,0 @@ -:root { - font-family: Inter, Avenir, Helvetica, Arial, sans-serif; - font-size: 16px; - 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; -} - -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: 0.75s; -} - -.logo.tauri:hover { - filter: drop-shadow(0 0 2em #24c8db); -} - -.row { - display: flex; - justify-content: center; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} - -a:hover { - color: #535bf2; -} - -h1 { - text-align: center; -} - -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; -} -button:active { - border-color: #396cd8; - background-color: #e8e8e8; -} - -input, -button { - outline: none; -} - -#greet-input { - margin-right: 5px; -} - -@media (prefers-color-scheme: dark) { - :root { - color: #f6f6f6; - background-color: #2f2f2f; - } - - a:hover { - color: #24c8db; - } - - input, - button { - color: #ffffff; - background-color: #0f0f0f98; - } - button:active { - background-color: #0f0f0f69; - } -} diff --git a/src/ui/App.tsx b/src/ui/App.tsx new file mode 100644 index 0000000..f5f380d --- /dev/null +++ b/src/ui/App.tsx @@ -0,0 +1,22 @@ +import { Route, Routes } from "react-router-dom"; + +import TopBar from "@components/TopBar.tsx"; +import Launcher from "@ui/layout/Launcher.tsx"; + +import { PageRoutes } from "@app/constants.ts"; + +import "@css/App.scss"; + +function App() { + return ( +
+ + + + } /> + +
+ ); +} + +export default App; diff --git a/src/ui/components/InfoBoard.tsx b/src/ui/components/InfoBoard.tsx new file mode 100644 index 0000000..209552e --- /dev/null +++ b/src/ui/components/InfoBoard.tsx @@ -0,0 +1,9 @@ +function InfoBoard() { + return ( +
+ +
+ ); +} + +export default InfoBoard; diff --git a/src/ui/components/NewsFeed.tsx b/src/ui/components/NewsFeed.tsx new file mode 100644 index 0000000..0d1cc24 --- /dev/null +++ b/src/ui/components/NewsFeed.tsx @@ -0,0 +1,9 @@ +function NewsFeed() { + return ( +
+ +
+ ); +} + +export default NewsFeed; diff --git a/src/ui/components/TopBar.tsx b/src/ui/components/TopBar.tsx new file mode 100644 index 0000000..d50873b --- /dev/null +++ b/src/ui/components/TopBar.tsx @@ -0,0 +1,9 @@ +function TopBar() { + return ( +
+ +
+ ); +} + +export default TopBar; diff --git a/src/ui/css/App.scss b/src/ui/css/App.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/ui/layout/Launcher.tsx b/src/ui/layout/Launcher.tsx new file mode 100644 index 0000000..86728c6 --- /dev/null +++ b/src/ui/layout/Launcher.tsx @@ -0,0 +1,24 @@ +import NewsFeed from "@components/NewsFeed.tsx"; +import InfoBoard from "@components/InfoBoard.tsx"; +import { Button } from "@fluentui/react-components"; + +function Launcher() { + return ( +
+
+ + + + +
+ +
+ +
+
+ ); +} + +export default Launcher; diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts deleted file mode 100644 index 11f02fe..0000000 --- a/src/vite-env.d.ts +++ /dev/null @@ -1 +0,0 @@ -/// diff --git a/tsconfig.json b/tsconfig.json index 21abced..3d9a7cd 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -19,7 +19,19 @@ "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, - "noFallthroughCasesInSwitch": true + "noFallthroughCasesInSwitch": true, + + /* Path aliases */ + "baseUrl": ".", + "paths": { + "@app/*": ["src/*"], + "@ui/*": ["src/ui/*"], + "@css/*": ["src/ui/css/*"], + "@components/*": ["src/ui/components/*"], + "@backend/*": ["src/backend/*"], + "react": ["./node_modules/preact/compat/"], + "react-dom": ["./node_modules/preact/compat/"] + }, }, "include": ["src"], "references": [{ "path": "./tsconfig.node.json" }]