@object-ui/fields 0.3.0 → 0.5.0

package/src/standard-widgets.test.tsx

@@ -0,0 +1,278 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { describe, it, expect, vi } from 'vitest';
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { CurrencyField } from './widgets/CurrencyField';
+import { NumberField } from './widgets/NumberField';
+import { TextField } from './widgets/TextField';
+import { SelectField } from './widgets/SelectField';
+import { BooleanField } from './widgets/BooleanField';
+import { DateField } from './widgets/DateField';
+import { EmailField } from './widgets/EmailField';
+import { UrlField } from './widgets/UrlField';
+import { PhoneField } from './widgets/PhoneField';
+import { TextAreaField } from './widgets/TextAreaField';
+
+const mockOnChange = vi.fn();
+
+describe('Standard Field Widgets', () => {
+  describe('CurrencyField', () => {
+    const fieldMock = { type: 'currency', currency: 'USD', precision: 2 };
+
+    it('should render value with currency symbol in input mode', () => {
+      render(
+        <CurrencyField
+          value={123.45}
+          onChange={mockOnChange}
+          field={fieldMock as any}
+        />
+      );
+      const input = screen.getByRole('spinbutton'); // input type="number"
+      expect(input).toHaveValue(123.45);
+      expect(screen.getByText('$')).toBeInTheDocument();
+    });
+
+    it('should format currency in readonly mode', () => {
+      const { container } = render(
+        <CurrencyField
+          value={1234.56}
+          onChange={mockOnChange}
+          field={fieldMock as any}
+          readonly={true}
+        />
+      );
+      // Expected output format might depend on locale, matching generic USD format
+      expect(container.textContent).toMatch(/\$1,234.56/);
+    });
+
+    it('should handle EUR currency', () => {
+      render(
+        <CurrencyField
+          value={100}
+          onChange={mockOnChange}
+          field={{ ...fieldMock, currency: 'EUR' } as any}
+        />
+      );
+      expect(screen.getByText('EUR')).toBeInTheDocument();
+    });
+  });
+
+  describe('NumberField', () => {
+    const fieldMock = { type: 'number', precision: 2 };
+
+    it('should render numeric input', () => {
+      render(
+        <NumberField
+          value={42}
+          onChange={mockOnChange}
+          field={fieldMock as any}
+        />
+      );
+      const input = screen.getByRole('spinbutton');
+      expect(input).toHaveValue(42);
+    });
+
+    it('should call onChange with number', () => {
+      render(
+        <NumberField
+          value={1}
+          onChange={mockOnChange}
+          field={fieldMock as any}
+        />
+      );
+      const input = screen.getByRole('spinbutton');
+      fireEvent.change(input, { target: { value: '10' } });
+      expect(mockOnChange).toHaveBeenCalledWith(10);
+    });
+
+    it('should display value in readonly mode', () => {
+      const { container } = render(
+        <NumberField
+          value={99.9}
+          onChange={mockOnChange}
+          field={fieldMock as any}
+          readonly={true}
+        />
+      );
+      expect(container.textContent).toBe('99.9');
+    });
+  });
+
+  describe('TextField', () => {
+    const fieldMock = { type: 'text' };
+
+    it('should render text input', () => {
+      render(
+        <TextField
+          value="Hello"
+          onChange={mockOnChange}
+          field={fieldMock as any}
+        />
+      );
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveValue('Hello');
+    });
+
+    it('should render as password when type is password', () => {
+        render(
+          <TextField
+            value="secret"
+            onChange={mockOnChange}
+            field={{ type: 'password' } as any}
+          />
+        );
+        // getByRole('textbox') doesn't work for password type usually
+        const input = screen.getByDisplayValue('secret'); 
+        expect(input).toHaveAttribute('type', 'password');
+      });
+
+    it('should display value in readonly mode', () => {
+      const { container } = render(
+        <TextField
+          value="ReadOnly"
+          onChange={mockOnChange}
+          field={fieldMock as any}
+          readonly={true}
+        />
+      );
+      expect(container.textContent).toBe('ReadOnly');
+    });
+  });
+
+  describe('SelectField', () => {
+    const fieldMock = { 
+        type: 'select', 
+        options: [
+            { label: 'Option A', value: 'a' },
+            { label: 'Option B', value: 'b' }
+        ] 
+    };
+
+    it('should render select trigger (Combobox/Select)', () => {
+      render(
+        <SelectField
+          value={''}
+          onChange={mockOnChange}
+          field={fieldMock as any}
+        />
+      );
+      expect(screen.getByRole('combobox')).toBeInTheDocument();
+    });
+
+    it('should display label in readonly mode', () => {
+      const { container } = render(
+        <SelectField
+          value="a"
+          onChange={mockOnChange}
+          field={fieldMock as any}
+          readonly={true}
+        />
+      );
+      expect(container.textContent).toBe('Option A');
+    });
+  });
+
+  describe('BooleanField', () => {
+    const fieldMock = { type: 'boolean' };
+
+    it('should render checkbox/switch', () => {
+      render(
+        <BooleanField
+          value={true}
+          onChange={mockOnChange}
+          field={fieldMock as any}
+        />
+      );
+      // Ensure we can find the switch role (Shadcn switch uses role="switch")
+      expect(screen.getByRole('switch')).toBeChecked();
+    });
+
+    it('should toggle value', () => {
+      render(
+        <BooleanField
+          value={false}
+          onChange={mockOnChange}
+          field={fieldMock as any}
+        />
+      );
+      const toggle = screen.getByRole('switch');
+      fireEvent.click(toggle);
+      expect(mockOnChange).toHaveBeenCalledWith(true);
+    });
+
+    it('should display Yes/No in readonly mode', () => {
+       const { container } = render(
+        <BooleanField
+          value={true}
+          onChange={mockOnChange}
+          field={fieldMock as any}
+          readonly={true}
+        />
+      );
+      expect(container.textContent).toBe('Yes');
+    });
+  });
+
+  describe('EmailField', () => {
+    it('should render email input', () => {
+      render(
+        <EmailField
+          value="test@example.com"
+          onChange={mockOnChange}
+          field={{ type: 'email' } as any}
+        />
+      );
+      const input = screen.getByDisplayValue('test@example.com');
+      expect(input).toHaveAttribute('type', 'email');
+    });
+
+    it('should render as link in readonly mode', () => {
+      render(
+        <EmailField
+          value="test@example.com"
+          onChange={mockOnChange}
+          field={{ type: 'email' } as any}
+          readonly={true}
+        />
+      );
+      const link = screen.getByRole('link');
+      expect(link).toHaveAttribute('href', 'mailto:test@example.com');
+      expect(link).toHaveTextContent('test@example.com');
+    });
+  });
+
+  describe('UrlField', () => {
+    it('should render url input', () => {
+      render(
+        <UrlField
+          value="https://example.com"
+          onChange={mockOnChange}
+          field={{ type: 'url' } as any}
+        />
+      );
+      const input = screen.getByDisplayValue('https://example.com');
+      expect(input).toHaveAttribute('type', 'url');
+    });
+
+    it('should render clickable link in readonly mode', () => {
+      render(
+        <UrlField
+          value="https://example.com"
+          onChange={mockOnChange}
+          field={{ type: 'url' } as any}
+          readonly={true}
+        />
+      );
+      const link = screen.getByRole('link');
+      expect(link).toHaveAttribute('href', 'https://example.com');
+    });
+  });
+});

