Remove npm legacy errors, created single source of truth for ESlint. updated analytics url. updated script background (#5498)

* Update ScriptAccordion and ScriptItem components for improved styling

* Add README.md for Proxmox VE Helper-Scripts Frontend

* Remove testing dependencies and related test files from the frontend project

* Update analytics URL in siteConfig to point to community-scripts.org

* Refactor ESLint configuration to have one source of truth and run "npm lint" to apply new changes

* Update lint script in package.json to remove npm

* Add 'next' option to ESLint configuration for improved compatibility

* Update package dependencies and versions in package.json and package-lock.json

* Refactor theme provider import and enhance calendar component for dynamic icon rendering

* rename sidebar, alerts and buttons

* rename description and interfaces files

* rename more files

* change folder name

* Refactor tooltip logic to improve updateable condition handling

* Enhance CommandMenu to prevent duplicate scripts across categories

* Remove test step from frontend CI/CD workflow

frontend/src/app/json-editor/_components/Note.tsx

@@ -1,150 +0,0 @@
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import {
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from "@/components/ui/select";
-import { AlertColors } from "@/config/siteConfig";
-import { cn } from "@/lib/utils";
-import { PlusCircle, Trash2 } from "lucide-react";
-import { z } from "zod";
-import { ScriptSchema, type Script } from "../_schemas/schemas";
-import { memo, useCallback, useRef } from "react";
-
-type NoteProps = {
-    script: Script;
-    setScript: (script: Script) => void;
-    setIsValid: (isValid: boolean) => void;
-    setZodErrors: (zodErrors: z.ZodError | null) => void;
-};
-
-function Note({
-    script,
-    setScript,
-    setIsValid,
-    setZodErrors,
-}: NoteProps) {
-    const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
-
-    const addNote = useCallback(() => {
-        setScript({
-            ...script,
-            notes: [...script.notes, { text: "", type: "" }],
-        });
-    }, [script, setScript]);
-
-    const updateNote = useCallback((
-        index: number,
-        key: keyof Script["notes"][number],
-        value: string,
-    ) => {
-        const updated: Script = {
-            ...script,
-            notes: script.notes.map((note, i) =>
-                i === index ? { ...note, [key]: value } : note,
-            ),
-        };
-        const result = ScriptSchema.safeParse(updated);
-        setIsValid(result.success);
-        setZodErrors(result.success ? null : result.error);
-        setScript(updated);
-        // Restore focus after state update
-        if (key === "text") {
-            setTimeout(() => {
-                inputRefs.current[index]?.focus();
-            }, 0);
-        }
-    }, [script, setScript, setIsValid, setZodErrors]);
-
-    const removeNote = useCallback((index: number) => {
-        setScript({
-            ...script,
-            notes: script.notes.filter((_, i) => i !== index),
-        });
-    }, [script, setScript]);
-
-    return (
-        <>
-            <h3 className="text-xl font-semibold">Notes</h3>
-            {script.notes.map((note, index) => (
-                <NoteItem key={index} note={note} index={index} updateNote={updateNote} removeNote={removeNote} />
-            ))}
-            <Button type="button" size="sm" onClick={addNote}>
-                <PlusCircle className="mr-2 h-4 w-4" /> Add Note
-            </Button>
-        </>
-    );
-}
-
-const NoteItem = memo(
-    ({
-        note,
-        index,
-        updateNote,
-        removeNote,
-    }: {
-        note: Script["notes"][number];
-        index: number;
-        updateNote: (index: number, key: keyof Script["notes"][number], value: string) => void;
-        removeNote: (index: number) => void;
-    }) => {
-        const inputRef = useRef<HTMLInputElement | null>(null);
-
-        const handleTextChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-            updateNote(index, "text", e.target.value);
-            setTimeout(() => {
-                inputRef.current?.focus();
-            }, 0);
-        }, [index, updateNote]);
-
-        return (
-            <div className="space-y-2 border p-4 rounded">
-                <Input
-                    placeholder="Note Text"
-                    value={note.text}
-                    onChange={handleTextChange}
-                    ref={inputRef}
-                />
-                <Select
-                    value={note.type}
-                    onValueChange={(value) => updateNote(index, "type", value)}
-                >
-                    <SelectTrigger className="flex-1">
-                        <SelectValue placeholder="Type" />
-                    </SelectTrigger>
-                    <SelectContent>
-                        {Object.keys(AlertColors).map((type) => (
-                            <SelectItem key={type} value={type}>
-                                <span className="flex items-center gap-2">
-                                    {type.charAt(0).toUpperCase() + type.slice(1)}{" "}
-                                    <div
-                                        className={cn(
-                                            "size-4 rounded-full border",
-                                            AlertColors[type as keyof typeof AlertColors],
-                                        )}
-                                    />
-                                </span>
-                            </SelectItem>
-                        ))}
-                    </SelectContent>
-                </Select>
-                <Button
-                    size="sm"
-                    variant="destructive"
-                    type="button"
-                    onClick={() => removeNote(index)}
-                >
-                    <Trash2 className="mr-2 h-4 w-4" /> Remove Note
-                </Button>
-            </div>
-        );
-    }
-);
-
-NoteItem.displayName = 'NoteItem';
-
-
-export default memo(Note);

