@object-ui/fields 0.3.1 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (85) hide show
  1. package/dist/fields/src/complex-widgets.test.d.ts +1 -0
  2. package/dist/fields/src/datetime-widgets.test.d.ts +1 -0
  3. package/dist/fields/src/fields.stories.d.ts +56 -0
  4. package/dist/fields/src/index.d.ts +48 -0
  5. package/dist/fields/src/new-widgets.test.d.ts +8 -0
  6. package/dist/fields/src/remaining-widgets.test.d.ts +1 -0
  7. package/dist/fields/src/standard-widgets.test.d.ts +0 -0
  8. package/dist/fields/src/text-rich-widgets.test.d.ts +1 -0
  9. package/dist/fields/src/visual-widgets.test.d.ts +1 -0
  10. package/dist/fields/src/widgets/AddressField.d.ts +16 -0
  11. package/dist/fields/src/widgets/AutoNumberField.d.ts +6 -0
  12. package/dist/fields/src/widgets/AvatarField.d.ts +6 -0
  13. package/dist/fields/src/widgets/CodeField.d.ts +7 -0
  14. package/dist/fields/src/widgets/ColorField.d.ts +6 -0
  15. package/dist/fields/src/widgets/CurrencyField.d.ts +1 -1
  16. package/dist/fields/src/widgets/DateTimeField.d.ts +2 -0
  17. package/dist/fields/src/widgets/FileField.d.ts +2 -0
  18. package/dist/fields/src/widgets/FormulaField.d.ts +6 -0
  19. package/dist/fields/src/widgets/GeolocationField.d.ts +14 -0
  20. package/dist/fields/src/widgets/GridField.d.ts +7 -0
  21. package/dist/fields/src/widgets/ImageField.d.ts +2 -0
  22. package/dist/fields/src/widgets/LocationField.d.ts +2 -0
  23. package/dist/fields/src/widgets/LookupField.d.ts +1 -1
  24. package/dist/fields/src/widgets/MasterDetailField.d.ts +14 -0
  25. package/dist/fields/src/widgets/ObjectField.d.ts +6 -0
  26. package/dist/fields/src/widgets/PasswordField.d.ts +2 -0
  27. package/dist/fields/src/widgets/PercentField.d.ts +2 -0
  28. package/dist/fields/src/widgets/QRCodeField.d.ts +6 -0
  29. package/dist/fields/src/widgets/RatingField.d.ts +6 -0
  30. package/dist/fields/src/widgets/SignatureField.d.ts +6 -0
  31. package/dist/fields/src/widgets/SliderField.d.ts +6 -0
  32. package/dist/fields/src/widgets/SummaryField.d.ts +6 -0
  33. package/dist/fields/src/widgets/TimeField.d.ts +2 -0
  34. package/dist/fields/src/widgets/UserField.d.ts +6 -0
  35. package/dist/fields/src/widgets/VectorField.d.ts +6 -0
  36. package/dist/fields/src/widgets/types.d.ts +2 -0
  37. package/dist/index.cjs +4 -2
  38. package/dist/index.js +2003 -618
  39. package/package.json +10 -8
  40. package/src/complex-widgets.test.tsx +146 -0
  41. package/src/datetime-widgets.test.tsx +93 -0
  42. package/src/fields.stories.tsx +566 -0
  43. package/src/index.tsx +303 -68
  44. package/src/new-widgets.test.tsx +302 -0
  45. package/src/remaining-widgets.test.tsx +172 -0
  46. package/src/standard-widgets.test.tsx +278 -0
  47. package/src/text-rich-widgets.test.tsx +104 -0
  48. package/src/visual-widgets.test.tsx +97 -0
  49. package/src/widgets/AddressField.tsx +112 -0
  50. package/src/widgets/AutoNumberField.tsx +16 -0
  51. package/src/widgets/AvatarField.tsx +110 -0
  52. package/src/widgets/BooleanField.tsx +19 -11
  53. package/src/widgets/CodeField.tsx +34 -0
  54. package/src/widgets/ColorField.tsx +44 -0
  55. package/src/widgets/CurrencyField.tsx +8 -7
  56. package/src/widgets/DateField.tsx +5 -2
  57. package/src/widgets/DateTimeField.tsx +28 -0
  58. package/src/widgets/EmailField.tsx +7 -3
  59. package/src/widgets/FileField.tsx +114 -0
  60. package/src/widgets/FormulaField.tsx +31 -0
  61. package/src/widgets/GeolocationField.tsx +151 -0
  62. package/src/widgets/GridField.tsx +63 -0
  63. package/src/widgets/ImageField.tsx +108 -0
  64. package/src/widgets/LocationField.tsx +46 -0
  65. package/src/widgets/LookupField.tsx +5 -5
  66. package/src/widgets/MasterDetailField.tsx +131 -0
  67. package/src/widgets/NumberField.tsx +8 -4
  68. package/src/widgets/ObjectField.tsx +85 -0
  69. package/src/widgets/PasswordField.tsx +45 -0
  70. package/src/widgets/PercentField.tsx +49 -0
  71. package/src/widgets/PhoneField.tsx +7 -3
  72. package/src/widgets/QRCodeField.tsx +96 -0
  73. package/src/widgets/RatingField.tsx +66 -0
  74. package/src/widgets/RichTextField.tsx +5 -5
  75. package/src/widgets/SelectField.tsx +7 -5
  76. package/src/widgets/SignatureField.tsx +140 -0
  77. package/src/widgets/SliderField.tsx +39 -0
  78. package/src/widgets/SummaryField.tsx +29 -0
  79. package/src/widgets/TextAreaField.tsx +9 -6
  80. package/src/widgets/TextField.tsx +13 -8
  81. package/src/widgets/TimeField.tsx +22 -0
  82. package/src/widgets/UrlField.tsx +7 -3
  83. package/src/widgets/UserField.tsx +88 -0
  84. package/src/widgets/VectorField.tsx +28 -0
  85. package/src/widgets/types.ts +2 -0
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,56 @@
1
+ import { StoryObj } from '@storybook/react';
2
+ /**
3
+ * **Field Widgets** from `@object-ui/fields`.
4
+ *
5
+ * These components handle data formatting, validation, and display logic for specific data types.
6
+ * They are typically used within `ObjectForm` or `ObjectGrid` but can be used standalone.
7
+ *
8
+ * Note: These widgets implement the `FieldWidgetProps` interface.
9
+ */
10
+ declare const meta: {
11
+ title: string;
12
+ parameters: {
13
+ layout: string;
14
+ };
15
+ tags: string[];
16
+ };
17
+ export default meta;
18
+ type Story = StoryObj<any>;
19
+ export declare const Text: Story;
20
+ export declare const TextArea: Story;
21
+ export declare const Email: Story;
22
+ export declare const Phone: Story;
23
+ export declare const Url: Story;
24
+ export declare const Password: Story;
25
+ export declare const AutoNumber: Story;
26
+ export declare const Number: Story;
27
+ export declare const Currency: Story;
28
+ export declare const Percent: Story;
29
+ export declare const Date: Story;
30
+ export declare const DateTime: Story;
31
+ export declare const Time: Story;
32
+ export declare const Boolean: Story;
33
+ export declare const Select: Story;
34
+ export declare const Lookup: Story;
35
+ export declare const MultiSelectLookup: Story;
36
+ export declare const User: Story;
37
+ export declare const File: Story;
38
+ export declare const Location: Story;
39
+ export declare const Formula: Story;
40
+ export declare const Summary: Story;
41
+ export declare const ReadOnly: Story;
42
+ export declare const RichText: Story;
43
+ export declare const Image: Story;
44
+ export declare const Color: Story;
45
+ export declare const Slider: Story;
46
+ export declare const Rating: Story;
47
+ export declare const Code: Story;
48
+ export declare const Avatar: Story;
49
+ export declare const Signature: Story;
50
+ export declare const QRCode: Story;
51
+ export declare const Address: Story;
52
+ export declare const Geolocation: Story;
53
+ export declare const Object: Story;
54
+ export declare const Grid: Story;
55
+ export declare const MasterDetail: Story;
56
+ export declare const Vector: Story;
@@ -127,6 +127,30 @@ export declare function buildValidationRules(field: any): any;
127
127
  * @returns Whether the condition is met