package/src/text-rich-widgets.test.tsx

@@ -0,0 +1,104 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { TextAreaField } from './widgets/TextAreaField';
+import { RichTextField } from './widgets/RichTextField';
+import { CodeField } from './widgets/CodeField';
+import { PasswordField } from './widgets/PasswordField';
+import type { FieldWidgetProps } from './widgets/types';
+
+const mockField = {
+  name: 'test_field',
+  label: 'Test Field',
+} as any;
+
+const baseProps: FieldWidgetProps<string> = {
+  field: mockField,
+  value: '',
+  onChange: vi.fn(),
+  readonly: false,
+};
+
+describe('Text & Rich Content Widgets', () => {
+    describe('TextAreaField', () => {
+        it('renders textarea in edit mode', () => {
+            render(<TextAreaField {...baseProps} />);
+            expect(screen.getByRole('textbox')).toBeInTheDocument();
+        });
+
+        it('handles max length indicator', () => {
+            const propsWithMax = {
+                ...baseProps,
+                field: { ...mockField, max_length: 100 }
+            };
+            render(<TextAreaField {...propsWithMax} value="testing" />);
+            expect(screen.getByLabelText('Character count: 7 of 100')).toBeInTheDocument();
+        });
+
+        it('renders whitespace-pre-wrap in readonly mode', () => {
+            const text = 'Line 1\nLine 2';
+            render(<TextAreaField {...baseProps} readonly value={text} />);
+            // Check existence logic
+            const display = screen.getByText((content) => 
+                content.includes('Line 1') && content.includes('Line 2')
+            );
+            expect(display).toHaveClass('whitespace-pre-wrap');
+        });
+    });
+
+    describe('RichTextField', () => {
+        // Current implementation is a simpler textarea wrapper
+        it('renders textarea with format indicator', () => {
+            render(<RichTextField {...baseProps} />);
+            expect(screen.getByRole('textbox')).toBeInTheDocument();
+            expect(screen.getByText((content) => content.includes('Format: markdown'))).toBeInTheDocument();
+        });
+
+        it('renders prose in readonly mode', () => {
+            render(<RichTextField {...baseProps} readonly value="# Heading" />);
+            const display = screen.getByText('# Heading');
+            expect(display).toHaveClass('prose');
+        });
+    });
+
+    describe('CodeField', () => {
+        it('renders textarea with monospace font', () => {
+            render(<CodeField {...baseProps} />);
+            const input = screen.getByRole('textbox');
+            expect(input).toHaveClass('font-mono');
+        });
+
+        it('renders code block in readonly mode', () => {
+            render(<CodeField {...baseProps} readonly value="const x = 1;" />);
+            // Check for pre > code structure
+            const pre = document.querySelector('pre');
+            expect(pre).toBeInTheDocument();
+            expect(pre).toHaveTextContent('const x = 1;');
+        });
+    });
+
+    describe('PasswordField', () => {
+        it('renders password input by default', () => {
+            const { container } = render(<PasswordField {...baseProps} />);
+            const input = container.querySelector('input[type="password"]');
+            expect(input).toBeInTheDocument();
+        });
+
+        it('toggles visibility', () => {
+            const { container } = render(<PasswordField {...baseProps} />);
+            const button = screen.getByRole('button'); // The eye icon button
+            const input = container.querySelector('input') as HTMLInputElement;
+            
+            expect(input.type).toBe('password');
+            fireEvent.click(button);
+            expect(input.type).toBe('text');
+            fireEvent.click(button);
+            expect(input.type).toBe('password');
+        });
+
+        it('renders masked bullets in readonly mode', () => {
+            render(<PasswordField {...baseProps} readonly value="secret" />);
+            expect(screen.getByText('••••••••')).toBeInTheDocument();
+            expect(screen.queryByText('secret')).not.toBeInTheDocument();
+        });
+    });
+});

