clone/kvm
1
0
Fork 0
mirror of https://github.com/luckfox-eng29/kvm.git synced 2026-01-20 02:04:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore: Upgrade UI vite and tailwind packages (#443)

Browse Source 
* chore: Upgrade UI vite and tailwind packages

Vite 5.2.0 -> 6.3.5
@vitejs/plugin-basic-ssl 1.2.0 -> 2.0.0
cva: 1.0.0-beta.1 -> 1.0.0-beta.3
focus-trap-react 10.2.3 -> 11.0.3
framer-motion 11.15.0 -> 12.11.0
@tailwindcss/postcss 4.1.6
@tailwindcss/vite 4.1.6
tailwind 3.4.17 -> 4.1.6
tailwind-merge 2.5.5 -> 3.3.0

Minor updates:
@headlessui/react 2.2.2 -> 2.2.3
@types/react 19.1.3 -> 19.1.4
@types/react-dom 19.1.3 -> 19.1.5
@typescript-eslint/eslint-plugin 8.32.0 -> 8.32.1
@typescript-eslint/parser 8.32.0 -> 8.32.1
react-simple-keyboard 3.8.71 -> 3.8.72

The new version of vite required an Node 22.15 (since that's current LTS and node 21.x is EOL)

The changes to css due to the tailwind 3 to 4 upgrade were done following [the upgrade guide](https://tailwindcss.com/docs/upgrade-guide#changes-from-v3)

Done in this order (important):
`shadow-sm` -> `shadow-xs`
`shadow` -> `shadown-sm`
`rounded` -> `rounded-sm`
`outline-none` -> `outline-hidden`
`32rem_32rem_at_center` -> `center_at_32rem_32rem` (revised order of gradient props)
`ring-1 ring-black ring-opacity-5` -> `ring-1 ring-black/50`
`flex-shrink-0` -> `shrink-0`
`flex-grow-0` -> `grow-0`
`outline outline-1` -> `outline-1`

ALSO removed the **extra** `opacity-0` on the video element (trips up latest tailwind causing the video to be invisible)

FocusTrap is now not exported as the default, so change those imports

headlessui's Menu completely changed, so upgrade to the new syntax which necessitated a reorganization of the Header.tsx to enable the "menu" to still work

* Update eslint config and fix errors
This commit is contained in:
Marc Brooks
2025-05-15 07:21:03 -05:00
committed by GitHub
parent 340babac24
commit 7ccb8e617c
44 changed files with 2006 additions and 1381 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
ui/src/routes/devices.$id.mount.tsx
View File

@@ -320,7 +320,7 @@ function ModeSelectionView({
].map(({ label, description, value: mode, icon: Icon, tag, disabled }, index) => (
<div
key={label}
className={cx("animate-fadeIn opacity-0")}
className={cx("animate-fadeIn")}
style={{
animationDuration: "0.7s",
animationDelay: `${25 * (index * 5)}ms`,
@@ -328,7 +328,7 @@ function ModeSelectionView({
>
<Card
className={cx(
"w-full min-w-[250px] cursor-pointer bg-white shadow-sm transition-all duration-100 hover:shadow-md dark:bg-slate-800",
"w-full min-w-[250px] cursor-pointer bg-white shadow-xs transition-all duration-100 hover:shadow-md dark:bg-slate-800",
{
"ring-2 ring-blue-700": selectedMode === mode,
"hover:ring-2 hover:ring-blue-500": selectedMode !== mode && !disabled,
@@ -373,7 +373,7 @@ function ModeSelectionView({
))}
</div>
<div
className="flex animate-fadeIn justify-end opacity-0"
className="flex animate-fadeIn justify-end"
style={{
animationDuration: "0.7s",
animationDelay: "0.2s",
@@ -437,7 +437,7 @@ function BrowserFileView({
className="block cursor-pointer select-none"
>
<div
className="group animate-fadeIn opacity-0"
className="group animate-fadeIn"
style={{
animationDuration: "0.7s",
}}
@@ -483,7 +483,7 @@ function BrowserFileView({
</div>
<div
className="flex w-full animate-fadeIn items-end justify-between opacity-0"
className="flex w-full animate-fadeIn items-end justify-between"
style={{
animationDuration: "0.7s",
animationDelay: "0.1s",
@@ -578,7 +578,7 @@ function UrlView({
/>
<div
className="animate-fadeIn opacity-0"
className="animate-fadeIn"
style={{
animationDuration: "0.7s",
}}
@@ -593,7 +593,7 @@ function UrlView({
/>
</div>
<div
className="flex w-full animate-fadeIn items-end justify-between opacity-0"
className="flex w-full animate-fadeIn items-end justify-between"
style={{
animationDuration: "0.7s",
animationDelay: "0.1s",
@@ -619,7 +619,7 @@ function UrlView({
<hr className="border-slate-800/30 dark:border-slate-300/20" />
<div
className="animate-fadeIn opacity-0"
className="animate-fadeIn"
style={{
animationDuration: "0.7s",
animationDelay: "0.2s",
@@ -797,7 +797,7 @@ function DeviceFileView({
description="Select an image to mount from the JetKVM storage"
/>
<div
className="w-full animate-fadeIn opacity-0"
className="w-full animate-fadeIn"
style={{
animationDuration: "0.7s",
animationDelay: "0.1s",
@@ -886,7 +886,7 @@ function DeviceFileView({
{onStorageFiles.length > 0 ? (
<div
className="flex animate-fadeIn items-end justify-between opacity-0"
className="flex animate-fadeIn items-end justify-between"
style={{
animationDuration: "0.7s",
animationDelay: "0.15s",
@@ -914,7 +914,7 @@ function DeviceFileView({
</div>
) : (
<div
className="flex animate-fadeIn items-end justify-end opacity-0"
className="flex animate-fadeIn items-end justify-end"
style={{
animationDuration: "0.7s",
animationDelay: "0.15s",
@@ -927,7 +927,7 @@ function DeviceFileView({
)}
<hr className="border-slate-800/20 dark:border-slate-300/20" />
<div
className="animate-fadeIn space-y-2 opacity-0"
className="animate-fadeIn space-y-2"
style={{
animationDuration: "0.7s",
animationDelay: "0.20s",
@@ -941,9 +941,9 @@ function DeviceFileView({
{percentageUsed}% used
</span>
</div>
<div className="h-3.5 w-full overflow-hidden rounded-sm bg-slate-200 dark:bg-slate-700">
<div className="h-3.5 w-full overflow-hidden rounded-xs bg-slate-200 dark:bg-slate-700">
<div
className="h-full rounded-sm bg-blue-700 transition-all duration-300 ease-in-out dark:bg-blue-500"
className="h-full rounded-xs bg-blue-700 transition-all duration-300 ease-in-out dark:bg-blue-500"
style={{ width: `${percentageUsed}%` }}
></div>
</div>
@@ -959,7 +959,7 @@ function DeviceFileView({
{onStorageFiles.length > 0 && (
<div
className="w-full animate-fadeIn opacity-0"
className="w-full animate-fadeIn"
style={{
animationDuration: "0.7s",
animationDelay: "0.25s",
@@ -1251,7 +1251,7 @@ function UploadFileView({
}
/>
<div
className="animate-fadeIn space-y-2 opacity-0"
className="animate-fadeIn space-y-2"
style={{
animationDuration: "0.7s",
}}
@@ -1365,7 +1365,7 @@ function UploadFileView({
{/* Display upload error if present */}
{uploadError && (
<div
className="mt-2 animate-fadeIn truncate text-sm text-red-600 opacity-0 dark:text-red-400"
className="mt-2 animate-fadeIn truncate text-sm text-red-600 dark:text-red-400"
style={{ animationDuration: "0.7s" }}
>
Error: {uploadError}
@@ -1373,7 +1373,7 @@ function UploadFileView({
)}
<div
className="flex w-full animate-fadeIn items-end opacity-0"
className="flex w-full animate-fadeIn items-end"
style={{
animationDuration: "0.7s",
animationDelay: "0.1s",
@@ -1496,7 +1496,7 @@ function PreUploadedImageItem({
</div>
<div className="relative flex select-none items-center gap-x-3">
<div
className={cx("opacity-0 transition-opacity duration-200", {
className={cx("opacity-0 transition-opacity duration-200", {
"w-auto opacity-100": isHovering,
})}
>