@dxos/react-ui-form 0.8.4-main.b97322e → 0.8.4-main.bc674ce
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.
- package/dist/lib/browser/index.mjs +2220 -2058
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +2220 -2058
- package/dist/lib/node-esm/index.mjs.map +4 -4
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/components/ControlSection/ControlSection.d.ts +4 -4
- package/dist/types/src/components/ControlSection/ControlSection.d.ts.map +1 -1
- package/dist/types/src/components/ControlSection/ControlSection.stories.d.ts +84 -5
- package/dist/types/src/components/ControlSection/ControlSection.stories.d.ts.map +1 -1
- package/dist/types/src/components/FieldEditor/FieldEditor.d.ts +6 -5
- package/dist/types/src/components/FieldEditor/FieldEditor.d.ts.map +1 -1
- package/dist/types/src/components/FieldEditor/FieldEditor.stories.d.ts +82 -5
- package/dist/types/src/components/FieldEditor/FieldEditor.stories.d.ts.map +1 -1
- package/dist/types/src/components/Form/Form-old.stories.d.ts +131 -0
- package/dist/types/src/components/Form/Form-old.stories.d.ts.map +1 -0
- package/dist/types/src/components/Form/Form.d.ts +81 -25
- package/dist/types/src/components/Form/Form.d.ts.map +1 -1
- package/dist/types/src/components/Form/Form.stories.d.ts +127 -55
- package/dist/types/src/components/Form/Form.stories.d.ts.map +1 -1
- package/dist/types/src/components/Form/FormField.d.ts +37 -0
- package/dist/types/src/components/Form/FormField.d.ts.map +1 -0
- package/dist/types/src/components/Form/FormFieldComponent.d.ts +78 -0
- package/dist/types/src/components/Form/FormFieldComponent.d.ts.map +1 -0
- package/dist/types/src/components/Form/FormFieldComponent.stories.d.ts +9 -0
- package/dist/types/src/components/Form/FormFieldComponent.stories.d.ts.map +1 -0
- package/dist/types/src/components/Form/FormFieldSet.d.ts +19 -0
- package/dist/types/src/components/Form/FormFieldSet.d.ts.map +1 -0
- package/dist/types/src/components/Form/fields/ArrayField.d.ts +18 -0
- package/dist/types/src/components/Form/fields/ArrayField.d.ts.map +1 -0
- package/dist/types/src/components/Form/fields/BooleanField.d.ts +4 -0
- package/dist/types/src/components/Form/fields/BooleanField.d.ts.map +1 -0
- package/dist/types/src/components/Form/fields/GeoPointField.d.ts +5 -0
- package/dist/types/src/components/Form/fields/GeoPointField.d.ts.map +1 -0
- package/dist/types/src/components/Form/fields/MarkdownField.d.ts +4 -0
- package/dist/types/src/components/Form/fields/MarkdownField.d.ts.map +1 -0
- package/dist/types/src/components/Form/fields/NumberField.d.ts +4 -0
- package/dist/types/src/components/Form/fields/NumberField.d.ts.map +1 -0
- package/dist/types/src/components/Form/fields/RefField.d.ts +14 -0
- package/dist/types/src/components/Form/fields/RefField.d.ts.map +1 -0
- package/dist/types/src/components/Form/fields/SelectField.d.ts +10 -0
- package/dist/types/src/components/Form/fields/SelectField.d.ts.map +1 -0
- package/dist/types/src/components/Form/fields/SelectOptionField.d.ts +5 -0
- package/dist/types/src/components/Form/fields/SelectOptionField.d.ts.map +1 -0
- package/dist/types/src/components/Form/fields/SelectOptionField.stories.d.ts +82 -0
- package/dist/types/src/components/Form/fields/SelectOptionField.stories.d.ts.map +1 -0
- package/dist/types/src/components/Form/fields/TextAreaField.d.ts +4 -0
- package/dist/types/src/components/Form/fields/TextAreaField.d.ts.map +1 -0
- package/dist/types/src/components/Form/fields/TextField.d.ts +4 -0
- package/dist/types/src/components/Form/fields/TextField.d.ts.map +1 -0
- package/dist/types/src/components/Form/fields/TupleField.d.ts +6 -0
- package/dist/types/src/components/Form/fields/TupleField.d.ts.map +1 -0
- package/dist/types/src/components/Form/fields/index.d.ts +12 -0
- package/dist/types/src/components/Form/fields/index.d.ts.map +1 -0
- package/dist/types/src/components/Form/index.d.ts +2 -4
- package/dist/types/src/components/Form/index.d.ts.map +1 -1
- package/dist/types/src/components/ObjectPicker/ObjectPicker.d.ts +46 -0
- package/dist/types/src/components/ObjectPicker/ObjectPicker.d.ts.map +1 -0
- package/dist/types/src/components/ObjectPicker/ObjectPicker.stories.d.ts +85 -0
- package/dist/types/src/components/ObjectPicker/ObjectPicker.stories.d.ts.map +1 -0
- package/dist/types/src/components/ObjectPicker/index.d.ts +2 -0
- package/dist/types/src/components/ObjectPicker/index.d.ts.map +1 -0
- package/dist/types/src/components/ViewEditor/ViewEditor.d.ts +21 -9
- package/dist/types/src/components/ViewEditor/ViewEditor.d.ts.map +1 -1
- package/dist/types/src/components/ViewEditor/ViewEditor.stories.d.ts +83 -8
- package/dist/types/src/components/ViewEditor/ViewEditor.stories.d.ts.map +1 -1
- package/dist/types/src/components/index.d.ts +1 -1
- package/dist/types/src/components/index.d.ts.map +1 -1
- package/dist/types/src/components/testing.d.ts +4 -3
- package/dist/types/src/components/testing.d.ts.map +1 -1
- package/dist/types/src/hooks/index.d.ts +2 -3
- package/dist/types/src/hooks/index.d.ts.map +1 -1
- package/dist/types/src/hooks/useFormHandler.d.ts +82 -0
- package/dist/types/src/hooks/useFormHandler.d.ts.map +1 -0
- package/dist/types/src/hooks/useKeyHandler.d.ts +6 -0
- package/dist/types/src/hooks/useKeyHandler.d.ts.map +1 -0
- package/dist/types/src/translations.d.ts +19 -10
- package/dist/types/src/translations.d.ts.map +1 -1
- package/dist/types/src/util/echo.d.ts +6 -0
- package/dist/types/src/util/echo.d.ts.map +1 -0
- package/dist/types/src/util/field.d.ts +3 -3
- package/dist/types/src/util/field.d.ts.map +1 -1
- package/dist/types/src/util/formatting.d.ts +2 -2
- package/dist/types/src/util/formatting.d.ts.map +1 -1
- package/dist/types/src/util/index.d.ts +2 -1
- package/dist/types/src/util/index.d.ts.map +1 -1
- package/dist/types/src/util/properties.d.ts +7 -0
- package/dist/types/src/util/properties.d.ts.map +1 -0
- package/dist/types/src/util/refs.d.ts +2 -3
- package/dist/types/src/util/refs.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +51 -40
- package/src/components/ControlSection/ControlSection.stories.tsx +11 -14
- package/src/components/ControlSection/ControlSection.tsx +30 -16
- package/src/components/FieldEditor/FieldEditor.stories.tsx +52 -31
- package/src/components/FieldEditor/FieldEditor.test.tsx +3 -2
- package/src/components/FieldEditor/FieldEditor.tsx +86 -81
- package/src/components/Form/Form-old.stories.tsx +314 -0
- package/src/components/Form/Form.stories.tsx +155 -219
- package/src/components/Form/Form.tsx +320 -96
- package/src/components/Form/FormField.tsx +286 -0
- package/src/components/Form/FormFieldComponent.stories.tsx +65 -0
- package/src/components/Form/FormFieldComponent.tsx +174 -0
- package/src/components/Form/FormFieldSet.tsx +125 -0
- package/src/components/Form/README.md +3 -0
- package/src/components/Form/fields/ArrayField.tsx +151 -0
- package/src/components/Form/fields/BooleanField.tsx +22 -0
- package/src/components/Form/fields/GeoPointField.tsx +120 -0
- package/src/components/Form/fields/MarkdownField.tsx +78 -0
- package/src/components/Form/fields/NumberField.tsx +39 -0
- package/src/components/Form/fields/RefField.tsx +181 -0
- package/src/components/Form/fields/SelectField.tsx +65 -0
- package/src/components/Form/{custom/SelectOptionsInput.stories.tsx → fields/SelectOptionField.stories.tsx} +25 -22
- package/src/components/Form/{custom/SelectOptionsInput.tsx → fields/SelectOptionField.tsx} +47 -42
- package/src/components/Form/fields/TextAreaField.tsx +38 -0
- package/src/components/Form/fields/TextField.tsx +38 -0
- package/src/components/Form/{custom/TupleInput.tsx → fields/TupleField.tsx} +16 -9
- package/src/components/Form/fields/index.ts +15 -0
- package/src/components/Form/index.ts +3 -4
- package/src/components/ObjectPicker/ObjectPicker.stories.tsx +214 -0
- package/src/components/ObjectPicker/ObjectPicker.tsx +175 -0
- package/src/components/ObjectPicker/index.ts +5 -0
- package/src/components/ViewEditor/ViewEditor.stories.tsx +137 -61
- package/src/components/ViewEditor/ViewEditor.test.tsx +19 -17
- package/src/components/ViewEditor/ViewEditor.tsx +324 -203
- package/src/components/index.ts +1 -2
- package/src/components/testing.tsx +19 -11
- package/src/hooks/index.ts +2 -3
- package/src/hooks/useFormHandler.ts +362 -0
- package/src/hooks/useKeyHandler.tsx +37 -0
- package/src/translations.ts +21 -12
- package/src/util/echo.ts +25 -0
- package/src/util/field.ts +33 -43
- package/src/util/formatting.ts +22 -22
- package/src/util/index.ts +2 -1
- package/src/util/properties.ts +18 -0
- package/src/util/refs.ts +12 -18
- package/dist/types/src/components/Form/ArrayField.d.ts +0 -16
- package/dist/types/src/components/Form/ArrayField.d.ts.map +0 -1
- package/dist/types/src/components/Form/Defaults.d.ts +0 -14
- package/dist/types/src/components/Form/Defaults.d.ts.map +0 -1
- package/dist/types/src/components/Form/FormActions.d.ts +0 -9
- package/dist/types/src/components/Form/FormActions.d.ts.map +0 -1
- package/dist/types/src/components/Form/FormContent.d.ts +0 -57
- package/dist/types/src/components/Form/FormContent.d.ts.map +0 -1
- package/dist/types/src/components/Form/FormContext.d.ts +0 -23
- package/dist/types/src/components/Form/FormContext.d.ts.map +0 -1
- package/dist/types/src/components/Form/Input.d.ts +0 -26
- package/dist/types/src/components/Form/Input.d.ts.map +0 -1
- package/dist/types/src/components/Form/RefField.d.ts +0 -12
- package/dist/types/src/components/Form/RefField.d.ts.map +0 -1
- package/dist/types/src/components/Form/custom/GeoPointInput.d.ts +0 -4
- package/dist/types/src/components/Form/custom/GeoPointInput.d.ts.map +0 -1
- package/dist/types/src/components/Form/custom/SelectOptionsInput.d.ts +0 -4
- package/dist/types/src/components/Form/custom/SelectOptionsInput.d.ts.map +0 -1
- package/dist/types/src/components/Form/custom/SelectOptionsInput.stories.d.ts +0 -7
- package/dist/types/src/components/Form/custom/SelectOptionsInput.stories.d.ts.map +0 -1
- package/dist/types/src/components/Form/custom/TupleInput.d.ts +0 -6
- package/dist/types/src/components/Form/custom/TupleInput.d.ts.map +0 -1
- package/dist/types/src/components/Form/custom/index.d.ts +0 -4
- package/dist/types/src/components/Form/custom/index.d.ts.map +0 -1
- package/dist/types/src/components/Form/factory.d.ts +0 -8
- package/dist/types/src/components/Form/factory.d.ts.map +0 -1
- package/dist/types/src/components/deprecated/Form.d.ts +0 -15
- package/dist/types/src/components/deprecated/Form.d.ts.map +0 -1
- package/dist/types/src/components/deprecated/Form.stories.d.ts +0 -13
- package/dist/types/src/components/deprecated/Form.stories.d.ts.map +0 -1
- package/dist/types/src/components/deprecated/FormInput.d.ts +0 -16
- package/dist/types/src/components/deprecated/FormInput.d.ts.map +0 -1
- package/dist/types/src/components/deprecated/index.d.ts +0 -2
- package/dist/types/src/components/deprecated/index.d.ts.map +0 -1
- package/dist/types/src/hooks/useForm.d.ts +0 -67
- package/dist/types/src/hooks/useForm.d.ts.map +0 -1
- package/dist/types/src/hooks/useQueryRefOptions.d.ts +0 -23
- package/dist/types/src/hooks/useQueryRefOptions.d.ts.map +0 -1
- package/dist/types/src/hooks/useRefQueryLookupHandler.d.ts +0 -8
- package/dist/types/src/hooks/useRefQueryLookupHandler.d.ts.map +0 -1
- package/dist/types/src/util/schema.d.ts +0 -3
- package/dist/types/src/util/schema.d.ts.map +0 -1
- package/src/components/Form/ArrayField.tsx +0 -124
- package/src/components/Form/Defaults.tsx +0 -203
- package/src/components/Form/FormActions.tsx +0 -53
- package/src/components/Form/FormContent.tsx +0 -240
- package/src/components/Form/FormContext.tsx +0 -110
- package/src/components/Form/Input.tsx +0 -51
- package/src/components/Form/RefField.tsx +0 -213
- package/src/components/Form/custom/GeoPointInput.tsx +0 -72
- package/src/components/Form/custom/index.ts +0 -7
- package/src/components/Form/factory.tsx +0 -31
- package/src/components/deprecated/Form.stories.tsx +0 -62
- package/src/components/deprecated/Form.tsx +0 -119
- package/src/components/deprecated/FormInput.tsx +0 -71
- package/src/components/deprecated/index.ts +0 -5
- package/src/hooks/useForm.ts +0 -291
- package/src/hooks/useQueryRefOptions.ts +0 -53
- package/src/hooks/useRefQueryLookupHandler.ts +0 -39
- package/src/util/schema.ts +0 -14
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
import { type StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import * as Schema from 'effect/Schema';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { type AnyProperties } from '@dxos/echo/internal';
|
|
5
|
+
import { type FormRootProps } from './Form';
|
|
6
|
+
type StoryProps<T extends AnyProperties> = {
|
|
7
|
+
debug?: boolean;
|
|
8
|
+
schema: Schema.Schema.AnyNoContext;
|
|
9
|
+
} & FormRootProps<T>;
|
|
10
|
+
declare const meta: {
|
|
11
|
+
title: string;
|
|
12
|
+
component: any;
|
|
13
|
+
render: <T extends AnyProperties = any>({ debug, schema, values: valuesProp, ...props }: StoryProps<T>) => React.JSX.Element;
|
|
14
|
+
decorators: import("@storybook/react").Decorator[];
|
|
15
|
+
parameters: {
|
|
16
|
+
layout: string;
|
|
17
|
+
translations: [{
|
|
18
|
+
readonly 'en-US': {
|
|
19
|
+
readonly "@dxos/react-ui-form": {
|
|
20
|
+
readonly 'fields label': "Fields";
|
|
21
|
+
readonly 'hidden fields label': "Hidden Fields";
|
|
22
|
+
readonly 'empty readonly ref field label': "(none)";
|
|
23
|
+
readonly 'add property button label': "Add property";
|
|
24
|
+
readonly 'field property label': "Property";
|
|
25
|
+
readonly 'field property placeholder': "Property name";
|
|
26
|
+
readonly 'field format label': "Type";
|
|
27
|
+
readonly 'field path label': "Field path";
|
|
28
|
+
readonly 'add field': "Add field";
|
|
29
|
+
readonly 'delete field': "Delete field";
|
|
30
|
+
readonly 'field limit reached': "Maximum number of fields reached";
|
|
31
|
+
readonly 'boolean input true value': "Yes";
|
|
32
|
+
readonly 'boolean input false value': "No";
|
|
33
|
+
readonly 'show field label': "Show field";
|
|
34
|
+
readonly 'hide field label': "Hide field";
|
|
35
|
+
readonly 'delete field label': "Delete field";
|
|
36
|
+
readonly 'ref field combobox input placeholder': "Search…";
|
|
37
|
+
readonly 'ref field placeholder_one': "Select…";
|
|
38
|
+
readonly 'ref field placeholder_other': "Select items…";
|
|
39
|
+
readonly 'example placeholder': "Example";
|
|
40
|
+
readonly 'latitude placeholder': "Latitude (e.g., 40.7128)";
|
|
41
|
+
readonly 'longitude placeholder': "Longitude (e.g., -74.0060)";
|
|
42
|
+
readonly 'cancel button label': "Cancel";
|
|
43
|
+
readonly 'save button label': "Save";
|
|
44
|
+
readonly 'format boolean': "Boolean";
|
|
45
|
+
readonly 'format currency': "Currency";
|
|
46
|
+
readonly 'format date': "Date";
|
|
47
|
+
readonly 'format date-time': "DateTime";
|
|
48
|
+
readonly 'format did': "DID";
|
|
49
|
+
readonly 'format duration': "Duration";
|
|
50
|
+
readonly 'format dxn': "DXN";
|
|
51
|
+
readonly 'format email': "Email";
|
|
52
|
+
readonly 'format formula': "Formula";
|
|
53
|
+
readonly 'format hostname': "Hostname";
|
|
54
|
+
readonly 'format integer': "Integer";
|
|
55
|
+
readonly 'format json': "JSON";
|
|
56
|
+
readonly 'format lnglat': "Geopoint";
|
|
57
|
+
readonly 'format markdown': "Markdown";
|
|
58
|
+
readonly 'format percent': "Percent";
|
|
59
|
+
readonly 'format ref': "Reference";
|
|
60
|
+
readonly 'format regex': "RegExp";
|
|
61
|
+
readonly 'format string': "String";
|
|
62
|
+
readonly 'format single-select': "Select";
|
|
63
|
+
readonly 'format multi-select': "Multi-select";
|
|
64
|
+
readonly 'format text': "Long text";
|
|
65
|
+
readonly 'format time': "Time";
|
|
66
|
+
readonly 'format timestamp': "Timestamp";
|
|
67
|
+
readonly 'format user': "User";
|
|
68
|
+
readonly 'format number': "Number";
|
|
69
|
+
readonly 'format uri': "URI";
|
|
70
|
+
readonly 'format url': "URL";
|
|
71
|
+
readonly 'format uuid': "UUID";
|
|
72
|
+
readonly 'latitude label': "Latitude";
|
|
73
|
+
readonly 'longitude label': "Longitude";
|
|
74
|
+
readonly 'select option label': "Label";
|
|
75
|
+
readonly 'select option label placeholder': "Option label";
|
|
76
|
+
readonly 'select option color': "Color";
|
|
77
|
+
readonly 'select option delete': "Delete";
|
|
78
|
+
readonly 'select option add': "Add option";
|
|
79
|
+
readonly 'system schema title': "System type";
|
|
80
|
+
readonly 'system schema description': "System type: cannot add or remove fields.";
|
|
81
|
+
};
|
|
82
|
+
};
|
|
83
|
+
}];
|
|
84
|
+
};
|
|
85
|
+
argTypes: {
|
|
86
|
+
readonly: {
|
|
87
|
+
control: "boolean";
|
|
88
|
+
description: string;
|
|
89
|
+
};
|
|
90
|
+
};
|
|
91
|
+
};
|
|
92
|
+
export default meta;
|
|
93
|
+
type Story = StoryObj<typeof meta>;
|
|
94
|
+
export declare const Default: Story;
|
|
95
|
+
export declare const Organization: Story;
|
|
96
|
+
export declare const OrganizationAutoSave: Story;
|
|
97
|
+
export declare const Person: Story;
|
|
98
|
+
declare const ShapeSchema: Schema.mutable<Schema.Struct<{
|
|
99
|
+
shape: Schema.optional<Schema.Union<[Schema.Struct<{
|
|
100
|
+
type: Schema.Literal<["circle"]>;
|
|
101
|
+
radius: Schema.optional<Schema.SchemaClass<number, number, never>>;
|
|
102
|
+
}>, Schema.Struct<{
|
|
103
|
+
type: Schema.Literal<["square"]>;
|
|
104
|
+
size: Schema.optional<Schema.refine<number, typeof Schema.Number>>;
|
|
105
|
+
}>]>>;
|
|
106
|
+
}>>;
|
|
107
|
+
type ShapeSchema = Schema.Schema.Type<typeof ShapeSchema>;
|
|
108
|
+
export declare const DiscriminatedShape: StoryObj<StoryProps<ShapeSchema>>;
|
|
109
|
+
declare const ArraysSchema: Schema.mutable<Schema.Struct<{
|
|
110
|
+
names: Schema.Array$<Schema.filter<typeof Schema.String>>;
|
|
111
|
+
addresses: Schema.Array$<Schema.Struct<{
|
|
112
|
+
street: Schema.optional<Schema.SchemaClass<string, string, never>>;
|
|
113
|
+
city: Schema.optional<Schema.SchemaClass<string, string, never>>;
|
|
114
|
+
zip: Schema.optional<Schema.refine<string, typeof Schema.String>>;
|
|
115
|
+
location: Schema.optional<Schema.Tuple<[Schema.filter<Schema.transform<Schema.SchemaClass<number, number, never>, Schema.filter<Schema.SchemaClass<number, number, never>>>>, Schema.filter<Schema.transform<Schema.SchemaClass<number, number, never>, Schema.filter<Schema.SchemaClass<number, number, never>>>>, Schema.Element<typeof Schema.Number, "?">]>>;
|
|
116
|
+
}>>;
|
|
117
|
+
}>>;
|
|
118
|
+
type ArraysSchema = Schema.Schema.Type<typeof ArraysSchema>;
|
|
119
|
+
export declare const Arrays: StoryObj<StoryProps<ArraysSchema>>;
|
|
120
|
+
declare const TupleSchema: Schema.mutable<Schema.Struct<{
|
|
121
|
+
tuple: Schema.Tuple<[typeof Schema.Number, typeof Schema.String, typeof Schema.Boolean]>;
|
|
122
|
+
geopoint: Schema.Tuple<[Schema.filter<Schema.transform<Schema.SchemaClass<number, number, never>, Schema.filter<Schema.SchemaClass<number, number, never>>>>, Schema.filter<Schema.transform<Schema.SchemaClass<number, number, never>, Schema.filter<Schema.SchemaClass<number, number, never>>>>, Schema.Element<typeof Schema.Number, "?">]>;
|
|
123
|
+
}>>;
|
|
124
|
+
type TupleSchema = Schema.Schema.Type<typeof TupleSchema>;
|
|
125
|
+
export declare const Tuple: StoryObj<StoryProps<TupleSchema>>;
|
|
126
|
+
declare const ColorSchema: Schema.mutable<Schema.Struct<{
|
|
127
|
+
color: Schema.Union<[Schema.Literal<["red"]>, Schema.Literal<["green"]>, Schema.Literal<["blue"]>]>;
|
|
128
|
+
}>>;
|
|
129
|
+
type ColorType = Schema.Schema.Type<typeof ColorSchema>;
|
|
130
|
+
export declare const Enum: StoryObj<StoryProps<ColorType>>;
|
|
131
|
+
//# sourceMappingURL=Form-old.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Form-old.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Form-old.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AACxC,OAAO,KAAgC,MAAM,OAAO,CAAC;AAGrD,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;AASzD,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAIlD,KAAK,UAAU,CAAC,CAAC,SAAS,aAAa,IAAI;IACzC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC;CACpC,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;AAuErB,QAAA,MAAM,IAAI;;eAEgB,GAAG;aAvEP,CAAC,SAAS,aAAa,yDAK1C,UAAU,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+EiB,CAAC;AAElC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAU1B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAWlC,CAAC;AAKF,eAAO,MAAM,MAAM,EAAE,KAQpB,CAAC;AAMF,QAAA,MAAM,WAAW;;;;;;;;GAaM,CAAC;AAExB,KAAK,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,WAAW,CAAC,CAAC;AAE1D,eAAO,MAAM,kBAAkB,EAAE,QAAQ,CAAC,UAAU,CAAC,WAAW,CAAC,CAuBhE,CAAC;AAMF,QAAA,MAAM,YAAY;;;;;;;;GAGK,CAAC;AAExB,KAAK,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,YAAY,CAAC,CAAC;AAE5D,eAAO,MAAM,MAAM,EAAE,QAAQ,CAAC,UAAU,CAAC,YAAY,CAAC,CAUrD,CAAC;AAOF,QAAA,MAAM,WAAW;;;GAGM,CAAC;AAExB,KAAK,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,WAAW,CAAC,CAAC;AAE1D,eAAO,MAAM,KAAK,EAAE,QAAQ,CAAC,UAAU,CAAC,WAAW,CAAC,CAUnD,CAAC;AAMF,QAAA,MAAM,WAAW;;GAIM,CAAC;AAExB,KAAK,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,WAAW,CAAC,CAAC;AAExD,eAAO,MAAM,IAAI,EAAE,QAAQ,CAAC,UAAU,CAAC,SAAS,CAAC,CAShD,CAAC"}
|
|
@@ -1,27 +1,83 @@
|
|
|
1
|
-
import
|
|
2
|
-
import React, { type
|
|
3
|
-
import { type
|
|
4
|
-
import { type ThemedClassName } from '@dxos/react-ui';
|
|
5
|
-
import { type
|
|
6
|
-
import { type
|
|
7
|
-
import { type
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
1
|
+
import * as Schema from 'effect/Schema';
|
|
2
|
+
import React, { type PropsWithChildren } from 'react';
|
|
3
|
+
import { type AnyProperties } from '@dxos/echo/internal';
|
|
4
|
+
import { type IconButtonProps, type ThemedClassName } from '@dxos/react-ui';
|
|
5
|
+
import { type FormHandler, type FormHandlerProps, type FormUpdateMeta } from '../../hooks';
|
|
6
|
+
import { type FormFieldLabelProps, type FormFieldStateProps } from './FormFieldComponent';
|
|
7
|
+
import { type FormFieldSetProps as NaturalFormFieldSetProps } from './FormFieldSet';
|
|
8
|
+
export type ExcludeId<S extends Schema.Schema.AnyNoContext> = Omit<Schema.Schema.Type<S>, 'id'>;
|
|
9
|
+
export declare const omitId: <S extends Schema.Schema.AnyNoContext>(schema: S) => Schema.Schema<ExcludeId<S>, ExcludeId<S>>;
|
|
10
|
+
type FormContextValue<T extends AnyProperties = any> = {
|
|
11
|
+
/**
|
|
12
|
+
* Form handler.
|
|
13
|
+
*/
|
|
14
|
+
form: FormHandler<T>;
|
|
15
|
+
/**
|
|
16
|
+
* Show debug info.
|
|
17
|
+
*/
|
|
18
|
+
debug?: boolean;
|
|
19
|
+
/**
|
|
20
|
+
* Testing.
|
|
21
|
+
*/
|
|
22
|
+
testId?: string;
|
|
23
|
+
} & Pick<NaturalFormFieldSetProps<T>, 'readonly' | 'layout' | 'fieldMap' | 'fieldProvider'>;
|
|
24
|
+
declare const useFormContext: (consumerName: string) => FormContextValue<any>;
|
|
25
|
+
/**
|
|
26
|
+
* Get the current form values.
|
|
27
|
+
*/
|
|
28
|
+
declare const useFormValues: {
|
|
29
|
+
<T extends AnyProperties>(componentName: string, path?: (string | number)[]): T;
|
|
30
|
+
<T extends AnyProperties>(componentName: string, path: (string | number)[] | undefined, defaultValue: () => T): T | undefined;
|
|
31
|
+
};
|
|
32
|
+
/**
|
|
33
|
+
* Get the state props for the given field.
|
|
34
|
+
*/
|
|
35
|
+
declare const useFormFieldState: (componentName: string, path?: (string | number)[]) => FormFieldStateProps;
|
|
36
|
+
type FormRootProps<T extends AnyProperties = AnyProperties> = PropsWithChildren<{
|
|
37
|
+
/**
|
|
38
|
+
* Called when the form is submitted and passes validation.
|
|
39
|
+
*/
|
|
40
|
+
onSave?: (values: T, meta: FormUpdateMeta<T>) => void;
|
|
41
|
+
/**
|
|
42
|
+
* Called when the form is canceled to abandon/undo any pending changes.
|
|
43
|
+
*/
|
|
24
44
|
onCancel?: () => void;
|
|
25
|
-
}> & Pick<
|
|
26
|
-
|
|
45
|
+
} & Omit<FormContextValue<T>, 'form'> & Pick<FormHandlerProps<T>, 'schema' | 'autoSave' | 'values' | 'defaultValues' | 'onValidate' | 'onValuesChanged'> & Omit<NaturalFormFieldSetProps<T>, 'schema' | 'path'>>;
|
|
46
|
+
type FormViewportProps = ThemedClassName<PropsWithChildren<{}>>;
|
|
47
|
+
type FormContentProps = ThemedClassName<PropsWithChildren<{}>>;
|
|
48
|
+
type FormFieldSetProps = ThemedClassName<{}>;
|
|
49
|
+
type FormActionsProps = ThemedClassName<{}>;
|
|
50
|
+
type FormSubmitProps = ThemedClassName<Partial<Pick<IconButtonProps, 'icon' | 'label'>>>;
|
|
51
|
+
export declare const Form: {
|
|
52
|
+
Root: {
|
|
53
|
+
<T extends AnyProperties = AnyProperties>({ children, schema, values, onSave, onCancel, ...props }: FormRootProps<T>): React.JSX.Element;
|
|
54
|
+
displayName: string;
|
|
55
|
+
};
|
|
56
|
+
Viewport: {
|
|
57
|
+
({ classNames, children }: FormViewportProps): React.JSX.Element;
|
|
58
|
+
displayName: string;
|
|
59
|
+
};
|
|
60
|
+
Content: {
|
|
61
|
+
({ classNames, children }: FormContentProps): React.JSX.Element;
|
|
62
|
+
displayName: string;
|
|
63
|
+
};
|
|
64
|
+
FieldSet: {
|
|
65
|
+
({ classNames }: FormFieldSetProps): React.JSX.Element;
|
|
66
|
+
displayName: string;
|
|
67
|
+
};
|
|
68
|
+
Actions: {
|
|
69
|
+
({ classNames }: FormActionsProps): React.JSX.Element | null;
|
|
70
|
+
displayName: string;
|
|
71
|
+
};
|
|
72
|
+
Submit: {
|
|
73
|
+
({ classNames, label, icon }: FormSubmitProps): React.JSX.Element | null;
|
|
74
|
+
displayName: string;
|
|
75
|
+
};
|
|
76
|
+
Label: {
|
|
77
|
+
({ label, error, readonly, asChild }: FormFieldLabelProps): React.JSX.Element;
|
|
78
|
+
displayName: string;
|
|
79
|
+
};
|
|
80
|
+
};
|
|
81
|
+
export { useFormContext, useFormValues, useFormFieldState };
|
|
82
|
+
export type { FormRootProps, FormViewportProps, FormContentProps, FormFieldSetProps, FormActionsProps, FormFieldLabelProps as LabelProps, };
|
|
27
83
|
//# sourceMappingURL=Form.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Form.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Form.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,58 +1,130 @@
|
|
|
1
|
-
import '@
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import {
|
|
5
|
-
import { type
|
|
6
|
-
import {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
address
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
1
|
+
import { type StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import * as Schema from 'effect/Schema';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { Type } from '@dxos/echo';
|
|
5
|
+
import { type AnyProperties } from '@dxos/echo/internal';
|
|
6
|
+
import { type ExcludeId, type FormRootProps } from './Form';
|
|
7
|
+
declare const Organization: Type.Obj<{
|
|
8
|
+
readonly name: string;
|
|
9
|
+
}, Schema.Struct.Fields>;
|
|
10
|
+
export interface Organization extends Schema.Schema.Type<typeof Organization> {
|
|
11
|
+
}
|
|
12
|
+
declare const Person: Type.Obj<{
|
|
13
|
+
readonly address?: {
|
|
14
|
+
readonly state: string;
|
|
15
|
+
readonly street: string;
|
|
16
|
+
readonly city: string;
|
|
17
|
+
readonly zip: number;
|
|
18
|
+
} | undefined;
|
|
19
|
+
readonly name: string;
|
|
20
|
+
readonly status?: "active" | "inactive" | undefined;
|
|
21
|
+
readonly location?: readonly [number, number, (number | undefined)?] | undefined;
|
|
22
|
+
readonly tags?: readonly import("@dxos/echo/internal").Ref<import("@dxos/echo/Entity").OfKind<import("@dxos/echo/internal").EntityKind.Object> & {
|
|
23
|
+
readonly label: string;
|
|
24
|
+
readonly hue?: string | undefined;
|
|
25
|
+
}>[] | undefined;
|
|
26
|
+
readonly active?: boolean | undefined;
|
|
27
|
+
readonly ignore?: string | undefined;
|
|
28
|
+
readonly employer?: import("@dxos/echo/internal").Ref<import("@dxos/echo/Entity").OfKind<import("@dxos/echo/internal").EntityKind.Object> & {
|
|
29
|
+
readonly name: string;
|
|
30
|
+
}> | undefined;
|
|
31
|
+
readonly notes?: string | undefined;
|
|
32
|
+
readonly tasks?: readonly string[] | undefined;
|
|
33
|
+
readonly locations?: readonly (readonly [number, number, (number | undefined)?])[] | undefined;
|
|
34
|
+
readonly identities?: readonly {
|
|
35
|
+
readonly type: string;
|
|
36
|
+
readonly value: string;
|
|
37
|
+
}[] | undefined;
|
|
38
|
+
}, Schema.Struct.Fields>;
|
|
39
|
+
export interface Person extends Schema.Schema.Type<typeof Person> {
|
|
40
|
+
}
|
|
41
|
+
type StoryProps<T extends AnyProperties> = {
|
|
42
|
+
debug?: boolean;
|
|
22
43
|
schema: Schema.Schema<T>;
|
|
23
|
-
} &
|
|
24
|
-
declare const meta:
|
|
44
|
+
} & FormRootProps<T>;
|
|
45
|
+
declare const meta: {
|
|
46
|
+
title: string;
|
|
47
|
+
component: {
|
|
48
|
+
<T extends AnyProperties = AnyProperties>({ children, schema, values, onSave, onCancel, ...props }: FormRootProps<T>): React.JSX.Element;
|
|
49
|
+
displayName: string;
|
|
50
|
+
};
|
|
51
|
+
render: <T extends AnyProperties = AnyProperties>({ debug, schema, values: valuesProp, ...props }: StoryProps<T>) => React.JSX.Element;
|
|
52
|
+
decorators: import("@storybook/react").Decorator[];
|
|
53
|
+
parameters: {
|
|
54
|
+
layout: string;
|
|
55
|
+
translations: [{
|
|
56
|
+
readonly 'en-US': {
|
|
57
|
+
readonly "@dxos/react-ui-form": {
|
|
58
|
+
readonly 'fields label': "Fields";
|
|
59
|
+
readonly 'hidden fields label': "Hidden Fields";
|
|
60
|
+
readonly 'empty readonly ref field label': "(none)";
|
|
61
|
+
readonly 'add property button label': "Add property";
|
|
62
|
+
readonly 'field property label': "Property";
|
|
63
|
+
readonly 'field property placeholder': "Property name";
|
|
64
|
+
readonly 'field format label': "Type";
|
|
65
|
+
readonly 'field path label': "Field path";
|
|
66
|
+
readonly 'add field': "Add field";
|
|
67
|
+
readonly 'delete field': "Delete field";
|
|
68
|
+
readonly 'field limit reached': "Maximum number of fields reached";
|
|
69
|
+
readonly 'boolean input true value': "Yes";
|
|
70
|
+
readonly 'boolean input false value': "No";
|
|
71
|
+
readonly 'show field label': "Show field";
|
|
72
|
+
readonly 'hide field label': "Hide field";
|
|
73
|
+
readonly 'delete field label': "Delete field";
|
|
74
|
+
readonly 'ref field combobox input placeholder': "Search…";
|
|
75
|
+
readonly 'ref field placeholder_one': "Select…";
|
|
76
|
+
readonly 'ref field placeholder_other': "Select items…";
|
|
77
|
+
readonly 'example placeholder': "Example";
|
|
78
|
+
readonly 'latitude placeholder': "Latitude (e.g., 40.7128)";
|
|
79
|
+
readonly 'longitude placeholder': "Longitude (e.g., -74.0060)";
|
|
80
|
+
readonly 'cancel button label': "Cancel";
|
|
81
|
+
readonly 'save button label': "Save";
|
|
82
|
+
readonly 'format boolean': "Boolean";
|
|
83
|
+
readonly 'format currency': "Currency";
|
|
84
|
+
readonly 'format date': "Date";
|
|
85
|
+
readonly 'format date-time': "DateTime";
|
|
86
|
+
readonly 'format did': "DID";
|
|
87
|
+
readonly 'format duration': "Duration";
|
|
88
|
+
readonly 'format dxn': "DXN";
|
|
89
|
+
readonly 'format email': "Email";
|
|
90
|
+
readonly 'format formula': "Formula";
|
|
91
|
+
readonly 'format hostname': "Hostname";
|
|
92
|
+
readonly 'format integer': "Integer";
|
|
93
|
+
readonly 'format json': "JSON";
|
|
94
|
+
readonly 'format lnglat': "Geopoint";
|
|
95
|
+
readonly 'format markdown': "Markdown";
|
|
96
|
+
readonly 'format percent': "Percent";
|
|
97
|
+
readonly 'format ref': "Reference";
|
|
98
|
+
readonly 'format regex': "RegExp";
|
|
99
|
+
readonly 'format string': "String";
|
|
100
|
+
readonly 'format single-select': "Select";
|
|
101
|
+
readonly 'format multi-select': "Multi-select";
|
|
102
|
+
readonly 'format text': "Long text";
|
|
103
|
+
readonly 'format time': "Time";
|
|
104
|
+
readonly 'format timestamp': "Timestamp";
|
|
105
|
+
readonly 'format user': "User";
|
|
106
|
+
readonly 'format number': "Number";
|
|
107
|
+
readonly 'format uri': "URI";
|
|
108
|
+
readonly 'format url': "URL";
|
|
109
|
+
readonly 'format uuid': "UUID";
|
|
110
|
+
readonly 'latitude label': "Latitude";
|
|
111
|
+
readonly 'longitude label': "Longitude";
|
|
112
|
+
readonly 'select option label': "Label";
|
|
113
|
+
readonly 'select option label placeholder': "Option label";
|
|
114
|
+
readonly 'select option color': "Color";
|
|
115
|
+
readonly 'select option delete': "Delete";
|
|
116
|
+
readonly 'select option add': "Add option";
|
|
117
|
+
readonly 'system schema title': "System type";
|
|
118
|
+
readonly 'system schema description': "System type: cannot add or remove fields.";
|
|
119
|
+
};
|
|
120
|
+
};
|
|
121
|
+
}];
|
|
122
|
+
};
|
|
123
|
+
};
|
|
25
124
|
export default meta;
|
|
26
|
-
type Story<T extends
|
|
27
|
-
export declare const Default: Story<
|
|
28
|
-
export declare const
|
|
29
|
-
export declare const
|
|
30
|
-
declare const
|
|
31
|
-
shape: Schema.optional<Schema.Union<[Schema.Struct<{
|
|
32
|
-
type: Schema.Literal<["circle"]>;
|
|
33
|
-
radius: Schema.optional<Schema.SchemaClass<number, number, never>>;
|
|
34
|
-
}>, Schema.Struct<{
|
|
35
|
-
type: Schema.Literal<["square"]>;
|
|
36
|
-
size: Schema.optional<Schema.refine<number, typeof Schema.Number>>;
|
|
37
|
-
}>]>>;
|
|
38
|
-
}>>;
|
|
39
|
-
type ShapeType = Schema.Schema.Type<typeof ShapeSchema>;
|
|
40
|
-
export declare const DiscriminatedShape: Story<ShapeType>;
|
|
41
|
-
declare const ArraysSchema: Schema.mutable<Schema.Struct<{
|
|
42
|
-
names: Schema.Array$<Schema.filter<typeof Schema.String>>;
|
|
43
|
-
addresses: Schema.Array$<Schema.Struct<{
|
|
44
|
-
street: Schema.optional<Schema.SchemaClass<string, string, never>>;
|
|
45
|
-
city: Schema.optional<Schema.SchemaClass<string, string, never>>;
|
|
46
|
-
zip: Schema.optional<Schema.refine<string, typeof Schema.String>>;
|
|
47
|
-
location: Schema.optional<Schema.Tuple<[Schema.refine<number, Schema.transform<typeof Schema.Number, Schema.filter<Schema.SchemaClass<number, number, never>>>>, Schema.refine<number, Schema.transform<typeof Schema.Number, Schema.filter<Schema.SchemaClass<number, number, never>>>>, Schema.Element<typeof Schema.Number, "?">]>>;
|
|
48
|
-
}>>;
|
|
49
|
-
}>>;
|
|
50
|
-
type ArraysType = Schema.Schema.Type<typeof ArraysSchema>;
|
|
51
|
-
export declare const Arrays: StoryObj<FormProps<ArraysType>>;
|
|
52
|
-
declare const ColorSchema: Schema.mutable<Schema.Struct<{
|
|
53
|
-
color: Schema.Union<[Schema.Literal<["red"]>, Schema.Literal<["green"]>, Schema.Literal<["blue"]>]>;
|
|
54
|
-
}>>;
|
|
55
|
-
type ColorType = Schema.Schema.Type<typeof ColorSchema>;
|
|
56
|
-
export declare const Enum: StoryObj<FormProps<ColorType>>;
|
|
57
|
-
export declare const Refs: StoryObj<FormProps<ContactType>>;
|
|
125
|
+
type Story<T extends AnyProperties> = StoryObj<StoryProps<T>>;
|
|
126
|
+
export declare const Default: Story<ExcludeId<typeof Person>>;
|
|
127
|
+
export declare const Readonly: Story<ExcludeId<typeof Person>>;
|
|
128
|
+
export declare const Static: Story<ExcludeId<typeof Person>>;
|
|
129
|
+
export declare const Empty: Story<ExcludeId<typeof Person>>;
|
|
58
130
|
//# sourceMappingURL=Form.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Form.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Form.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,
|
|
1
|
+
{"version":3,"file":"Form.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Form.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AACxC,OAAO,KAAgC,MAAM,OAAO,CAAC;AAErD,OAAO,EAAgC,IAAI,EAAE,MAAM,YAAY,CAAC;AAChE,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAUzD,OAAO,EAAE,KAAK,SAAS,EAAQ,KAAK,aAAa,EAAU,MAAM,QAAQ,CAAC;AAE1E,QAAA,MAAM,YAAY;;wBAOjB,CAAC;AAEF,MAAM,WAAW,YAAa,SAAQ,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,YAAY,CAAC;CAAG;AAEhF,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;wBAsCX,CAAC;AAEF,MAAM,WAAW,MAAO,SAAQ,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,MAAM,CAAC;CAAG;AAEpE,KAAK,UAAU,CAAC,CAAC,SAAS,aAAa,IAAI;IACzC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;CAC1B,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;AA8CrB,QAAA,MAAM,IAAI;;;;;;aA5CY,CAAC,SAAS,aAAa,mEAK1C,UAAU,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoEiB,CAAC;AAElC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,CAAC,CAAC,SAAS,aAAa,IAAI,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;AAQ9D,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,MAAM,CAAC,CAMnD,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,MAAM,CAAC,CAMpD,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,MAAM,CAAC,CAMlD,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,MAAM,CAAC,CAajD,CAAC"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import * as SchemaAST from 'effect/SchemaAST';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { type ProjectionModel } from '@dxos/schema';
|
|
4
|
+
import { type RefFieldProps } from './fields';
|
|
5
|
+
import { type FormFieldComponentProps, type FormFieldMap, type FormFieldProvider } from './FormFieldComponent';
|
|
6
|
+
export type FormFieldProps = {
|
|
7
|
+
/**
|
|
8
|
+
* AST of the property to render.
|
|
9
|
+
*/
|
|
10
|
+
type: SchemaAST.AST;
|
|
11
|
+
/**
|
|
12
|
+
* Name of the property.
|
|
13
|
+
*/
|
|
14
|
+
name: string;
|
|
15
|
+
/**
|
|
16
|
+
* Path to the current object from the root. Used with nested forms.
|
|
17
|
+
*/
|
|
18
|
+
path?: (string | number)[];
|
|
19
|
+
/**
|
|
20
|
+
* Optional projection for projection-based field management.
|
|
21
|
+
*/
|
|
22
|
+
projection?: ProjectionModel;
|
|
23
|
+
/**
|
|
24
|
+
* Map of custom renderers for specific properties.
|
|
25
|
+
* Prefer fieldProvider for plugin specific input surfaces.
|
|
26
|
+
*/
|
|
27
|
+
fieldMap?: FormFieldMap;
|
|
28
|
+
/**
|
|
29
|
+
* Function to lookup custom renderers for specific properties.
|
|
30
|
+
*/
|
|
31
|
+
fieldProvider?: FormFieldProvider;
|
|
32
|
+
} & Pick<FormFieldComponentProps, 'autoFocus' | 'readonly' | 'layout'> & Pick<RefFieldProps, 'createOptionLabel' | 'createOptionIcon' | 'createInitialValuePath' | 'db' | 'schemaHook' | 'getOptions' | 'onCreate'>;
|
|
33
|
+
export declare const FormField: {
|
|
34
|
+
(props: FormFieldProps): React.JSX.Element | null;
|
|
35
|
+
displayName: string;
|
|
36
|
+
};
|
|
37
|
+
//# sourceMappingURL=FormField.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/FormField.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,SAAS,MAAM,kBAAkB,CAAC;AAE9C,OAAO,KAAkB,MAAM,OAAO,CAAC;AAcvC,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAKpD,OAAO,EAOL,KAAK,aAAa,EAInB,MAAM,UAAU,CAAC;AAElB,OAAO,EAEL,KAAK,uBAAuB,EAC5B,KAAK,YAAY,EACjB,KAAK,iBAAiB,EACvB,MAAM,sBAAsB,CAAC;AAG9B,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,IAAI,EAAE,SAAS,CAAC,GAAG,CAAC;IAEpB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,IAAI,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IAE3B;;OAEG;IACH,UAAU,CAAC,EAAE,eAAe,CAAC;IAE7B;;;OAGG;IACH,QAAQ,CAAC,EAAE,YAAY,CAAC;IAExB;;OAEG;IACH,aAAa,CAAC,EAAE,iBAAiB,CAAC;CACnC,GAAG,IAAI,CAAC,uBAAuB,EAAE,WAAW,GAAG,UAAU,GAAG,QAAQ,CAAC,GACpE,IAAI,CACF,aAAa,EACX,mBAAmB,GACnB,kBAAkB,GAClB,wBAAwB,GACxB,IAAI,GACJ,YAAY,GACZ,YAAY,GACZ,UAAU,CACb,CAAC;AAEJ,eAAO,MAAM,SAAS;YAAW,cAAc;;CAoJ9C,CAAC"}
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import type * as Schema from 'effect/Schema';
|
|
2
|
+
import type * as SchemaAST from 'effect/SchemaAST';
|
|
3
|
+
import React, { Component, type FC, type FocusEvent, type PropsWithChildren, type ReactElement, type ReactNode } from 'react';
|
|
4
|
+
import { type Format } from '@dxos/echo/internal';
|
|
5
|
+
import { type FormFieldStatus } from '../../hooks';
|
|
6
|
+
/**
|
|
7
|
+
* Dynamic props passed to input components.
|
|
8
|
+
*/
|
|
9
|
+
export type FormFieldStateProps<T = any> = {
|
|
10
|
+
getStatus: () => FormFieldStatus;
|
|
11
|
+
getValue: () => T | undefined;
|
|
12
|
+
onBlur: (event: FocusEvent<HTMLElement>) => void;
|
|
13
|
+
onValueChange: (type: SchemaAST.AST, value: T) => void;
|
|
14
|
+
};
|
|
15
|
+
/**
|
|
16
|
+
* Presentation mode.
|
|
17
|
+
*
|
|
18
|
+
* - full: Show label, control, and status.
|
|
19
|
+
* - compact: Show label and control.
|
|
20
|
+
* - inline: Control only.
|
|
21
|
+
* - static: Plain DOM; omit all undefined values.
|
|
22
|
+
*/
|
|
23
|
+
export type Presentation = 'full' | 'compact' | 'inline' | 'static';
|
|
24
|
+
/**
|
|
25
|
+
* Props passed to input components.
|
|
26
|
+
*/
|
|
27
|
+
export type FormFieldComponentProps<T = any> = {
|
|
28
|
+
type: SchemaAST.AST;
|
|
29
|
+
format?: Format.TypeFormat;
|
|
30
|
+
readonly?: boolean;
|
|
31
|
+
label: string;
|
|
32
|
+
placeholder?: string;
|
|
33
|
+
autoFocus?: boolean;
|
|
34
|
+
layout?: Presentation;
|
|
35
|
+
} & FormFieldStateProps<T>;
|
|
36
|
+
/**
|
|
37
|
+
* Form field component.
|
|
38
|
+
*/
|
|
39
|
+
export type FormFieldComponent = FC<FormFieldComponentProps>;
|
|
40
|
+
export type FormFieldMap = Record<string, FormFieldComponent>;
|
|
41
|
+
export type FormFieldProvider = (props: {
|
|
42
|
+
prop: string;
|
|
43
|
+
schema: Schema.Schema<any>;
|
|
44
|
+
fieldProps: FormFieldComponentProps;
|
|
45
|
+
}) => ReactElement | undefined;
|
|
46
|
+
export type FormFieldLabelProps = {
|
|
47
|
+
asChild?: boolean;
|
|
48
|
+
error?: string;
|
|
49
|
+
} & Pick<FormFieldComponentProps, 'label' | 'readonly'>;
|
|
50
|
+
export declare const FormFieldLabel: {
|
|
51
|
+
({ label, error, readonly, asChild }: FormFieldLabelProps): React.JSX.Element;
|
|
52
|
+
displayName: string;
|
|
53
|
+
};
|
|
54
|
+
export type FormFieldWrapperProps<T = any> = Pick<FormFieldComponentProps, 'readonly' | 'label' | 'layout' | 'getStatus' | 'getValue'> & {
|
|
55
|
+
children?: (props: {
|
|
56
|
+
value: T;
|
|
57
|
+
}) => ReactNode;
|
|
58
|
+
};
|
|
59
|
+
export declare const FormFieldWrapper: <T>(props: FormFieldWrapperProps<T>) => React.JSX.Element | null;
|
|
60
|
+
type FormFieldErrorState = {
|
|
61
|
+
error: Error | undefined;
|
|
62
|
+
};
|
|
63
|
+
type FormFieldErrorBoundaryProps = PropsWithChildren<{
|
|
64
|
+
path?: (string | number)[];
|
|
65
|
+
}>;
|
|
66
|
+
export declare class FormFieldErrorBoundary extends Component<FormFieldErrorBoundaryProps, FormFieldErrorState> {
|
|
67
|
+
static getDerivedStateFromError(error: Error): {
|
|
68
|
+
error: Error;
|
|
69
|
+
};
|
|
70
|
+
state: {
|
|
71
|
+
error: undefined;
|
|
72
|
+
};
|
|
73
|
+
componentDidUpdate(prevProps: FormFieldErrorBoundaryProps): void;
|
|
74
|
+
render(): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element | null | undefined;
|
|
75
|
+
private resetError;
|
|
76
|
+
}
|
|
77
|
+
export {};
|
|
78
|
+
//# sourceMappingURL=FormFieldComponent.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FormFieldComponent.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/FormFieldComponent.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,MAAM,eAAe,CAAC;AAC7C,OAAO,KAAK,KAAK,SAAS,MAAM,kBAAkB,CAAC;AACnD,OAAO,KAAK,EAAE,EACZ,SAAS,EACT,KAAK,EAAE,EACP,KAAK,UAAU,EACf,KAAK,iBAAiB,EACtB,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAIlD,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,aAAa,CAAC;AAInD;;GAEG;AACH,MAAM,MAAM,mBAAmB,CAAC,CAAC,GAAG,GAAG,IAAI;IACzC,SAAS,EAAE,MAAM,eAAe,CAAC;IACjC,QAAQ,EAAE,MAAM,CAAC,GAAG,SAAS,CAAC;IAC9B,MAAM,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACjD,aAAa,EAAE,CAAC,IAAI,EAAE,SAAS,CAAC,GAAG,EAAE,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;CACxD,CAAC;AAEF;;;;;;;GAOG;AAEH,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEpE;;GAEG;AACH,MAAM,MAAM,uBAAuB,CAAC,CAAC,GAAG,GAAG,IAAI;IAC7C,IAAI,EAAE,SAAS,CAAC,GAAG,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC,UAAU,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB,GAAG,mBAAmB,CAAC,CAAC,CAAC,CAAC;AAE3B;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,EAAE,CAAC,uBAAuB,CAAC,CAAC;AAE7D,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;AAE9D,MAAM,MAAM,iBAAiB,GAAG,CAAC,KAAK,EAAE;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;IAC3B,UAAU,EAAE,uBAAuB,CAAC;CACrC,KAAK,YAAY,GAAG,SAAS,CAAC;AAM/B,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,IAAI,CAAC,uBAAuB,EAAE,OAAO,GAAG,UAAU,CAAC,CAAC;AAExD,eAAO,MAAM,cAAc;0CAAyC,mBAAmB;;CActF,CAAC;AAQF,MAAM,MAAM,qBAAqB,CAAC,CAAC,GAAG,GAAG,IAAI,IAAI,CAC/C,uBAAuB,EACvB,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,WAAW,GAAG,UAAU,CAC3D,GAAG;IACF,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,CAAC,CAAA;KAAE,KAAK,SAAS,CAAC;CAC/C,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,CAAC,EAAG,OAAO,qBAAqB,CAAC,CAAC,CAAC,6BAsBnE,CAAC;AAMF,KAAK,mBAAmB,GAAG;IACzB,KAAK,EAAE,KAAK,GAAG,SAAS,CAAC;CAC1B,CAAC;AAEF,KAAK,2BAA2B,GAAG,iBAAiB,CAAC;IACnD,IAAI,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;CAC5B,CAAC,CAAC;AAEH,qBAAa,sBAAuB,SAAQ,SAAS,CAAC,2BAA2B,EAAE,mBAAmB,CAAC;IACrG,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,KAAK,GAAG;QAAE,KAAK,EAAE,KAAK,CAAA;KAAE;IAItD,KAAK;;MAAwB;IAE7B,kBAAkB,CAAC,SAAS,EAAE,2BAA2B;IAMzD,MAAM;IAaf,OAAO,CAAC,UAAU;CAGnB"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { type Meta, type StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { type FormFieldComponentProps } from './FormFieldComponent';
|
|
4
|
+
declare const Component: ({ type, placeholder, readonly, onBlur, onValueChange, ...props }: FormFieldComponentProps<string>) => React.JSX.Element;
|
|
5
|
+
declare const meta: Meta<typeof Component>;
|
|
6
|
+
export default meta;
|
|
7
|
+
type Story = StoryObj<typeof meta>;
|
|
8
|
+
export declare const Default: Story;
|
|
9
|
+
//# sourceMappingURL=FormFieldComponent.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FormFieldComponent.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/FormFieldComponent.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAwC,MAAM,OAAO,CAAC;AAK7D,OAAO,EAAE,KAAK,uBAAuB,EAAoB,MAAM,sBAAsB,CAAC;AAEtF,QAAA,MAAM,SAAS,GAAI,kEAOhB,uBAAuB,CAAC,MAAM,CAAC,sBAsBjC,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAOhC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC"}
|