package/src/visual-widgets.test.tsx

@@ -0,0 +1,97 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { ColorField } from './widgets/ColorField';
+import { RatingField } from './widgets/RatingField';
+import { SliderField } from './widgets/SliderField';
+import { QRCodeField } from './widgets/QRCodeField'; // Intentionally simpler than Image/Avatar
+import type { FieldWidgetProps } from './widgets/types';
+
+const mockField = {
+  name: 'test_field',
+  label: 'Test Field',
+} as any;
+
+const baseProps: FieldWidgetProps<any> = {
+  field: mockField,
+  value: undefined,
+  onChange: vi.fn(),
+  readonly: false,
+};
+
+describe('Visual & Display Widgets', () => {
+    describe('ColorField', () => {
+        it('renders color picker + text input in edit mode', () => {
+             const { container } = render(<ColorField {...baseProps} value="#00ff00" />);
+             const colorInput = container.querySelector('input[type="color"]');
+             const textInput = screen.getByRole('textbox');
+             
+             expect(colorInput).toBeInTheDocument();
+             expect(textInput).toBeInTheDocument();
+             expect(textInput).toHaveValue('#00ff00');
+        });
+
+        it('syncs change from color picker', () => {
+            const { container } = render(<ColorField {...baseProps} />);
+            const colorInput = container.querySelector('input[type="color"]') as HTMLInputElement;
+            fireEvent.change(colorInput, { target: { value: '#ff0000' } });
+            expect(baseProps.onChange).toHaveBeenCalledWith('#ff0000');
+        });
+
+        it('shows preview box in readonly mode', () => {
+            const { container } = render(<ColorField {...baseProps} readonly value="#0000ff" />);
+            // Check for the style attribute on the div
+            // We search for a div that has the style background-color
+            // This is a bit fragile but standard for inline styles
+            const preview = container.querySelector('div[style="background-color: #0000ff;"]');
+            // Or looser check:
+            const divs = container.querySelectorAll('div');
+            const found = Array.from(divs).some(d => d.style.backgroundColor === 'rgb(0, 0, 255)' || d.style.backgroundColor === '#0000ff');
+            expect(found).toBe(true);
+            expect(screen.getByText('#0000ff')).toBeInTheDocument();
+        });
+    });
+
+    describe('RatingField', () => {
+        it('renders stars', () => {
+            render(<RatingField {...baseProps} value={3} />);
+            // Should see 5 buttons (default max)
+            const buttons = screen.getAllByRole('button');
+            expect(buttons).toHaveLength(5);
+        });
+
+        it('highlights correct number of stars in readonly', () => {
+             const { container } = render(<RatingField {...baseProps} readonly value={3} />);
+             // Should have 3 filled stars, 2 empty. 
+             // Logic: fill-yellow-400
+             const filled = container.querySelectorAll('.fill-yellow-400');
+             expect(filled).toHaveLength(3);
+             expect(screen.getByText('3 / 5')).toBeInTheDocument();
+        });
+
+        it('calls onChange when clicking star', () => {
+             render(<RatingField {...baseProps} />);
+             const buttons = screen.getAllByRole('button');
+             fireEvent.click(buttons[3]); // 4th star (index 3) -> value 4
+             expect(baseProps.onChange).toHaveBeenCalledWith(4);
+        });
+    });
+
+    describe('SliderField', () => {
+        it('renders slider', () => {
+            const { container } = render(<SliderField {...baseProps} value={50} />);
+            // Radix slider usually has role="slider"
+            const slider = screen.getByRole('slider');
+            expect(slider).toBeInTheDocument();
+            // Check text display
+            expect(screen.getByText('50')).toBeInTheDocument();
+        });
+
+        it('renders readonly view', () => {
+            render(<SliderField {...baseProps} readonly value={75} />);
+            expect(screen.getByText('75')).toBeInTheDocument();
+            expect(screen.getByText('/ 100')).toBeInTheDocument();
+            expect(screen.queryByRole('slider')).not.toBeInTheDocument();
+        });
+    });
+    
+});

