Skip to content

Commit cee847d

Browse files
hotlonghotlong
authored
Merge pull request #243 from objectstack-ai/copilot/develop-field-type-components
2 parents f6787a4 + e4c0585 commit cee847d

38 files changed

+3743
-22
lines changed

‎apps/site/app/components/ObjectUIProvider.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,15 @@
22

33
// Import components to trigger registration
44
import { initializeComponents } from '@object-ui/components';
5+
import { registerFields } from '@object-ui/fields';
56
import { ComponentRegistry } from '@object-ui/core';
67
import { useEffect } from 'react';
78

89
export function ObjectUIProvider({ children }: { children: React.ReactNode }) {
910
// Explicitly call init to ensure components are registered
1011
useEffect(() => {
1112
initializeComponents();
13+
registerFields();
1214

1315
// Wait a bit for plugins to register, then log
1416
setTimeout(() => {

‎apps/site/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"@monaco-editor/react": "^4.6.0",
1414
"@object-ui/components": "workspace:*",
1515
"@object-ui/core": "workspace:*",
16+
"@object-ui/fields": "workspace:*",
1617
"@object-ui/plugin-aggrid": "workspace:*",
1718
"@object-ui/plugin-calendar": "workspace:*",
1819
"@object-ui/plugin-charts": "workspace:*",

‎content/docs/fields/auto-number.mdx‎

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
---
2+
title: "AutoNumber Field"
3+
description: "Read-only auto-generated sequence number"
4+
---
5+
6+
import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
7+
8+
The AutoNumber Field component displays auto-generated sequence numbers. This is a read-only field where the value is automatically generated by the backend when records are created.
9+
10+
## Basic Usage
11+
12+
<ComponentDemo
13+
schema={{
14+
type: 'auto_number',
15+
name: 'order_number',
16+
label: 'Order Number',
17+
readonly: true,
18+
value: 'ORD-0001'
19+
}}
20+
title="Basic AutoNumber"
21+
/>
22+
23+
## Custom Format
24+
25+
<ComponentDemo
26+
schema={{
27+
type: 'auto_number',
28+
name: 'invoice_id',
29+
label: 'Invoice ID',
30+
format: 'INV-{0000}',
31+
readonly: true,
32+
value: 'INV-1234'
33+
}}
34+
title="Invoice Number Format"
35+
/>
36+
37+
## Date-Based Format
38+
39+
<ComponentDemo
40+
schema={{
41+
type: 'auto_number',
42+
name: 'ticket_id',
43+
label: 'Ticket ID',
44+
format: 'TKT-{YYYY}{MM}-{0000}',
45+
readonly: true,
46+
value: 'TKT-202403-0567'
47+
}}
48+
title="Date-Based Ticket ID"
49+
/>
50+
51+
## Field Schema
52+
53+
```typescript
54+
interface AutoNumberFieldSchema {
55+
type: 'auto_number';
56+
name: string; // Field name/ID
57+
label?: string; // Field label
58+
value?: string | number; // Generated value (read-only)
59+
readonly: true; // Always read-only
60+
className?: string; // Additional CSS classes
61+
62+
// AutoNumber Configuration
63+
format?: string; // Number format template
64+
starting_number?: number; // Starting sequence number
65+
}
66+
```
67+
68+
## Format Templates
69+
70+
Common format patterns:
71+
72+
### Simple Sequential
73+
74+
```typescript
75+
format: '{0000}' // 0001, 0002, 0003...
76+
format: '{00000}' // 00001, 00002, 00003...
77+
```
78+
79+
### With Prefix
80+
81+
```typescript
82+
format: 'ORD-{0000}' // ORD-0001, ORD-0002...
83+
format: 'INV-{00000}' // INV-00001, INV-00002...
84+
format: 'CUST-{000}' // CUST-001, CUST-002...
85+
```
86+
87+
### Date-Based
88+
89+
```typescript
90+
format: '{YYYY}-{0000}' // 2024-0001, 2024-0002...
91+
format: '{YY}{MM}-{000}' // 2403-001, 2403-002...
92+
format: 'ORD-{YYYYMMDD}-{00}' // ORD-20240315-01...
93+
```
94+
95+
### Mixed Format
96+
97+
```typescript
98+
format: 'PO-{YYYY}-{MM}-{0000}' // PO-2024-03-0001
99+
format: '{YY}Q{Q}-{000}' // 24Q1-001, 24Q1-002...
100+
```
101+
102+
## Format Placeholders
103+
104+
- `{0}`, `{00}`, `{000}`, etc. - Sequential number with padding
105+
- `{YYYY}` - Four-digit year (2024)
106+
- `{YY}` - Two-digit year (24)
107+
- `{MM}` - Two-digit month (03)
108+
- `{DD}` - Two-digit day (15)
109+
- `{Q}` - Quarter (1-4)
110+
111+
## Backend Implementation
112+
113+
AutoNumber values are generated on record creation:
114+
115+
```typescript
116+
const generateAutoNumber = (format: string, sequence: number) => {
117+
const now = new Date();
118+
119+
return format
120+
.replace('{YYYY}', now.getFullYear().toString())
121+
.replace('{YY}', now.getFullYear().toString().slice(-2))
122+
.replace('{MM}', (now.getMonth() + 1).toString().padStart(2, '0'))
123+
.replace('{DD}', now.getDate().toString().padStart(2, '0'))
124+
.replace('{Q}', Math.ceil((now.getMonth() + 1) / 3).toString())
125+
.replace(/\{0+\}/, (match) => {
126+
const padding = match.length - 2;
127+
return sequence.toString().padStart(padding, '0');
128+
});
129+
};
130+
131+
// Example usage
132+
generateAutoNumber('ORD-{YYYY}-{0000}', 42);
133+
// Returns: "ORD-2024-0042"
134+
```
135+
136+
## Sequence Management
137+
138+
The backend maintains sequence counters:
139+
140+
```typescript
141+
interface SequenceCounter {
142+
object: string; // Object name
143+
field: string; // Field name
144+
current_value: number; // Current sequence number
145+
prefix?: string; // Optional prefix for partitioning
146+
}
147+
148+
// Increment sequence atomically
149+
const getNextSequence = async (object: string, field: string) => {
150+
return await db.transaction(async (tx) => {
151+
const counter = await tx.findOne('sequences', { object, field });
152+
const nextValue = (counter?.current_value || 0) + 1;
153+
await tx.upsert('sequences', { object, field }, { current_value: nextValue });
154+
return nextValue;
155+
});
156+
};
157+
```
158+
159+
## Use Cases
160+
161+
- **Order Management**: Order numbers, PO numbers
162+
- **Invoicing**: Invoice IDs, receipt numbers
163+
- **Ticketing**: Support ticket IDs, case numbers
164+
- **Customer Management**: Customer IDs, account numbers
165+
- **Inventory**: SKU numbers, serial numbers
166+
- **Document Management**: Document IDs, revision numbers
167+
168+
## Best Practices
169+
170+
1. **Choose appropriate padding**: Use enough digits for expected volume
171+
2. **Include year for long-running systems**: Helps with archival and partitioning
172+
3. **Use meaningful prefixes**: Makes numbers self-documenting
173+
4. **Don't expose internal IDs**: Use auto-numbers for user-facing identifiers
174+
5. **Consider reset policies**: Decide if/when sequences reset (yearly, monthly, etc.)

‎content/docs/fields/datetime.mdx‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
---
2+
title: "DateTime Field"
3+
description: "Date and time input with combined picker"
4+
---
5+
6+
import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
7+
8+
The DateTime Field component provides a combined date and time input for collecting both date and time information in a single field.
9+
10+
## Basic Usage
11+
12+
<ComponentDemo
13+
schema={{
14+
type: 'datetime',
15+
name: 'meeting_time',
16+
label: 'Meeting Time',
17+
placeholder: 'Select date and time...'
18+
}}
19+
title="Basic DateTime Field"
20+
/>
21+
22+
## With Default Value
23+
24+
<ComponentDemo
25+
schema={{
26+
type: 'datetime',
27+
name: 'scheduled_at',
28+
label: 'Scheduled At',
29+
value: '2024-03-15T14:30'
30+
}}
31+
title="With Default Value"
32+
/>
33+
34+
## Required Field
35+
36+
<ComponentDemo
37+
schema={{
38+
type: 'datetime',
39+
name: 'appointment',
40+
label: 'Appointment',
41+
required: true
42+
}}
43+
title="Required DateTime"
44+
/>
45+
46+
## Read-Only
47+
48+
<ComponentDemo
49+
schema={{
50+
type: 'datetime',
51+
name: 'created_at',
52+
label: 'Created At',
53+
value: '2024-03-15T10:30',
54+
readonly: true
55+
}}
56+
title="Read-Only DateTime"
57+
/>
58+
59+
## Field Schema
60+
61+
```typescript
62+
interface DateTimeFieldSchema {
63+
type: 'datetime';
64+
name: string; // Field name/ID
65+
label?: string; // Field label
66+
placeholder?: string; // Placeholder text
67+
value?: string; // Default value (ISO 8601 format)
68+
required?: boolean; // Is field required
69+
readonly?: boolean; // Read-only mode
70+
disabled?: boolean; // Disabled state
71+
className?: string; // Additional CSS classes
72+
73+
// Validation
74+
format?: string; // Display format
75+
min_date?: string | Date; // Minimum date/time
76+
max_date?: string | Date; // Maximum date/time
77+
}
78+
```
79+
80+
## Date Format
81+
82+
The datetime field stores values in ISO 8601 format: `YYYY-MM-DDTHH:mm`
83+
84+
Example: `2024-03-15T14:30` represents March 15, 2024 at 2:30 PM
85+
86+
## Cell Renderer
87+
88+
When used in data tables or grids:
89+
90+
```typescript
91+
import { DateTimeCellRenderer } from '@object-ui/fields';
92+
93+
// Renders: Mar 15, 2024, 02:30 PM
94+
```
95+
96+
## Use Cases
97+
98+
- **Event Scheduling**: Meeting times, appointments
99+
- **Timestamps**: Order placed, task deadline
100+
- **Booking Systems**: Reservation date and time
101+
- **Notifications**: Scheduled notification time

0 commit comments

Comments
 (0)