128
128
  */
129
129
  export declare function evaluateCondition(condition: any, formData: any): boolean;
130
+ /**
131
+ * Register a specific field type lazily
132
+ * @param fieldType - The field type to register (e.g., 'text', 'number')
133
+ *
134
+ * @example
135
+ * // Register only the text field
136
+ * registerField('text');
137
+ */
138
+ export declare function registerField(fieldType: string): void;
139
+ /**
140
+ * Register all field types (for backward compatibility)
141
+ * This function auto-registers all field widgets on import.
142
+ *
143
+ * For better tree-shaking, use registerField() to register only needed fields.
144
+ *
145
+ * @example
146
+ * // Register all fields at once
147
+ * registerAllFields();
148
+ */
149
+ export declare function registerAllFields(): void;
150
+ /**
151
+ * Legacy function - kept for backward compatibility
152
+ * @deprecated Use registerAllFields() instead
153
+ */
130
154
  export declare function registerFields(): void;
131
155
  export * from './widgets/types';
132
156
  export * from './widgets/TextField';
@@ -134,10 +158,34 @@ export * from './widgets/NumberField';
134
158
  export * from './widgets/BooleanField';
135
159
  export * from './widgets/SelectField';
136
160
  export * from './widgets/DateField';
161
+ export * from './widgets/DateTimeField';
162
+ export * from './widgets/TimeField';
137
163
  export * from './widgets/EmailField';