package/src/widgets/AddressField.tsx

@@ -0,0 +1,112 @@
+import React from 'react';
+import { Input, Label } from '@object-ui/components';
+import { FieldWidgetProps } from './types';
+
+/**
+ * Address data structure
+ */
+export interface AddressValue {
+  street?: string;
+  city?: string;
+  state?: string;
+  zipCode?: string;
+  country?: string;
+}
+
+/**
+ * Address field widget - provides a structured address input
+ * Supports street, city, state, zip code, and country
+ */
+export function AddressField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<AddressValue>) {
+  const address = value || {};
+
+  const handleFieldChange = (fieldName: keyof AddressValue, fieldValue: string) => {
+    onChange({
+      ...address,
+      [fieldName]: fieldValue,
+    });
+  };
+
+  const formatAddress = (addr: AddressValue): string => {
+    const parts = [
+      addr.street,
+      addr.city,
+      [addr.state, addr.zipCode].filter(Boolean).join(' '),
+      addr.country,
+    ].filter(Boolean);
+    return parts.join(', ') || '-';
+  };
+
+  if (readonly) {
+    return <span className="text-sm">{formatAddress(address)}</span>;
+  }
+
+  return (
+    <div className="space-y-3">
+      <div>
+        <Label htmlFor="street" className="text-xs">Street Address</Label>
+        <Input
+          id="street"
+          type="text"
+          value={address.street || ''}
+          onChange={(e) => handleFieldChange('street', e.target.value)}
+          placeholder="123 Main St"
+          disabled={readonly || props.disabled}
+          className={props.className}
+        />
+      </div>
+      
+      <div className="grid grid-cols-2 gap-3">
+        <div>
+          <Label htmlFor="city" className="text-xs">City</Label>
+          <Input
+            id="city"
+            type="text"
+            value={address.city || ''}
+            onChange={(e) => handleFieldChange('city', e.target.value)}
+            placeholder="San Francisco"
+            disabled={readonly || props.disabled}
+          />
+        </div>
+        
+        <div>
+          <Label htmlFor="state" className="text-xs">State / Province</Label>
+          <Input
+            id="state"
+            type="text"
+            value={address.state || ''}
+            onChange={(e) => handleFieldChange('state', e.target.value)}
+            placeholder="CA"
+            disabled={readonly || props.disabled}
+          />
+        </div>
+      </div>
+      
+      <div className="grid grid-cols-2 gap-3">
+        <div>
+          <Label htmlFor="zipCode" className="text-xs">ZIP / Postal Code</Label>
+          <Input
+            id="zipCode"
+            type="text"
+            value={address.zipCode || ''}
+            onChange={(e) => handleFieldChange('zipCode', e.target.value)}
+            placeholder="94102"
+            disabled={readonly || props.disabled}
+          />
+        </div>
+        
+        <div>
+          <Label htmlFor="country" className="text-xs">Country</Label>
+          <Input
+            id="country"
+            type="text"
+            value={address.country || ''}
+            onChange={(e) => handleFieldChange('country', e.target.value)}
+            placeholder="United States"
+            disabled={readonly || props.disabled}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/widgets/AutoNumberField.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { FieldWidgetProps } from './types';
+
+/**
+ * AutoNumberField - Read-only auto-generated field
+ * Values are automatically generated by the system and cannot be edited
+ */
+export function AutoNumberField({ value, field, ...props }: FieldWidgetProps<string | number>) {
+  const displayValue = value != null ? String(value) : '-';
+
+  return (
+    <span className={`text-sm font-mono text-gray-700 ${props.className || ''}`}>
+      {displayValue}
+    </span>
+  );
+}