@dxos/react-ui-form 0.8.4-main.ae835ea → 0.8.4-main.bc2380dfbc
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/LICENSE +102 -5
- package/README.md +0 -1
- package/dist/lib/browser/index.mjs +2734 -2312
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/browser/translations.mjs +82 -0
- package/dist/lib/browser/translations.mjs.map +7 -0
- package/dist/lib/node-esm/index.mjs +2734 -2312
- package/dist/lib/node-esm/index.mjs.map +4 -4
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/lib/node-esm/translations.mjs +84 -0
- package/dist/lib/node-esm/translations.mjs.map +7 -0
- package/dist/types/src/components/FieldEditor/FieldEditor.d.ts +8 -7
- package/dist/types/src/components/FieldEditor/FieldEditor.d.ts.map +1 -1
- package/dist/types/src/components/FieldEditor/FieldEditor.stories.d.ts +68 -60
- package/dist/types/src/components/FieldEditor/FieldEditor.stories.d.ts.map +1 -1
- package/dist/types/src/components/Form/Form.d.ts +109 -26
- package/dist/types/src/components/Form/Form.d.ts.map +1 -1
- package/dist/types/src/components/Form/Form.stories.d.ts +114 -137
- package/dist/types/src/components/Form/Form.stories.d.ts.map +1 -1
- package/dist/types/src/components/Form/FormField.d.ts +43 -0
- package/dist/types/src/components/Form/FormField.d.ts.map +1 -0
- package/dist/types/src/components/Form/FormFieldComponent.d.ts +79 -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 +15 -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 +11 -0
- package/dist/types/src/components/Form/fields/MarkdownField.d.ts.map +1 -0
- package/dist/types/src/components/Form/fields/MarkdownField.stories.d.ts +84 -0
- package/dist/types/src/components/Form/fields/MarkdownField.stories.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 +22 -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 +84 -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/ObjectForm/ObjectForm.d.ts +9 -0
- package/dist/types/src/components/ObjectForm/ObjectForm.d.ts.map +1 -0
- package/dist/types/src/components/ObjectForm/index.d.ts +2 -0
- package/dist/types/src/components/ObjectForm/index.d.ts.map +1 -0
- package/dist/types/src/components/ObjectPicker/ObjectPicker.d.ts +37 -10
- package/dist/types/src/components/ObjectPicker/ObjectPicker.d.ts.map +1 -1
- package/dist/types/src/components/ObjectPicker/ObjectPicker.stories.d.ts +64 -59
- package/dist/types/src/components/ObjectPicker/ObjectPicker.stories.d.ts.map +1 -1
- package/dist/types/src/components/ObjectProperties/ObjectProperties.d.ts +9 -0
- package/dist/types/src/components/ObjectProperties/ObjectProperties.d.ts.map +1 -0
- package/dist/types/src/components/ObjectProperties/ObjectProperties.stories.d.ts +127 -0
- package/dist/types/src/components/ObjectProperties/ObjectProperties.stories.d.ts.map +1 -0
- package/dist/types/src/components/ObjectProperties/ObjectProperties.test.d.ts +2 -0
- package/dist/types/src/components/ObjectProperties/ObjectProperties.test.d.ts.map +1 -0
- package/dist/types/src/components/ObjectProperties/index.d.ts +2 -0
- package/dist/types/src/components/ObjectProperties/index.d.ts.map +1 -0
- package/dist/types/src/components/Settings/Settings.d.ts +51 -0
- package/dist/types/src/components/Settings/Settings.d.ts.map +1 -0
- package/dist/types/src/components/Settings/Settings.stories.d.ts +84 -0
- package/dist/types/src/components/Settings/Settings.stories.d.ts.map +1 -0
- package/dist/types/src/components/Settings/SettingsFieldSet.d.ts +43 -0
- package/dist/types/src/components/Settings/SettingsFieldSet.d.ts.map +1 -0
- package/dist/types/src/components/Settings/SettingsItem.d.ts +16 -0
- package/dist/types/src/components/Settings/SettingsItem.d.ts.map +1 -0
- package/dist/types/src/components/Settings/SettingsSelectField.d.ts +18 -0
- package/dist/types/src/components/Settings/SettingsSelectField.d.ts.map +1 -0
- package/dist/types/src/components/Settings/index.d.ts +4 -0
- package/dist/types/src/components/Settings/index.d.ts.map +1 -0
- package/dist/types/src/components/ViewEditor/ViewEditor.d.ts +12 -15
- package/dist/types/src/components/ViewEditor/ViewEditor.d.ts.map +1 -1
- package/dist/types/src/components/ViewEditor/ViewEditor.stories.d.ts +70 -64
- package/dist/types/src/components/ViewEditor/ViewEditor.stories.d.ts.map +1 -1
- package/dist/types/src/components/index.d.ts +3 -1
- package/dist/types/src/components/index.d.ts.map +1 -1
- package/dist/types/src/components/testing.d.ts +4 -6
- 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 +7 -0
- package/dist/types/src/hooks/useKeyHandler.d.ts.map +1 -0
- package/dist/types/src/index.d.ts +0 -2
- package/dist/types/src/index.d.ts.map +1 -1
- package/dist/types/src/translations.d.ts +65 -60
- package/dist/types/src/translations.d.ts.map +1 -1
- package/dist/types/src/util/field-type.d.ts +19 -0
- package/dist/types/src/util/field-type.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 -2
- package/dist/types/src/util/refs.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +57 -51
- package/src/components/FieldEditor/FieldEditor.stories.tsx +44 -25
- package/src/components/FieldEditor/FieldEditor.test.tsx +0 -1
- package/src/components/FieldEditor/FieldEditor.tsx +76 -79
- package/src/components/Form/AUDIT.md +17 -0
- package/src/components/Form/Form.stories.tsx +139 -251
- package/src/components/Form/Form.tsx +375 -107
- package/src/components/Form/FormField.tsx +306 -0
- package/src/components/Form/FormFieldComponent.stories.tsx +65 -0
- package/src/components/Form/FormFieldComponent.tsx +174 -0
- package/src/components/Form/FormFieldSet.tsx +144 -0
- package/src/components/Form/README.md +3 -0
- package/src/components/Form/fields/ArrayField.tsx +155 -0
- package/src/components/Form/fields/BooleanField.tsx +22 -0
- package/src/components/Form/fields/GeoPointField.tsx +121 -0
- package/src/components/Form/fields/MarkdownField.stories.tsx +206 -0
- package/src/components/Form/fields/MarkdownField.tsx +168 -0
- package/src/components/Form/fields/NumberField.tsx +39 -0
- package/src/components/Form/fields/RefField.tsx +229 -0
- package/src/components/Form/fields/SelectField.tsx +65 -0
- package/src/components/Form/{custom/SelectOptionsInput.stories.tsx → fields/SelectOptionField.stories.tsx} +23 -18
- package/src/components/Form/{custom/SelectOptionsInput.tsx → fields/SelectOptionField.tsx} +30 -24
- 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/ObjectForm/ObjectForm.tsx +114 -0
- package/src/components/{ControlSection → ObjectForm}/index.ts +1 -1
- package/src/components/ObjectPicker/ObjectPicker.stories.tsx +30 -25
- package/src/components/ObjectPicker/ObjectPicker.tsx +122 -81
- package/src/components/ObjectProperties/ObjectProperties.stories.tsx +362 -0
- package/src/components/ObjectProperties/ObjectProperties.test.tsx +101 -0
- package/src/components/ObjectProperties/ObjectProperties.tsx +141 -0
- package/src/components/ObjectProperties/index.ts +5 -0
- package/src/components/Settings/AUDIT.md +52 -0
- package/src/components/Settings/Settings.stories.tsx +104 -0
- package/src/components/Settings/Settings.tsx +80 -0
- package/src/components/Settings/SettingsFieldSet.tsx +257 -0
- package/src/components/Settings/SettingsItem.tsx +58 -0
- package/src/components/Settings/SettingsSelectField.tsx +59 -0
- package/src/components/Settings/index.ts +7 -0
- package/src/components/ViewEditor/ViewEditor.stories.tsx +53 -50
- package/src/components/ViewEditor/ViewEditor.test.tsx +6 -6
- package/src/components/ViewEditor/ViewEditor.tsx +291 -208
- package/src/components/index.ts +3 -1
- package/src/components/testing.tsx +24 -11
- package/src/hooks/index.ts +2 -3
- package/src/hooks/useFormHandler.ts +380 -0
- package/src/hooks/useKeyHandler.tsx +37 -0
- package/src/index.ts +0 -4
- package/src/translations.ts +70 -65
- package/src/util/field-type.ts +60 -0
- package/src/util/field.ts +25 -25
- 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 +16 -18
- package/dist/types/src/components/ControlSection/ControlSection.d.ts +0 -23
- package/dist/types/src/components/ControlSection/ControlSection.d.ts.map +0 -1
- package/dist/types/src/components/ControlSection/ControlSection.stories.d.ts +0 -84
- package/dist/types/src/components/ControlSection/ControlSection.stories.d.ts.map +0 -1
- package/dist/types/src/components/ControlSection/index.d.ts +0 -2
- package/dist/types/src/components/ControlSection/index.d.ts.map +0 -1
- 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 -63
- 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 -29
- package/dist/types/src/components/Form/Input.d.ts.map +0 -1
- package/dist/types/src/components/Form/RefField.d.ts +0 -22
- 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 -79
- 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/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 -29
- 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/ControlSection/ControlSection.stories.tsx +0 -38
- package/src/components/ControlSection/ControlSection.tsx +0 -153
- package/src/components/Form/ArrayField.tsx +0 -125
- package/src/components/Form/Defaults.tsx +0 -205
- package/src/components/Form/FormActions.tsx +0 -54
- package/src/components/Form/FormContent.tsx +0 -322
- package/src/components/Form/FormContext.tsx +0 -110
- package/src/components/Form/Input.tsx +0 -54
- package/src/components/Form/RefField.tsx +0 -283
- package/src/components/Form/custom/GeoPointInput.tsx +0 -80
- package/src/components/Form/custom/index.ts +0 -7
- package/src/components/Form/factory.tsx +0 -31
- package/src/hooks/useForm.ts +0 -296
- package/src/hooks/useQueryRefOptions.ts +0 -62
- package/src/hooks/useRefQueryLookupHandler.ts +0 -39
- package/src/util/schema.ts +0 -12
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import React, { type FC } from 'react';
|
|
2
|
-
import { type FormatEnum } from '@dxos/echo/internal';
|
|
3
|
-
import { type SimpleType } from '@dxos/effect';
|
|
4
|
-
import { type FormInputStateProps } from './FormContext';
|
|
5
|
-
/**
|
|
6
|
-
* Props passed to input components.
|
|
7
|
-
*/
|
|
8
|
-
export type InputProps = {
|
|
9
|
-
type: SimpleType;
|
|
10
|
-
format?: FormatEnum;
|
|
11
|
-
label: string;
|
|
12
|
-
placeholder?: string;
|
|
13
|
-
inputOnly?: boolean;
|
|
14
|
-
/**
|
|
15
|
-
* Specifies the readonly variant: either disabled inputs, elements indicating they are usually editable but currently are not; or `static`, a field’s representation as regular content without signifiers that it is ever editable.
|
|
16
|
-
*/
|
|
17
|
-
readonly?: 'disabled-input' | 'static' | false;
|
|
18
|
-
} & FormInputStateProps;
|
|
19
|
-
/**
|
|
20
|
-
* Form input component.
|
|
21
|
-
*/
|
|
22
|
-
export type InputComponent = FC<InputProps>;
|
|
23
|
-
export type InputHeaderProps = {
|
|
24
|
-
error?: string;
|
|
25
|
-
label: string;
|
|
26
|
-
readonly?: boolean;
|
|
27
|
-
};
|
|
28
|
-
export declare const InputHeader: ({ error, label, readonly }: InputHeaderProps) => React.JSX.Element;
|
|
29
|
-
//# sourceMappingURL=Input.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Input.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAK/C,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAEzD;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,gBAAgB,GAAG,QAAQ,GAAG,KAAK,CAAC;CAChD,GAAG,mBAAmB,CAAC;AAExB;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,EAAE,CAAC,UAAU,CAAC,CAAC;AAE5C,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,4BAA4B,gBAAgB,sBAavE,CAAC"}
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import '@dxos/lit-ui/dx-tag-picker.pcss';
|
|
2
|
-
import type * as Schema from 'effect/Schema';
|
|
3
|
-
import type * as SchemaAST from 'effect/SchemaAST';
|
|
4
|
-
import React from 'react';
|
|
5
|
-
import { type EchoSchema } from '@dxos/echo/internal';
|
|
6
|
-
import { type QueryRefOptions } from '../../hooks';
|
|
7
|
-
import { type InputProps } from './Input';
|
|
8
|
-
export type RefFieldProps = InputProps & {
|
|
9
|
-
ast?: SchemaAST.AST;
|
|
10
|
-
array?: boolean;
|
|
11
|
-
createOptionLabel?: [string, {
|
|
12
|
-
ns: string;
|
|
13
|
-
}];
|
|
14
|
-
createOptionIcon?: string;
|
|
15
|
-
onCreate?: (values: any) => void;
|
|
16
|
-
createSchema?: Schema.Schema.AnyNoContext;
|
|
17
|
-
createInitialValuePath?: string;
|
|
18
|
-
onQueryRefOptions?: QueryRefOptions;
|
|
19
|
-
schema?: EchoSchema;
|
|
20
|
-
};
|
|
21
|
-
export declare const RefField: ({ type, label, readonly, placeholder, inputOnly, array, ast, getValue, createOptionLabel, createOptionIcon, onBlur, onCreate, createSchema, createInitialValuePath, onQueryRefOptions, onValueChange, ...restInputProps }: RefFieldProps) => React.JSX.Element | null;
|
|
22
|
-
//# sourceMappingURL=RefField.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"RefField.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/RefField.tsx"],"names":[],"mappings":"AAIA,OAAO,iCAAiC,CAAC;AAEzC,OAAO,KAAK,KAAK,MAAM,MAAM,eAAe,CAAC;AAC7C,OAAO,KAAK,KAAK,SAAS,MAAM,kBAAkB,CAAC;AACnD,OAAO,KAA+B,MAAM,OAAO,CAAC;AAEpD,OAAO,EACL,KAAK,UAAU,EAMhB,MAAM,qBAAqB,CAAC;AAS7B,OAAO,EAAE,KAAK,eAAe,EAAsB,MAAM,aAAa,CAAC;AAKvE,OAAO,EAAe,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAEvD,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG;IACvC,GAAG,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC7C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC;IAC1C,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,iBAAiB,CAAC,EAAE,eAAe,CAAC;IACpC,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB,CAAC;AAOF,eAAO,MAAM,QAAQ,GAAI,2NAkBtB,aAAa,6BAuKf,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"GeoPointInput.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Form/custom/GeoPointInput.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAsE,MAAM,OAAO,CAAC;AAO3F,OAAO,EAAe,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAExD,eAAO,MAAM,aAAa,GAAI,uEAAuE,UAAU,sBAkE9G,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SelectOptionsInput.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Form/custom/SelectOptionsInput.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAyF,MAAM,OAAO,CAAC;AAU9G,OAAO,EAAe,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAExD,eAAO,MAAM,iBAAiB,GAAI,+DAA+D,UAAU,sBA8K1G,CAAC"}
|
|
@@ -1,79 +0,0 @@
|
|
|
1
|
-
import { type StoryObj } from '@storybook/react-vite';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
declare const meta: {
|
|
4
|
-
title: string;
|
|
5
|
-
component: any;
|
|
6
|
-
render: () => React.JSX.Element;
|
|
7
|
-
decorators: import("@storybook/react").Decorator[];
|
|
8
|
-
parameters: {
|
|
9
|
-
layout: string;
|
|
10
|
-
translations: [{
|
|
11
|
-
readonly 'en-US': {
|
|
12
|
-
readonly "react-ui-form": {
|
|
13
|
-
readonly 'fields label': "Fields";
|
|
14
|
-
readonly 'hidden fields label': "Hidden Fields";
|
|
15
|
-
readonly 'empty readonly ref field label': "(none)";
|
|
16
|
-
readonly 'button add property': "Add property";
|
|
17
|
-
readonly 'field property label': "Property";
|
|
18
|
-
readonly 'field property placeholder': "Property name";
|
|
19
|
-
readonly 'field format label': "Type";
|
|
20
|
-
readonly 'field path label': "Field path";
|
|
21
|
-
readonly 'add field': "Add field";
|
|
22
|
-
readonly 'delete field': "Delete field";
|
|
23
|
-
readonly 'field limit reached': "Maximum number of fields reached";
|
|
24
|
-
readonly 'boolean input true value': "Yes";
|
|
25
|
-
readonly 'boolean input false value': "No";
|
|
26
|
-
readonly 'show field label': "Show field";
|
|
27
|
-
readonly 'hide field label': "Hide field";
|
|
28
|
-
readonly 'delete field label': "Delete field";
|
|
29
|
-
readonly 'ref field combobox input placeholder': "Search…";
|
|
30
|
-
readonly 'ref field placeholder_one': "Select…";
|
|
31
|
-
readonly 'ref field placeholder_other': "Select items…";
|
|
32
|
-
readonly 'button cancel': "Cancel";
|
|
33
|
-
readonly 'button save': "Save";
|
|
34
|
-
readonly 'format boolean': "Boolean";
|
|
35
|
-
readonly 'format currency': "Currency";
|
|
36
|
-
readonly 'format date': "Date";
|
|
37
|
-
readonly 'format date-time': "DateTime";
|
|
38
|
-
readonly 'format did': "DID";
|
|
39
|
-
readonly 'format duration': "Duration";
|
|
40
|
-
readonly 'format dxn': "DXN";
|
|
41
|
-
readonly 'format email': "Email";
|
|
42
|
-
readonly 'format formula': "Formula";
|
|
43
|
-
readonly 'format hostname': "Hostname";
|
|
44
|
-
readonly 'format integer': "Integer";
|
|
45
|
-
readonly 'format json': "JSON";
|
|
46
|
-
readonly 'format lnglat': "Geopoint";
|
|
47
|
-
readonly 'format markdown': "Markdown";
|
|
48
|
-
readonly 'format percent': "Percent";
|
|
49
|
-
readonly 'format ref': "Reference";
|
|
50
|
-
readonly 'format regex': "RegExp";
|
|
51
|
-
readonly 'format string': "String";
|
|
52
|
-
readonly 'format single-select': "Select";
|
|
53
|
-
readonly 'format multi-select': "Multi-select";
|
|
54
|
-
readonly 'format text': "Long text";
|
|
55
|
-
readonly 'format time': "Time";
|
|
56
|
-
readonly 'format timestamp': "Timestamp";
|
|
57
|
-
readonly 'format user': "User";
|
|
58
|
-
readonly 'format number': "Number";
|
|
59
|
-
readonly 'format uri': "URI";
|
|
60
|
-
readonly 'format url': "URL";
|
|
61
|
-
readonly 'format uuid': "UUID";
|
|
62
|
-
readonly 'latitude label': "Latitude";
|
|
63
|
-
readonly 'longitude label': "Longitude";
|
|
64
|
-
readonly 'select option label': "Label";
|
|
65
|
-
readonly 'select option label placeholder': "Option label";
|
|
66
|
-
readonly 'select option color': "Color";
|
|
67
|
-
readonly 'select option delete': "Delete";
|
|
68
|
-
readonly 'select option add': "Add option";
|
|
69
|
-
readonly 'system schema title': "System record type";
|
|
70
|
-
readonly 'system schema description': "This is a system record type and cannot be modified, though the view can still be configured.";
|
|
71
|
-
};
|
|
72
|
-
};
|
|
73
|
-
}];
|
|
74
|
-
};
|
|
75
|
-
};
|
|
76
|
-
export default meta;
|
|
77
|
-
type Story = StoryObj<typeof meta>;
|
|
78
|
-
export declare const Default: Story;
|
|
79
|
-
//# sourceMappingURL=SelectOptionsInput.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SelectOptionsInput.stories.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Form/custom/SelectOptionsInput.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjE,OAAO,KAAmB,MAAM,OAAO,CAAC;AAuCxC,QAAA,MAAM,IAAI;;eAEwB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOA,CAAC;AAEtC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { type InputProps } from '../Input';
|
|
3
|
-
export declare const TupleInput: ({ binding, type, label, readonly, getStatus, getValue, onValueChange, onBlur, }: InputProps & {
|
|
4
|
-
binding: string[];
|
|
5
|
-
}) => React.JSX.Element;
|
|
6
|
-
//# sourceMappingURL=TupleInput.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TupleInput.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Form/custom/TupleInput.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAe,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAIxD,eAAO,MAAM,UAAU,GAAI,iFASxB,UAAU,GAAG;IAAE,OAAO,EAAE,MAAM,EAAE,CAAA;CAAE,sBAuBpC,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Form/custom/index.ts"],"names":[],"mappings":"AAIA,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,cAAc,CAAC"}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { FormatEnum } from '@dxos/echo/internal';
|
|
2
|
-
import { type SimpleType } from '@dxos/effect';
|
|
3
|
-
import { type InputComponent } from './Input';
|
|
4
|
-
/**
|
|
5
|
-
* Get property input component.
|
|
6
|
-
*/
|
|
7
|
-
export declare const getInputComponent: (type: SimpleType, format?: FormatEnum | string) => InputComponent | undefined;
|
|
8
|
-
//# sourceMappingURL=factory.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"factory.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/factory.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAI/C,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAI,MAAM,UAAU,EAAE,SAAS,UAAU,GAAG,MAAM,KAAG,cAAc,GAAG,SAgBnG,CAAC"}
|
|
@@ -1,67 +0,0 @@
|
|
|
1
|
-
import type * as Schema from 'effect/Schema';
|
|
2
|
-
import { type BaseObject } from '@dxos/echo/internal';
|
|
3
|
-
import { type JsonPath, type SimpleType } from '@dxos/effect';
|
|
4
|
-
import { type ValidationError } from '@dxos/schema';
|
|
5
|
-
import { type MaybePromise } from '@dxos/util';
|
|
6
|
-
/**
|
|
7
|
-
* Return type from `useForm` hook.
|
|
8
|
-
*/
|
|
9
|
-
export type FormHandler<T extends BaseObject> = {
|
|
10
|
-
values: Partial<T>;
|
|
11
|
-
errors: Record<JsonPath, string>;
|
|
12
|
-
touched: Record<JsonPath, boolean>;
|
|
13
|
-
changed: Record<JsonPath, boolean>;
|
|
14
|
-
canSave: boolean;
|
|
15
|
-
formIsValid: boolean;
|
|
16
|
-
handleSave: () => void;
|
|
17
|
-
getStatus: (path: string | (string | number)[]) => {
|
|
18
|
-
status?: 'error';
|
|
19
|
-
error?: string;
|
|
20
|
-
};
|
|
21
|
-
getValue: <V>(path: (string | number)[]) => V | undefined;
|
|
22
|
-
onValueChange: <V>(path: (string | number)[], type: SimpleType, value: V) => void;
|
|
23
|
-
onTouched: (path: (string | number)[]) => void;
|
|
24
|
-
};
|
|
25
|
-
/**
|
|
26
|
-
* Hook options.
|
|
27
|
-
*/
|
|
28
|
-
export interface FormOptions<T extends BaseObject> {
|
|
29
|
-
/**
|
|
30
|
-
* Effect schema (Type literal).
|
|
31
|
-
*/
|
|
32
|
-
schema: Schema.Schema<T, any>;
|
|
33
|
-
/**
|
|
34
|
-
* Initial values (which may not pass validation).
|
|
35
|
-
*/
|
|
36
|
-
initialValues: Partial<T>;
|
|
37
|
-
/**
|
|
38
|
-
* Callback for value changes. Note: This is called even when values are invalid.
|
|
39
|
-
* Sometimes the parent component may want to know about changes even if the form is
|
|
40
|
-
* in an invalid state.
|
|
41
|
-
*/
|
|
42
|
-
onValuesChanged?: (values: Partial<T>) => void;
|
|
43
|
-
/**
|
|
44
|
-
* Custom validation function that runs only after schema validation passes.
|
|
45
|
-
* Use this for complex validation logic that can't be expressed in the schema.
|
|
46
|
-
* @returns Array of validation errors, or undefined if validation passes
|
|
47
|
-
*/
|
|
48
|
-
onValidate?: (values: T) => ValidationError[] | undefined;
|
|
49
|
-
/**
|
|
50
|
-
* Called when the form is valid.
|
|
51
|
-
*/
|
|
52
|
-
onValid?: (values: T, meta: {
|
|
53
|
-
changed: FormHandler<T>['changed'];
|
|
54
|
-
}) => void;
|
|
55
|
-
/**
|
|
56
|
-
* Called when the form is submitted and passes validation.
|
|
57
|
-
*/
|
|
58
|
-
onSave?: (values: T, meta: {
|
|
59
|
-
changed: FormHandler<T>['changed'];
|
|
60
|
-
}) => MaybePromise<void>;
|
|
61
|
-
}
|
|
62
|
-
/**
|
|
63
|
-
* Creates a hook for managing form state, including values, validation, and submission.
|
|
64
|
-
* Deeply integrated with `@dxos/schema` for schema-based validation.
|
|
65
|
-
*/
|
|
66
|
-
export declare const useForm: <T extends BaseObject>({ schema, initialValues, onValuesChanged, onValidate, onValid, onSave, }: FormOptions<T>) => FormHandler<T>;
|
|
67
|
-
//# sourceMappingURL=useForm.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useForm.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useForm.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,MAAM,eAAe,CAAC;AAI7C,OAAO,EAAE,KAAK,UAAU,EAAsB,MAAM,qBAAqB,CAAC;AAC1E,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,UAAU,EAA4C,MAAM,cAAc,CAAC;AAGxG,OAAO,EAAE,KAAK,eAAe,EAAkB,MAAM,cAAc,CAAC;AACpE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/C;;GAEG;AACH,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,UAAU,IAAI;IAK9C,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;IACjC,OAAO,EAAE,MAAM,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;IACnC,OAAO,EAAE,MAAM,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;IACnC,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,OAAO,CAAC;IAGrB,UAAU,EAAE,MAAM,IAAI,CAAC;IAMvB,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK;QAAE,MAAM,CAAC,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACxF,QAAQ,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,SAAS,CAAC;IAC1D,aAAa,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAClF,SAAS,EAAE,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,WAAW,CAAC,CAAC,SAAS,UAAU;IAC/C;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IAE9B;;OAEG;IACH,aAAa,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IAE1B;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAE/C;;;;OAIG;IAEH,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,eAAe,EAAE,GAAG,SAAS,CAAC;IAE1D;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;KAAE,KAAK,IAAI,CAAC;IAE5E;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;KAAE,KAAK,YAAY,CAAC,IAAI,CAAC,CAAC;CAC1F;AAED;;;GAGG;AACH,eAAO,MAAM,OAAO,GAAI,CAAC,SAAS,UAAU,EAAE,0EAO3C,WAAW,CAAC,CAAC,CAAC,KAAG,WAAW,CAAC,CAAC,CAsLhC,CAAC"}
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import { type TypeAnnotation } from '@dxos/echo/internal';
|
|
2
|
-
import { type DXN } from '@dxos/keys';
|
|
3
|
-
import { type Palette } from '@dxos/react-ui-types';
|
|
4
|
-
import { type MaybePromise } from '@dxos/util';
|
|
5
|
-
export type RefOption = {
|
|
6
|
-
dxn: DXN;
|
|
7
|
-
label?: string;
|
|
8
|
-
};
|
|
9
|
-
export type QueryRefOptions = (type: TypeAnnotation) => MaybePromise<RefOption[]>;
|
|
10
|
-
export type QueryTag = {
|
|
11
|
-
id: string;
|
|
12
|
-
label: string;
|
|
13
|
-
hue?: Palette;
|
|
14
|
-
};
|
|
15
|
-
type UseQueryRefOptionsProps = {
|
|
16
|
-
refTypeInfo: TypeAnnotation | undefined;
|
|
17
|
-
onQueryRefOptions?: QueryRefOptions;
|
|
18
|
-
};
|
|
19
|
-
/**
|
|
20
|
-
* Hook to query reference options based on type information.
|
|
21
|
-
* Used internally within forms to fetch and format reference options for reference fields.
|
|
22
|
-
*/
|
|
23
|
-
export declare const useQueryRefOptions: ({ refTypeInfo, onQueryRefOptions }: UseQueryRefOptionsProps) => {
|
|
24
|
-
options: QueryTag[];
|
|
25
|
-
update: () => void;
|
|
26
|
-
loading: boolean;
|
|
27
|
-
};
|
|
28
|
-
export {};
|
|
29
|
-
//# sourceMappingURL=useQueryRefOptions.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useQueryRefOptions.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useQueryRefOptions.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,KAAK,GAAG,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/C,MAAM,MAAM,SAAS,GAAG;IAAE,GAAG,EAAE,GAAG,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AACrD,MAAM,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE,cAAc,KAAK,YAAY,CAAC,SAAS,EAAE,CAAC,CAAC;AAElF,MAAM,MAAM,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,OAAO,CAAC;CACf,CAAC;AAEF,KAAK,uBAAuB,GAAG;IAAE,WAAW,EAAE,cAAc,GAAG,SAAS,CAAC;IAAC,iBAAiB,CAAC,EAAE,eAAe,CAAA;CAAE,CAAC;AAEhH;;;GAGG;AAEH,eAAO,MAAM,kBAAkB,GAAI,oCAAoC,uBAAuB;;;;CAiC7F,CAAC"}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { type Space } from '@dxos/react-client/echo';
|
|
2
|
-
import { type QueryRefOptions } from './useQueryRefOptions';
|
|
3
|
-
type UseRefQueryLookupProps = {
|
|
4
|
-
space?: Space;
|
|
5
|
-
};
|
|
6
|
-
export declare const useRefQueryLookupHandler: ({ space }: UseRefQueryLookupProps) => QueryRefOptions;
|
|
7
|
-
export {};
|
|
8
|
-
//# sourceMappingURL=useRefQueryLookupHandler.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useRefQueryLookupHandler.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useRefQueryLookupHandler.ts"],"names":[],"mappings":"AAQA,OAAO,EAAU,KAAK,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAG7D,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAE5D,KAAK,sBAAsB,GAAG;IAAE,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAEhD,eAAO,MAAM,wBAAwB,GAAI,WAAW,sBAAsB,KAAG,eAuB5E,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../../src/util/schema.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,SAAS,MAAM,kBAAkB,CAAC;AAI9C,eAAO,MAAM,oBAAoB,GAAI,KAAK,SAAS,CAAC,GAAG,8BAGtD,CAAC"}
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
//
|
|
2
|
-
// Copyright 2024 DXOS.org
|
|
3
|
-
//
|
|
4
|
-
|
|
5
|
-
import { type Meta, type StoryObj } from '@storybook/react-vite';
|
|
6
|
-
import React from 'react';
|
|
7
|
-
|
|
8
|
-
import { withTheme } from '@dxos/react-ui/testing';
|
|
9
|
-
|
|
10
|
-
import { translations } from '../../translations';
|
|
11
|
-
|
|
12
|
-
import { ControlPage, ControlSection } from './ControlSection';
|
|
13
|
-
|
|
14
|
-
const meta = {
|
|
15
|
-
title: 'ui/react-ui-form/ControlSection',
|
|
16
|
-
component: ControlSection,
|
|
17
|
-
render: (args) => (
|
|
18
|
-
<ControlPage classNames='w-[40rem]'>
|
|
19
|
-
<ControlSection {...args} />
|
|
20
|
-
</ControlPage>
|
|
21
|
-
),
|
|
22
|
-
decorators: [withTheme],
|
|
23
|
-
parameters: {
|
|
24
|
-
layout: 'centered',
|
|
25
|
-
translations,
|
|
26
|
-
},
|
|
27
|
-
} satisfies Meta<typeof ControlSection>;
|
|
28
|
-
|
|
29
|
-
export default meta;
|
|
30
|
-
|
|
31
|
-
type Story = StoryObj<typeof meta>;
|
|
32
|
-
|
|
33
|
-
export const Default: Story = {
|
|
34
|
-
args: {
|
|
35
|
-
title: 'Control Section',
|
|
36
|
-
description: 'This is a control section',
|
|
37
|
-
},
|
|
38
|
-
};
|
|
@@ -1,153 +0,0 @@
|
|
|
1
|
-
//
|
|
2
|
-
// Copyright 2025 DXOS.org
|
|
3
|
-
//
|
|
4
|
-
|
|
5
|
-
import React, { type ComponentPropsWithoutRef, type PropsWithChildren } from 'react';
|
|
6
|
-
|
|
7
|
-
import {
|
|
8
|
-
Button,
|
|
9
|
-
type ButtonProps,
|
|
10
|
-
Input,
|
|
11
|
-
type Label,
|
|
12
|
-
type ThemedClassName,
|
|
13
|
-
toLocalizedString,
|
|
14
|
-
useTranslation,
|
|
15
|
-
} from '@dxos/react-ui';
|
|
16
|
-
import { StackItem } from '@dxos/react-ui-stack';
|
|
17
|
-
import { mx } from '@dxos/react-ui-theme';
|
|
18
|
-
|
|
19
|
-
import { translationKey } from '../../translations';
|
|
20
|
-
|
|
21
|
-
export type ControlPageProps = ThemedClassName<ComponentPropsWithoutRef<'div'>>;
|
|
22
|
-
|
|
23
|
-
export const ControlPage = ({ children, classNames, ...props }: ControlPageProps) => {
|
|
24
|
-
return (
|
|
25
|
-
<StackItem.Content scrollable classNames='[--control-spacing:var(--dx-trimMd)]'>
|
|
26
|
-
<div role='none' className={mx('pli-cardSpacingInline pbe-trimLg', classNames)} {...props}>
|
|
27
|
-
{children}
|
|
28
|
-
</div>
|
|
29
|
-
</StackItem.Content>
|
|
30
|
-
);
|
|
31
|
-
};
|
|
32
|
-
|
|
33
|
-
export type ControlSectionProps = PropsWithChildren<{
|
|
34
|
-
title: Label;
|
|
35
|
-
description?: Label;
|
|
36
|
-
}>;
|
|
37
|
-
|
|
38
|
-
export const ControlSection = ({ title, description, children }: ControlSectionProps) => {
|
|
39
|
-
return (
|
|
40
|
-
<>
|
|
41
|
-
<ControlSectionHeading title={title} description={description} />
|
|
42
|
-
{children}
|
|
43
|
-
</>
|
|
44
|
-
);
|
|
45
|
-
};
|
|
46
|
-
|
|
47
|
-
export const ControlSectionHeading = ({ title, description }: Omit<ControlSectionProps, 'children'>) => {
|
|
48
|
-
const { t } = useTranslation(translationKey);
|
|
49
|
-
return (
|
|
50
|
-
<>
|
|
51
|
-
<h2 className='pli-trimMd container-max-width text-xl mbs-trimLg mbe-trimMd'>{toLocalizedString(title, t)}</h2>
|
|
52
|
-
{description && (
|
|
53
|
-
<p className='pli-trimMd mlb-trimMd container-max-width text-description'>
|
|
54
|
-
{toLocalizedString(description, t)}
|
|
55
|
-
</p>
|
|
56
|
-
)}
|
|
57
|
-
</>
|
|
58
|
-
);
|
|
59
|
-
};
|
|
60
|
-
|
|
61
|
-
export const ControlGroupButton = ({ classNames, ...props }: ButtonProps) => {
|
|
62
|
-
return <Button {...props} classNames={['md:col-span-2', classNames]} />;
|
|
63
|
-
};
|
|
64
|
-
|
|
65
|
-
export type ControlGroupProps = ThemedClassName<PropsWithChildren>;
|
|
66
|
-
|
|
67
|
-
export const ControlGroup = ({ children, classNames }: ControlGroupProps) => (
|
|
68
|
-
<div
|
|
69
|
-
role='none'
|
|
70
|
-
className={mx(
|
|
71
|
-
'group container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content] gap-trimMd',
|
|
72
|
-
'[--control-spacing:0px] [&_input]:justify-self-end [&_button]:justify-self-end',
|
|
73
|
-
classNames,
|
|
74
|
-
)}
|
|
75
|
-
>
|
|
76
|
-
{children}
|
|
77
|
-
</div>
|
|
78
|
-
);
|
|
79
|
-
|
|
80
|
-
export const ControlFrame = ({ children }: ControlGroupProps) => (
|
|
81
|
-
<div
|
|
82
|
-
role='none'
|
|
83
|
-
className={mx(
|
|
84
|
-
'container-max-width grid grid-cols-1 md:grid-cols-[1fr_1fr] gap-trimSm md:gap-trimMd p-trimMd',
|
|
85
|
-
'border border-separator rounded-md',
|
|
86
|
-
)}
|
|
87
|
-
>
|
|
88
|
-
{children}
|
|
89
|
-
</div>
|
|
90
|
-
);
|
|
91
|
-
|
|
92
|
-
export const controlItemClasses = mx([
|
|
93
|
-
'container-max-width grid md:col-span-2 grid-cols-subgrid gap-trimSm items-center',
|
|
94
|
-
// TODO(burdon): Use grid gap consistently or apply margins consistently?
|
|
95
|
-
'mlb-[--control-spacing] *:first:!mbs-0 *:last:!mbe-0 pli-trimMd plb-trimMd',
|
|
96
|
-
'border border-separator rounded-md',
|
|
97
|
-
]);
|
|
98
|
-
|
|
99
|
-
const controlItemTitleClasses = 'mbe-0 text-lg text-baseText font-normal';
|
|
100
|
-
const controlItemDescriptionClasses = 'mlb-trimSm md:mbe-0 text-base text-description';
|
|
101
|
-
|
|
102
|
-
export type ControlItemProps = PropsWithChildren<{
|
|
103
|
-
title: Label;
|
|
104
|
-
description?: Label;
|
|
105
|
-
}>;
|
|
106
|
-
|
|
107
|
-
export const ControlItem = ({ title, description, children }: ControlItemProps) => {
|
|
108
|
-
const { t } = useTranslation(translationKey);
|
|
109
|
-
|
|
110
|
-
return (
|
|
111
|
-
<div className={controlItemClasses}>
|
|
112
|
-
<div role='none'>
|
|
113
|
-
<h3 className={controlItemTitleClasses}>{toLocalizedString(title, t)}</h3>
|
|
114
|
-
{description && <p className={controlItemDescriptionClasses}>{toLocalizedString(description, t)}</p>}
|
|
115
|
-
</div>
|
|
116
|
-
{children}
|
|
117
|
-
</div>
|
|
118
|
-
);
|
|
119
|
-
};
|
|
120
|
-
|
|
121
|
-
export const ControlItemInput = ({ title, description, children }: ControlItemProps) => {
|
|
122
|
-
const { t } = useTranslation(translationKey);
|
|
123
|
-
|
|
124
|
-
return (
|
|
125
|
-
<Input.Root>
|
|
126
|
-
<div className={controlItemClasses}>
|
|
127
|
-
<div role='none'>
|
|
128
|
-
<Input.Label classNames={controlItemTitleClasses}>{toLocalizedString(title, t)}</Input.Label>
|
|
129
|
-
{description && (
|
|
130
|
-
<Input.DescriptionAndValidation>
|
|
131
|
-
<Input.Description classNames={controlItemDescriptionClasses}>
|
|
132
|
-
{toLocalizedString(description, t)}
|
|
133
|
-
</Input.Description>
|
|
134
|
-
</Input.DescriptionAndValidation>
|
|
135
|
-
)}
|
|
136
|
-
</div>
|
|
137
|
-
{children}
|
|
138
|
-
</div>
|
|
139
|
-
</Input.Root>
|
|
140
|
-
);
|
|
141
|
-
};
|
|
142
|
-
|
|
143
|
-
export const ControlFrameItem = ({ title, description, children }: ControlItemProps) => {
|
|
144
|
-
const { t } = useTranslation(translationKey);
|
|
145
|
-
|
|
146
|
-
return (
|
|
147
|
-
<div role='group' className='min-is-0'>
|
|
148
|
-
<h3 className='text-lg mbe-2'>{toLocalizedString(title, t)}</h3>
|
|
149
|
-
{description && <p className='mlb-trimSm md:mbe-0 text-description'>{toLocalizedString(description, t)}</p>}
|
|
150
|
-
{children}
|
|
151
|
-
</div>
|
|
152
|
-
);
|
|
153
|
-
};
|
|
@@ -1,125 +0,0 @@
|
|
|
1
|
-
//
|
|
2
|
-
// Copyright 2025 DXOS.org
|
|
3
|
-
//
|
|
4
|
-
|
|
5
|
-
import * as Function from 'effect/Function';
|
|
6
|
-
import * as SchemaAST from 'effect/SchemaAST';
|
|
7
|
-
import * as String from 'effect/String';
|
|
8
|
-
import React, { Fragment, useCallback } from 'react';
|
|
9
|
-
|
|
10
|
-
import { SimpleType, findNode, getDiscriminatedType, isDiscriminatedUnion } from '@dxos/effect';
|
|
11
|
-
import { invariant } from '@dxos/invariant';
|
|
12
|
-
import { IconButton, useTranslation } from '@dxos/react-ui';
|
|
13
|
-
import { type SchemaProperty, getSchemaProperties } from '@dxos/schema';
|
|
14
|
-
|
|
15
|
-
import { translationKey } from '../../translations';
|
|
16
|
-
import { findArrayElementType } from '../../util';
|
|
17
|
-
|
|
18
|
-
import { type ComponentLookup } from './Form';
|
|
19
|
-
import { FormField, type FormFieldProps } from './FormContent';
|
|
20
|
-
import { type FormInputStateProps, useFormValues } from './FormContext';
|
|
21
|
-
import { type InputComponent, InputHeader } from './Input';
|
|
22
|
-
|
|
23
|
-
type ArrayFieldProps = {
|
|
24
|
-
property: SchemaProperty<any>;
|
|
25
|
-
inputProps: FormInputStateProps;
|
|
26
|
-
path?: (string | number)[];
|
|
27
|
-
Custom?: Partial<Record<string, InputComponent>>;
|
|
28
|
-
lookupComponent?: ComponentLookup;
|
|
29
|
-
} & Pick<FormFieldProps, 'readonly'>;
|
|
30
|
-
|
|
31
|
-
export const ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponent }: ArrayFieldProps) => {
|
|
32
|
-
const { t } = useTranslation(translationKey);
|
|
33
|
-
const { ast, name, type, title } = property;
|
|
34
|
-
// TODO(wittjosiah): The fallback to an empty array stops the form from crashing but isn't immediately live.
|
|
35
|
-
// It doesn't become live until another field is touched, but that's better than the whole form crashing.
|
|
36
|
-
const values = (useFormValues(path ?? []) ?? []) as any[];
|
|
37
|
-
invariant(Array.isArray(values), `Values at path ${path?.join('.')} must be an array.`);
|
|
38
|
-
const label = title ?? Function.pipe(name, String.capitalize);
|
|
39
|
-
|
|
40
|
-
const elementType = findArrayElementType(ast);
|
|
41
|
-
|
|
42
|
-
const getDefaultObjectValue = (typeNode: SchemaAST.AST): any => {
|
|
43
|
-
const baseNode = findNode(typeNode, isDiscriminatedUnion);
|
|
44
|
-
const typeLiteral = baseNode ? getDiscriminatedType(baseNode, {}) : findNode(typeNode, SchemaAST.isTypeLiteral);
|
|
45
|
-
if (!typeLiteral) {
|
|
46
|
-
return {};
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
return Object.fromEntries(getSchemaProperties(typeLiteral, {}).map((prop) => [prop.name, prop.defaultValue]));
|
|
50
|
-
};
|
|
51
|
-
|
|
52
|
-
const getDefaultValue = () =>
|
|
53
|
-
type === 'object' && elementType ? getDefaultObjectValue(elementType) : SimpleType.getDefaultValue(type);
|
|
54
|
-
|
|
55
|
-
const handleAdd = useCallback(() => {
|
|
56
|
-
inputProps.onValueChange(type, [...values, getDefaultValue()]);
|
|
57
|
-
}, [type, elementType, inputProps, values]);
|
|
58
|
-
|
|
59
|
-
const handleRemove = useCallback(
|
|
60
|
-
(index: number) => {
|
|
61
|
-
const newValues = values.filter((_, i) => i !== index);
|
|
62
|
-
inputProps.onValueChange(type, newValues);
|
|
63
|
-
},
|
|
64
|
-
[type, inputProps, values],
|
|
65
|
-
);
|
|
66
|
-
|
|
67
|
-
if (!elementType) {
|
|
68
|
-
return null;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
return readonly && values.length < 1 ? null : (
|
|
72
|
-
<>
|
|
73
|
-
<InputHeader readonly label={label} />
|
|
74
|
-
<div
|
|
75
|
-
role='none'
|
|
76
|
-
className={
|
|
77
|
-
readonly
|
|
78
|
-
? 'flex flex-wrap gap-1 mlb-1'
|
|
79
|
-
: values.length > 0
|
|
80
|
-
? 'grid gap-1 grid-cols-[1fr_min-content] mlb-1'
|
|
81
|
-
: 'hidden'
|
|
82
|
-
}
|
|
83
|
-
>
|
|
84
|
-
{values.map((_value, index) => {
|
|
85
|
-
const field = (
|
|
86
|
-
<FormField
|
|
87
|
-
property={{
|
|
88
|
-
...property,
|
|
89
|
-
array: false, // NOTE(ZaymonFC): This breaks arrays of arrays but ¯\_(ツ)_/¯. Ping me if you need that.
|
|
90
|
-
ast: elementType,
|
|
91
|
-
}}
|
|
92
|
-
path={[...(path ?? []), index]}
|
|
93
|
-
readonly={readonly}
|
|
94
|
-
inline
|
|
95
|
-
Custom={Custom}
|
|
96
|
-
lookupComponent={lookupComponent}
|
|
97
|
-
/>
|
|
98
|
-
);
|
|
99
|
-
return readonly ? (
|
|
100
|
-
field
|
|
101
|
-
) : (
|
|
102
|
-
<Fragment key={index}>
|
|
103
|
-
<div role='none'>{field}</div>
|
|
104
|
-
<IconButton
|
|
105
|
-
icon='ph--trash--regular'
|
|
106
|
-
iconOnly
|
|
107
|
-
label={t('button remove')}
|
|
108
|
-
onClick={() => handleRemove(index)}
|
|
109
|
-
classNames='self-center'
|
|
110
|
-
/>
|
|
111
|
-
</Fragment>
|
|
112
|
-
);
|
|
113
|
-
})}
|
|
114
|
-
</div>
|
|
115
|
-
{!readonly && (
|
|
116
|
-
<IconButton
|
|
117
|
-
classNames='is-full mlb-cardSpacingBlock flex'
|
|
118
|
-
icon='ph--plus--regular'
|
|
119
|
-
label={t('add field')}
|
|
120
|
-
onClick={handleAdd}
|
|
121
|
-
/>
|
|
122
|
-
)}
|
|
123
|
-
</>
|
|
124
|
-
);
|
|
125
|
-
};
|