Merge pull request #253 from objectstack-ai/copilot/develop-all-ui-components

Author: hotlong

packages/fields/src/fields.stories.tsx

@@ -21,7 +21,22 @@ import {
   FileField,
   LocationField,
   FormulaField,
-  SummaryField
+  SummaryField,
+  RichTextField,
+  ImageField,
+  ObjectField,
+  VectorField,
+  GridField,
+  ColorField,
+  SliderField,
+  RatingField,
+  CodeField,
+  AvatarField,
+  AddressField,
+  GeolocationField,
+  SignatureField,
+  QRCodeField,
+  MasterDetailField
 } from './index';
 import { FieldMetadata } from '@object-ui/types';
 
@@ -376,3 +391,176 @@ export const ReadOnly: Story = {
     </div>
   )
 };
+
+// --- New Widgets ---
+
+export const RichText: Story = {
+  render: () => (
+    <FieldWrapper 
+      Component={RichTextField}
+      field={{ label: 'Description', type: 'html' }}
+      initialValue="<p><b>Rich</b> text content...</p>"
+    />
+  )
+};
+
+export const Image: Story = {
+  render: () => (
+    <FieldWrapper 
+      Component={ImageField}
+      field={{ label: 'Banner', type: 'image' }}
+      initialValue="https://placehold.co/600x400"
+    />
+  )
+};
+
+export const Color: Story = {
+  render: () => (
+    <FieldWrapper 
+      Component={ColorField}
+      field={{ label: 'Theme Color', type: 'color' }}
+      initialValue="#3b82f6"
+    />
+  )
+};
+
+export const Slider: Story = {
+  render: () => (
+    <FieldWrapper 
+      Component={SliderField}
+      field={{ label: 'Opacity', type: 'slider', min: 0, max: 100 } as any}
+      initialValue={75}
+    />
+  )
+};
+
+export const Rating: Story = {
+  render: () => (
+    <FieldWrapper 
+      Component={RatingField}
+      field={{ label: 'Score', type: 'rating', max: 5 } as any}
+      initialValue={4}
+    />
+  )
+};
+
+export const Code: Story = {
+  render: () => (
+    <FieldWrapper 
+      Component={CodeField}
+      field={{ label: 'Config JSON', type: 'code' }}
+      initialValue='{ "debug": true }'
+    />
+  )
+};
+
+export const Avatar: Story = {
+  render: () => (
+    <FieldWrapper 
+      Component={AvatarField}
+      field={{ label: 'Profile', type: 'avatar' }}
+      initialValue="https://github.com/shadcn.png"
+    />
+  )
+};
+
+export const Signature: Story = {
+  render: () => (
+    <FieldWrapper 
+      Component={SignatureField}
+      field={{ label: 'Sign Here', type: 'signature' }}
+      initialValue=""
+    />
+  )
+};
+
+export const QRCode: Story = {
+  render: () => (
+    <FieldWrapper 
+      Component={QRCodeField}
+      field={{ label: 'Scan Me', type: 'qrcode' }}
+      initialValue="https://objectui.org"
+    />
+  )
+};
+
+export const Address: Story = {
+  render: () => (
+    <FieldWrapper 
+      Component={AddressField}
+      field={{ label: 'Shipping Address', type: 'address' }}
+      initialValue={{ street: '123 Main St', city: 'Anytown', country: 'USA' }}
+    />
+  )
+};
+
+export const Geolocation: Story = {
+  render: () => (
+    <FieldWrapper 
+      Component={GeolocationField}
+      field={{ label: 'Location', type: 'geolocation' }}
+      initialValue={{ lat: 37.7749, lng: -122.4194 }}
+    />
+  )
+};
+
+export const Object: Story = {
+  render: () => (
+    <FieldWrapper 
+      Component={ObjectField}
+      field={{ 
+        label: 'Metadata', 
+        type: 'object',
+        fields: [
+            { name: 'key', type: 'text', label: 'Key' },
+            { name: 'value', type: 'text', label: 'Value' }
+        ]
+      } as any}
+      initialValue={{ key: 'theme', value: 'dark' }}
+    />
+  )
+};
+
+export const Grid: Story = {
+  render: () => (
+    <FieldWrapper 
+      Component={GridField}
+      field={{ 
+        label: 'Order Items', 
+        type: 'grid',
+        columns: [
+            { field: 'item', label: 'Item' },
+            { field: 'qty', label: 'Qty' }
+        ]
+      } as any}
+      initialValue={[
+          { item: 'Apple', qty: 2 },
+          { item: 'Banana', qty: 5 }
+      ]}
+    />
+  )
+};
+
+export const MasterDetail: Story = {
+  render: () => (
+    <FieldWrapper 
+      Component={MasterDetailField}
+      field={{ 
+        label: 'Line Items', 
+        type: 'master_detail',
+        reference_to: 'products'
+      } as any}
+      initialValue={[]}
+    />
+  )
+};
+
+export const Vector: Story = {
+  render: () => (
+    <FieldWrapper 
+      Component={VectorField}
+      field={{ label: 'Embedding', type: 'vector' }}
+      initialValue={[0.1, 0.2, 0.3, 0.4]}
+    />
+  )
+};

