Merge pull request #315 from objectstack-ai/copilot/fix-step-8-error

hotlong · web-flow · commit 3ac0983dcf1a · 2026-02-01T18:16:52.000+08:00
diff --git a/apps/console/vite.config.ts b/apps/console/vite.config.ts
@@ -53,7 +53,7 @@ export default defineConfig({
   test: {
     globals: true,
     environment: 'happy-dom',
-    setupFiles: ['./vitest.setup.ts'],
+    setupFiles: ['./vitest.setup.tsx'],
     server: {
       deps: {
         inline: [/@objectstack/]
diff --git a/apps/console/vitest.setup.ts b/apps/console/vitest.setup.ts
diff --git a/apps/console/vitest.setup.tsx b/apps/console/vitest.setup.tsx
@@ -0,0 +1,43 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import '@object-ui/fields'; // Import fields first
+import '@object-ui/plugin-dashboard'; // Import to register dashboard components
+import '@object-ui/plugin-grid'; // Import to register grid components
+import '@object-ui/components'; // Imports @object-ui/components for types
+
+// Manually re-register basic text component to override field widget
+// This is necessary because @object-ui/fields has @object-ui/components as a dependency,
+// so components gets loaded BEFORE fields registers its widgets, causing fields to overwrite.
+import { ComponentRegistry } from '@object-ui/core';
+import type { TextSchema } from '@object-ui/types';
+
+ComponentRegistry.register('text', 
+  ({ schema, ...props }: { schema: TextSchema; [key: string]: any }) => {
+    const { 
+        'data-obj-id': dataObjId, 
+        'data-obj-type': dataObjType,
+        style,
+        ...rest 
+    } = props;
+
+    if (dataObjId || schema.className || rest.className) {
+        return (
+            <span 
+                data-obj-id={dataObjId}
+                data-obj-type={dataObjType}
+                style={style}
+                className={schema.className || rest.className}
+                {...rest}
+            >
+                {schema.content || schema.value}
+            </span>
+        );
+    }
+
+    return <>{schema.content || schema.value}</>;
+  },
+  {
+    namespace: 'ui',
+    label: 'Text',
+  }
+);
diff --git a/packages/fields/src/widgets/BooleanField.tsx b/packages/fields/src/widgets/BooleanField.tsx
@@ -17,11 +17,11 @@ export function BooleanField({ value, onChange, field, readonly, ...props }: Fie
      return (
         <div className="flex items-center space-x-2">
             <Checkbox 
+                {...props}
                 id={id}
                 checked={!!value}
                 onCheckedChange={(checked) => onChange(!!checked)}
                 disabled={readonly}
-                className={props.className}
             />
             <Label htmlFor={id}>{label}</Label>
         </div>
@@ -31,11 +31,11 @@ export function BooleanField({ value, onChange, field, readonly, ...props }: Fie
   return (
     <div className="flex items-center space-x-2">
         <Switch 
+            {...props}
             id={id} 
             checked={!!value} 
             onCheckedChange={onChange}
             disabled={readonly}
-            className={props.className}
         />
         <Label htmlFor={id}>{label}</Label>
     </div>
diff --git a/packages/fields/src/widgets/CurrencyField.tsx b/packages/fields/src/widgets/CurrencyField.tsx
@@ -16,7 +16,7 @@ function formatCurrency(value: number, currency: string = 'USD'): string {
   }
 }
 
-export function CurrencyField({ value, onChange, field, readonly, errorMessage, ...props }: FieldWidgetProps<number>) {
+export function CurrencyField({ value, onChange, field, readonly, errorMessage, className, ...props }: FieldWidgetProps<number>) {
   const currencyField = (field || (props as any).schema) as any;
   const currency = currencyField?.currency || 'USD';
   const precision = currencyField?.precision ?? 2;
@@ -44,6 +44,7 @@ export function CurrencyField({ value, onChange, field, readonly, errorMessage,
         {currency === 'USD' ? '$' : currency}
       </span>
       <Input
+        {...props}
         type="number"
         value={value ?? ''}
         onChange={(e) => {
@@ -53,10 +54,9 @@ export function CurrencyField({ value, onChange, field, readonly, errorMessage,
         onBlur={handleBlur}
         placeholder={currencyField?.placeholder || '0.00'}
         disabled={readonly}
-        className={`pl-8 ${props.className || ''}`}
+        className={`pl-8 ${className || ''}`}
         step={Math.pow(10, -precision).toFixed(precision)}
         aria-invalid={!!errorMessage}
-        {...props}
       />
     </div>
   );
diff --git a/packages/fields/src/widgets/DateField.tsx b/packages/fields/src/widgets/DateField.tsx
@@ -9,11 +9,11 @@ export function DateField({ value, onChange, field, readonly, ...props }: FieldW
 
   return (
     <Input
+      {...props}
       type="date"
       value={value || ''}
       onChange={(e) => onChange(e.target.value)}
       disabled={readonly}
-      className={props.className}
     />
   );
 }
diff --git a/packages/fields/src/widgets/DateTimeField.tsx b/packages/fields/src/widgets/DateTimeField.tsx
@@ -15,11 +15,11 @@ export function DateTimeField({ value, onChange, field, readonly, ...props }: Fi
 
   return (
     <Input
+      {...props}
       type="datetime-local"
       value={value || ''}
       onChange={(e) => onChange(e.target.value)}
       disabled={readonly}
-      className={props.className}
     />
   );
 }
diff --git a/packages/fields/src/widgets/EmailField.tsx b/packages/fields/src/widgets/EmailField.tsx
@@ -18,12 +18,12 @@ export function EmailField({ value, onChange, field, readonly, errorMessage, ...
 
   return (
     <Input
+      {...props}
       type="email"
       value={value || ''}
       onChange={(e) => onChange(e.target.value)}
       placeholder={config?.placeholder || 'email@example.com'}
       disabled={readonly}
-      className={props.className}
       aria-invalid={!!errorMessage}
     />
   );
diff --git a/packages/fields/src/widgets/NumberField.tsx b/packages/fields/src/widgets/NumberField.tsx
@@ -13,6 +13,7 @@ export function NumberField({ value, onChange, field, readonly, ...props }: Fiel
 
   return (
     <Input
+      {...props}
       type="number"
       value={value ?? ''}
       onChange={(e) => {
@@ -22,7 +23,6 @@ export function NumberField({ value, onChange, field, readonly, ...props }: Fiel
       placeholder={numberField?.placeholder}
       disabled={readonly}
       step={precision ? Math.pow(10, -precision) : 'any'}
-      className={props.className}
     />
   );
 }
diff --git a/packages/fields/src/widgets/PasswordField.tsx b/packages/fields/src/widgets/PasswordField.tsx
@@ -4,7 +4,7 @@ import { Button } from '@object-ui/components';
 import { Eye, EyeOff } from 'lucide-react';
 import { FieldWidgetProps } from './types';
 
-export function PasswordField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<string>) {
+export function PasswordField({ value, onChange, field, readonly, className, ...props }: FieldWidgetProps<string>) {
   const [showPassword, setShowPassword] = useState(false);
   const config = field || (props as any).schema;
 
@@ -15,12 +15,13 @@ export function PasswordField({ value, onChange, field, readonly, ...props }: Fi
   return (
     <div className="relative">
       <Input
+        {...props}
         type={showPassword ? 'text' : 'password'}
         value={value || ''}
         onChange={(e) => onChange(e.target.value)}
         placeholder={config?.placeholder}
         disabled={readonly}
-        className={`pr-10 ${props.className || ''}`}
+        className={`pr-10 ${className || ''}`}
       />
       <Button
         type="button"
diff --git a/packages/fields/src/widgets/PercentField.tsx b/packages/fields/src/widgets/PercentField.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Input } from '@object-ui/components';
 import { FieldWidgetProps } from './types';
 
-export function PercentField({ value, onChange, field, readonly, errorMessage, ...props }: FieldWidgetProps<number>) {
+export function PercentField({ value, onChange, field, readonly, errorMessage, className, ...props }: FieldWidgetProps<number>) {
   const percentField = (field || (props as any).schema) as any;
   const precision = percentField?.precision ?? 2;
 
@@ -31,12 +31,13 @@ export function PercentField({ value, onChange, field, readonly, errorMessage, .
   return (
     <div className="relative">
       <Input
+        {...props}
         type="number"
         value={displayValue}
         onChange={handleChange}
         placeholder={percentField?.placeholder || '0'}
         disabled={readonly}
-        className={`pr-8 ${props.className || ''}`}
+        className={`pr-8 ${className || ''}`}
         step={Math.pow(10, -precision).toFixed(precision)}
         aria-invalid={!!errorMessage}
       />
diff --git a/packages/fields/src/widgets/PhoneField.tsx b/packages/fields/src/widgets/PhoneField.tsx
@@ -18,12 +18,12 @@ export function PhoneField({ value, onChange, field, readonly, errorMessage, ...
 
   return (
     <Input
+      {...props}
       type="tel"
       value={value || ''}
       onChange={(e) => onChange(e.target.value)}
       placeholder={config?.placeholder || '(555) 123-4567'}
       disabled={readonly}
-      className={props.className}
       aria-invalid={!!errorMessage}
     />
   );
diff --git a/packages/fields/src/widgets/SelectField.tsx b/packages/fields/src/widgets/SelectField.tsx
@@ -20,6 +20,7 @@ export function SelectField({ value, onChange, field, readonly, ...props }: Fiel
 
   return (
     <Select 
+      {...props}
       value={value} 
       onValueChange={onChange}
       disabled={readonly}
diff --git a/packages/fields/src/widgets/TextAreaField.tsx b/packages/fields/src/widgets/TextAreaField.tsx
@@ -18,13 +18,13 @@ export function TextAreaField({ value, onChange, field, readonly, errorMessage,
   return (
     <div className="relative">
       <Textarea
+        {...props}
         value={value || ''}
         onChange={(e) => onChange(e.target.value)}
         placeholder={textareaField?.placeholder}
         disabled={readonly}
         rows={rows}
         maxLength={maxLength}
-        className={props.className}
         aria-invalid={!!errorMessage}
       />
       {maxLength && (
diff --git a/packages/fields/src/widgets/TextField.tsx b/packages/fields/src/widgets/TextField.tsx
@@ -16,24 +16,23 @@ export function TextField({ value, onChange, field, readonly, ...props }: FieldW
   if (rows && rows > 1) {
     return (
       <Textarea
+        {...props}
         value={value || ''}
         onChange={(e) => onChange(e.target.value)}
         placeholder={fieldData?.placeholder}
         disabled={readonly}
-        className={props.className}
       />
     );
   }
 
   return (
     <Input
+      {...props}
       type={fieldData?.type === 'password' ? 'password' : 'text'}
       value={value || ''}
       onChange={(e) => onChange(e.target.value)}
       placeholder={fieldData?.placeholder}
       disabled={readonly}
-      className={props.className}
-      {...props}
     />
   );
 }
diff --git a/packages/fields/src/widgets/TimeField.tsx b/packages/fields/src/widgets/TimeField.tsx
@@ -9,11 +9,11 @@ export function TimeField({ value, onChange, field, readonly, ...props }: FieldW
 
   return (
     <Input
+      {...props}
       type="time"
       value={value || ''}
       onChange={(e) => onChange(e.target.value)}
       disabled={readonly}
-      className={props.className}
     />
   );
 }
diff --git a/packages/fields/src/widgets/UrlField.tsx b/packages/fields/src/widgets/UrlField.tsx
@@ -27,12 +27,12 @@ export function UrlField({ value, onChange, field, readonly, errorMessage, ...pr
 
   return (
     <Input
+      {...props}
       type="url"
       value={value || ''}
       onChange={(e) => onChange(e.target.value)}
       placeholder={config?.placeholder || 'https://example.com'}
       disabled={readonly}
-      className={props.className}
       aria-invalid={!!errorMessage}
     />
   );
diff --git a/packages/plugin-aggrid/vite.config.ts b/packages/plugin-aggrid/vite.config.ts
@@ -48,6 +48,9 @@ export default defineConfig({
     },
   },
   test: {
+    globals: true,
+    environment: 'happy-dom',
+    setupFiles: ['../../vitest.setup.ts'],
     passWithNoTests: true,
   },
 });
diff --git a/packages/plugin-charts/vite.config.ts b/packages/plugin-charts/vite.config.ts
@@ -46,6 +46,9 @@ export default defineConfig({
     },
   },
   test: {
+    globals: true,
+    environment: 'happy-dom',
+    setupFiles: ['../../vitest.setup.ts'],
     passWithNoTests: true,
   },
 });
diff --git a/packages/plugin-editor/vite.config.ts b/packages/plugin-editor/vite.config.ts
@@ -44,6 +44,9 @@ export default defineConfig({
     },
   },
   test: {
+    globals: true,
+    environment: 'happy-dom',
+    setupFiles: ['../../vitest.setup.ts'],
     passWithNoTests: true,
   },
 });
diff --git a/packages/plugin-form/vite.config.ts b/packages/plugin-form/vite.config.ts
@@ -37,6 +37,9 @@ export default defineConfig({
     },
   },
   test: {
+    globals: true,
+    environment: 'happy-dom',
+    setupFiles: ['../../vitest.setup.ts'],
     passWithNoTests: true,
   },
 });
diff --git a/packages/plugin-grid/vite.config.ts b/packages/plugin-grid/vite.config.ts
@@ -37,6 +37,9 @@ export default defineConfig({
     },
   },
   test: {
+    globals: true,
+    environment: 'happy-dom',
+    setupFiles: ['../../vitest.setup.ts'],
     passWithNoTests: true,
   },
 });
diff --git a/packages/plugin-kanban/vite.config.ts b/packages/plugin-kanban/vite.config.ts
@@ -46,6 +46,9 @@ export default defineConfig({
     },
   },
   test: {
+    globals: true,
+    environment: 'happy-dom',
+    setupFiles: ['../../vitest.setup.ts'],
     passWithNoTests: true,
   },
 });
diff --git a/packages/plugin-markdown/vite.config.ts b/packages/plugin-markdown/vite.config.ts
@@ -44,6 +44,9 @@ export default defineConfig({
     },
   },
   test: {
+    globals: true,
+    environment: 'happy-dom',
+    setupFiles: ['../../vitest.setup.ts'],
     passWithNoTests: true,
   },
 });