138
164
  export * from './widgets/PhoneField';
139
165
  export * from './widgets/UrlField';
140
166
  export * from './widgets/CurrencyField';
167
+ export * from './widgets/PercentField';
168
+ export * from './widgets/PasswordField';
141
169
  export * from './widgets/TextAreaField';
142
170
  export * from './widgets/RichTextField';
143
171
  export * from './widgets/LookupField';
172
+ export * from './widgets/FileField';
173
+ export * from './widgets/ImageField';
174
+ export * from './widgets/LocationField';
175
+ export * from './widgets/FormulaField';
176
+ export * from './widgets/SummaryField';
177
+ export * from './widgets/AutoNumberField';
178
+ export * from './widgets/UserField';
179
+ export * from './widgets/ObjectField';
180
+ export * from './widgets/VectorField';
181
+ export * from './widgets/GridField';
182
+ export * from './widgets/ColorField';
183
+ export * from './widgets/SliderField';
184
+ export * from './widgets/RatingField';
185
+ export * from './widgets/CodeField';
186
+ export * from './widgets/AvatarField';
187
+ export * from './widgets/AddressField';
188
+ export * from './widgets/GeolocationField';
189
+ export * from './widgets/SignatureField';
190
+ export * from './widgets/QRCodeField';
191
+ export * from './widgets/MasterDetailField';
@@ -0,0 +1,8 @@
1
+ /**
2
+ * ObjectUI
3
+ * Copyright (c) 2024-present ObjectStack Inc.
4
+ *
5
+ * This source code is licensed under the MIT license found in the
6
+ * LICENSE file in the root directory of this source tree.
7
+ */
8
+ export {};
@@ -0,0 +1 @@
1
+ export {};
File without changes
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,16 @@
1
+ import { FieldWidgetProps } from './types';
2
+ /**
3
+ * Address data structure
4
+ */
5
+ export interface AddressValue {
6
+ street?: string;
7
+ city?: string;
8
+ state?: string;
9
+ zipCode?: string;
10
+ country?: string;
11
+ }
12
+ /**
13
+ * Address field widget - provides a structured address input
14
+ * Supports street, city, state, zip code, and country
15
+ */
16
+ export declare function AddressField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<AddressValue>): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,6 @@
1
+ import { FieldWidgetProps } from './types';
2
+ /**
3
+ * AutoNumberField - Read-only auto-generated field
4
+ * Values are automatically generated by the system and cannot be edited
5
+ */
6
+ export declare function AutoNumberField({ value, field, ...props }: FieldWidgetProps<string | number>): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,6 @@
1
+ import { FieldWidgetProps } from './types';
2
+ /**
3
+ * Avatar field widget - provides an avatar/profile picture uploader
4
+ * Supports image URLs or file uploads
5
+ */
6
+ export declare function AvatarField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<string>): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,7 @@
1
+ import { FieldWidgetProps } from './types';
2
+ /**
3
+ * Code field widget - provides a code editor with syntax highlighting
4
+ * Uses a simple textarea with monospace font
5
+ * For advanced code editing, use the @object-ui/plugin-editor component
6
+ */
7
+ export declare function CodeField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<string>): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,6 @@
1
+ import { FieldWidgetProps } from './types';
2
+ /**
3
+ * Color field widget - provides a color picker input
4
+ * Supports hex color values (e.g., #ff0000)
5
+ */
6
+ export declare function ColorField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<string>): import("react/jsx-runtime").JSX.Element;
@@ -1,2 +1,2 @@
1
1
  import { FieldWidgetProps } from './types';