packages/fields/src/index.tsx

@@ -741,6 +741,17 @@ import { UserField } from './widgets/UserField';
 import { ObjectField } from './widgets/ObjectField';
 import { VectorField } from './widgets/VectorField';
 import { GridField } from './widgets/GridField';
+// New widgets according to @objectstack/spec
+import { ColorField } from './widgets/ColorField';
+import { SliderField } from './widgets/SliderField';
+import { RatingField } from './widgets/RatingField';
+import { CodeField } from './widgets/CodeField';
+import { AvatarField } from './widgets/AvatarField';
+import { AddressField } from './widgets/AddressField';
+import { GeolocationField } from './widgets/GeolocationField';
+import { SignatureField } from './widgets/SignatureField';
+import { QRCodeField } from './widgets/QRCodeField';
+import { MasterDetailField } from './widgets/MasterDetailField';
 
 // Create wrapper renderers for field widgets to work with ComponentDemo
 function createFieldRenderer(FieldWidget: React.ComponentType<any>) {
@@ -822,7 +833,7 @@ export function registerFields() {
   ComponentRegistry.register('markdown', createFieldRenderer(RichTextField));
   ComponentRegistry.register('html', createFieldRenderer(RichTextField));
   ComponentRegistry.register('lookup', createFieldRenderer(LookupField));
-  ComponentRegistry.register('master_detail', createFieldRenderer(LookupField));
+  ComponentRegistry.register('master_detail', createFieldRenderer(MasterDetailField));
 
   // File fields
   ComponentRegistry.register('file', createFieldRenderer(FileField));
@@ -845,6 +856,17 @@ export function registerFields() {
   ComponentRegistry.register('vector', createFieldRenderer(VectorField));
   ComponentRegistry.register('grid', createFieldRenderer(GridField));
 
+  // NEW: Additional field types from @objectstack/spec
+  ComponentRegistry.register('color', createFieldRenderer(ColorField));
+  ComponentRegistry.register('slider', createFieldRenderer(SliderField));
+  ComponentRegistry.register('rating', createFieldRenderer(RatingField));
+  ComponentRegistry.register('code', createFieldRenderer(CodeField));
+  ComponentRegistry.register('avatar', createFieldRenderer(AvatarField));
+  ComponentRegistry.register('address', createFieldRenderer(AddressField));
+  ComponentRegistry.register('geolocation', createFieldRenderer(GeolocationField));
+  ComponentRegistry.register('signature', createFieldRenderer(SignatureField));
+  ComponentRegistry.register('qrcode', createFieldRenderer(QRCodeField));
+  
   // Register with field: prefix for explicit field widgets
   ComponentRegistry.register('field:text', TextField);
   ComponentRegistry.register('field:textarea', TextAreaField);
@@ -864,6 +886,18 @@ export function registerFields() {
   ComponentRegistry.register('field:location', LocationField);
   ComponentRegistry.register('field:user', UserField);
   ComponentRegistry.register('field:object', ObjectField);
+  
+  // NEW: field: prefix registrations for new widgets
+  ComponentRegistry.register('field:color', ColorField);
+  ComponentRegistry.register('field:slider', SliderField);
+  ComponentRegistry.register('field:rating', RatingField);
+  ComponentRegistry.register('field:code', CodeField);
+  ComponentRegistry.register('field:avatar', AvatarField);
+  ComponentRegistry.register('field:address', AddressField);
+  ComponentRegistry.register('field:geolocation', GeolocationField);
+  ComponentRegistry.register('field:signature', SignatureField);
+  ComponentRegistry.register('field:qrcode', QRCodeField);
+  ComponentRegistry.register('field:master_detail', MasterDetailField);
 }
 
 export * from './widgets/types';
@@ -893,3 +927,14 @@ export * from './widgets/UserField';
 export * from './widgets/ObjectField';
 export * from './widgets/VectorField';
 export * from './widgets/GridField';
+// New widgets according to @objectstack/spec
+export * from './widgets/ColorField';
+export * from './widgets/SliderField';
+export * from './widgets/RatingField';
+export * from './widgets/CodeField';
+export * from './widgets/AvatarField';
+export * from './widgets/AddressField';
+export * from './widgets/GeolocationField';
+export * from './widgets/SignatureField';
+export * from './widgets/QRCodeField';
+export * from './widgets/MasterDetailField';