Refactor UI components and add Vite config types

Refactored form fields in Login to use Label components and improved structure. Updated SettingsView badge variant and removed unused imports in Dashboard. Adjusted ObjectListView delete handler signature. Updated tsconfig.node.json to emit declaration files and added vite.config.d.ts for type declarations. Cast Vite plugin to 'any' in vite.config.ts to resolve type issues.

Author: hotlong

packages/client/src/components/dashboard/ObjectListView.tsx

@@ -115,7 +115,7 @@ export function ObjectListView({ objectName, user, isCreating, navigate, objectS
         .catch(err => alert(err.message));
     };
 
-    const handleDelete = (row: any, index?: number) => {
+    const handleDelete = (row: any) => {
         if (!confirm('Are you sure you want to delete this record?')) return;
         const id = row.id || row._id;
 
@@ -138,7 +138,7 @@ export function ObjectListView({ objectName, user, isCreating, navigate, objectS
             .filter(key => !['_id', '__v', 'createdAt', 'updatedAt'].includes(key))
             .map(key => {
                 const field = objectSchema?.fields?.[key];
-                const type = getFieldType(key);
+                const type = getFieldType(key) as 'text' | 'number' | 'boolean' | 'date' | 'select' | 'badge';
 
                 return {
                     id: key,
@@ -282,7 +282,7 @@ export function ObjectListView({ objectName, user, isCreating, navigate, objectS
                                                 <button onClick={(e) => { e.stopPropagation(); navigate(`/object/${objectName}/${row.id || row._id}`); }} className="p-1 text-stone-400 hover:text-blue-600 transition-colors" title="View/Edit">
                                                     <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
                                                 </button>
-                                                <button onClick={(e) => { e.stopPropagation(); handleDelete(row, idx); }} className="p-1 text-stone-400 hover:text-red-600 transition-colors" title="Delete">
+                                                <button onClick={(e) => { e.stopPropagation(); handleDelete(row); }} className="p-1 text-stone-400 hover:text-red-600 transition-colors" title="Delete">
                                                     <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
                                                 </button>
                                             </div>

packages/client/src/components/dashboard/SettingsView.tsx

@@ -21,7 +21,7 @@ export function SettingsView({ objectCount }: SettingsViewProps) {
                         </div>
                         <div className="flex justify-between py-2">
                             <span className="text-stone-600">Collections</span>
-                            <Badge variant="secondary">{objectCount}</Badge>
+                            <Badge variant="default">{objectCount}</Badge>
                         </div>
                     </div>
                 </Card>

packages/client/src/pages/Dashboard.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Spinner, Badge, Card } from '@objectql/ui';
+import { Spinner } from '@objectql/ui';
 import { useAuth } from '../context/AuthContext';
 import { useRouter } from '../hooks/useRouter';
 import { SidebarItem } from '../components/dashboard/SidebarItem';

packages/client/src/pages/Login.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Card, Input, Button, Spinner } from '@objectql/ui';
+import { Card, Input, Button, Spinner, Label } from '@objectql/ui';
 import { useAuth } from '../context/AuthContext';
 
 export default function Login() {
@@ -52,30 +52,36 @@ export default function Login() {
                 <Card className="backdrop-blur-xl bg-white/70 shadow-2xl border-white/50 ring-1 ring-black/5 p-6">
                     <form onSubmit={handleSubmit} className="space-y-5">
                         {!isSignIn && (
+                            <div className="space-y-2">
+                                <Label>Full Name</Label>
+                                <Input 
+                                    value={name} 
+                                    onChange={(e) => setName(e.target.value)} 
+                                    placeholder="Jane Doe"
+                                    required
+                                />
+                            </div>
+                        )}
+                        <div className="space-y-2">
+                            <Label>Email address</Label>
                             <Input 
-                                label="Full Name" 
-                                value={name} 
-                                onChange={(e) => setName(e.target.value)} 
-                                placeholder="Jane Doe"
-                                required
+                                type="email"
+                                value={email} 
+                                onChange={(e) => setEmail(e.target.value)} 
+                                placeholder="[email protected]"
+                                required 
                             />
-                        )}
-                        <Input 
-                            label="Email address" 
-                            type="email"
-                            value={email} 
-                            onChange={(e) => setEmail(e.target.value)} 
-                            placeholder="[email protected]"
-                            required 
-                        />
-                        <Input 
-                            label="Password" 
-                            type="password" 
-                            value={password} 
-                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setPassword(e.target.value)} 
-                            placeholder="••••••••"
-                            required 
-                        />
+                        </div>
+                        <div className="space-y-2">
+                            <Label>Password</Label>
+                            <Input 
+                                type="password" 
+                                value={password} 
+                                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setPassword(e.target.value)} 
+                                placeholder="••••••••"
+                                required 
+                            />
+                        </div>
 
                         {error && (
                             <div className="p-3 text-[13px] text-red-600 bg-red-50/50 border border-red-100 rounded-lg flex items-start gap-2">

packages/client/tsconfig.node.json

@@ -7,7 +7,8 @@
     "moduleResolution": "bundler",
     "allowSyntheticDefaultImports": true,
     "strict": true,
-    "noEmit": true
+    "noEmit": false,
+    "emitDeclarationOnly": true
   },
   "include": ["vite.config.ts"]
 }

packages/client/vite.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vite").UserConfig;
+export default _default;

packages/client/vite.config.ts

@@ -4,7 +4,7 @@ import path from 'path'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react() as any],
   resolve: {
     alias: {
       '@': path.resolve(__dirname, './src'),