2
- export declare function CurrencyField({ value, onChange, field, readonly, errorMessage, ...props }: FieldWidgetProps<number>): import("react/jsx-runtime").JSX.Element;
2
+ export declare function CurrencyField({ value, onChange, field, readonly, errorMessage, className, ...props }: FieldWidgetProps<number>): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,2 @@
1
+ import { FieldWidgetProps } from './types';
2
+ export declare function DateTimeField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<string>): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,2 @@
1
+ import { FieldWidgetProps } from './types';
2
+ export declare function FileField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<any>): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,6 @@
1
+ import { FieldWidgetProps } from './types';
2
+ /**
3
+ * FormulaField - Read-only computed field
4
+ * Values are computed on the backend and cannot be edited
5
+ */
6
+ export declare function FormulaField({ value, field, ...props }: FieldWidgetProps<any>): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,14 @@
1
+ import { FieldWidgetProps } from './types';
2
+ /**
3
+ * Geolocation data structure
4
+ */
5
+ export interface GeolocationValue {
6
+ latitude?: number;
7
+ longitude?: number;
8
+ accuracy?: number;
9
+ }
10
+ /**
11
+ * Geolocation field widget - provides a location picker with coordinates
12
+ * Supports manual entry and browser geolocation API
13
+ */
14
+ export declare function GeolocationField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<GeolocationValue>): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,7 @@
1
+ import { FieldWidgetProps } from './types';
2
+ /**
3
+ * GridField - Sub-table/grid data display
4
+ * Shows tabular data in a simplified format
5
+ * For full editing capabilities, use the grid plugin
6
+ */
7
+ export declare function GridField({ value, field, readonly, ...props }: FieldWidgetProps<any[]>): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,2 @@
1
+ import { FieldWidgetProps } from './types';
2
+ export declare function ImageField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<any>): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,2 @@
1
+ import { FieldWidgetProps } from './types';
2
+ export declare function LocationField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<any>): import("react/jsx-runtime").JSX.Element;
@@ -3,4 +3,4 @@ import { FieldWidgetProps } from './types';
3
3
  * Lookup field for selecting related records
4
4
  * Supports single and multi-select with search
5
5
  */