frontend/src/app/json-editor/_components/categories.tsx

@@ -1,4 +1,9 @@
-import { Label } from "@/components/ui/label";
+import type { z } from "zod";
+
+import { memo } from "react";
+
+import type { Category } from "@/lib/types";
+
 import {
   Select,
   SelectContent,
@@ -6,11 +11,10 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Category } from "@/lib/types";
+import { Label } from "@/components/ui/label";
 import { cn } from "@/lib/utils";
-import { z } from "zod";
-import { type Script } from "../_schemas/schemas";
-import { memo } from "react";
+
+import type { Script } from "../_schemas/schemas";
 
 type CategoryProps = {
   script: Script;
@@ -20,10 +24,10 @@ type CategoryProps = {
   categories: Category[];
 };
 
-const CategoryTag = memo(({ 
-  category, 
-  onRemove 
-}: { 
+const CategoryTag = memo(({
+  category,
+  onRemove,
+}: {
   category: Category;
   onRemove: () => void;
 }) => (
@@ -53,7 +57,7 @@ const CategoryTag = memo(({
   </span>
 ));
 
-CategoryTag.displayName = 'CategoryTag';
+CategoryTag.displayName = "CategoryTag";
 
 function Categories({
   script,
@@ -79,14 +83,16 @@ function Categories({
   return (
     <div>
       <Label>
-        Category <span className="text-red-500">*</span>
+        Category
+        {" "}
+        <span className="text-red-500">*</span>
       </Label>
-      <Select onValueChange={(value) => addCategory(Number(value))}>
+      <Select onValueChange={value => addCategory(Number(value))}>
         <SelectTrigger>
           <SelectValue placeholder="Select a category" />
         </SelectTrigger>
         <SelectContent>
-          {categories.map((category) => (
+          {categories.map(category => (
             <SelectItem key={category.id} value={category.id.toString()}>
               {category.name}
             </SelectItem>
@@ -101,13 +107,15 @@ function Categories({
       >
         {script.categories.map((categoryId) => {
           const category = categoryMap.get(categoryId);
-          return category ? (
-            <CategoryTag
-              key={categoryId}
-              category={category}
-              onRemove={() => removeCategory(categoryId)}
-            />
-          ) : null;
+          return category
+            ? (
+                <CategoryTag
+                  key={categoryId}
+                  category={category}
+                  onRemove={() => removeCategory(categoryId)}
+                />
+              )
+            : null;
         })}
       </div>
     </div>

frontend/src/app/json-editor/_components/install-method.tsx

@@ -1,11 +1,16 @@
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { OperatingSystems } from "@/config/siteConfig";
+import type { z } from "zod";
+
 import { PlusCircle, Trash2 } from "lucide-react";
 import { memo, useCallback, useRef } from "react";
-import { z } from "zod";
-import { InstallMethodSchema, ScriptSchema, type Script } from "../_schemas/schemas";
+
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { OperatingSystems } from "@/config/site-config";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+
+import type { Script } from "../_schemas/schemas";
+
+import { InstallMethodSchema, ScriptSchema } from "../_schemas/schemas";
 
 type InstallMethodProps = {
   script: Script;
@@ -28,9 +33,11 @@ function InstallMethod({ script, setScript, setIsValid, setZodErrors }: InstallM
 
       if (type === "pve") {
         scriptPath = `tools/pve/${slug}.sh`;
-      } else if (type === "addon") {
+      }
+      else if (type === "addon") {
         scriptPath = `tools/addon/${slug}.sh`;
-      } else {
+      }
+      else {
         scriptPath = `${type}/${slug}.sh`;
       }
 
@@ -65,8 +72,8 @@ function InstallMethod({ script, setScript, setIsValid, setZodErrors }: InstallM
             const updatedMethod = { ...method, [key]: value };
 
             if (key === "type") {
-              updatedMethod.script =
-                value === "alpine" ? `${prev.type}/alpine-${prev.slug}.sh` : `${prev.type}/${prev.slug}.sh`;
+              updatedMethod.script
+                = value === "alpine" ? `${prev.type}/alpine-${prev.slug}.sh` : `${prev.type}/${prev.slug}.sh`;
 
               // Set OS to Alpine and reset version if type is alpine
               if (value === "alpine") {
@@ -89,7 +96,8 @@ function InstallMethod({ script, setScript, setIsValid, setZodErrors }: InstallM
         setIsValid(result.success);
         if (!result.success) {
           setZodErrors(result.error);
-        } else {
+        }
+        else {
           setZodErrors(null);
         }
         return updated;
@@ -100,7 +108,7 @@ function InstallMethod({ script, setScript, setIsValid, setZodErrors }: InstallM
 
   const removeInstallMethod = useCallback(
     (index: number) => {
-      setScript((prev) => ({
+      setScript(prev => ({
         ...prev,
         install_methods: prev.install_methods.filter((_, i) => i !== index),
       }));
@@ -113,7 +121,7 @@ function InstallMethod({ script, setScript, setIsValid, setZodErrors }: InstallM
       <h3 className="text-xl font-semibold">Install Methods</h3>
       {script.install_methods.map((method, index) => (
         <div key={index} className="space-y-2 border p-4 rounded">
-          <Select value={method.type} onValueChange={(value) => updateInstallMethod(index, "type", value)}>
+          <Select value={method.type} onValueChange={value => updateInstallMethod(index, "type", value)}>
             <SelectTrigger>
               <SelectValue placeholder="Type" />
             </SelectTrigger>
@@ -130,12 +138,11 @@ function InstallMethod({ script, setScript, setIsValid, setZodErrors }: InstallM
               placeholder="CPU in Cores"
               type="number"
               value={method.resources.cpu || ""}
-              onChange={(e) =>
+              onChange={e =>
                 updateInstallMethod(index, "resources", {
                   ...method.resources,
                   cpu: e.target.value ? Number(e.target.value) : null,
-                })
-              }
+                })}
             />
             <Input
               ref={(el) => {
@@ -144,12 +151,11 @@ function InstallMethod({ script, setScript, setIsValid, setZodErrors }: InstallM
               placeholder="RAM in MB"
               type="number"
               value={method.resources.ram || ""}
-              onChange={(e) =>
+              onChange={e =>
                 updateInstallMethod(index, "resources", {
                   ...method.resources,
                   ram: e.target.value ? Number(e.target.value) : null,
-                })
-              }
+                })}
             />
             <Input
               ref={(el) => {
@@ -158,31 +164,29 @@ function InstallMethod({ script, setScript, setIsValid, setZodErrors }: InstallM
               placeholder="HDD in GB"
               type="number"
               value={method.resources.hdd || ""}
-              onChange={(e) =>
+              onChange={e =>
                 updateInstallMethod(index, "resources", {
                   ...method.resources,
                   hdd: e.target.value ? Number(e.target.value) : null,
-                })
-              }
+                })}
             />
           </div>
           <div className="flex gap-2">
             <Select
               value={method.resources.os || undefined}
-              onValueChange={(value) =>
+              onValueChange={value =>
                 updateInstallMethod(index, "resources", {
                   ...method.resources,
                   os: value || null,
                   version: null, // Reset version when OS changes
-                })
-              }
+                })}
               disabled={method.type === "alpine"}
             >
               <SelectTrigger>
                 <SelectValue placeholder="OS" />
               </SelectTrigger>
               <SelectContent>
-                {OperatingSystems.map((os) => (
+                {OperatingSystems.map(os => (
                   <SelectItem key={os.name} value={os.name}>
                     {os.name}
                   </SelectItem>
@@ -191,19 +195,18 @@ function InstallMethod({ script, setScript, setIsValid, setZodErrors }: InstallM
             </Select>
             <Select
               value={method.resources.version || undefined}
-              onValueChange={(value) =>
+              onValueChange={value =>
                 updateInstallMethod(index, "resources", {
                   ...method.resources,
                   version: value || null,
-                })
-              }
+                })}
               disabled={method.type === "alpine"}
             >
               <SelectTrigger>
                 <SelectValue placeholder="Version" />
               </SelectTrigger>
               <SelectContent>
-                {OperatingSystems.find((os) => os.name === method.resources.os)?.versions.map((version) => (
+                {OperatingSystems.find(os => os.name === method.resources.os)?.versions.map(version => (
                   <SelectItem key={version.slug} value={version.name}>
                     {version.name}
                   </SelectItem>
@@ -212,12 +215,16 @@ function InstallMethod({ script, setScript, setIsValid, setZodErrors }: InstallM
             </Select>
           </div>
           <Button variant="destructive" size="sm" type="button" onClick={() => removeInstallMethod(index)}>
-            <Trash2 className="mr-2 h-4 w-4" /> Remove Install Method
+            <Trash2 className="mr-2 h-4 w-4" />
+            {" "}
+            Remove Install Method
           </Button>
         </div>
       ))}
       <Button type="button" size="sm" disabled={script.install_methods.length >= 2} onClick={addInstallMethod}>
-        <PlusCircle className="mr-2 h-4 w-4" /> Add Install Method
+        <PlusCircle className="mr-2 h-4 w-4" />
+        {" "}
+        Add Install Method
       </Button>
     </>
   );

frontend/src/app/json-editor/_components/note.tsx

@@ -0,0 +1,159 @@
+import type { z } from "zod";
+
+import { PlusCircle, Trash2 } from "lucide-react";
+import { memo, useCallback, useRef } from "react";
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { AlertColors } from "@/config/site-config";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
+import type { Script } from "../_schemas/schemas";
+
+import { ScriptSchema } from "../_schemas/schemas";
+
+const NoteItem = memo(
+  ({
+    note,
+    index,
+    updateNote,
+    removeNote,
+  }: {
+    note: Script["notes"][number];
+    index: number;
+    updateNote: (index: number, key: keyof Script["notes"][number], value: string) => void;
+    removeNote: (index: number) => void;
+  }) => {
+    const inputRef = useRef<HTMLInputElement | null>(null);
+
+    const handleTextChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+      updateNote(index, "text", e.target.value);
+      setTimeout(() => {
+        inputRef.current?.focus();
+      }, 0);
+    }, [index, updateNote]);
+
+    return (
+      <div className="space-y-2 border p-4 rounded">
+        <Input
+          placeholder="Note Text"
+          value={note.text}
+          onChange={handleTextChange}
+          ref={inputRef}
+        />
+        <Select
+          value={note.type}
+          onValueChange={value => updateNote(index, "type", value)}
+        >
+          <SelectTrigger className="flex-1">
+            <SelectValue placeholder="Type" />
+          </SelectTrigger>
+          <SelectContent>
+            {Object.keys(AlertColors).map(type => (
+              <SelectItem key={type} value={type}>
+                <span className="flex items-center gap-2">
+                  {type.charAt(0).toUpperCase() + type.slice(1)}
+                  {" "}
+                  <div
+                    className={cn(
+                      "size-4 rounded-full border",
+                      AlertColors[type as keyof typeof AlertColors],
+                    )}
+                  />
+                </span>
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <Button
+          size="sm"
+          variant="destructive"
+          type="button"
+          onClick={() => removeNote(index)}
+        >
+          <Trash2 className="mr-2 h-4 w-4" />
+          {" "}
+          Remove Note
+        </Button>
+      </div>
+    );
+  },
+);
+
+type NoteProps = {
+  script: Script;
+  setScript: (script: Script) => void;
+  setIsValid: (isValid: boolean) => void;
+  setZodErrors: (zodErrors: z.ZodError | null) => void;
+};
+
+function Note({
+  script,
+  setScript,
+  setIsValid,
+  setZodErrors,
+}: NoteProps) {
+  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
+
+  const addNote = useCallback(() => {
+    setScript({
+      ...script,
+      notes: [...script.notes, { text: "", type: "" }],
+    });
+  }, [script, setScript]);
+
+  const updateNote = useCallback((
+    index: number,
+    key: keyof Script["notes"][number],
+    value: string,
+  ) => {
+    const updated: Script = {
+      ...script,
+      notes: script.notes.map((note, i) =>
+        i === index ? { ...note, [key]: value } : note,
+      ),
+    };
+    const result = ScriptSchema.safeParse(updated);
+    setIsValid(result.success);
+    setZodErrors(result.success ? null : result.error);
+    setScript(updated);
+    // Restore focus after state update
+    if (key === "text") {
+      setTimeout(() => {
+        inputRefs.current[index]?.focus();
+      }, 0);
+    }
+  }, [script, setScript, setIsValid, setZodErrors]);
+
+  const removeNote = useCallback((index: number) => {
+    setScript({
+      ...script,
+      notes: script.notes.filter((_, i) => i !== index),
+    });
+  }, [script, setScript]);
+
+  return (
+    <>
+      <h3 className="text-xl font-semibold">Notes</h3>
+      {script.notes.map((note, index) => (
+        <NoteItem key={index} note={note} index={index} updateNote={updateNote} removeNote={removeNote} />
+      ))}
+      <Button type="button" size="sm" onClick={addNote}>
+        <PlusCircle className="mr-2 h-4 w-4" />
+        {" "}
+        Add Note
+      </Button>
+    </>
+  );
+}
+
+NoteItem.displayName = "NoteItem";
+
+export default memo(Note);