biggy/template-react-app
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

During navigation development. Trying to work out comfy workflow with navigation elements

Browse Source
This commit is contained in:
Igor Barcik 2023-12-04 14:56:53 +01:00
parent 8ea78084c9
commit 98dc854936
Signed by: biggy
GPG Key ID: EA4CE0D1E2A6DC98
15 changed files with 162 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -1,6 +1,6 @@
# TailwindElements-React-Starter # TailwindElements-React-Starter
- __nothing__ - main styling - [DaisyUI](https://daisyui.com/) - main styling
- [react-icons](https://react-icons.github.io/react-icons/) - big icon library - [react-icons](https://react-icons.github.io/react-icons/) - big icon library
- [recharts](https://echarts.apache.org/) - charts library - [recharts](https://echarts.apache.org/) - charts library
- [wouter](https://github.com/molefrog/wouter) - router library - [wouter](https://github.com/molefrog/wouter) - router library

BIN
bun.lockb
View File

Binary file not shown.

1
index.html
View File

@ -4,7 +4,6 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="/icon.png" /> <link rel="icon" href="/icon.png" />
<link rel="stylesheet" href="style.css" />
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

3
package.json
View File

@ -15,13 +15,14 @@
"@hookform/resolvers": "^3.3.2", "@hookform/resolvers": "^3.3.2",
"@tailwindcss/forms": "^0.5.7", "@tailwindcss/forms": "^0.5.7",
"@tanstack/react-table": "^8.10.7", "@tanstack/react-table": "^8.10.7",
"appwrite": "^13.0.0",
"axios": "^1.6.1", "axios": "^1.6.1",
"daisyui": "latest", "daisyui": "latest",
"echarts": "^5.4.3", "echarts": "^5.4.3",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-hook-form": "^7.48.2", "react-hook-form": "^7.48.2",
"react-icons": "^4.12.0",
"recharts": "^2.10.1",
"uuid": "^9.0.1", "uuid": "^9.0.1",
"wouter": "^2.12.1", "wouter": "^2.12.1",
"zod": "^3.22.4" "zod": "^3.22.4"

1
src/configure.tsx
View File

@ -6,6 +6,7 @@ export const main = {
viteEnv.MODE ? " [development]" : "" viteEnv.MODE ? " [development]" : ""
}`, }`,
program_version: "1.0.0", program_version: "1.0.0",
basePath: viteEnv.VITE_BASE_PATH,
}; };
//About page configuration //About page configuration
export const about = { export const about = {

1
src/consts.ts Normal file
View File

@ -0,0 +1 @@
export const ADMINISTRATION = "administration";

5
src/features/AdministrationPage.tsx Normal file
View File

@ -0,0 +1,5 @@
const AdministrationPage = () => {
return <div>🚀AdministrationPage🚀</div>;
};
export default AdministrationPage;

14
src/features/App.tsx
View File

@ -1,19 +1,31 @@
import ThemeButton from "../components/ThemeButton"; import ThemeButton from "../components/ThemeButton";
import { main } from "../configure"; import { main } from "../configure";
import { Router } from "wouter";
import SwitchRoutesGenerator from "../routes/RouteStructureGenerator";
import DebugNavigationButtonsGenerator from "../routes/DebugNavigationButtonsGenerator";
function App() { function App() {
return ( return (
<div className="space-x-4 space-y-6 m-4"> <Router base={main.basePath}>
<div className="space-x-4 space-y-6">
<div className="px-5 mt-6"> <div className="px-5 mt-6">
<h1 className="text-center "> <h1 className="text-center ">
{main.program_name} v{main.program_version} {main.program_name} v{main.program_version}
<p>Base path is: {main.basePath}</p>
</h1> </h1>
<div> <div>
<ThemeButton /> <ThemeButton />
</div> </div>
</div> </div>
<hr className="my-12 h-[2px] border-t-0 bg-transparent bg-gradient-to-r from-transparent via-current to-transparent opacity-25 dark:opacity-100" /> <hr className="my-12 h-[2px] border-t-0 bg-transparent bg-gradient-to-r from-transparent via-current to-transparent opacity-25 dark:opacity-100" />
<div>
<DebugNavigationButtonsGenerator />
{/* Paths in Route should be without base path (even without '/'). If want Route for base path than pass base path */}
<SwitchRoutesGenerator />
</div> </div>
</div>
</Router>
); );
} }

16
src/features/HomePage.tsx Normal file
View File

@ -0,0 +1,16 @@
import { useState } from "react";
const HomePage = () => {
const [counter, setCounter] = useState<number>(0);
return (
<div>
<p>HomePage</p>
<button className="btn btn-sm" onClick={() => setCounter(counter + 1)}>
Click me
</button>
<div>Counter: {counter}</div>
</div>
);
};
export default HomePage;

5
src/features/InboxPage.tsx Normal file
View File

@ -0,0 +1,5 @@
const InboxPage = () => {
return <div>InboxPage</div>;
};
export default InboxPage;

1
src/main.tsx
View File

@ -5,6 +5,7 @@ import { viteEnv } from "./configure";
import App from "./features/App"; import App from "./features/App";
import inDev from "./utils/inDebug"; import inDev from "./utils/inDebug";
import { Global, css } from "@emotion/react"; import { Global, css } from "@emotion/react";
import "/style.css";
setupAxiosInterceptors(); setupAxiosInterceptors();
inDev(() => console.log(viteEnv)); inDev(() => console.log(viteEnv));

0
src/routes.tsx
View File

26
src/routes/DebugNavigationButtonsGenerator.tsx Normal file
View File

@ -0,0 +1,26 @@
import React from "react";
import * as R from "../routes/routes";
import { Link } from "wouter";
/**
* This component is used to generate buttons for debug navigation
* UNFINISHED
*/
const DebugNavigationButtonsGenerator = () => {
return (
<div className="flex join mb-4">
<Link className={`btn join-item hover:btn-primary duration-75 `} href="">
Home
</Link>
<Link
className={`btn join-item hover:btn-primary duration-75 `}
href={R.routesRoot[1].path}
>
{R.routesRoot[1].icon &&
React.createElement(R.routesRoot[1].icon, { className: "h-6 w-6" })}
{R.routesRoot[1].name}
</Link>
</div>
);
};
export default DebugNavigationButtonsGenerator;

19
src/routes/RouteStructureGenerator.tsx Normal file
View File

@ -0,0 +1,19 @@
import { Route, Switch } from "wouter";
import * as R from "./routes";
const SwitchRoutesGenerator = () => {
const routesCrawler = (parentPath?: string): JSX.Element[] => {
return R.routesRoot.map((route, index) => {
return (
<Route
key={index}
path={parentPath ? parentPath + route.path : route.path}
component={route.component}
/>
);
});
};
return <Switch>{routesCrawler()}</Switch>;
};
export default SwitchRoutesGenerator;

65
src/routes/routes.tsx Normal file
View File

@ -0,0 +1,65 @@
// ----- IMPORT ICONS -----
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 CONSTS -----
import { ADMINISTRATION } from "../consts";
// ----- TYPE DEFINITIONS -----
type Route = {
name: string;
path: string;
component: () => JSX.Element;
icon?: () => JSX.Element;
children?: Route[];
};
type RoutesObject = {
[key: string]: Route[];
};
// ----- ROUTES DEFINITIONS -----
//! Don't leave trailor '/' in paths
//! Paths in Route should be without base path (even without '/'). If want Route for base path than pass base path
//* Wouter is basically join paths with each other, so if base path is "/" every sub path souldn't have "/" at the beginning
// const routesSecondLevel = {};
const routesFirstLevel: RoutesObject = {
[ADMINISTRATION]: [
{
name: "Users",
path: "/users",
component: () => <>UserPage</>,
icon: FaUsers,
},
{
name: "Roles",
path: "/roles",
component: () => <>Roles</>,
},
{
name: "Permissions",
path: "/permissions",
component: () => <>Permissions</>,
},
],
};
export const routesRoot: Route[] = [
{
name: "Home",
path: "/",
component: HomePage,
icon: RiHome3Fill,
},
{
name: ADMINISTRATION,
path: "administration",
component: AdministrationPage,
icon: IoMdOptions,
children: routesFirstLevel[ADMINISTRATION],
},
];