feat: expand field stories with additional components and improve layout

Author: hotlong

packages/components/src/stories-json/fields.stories.tsx

@@ -5,6 +5,8 @@ import {
   CurrencyField, 
   SelectField, 
   DateField,
+  DateTimeField,
+  TimeField,
   BooleanField,
   NumberField,
   PercentField,
@@ -14,7 +16,12 @@ import {
   PasswordField,
   TextAreaField,
   AutoNumberField,
-  LookupField
+  LookupField,
+  UserField,
+  FileField,
+  LocationField,
+  FormulaField,
+  SummaryField
 } from '@object-ui/fields';
 import { FieldMetadata } from '@object-ui/types';
 
@@ -60,10 +67,10 @@ const FieldWrapper = ({
   } as FieldMetadata;
 
   return (
-    <div className="w-[300px] space-y-2 p-4 border rounded-lg">
-      <div className="flex justify-between items-center">
-        <label className="text-sm font-medium">{fullField.label}</label>
-        {readonly && <span className="text-[10px] bg-gray-100 px-1 rounded">Read Only</span>}
+    <div className="w-[350px] space-y-2 p-4 border rounded-lg shadow-sm bg-white">
+      <div className="flex justify-between items-center mb-2">
+        <label className="text-sm font-semibold text-gray-700">{fullField.label}</label>
+        {readonly && <span className="text-[10px] bg-slate-100 px-2 py-0.5 rounded text-slate-500 font-medium">Read Only</span>}
       </div>
 
       <Component
@@ -77,14 +84,16 @@ const FieldWrapper = ({
       />
 
       {!readonly && (
-        <div className="text-xs text-muted-foreground mt-4 pt-2 border-t font-mono">
+        <div className="text-xs text-muted-foreground mt-4 pt-2 border-t font-mono overflow-hidden text-ellipsis">
           Value: {JSON.stringify(value)}
         </div>
       )}
     </div>
   );
 };
 
+// --- Text Based ---
+
 export const Text: Story = {
   render: () => (
     <FieldWrapper 
@@ -105,6 +114,59 @@ export const TextArea: Story = {
   )
 };
 
+export const Email: Story = {
+  render: () => (
+    <FieldWrapper 
+      Component={EmailField}
+      field={{ label: 'Email', type: 'email' }}
+      initialValue="contact@example.com"
+    />
+  )
+};
+
+export const Phone: Story = {
+  render: () => (
+    <FieldWrapper 
+      Component={PhoneField}
+      field={{ label: 'Phone', type: 'phone' }}
+      initialValue="+1 (555) 123-4567"
+    />
+  )
+};
+
+export const Url: Story = {
+  render: () => (
+    <FieldWrapper 
+      Component={UrlField}
+      field={{ label: 'Website', type: 'url' }}
+      initialValue="https://objectui.org"
+    />
+  )
+};
+
+export const Password: Story = {
+  render: () => (
+    <FieldWrapper 
+      Component={PasswordField}
+      field={{ label: 'Secret Key', type: 'password' }}
+      initialValue="supersecret"
+    />
+  )
+};
+
+export const AutoNumber: Story = {
+  render: () => (
+    <FieldWrapper 
+      Component={AutoNumberField}
+      field={{ label: 'Order Number', type: 'autonumber' }}
+      initialValue="ORD-2024-001"
+      readonly={true} 
+    />
+  )
+};
+
+// --- Numbers ---
+
 export const Number: Story = {
   render: () => (
     <FieldWrapper 
@@ -135,26 +197,50 @@ export const Percent: Story = {
   )
 };
 
-export const Boolean: Story = {
+// --- Date & Time ---
+
+export const Date: Story = {
   render: () => (
     <FieldWrapper 
-      Component={BooleanField}
-      field={{ label: 'Is Active?', type: 'boolean' }}
-      initialValue={true}
+      Component={DateField}
+      field={{ label: 'Close Date', type: 'date' }}
+      initialValue={new Date().toISOString()}
     />
   )
 };
 
-export const Date: Story = {
+export const DateTime: Story = {
   render: () => (
     <FieldWrapper 
-      Component={DateField}
-      field={{ label: 'Close Date', type: 'date' }}
+      Component={DateTimeField}
+      field={{ label: 'Meeting Time', type: 'datetime' }}
       initialValue={new Date().toISOString()}
     />
   )
 };
 
+export const Time: Story = {
+  render: () => (
+    <FieldWrapper 
+      Component={TimeField}
+      field={{ label: 'Start Time', type: 'time' }}
+      initialValue="14:30"
+    />
+  )
+};
+
+// --- Selection ---
+
+export const Boolean: Story = {
+  render: () => (
+    <FieldWrapper 
+      Component={BooleanField}
+      field={{ label: 'Is Active?', type: 'boolean' }}
+      initialValue={true}
+    />
+  )
+};
+
 export const Select: Story = {
   render: () => (
     <FieldWrapper 
@@ -175,12 +261,93 @@ export const Select: Story = {
   )
 };
 
-export const Password: Story = {
+export const Lookup: Story = {
   render: () => (
     <FieldWrapper 
-      Component={PasswordField}
-      field={{ label: 'Secret Key', type: 'password' }}
-      initialValue="supersecret"
+      Component={LookupField}
+      field={{ 
+        label: 'Account', 
+        type: 'lookup',
+        options: [
+          { label: 'Acme Corp', value: 'acme' },
+          { label: 'Globex', value: 'globex' },
+          { label: 'Soylent Corp', value: 'soylent' },
+        ] as any
+      }}
+      initialValue="acme"
+    />
+  )
+};
+
+export const MultiSelectLookup: Story = {
+  render: () => (
+    <FieldWrapper 
+      Component={LookupField}
+      field={{ 
+        label: 'Related Accounts', 
+        type: 'lookup',
+        multiple: true,
+        options: [
+          { label: 'Acme Corp', value: 'acme' },
+          { label: 'Globex', value: 'globex' },
+          { label: 'Soylent Corp', value: 'soylent' },
+        ] as any
+      }}
+      initialValue={['acme', 'soylent']}
+    />
+  )
+};
+
+// --- Special ---
+
+export const User: Story = {
+  render: () => (
+    <FieldWrapper 
+      Component={UserField}
+      field={{ label: 'Assigned To', type: 'user' }}
+      initialValue={{ name: 'John Doe', username: 'jdoe' }}
+    />
+  )
+};
+
+export const File: Story = {
+  render: () => (
+    <FieldWrapper 
+      Component={FileField}
+      field={{ label: 'Attachment', type: 'file' }}
+      initialValue={{ name: 'report.pdf', size: 1024000 }}
+    />
+  )
+};
+
+export const Location: Story = {
+  render: () => (
+    <FieldWrapper 
+      Component={LocationField}
+      field={{ label: 'Coordinates', type: 'location' }}
+      initialValue={{ latitude: 37.7749, longitude: -122.4194 }}
+    />
+  )
+};
+
+export const Formula: Story = {
+  render: () => (
+    <FieldWrapper 
+      Component={FormulaField}
+      field={{ label: 'Net Profit', type: 'formula' }}
+      initialValue={5000}
+      readonly
+    />
+  )
+};
+
+export const Summary: Story = {
+  render: () => (
+    <FieldWrapper 
+      Component={SummaryField}
+      field={{ label: 'Total Sales', type: 'summary' }}
+      initialValue={100000}
+      readonly
     />
   )
 };
@@ -200,6 +367,12 @@ export const ReadOnly: Story = {
         initialValue={9999.99}
         readonly={true}
       />
+      <FieldWrapper 
+        Component={UserField}
+        field={{ label: 'Read Only User', type: 'user' }}
+        initialValue={{ name: 'Jane Smith' }}
+        readonly={true}
+      />
     </div>
   )
 };