From 3d15716685197bf6d9e904a1fbdc10656f4980c2 Mon Sep 17 00:00:00 2001 From: Ernest Teluk Date: Tue, 10 Oct 2023 10:49:11 +0200 Subject: [PATCH 1/8] add basic mantine theme --- packages/uniforms-mantine/README.md | 11 ++ .../__tests__/_createContext.ts | 38 ++++++ .../__tests__/_createSchema.ts | 6 + .../uniforms-mantine/__tests__/_mount.tsx | 14 +++ packages/uniforms-mantine/__tests__/index.ts | 63 ++++++++++ packages/uniforms-mantine/package.json | 38 ++++++ packages/uniforms-mantine/src/AutoField.tsx | 43 +++++++ packages/uniforms-mantine/src/AutoFields.tsx | 27 +++++ packages/uniforms-mantine/src/AutoForm.tsx | 13 ++ packages/uniforms-mantine/src/BaseForm.tsx | 13 ++ packages/uniforms-mantine/src/BoolField.tsx | 38 ++++++ packages/uniforms-mantine/src/DateField.tsx | 65 ++++++++++ packages/uniforms-mantine/src/ErrorField.tsx | 18 +++ packages/uniforms-mantine/src/ErrorsField.tsx | 19 +++ packages/uniforms-mantine/src/HiddenField.tsx | 35 ++++++ .../uniforms-mantine/src/ListAddField.tsx | 57 +++++++++ .../uniforms-mantine/src/ListDelField.tsx | 51 ++++++++ packages/uniforms-mantine/src/ListField.tsx | 44 +++++++ .../uniforms-mantine/src/ListItemField.tsx | 22 ++++ .../uniforms-mantine/src/LongTextField.tsx | 40 +++++++ packages/uniforms-mantine/src/NestField.tsx | 30 +++++ packages/uniforms-mantine/src/NumField.tsx | 52 ++++++++ packages/uniforms-mantine/src/QuickForm.tsx | 28 +++++ packages/uniforms-mantine/src/RadioField.tsx | 61 ++++++++++ packages/uniforms-mantine/src/SelectField.tsx | 113 ++++++++++++++++++ packages/uniforms-mantine/src/SubmitField.tsx | 28 +++++ packages/uniforms-mantine/src/TextField.tsx | 46 +++++++ .../uniforms-mantine/src/ValidatedForm.tsx | 13 ++ .../src/ValidatedQuickForm.tsx | 5 + packages/uniforms-mantine/src/index.ts | 23 ++++ packages/uniforms-mantine/src/types.ts | 7 ++ packages/uniforms-mantine/tsconfig.cjs.json | 12 ++ packages/uniforms-mantine/tsconfig.esm.json | 12 ++ 33 files changed, 1085 insertions(+) create mode 100644 packages/uniforms-mantine/README.md create mode 100644 packages/uniforms-mantine/__tests__/_createContext.ts create mode 100644 packages/uniforms-mantine/__tests__/_createSchema.ts create mode 100644 packages/uniforms-mantine/__tests__/_mount.tsx create mode 100644 packages/uniforms-mantine/__tests__/index.ts create mode 100644 packages/uniforms-mantine/package.json create mode 100644 packages/uniforms-mantine/src/AutoField.tsx create mode 100644 packages/uniforms-mantine/src/AutoFields.tsx create mode 100644 packages/uniforms-mantine/src/AutoForm.tsx create mode 100644 packages/uniforms-mantine/src/BaseForm.tsx create mode 100644 packages/uniforms-mantine/src/BoolField.tsx create mode 100644 packages/uniforms-mantine/src/DateField.tsx create mode 100644 packages/uniforms-mantine/src/ErrorField.tsx create mode 100644 packages/uniforms-mantine/src/ErrorsField.tsx create mode 100644 packages/uniforms-mantine/src/HiddenField.tsx create mode 100644 packages/uniforms-mantine/src/ListAddField.tsx create mode 100644 packages/uniforms-mantine/src/ListDelField.tsx create mode 100644 packages/uniforms-mantine/src/ListField.tsx create mode 100644 packages/uniforms-mantine/src/ListItemField.tsx create mode 100644 packages/uniforms-mantine/src/LongTextField.tsx create mode 100644 packages/uniforms-mantine/src/NestField.tsx create mode 100644 packages/uniforms-mantine/src/NumField.tsx create mode 100644 packages/uniforms-mantine/src/QuickForm.tsx create mode 100644 packages/uniforms-mantine/src/RadioField.tsx create mode 100644 packages/uniforms-mantine/src/SelectField.tsx create mode 100644 packages/uniforms-mantine/src/SubmitField.tsx create mode 100644 packages/uniforms-mantine/src/TextField.tsx create mode 100644 packages/uniforms-mantine/src/ValidatedForm.tsx create mode 100644 packages/uniforms-mantine/src/ValidatedQuickForm.tsx create mode 100644 packages/uniforms-mantine/src/index.ts create mode 100644 packages/uniforms-mantine/src/types.ts create mode 100644 packages/uniforms-mantine/tsconfig.cjs.json create mode 100644 packages/uniforms-mantine/tsconfig.esm.json diff --git a/packages/uniforms-mantine/README.md b/packages/uniforms-mantine/README.md new file mode 100644 index 000000000..753013ae6 --- /dev/null +++ b/packages/uniforms-mantine/README.md @@ -0,0 +1,11 @@ +# uniforms-mantine + +> Mantine components for `uniforms`. + +## Install + +```sh +$ npm install uniforms-unstyled +``` + +For more in depth documentation see [uniforms.tools](https://uniforms.tools). diff --git a/packages/uniforms-mantine/__tests__/_createContext.ts b/packages/uniforms-mantine/__tests__/_createContext.ts new file mode 100644 index 000000000..e687bc994 --- /dev/null +++ b/packages/uniforms-mantine/__tests__/_createContext.ts @@ -0,0 +1,38 @@ +import { SimpleSchemaDefinition } from 'simpl-schema'; +import { Context, UnknownObject, randomIds, ChangedMap } from 'uniforms'; + +import createSchema from './_createSchema'; + +const randomId = randomIds(); + +export default function createContext( + schema?: SimpleSchemaDefinition, + context?: Partial>, + model = {} as Model, +): { context: Context } { + return { + context: { + changed: false, + changedMap: {} as ChangedMap, + error: null, + model, + name: [], + onChange() {}, + onSubmit() {}, + randomId, + submitted: false, + submitting: false, + validating: false, + ...context, + schema: createSchema(schema), + state: { + disabled: false, + readOnly: false, + showInlineError: false, + ...context?.state, + }, + // @ts-expect-error We don't have a true ref in tests. + formRef: null, + }, + }; +} diff --git a/packages/uniforms-mantine/__tests__/_createSchema.ts b/packages/uniforms-mantine/__tests__/_createSchema.ts new file mode 100644 index 000000000..6ac1ef72b --- /dev/null +++ b/packages/uniforms-mantine/__tests__/_createSchema.ts @@ -0,0 +1,6 @@ +import SimpleSchema, { SimpleSchemaDefinition } from 'simpl-schema'; +import { SimpleSchema2Bridge } from 'uniforms-bridge-simple-schema-2'; + +export default function createSchema(schema: SimpleSchemaDefinition = {}) { + return new SimpleSchema2Bridge({ schema: new SimpleSchema(schema) }); +} diff --git a/packages/uniforms-mantine/__tests__/_mount.tsx b/packages/uniforms-mantine/__tests__/_mount.tsx new file mode 100644 index 000000000..d586e42dd --- /dev/null +++ b/packages/uniforms-mantine/__tests__/_mount.tsx @@ -0,0 +1,14 @@ +import { mount as enzyme } from 'enzyme'; +import { context } from 'uniforms'; + +function mount(node: any, options: any) { + if (options === undefined) { + return enzyme(node); + } + return enzyme(node, { + wrappingComponent: context.Provider, + wrappingComponentProps: { value: options.context }, + }); +} + +export default mount as typeof enzyme; diff --git a/packages/uniforms-mantine/__tests__/index.ts b/packages/uniforms-mantine/__tests__/index.ts new file mode 100644 index 000000000..98de11a8e --- /dev/null +++ b/packages/uniforms-mantine/__tests__/index.ts @@ -0,0 +1,63 @@ +import * as theme from 'uniforms-unstyled'; +import * as suites from 'uniforms/__suites__'; + +it('exports everything', () => { + expect(theme).toEqual({ + AutoFields: expect.any(Function), + AutoField: expect.any(Function), + AutoForm: expect.any(Function), + BaseForm: expect.any(Function), + BoolField: expect.any(Function), + DateField: expect.any(Function), + ErrorField: expect.any(Function), + ErrorsField: expect.any(Function), + HiddenField: expect.any(Function), + ListAddField: expect.any(Function), + ListDelField: expect.any(Function), + ListField: expect.any(Function), + ListItemField: expect.any(Function), + LongTextField: expect.any(Function), + NestField: expect.any(Function), + NumField: expect.any(Function), + QuickForm: expect.any(Function), + RadioField: expect.any(Function), + SelectField: expect.any(Function), + SubmitField: expect.any(Function), + TextField: expect.any(Function), + ValidatedForm: expect.any(Function), + ValidatedQuickForm: expect.any(Function), + }); +}); + +describe('@RTL', () => { + suites.testAutoField(theme.AutoField, { + getDateField: screen => screen.getByLabelText('X'), + getSelectField: screen => screen.getByRole('combobox'), + }); + suites.testAutoForm(theme.AutoForm); + suites.testBaseForm(theme.BaseForm); + suites.testBoolField(theme.BoolField); + suites.testDateField(theme.DateField); + suites.testErrorField(theme.ErrorField); + suites.testErrorsField(theme.ErrorsField); + suites.testHiddenField(theme.HiddenField); + suites.testListAddField(theme.ListAddField); + suites.testListDelField(theme.ListDelField); + suites.testListField(theme.ListField, { + getListAddField: screen => screen.getByRole('button'), + }); + suites.testLongTextField(theme.LongTextField, { + skipShowInlineErrorTests: true, + }); + suites.testNestField(theme.NestField, { + skipShowInlineErrorTests: true, + skipErrorMessageTests: true, + }); + suites.testNumField(theme.NumField); + suites.testQuickForm(theme.QuickForm); + suites.testRadioField(theme.RadioField); + suites.testSubmitField(theme.SubmitField); + suites.testTextField(theme.TextField); + suites.testValidatedForm(theme.ValidatedForm); + suites.testValidatedQuickForm(theme.ValidatedQuickForm); +}); diff --git a/packages/uniforms-mantine/package.json b/packages/uniforms-mantine/package.json new file mode 100644 index 000000000..abf11e2ef --- /dev/null +++ b/packages/uniforms-mantine/package.json @@ -0,0 +1,38 @@ +{ + "name": "uniforms-mantine", + "version": "4.0.0-alpha.5", + "license": "MIT", + "main": "./cjs/index.js", + "module": "./esm/index.js", + "sideEffects": false, + "description": "Mantine components for uniforms.", + "repository": "https://github.com/vazco/uniforms/tree/master/packages/uniforms-mantine", + "bugs": "https://github.com/vazco/uniforms/issues", + "funding": "https://github.com/vazco/uniforms?sponsor=1", + "keywords": [ + "form", + "forms", + "meteor", + "react", + "react-component", + "schema", + "validation" + ], + "files": [ + "cjs/*.d.ts", + "cjs/*.js", + "esm/*.d.ts", + "esm/*.js", + "src/*.ts", + "src/*.tsx" + ], + "peerDependencies": { + "react": "^18.0.0 || ^17.0.0 || ^16.8.0" + }, + "dependencies": { + "invariant": "^2.0.0", + "lodash": "^4.0.0", + "tslib": "^2.2.0", + "uniforms": "^4.0.0-alpha.5" + } +} diff --git a/packages/uniforms-mantine/src/AutoField.tsx b/packages/uniforms-mantine/src/AutoField.tsx new file mode 100644 index 000000000..fe7a4693f --- /dev/null +++ b/packages/uniforms-mantine/src/AutoField.tsx @@ -0,0 +1,43 @@ +import invariant from 'invariant'; +export { AutoFieldProps } from 'uniforms'; +import { createAutoField } from 'uniforms'; + +import BoolField from './BoolField'; +import DateField from './DateField'; +import ListField from './ListField'; +import NestField from './NestField'; +import NumField from './NumField'; +import RadioField from './RadioField'; +import SelectField from './SelectField'; +import TextField from './TextField'; + +const AutoField = createAutoField(props => { + if (props.component) { + return props.component; + } + + if (props.options) { + return props.checkboxes && props.fieldType !== Array + ? RadioField + : SelectField; + } + + switch (props.fieldType) { + case Array: + return ListField; + case Boolean: + return BoolField; + case Date: + return DateField; + case Number: + return NumField; + case Object: + return NestField; + case String: + return TextField; + } + + return invariant(false, 'Unsupported field type: %s', props.fieldType); +}); + +export default AutoField; diff --git a/packages/uniforms-mantine/src/AutoFields.tsx b/packages/uniforms-mantine/src/AutoFields.tsx new file mode 100644 index 000000000..aeea91966 --- /dev/null +++ b/packages/uniforms-mantine/src/AutoFields.tsx @@ -0,0 +1,27 @@ +import { ComponentType, Fragment, createElement } from 'react'; +import { useForm } from 'uniforms'; + +import AutoField from './AutoField'; + +export type AutoFieldsProps = { + element?: ComponentType | string; + fields?: string[]; + omitFields?: string[]; +}; + +export default function AutoFields({ + element = Fragment, + fields, + omitFields = [], + ...props +}: AutoFieldsProps) { + const { schema } = useForm(); + + return createElement( + element, + props, + (fields ?? schema.getSubfields()) + .filter(field => !omitFields.includes(field)) + .map(field => createElement(AutoField, { key: field, name: field })), + ); +} diff --git a/packages/uniforms-mantine/src/AutoForm.tsx b/packages/uniforms-mantine/src/AutoForm.tsx new file mode 100644 index 000000000..ea8321711 --- /dev/null +++ b/packages/uniforms-mantine/src/AutoForm.tsx @@ -0,0 +1,13 @@ +import { AutoForm } from 'uniforms'; + +import ValidatedQuickForm from './ValidatedQuickForm'; + +function Auto(parent: any) { + class _ extends AutoForm.Auto(parent) { + static Auto = Auto; + } + + return _ as unknown as AutoForm; +} + +export default Auto(ValidatedQuickForm); diff --git a/packages/uniforms-mantine/src/BaseForm.tsx b/packages/uniforms-mantine/src/BaseForm.tsx new file mode 100644 index 000000000..3f83574c8 --- /dev/null +++ b/packages/uniforms-mantine/src/BaseForm.tsx @@ -0,0 +1,13 @@ +import { BaseForm } from 'uniforms'; + +function Unstyled(parent: any) { + class _ extends parent { + static Unstyled = Unstyled; + + static displayName = `Unstyled${parent.displayName}`; + } + + return _ as unknown as typeof BaseForm; +} + +export default Unstyled(BaseForm); diff --git a/packages/uniforms-mantine/src/BoolField.tsx b/packages/uniforms-mantine/src/BoolField.tsx new file mode 100644 index 000000000..154a93ac9 --- /dev/null +++ b/packages/uniforms-mantine/src/BoolField.tsx @@ -0,0 +1,38 @@ +import React, { Ref } from 'react'; +import { HTMLFieldProps, connectField, filterDOMProps } from 'uniforms'; + +export type BoolFieldProps = HTMLFieldProps< + boolean, + HTMLDivElement, + { inputRef?: Ref } +>; + +function Bool({ + disabled, + id, + inputRef, + label, + name, + onChange, + readOnly, + value, + ...props +}: BoolFieldProps) { + return ( +
+ !disabled && !readOnly && onChange(!value)} + ref={inputRef} + type="checkbox" + /> + + {label && } +
+ ); +} + +export default connectField(Bool, { kind: 'leaf' }); diff --git a/packages/uniforms-mantine/src/DateField.tsx b/packages/uniforms-mantine/src/DateField.tsx new file mode 100644 index 000000000..1531c281a --- /dev/null +++ b/packages/uniforms-mantine/src/DateField.tsx @@ -0,0 +1,65 @@ +import React, { Ref } from 'react'; +import { HTMLFieldProps, connectField, filterDOMProps } from 'uniforms'; + +type DateFieldType = 'date' | 'datetime-local'; + +/* istanbul ignore next */ +const DateConstructor = (typeof global === 'object' ? global : window).Date; +const dateFormat = (value?: Date, type: DateFieldType = 'datetime-local') => + value?.toISOString().slice(0, type === 'datetime-local' ? -8 : -14); + +export type DateFieldProps = HTMLFieldProps< + Date, + HTMLDivElement, + { + inputRef?: Ref; + max?: Date; + min?: Date; + type?: DateFieldType; + } +>; + +function Date({ + disabled, + id, + inputRef, + label, + max, + min, + name, + onChange, + placeholder, + readOnly, + value, + type = 'datetime-local', + ...props +}: DateFieldProps) { + return ( +
+ {label && } + + { + const date = new DateConstructor(event.target.valueAsNumber); + if (date.getFullYear() < 10000) { + onChange(date); + } else if (isNaN(event.target.valueAsNumber)) { + onChange(undefined); + } + }} + placeholder={placeholder} + readOnly={readOnly} + ref={inputRef} + type={type} + value={dateFormat(value, type) ?? ''} + /> +
+ ); +} + +export default connectField(Date, { kind: 'leaf' }); diff --git a/packages/uniforms-mantine/src/ErrorField.tsx b/packages/uniforms-mantine/src/ErrorField.tsx new file mode 100644 index 000000000..925a65aad --- /dev/null +++ b/packages/uniforms-mantine/src/ErrorField.tsx @@ -0,0 +1,18 @@ +import React, { HTMLProps } from 'react'; +import { Override, connectField, filterDOMProps } from 'uniforms'; + +export type ErrorFieldProps = Override< + Omit, 'onChange'>, + { error?: any; errorMessage?: string } +>; + +function Error({ children, error, errorMessage, ...props }: ErrorFieldProps) { + return !error ? null : ( +
{children || errorMessage}
+ ); +} + +export default connectField(Error, { + initialValue: false, + kind: 'leaf', +}); diff --git a/packages/uniforms-mantine/src/ErrorsField.tsx b/packages/uniforms-mantine/src/ErrorsField.tsx new file mode 100644 index 000000000..b12224c5d --- /dev/null +++ b/packages/uniforms-mantine/src/ErrorsField.tsx @@ -0,0 +1,19 @@ +import React, { HTMLProps } from 'react'; +import { filterDOMProps, useForm } from 'uniforms'; + +export type ErrorsFieldProps = HTMLProps; + +export default function ErrorsField(props: ErrorsFieldProps) { + const { error, schema } = useForm(); + return !error && !props.children ? null : ( +
+ {props.children} + +
    + {schema.getErrorMessages(error).map((message, index) => ( +
  • {message}
    • + ))} +
+
+ ); +} diff --git a/packages/uniforms-mantine/src/HiddenField.tsx b/packages/uniforms-mantine/src/HiddenField.tsx new file mode 100644 index 000000000..616f87f08 --- /dev/null +++ b/packages/uniforms-mantine/src/HiddenField.tsx @@ -0,0 +1,35 @@ +import React, { HTMLProps, Ref, useEffect } from 'react'; +import { Override, filterDOMProps, useField } from 'uniforms'; + +export type HiddenFieldProps = Override< + HTMLProps, + { + inputRef?: Ref; + name: string; + noDOM?: boolean; + value?: unknown; + } +>; + +export default function HiddenField({ value, ...rawProps }: HiddenFieldProps) { + const props = useField(rawProps.name, rawProps, { initialValue: false })[0]; + + useEffect(() => { + if (value !== undefined && value !== props.value) { + props.onChange(value); + } + }); + + return props.noDOM ? null : ( + + ); +} diff --git a/packages/uniforms-mantine/src/ListAddField.tsx b/packages/uniforms-mantine/src/ListAddField.tsx new file mode 100644 index 000000000..630886c7e --- /dev/null +++ b/packages/uniforms-mantine/src/ListAddField.tsx @@ -0,0 +1,57 @@ +import cloneDeep from 'lodash/cloneDeep'; +import React from 'react'; +import { + HTMLFieldProps, + connectField, + filterDOMProps, + joinName, + useField, +} from 'uniforms'; + +export type ListAddFieldProps = HTMLFieldProps; + +function ListAdd({ + disabled, + name, + readOnly, + value, + ...props +}: ListAddFieldProps) { + const nameParts = joinName(null, name); + const parentName = joinName(nameParts.slice(0, -1)); + const parent = useField<{ maxCount?: number }, unknown[]>( + parentName, + {}, + { absoluteName: true }, + )[0]; + + const limitNotReached = + !disabled && !(parent.maxCount! <= parent.value!.length); + + function onAction(event: React.KeyboardEvent | React.MouseEvent) { + if ( + limitNotReached && + !readOnly && + (!('key' in event) || event.key === 'Enter') + ) { + parent.onChange(parent.value!.concat([cloneDeep(value)])); + } + } + + return ( + + + + + ); +} + +export default connectField(ListAdd, { + initialValue: false, + kind: 'leaf', +}); diff --git a/packages/uniforms-mantine/src/ListDelField.tsx b/packages/uniforms-mantine/src/ListDelField.tsx new file mode 100644 index 000000000..98435fc83 --- /dev/null +++ b/packages/uniforms-mantine/src/ListDelField.tsx @@ -0,0 +1,51 @@ +import React from 'react'; +import { + HTMLFieldProps, + connectField, + filterDOMProps, + joinName, + useField, +} from 'uniforms'; + +export type ListDelFieldProps = HTMLFieldProps; + +function ListDel({ disabled, name, readOnly, ...props }: ListDelFieldProps) { + const nameParts = joinName(null, name); + const nameIndex = +nameParts[nameParts.length - 1]; + const parentName = joinName(nameParts.slice(0, -1)); + const parent = useField<{ minCount?: number }, unknown[]>( + parentName, + {}, + { absoluteName: true }, + )[0]; + + disabled ||= readOnly || parent.minCount! >= parent.value!.length; + function onAction( + event: + | React.KeyboardEvent + | React.MouseEvent, + ) { + if (!disabled && (!('key' in event) || event.key === 'Enter')) { + const value = parent.value!.slice(); + value.splice(nameIndex, 1); + parent.onChange(value); + } + } + + return ( + + - + + ); +} + +export default connectField(ListDel, { + initialValue: false, + kind: 'leaf', +}); diff --git a/packages/uniforms-mantine/src/ListField.tsx b/packages/uniforms-mantine/src/ListField.tsx new file mode 100644 index 000000000..71f848a6d --- /dev/null +++ b/packages/uniforms-mantine/src/ListField.tsx @@ -0,0 +1,44 @@ +import React, { Children, cloneElement, isValidElement } from 'react'; +import { HTMLFieldProps, connectField, filterDOMProps } from 'uniforms'; + +import ListAddField from './ListAddField'; +import ListItemField from './ListItemField'; + +export type ListFieldProps = HTMLFieldProps< + unknown[], + HTMLUListElement, + { itemProps?: object } +>; + +function List({ + children = , + itemProps, + label, + value, + ...props +}: ListFieldProps) { + return ( +
    + {label && ( + + )} + + {value?.map((item, itemIndex) => + Children.map(children, (child, childIndex) => + isValidElement(child) + ? cloneElement(child, { + key: `${itemIndex}-${childIndex}`, + name: child.props.name?.replace('$', '' + itemIndex), + ...itemProps, + }) + : child, + ), + )} +
+ ); +} + +export default connectField(List); diff --git a/packages/uniforms-mantine/src/ListItemField.tsx b/packages/uniforms-mantine/src/ListItemField.tsx new file mode 100644 index 000000000..b7612571d --- /dev/null +++ b/packages/uniforms-mantine/src/ListItemField.tsx @@ -0,0 +1,22 @@ +import React, { ReactNode } from 'react'; +import { connectField } from 'uniforms'; + +import AutoField from './AutoField'; +import ListDelField from './ListDelField'; + +export type ListItemFieldProps = { children?: ReactNode; value?: unknown }; + +function ListItem({ + children = , +}: ListItemFieldProps) { + return ( +
+ + {children} +
+ ); +} + +export default connectField(ListItem, { + initialValue: false, +}); diff --git a/packages/uniforms-mantine/src/LongTextField.tsx b/packages/uniforms-mantine/src/LongTextField.tsx new file mode 100644 index 000000000..b93fa8fbc --- /dev/null +++ b/packages/uniforms-mantine/src/LongTextField.tsx @@ -0,0 +1,40 @@ +import React, { Ref } from 'react'; +import { HTMLFieldProps, connectField, filterDOMProps } from 'uniforms'; + +export type LongTextFieldProps = HTMLFieldProps< + string, + HTMLDivElement, + { inputRef?: Ref } +>; + +function LongText({ + disabled, + id, + inputRef, + label, + name, + onChange, + placeholder, + readOnly, + value, + ...props +}: LongTextFieldProps) { + return ( +
+ {label && } + +