feat: enhance field management with grouping and improved UI (#19)

* feat: enhance field management with grouping and improved UI

- Introduced grouping functionality for fields in FieldList component.
- Added FieldItem component for better encapsulation of field rendering logic.
- Implemented expand/collapse feature for grouped fields.
- Enhanced styling for field items and group headers for better UX.
- Updated FieldMenu to support selection of existing fields with grouping.
- Modified TemplateField type to include group property for better organization.
- Improved overall code structure and readability.

* fix: include group comparison in template fields equality check

Author: caio-pizzol

demo/package.json

@@ -11,7 +11,7 @@
         "@superdoc-dev/template-builder": "link:../.",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
-        "superdoc": "^0.29.0"
+        "superdoc": "^0.31.2"
     },
     "devDependencies": {
         "@types/react": "^19.2.6",
@@ -20,4 +20,4 @@
         "typescript": "^5.9.3",
         "vite": "^7.2.2"
     }
-}
+}

demo/pnpm-lock.yaml

@@ -9,24 +9,13 @@ import "superdoc/dist/style.css";
 import "./App.css";
 
 const availableFields: FieldDefinition[] = [
-  // Agreement
-  { id: '1242142770', label: 'Agreement Date', category: 'Agreement' },
-
-  // Parties
-  { id: '1242142771', label: 'User Name', category: 'Parties' },
-  { id: '1242142772', label: 'Company Name', category: 'Parties' },
-
-  // Scope
-  { id: '1242142773', label: 'Service Type', category: 'Scope' },
-
-  // Legal
-  { id: '1242142774', label: 'Agreement Jurisdiction', category: 'Legal' },
-
-  // Company Details
-  { id: '1242142775', label: 'Company Address', category: 'Company' },
-
-  // Signatures
-  { id: '1242142776', label: 'Signature', category: 'Signatures' },
+  { id: '1242142770', label: 'Agreement Date' },
+  { id: '1242142771', label: 'User Name' },
+  { id: '1242142772', label: 'Company Name' },
+  { id: '1242142773', label: 'Service Type' },
+  { id: '1242142774', label: 'Agreement Jurisdiction' },
+  { id: '1242142775', label: 'Company Address' },
+  { id: '1242142776', label: 'Signature' },
 ];
 
 export function App() {

demo/src/App.tsx

@@ -52,7 +52,7 @@
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "superdoc": "^0.29.0"
+    "superdoc": "^0.31.2"
   },
   "devDependencies": {
     "@commitlint/cli": "^20.1.0",
@@ -78,9 +78,9 @@
     "semantic-release": "^25.0.2",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.47.0",
-    "vite": "^7.2.2",
+    "vite": "^7.2.4",
     "vite-plugin-dts": "^4.5.4",
-    "vitest": "^4.0.10"
+    "vitest": "^4.0.13"
   },
   "publishConfig": {
     "access": "public"