6
- export declare function LookupField({ value, onChange, field, readonly }: FieldWidgetProps<any>): import("react/jsx-runtime").JSX.Element;
6
+ export declare function LookupField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<any>): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,14 @@
1
+ import { FieldWidgetProps } from './types';
2
+ /**
3
+ * Master-Detail relationship data structure
4
+ */
5
+ export interface MasterDetailValue {
6
+ id: string;
7
+ label: string;
8
+ [key: string]: any;
9
+ }
10
+ /**
11
+ * Master-Detail field widget - manages one-to-many relationships
12
+ * Displays related records with add/remove capabilities
13
+ */
14
+ export declare function MasterDetailField({ value, onChange, field, readonly, className, ...props }: FieldWidgetProps<MasterDetailValue[]>): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,6 @@
1
+ import { FieldWidgetProps } from './types';
2
+ /**
3
+ * ObjectField - JSON object editor
4
+ * Allows editing structured JSON data
5
+ */
6
+ export declare function ObjectField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<any>): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,2 @@
1
+ import { FieldWidgetProps } from './types';
2
+ export declare function PasswordField({ value, onChange, field, readonly, className, ...props }: FieldWidgetProps<string>): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,2 @@
1
+ import { FieldWidgetProps } from './types';
2
+ export declare function PercentField({ value, onChange, field, readonly, errorMessage, className, ...props }: FieldWidgetProps<number>): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,6 @@
1
+ import { FieldWidgetProps } from './types';
2
+ /**
3
+ * QR Code field widget - generates QR codes from text
4
+ * Uses a simple SVG-based QR code generator
5
+ */
6
+ export declare function QRCodeField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<string>): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,6 @@
1
+ import { FieldWidgetProps } from './types';
2
+ /**
3
+ * Rating field widget - provides a star rating input
4
+ * Supports numeric values from 0 to max (default 5)
5
+ */
6
+ export declare function RatingField({ value, onChange, field, readonly, className, ...props }: FieldWidgetProps<number>): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,6 @@
1
+ import { FieldWidgetProps } from './types';
2
+ /**
3
+ * Signature field widget - provides a signature pad for capturing signatures
4
+ * Outputs signature as a base64 PNG image
5
+ */
6
+ export declare function SignatureField({ value, onChange, readonly }: FieldWidgetProps<string>): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,6 @@
1
+ import { FieldWidgetProps } from './types';
2
+ /**
3
+ * Slider field widget - provides a range slider input
4
+ * Supports numeric values with configurable min, max, and step
5
+ */
6
+ export declare function SliderField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<number>): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,6 @@
1
+ import { FieldWidgetProps } from './types';
2
+ /**
3
+ * SummaryField - Read-only aggregation field
4
+ * Values are aggregated from related records and cannot be edited
5
+ */
6
+ export declare function SummaryField({ value, field, ...props }: FieldWidgetProps<any>): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,2 @@
1
+ import { FieldWidgetProps } from './types';
2
+ export declare function TimeField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<string>): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,6 @@
1
+ import { FieldWidgetProps } from './types';
2
+ /**
3
+ * UserField - User/Owner selector field
4
+ * Allows selecting one or multiple users
5
+ */
6
+ export declare function UserField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<any>): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,6 @@
1
+ import { FieldWidgetProps } from './types';
2
+ /**
3
+ * VectorField - Vector/embedding data display
4
+ * Shows vector embeddings in a read-only format
5
+ */
6
+ export declare function VectorField({ value, field, ...props }: FieldWidgetProps<number[]>): import("react/jsx-runtime").JSX.Element;
@@ -4,6 +4,8 @@ export type FieldWidgetProps<T = any> = {
4
4
  onChange: (val: T) => void;
5
5
  field: FieldMetadata;
6
6
  readonly?: boolean;
7
+ disabled?: boolean;
7
8
  className?: string;
8
9
  errorMessage?: string;
10
+ [key: string]: any;
9
11
  };