clone/kvm
1
0
Fork 0
mirror of https://github.com/luckfox-eng29/kvm.git synced 2026-06-03 03:42:58 +02: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

4
ui/src/components/popovers/ExtensionPopover.tsx
View File

@@ -92,7 +92,7 @@ export default function ExtensionPopover() {
{renderActiveExtension()}
<div
className="flex animate-fadeIn items-center justify-end space-x-2 opacity-0"
className="flex animate-fadeIn items-center justify-end space-x-2"
style={{
animationDuration: "0.7s",
animationDelay: "0.2s",
@@ -113,7 +113,7 @@ export default function ExtensionPopover() {
title="Extensions"
description="Load and manage your extensions"
/>
<Card className="animate-fadeIn opacity-0">
<Card className="animate-fadeIn">
<div className="w-full divide-y divide-slate-700/30 dark:divide-slate-600/30">
{AVAILABLE_EXTENSIONS.map(extension => (
<div

4
ui/src/components/popovers/MountPopover.tsx
View File

@@ -214,7 +214,7 @@ const MountPopopover = forwardRef<HTMLDivElement, object>((_props, ref) => {
) : null}
<div
className="animate-fadeIn space-y-2 opacity-0"
className="animate-fadeIn space-y-2"
style={{
animationDuration: "0.7s",
animationDelay: "0.1s",
@@ -289,7 +289,7 @@ const MountPopopover = forwardRef<HTMLDivElement, object>((_props, ref) => {
{!remoteVirtualMediaState && (
<div
className="flex animate-fadeIn items-center justify-end space-x-2 opacity-0"
className="flex animate-fadeIn items-center justify-end space-x-2"
style={{
animationDuration: "0.7s",
animationDelay: "0.2s",

4
ui/src/components/popovers/PasteModal.tsx
View File

@@ -83,7 +83,7 @@ export default function PasteModal() {
/>
<div
className="animate-fadeIn space-y-2 opacity-0"
className="animate-fadeIn space-y-2"
style={{
animationDuration: "0.7s",
animationDelay: "0.1s",
@@ -137,7 +137,7 @@ export default function PasteModal() {
</div>
</div>
<div
className="flex animate-fadeIn items-center justify-end gap-x-2 opacity-0"
className="flex animate-fadeIn items-center justify-end gap-x-2"
style={{
animationDuration: "0.7s",
animationDelay: "0.2s",

4
ui/src/components/popovers/WakeOnLan/AddDeviceForm.tsx
View File

@@ -26,7 +26,7 @@ export default function AddDeviceForm({
return (
<div className="space-y-4">
<div
className="animate-fadeIn space-y-4 opacity-0"
className="animate-fadeIn space-y-4"
style={{
animationDuration: "0.5s",
animationFillMode: "forwards",
@@ -73,7 +73,7 @@ export default function AddDeviceForm({
/>
</div>
<div
className="flex animate-fadeIn items-center justify-end space-x-2 opacity-0"
className="flex animate-fadeIn items-center justify-end space-x-2"
style={{
animationDuration: "0.7s",
animationDelay: "0.2s",

4
ui/src/components/popovers/WakeOnLan/DeviceList.tsx
View File

@@ -28,7 +28,7 @@ export default function DeviceList({
}: DeviceListProps) {
return (
<div className="space-y-4">
<Card className="animate-fadeIn opacity-0">
<Card className="animate-fadeIn">
<div className="w-full divide-y divide-slate-700/30 dark:divide-slate-600/30">
{storedDevices.map((device, index) => (
<div key={index} className="flex items-center justify-between gap-x-2 p-3">
@@ -63,7 +63,7 @@ export default function DeviceList({
</div>
</Card>
<div
className="flex animate-fadeIn items-center justify-end space-x-2 opacity-0"
className="flex animate-fadeIn items-center justify-end space-x-2"
style={{
animationDuration: "0.7s",
animationDelay: "0.2s",

4
ui/src/components/popovers/WakeOnLan/EmptyStateCard.tsx
View File

@@ -13,7 +13,7 @@ export default function EmptyStateCard({
}) {
return (
<div className="select-none space-y-4">
<Card className="animate-fadeIn opacity-0">
<Card className="animate-fadeIn">
<div className="flex items-center justify-center py-8 text-center">
<div className="space-y-3">
<div className="space-y-1">
@@ -35,7 +35,7 @@ export default function EmptyStateCard({
</div>
</Card>
<div
className="flex animate-fadeIn items-center justify-end space-x-2 opacity-0"
className="flex animate-fadeIn items-center justify-end space-x-2"
style={{
animationDuration: "0.7s",
animationDelay: "0.2s",