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

Transfer DaisyUI to Tailwind Elements

Browse Source
This commit is contained in:
Igor Barcik 2023-11-09 12:33:28 +01:00
parent d8527377c8
commit e6e7eb868f
Signed by: biggy
GPG Key ID: EA4CE0D1E2A6DC98
14 changed files with 36 additions and 2726 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
bun.lockb
View File

Binary file not shown.

31
daisyui.config.js
View File

@ -1,31 +0,0 @@
export const themes = [
"light",
"dark",
"cupcake",
"bumblebee",
"emerald",
"corporate",
"synthwave",
"retro",
"cyberpunk",
"valentine",
"halloween",
"garden",
"forest",
"aqua",
"lofi",
"pastel",
"fantasy",
"wireframe",
"black",
"luxury",
"dracula",
"cmyk",
"autumn",
"business",
"acid",
"lemonade",
"night",
"coffee",
"winter",
];

1
index.html
View File

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

5
package.json
View File

@ -11,13 +11,15 @@
},
"dependencies": {
"@hookform/resolvers": "^3.3.2",
"@radix-ui/react-icons": "^1.3.0",
"@tanstack/react-table": "^8.10.7",
"@types/react-router-dom": "^5.3.3",
"axios": "^1.6.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.47.0",
"react-router-dom": "^6.17.0",
"recharts": "^2.9.2",
"tw-elements": "^1.0.0",
"uuid": "^9.0.1",
"zod": "^3.22.4"
},
@ -31,7 +33,6 @@
"@typescript-eslint/parser": "^6.9.0",
"@vitejs/plugin-react": "^4.1.0",
"autoprefixer": "^10.4.16",
"daisyui": "^3.9.3",
"eslint": "^8.52.0",
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-prettier": "^5.0.1",

2656
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

0
lupa2Logo.webp → public/lupa2-logo.webp
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 45 KiB

After

Width:  |  Height:  |  Size: 45 KiB

2
src/configure.tsx
View File

@ -3,7 +3,7 @@ import { Suspense, lazy } from "react";
import { RouteObject } from "react-router-dom";
import Loader from "./components/Loader";
import AboutPage from "./features/About/AboutPage";
import App from "./features/App/App";
import App from "./features/App";
import LoginPage from "./features/Login/LoginPage";
import { flatternRoutingTable } from "./utils/RoutingTableUtils";
import Debugger from "./features/Debugger";

22
src/features/App/App.tsx → src/features/App.tsx
View File

@ -1,11 +1,10 @@
import { HamburgerMenuIcon, SunIcon } from "@radix-ui/react-icons";
import { useEffect, useState } from "react";
import { Outlet } from "react-router-dom";
import { themes } from "../../../daisyui.config.js";
import { main, navigation } from "../../configure.tsx";
import NavigationTree from "../../components/NavigationTree.tsx";
import Breadcrumbs from "../../components/Breadcrumbs.tsx";
import ConfirmationDialog from "../../components/ConfirmationDialog/ConfirmationDialog.tsx";
import { main, navigation } from "../configure.tsx";
import NavigationTree from "../components/NavigationTree.tsx";
import Breadcrumbs from "../components/Breadcrumbs.tsx";
import ConfirmationDialog from "../components/ConfirmationDialog/ConfirmationDialog.tsx";
/** Here is located global wrapper for entire application, here you canfind:
* - Drawer - contains navigation buttons
@ -27,11 +26,6 @@ function App() {
const handleDrawerStatus = () => {
setOpenDrawer(!openDrawer);
};
// Function on click theme on themes list
const handleThemeChange = (theme: string) => {
setTheme(theme);
console.log("Theme changed to " + theme, "info", 10);
};
return (
<div>
@ -72,13 +66,7 @@ function App() {
tabIndex={0}
className="menu dropdown-content z-[12] p-2 shadow bg-base-100 rounded-box w-fit mt-4 max-h-24 sm:max-h-96 flex flex-col items-center flex-nowrap overflow-y-auto"
>
{themes.map((theme) => (
<li key={theme}>
<a className="prose" onClick={() => handleThemeChange(theme)}>
{theme}
</a>
</li>
))}
THEMEs HERE
</ul>
</div>
<button className="btn m-1">Log out</button>

3
src/main.css
View File

@ -1,3 +0,0 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

3
src/main.tsx
View File

@ -5,7 +5,8 @@ import { setupAxiosInterceptors } from "./api/AxiosService";
import "./main.css";
import router from "./routes";
import ConfirmationDialogProvider from "./components/ConfirmationDialog/ConfirmationDialogProvider";
import { initTE } from "tw-elements";
initTE({}, true);
setupAxiosInterceptors();
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(

15
style.css Normal file
View File

@ -0,0 +1,15 @@
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap");
@tailwind base;
@layer base {
html {
@apply text-neutral-800;
}
html.dark {
@apply text-neutral-50;
@apply bg-neutral-800;
}
}
@tailwind components;
@tailwind utilities;

14
tailwind.config.js
View File

@ -1,11 +1,15 @@
/** @type {import('tailwindcss').Config} */
import { themes } from "./daisyui.config.js";
export default {
content: ["./src/**/*.{js,ts,jsx,tsx}"],
content: [
"./src/**/*.{js,ts,jsx,tsx}",
"./index.html",
"./node_modules/tw-elements/dist/js/**/*.js",
],
// safelist is used to allow classes to not be purged by tailwind
safelist: ["alert-info", "alert-success", "alert-warning", "alert-error"],
daisyui: {
themes: themes,
theme: {
extend: {},
},
plugins: [require("daisyui"), require("@tailwindcss/typography")],
plugins: [require("tw-elements/dist/plugin.cjs")],
darkMode: "class",
};

5
tsconfig.json
View File

@ -41,9 +41,4 @@
"exclude": [
"node_modules"
],
// "references": [
// {
// "path": "./tsconfig.node.json"
// }
// ]
}

5
vite.config.ts
View File

@ -6,10 +6,5 @@ export default ({ mode }) => {
process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };
return defineConfig({
plugins: [react()],
// resolve: {
// alias: {
// "tailwind.config.js": path.resolve(__dirname, "tailwind.config.js"),
// },
// },
});
};