diff --git a/README.md b/README.md index cabe7b4..eb5c6c3 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# TailwindElements-React-Starter +# Universal-React-Starter - [DaisyUI](https://daisyui.com/) - main styling - [react-icons](https://react-icons.github.io/react-icons/) - big icon library @@ -11,8 +11,9 @@ ## Usage 1. Setup `VITE_APP_NAME` in `.env.{mode}` files -2. run: `bun run dev` -3. To build for production, run: `bun run build` +2. Setup `VITE_BASE_PATH` in `.env.{mode}` files +3. run: `bun run dev` +4. To build for production, run: `bun run build` _bun can be replaced by packet manager of your choice_ diff --git a/bun.lockb b/bun.lockb index 5dd2ec3..25692cf 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/index.html b/index.html index 1a7416c..2f9e5ca 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,34 @@ - + - + + + Fallback title + + + + + + + + + + + + + + + + + + + +
- + diff --git a/package.json b/package.json index 073fe61..f351972 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "version": "1.0.0", "type": "module", "scripts": { - "dev": "vite --host", + "dev": "vite serve", "build": "tsc && vite build", "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview --host" @@ -18,6 +18,7 @@ "axios": "^1.6.1", "daisyui": "latest", "echarts": "^5.4.3", + "jotai": "^2.6.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-hook-form": "^7.48.2", diff --git a/public/cmms_servimain_logo.png b/public/cmms_servimain_logo.png new file mode 100644 index 0000000..e800825 Binary files /dev/null and b/public/cmms_servimain_logo.png differ diff --git a/public/cmms_servimain_logo_192.png b/public/cmms_servimain_logo_192.png new file mode 100644 index 0000000..6d512cf Binary files /dev/null and b/public/cmms_servimain_logo_192.png differ diff --git a/public/cmms_servimain_logo_512.png b/public/cmms_servimain_logo_512.png new file mode 100644 index 0000000..1babe3b Binary files /dev/null and b/public/cmms_servimain_logo_512.png differ diff --git a/public/icon.png b/public/icon.png deleted file mode 100755 index dcac0cc..0000000 Binary files a/public/icon.png and /dev/null differ diff --git a/public/manifest.json b/public/manifest.json new file mode 100644 index 0000000..9c6c394 --- /dev/null +++ b/public/manifest.json @@ -0,0 +1,21 @@ +{ + "name": "My App", + "short_name": "App", + "icons": [ + { + "src": "cmms_servimain_logo_192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "cmms_servimain_logo_512.png", + "sizes": "512x512", + "type": "image/png" + } + ], + "start_url": "/", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" + } + \ No newline at end of file diff --git a/public/pattern.png b/public/pattern.png deleted file mode 100755 index dbe449d..0000000 Binary files a/public/pattern.png and /dev/null differ diff --git a/src/features/App.tsx b/src/App.tsx similarity index 58% rename from src/features/App.tsx rename to src/App.tsx index 83cb99f..e713a8f 100644 --- a/src/features/App.tsx +++ b/src/App.tsx @@ -1,27 +1,32 @@ -import ThemeButton from "../components/ThemeButton"; -import { main } from "../configure"; +import ThemeButton from "./components/ThemeButton"; +import { main } from "./configure"; import { Router } from "wouter"; -import SwitchRoutesGenerator from "../routes/RouteStructureGenerator"; -import DebugNavigationButtonsGenerator from "../routes/DebugNavigationButtonsGenerator"; +import SwitchRoutesGenerator from "./routes/SwitchRoutesGenerator"; +import GenerateNavigationButtonsDebug from "./routes/GenerateNavigationButtonsDebug"; function App() { return ( + // Router component with base path
+ {/* Displaying program name and version */}

{main.program_name} v{main.program_version}

Base path is: {main.basePath}

+ {/* ThemeButton component */}
+ {/* Separator */}
-
- + {/* GenerateNavigationButtonsDebug component */} + {/* Paths in Route should be without base path (even without '/'). If want Route for base path than pass base path */} + {/* SwitchRoutesGenerator component */}
diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts index 5cb8965..912dcc2 100644 --- a/src/hooks/useTheme.ts +++ b/src/hooks/useTheme.ts @@ -1,28 +1,21 @@ -import { useEffect, useState } from "react"; +import { useEffect } from "react"; import useLocalStorage from "./useLocalStorage"; -/** - * A hook to toggle between light and dark theme and store the value in local storage. - * @returns {isDark, toggleTheme} - Returns a boolean indicating if dark mode is active and a function to toggle the theme. - */ const useTheme = (): [boolean, () => void] => { - // Initialize theme from local storage or default value const [theme, setTheme] = useLocalStorage("theme", "light"); - - // Determine if the current theme is dark - const [isDark, setIsDark] = useState(theme === "dark"); + const isDark = theme === "dark"; const toggleTheme = () => { + console.log("toggleTheme called"); const newTheme = theme === "light" ? "dark" : "light"; setTheme(newTheme); - setIsDark(newTheme === "dark"); document.documentElement.dataset.theme = newTheme; }; - // Apply the theme on component mount useEffect(() => { + console.log("useEffect called"); document.documentElement.dataset.theme = theme; - }, [theme]); // Re-run effect when theme changes + }, [theme]); return [isDark, toggleTheme]; }; diff --git a/src/main.tsx b/src/main.tsx index 5f8488f..df6f412 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -2,10 +2,11 @@ import React from "react"; import ReactDOM from "react-dom/client"; import { setupAxiosInterceptors } from "./api/AxiosService"; import { viteEnv } from "./configure"; -import App from "./features/App"; +import App from "./App"; import inDev from "./utils/inDebug"; import { Global, css } from "@emotion/react"; import "/style.css"; +import { Provider } from "jotai"; setupAxiosInterceptors(); inDev(() => console.log(viteEnv)); @@ -18,6 +19,8 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( // You can add more global styles here `} /> - + + + , ); diff --git a/src/features/AdministrationPage.tsx b/src/pages/AdministrationPage.tsx similarity index 100% rename from src/features/AdministrationPage.tsx rename to src/pages/AdministrationPage.tsx diff --git a/src/features/HomePage.tsx b/src/pages/HomePage.tsx similarity index 66% rename from src/features/HomePage.tsx rename to src/pages/HomePage.tsx index 33f7271..a82f3aa 100644 --- a/src/features/HomePage.tsx +++ b/src/pages/HomePage.tsx @@ -1,7 +1,9 @@ -import { useState } from "react"; +import { atom, useAtom } from "jotai"; +const counterAtom = atom(0); const HomePage = () => { - const [counter, setCounter] = useState(0); + const [counter, setCounter] = useAtom(counterAtom); + return (

HomePage

diff --git a/src/features/InboxPage.tsx b/src/pages/InboxPage.tsx similarity index 100% rename from src/features/InboxPage.tsx rename to src/pages/InboxPage.tsx diff --git a/src/features/SettingsAdvancedPage.tsx b/src/pages/SettingsAdvancedPage.tsx similarity index 100% rename from src/features/SettingsAdvancedPage.tsx rename to src/pages/SettingsAdvancedPage.tsx diff --git a/src/routes/DebugNavigationButtonsGenerator.tsx b/src/routes/GenerateNavigationButtonsDebug.tsx similarity index 79% rename from src/routes/DebugNavigationButtonsGenerator.tsx rename to src/routes/GenerateNavigationButtonsDebug.tsx index a69bab8..b878a82 100644 --- a/src/routes/DebugNavigationButtonsGenerator.tsx +++ b/src/routes/GenerateNavigationButtonsDebug.tsx @@ -1,7 +1,8 @@ import React from "react"; -import * as R from "../routes/routes"; +import { v4 } from "uuid"; import { Link } from "wouter"; -import { Routes } from "../routes/routes"; +import * as R from "./routes"; +import { Routes } from "./routes"; import inDev from "../utils/inDebug"; const routesCrawler = ( @@ -9,19 +10,18 @@ const routesCrawler = ( routesPack: Routes[] = R.routesRoot, ): JSX.Element[] => { // Roll through routes and generate Route for each - return routesPack.map((route, index): JSX.Element => { + return routesPack.map((route): JSX.Element => { // Debug log shows generated routes inDev(() => console.log( - "routesCrawler", + "routesCrawler buttons", parentPath ? parentPath + route.path : route.path, ), ); return ( -
+
{/* Check does route have children and perform routing generation for children */} { +const GenerateNavigationButtonsDebug = () => { return
{routesCrawler()}
; }; -export default DebugNavigationButtonsGenerator; +export default GenerateNavigationButtonsDebug; diff --git a/src/routes/RouteStructureGenerator.tsx b/src/routes/SwitchRoutesGenerator.tsx similarity index 64% rename from src/routes/RouteStructureGenerator.tsx rename to src/routes/SwitchRoutesGenerator.tsx index dfa8c5b..0225a66 100644 --- a/src/routes/RouteStructureGenerator.tsx +++ b/src/routes/SwitchRoutesGenerator.tsx @@ -1,34 +1,38 @@ +import React from "react"; +import { v4 } from "uuid"; import { Route, Switch } from "wouter"; -import { Routes } from "./routes"; -import * as R from "./routes"; import inDev from "../utils/inDebug"; +import * as R from "./routes"; +import { Routes } from "./routes"; const routesCrawler = ( parentPath?: string, routesPack: Routes[] = R.routesRoot, ): JSX.Element[] => { // Roll through routes and generate Route for each - return routesPack.map((route, index): JSX.Element => { + return routesPack.map((route): JSX.Element => { // Debug log shows generated routes inDev(() => console.log( - "routesCrawler", + "routesCrawler routes", parentPath ? parentPath + route.path : route.path, ), ); - return ( - <> - {/* Check does route have children and perform routing generation for children */} - - {route.children - ? routesCrawler(parentPath ?? "" + route.path, route.children) - : null} + return route.children ? ( + + {routesCrawler(parentPath ?? "" + route.path, route.children)} - + + ) : ( + ); }); }; @@ -38,7 +42,7 @@ const routesCrawler = ( */ const SwitchRoutesGenerator = () => { return ( - + {routesCrawler()} <>404} /> diff --git a/src/routes/routes.tsx b/src/routes/routes.tsx index 59e136b..530caa3 100644 --- a/src/routes/routes.tsx +++ b/src/routes/routes.tsx @@ -3,11 +3,11 @@ import { RiHome3Fill } from "react-icons/ri"; import { IoMdOptions } from "react-icons/io"; import { FaUsers } from "react-icons/fa"; // ----- IMPORT PAGES ----- -import AdministrationPage from "../features/AdministrationPage"; -import HomePage from "../features/HomePage"; +import AdministrationPage from "../pages/AdministrationPage"; +import HomePage from "../pages/HomePage"; // ----- IMPORT CONSTS ----- import { ADMINISTRATION, SETTINGS } from "../consts"; -import SettingsAdvancedPage from "../features/SettingsAdvancedPage"; +import SettingsAdvancedPage from "../pages/SettingsAdvancedPage"; // ----- TYPE DEFINITIONS ----- export type Routes = { diff --git a/vite.config.ts b/vite.config.js similarity index 82% rename from vite.config.ts rename to vite.config.js index a80ddcd..82d6bab 100644 --- a/vite.config.ts +++ b/vite.config.js @@ -6,5 +6,10 @@ export default ({ mode }) => { process.env = { ...process.env, ...loadEnv(mode, process.cwd()) }; return defineConfig({ plugins: [react()], + build: { + watch: { + clearScreen: true, + }, + }, }); };