From 2129336fc0ff487f3d6a97d58cc6b7fd628c0c14 Mon Sep 17 00:00:00 2001 From: Nikita Zolotykh Date: Wed, 26 Aug 2026 14:14:19 +0200 Subject: [PATCH] feat(unstable): add overview layouts and entities --- .../SchemaRendererNode/SchemaRendererNode.tsx | 20 +- src/lib/unstable/core/types/components.ts | 4 +- .../ArrayRemoveButton/ArrayRemoveButton.tsx | 8 +- .../kit/components/CopyButton/CopyButton.tsx | 7 +- .../EmptyEntityValue/EmptyEntityValue.tsx | 4 +- .../EntityContainer/EntityContainer.tsx | 4 +- .../LayoutContainer/LayoutContainer.tsx | 4 +- .../kit/components/LongValue/LongValue.tsx | 4 +- src/lib/unstable/kit/constants/common.ts | 2 + src/lib/unstable/kit/constants/config.ts | 251 ++++++++++++------ src/lib/unstable/kit/constants/index.ts | 2 +- src/lib/unstable/kit/entities/Alert/Alert.tsx | 4 +- .../unstable/kit/entities/ArrayBase/index.ts | 1 - .../ArrayEntity.tsx} | 6 +- .../kit/entities/ArrayEntity/index.ts | 1 + .../kit/entities/ArrayTable/ArrayTable.tsx | 10 +- .../DotValue/DotValue.tsx | 25 +- .../DotValue/index.ts | 0 .../FewOfNested/FewOfNested.scss | 2 + .../FewOfNested/FewOfNested.tsx | 28 +- .../FewOfNested/index.ts | 0 .../Label/Label.tsx | 17 +- .../Label/index.ts | 0 .../unstable/kit/entities/Monaco/Monaco.tsx | 4 +- .../unstable/kit/entities/ObjectBase/index.ts | 1 - .../ObjectEntity.tsx} | 6 +- .../kit/entities/ObjectEntity/index.ts | 1 + .../ObjectInline/ObjectInline.scss | 8 + .../ObjectInline/ObjectInline.tsx | 33 ++- .../ObjectInline/index.ts | 0 .../OneOfNested/OneOfNested.scss | 2 + .../OneOfNested/OneOfNested.tsx | 49 ++-- .../OneOfNested/index.ts | 0 .../TextContent/TextContent.scss | 13 + .../TextContent/TextContent.tsx | 13 +- .../TextContent/index.ts | 0 src/lib/unstable/kit/entities/index.ts | 10 +- .../kit/form-entities/Checkbox/index.ts | 1 - .../kit/form-entities/CheckboxGroup/index.ts | 1 - .../CheckboxGroupInput.scss} | 2 +- .../CheckboxGroupInput.tsx} | 10 +- .../form-entities/CheckboxGroupInput/index.ts | 1 + .../CheckboxInput.scss} | 2 +- .../CheckboxInput.tsx} | 19 +- .../kit/form-entities/CheckboxInput/index.ts | 1 + .../kit/form-entities/ColorPicker/index.ts | 1 - .../ColorPickerInput.scss} | 2 +- .../ColorPickerInput.tsx} | 16 +- .../form-entities/ColorPickerInput/index.ts | 1 + .../kit/form-entities/DateInput/DateInput.tsx | 37 ++- .../kit/form-entities/FileInput/FileInput.tsx | 4 +- .../kit/form-entities/MultiSelect/index.ts | 1 - .../MultiSelectInput.tsx} | 30 +-- .../form-entities/MultiSelectInput/index.ts | 1 + .../kit/form-entities/NumberBase/index.ts | 1 - .../NumberInput.scss} | 2 +- .../NumberInput.tsx} | 21 +- .../kit/form-entities/NumberInput/index.ts | 1 + .../form-entities/NumberWithScale/index.ts | 1 - .../NumberWithScaleInput.scss} | 2 +- .../NumberWithScaleInput.tsx} | 14 +- .../NumberWithScaleInput/index.ts | 1 + .../kit/form-entities/Password/index.ts | 1 - .../PasswordInput.scss} | 2 +- .../PasswordInput.tsx} | 19 +- .../kit/form-entities/PasswordInput/index.ts | 1 + .../kit/form-entities/RadioGroup/index.ts | 1 - .../RadioGroupInput.scss} | 2 +- .../RadioGroupInput.tsx} | 25 +- .../form-entities/RadioGroupInput/index.ts | 1 + .../form-entities/RangeInput/RangeInput.tsx | 10 +- .../kit/form-entities/RangeSlider/index.ts | 1 - .../RangeSliderInput.tsx} | 12 +- .../form-entities/RangeSliderInput/index.ts | 1 + .../SegmentedRadioGroup/index.ts | 1 - .../SegmentedRadioGroupInput.scss} | 2 +- .../SegmentedRadioGroupInput.tsx} | 27 +- .../SegmentedRadioGroupInput/index.ts | 4 + .../kit/form-entities/Select/index.ts | 1 - .../SelectInput.tsx} | 32 +-- .../kit/form-entities/SelectInput/index.ts | 1 + .../kit/form-entities/Slider/index.ts | 1 - .../SliderInput.tsx} | 12 +- .../kit/form-entities/SliderInput/index.ts | 1 + .../kit/form-entities/StringBase/index.ts | 1 - .../StringInput.scss} | 2 +- .../StringInput.tsx} | 10 +- .../kit/form-entities/StringInput/index.ts | 1 + .../StringNumberWithScale/index.ts | 1 - .../StringNumberWithScaleInput.scss} | 2 +- .../StringNumberWithScaleInput.tsx} | 23 +- .../StringNumberWithScaleInput/index.ts | 4 + .../kit/form-entities/Switch/index.ts | 1 - .../SwitchInput.scss} | 2 +- .../SwitchInput.tsx} | 19 +- .../kit/form-entities/SwitchInput/index.ts | 1 + .../kit/form-entities/TextArea/index.ts | 1 - .../TextAreaInput.scss} | 2 +- .../TextAreaInput.tsx} | 19 +- .../kit/form-entities/TextAreaInput/index.ts | 1 + src/lib/unstable/kit/form-entities/index.ts | 44 +-- .../unstable/kit/form-layouts/Card/Card.scss | 28 -- .../kit/form-layouts/ColumnRow/index.ts | 1 - .../FormColumn.scss} | 2 +- .../FormColumn.tsx} | 10 +- .../kit/form-layouts/FormColumn/index.ts | 1 + .../{Row/Row.scss => FormRow/FormRow.scss} | 2 +- .../{Row/Row.tsx => FormRow/FormRow.tsx} | 10 +- .../kit/form-layouts/FormRow/index.ts | 1 + .../unstable/kit/form-layouts/Row/index.ts | 1 - .../form-layouts/Transparent/Transparent.tsx | 25 -- src/lib/unstable/kit/form-layouts/index.ts | 8 +- src/lib/unstable/kit/index.ts | 12 +- .../Accordeon/Accordeon.scss | 10 + .../Accordeon/Accordeon.tsx | 51 ++-- .../Accordeon/index.ts | 0 src/lib/unstable/kit/layouts/Card/Card.scss | 51 ++++ .../{form-layouts => layouts}/Card/Card.tsx | 50 +++- .../{form-layouts => layouts}/Card/index.ts | 0 .../Section/Section.scss | 10 + .../Section/Section.tsx | 40 ++- .../Section/index.ts | 0 .../Transparent/Transparent.scss | 10 + .../kit/layouts/Transparent/Transparent.tsx | 50 ++++ .../Transparent/index.ts | 0 src/lib/unstable/kit/layouts/index.ts | 4 + .../BooleanValue.tsx} | 11 +- .../overview-entities/BooleanValue/index.ts | 1 + .../ColorPickerValue/ColorPickerValue.scss | 10 + .../ColorPickerValue/ColorPickerValue.tsx | 38 +++ .../ColorPickerValue/index.ts | 1 + .../overview-entities/DateValue/DateValue.tsx | 40 +++ .../kit/overview-entities/DateValue/index.ts | 1 + .../NumberValue/NumberValue.tsx | 20 ++ .../overview-entities/NumberValue/index.ts | 1 + .../NumberWithScaleValue.tsx | 50 ++++ .../NumberWithScaleValue/index.ts | 1 + .../OverviewBooleanBase/index.ts | 1 - .../OverviewStringBase/index.ts | 1 - .../PrimitiveArrayValue.tsx | 53 ++++ .../PrimitiveArrayValue/index.ts | 1 + .../RangeValue/RangeValue.tsx | 39 +++ .../kit/overview-entities/RangeValue/index.ts | 1 + .../StringNumberWithScaleValue.tsx | 57 ++++ .../StringNumberWithScaleValue/index.ts | 4 + .../StringValue.tsx} | 9 +- .../overview-entities/StringValue/index.ts | 1 + .../unstable/kit/overview-entities/index.ts | 14 +- .../OverviewColumn/OverviewColumn.scss | 33 +++ .../OverviewColumn/OverviewColumn.tsx | 48 ++++ .../overview-layouts/OverviewColumn/index.ts | 1 + .../OverviewRow/OverviewRow.scss | 5 +- .../OverviewRow/OverviewRow.tsx | 4 +- .../unstable/kit/overview-layouts/index.ts | 1 + .../unstable/kit/utils/__tests__/date.test.ts | 75 ++++++ src/lib/unstable/kit/utils/date.ts | 19 ++ src/lib/unstable/kit/utils/index.ts | 1 + src/stories/Unstable.stories.tsx | 71 ++--- 158 files changed, 1353 insertions(+), 646 deletions(-) delete mode 100644 src/lib/unstable/kit/entities/ArrayBase/index.ts rename src/lib/unstable/kit/entities/{ArrayBase/ArrayBase.tsx => ArrayEntity/ArrayEntity.tsx} (94%) create mode 100644 src/lib/unstable/kit/entities/ArrayEntity/index.ts rename src/lib/unstable/kit/{form-entities => entities}/DotValue/DotValue.tsx (64%) rename src/lib/unstable/kit/{form-entities => entities}/DotValue/index.ts (100%) rename src/lib/unstable/kit/{form-entities => entities}/FewOfNested/FewOfNested.scss (94%) rename src/lib/unstable/kit/{form-entities => entities}/FewOfNested/FewOfNested.tsx (86%) rename src/lib/unstable/kit/{form-entities => entities}/FewOfNested/index.ts (100%) rename src/lib/unstable/kit/{form-entities => entities}/Label/Label.tsx (71%) rename src/lib/unstable/kit/{form-entities => entities}/Label/index.ts (100%) delete mode 100644 src/lib/unstable/kit/entities/ObjectBase/index.ts rename src/lib/unstable/kit/entities/{ObjectBase/ObjectBase.tsx => ObjectEntity/ObjectEntity.tsx} (85%) create mode 100644 src/lib/unstable/kit/entities/ObjectEntity/index.ts rename src/lib/unstable/kit/{form-entities => entities}/ObjectInline/ObjectInline.scss (67%) rename src/lib/unstable/kit/{form-entities => entities}/ObjectInline/ObjectInline.tsx (65%) rename src/lib/unstable/kit/{form-entities => entities}/ObjectInline/index.ts (100%) rename src/lib/unstable/kit/{form-entities => entities}/OneOfNested/OneOfNested.scss (94%) rename src/lib/unstable/kit/{form-entities => entities}/OneOfNested/OneOfNested.tsx (73%) rename src/lib/unstable/kit/{form-entities => entities}/OneOfNested/index.ts (100%) rename src/lib/unstable/kit/{form-entities => entities}/TextContent/TextContent.scss (54%) rename src/lib/unstable/kit/{form-entities => entities}/TextContent/TextContent.tsx (82%) rename src/lib/unstable/kit/{form-entities => entities}/TextContent/index.ts (100%) delete mode 100644 src/lib/unstable/kit/form-entities/Checkbox/index.ts delete mode 100644 src/lib/unstable/kit/form-entities/CheckboxGroup/index.ts rename src/lib/unstable/kit/form-entities/{CheckboxGroup/CheckboxGroup.scss => CheckboxGroupInput/CheckboxGroupInput.scss} (94%) rename src/lib/unstable/kit/form-entities/{CheckboxGroup/CheckboxGroup.tsx => CheckboxGroupInput/CheckboxGroupInput.tsx} (91%) create mode 100644 src/lib/unstable/kit/form-entities/CheckboxGroupInput/index.ts rename src/lib/unstable/kit/form-entities/{Checkbox/Checkbox.scss => CheckboxInput/CheckboxInput.scss} (95%) rename src/lib/unstable/kit/form-entities/{Checkbox/Checkbox.tsx => CheckboxInput/CheckboxInput.tsx} (72%) create mode 100644 src/lib/unstable/kit/form-entities/CheckboxInput/index.ts delete mode 100644 src/lib/unstable/kit/form-entities/ColorPicker/index.ts rename src/lib/unstable/kit/form-entities/{ColorPicker/ColorPicker.scss => ColorPickerInput/ColorPickerInput.scss} (91%) rename src/lib/unstable/kit/form-entities/{ColorPicker/ColorPicker.tsx => ColorPickerInput/ColorPickerInput.tsx} (73%) create mode 100644 src/lib/unstable/kit/form-entities/ColorPickerInput/index.ts delete mode 100644 src/lib/unstable/kit/form-entities/MultiSelect/index.ts rename src/lib/unstable/kit/form-entities/{MultiSelect/MultiSelect.tsx => MultiSelectInput/MultiSelectInput.tsx} (77%) create mode 100644 src/lib/unstable/kit/form-entities/MultiSelectInput/index.ts delete mode 100644 src/lib/unstable/kit/form-entities/NumberBase/index.ts rename src/lib/unstable/kit/form-entities/{Password/Password.scss => NumberInput/NumberInput.scss} (88%) rename src/lib/unstable/kit/form-entities/{NumberBase/NumberBase.tsx => NumberInput/NumberInput.tsx} (75%) create mode 100644 src/lib/unstable/kit/form-entities/NumberInput/index.ts delete mode 100644 src/lib/unstable/kit/form-entities/NumberWithScale/index.ts rename src/lib/unstable/kit/form-entities/{NumberWithScale/NumberWithScale.scss => NumberWithScaleInput/NumberWithScaleInput.scss} (86%) rename src/lib/unstable/kit/form-entities/{NumberWithScale/NumberWithScale.tsx => NumberWithScaleInput/NumberWithScaleInput.tsx} (93%) create mode 100644 src/lib/unstable/kit/form-entities/NumberWithScaleInput/index.ts delete mode 100644 src/lib/unstable/kit/form-entities/Password/index.ts rename src/lib/unstable/kit/form-entities/{StringBase/StringBase.scss => PasswordInput/PasswordInput.scss} (87%) rename src/lib/unstable/kit/form-entities/{Password/Password.tsx => PasswordInput/PasswordInput.tsx} (75%) create mode 100644 src/lib/unstable/kit/form-entities/PasswordInput/index.ts delete mode 100644 src/lib/unstable/kit/form-entities/RadioGroup/index.ts rename src/lib/unstable/kit/form-entities/{RadioGroup/RadioGroup.scss => RadioGroupInput/RadioGroupInput.scss} (96%) rename src/lib/unstable/kit/form-entities/{RadioGroup/RadioGroup.tsx => RadioGroupInput/RadioGroupInput.tsx} (67%) create mode 100644 src/lib/unstable/kit/form-entities/RadioGroupInput/index.ts delete mode 100644 src/lib/unstable/kit/form-entities/RangeSlider/index.ts rename src/lib/unstable/kit/form-entities/{RangeSlider/RangeSlider.tsx => RangeSliderInput/RangeSliderInput.tsx} (88%) create mode 100644 src/lib/unstable/kit/form-entities/RangeSliderInput/index.ts delete mode 100644 src/lib/unstable/kit/form-entities/SegmentedRadioGroup/index.ts rename src/lib/unstable/kit/form-entities/{SegmentedRadioGroup/SegmentedRadioGroup.scss => SegmentedRadioGroupInput/SegmentedRadioGroupInput.scss} (92%) rename src/lib/unstable/kit/form-entities/{SegmentedRadioGroup/SegmentedRadioGroup.tsx => SegmentedRadioGroupInput/SegmentedRadioGroupInput.tsx} (72%) create mode 100644 src/lib/unstable/kit/form-entities/SegmentedRadioGroupInput/index.ts delete mode 100644 src/lib/unstable/kit/form-entities/Select/index.ts rename src/lib/unstable/kit/form-entities/{Select/Select.tsx => SelectInput/SelectInput.tsx} (75%) create mode 100644 src/lib/unstable/kit/form-entities/SelectInput/index.ts delete mode 100644 src/lib/unstable/kit/form-entities/Slider/index.ts rename src/lib/unstable/kit/form-entities/{Slider/Slider.tsx => SliderInput/SliderInput.tsx} (82%) create mode 100644 src/lib/unstable/kit/form-entities/SliderInput/index.ts delete mode 100644 src/lib/unstable/kit/form-entities/StringBase/index.ts rename src/lib/unstable/kit/form-entities/{NumberBase/NumberBase.scss => StringInput/StringInput.scss} (88%) rename src/lib/unstable/kit/form-entities/{StringBase/StringBase.tsx => StringInput/StringInput.tsx} (84%) create mode 100644 src/lib/unstable/kit/form-entities/StringInput/index.ts delete mode 100644 src/lib/unstable/kit/form-entities/StringNumberWithScale/index.ts rename src/lib/unstable/kit/form-entities/{StringNumberWithScale/StringNumberWithScale.scss => StringNumberWithScaleInput/StringNumberWithScaleInput.scss} (84%) rename src/lib/unstable/kit/form-entities/{StringNumberWithScale/StringNumberWithScale.tsx => StringNumberWithScaleInput/StringNumberWithScaleInput.tsx} (89%) create mode 100644 src/lib/unstable/kit/form-entities/StringNumberWithScaleInput/index.ts delete mode 100644 src/lib/unstable/kit/form-entities/Switch/index.ts rename src/lib/unstable/kit/form-entities/{Switch/Switch.scss => SwitchInput/SwitchInput.scss} (96%) rename src/lib/unstable/kit/form-entities/{Switch/Switch.tsx => SwitchInput/SwitchInput.tsx} (68%) create mode 100644 src/lib/unstable/kit/form-entities/SwitchInput/index.ts delete mode 100644 src/lib/unstable/kit/form-entities/TextArea/index.ts rename src/lib/unstable/kit/form-entities/{TextArea/TextArea.scss => TextAreaInput/TextAreaInput.scss} (87%) rename src/lib/unstable/kit/form-entities/{TextArea/TextArea.tsx => TextAreaInput/TextAreaInput.tsx} (74%) create mode 100644 src/lib/unstable/kit/form-entities/TextAreaInput/index.ts delete mode 100644 src/lib/unstable/kit/form-layouts/Card/Card.scss delete mode 100644 src/lib/unstable/kit/form-layouts/ColumnRow/index.ts rename src/lib/unstable/kit/form-layouts/{ColumnRow/ColumnRow.scss => FormColumn/FormColumn.scss} (96%) rename src/lib/unstable/kit/form-layouts/{ColumnRow/ColumnRow.tsx => FormColumn/FormColumn.tsx} (90%) create mode 100644 src/lib/unstable/kit/form-layouts/FormColumn/index.ts rename src/lib/unstable/kit/form-layouts/{Row/Row.scss => FormRow/FormRow.scss} (97%) rename src/lib/unstable/kit/form-layouts/{Row/Row.tsx => FormRow/FormRow.tsx} (91%) create mode 100644 src/lib/unstable/kit/form-layouts/FormRow/index.ts delete mode 100644 src/lib/unstable/kit/form-layouts/Row/index.ts delete mode 100644 src/lib/unstable/kit/form-layouts/Transparent/Transparent.tsx rename src/lib/unstable/kit/{form-layouts => layouts}/Accordeon/Accordeon.scss (86%) rename src/lib/unstable/kit/{form-layouts => layouts}/Accordeon/Accordeon.tsx (68%) rename src/lib/unstable/kit/{form-layouts => layouts}/Accordeon/index.ts (100%) create mode 100644 src/lib/unstable/kit/layouts/Card/Card.scss rename src/lib/unstable/kit/{form-layouts => layouts}/Card/Card.tsx (65%) rename src/lib/unstable/kit/{form-layouts => layouts}/Card/index.ts (100%) rename src/lib/unstable/kit/{form-layouts => layouts}/Section/Section.scss (82%) rename src/lib/unstable/kit/{form-layouts => layouts}/Section/Section.tsx (54%) rename src/lib/unstable/kit/{form-layouts => layouts}/Section/index.ts (100%) rename src/lib/unstable/kit/{form-layouts => layouts}/Transparent/Transparent.scss (54%) create mode 100644 src/lib/unstable/kit/layouts/Transparent/Transparent.tsx rename src/lib/unstable/kit/{form-layouts => layouts}/Transparent/index.ts (100%) create mode 100644 src/lib/unstable/kit/layouts/index.ts rename src/lib/unstable/kit/overview-entities/{OverviewBooleanBase/OverviewBooleanBase.tsx => BooleanValue/BooleanValue.tsx} (76%) create mode 100644 src/lib/unstable/kit/overview-entities/BooleanValue/index.ts create mode 100644 src/lib/unstable/kit/overview-entities/ColorPickerValue/ColorPickerValue.scss create mode 100644 src/lib/unstable/kit/overview-entities/ColorPickerValue/ColorPickerValue.tsx create mode 100644 src/lib/unstable/kit/overview-entities/ColorPickerValue/index.ts create mode 100644 src/lib/unstable/kit/overview-entities/DateValue/DateValue.tsx create mode 100644 src/lib/unstable/kit/overview-entities/DateValue/index.ts create mode 100644 src/lib/unstable/kit/overview-entities/NumberValue/NumberValue.tsx create mode 100644 src/lib/unstable/kit/overview-entities/NumberValue/index.ts create mode 100644 src/lib/unstable/kit/overview-entities/NumberWithScaleValue/NumberWithScaleValue.tsx create mode 100644 src/lib/unstable/kit/overview-entities/NumberWithScaleValue/index.ts delete mode 100644 src/lib/unstable/kit/overview-entities/OverviewBooleanBase/index.ts delete mode 100644 src/lib/unstable/kit/overview-entities/OverviewStringBase/index.ts create mode 100644 src/lib/unstable/kit/overview-entities/PrimitiveArrayValue/PrimitiveArrayValue.tsx create mode 100644 src/lib/unstable/kit/overview-entities/PrimitiveArrayValue/index.ts create mode 100644 src/lib/unstable/kit/overview-entities/RangeValue/RangeValue.tsx create mode 100644 src/lib/unstable/kit/overview-entities/RangeValue/index.ts create mode 100644 src/lib/unstable/kit/overview-entities/StringNumberWithScaleValue/StringNumberWithScaleValue.tsx create mode 100644 src/lib/unstable/kit/overview-entities/StringNumberWithScaleValue/index.ts rename src/lib/unstable/kit/overview-entities/{OverviewStringBase/OverviewStringBase.tsx => StringValue/StringValue.tsx} (60%) create mode 100644 src/lib/unstable/kit/overview-entities/StringValue/index.ts create mode 100644 src/lib/unstable/kit/overview-layouts/OverviewColumn/OverviewColumn.scss create mode 100644 src/lib/unstable/kit/overview-layouts/OverviewColumn/OverviewColumn.tsx create mode 100644 src/lib/unstable/kit/overview-layouts/OverviewColumn/index.ts create mode 100644 src/lib/unstable/kit/utils/__tests__/date.test.ts create mode 100644 src/lib/unstable/kit/utils/date.ts diff --git a/src/lib/unstable/core/SchemaRendererNode/SchemaRendererNode.tsx b/src/lib/unstable/core/SchemaRendererNode/SchemaRendererNode.tsx index 6c9dd1b0..693c213e 100644 --- a/src/lib/unstable/core/SchemaRendererNode/SchemaRendererNode.tsx +++ b/src/lib/unstable/core/SchemaRendererNode/SchemaRendererNode.tsx @@ -30,6 +30,8 @@ const SchemaRendererNodeComponent: React.FC = ({ }) => { const form = useForm(); + const firstRenderRef = React.useRef(true); + const pendingTicksRef = React.useRef({input: 0, meta: 0}); const fieldRef = React.useRef>(null); const unsubscribeRef = React.useRef<() => void>(null); const [ticks, setTicks] = React.useState({input: 0, meta: 0}); @@ -88,7 +90,14 @@ const SchemaRendererNodeComponent: React.FC = ({ } if (inputTick + metaTick) { - setTicks((t) => ({input: t.input + inputTick, meta: t.meta + metaTick})); + if (firstRenderRef.current) { + pendingTicksRef.current = {input: inputTick, meta: metaTick}; + } else { + setTicks((t) => ({ + input: t.input + inputTick, + meta: t.meta + metaTick, + })); + } } } @@ -129,6 +138,15 @@ const SchemaRendererNodeComponent: React.FC = ({ }, [error, form, name, ticks.meta]); React.useEffect(() => { + firstRenderRef.current = false; + + if (pendingTicksRef.current.input || pendingTicksRef.current.meta) { + setTicks((t) => ({ + input: t.input + pendingTicksRef.current.input, + meta: t.meta + pendingTicksRef.current.meta, + })); + } + return () => { unsubscribeRef.current?.(); }; diff --git a/src/lib/unstable/core/types/components.ts b/src/lib/unstable/core/types/components.ts index 5eeb684b..1aa4212f 100644 --- a/src/lib/unstable/core/types/components.ts +++ b/src/lib/unstable/core/types/components.ts @@ -25,7 +25,7 @@ export interface NodeLayoutProps = {}, -> = React.ComponentType>; +> = React.FC>; export interface NodeEntityProps< Schema extends JsonSchema, @@ -45,4 +45,4 @@ export type NodeEntity< Schema extends JsonSchema, Props extends Record = {}, LayoutProps extends Record = {}, -> = React.ComponentType>; +> = React.FC>; diff --git a/src/lib/unstable/kit/components/ArrayRemoveButton/ArrayRemoveButton.tsx b/src/lib/unstable/kit/components/ArrayRemoveButton/ArrayRemoveButton.tsx index 06bf469c..ad6b4d7e 100644 --- a/src/lib/unstable/kit/components/ArrayRemoveButton/ArrayRemoveButton.tsx +++ b/src/lib/unstable/kit/components/ArrayRemoveButton/ArrayRemoveButton.tsx @@ -12,11 +12,7 @@ export interface ArrayRemoveButtonProps { onClick?: (event: React.MouseEvent) => void; } -const ArrayRemoveButtonComponent: React.FC = ({ - name, - headName, - onClick, -}) => { +export const ArrayRemoveButton: React.FC = ({name, headName, onClick}) => { const form = useForm(); const [ready, setReady] = React.useState(false); @@ -58,5 +54,3 @@ const ArrayRemoveButtonComponent: React.FC = ({ return null; }; - -export const ArrayRemoveButton = React.memo(ArrayRemoveButtonComponent); diff --git a/src/lib/unstable/kit/components/CopyButton/CopyButton.tsx b/src/lib/unstable/kit/components/CopyButton/CopyButton.tsx index 7c28d2ed..f2ad4e10 100644 --- a/src/lib/unstable/kit/components/CopyButton/CopyButton.tsx +++ b/src/lib/unstable/kit/components/CopyButton/CopyButton.tsx @@ -1,7 +1,8 @@ import React from 'react'; import {ClipboardButton} from '@gravity-ui/uikit'; -import {isNumber, isString} from 'lodash'; +import isNumber from 'lodash/isNumber'; +import isString from 'lodash/isString'; import {block} from '../../utils'; @@ -15,7 +16,7 @@ export interface CopyButtonProps { value: unknown; } -const CopyButtonComponent: React.FC = ({className, copy, value}) => { +export const CopyButton: React.FC = ({className, copy, value}) => { if (copy && (isString(value) || isNumber(value))) { return (
@@ -26,5 +27,3 @@ const CopyButtonComponent: React.FC = ({className, copy, value} return null; }; - -export const CopyButton = React.memo(CopyButtonComponent); diff --git a/src/lib/unstable/kit/components/EmptyEntityValue/EmptyEntityValue.tsx b/src/lib/unstable/kit/components/EmptyEntityValue/EmptyEntityValue.tsx index 6c3ea40e..8bf79f46 100644 --- a/src/lib/unstable/kit/components/EmptyEntityValue/EmptyEntityValue.tsx +++ b/src/lib/unstable/kit/components/EmptyEntityValue/EmptyEntityValue.tsx @@ -3,12 +3,10 @@ import React from 'react'; import {DASH} from '../../constants'; import {EntityContainer} from '../EntityContainer'; -const EmptyEntityValueComponent: React.FC = () => { +export const EmptyEntityValue: React.FC = () => { return ( {DASH} ); }; - -export const EmptyEntityValue = React.memo(EmptyEntityValueComponent); diff --git a/src/lib/unstable/kit/components/EntityContainer/EntityContainer.tsx b/src/lib/unstable/kit/components/EntityContainer/EntityContainer.tsx index 825967c9..5a3dd37f 100644 --- a/src/lib/unstable/kit/components/EntityContainer/EntityContainer.tsx +++ b/src/lib/unstable/kit/components/EntityContainer/EntityContainer.tsx @@ -14,7 +14,7 @@ export interface EntityContainerProps extends FlexProps { stretch: 'max' | 'fit' | 'by-child'; } -const EntityContainerComponent: React.FC = ({ +export const EntityContainer: React.FC = ({ children, fill, stretch, @@ -28,5 +28,3 @@ const EntityContainerComponent: React.FC = ({
); }; - -export const EntityContainer = React.memo(EntityContainerComponent); diff --git a/src/lib/unstable/kit/components/LayoutContainer/LayoutContainer.tsx b/src/lib/unstable/kit/components/LayoutContainer/LayoutContainer.tsx index ed6fd587..a0d999fc 100644 --- a/src/lib/unstable/kit/components/LayoutContainer/LayoutContainer.tsx +++ b/src/lib/unstable/kit/components/LayoutContainer/LayoutContainer.tsx @@ -13,7 +13,7 @@ export interface LayoutContainerProps extends FlexProps { hideEmpty?: boolean; } -const LayoutContainerComponent: React.FC = ({ +export const LayoutContainer: React.FC = ({ className, children, hideEmpty = false, @@ -25,5 +25,3 @@ const LayoutContainerComponent: React.FC = ({ ); }; - -export const LayoutContainer = React.memo(LayoutContainerComponent); diff --git a/src/lib/unstable/kit/components/LongValue/LongValue.tsx b/src/lib/unstable/kit/components/LongValue/LongValue.tsx index baec8ddd..4cacd699 100644 --- a/src/lib/unstable/kit/components/LongValue/LongValue.tsx +++ b/src/lib/unstable/kit/components/LongValue/LongValue.tsx @@ -13,7 +13,7 @@ export interface LongValueProps extends Omit { value?: string | number | boolean; } -const LongValueComponent: React.FC = ({ +export const LongValue: React.FC = ({ className, color, onClick, @@ -77,5 +77,3 @@ const LongValueComponent: React.FC = ({ ); }; - -export const LongValue = React.memo(LongValueComponent); diff --git a/src/lib/unstable/kit/constants/common.ts b/src/lib/unstable/kit/constants/common.ts index 9759570b..701b667c 100644 --- a/src/lib/unstable/kit/constants/common.ts +++ b/src/lib/unstable/kit/constants/common.ts @@ -1 +1,3 @@ export const DASH = '—'; + +export const DEFAULT_DATE_FORMAT = 'DD.MM.YYYY HH:mm'; diff --git a/src/lib/unstable/kit/constants/config.ts b/src/lib/unstable/kit/constants/config.ts index 0642a9a5..c6409b80 100644 --- a/src/lib/unstable/kit/constants/config.ts +++ b/src/lib/unstable/kit/constants/config.ts @@ -1,184 +1,261 @@ import {NodeType, type NodesConfig} from '../../core'; -import {Alert, ArrayBase, ArrayTable, Monaco, ObjectBase} from '../entities'; import { - Checkbox, - CheckboxGroup, - ColorPicker, - DateInput, + Alert, + ArrayEntity, + ArrayTable, DotValue, FewOfNested, - FileInput, Label, - MultiSelect, - NumberBase, - NumberWithScale, + Monaco, + ObjectEntity, ObjectInline, OneOfNested, - Password, - RadioGroup, - RangeInput, - RangeSlider, - SegmentedRadioGroup, - Select, - Slider, - StringBase, - StringNumberWithScale, - Switch, - TextArea, TextContent, +} from '../entities'; +import { + CheckboxGroupInput, + CheckboxInput, + ColorPickerInput, + DateInput, + FileInput, + MultiSelectInput, + NumberInput, + NumberWithScaleInput, + PasswordInput, + RadioGroupInput, + RangeInput, + RangeSliderInput, + SegmentedRadioGroupInput, + SelectInput, + SliderInput, + StringInput, + StringNumberWithScaleInput, + SwitchInput, + TextAreaInput, } from '../form-entities'; -import {Accordeon, Card, ColumnRow, Row, Section, Transparent} from '../form-layouts'; -import {OverviewBooleanBase, OverviewStringBase} from '../overview-entities'; -import {OverviewRow} from '../overview-layouts'; +import {FormColumn, FormRow} from '../form-layouts'; +import {Accordeon, Card, Section, Transparent} from '../layouts'; +import { + BooleanValue, + ColorPickerValue, + DateValue, + NumberValue, + NumberWithScaleValue, + PrimitiveArrayValue, + RangeValue, + StringNumberWithScaleValue, + StringValue, +} from '../overview-entities'; +import {OverviewColumn, OverviewRow} from '../overview-layouts'; export const untypedConfig = { [NodeType.Any]: { formEntities: { - date_input: {Component: DateInput}, + date: {Component: DateInput}, }, formLayouts: { - columnRow: {Component: ColumnRow}, - row: {Component: Row}, - section: {Component: Section}, - transparent: {Component: Transparent}, accordeon: {Component: Accordeon}, card: {Component: Card}, + cell: {Component: Transparent}, + column: {Component: FormColumn}, + row: {Component: FormRow}, + section: {Component: Section}, + transparent: {Component: Transparent}, + }, + overviewEntities: { + date: {Component: DateValue}, }, - overviewEntities: {}, overviewLayouts: { + accordeon: {Component: Accordeon}, + card: {Component: Card}, + cell: {Component: Transparent, defaultProps: {hideEmpty: false}}, + column: {Component: OverviewColumn}, row: {Component: OverviewRow}, + section: {Component: Section}, + transparent: {Component: Transparent}, }, validators: {}, }, [NodeType.Array]: { formEntities: { - base: {Component: ArrayBase}, - checkbox_group: {Component: CheckboxGroup}, - select: {Component: MultiSelect}, - array_table: {Component: ArrayTable}, + base: {Component: ArrayEntity}, + checkbox_group: {Component: CheckboxGroupInput}, + select: {Component: MultiSelectInput}, + table: {Component: ArrayTable}, }, formLayouts: { - columnRow: {Component: ColumnRow}, - row: {Component: Row}, - section: {Component: Section}, - transparent: {Component: Transparent}, accordeon: {Component: Accordeon}, card: {Component: Card}, + cell: {Component: Transparent}, + column: {Component: FormColumn}, + row: {Component: FormRow}, + section: {Component: Section}, + transparent: {Component: Transparent}, }, overviewEntities: { - base: {Component: ArrayBase}, + base: {Component: ArrayEntity}, + checkbox_group: {Component: PrimitiveArrayValue}, + select: {Component: PrimitiveArrayValue}, table: {Component: ArrayTable}, }, overviewLayouts: { + accordeon: {Component: Accordeon}, + card: {Component: Card}, + cell: {Component: Transparent, defaultProps: {hideEmpty: false}}, + column: {Component: OverviewColumn}, row: {Component: OverviewRow}, + section: {Component: Section}, + transparent: {Component: Transparent}, }, validators: {}, }, [NodeType.Boolean]: { - formEntities: {base: {Component: Checkbox}, switch: {Component: Switch}}, + formEntities: { + base: {Component: CheckboxInput}, + switch: {Component: SwitchInput}, + }, formLayouts: { - columnRow: {Component: ColumnRow}, - row: {Component: Row}, + accordeon: {Component: Accordeon}, + card: {Component: Card}, + cell: {Component: Transparent}, + column: {Component: FormColumn}, + row: {Component: FormRow}, section: {Component: Section}, transparent: {Component: Transparent}, - card: {Component: Card}, }, overviewEntities: { - base: {Component: OverviewBooleanBase}, - switch: {Component: OverviewBooleanBase}, + base: {Component: BooleanValue}, + switch: {Component: BooleanValue}, }, overviewLayouts: { + accordeon: {Component: Accordeon}, + card: {Component: Card}, + cell: {Component: Transparent, defaultProps: {hideEmpty: false}}, + column: {Component: OverviewColumn}, row: {Component: OverviewRow}, + section: {Component: Section}, + transparent: {Component: Transparent}, }, validators: {}, }, [NodeType.Number]: { formEntities: { - base: {Component: NumberBase}, - slider: {Component: Slider}, - number_with_scale: {Component: NumberWithScale}, + base: {Component: NumberInput}, + number_with_scale: {Component: NumberWithScaleInput}, + slider: {Component: SliderInput}, }, formLayouts: { - columnRow: {Component: ColumnRow}, - row: {Component: Row}, - section: {Component: Section}, - transparent: {Component: Transparent}, accordeon: {Component: Accordeon}, card: {Component: Card}, + cell: {Component: Transparent}, + column: {Component: FormColumn}, + row: {Component: FormRow}, + section: {Component: Section}, + transparent: {Component: Transparent}, + }, + overviewEntities: { + base: {Component: NumberValue}, + number_with_scale: {Component: NumberWithScaleValue}, + slider: {Component: NumberValue}, }, - overviewEntities: {}, overviewLayouts: { + accordeon: {Component: Accordeon}, + card: {Component: Card}, + cell: {Component: Transparent, defaultProps: {hideEmpty: false}}, + column: {Component: OverviewColumn}, row: {Component: OverviewRow}, + section: {Component: Section}, + transparent: {Component: Transparent}, }, validators: {}, }, [NodeType.Object]: { formEntities: { - base: {Component: ObjectBase}, - inline: {Component: ObjectInline}, + base: {Component: ObjectEntity}, dot_value: {Component: DotValue}, - range_input: {Component: RangeInput}, - range_slider: {Component: RangeSlider}, - one_of_nested: {Component: OneOfNested, independent: true}, few_of_nested: {Component: FewOfNested, independent: true}, + inline: {Component: ObjectInline}, + one_of_nested: {Component: OneOfNested, independent: true}, + range_input: {Component: RangeInput}, + range_slider: {Component: RangeSliderInput}, }, formLayouts: { - columnRow: {Component: ColumnRow}, - row: {Component: Row}, - section: {Component: Section}, - transparent: {Component: Transparent}, accordeon: {Component: Accordeon}, card: {Component: Card}, + cell: {Component: Transparent}, + column: {Component: FormColumn}, + row: {Component: FormRow}, + section: {Component: Section}, + transparent: {Component: Transparent}, }, overviewEntities: { - base: {Component: ObjectBase}, + base: {Component: ObjectEntity}, + dot_value: {Component: DotValue}, + few_of_nested: {Component: FewOfNested, independent: true}, + inline: {Component: ObjectInline}, + one_of_nested: {Component: OneOfNested, independent: true}, + range_input: {Component: RangeValue}, + range_slider: {Component: RangeValue}, }, overviewLayouts: { + accordeon: {Component: Accordeon}, + card: {Component: Card}, + cell: {Component: Transparent, defaultProps: {hideEmpty: false}}, + column: {Component: OverviewColumn}, row: {Component: OverviewRow}, + section: {Component: Section}, + transparent: {Component: Transparent}, }, validators: {}, }, [NodeType.String]: { formEntities: { - base: {Component: StringBase}, - color_picker: {Component: ColorPicker}, + alert: {Component: Alert}, + base: {Component: StringInput}, + color_picker: {Component: ColorPickerInput}, file: {Component: FileInput}, - password: {Component: Password}, - radio_group: {Component: RadioGroup}, - segmented_radio_group: {Component: SegmentedRadioGroup}, - select: {Component: Select}, - textarea: {Component: TextArea}, - text_content: {Component: TextContent}, label: {Component: Label}, - alert: {Component: Alert}, - string_number_with_scale: {Component: StringNumberWithScale}, monaco: {Component: Monaco}, + password: {Component: PasswordInput}, + radio_group: {Component: RadioGroupInput}, + segmented_radio_group: {Component: SegmentedRadioGroupInput}, + select: {Component: SelectInput}, + string_number_with_scale: {Component: StringNumberWithScaleInput}, + text_content: {Component: TextContent}, + textarea: {Component: TextAreaInput}, }, formLayouts: { - columnRow: {Component: ColumnRow}, - row: {Component: Row}, - section: {Component: Section}, - transparent: {Component: Transparent}, accordeon: {Component: Accordeon}, card: {Component: Card}, + cell: {Component: Transparent}, + column: {Component: FormColumn}, + row: {Component: FormRow}, + section: {Component: Section}, + transparent: {Component: Transparent}, }, overviewEntities: { - base: {Component: OverviewStringBase}, - color_picker: {Component: OverviewStringBase}, - // file: {Component: OverviewStringBase}, - password: {Component: OverviewStringBase}, - radio_group: {Component: OverviewStringBase}, - segmented_radio_group: {Component: OverviewStringBase}, - select: {Component: OverviewStringBase}, - textarea: {Component: OverviewStringBase}, - // text_content: {Component: OverviewStringBase}, - // label: {Component: OverviewStringBase}, alert: {Component: Alert}, - // string_number_with_scale: {Component: OverviewStringBase}, + base: {Component: StringValue}, + color_picker: {Component: ColorPickerValue}, + file: {Component: StringValue}, + label: {Component: Label}, monaco: {Component: Monaco}, + password: {Component: StringValue}, + radio_group: {Component: StringValue}, + segmented_radio_group: {Component: StringValue}, + select: {Component: StringValue}, + string_number_with_scale: {Component: StringNumberWithScaleValue}, + textarea: {Component: StringValue}, + text_content: {Component: TextContent}, }, overviewLayouts: { + accordeon: {Component: Accordeon}, + card: {Component: Card}, + cell: {Component: Transparent, defaultProps: {hideEmpty: false}}, + column: {Component: OverviewColumn}, row: {Component: OverviewRow}, + section: {Component: Section}, + transparent: {Component: Transparent}, }, validators: {}, }, diff --git a/src/lib/unstable/kit/constants/index.ts b/src/lib/unstable/kit/constants/index.ts index e4644b6a..c9898c4e 100644 --- a/src/lib/unstable/kit/constants/index.ts +++ b/src/lib/unstable/kit/constants/index.ts @@ -1,2 +1,2 @@ -export {DASH} from './common'; +export {DASH, DEFAULT_DATE_FORMAT} from './common'; export {config, untypedConfig} from './config'; diff --git a/src/lib/unstable/kit/entities/Alert/Alert.tsx b/src/lib/unstable/kit/entities/Alert/Alert.tsx index f65f5b0e..824bec6b 100644 --- a/src/lib/unstable/kit/entities/Alert/Alert.tsx +++ b/src/lib/unstable/kit/entities/Alert/Alert.tsx @@ -16,7 +16,7 @@ export interface AlertProps extends UIKitAlertProps { iconProps?: Partial; } -const AlertComponent: NodeEntity = ({props, schema}) => { +export const Alert: NodeEntity = ({props, schema}) => { const {iconName, iconProps, message, ...entityRestProps} = props; const icon = React.useMemo( @@ -49,5 +49,3 @@ const AlertComponent: NodeEntity = ({props, schema ); }; - -export const Alert = React.memo(AlertComponent); diff --git a/src/lib/unstable/kit/entities/ArrayBase/index.ts b/src/lib/unstable/kit/entities/ArrayBase/index.ts deleted file mode 100644 index 4c2b1817..00000000 --- a/src/lib/unstable/kit/entities/ArrayBase/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './ArrayBase'; diff --git a/src/lib/unstable/kit/entities/ArrayBase/ArrayBase.tsx b/src/lib/unstable/kit/entities/ArrayEntity/ArrayEntity.tsx similarity index 94% rename from src/lib/unstable/kit/entities/ArrayBase/ArrayBase.tsx rename to src/lib/unstable/kit/entities/ArrayEntity/ArrayEntity.tsx index 723a5d27..889b5856 100644 --- a/src/lib/unstable/kit/entities/ArrayBase/ArrayBase.tsx +++ b/src/lib/unstable/kit/entities/ArrayEntity/ArrayEntity.tsx @@ -11,13 +11,13 @@ import { } from '../../../core'; import {EmptyEntityValue, EntityContainer} from '../../components'; -export interface ArrayBaseProps { +export interface ArrayEntityProps { addButtonText?: string; addButtonPosition?: string; disabled?: boolean; } -const ArrayBaseComponent: NodeEntity = ({ +export const ArrayEntity: NodeEntity = ({ headName, input, mode, @@ -102,5 +102,3 @@ const ArrayBaseComponent: NodeEntity = ({ ); }; - -export const ArrayBase = React.memo(ArrayBaseComponent); diff --git a/src/lib/unstable/kit/entities/ArrayEntity/index.ts b/src/lib/unstable/kit/entities/ArrayEntity/index.ts new file mode 100644 index 00000000..d554c41e --- /dev/null +++ b/src/lib/unstable/kit/entities/ArrayEntity/index.ts @@ -0,0 +1 @@ +export {ArrayEntity, type ArrayEntityProps} from './ArrayEntity'; diff --git a/src/lib/unstable/kit/entities/ArrayTable/ArrayTable.tsx b/src/lib/unstable/kit/entities/ArrayTable/ArrayTable.tsx index 81342483..35f4a1ad 100644 --- a/src/lib/unstable/kit/entities/ArrayTable/ArrayTable.tsx +++ b/src/lib/unstable/kit/entities/ArrayTable/ArrayTable.tsx @@ -10,7 +10,7 @@ import { SchemaRendererMode, SchemaRendererNode, } from '../../../core'; -import {ArrayRemoveButton, EmptyEntityValue, EntityContainer} from '../../components'; +import {ArrayRemoveButton, EmptyEntityValue, EntityContainer, HTMLContent} from '../../components'; import {block} from '../../utils'; import './ArrayTable.scss'; @@ -23,7 +23,7 @@ export interface ArrayTableProps { disabled?: boolean; } -const ArrayTableComponent: NodeEntity = ({ +export const ArrayTable: NodeEntity = ({ headName, input, mode, @@ -135,7 +135,9 @@ const ArrayTableComponent: NodeEntity = ({
{word} {wIndex + 1 === array.length && column.schema.description ? ( - {column.schema.description} + + + ) : null}
))} @@ -190,5 +192,3 @@ const ArrayTableComponent: NodeEntity = ({ ); }; - -export const ArrayTable = React.memo(ArrayTableComponent); diff --git a/src/lib/unstable/kit/form-entities/DotValue/DotValue.tsx b/src/lib/unstable/kit/entities/DotValue/DotValue.tsx similarity index 64% rename from src/lib/unstable/kit/form-entities/DotValue/DotValue.tsx rename to src/lib/unstable/kit/entities/DotValue/DotValue.tsx index 6290c2aa..bf93ce43 100644 --- a/src/lib/unstable/kit/form-entities/DotValue/DotValue.tsx +++ b/src/lib/unstable/kit/entities/DotValue/DotValue.tsx @@ -3,22 +3,29 @@ import React from 'react'; import get from 'lodash/get'; import isString from 'lodash/isString'; -import {type JsonSchemaObject, type NodeEntity, SchemaRendererNode} from '../../../core'; -import {EntityContainer} from '../../components'; +import { + type JsonSchemaObject, + type NodeEntity, + SchemaRendererMode, + SchemaRendererNode, +} from '../../../core'; +import {EmptyEntityValue, EntityContainer} from '../../components'; export interface DotValueProps {} -const DotValueComponent: NodeEntity = ({ - input, +export const DotValue: NodeEntity = ({ headName, + input, + mode, schemaPath, }) => { const {name, onBlur, onChange, onFocus, value} = input; const childKey = 'value'; + const overviewFlag = mode === SchemaRendererMode.Overview; React.useLayoutEffect(() => { - if (value) { + if (value && !overviewFlag) { const childValue = get(value, childKey); if ( @@ -34,8 +41,12 @@ const DotValueComponent: NodeEntity = ({ } }, [value]); + if (overviewFlag && Object.keys(value || {}).length === 0) { + return ; + } + return ( - + = ({ ); }; - -export const DotValue = React.memo(DotValueComponent); diff --git a/src/lib/unstable/kit/form-entities/DotValue/index.ts b/src/lib/unstable/kit/entities/DotValue/index.ts similarity index 100% rename from src/lib/unstable/kit/form-entities/DotValue/index.ts rename to src/lib/unstable/kit/entities/DotValue/index.ts diff --git a/src/lib/unstable/kit/form-entities/FewOfNested/FewOfNested.scss b/src/lib/unstable/kit/entities/FewOfNested/FewOfNested.scss similarity index 94% rename from src/lib/unstable/kit/form-entities/FewOfNested/FewOfNested.scss rename to src/lib/unstable/kit/entities/FewOfNested/FewOfNested.scss index e8877470..2b7e1873 100644 --- a/src/lib/unstable/kit/form-entities/FewOfNested/FewOfNested.scss +++ b/src/lib/unstable/kit/entities/FewOfNested/FewOfNested.scss @@ -3,6 +3,8 @@ .#{$ns}few-of-nested { &__content { + margin-top: spacing(4); + &_with-indent { position: relative; padding-left: spacing(7); diff --git a/src/lib/unstable/kit/form-entities/FewOfNested/FewOfNested.tsx b/src/lib/unstable/kit/entities/FewOfNested/FewOfNested.tsx similarity index 86% rename from src/lib/unstable/kit/form-entities/FewOfNested/FewOfNested.tsx rename to src/lib/unstable/kit/entities/FewOfNested/FewOfNested.tsx index 6b762ccf..ec102207 100644 --- a/src/lib/unstable/kit/form-entities/FewOfNested/FewOfNested.tsx +++ b/src/lib/unstable/kit/entities/FewOfNested/FewOfNested.tsx @@ -12,12 +12,12 @@ import { getRenderKit, useSchemaRendererState, } from '../../../core'; -import {EntityContainer} from '../../components'; +import {EntityContainer, LayoutContainer} from '../../components'; import {block} from '../../utils'; import './FewOfNested.scss'; -const b = block('one-of-nested'); +const b = block('few-of-nested'); export interface FewOfNestedProps { toggler: JsonSchema; @@ -25,7 +25,7 @@ export interface FewOfNestedProps { togglerArrayRemoveButton?: boolean; } -const FewOfNestedComponent: NodeEntity = ({ +export const FewOfNested: NodeEntity = ({ Layout, headName, input, @@ -43,6 +43,8 @@ const FewOfNestedComponent: NodeEntity = ({ withIndent = false, } = props; + const overviewFlag = mode === SchemaRendererMode.Overview; + const srState = useSchemaRendererState({ headName, subscriptions: [SchemaRendererEventType.Config], @@ -63,8 +65,7 @@ const FewOfNestedComponent: NodeEntity = ({ const toggler = React.useMemo(() => { let result: React.ReactNode = null; const renderKit = getRenderKit({config: srState?.config, schema: togglerSchema}); - const {Entity, Layout, entityProps, independent, layoutProps} = - renderKit[SchemaRendererMode.Form]; + const {Entity, Layout, entityProps, independent, layoutProps} = renderKit[mode]; const togglerInput = { ...input, name: togglerArrayRemoveButton ? name : `${name}._____toggler`, @@ -137,10 +138,12 @@ const FewOfNestedComponent: NodeEntity = ({ }, [name, input, togglerArrayRemoveButton]); let content = ( - - {toggler} + {togglerValues.length ? ( -
+ {togglerValues.map((togglerValue) => ( = ({ schemaPath={`${schemaPath}/properties/${togglerValue}`} /> ))} -
+ ) : null} + {toggler} ); + if (overviewFlag && togglerValues.length === 0) { + content = {toggler}; + } + if (Layout) { content = ( = ({ return content; }; - -export const FewOfNested = React.memo(FewOfNestedComponent); diff --git a/src/lib/unstable/kit/form-entities/FewOfNested/index.ts b/src/lib/unstable/kit/entities/FewOfNested/index.ts similarity index 100% rename from src/lib/unstable/kit/form-entities/FewOfNested/index.ts rename to src/lib/unstable/kit/entities/FewOfNested/index.ts diff --git a/src/lib/unstable/kit/form-entities/Label/Label.tsx b/src/lib/unstable/kit/entities/Label/Label.tsx similarity index 71% rename from src/lib/unstable/kit/form-entities/Label/Label.tsx rename to src/lib/unstable/kit/entities/Label/Label.tsx index 8d3221be..c5e81072 100644 --- a/src/lib/unstable/kit/form-entities/Label/Label.tsx +++ b/src/lib/unstable/kit/entities/Label/Label.tsx @@ -8,7 +8,7 @@ import { type LabelProps as UIKitLabelProps, } from '@gravity-ui/uikit'; -import type {JsonSchemaString, NodeEntity} from '../../../core'; +import {type JsonSchemaString, type NodeEntity, SchemaRendererMode} from '../../../core'; import {EntityContainer} from '../../components'; export interface LabelProps extends UIKitLabelProps { @@ -16,10 +16,12 @@ export interface LabelProps extends UIKitLabelProps { iconProps?: Partial; } -const LabelComponent: NodeEntity = ({input, props, schema}) => { +export const Label: NodeEntity = ({input, mode, props, schema}) => { const {value} = input; const {iconName, iconProps, title, ...restEntityProps} = props; + const overviewFlag = mode === SchemaRendererMode.Overview; + const icon = React.useMemo( () => iconName && icons[iconName] ? ( @@ -45,12 +47,15 @@ const LabelComponent: NodeEntity = ({input, props, }, [title, schema.description]); return ( - - + + {content} ); }; - -export const Label = React.memo(LabelComponent); diff --git a/src/lib/unstable/kit/form-entities/Label/index.ts b/src/lib/unstable/kit/entities/Label/index.ts similarity index 100% rename from src/lib/unstable/kit/form-entities/Label/index.ts rename to src/lib/unstable/kit/entities/Label/index.ts diff --git a/src/lib/unstable/kit/entities/Monaco/Monaco.tsx b/src/lib/unstable/kit/entities/Monaco/Monaco.tsx index a141e8da..44cedea5 100644 --- a/src/lib/unstable/kit/entities/Monaco/Monaco.tsx +++ b/src/lib/unstable/kit/entities/Monaco/Monaco.tsx @@ -25,7 +25,7 @@ export interface MonacoProps withoutDialog?: boolean; } -const MonacoComponent: NodeEntity = ({ +export const Monaco: NodeEntity = ({ headName, input, meta, @@ -207,5 +207,3 @@ const MonacoComponent: NodeEntity = ({ ); }; - -export const Monaco = React.memo(MonacoComponent); diff --git a/src/lib/unstable/kit/entities/ObjectBase/index.ts b/src/lib/unstable/kit/entities/ObjectBase/index.ts deleted file mode 100644 index e0954609..00000000 --- a/src/lib/unstable/kit/entities/ObjectBase/index.ts +++ /dev/null @@ -1 +0,0 @@ -export {ObjectBase, type ObjectBaseProps} from './ObjectBase'; diff --git a/src/lib/unstable/kit/entities/ObjectBase/ObjectBase.tsx b/src/lib/unstable/kit/entities/ObjectEntity/ObjectEntity.tsx similarity index 85% rename from src/lib/unstable/kit/entities/ObjectBase/ObjectBase.tsx rename to src/lib/unstable/kit/entities/ObjectEntity/ObjectEntity.tsx index dad81f03..01ef73f3 100644 --- a/src/lib/unstable/kit/entities/ObjectBase/ObjectBase.tsx +++ b/src/lib/unstable/kit/entities/ObjectEntity/ObjectEntity.tsx @@ -8,12 +8,12 @@ import { } from '../../../core'; import {EmptyEntityValue, EntityContainer} from '../../components'; -export interface ObjectBaseProps { +export interface ObjectEntityProps { disabled?: boolean; order?: string[]; } -const ObjectBaseComponent: NodeEntity = ({ +export const ObjectEntity: NodeEntity = ({ headName, mode, input, @@ -42,5 +42,3 @@ const ObjectBaseComponent: NodeEntity = ({ ); }; - -export const ObjectBase = React.memo(ObjectBaseComponent); diff --git a/src/lib/unstable/kit/entities/ObjectEntity/index.ts b/src/lib/unstable/kit/entities/ObjectEntity/index.ts new file mode 100644 index 00000000..23b3ccac --- /dev/null +++ b/src/lib/unstable/kit/entities/ObjectEntity/index.ts @@ -0,0 +1 @@ +export {ObjectEntity, type ObjectEntityProps} from './ObjectEntity'; diff --git a/src/lib/unstable/kit/form-entities/ObjectInline/ObjectInline.scss b/src/lib/unstable/kit/entities/ObjectInline/ObjectInline.scss similarity index 67% rename from src/lib/unstable/kit/form-entities/ObjectInline/ObjectInline.scss rename to src/lib/unstable/kit/entities/ObjectInline/ObjectInline.scss index 82b112ff..91605010 100644 --- a/src/lib/unstable/kit/form-entities/ObjectInline/ObjectInline.scss +++ b/src/lib/unstable/kit/entities/ObjectInline/ObjectInline.scss @@ -8,6 +8,14 @@ } } + &__items { + &_overview { + .#{$ns}object-inline__delimiter { + min-height: 18px; + } + } + } + &__delimiter { min-height: 28px; display: flex; diff --git a/src/lib/unstable/kit/form-entities/ObjectInline/ObjectInline.tsx b/src/lib/unstable/kit/entities/ObjectInline/ObjectInline.tsx similarity index 65% rename from src/lib/unstable/kit/form-entities/ObjectInline/ObjectInline.tsx rename to src/lib/unstable/kit/entities/ObjectInline/ObjectInline.tsx index f33a748d..04e72ff8 100644 --- a/src/lib/unstable/kit/form-entities/ObjectInline/ObjectInline.tsx +++ b/src/lib/unstable/kit/entities/ObjectInline/ObjectInline.tsx @@ -4,8 +4,13 @@ import {Flex, Text} from '@gravity-ui/uikit'; import isObject from 'lodash/isObject'; import isString from 'lodash/isString'; -import {type JsonSchemaObject, type NodeEntity, SchemaRendererNode} from '../../../core'; -import {EntityContainer} from '../../components'; +import { + type JsonSchemaObject, + type NodeEntity, + SchemaRendererMode, + SchemaRendererNode, +} from '../../../core'; +import {EmptyEntityValue, EntityContainer} from '../../components'; import {block} from '../../utils'; import './ObjectInline.scss'; @@ -18,9 +23,10 @@ export interface ObjectInlineProps { order?: string[]; } -const ObjectInlineComponent: NodeEntity = ({ +export const ObjectInline: NodeEntity = ({ headName, input, + mode, props, schema, schemaPath, @@ -28,9 +34,24 @@ const ObjectInlineComponent: NodeEntity = ( const {delimiter, order} = props; const {name} = input; + const overviewFlag = mode === SchemaRendererMode.Overview; + + if (overviewFlag && !Object.keys(schema.properties || {}).length) { + return ; + } + return ( - - + + {(order || Object.keys(schema.properties || {})).map( (property: string, index: number, array: string[]) => ( @@ -52,5 +73,3 @@ const ObjectInlineComponent: NodeEntity = ( ); }; - -export const ObjectInline = React.memo(ObjectInlineComponent); diff --git a/src/lib/unstable/kit/form-entities/ObjectInline/index.ts b/src/lib/unstable/kit/entities/ObjectInline/index.ts similarity index 100% rename from src/lib/unstable/kit/form-entities/ObjectInline/index.ts rename to src/lib/unstable/kit/entities/ObjectInline/index.ts diff --git a/src/lib/unstable/kit/form-entities/OneOfNested/OneOfNested.scss b/src/lib/unstable/kit/entities/OneOfNested/OneOfNested.scss similarity index 94% rename from src/lib/unstable/kit/form-entities/OneOfNested/OneOfNested.scss rename to src/lib/unstable/kit/entities/OneOfNested/OneOfNested.scss index 42f185e2..e0685b06 100644 --- a/src/lib/unstable/kit/form-entities/OneOfNested/OneOfNested.scss +++ b/src/lib/unstable/kit/entities/OneOfNested/OneOfNested.scss @@ -3,6 +3,8 @@ .#{$ns}one-of-nested { &__content { + margin-top: spacing(4); + &_with-indent { position: relative; padding-left: spacing(7); diff --git a/src/lib/unstable/kit/form-entities/OneOfNested/OneOfNested.tsx b/src/lib/unstable/kit/entities/OneOfNested/OneOfNested.tsx similarity index 73% rename from src/lib/unstable/kit/form-entities/OneOfNested/OneOfNested.tsx rename to src/lib/unstable/kit/entities/OneOfNested/OneOfNested.tsx index 8c4b901d..9ecc345c 100644 --- a/src/lib/unstable/kit/form-entities/OneOfNested/OneOfNested.tsx +++ b/src/lib/unstable/kit/entities/OneOfNested/OneOfNested.tsx @@ -11,7 +11,7 @@ import { getRenderKit, useSchemaRendererState, } from '../../../core'; -import {EntityContainer} from '../../components'; +import {EntityContainer, LayoutContainer} from '../../components'; import {block} from '../../utils'; import './OneOfNested.scss'; @@ -25,7 +25,7 @@ export interface OneOfNestedProps { togglerArrayRemoveButton?: boolean; } -const OneOfNestedComponent: NodeEntity = ({ +export const OneOfNested: NodeEntity = ({ Layout, headName, input, @@ -44,28 +44,30 @@ const OneOfNestedComponent: NodeEntity = ({ withIndent = false, } = props; + const overviewFlag = mode === SchemaRendererMode.Overview; + const srState = useSchemaRendererState({ headName, subscriptions: [SchemaRendererEventType.Config], }); - const [togglerValue, setTogglerValue] = React.useState( - Object.keys(value || schema.properties || {})[0] || '', + const [togglerValue, setTogglerValue] = React.useState( + Object.keys(value || (overviewFlag ? undefined : schema.properties) || {})[0], ); const toggler = React.useMemo(() => { let result: React.ReactNode = null; const renderKit = getRenderKit({config: srState?.config, schema: togglerSchema}); - const {Entity, Layout, entityProps, independent, layoutProps} = - renderKit[SchemaRendererMode.Form]; + const {Entity, Layout, entityProps, independent, layoutProps} = renderKit[mode]; const togglerInput = { ...input, name: togglerArrayRemoveButton ? name : `${name}._____toggler`, value: - (togglerSchema.nodeParameters?.type === NodeType.Boolean && - booleanToKey && - booleanToKey.true === togglerValue) ?? - togglerValue, + togglerSchema.nodeParameters?.type === NodeType.Boolean && + booleanToKey && + togglerValue !== undefined + ? booleanToKey.true === togglerValue + : togglerValue, onChange: (value: unknown) => { const nextValue = `${value}`; @@ -135,18 +137,27 @@ const OneOfNestedComponent: NodeEntity = ({ }, [name, input, togglerArrayRemoveButton]); let content = ( - + + {togglerValue === undefined ? null : ( + + + + )} {toggler} -
- -
); + if (overviewFlag && Object.values(value || {}).length === 0) { + content = {toggler}; + } + if (Layout) { content = ( = ({ return content; }; - -export const OneOfNested = React.memo(OneOfNestedComponent); diff --git a/src/lib/unstable/kit/form-entities/OneOfNested/index.ts b/src/lib/unstable/kit/entities/OneOfNested/index.ts similarity index 100% rename from src/lib/unstable/kit/form-entities/OneOfNested/index.ts rename to src/lib/unstable/kit/entities/OneOfNested/index.ts diff --git a/src/lib/unstable/kit/form-entities/TextContent/TextContent.scss b/src/lib/unstable/kit/entities/TextContent/TextContent.scss similarity index 54% rename from src/lib/unstable/kit/form-entities/TextContent/TextContent.scss rename to src/lib/unstable/kit/entities/TextContent/TextContent.scss index af7aa792..b708579b 100644 --- a/src/lib/unstable/kit/form-entities/TextContent/TextContent.scss +++ b/src/lib/unstable/kit/entities/TextContent/TextContent.scss @@ -1,3 +1,4 @@ +@import '../../styles/functions.scss'; @import '../../styles/variables.scss'; .#{$ns}text-content { @@ -5,6 +6,14 @@ box-shadow: none; &.g-label { + .g-label__addon_side_start { + position: unset; + } + + .g-label__text { + margin-left: spacing(1); + } + &:not(:has(.g-label__addon_side_start)) .g-label__text { margin-left: 0; } @@ -12,5 +21,9 @@ .g-label__separator { margin-left: 0; } + + .g-label__addon { + width: auto; + } } } diff --git a/src/lib/unstable/kit/form-entities/TextContent/TextContent.tsx b/src/lib/unstable/kit/entities/TextContent/TextContent.tsx similarity index 82% rename from src/lib/unstable/kit/form-entities/TextContent/TextContent.tsx rename to src/lib/unstable/kit/entities/TextContent/TextContent.tsx index b24f5c82..978cb034 100644 --- a/src/lib/unstable/kit/form-entities/TextContent/TextContent.tsx +++ b/src/lib/unstable/kit/entities/TextContent/TextContent.tsx @@ -8,7 +8,7 @@ import { type LabelProps as UIKitLabelProps, } from '@gravity-ui/uikit'; -import type {JsonSchemaString, NodeEntity} from '../../../core'; +import {type JsonSchemaString, type NodeEntity, SchemaRendererMode} from '../../../core'; import {EntityContainer} from '../../components'; import {block} from '../../utils'; @@ -21,13 +21,16 @@ export interface TextContentProps extends Omit { iconProps?: Partial; } -const TextContentComponent: NodeEntity = ({ +export const TextContent: NodeEntity = ({ input, + mode, props, schema, }) => { const {className, iconName, iconProps, title: titleProp, ...restEntityProps} = props; + const overviewFlag = mode === SchemaRendererMode.Overview; + const icon = React.useMemo( () => iconName && icons[iconName] ? ( @@ -53,9 +56,9 @@ const TextContentComponent: NodeEntity = ({ }, [titleProp, schema.description]); return ( - + = ({ ); }; - -export const TextContent = React.memo(TextContentComponent); diff --git a/src/lib/unstable/kit/form-entities/TextContent/index.ts b/src/lib/unstable/kit/entities/TextContent/index.ts similarity index 100% rename from src/lib/unstable/kit/form-entities/TextContent/index.ts rename to src/lib/unstable/kit/entities/TextContent/index.ts diff --git a/src/lib/unstable/kit/entities/index.ts b/src/lib/unstable/kit/entities/index.ts index 18985488..da5d8b1f 100644 --- a/src/lib/unstable/kit/entities/index.ts +++ b/src/lib/unstable/kit/entities/index.ts @@ -1,5 +1,11 @@ export {Alert, type AlertProps} from './Alert'; -export {ArrayBase, type ArrayBaseProps} from './ArrayBase'; +export {ArrayEntity, type ArrayEntityProps} from './ArrayEntity'; export {ArrayTable, type ArrayTableProps} from './ArrayTable'; +export {DotValue, type DotValueProps} from './DotValue'; +export {FewOfNested, type FewOfNestedProps} from './FewOfNested'; +export {Label, type LabelProps} from './Label'; export {Monaco, type MonacoProps} from './Monaco'; -export {ObjectBase, type ObjectBaseProps} from './ObjectBase'; +export {ObjectEntity, type ObjectEntityProps} from './ObjectEntity'; +export {ObjectInline, type ObjectInlineProps} from './ObjectInline'; +export {OneOfNested, type OneOfNestedProps} from './OneOfNested'; +export {TextContent, type TextContentProps} from './TextContent'; diff --git a/src/lib/unstable/kit/form-entities/Checkbox/index.ts b/src/lib/unstable/kit/form-entities/Checkbox/index.ts deleted file mode 100644 index fd0eb3f1..00000000 --- a/src/lib/unstable/kit/form-entities/Checkbox/index.ts +++ /dev/null @@ -1 +0,0 @@ -export {Checkbox, type CheckboxProps} from './Checkbox'; diff --git a/src/lib/unstable/kit/form-entities/CheckboxGroup/index.ts b/src/lib/unstable/kit/form-entities/CheckboxGroup/index.ts deleted file mode 100644 index 4fc534f4..00000000 --- a/src/lib/unstable/kit/form-entities/CheckboxGroup/index.ts +++ /dev/null @@ -1 +0,0 @@ -export {CheckboxGroup, type CheckboxGroupProps} from './CheckboxGroup'; diff --git a/src/lib/unstable/kit/form-entities/CheckboxGroup/CheckboxGroup.scss b/src/lib/unstable/kit/form-entities/CheckboxGroupInput/CheckboxGroupInput.scss similarity index 94% rename from src/lib/unstable/kit/form-entities/CheckboxGroup/CheckboxGroup.scss rename to src/lib/unstable/kit/form-entities/CheckboxGroupInput/CheckboxGroupInput.scss index 1d192d91..12cab71b 100644 --- a/src/lib/unstable/kit/form-entities/CheckboxGroup/CheckboxGroup.scss +++ b/src/lib/unstable/kit/form-entities/CheckboxGroupInput/CheckboxGroupInput.scss @@ -1,6 +1,6 @@ @import '../../styles/variables.scss'; -.#{$ns}checkbox-group { +.#{$ns}checkbox-group-input { &__checkbox { min-height: 28px; diff --git a/src/lib/unstable/kit/form-entities/CheckboxGroup/CheckboxGroup.tsx b/src/lib/unstable/kit/form-entities/CheckboxGroupInput/CheckboxGroupInput.tsx similarity index 91% rename from src/lib/unstable/kit/form-entities/CheckboxGroup/CheckboxGroup.tsx rename to src/lib/unstable/kit/form-entities/CheckboxGroupInput/CheckboxGroupInput.tsx index 36a2e3b4..d8cc0cd3 100644 --- a/src/lib/unstable/kit/form-entities/CheckboxGroup/CheckboxGroup.tsx +++ b/src/lib/unstable/kit/form-entities/CheckboxGroupInput/CheckboxGroupInput.tsx @@ -6,18 +6,18 @@ import type {JsonSchemaArray, NodeEntity} from '../../../core'; import {EntityContainer} from '../../components'; import {block, getBooleanValidationState} from '../../utils'; -import './CheckboxGroup.scss'; +import './CheckboxGroupInput.scss'; -const b = block('checkbox-group'); +const b = block('checkbox-group-input'); -export interface CheckboxGroupProps { +export interface CheckboxGroupInputProps { enumDescriptions?: Record; optionsDisabled?: Record; direction?: 'row' | 'column'; disabled?: boolean; } -const CheckboxGroupComponent: NodeEntity = ({ +export const CheckboxGroupInput: NodeEntity = ({ input, props, meta, @@ -89,5 +89,3 @@ const CheckboxGroupComponent: NodeEntity = ); }; - -export const CheckboxGroup = React.memo(CheckboxGroupComponent); diff --git a/src/lib/unstable/kit/form-entities/CheckboxGroupInput/index.ts b/src/lib/unstable/kit/form-entities/CheckboxGroupInput/index.ts new file mode 100644 index 00000000..abeea01f --- /dev/null +++ b/src/lib/unstable/kit/form-entities/CheckboxGroupInput/index.ts @@ -0,0 +1 @@ +export {CheckboxGroupInput, type CheckboxGroupInputProps} from './CheckboxGroupInput'; diff --git a/src/lib/unstable/kit/form-entities/Checkbox/Checkbox.scss b/src/lib/unstable/kit/form-entities/CheckboxInput/CheckboxInput.scss similarity index 95% rename from src/lib/unstable/kit/form-entities/Checkbox/Checkbox.scss rename to src/lib/unstable/kit/form-entities/CheckboxInput/CheckboxInput.scss index cb235923..951c2f2b 100644 --- a/src/lib/unstable/kit/form-entities/Checkbox/Checkbox.scss +++ b/src/lib/unstable/kit/form-entities/CheckboxInput/CheckboxInput.scss @@ -1,6 +1,6 @@ @import '../../styles/variables.scss'; -.#{$ns}checkbox { +.#{$ns}checkbox-input { min-height: 28px; display: flex; justify-content: center; diff --git a/src/lib/unstable/kit/form-entities/Checkbox/Checkbox.tsx b/src/lib/unstable/kit/form-entities/CheckboxInput/CheckboxInput.tsx similarity index 72% rename from src/lib/unstable/kit/form-entities/Checkbox/Checkbox.tsx rename to src/lib/unstable/kit/form-entities/CheckboxInput/CheckboxInput.tsx index 7e2e20c3..a2e2dee1 100644 --- a/src/lib/unstable/kit/form-entities/Checkbox/Checkbox.tsx +++ b/src/lib/unstable/kit/form-entities/CheckboxInput/CheckboxInput.tsx @@ -1,25 +1,22 @@ import React from 'react'; -import { - Checkbox as UIKitCheckbox, - type CheckboxProps as UIKitCheckboxProps, -} from '@gravity-ui/uikit'; +import {Checkbox, type CheckboxProps} from '@gravity-ui/uikit'; import type {JsonSchemaBoolean, NodeEntity} from '../../../core'; import {EntityContainer} from '../../components'; import {block, getBooleanValidationState} from '../../utils'; -import './Checkbox.scss'; +import './CheckboxInput.scss'; -const b = block('checkbox'); +const b = block('checkbox-input'); -export interface CheckboxProps +export interface CheckboxInputProps extends Omit< - UIKitCheckboxProps, + CheckboxProps, 'checked' | 'onFocus' | 'onBlur' | 'onChange' | 'onUpdate' | 'qa' > {} -const CheckboxComponent: NodeEntity = ({ +export const CheckboxInput: NodeEntity = ({ input, props, meta, @@ -38,7 +35,7 @@ const CheckboxComponent: NodeEntity = ({ return ( - = ({ ); }; - -export const Checkbox = React.memo(CheckboxComponent); diff --git a/src/lib/unstable/kit/form-entities/CheckboxInput/index.ts b/src/lib/unstable/kit/form-entities/CheckboxInput/index.ts new file mode 100644 index 00000000..56a4ee41 --- /dev/null +++ b/src/lib/unstable/kit/form-entities/CheckboxInput/index.ts @@ -0,0 +1 @@ +export {CheckboxInput, type CheckboxInputProps} from './CheckboxInput'; diff --git a/src/lib/unstable/kit/form-entities/ColorPicker/index.ts b/src/lib/unstable/kit/form-entities/ColorPicker/index.ts deleted file mode 100644 index 2d0196a0..00000000 --- a/src/lib/unstable/kit/form-entities/ColorPicker/index.ts +++ /dev/null @@ -1 +0,0 @@ -export {ColorPicker, type ColorPickerProps} from './ColorPicker'; diff --git a/src/lib/unstable/kit/form-entities/ColorPicker/ColorPicker.scss b/src/lib/unstable/kit/form-entities/ColorPickerInput/ColorPickerInput.scss similarity index 91% rename from src/lib/unstable/kit/form-entities/ColorPicker/ColorPicker.scss rename to src/lib/unstable/kit/form-entities/ColorPickerInput/ColorPickerInput.scss index fddd3e03..18dfe178 100644 --- a/src/lib/unstable/kit/form-entities/ColorPicker/ColorPicker.scss +++ b/src/lib/unstable/kit/form-entities/ColorPickerInput/ColorPickerInput.scss @@ -1,6 +1,6 @@ @import '../../styles/variables.scss'; -.#{$ns}color-picker { +.#{$ns}color-picker-input { .g-color-picker__picker-wrapper { width: 100%; } diff --git a/src/lib/unstable/kit/form-entities/ColorPicker/ColorPicker.tsx b/src/lib/unstable/kit/form-entities/ColorPickerInput/ColorPickerInput.tsx similarity index 73% rename from src/lib/unstable/kit/form-entities/ColorPicker/ColorPicker.tsx rename to src/lib/unstable/kit/form-entities/ColorPickerInput/ColorPickerInput.tsx index 2a603840..81d8f06e 100644 --- a/src/lib/unstable/kit/form-entities/ColorPicker/ColorPicker.tsx +++ b/src/lib/unstable/kit/form-entities/ColorPickerInput/ColorPickerInput.tsx @@ -1,21 +1,21 @@ import React from 'react'; import { - unstable_ColorPicker as UIKitColorPicker, - type unstable_ColorPickerProps as UIKitColorPickerProps, + unstable_ColorPicker as ColorPicker, + type unstable_ColorPickerProps as ColorPickerProps, } from '@gravity-ui/uikit/unstable'; import type {JsonSchemaString, NodeEntity} from '../../../core'; import {EntityContainer} from '../../components'; import {block, getBooleanValidationState} from '../../utils'; -import './ColorPicker.scss'; +import './ColorPickerInput.scss'; -const b = block('color-picker'); +const b = block('color-picker-input'); -export interface ColorPickerProps extends Omit {} +export interface ColorPickerInputProps extends Omit {} -const ColorPickerComponent: NodeEntity = ({ +export const ColorPickerInput: NodeEntity = ({ input, props, meta, @@ -39,7 +39,7 @@ const ColorPickerComponent: NodeEntity = ({ return ( - = ({ ); }; - -export const ColorPicker = React.memo(ColorPickerComponent); diff --git a/src/lib/unstable/kit/form-entities/ColorPickerInput/index.ts b/src/lib/unstable/kit/form-entities/ColorPickerInput/index.ts new file mode 100644 index 00000000..06f80f8c --- /dev/null +++ b/src/lib/unstable/kit/form-entities/ColorPickerInput/index.ts @@ -0,0 +1 @@ +export {ColorPickerInput, type ColorPickerInputProps} from './ColorPickerInput'; diff --git a/src/lib/unstable/kit/form-entities/DateInput/DateInput.tsx b/src/lib/unstable/kit/form-entities/DateInput/DateInput.tsx index ba5ed784..9ed476dc 100644 --- a/src/lib/unstable/kit/form-entities/DateInput/DateInput.tsx +++ b/src/lib/unstable/kit/form-entities/DateInput/DateInput.tsx @@ -1,18 +1,17 @@ import React from 'react'; import {DatePicker, type DatePickerProps} from '@gravity-ui/date-components'; -import {type DateTime, dateTimeParse, isValidTimeZone} from '@gravity-ui/date-utils'; +import {type DateTime, isValidTimeZone} from '@gravity-ui/date-utils'; import type {JsonSchemaAny, NodeEntity} from '../../../core'; import {EntityContainer} from '../../components'; -import {block, getBooleanValidationState} from '../../utils'; +import {DEFAULT_DATE_FORMAT} from '../../constants'; +import {block, getBooleanValidationState, parseDate} from '../../utils'; import './DateInput.scss'; const b = block('date-input'); -export const DEFAULT_DATE_FORMAT = 'DD.MM.YYYY HH:mm'; - export interface DateInputProps extends Omit< DatePickerProps, @@ -27,14 +26,19 @@ export interface DateInputProps outputFormat?: string; } -const DateInputComponent: NodeEntity = ({ +export const DateInput: NodeEntity = ({ input, meta, props, schema, }) => { const {name, onBlur, onChange, onFocus, value: inputValue} = input; - const {outputFormat, timeZone: timeZoneProp, ...restEntityProps} = props; + const { + format = DEFAULT_DATE_FORMAT, + outputFormat, + timeZone: timeZoneProp, + ...restEntityProps + } = props; const timeZone = timeZoneProp && isValidTimeZone(timeZoneProp) ? timeZoneProp : undefined; @@ -78,24 +82,15 @@ const DateInputComponent: NodeEntity = ({ [outputFormat, onChange], ); - const value = React.useMemo(() => { - if (!inputValue) { - return null; - } - - let raw = inputValue as {seconds?: number} | string | number | Date | null | undefined; - - if (typeof raw === 'object' && raw !== null && 'seconds' in raw && raw.seconds) { - raw = raw.seconds * 1000; - } - - return dateTimeParse(raw, {format: outputFormat, timeZone}) || null; - }, [inputValue, outputFormat, timeZone]); + const value = React.useMemo( + () => parseDate(inputValue, outputFormat, timeZone), + [inputValue, outputFormat, timeZone], + ); return ( = ({ ); }; - -export const DateInput = React.memo(DateInputComponent); diff --git a/src/lib/unstable/kit/form-entities/FileInput/FileInput.tsx b/src/lib/unstable/kit/form-entities/FileInput/FileInput.tsx index 18ff4aff..22d8960a 100644 --- a/src/lib/unstable/kit/form-entities/FileInput/FileInput.tsx +++ b/src/lib/unstable/kit/form-entities/FileInput/FileInput.tsx @@ -16,7 +16,7 @@ export interface FileInputProps readAsMethod?: 'readAsBinaryString' | 'readAsDataURL' | 'readAsText'; } -const FileInputComponent: NodeEntity = ({ +export const FileInput: NodeEntity = ({ input, meta, props, @@ -92,5 +92,3 @@ const FileInputComponent: NodeEntity = ({ ); }; - -export const FileInput = React.memo(FileInputComponent); diff --git a/src/lib/unstable/kit/form-entities/MultiSelect/index.ts b/src/lib/unstable/kit/form-entities/MultiSelect/index.ts deleted file mode 100644 index 9f420fac..00000000 --- a/src/lib/unstable/kit/form-entities/MultiSelect/index.ts +++ /dev/null @@ -1 +0,0 @@ -export {MultiSelect, type MultiSelectProps} from './MultiSelect'; diff --git a/src/lib/unstable/kit/form-entities/MultiSelect/MultiSelect.tsx b/src/lib/unstable/kit/form-entities/MultiSelectInput/MultiSelectInput.tsx similarity index 77% rename from src/lib/unstable/kit/form-entities/MultiSelect/MultiSelect.tsx rename to src/lib/unstable/kit/form-entities/MultiSelectInput/MultiSelectInput.tsx index 5bdde428..5fa9cd69 100644 --- a/src/lib/unstable/kit/form-entities/MultiSelect/MultiSelect.tsx +++ b/src/lib/unstable/kit/form-entities/MultiSelectInput/MultiSelectInput.tsx @@ -1,21 +1,15 @@ import React from 'react'; -import { - Flex, - Text, - Select as UIKitSelect, - type SelectOption as UIKitSelectOption, - type SelectProps as UIKitSelectProps, -} from '@gravity-ui/uikit'; +import {Flex, Select, type SelectOption, type SelectProps, Text} from '@gravity-ui/uikit'; import isString from 'lodash/isString'; import type {JsonSchemaArray, NodeEntity} from '../../../core'; import {EntityContainer} from '../../components'; import {getValidationState} from '../../utils'; -export interface MultiSelectProps +export interface MultiSelectInputProps extends Omit< - UIKitSelectProps, + SelectProps, | 'value' | 'onFocus' | 'onBlur' @@ -30,7 +24,7 @@ export interface MultiSelectProps optionsMeta?: Record; } -const MultiSelectComponent: NodeEntity = ({ +export const MultiSelectInput: NodeEntity = ({ input, meta, props, @@ -70,8 +64,8 @@ const MultiSelectComponent: NodeEntity = ({ return; }, [enumDescriptions, enumValues, optionsMeta]); - const renderOption: UIKitSelectProps['renderOption'] = React.useCallback( - (option: UIKitSelectOption) => ( + const renderOption: SelectProps['renderOption'] = React.useCallback( + (option: SelectOption) => ( {option.content || option.text || option.value} @@ -79,14 +73,14 @@ const MultiSelectComponent: NodeEntity = ({ [], ); - const getOptionHeight: UIKitSelectProps['getOptionHeight'] = React.useCallback( - (option: UIKitSelectOption) => (option.data?.optionMeta ? 44 : 28), + const getOptionHeight: SelectProps['getOptionHeight'] = React.useCallback( + (option: SelectOption) => (option.data?.optionMeta ? 44 : 28), [], ); return ( - 9} @@ -96,8 +90,8 @@ const MultiSelectComponent: NodeEntity = ({ disabled={schema.readOnly} {...restEntityProps} value={value} - onFocus={onFocus as UIKitSelectProps['onFocus']} - onBlur={onBlur as UIKitSelectProps['onBlur']} + onFocus={onFocus as SelectProps['onFocus']} + onBlur={onBlur as SelectProps['onBlur']} onUpdate={onChange} errorMessage={undefined} validationState={getValidationState(meta)} @@ -107,5 +101,3 @@ const MultiSelectComponent: NodeEntity = ({ ); }; - -export const MultiSelect = React.memo(MultiSelectComponent); diff --git a/src/lib/unstable/kit/form-entities/MultiSelectInput/index.ts b/src/lib/unstable/kit/form-entities/MultiSelectInput/index.ts new file mode 100644 index 00000000..cbb40f08 --- /dev/null +++ b/src/lib/unstable/kit/form-entities/MultiSelectInput/index.ts @@ -0,0 +1 @@ +export {MultiSelectInput, type MultiSelectInputProps} from './MultiSelectInput'; diff --git a/src/lib/unstable/kit/form-entities/NumberBase/index.ts b/src/lib/unstable/kit/form-entities/NumberBase/index.ts deleted file mode 100644 index bd51b7e7..00000000 --- a/src/lib/unstable/kit/form-entities/NumberBase/index.ts +++ /dev/null @@ -1 +0,0 @@ -export {NumberBase, type NumberBaseProps} from './NumberBase'; diff --git a/src/lib/unstable/kit/form-entities/Password/Password.scss b/src/lib/unstable/kit/form-entities/NumberInput/NumberInput.scss similarity index 88% rename from src/lib/unstable/kit/form-entities/Password/Password.scss rename to src/lib/unstable/kit/form-entities/NumberInput/NumberInput.scss index daf59f95..d7436e46 100644 --- a/src/lib/unstable/kit/form-entities/Password/Password.scss +++ b/src/lib/unstable/kit/form-entities/NumberInput/NumberInput.scss @@ -1,7 +1,7 @@ @import '../../styles/functions.scss'; @import '../../styles/variables.scss'; -.#{$ns}password { +.#{$ns}number-input { &_error { .g-text-input__content { outline: none; diff --git a/src/lib/unstable/kit/form-entities/NumberBase/NumberBase.tsx b/src/lib/unstable/kit/form-entities/NumberInput/NumberInput.tsx similarity index 75% rename from src/lib/unstable/kit/form-entities/NumberBase/NumberBase.tsx rename to src/lib/unstable/kit/form-entities/NumberInput/NumberInput.tsx index cd0200cc..b45d5c56 100644 --- a/src/lib/unstable/kit/form-entities/NumberBase/NumberBase.tsx +++ b/src/lib/unstable/kit/form-entities/NumberInput/NumberInput.tsx @@ -1,18 +1,21 @@ import React from 'react'; -import {NumberInput, type NumberInputProps} from '@gravity-ui/uikit'; +import { + NumberInput as UIKitNumberInput, + type NumberInputProps as UIKitNumberInputProps, +} from '@gravity-ui/uikit'; import {type JsonSchemaNumber, type NodeEntity} from '../../../core'; import {EntityContainer} from '../../components'; import {block, getBooleanValidationState, getValidationState} from '../../utils'; -import './NumberBase.scss'; +import './NumberInput.scss'; -const b = block('number-base'); +const b = block('number-input'); -export interface NumberBaseProps +export interface NumberInputProps extends Omit< - NumberInputProps, + UIKitNumberInputProps, | 'value' | 'defaultValue' | 'onFocus' @@ -24,7 +27,7 @@ export interface NumberBaseProps | 'qa' > {} -const NumberBaseComponent: NodeEntity = ({ +export const NumberInput: NodeEntity = ({ input, meta, props, @@ -34,7 +37,7 @@ const NumberBaseComponent: NodeEntity = ({ return ( - = ({ allowDecimal hasClear {...props} - value={value} + value={value === undefined ? null : value} defaultValue={schema.default} onBlur={onBlur} onFocus={onFocus} @@ -55,5 +58,3 @@ const NumberBaseComponent: NodeEntity = ({ ); }; - -export const NumberBase = React.memo(NumberBaseComponent); diff --git a/src/lib/unstable/kit/form-entities/NumberInput/index.ts b/src/lib/unstable/kit/form-entities/NumberInput/index.ts new file mode 100644 index 00000000..f5d0267e --- /dev/null +++ b/src/lib/unstable/kit/form-entities/NumberInput/index.ts @@ -0,0 +1 @@ +export {NumberInput, type NumberInputProps} from './NumberInput'; diff --git a/src/lib/unstable/kit/form-entities/NumberWithScale/index.ts b/src/lib/unstable/kit/form-entities/NumberWithScale/index.ts deleted file mode 100644 index 06a87d4c..00000000 --- a/src/lib/unstable/kit/form-entities/NumberWithScale/index.ts +++ /dev/null @@ -1 +0,0 @@ -export {NumberWithScale, type NumberWithScaleProps} from './NumberWithScale'; diff --git a/src/lib/unstable/kit/form-entities/NumberWithScale/NumberWithScale.scss b/src/lib/unstable/kit/form-entities/NumberWithScaleInput/NumberWithScaleInput.scss similarity index 86% rename from src/lib/unstable/kit/form-entities/NumberWithScale/NumberWithScale.scss rename to src/lib/unstable/kit/form-entities/NumberWithScaleInput/NumberWithScaleInput.scss index 5e34d1b8..4f4c66fc 100644 --- a/src/lib/unstable/kit/form-entities/NumberWithScale/NumberWithScale.scss +++ b/src/lib/unstable/kit/form-entities/NumberWithScaleInput/NumberWithScaleInput.scss @@ -1,7 +1,7 @@ @import '../../styles/functions.scss'; @import '../../styles/variables.scss'; -.#{$ns}number-with-scale { +.#{$ns}number-with-scale-input { &_error { .g-text-input__content { outline: none; diff --git a/src/lib/unstable/kit/form-entities/NumberWithScale/NumberWithScale.tsx b/src/lib/unstable/kit/form-entities/NumberWithScaleInput/NumberWithScaleInput.tsx similarity index 93% rename from src/lib/unstable/kit/form-entities/NumberWithScale/NumberWithScale.tsx rename to src/lib/unstable/kit/form-entities/NumberWithScaleInput/NumberWithScaleInput.tsx index 13dbf290..a30b6abd 100644 --- a/src/lib/unstable/kit/form-entities/NumberWithScale/NumberWithScale.tsx +++ b/src/lib/unstable/kit/form-entities/NumberWithScaleInput/NumberWithScaleInput.tsx @@ -7,11 +7,11 @@ import type {JsonSchemaNumber, NodeEntity} from '../../../core'; import {EntityContainer} from '../../components'; import {block, getBooleanValidationState, getValidationState} from '../../utils'; -import './NumberWithScale.scss'; +import './NumberWithScaleInput.scss'; -const b = block('number-with-scale'); +const b = block('number-with-scale-input'); -export interface NumberWithScaleProps +export interface NumberWithScaleInputProps extends Omit< NumberInputProps, | 'defaultValue' @@ -25,11 +25,11 @@ export interface NumberWithScaleProps | 'qa' > { defaultType?: string; - viewType?: string; scale?: Record; + viewType?: string; } -const NumberWithScaleComponent: NodeEntity = ({ +export const NumberWithScaleInput: NodeEntity = ({ input, meta, props, @@ -83,7 +83,7 @@ const NumberWithScaleComponent: NodeEntity ); }; - -export const NumberWithScale = React.memo(NumberWithScaleComponent); diff --git a/src/lib/unstable/kit/form-entities/NumberWithScaleInput/index.ts b/src/lib/unstable/kit/form-entities/NumberWithScaleInput/index.ts new file mode 100644 index 00000000..38107ca8 --- /dev/null +++ b/src/lib/unstable/kit/form-entities/NumberWithScaleInput/index.ts @@ -0,0 +1 @@ +export {NumberWithScaleInput, type NumberWithScaleInputProps} from './NumberWithScaleInput'; diff --git a/src/lib/unstable/kit/form-entities/Password/index.ts b/src/lib/unstable/kit/form-entities/Password/index.ts deleted file mode 100644 index 95500f1b..00000000 --- a/src/lib/unstable/kit/form-entities/Password/index.ts +++ /dev/null @@ -1 +0,0 @@ -export {Password, type PasswordProps} from './Password'; diff --git a/src/lib/unstable/kit/form-entities/StringBase/StringBase.scss b/src/lib/unstable/kit/form-entities/PasswordInput/PasswordInput.scss similarity index 87% rename from src/lib/unstable/kit/form-entities/StringBase/StringBase.scss rename to src/lib/unstable/kit/form-entities/PasswordInput/PasswordInput.scss index c47abf3d..38470b0c 100644 --- a/src/lib/unstable/kit/form-entities/StringBase/StringBase.scss +++ b/src/lib/unstable/kit/form-entities/PasswordInput/PasswordInput.scss @@ -1,7 +1,7 @@ @import '../../styles/functions.scss'; @import '../../styles/variables.scss'; -.#{$ns}string-base { +.#{$ns}password-input { &_error { .g-text-input__content { outline: none; diff --git a/src/lib/unstable/kit/form-entities/Password/Password.tsx b/src/lib/unstable/kit/form-entities/PasswordInput/PasswordInput.tsx similarity index 75% rename from src/lib/unstable/kit/form-entities/Password/Password.tsx rename to src/lib/unstable/kit/form-entities/PasswordInput/PasswordInput.tsx index 95be0f58..0045ade0 100644 --- a/src/lib/unstable/kit/form-entities/Password/Password.tsx +++ b/src/lib/unstable/kit/form-entities/PasswordInput/PasswordInput.tsx @@ -1,18 +1,21 @@ import React from 'react'; -import {PasswordInput, type PasswordInputProps} from '@gravity-ui/uikit'; +import { + PasswordInput as UIKitPasswordInput, + type PasswordInputProps as UIKitPasswordInputProps, +} from '@gravity-ui/uikit'; import type {JsonSchemaString, NodeEntity} from '../../../core'; import {EntityContainer} from '../../components'; import {block, getBooleanValidationState, getValidationState} from '../../utils'; -import './Password.scss'; +import './PasswordInput.scss'; -const b = block('password'); +const b = block('password-input'); -export interface PasswordProps +export interface PasswordInputProps extends Omit< - PasswordInputProps, + UIKitPasswordInputProps, | 'value' | 'onFocus' | 'onBlur' @@ -23,7 +26,7 @@ export interface PasswordProps | 'qa' > {} -const PasswordComponent: NodeEntity = ({ +export const PasswordInput: NodeEntity = ({ input, meta, props, @@ -33,7 +36,7 @@ const PasswordComponent: NodeEntity = ({ return ( - = ({ ); }; - -export const Password = React.memo(PasswordComponent); diff --git a/src/lib/unstable/kit/form-entities/PasswordInput/index.ts b/src/lib/unstable/kit/form-entities/PasswordInput/index.ts new file mode 100644 index 00000000..11ed12f3 --- /dev/null +++ b/src/lib/unstable/kit/form-entities/PasswordInput/index.ts @@ -0,0 +1 @@ +export {PasswordInput, type PasswordInputProps} from './PasswordInput'; diff --git a/src/lib/unstable/kit/form-entities/RadioGroup/index.ts b/src/lib/unstable/kit/form-entities/RadioGroup/index.ts deleted file mode 100644 index 0adaccc4..00000000 --- a/src/lib/unstable/kit/form-entities/RadioGroup/index.ts +++ /dev/null @@ -1 +0,0 @@ -export {RadioGroup, type RadioGroupProps} from './RadioGroup'; diff --git a/src/lib/unstable/kit/form-entities/RadioGroup/RadioGroup.scss b/src/lib/unstable/kit/form-entities/RadioGroupInput/RadioGroupInput.scss similarity index 96% rename from src/lib/unstable/kit/form-entities/RadioGroup/RadioGroup.scss rename to src/lib/unstable/kit/form-entities/RadioGroupInput/RadioGroupInput.scss index 3b3ddb4c..78a97a50 100644 --- a/src/lib/unstable/kit/form-entities/RadioGroup/RadioGroup.scss +++ b/src/lib/unstable/kit/form-entities/RadioGroupInput/RadioGroupInput.scss @@ -1,6 +1,6 @@ @import '../../styles/variables.scss'; -.#{$ns}radio-group { +.#{$ns}radio-group-input { &_direction_horizontal { min-height: 28px; padding-top: 1px; diff --git a/src/lib/unstable/kit/form-entities/RadioGroup/RadioGroup.tsx b/src/lib/unstable/kit/form-entities/RadioGroupInput/RadioGroupInput.tsx similarity index 67% rename from src/lib/unstable/kit/form-entities/RadioGroup/RadioGroup.tsx rename to src/lib/unstable/kit/form-entities/RadioGroupInput/RadioGroupInput.tsx index 82107c41..729378c1 100644 --- a/src/lib/unstable/kit/form-entities/RadioGroup/RadioGroup.tsx +++ b/src/lib/unstable/kit/form-entities/RadioGroupInput/RadioGroupInput.tsx @@ -1,29 +1,22 @@ import React from 'react'; -import { - RadioGroup as UIKitRadioGroup, - type RadioGroupOption as UIKitRadioGroupOption, - type RadioGroupProps as UIKitRadioGroupProps, -} from '@gravity-ui/uikit'; +import {RadioGroup, type RadioGroupOption, type RadioGroupProps} from '@gravity-ui/uikit'; import type {JsonSchemaString, NodeEntity} from '../../../core'; import {EntityContainer} from '../../components'; import {block, getBooleanValidationState} from '../../utils'; -import './RadioGroup.scss'; +import './RadioGroupInput.scss'; -const b = block('radio-group'); +const b = block('radio-group-input'); -export interface RadioGroupProps - extends Omit< - UIKitRadioGroupProps, - 'value' | 'onFocus' | 'onBlur' | 'onChange' | 'onUpdate' | 'qa' - > { +export interface RadioGroupInputProps + extends Omit { enumDescriptions?: Record; optionsDisabled?: Record; } -const RadioGroupComponent: NodeEntity = ({ +export const RadioGroupInput: NodeEntity = ({ input, meta, props, @@ -32,7 +25,7 @@ const RadioGroupComponent: NodeEntity = ({ const {name, onBlur, onChange, onFocus, value} = input; const {enumDescriptions, optionsDisabled, direction = 'horizontal', ...restEntityProps} = props; - const options: UIKitRadioGroupOption[] | undefined = React.useMemo( + const options: RadioGroupOption[] | undefined = React.useMemo( () => schema.enum?.map((value) => ({ value, @@ -48,7 +41,7 @@ const RadioGroupComponent: NodeEntity = ({ className={b({error: getBooleanValidationState(meta), direction})} justifyContent="center" > - = ({ ); }; - -export const RadioGroup = React.memo(RadioGroupComponent); diff --git a/src/lib/unstable/kit/form-entities/RadioGroupInput/index.ts b/src/lib/unstable/kit/form-entities/RadioGroupInput/index.ts new file mode 100644 index 00000000..4cb18bff --- /dev/null +++ b/src/lib/unstable/kit/form-entities/RadioGroupInput/index.ts @@ -0,0 +1 @@ +export {RadioGroupInput, type RadioGroupInputProps} from './RadioGroupInput'; diff --git a/src/lib/unstable/kit/form-entities/RangeInput/RangeInput.tsx b/src/lib/unstable/kit/form-entities/RangeInput/RangeInput.tsx index 9555d7c3..4ca159e3 100644 --- a/src/lib/unstable/kit/form-entities/RangeInput/RangeInput.tsx +++ b/src/lib/unstable/kit/form-entities/RangeInput/RangeInput.tsx @@ -13,6 +13,7 @@ import { useSchemaRendererTools, } from '../../../core'; import {EntityContainer} from '../../components'; +import {DASH} from '../../constants'; import {block} from '../../utils'; import './RangeInput.scss'; @@ -21,16 +22,17 @@ const b = block('range-input'); export interface RangeInputProps { propertyKeys?: [string, string]; + separator?: string; } -const RangeInputComponent: NodeEntity = ({ +export const RangeInput: NodeEntity = ({ headName, input, props, schemaPath, }) => { const {name, value: inputValue} = input; - const {propertyKeys} = props; + const {propertyKeys, separator = DASH} = props; const prevValueRef = React.useRef(null); const {addSchemaPatches, removeSchemaPatches} = useSchemaRendererTools(); @@ -98,7 +100,7 @@ const RangeInputComponent: NodeEntity = ({ name={fromName} schemaPath={`${schemaPath}/properties/${fromKey}`} /> - - + {separator} = ({ ); }; - -export const RangeInput = React.memo(RangeInputComponent); diff --git a/src/lib/unstable/kit/form-entities/RangeSlider/index.ts b/src/lib/unstable/kit/form-entities/RangeSlider/index.ts deleted file mode 100644 index 620f57f6..00000000 --- a/src/lib/unstable/kit/form-entities/RangeSlider/index.ts +++ /dev/null @@ -1 +0,0 @@ -export {RangeSlider, type RangeSliderProps} from './RangeSlider'; diff --git a/src/lib/unstable/kit/form-entities/RangeSlider/RangeSlider.tsx b/src/lib/unstable/kit/form-entities/RangeSliderInput/RangeSliderInput.tsx similarity index 88% rename from src/lib/unstable/kit/form-entities/RangeSlider/RangeSlider.tsx rename to src/lib/unstable/kit/form-entities/RangeSliderInput/RangeSliderInput.tsx index 135fc4d7..88898fd1 100644 --- a/src/lib/unstable/kit/form-entities/RangeSlider/RangeSlider.tsx +++ b/src/lib/unstable/kit/form-entities/RangeSliderInput/RangeSliderInput.tsx @@ -1,14 +1,14 @@ import React from 'react'; -import {Slider as UIKitSlider, type SliderProps as UIKitSliderProps} from '@gravity-ui/uikit'; +import {Slider, type SliderProps} from '@gravity-ui/uikit'; import type {JsonSchemaObject, NodeEntity} from '../../../core'; import {EntityContainer} from '../../components'; import {getValidationState} from '../../utils'; -export interface RangeSliderProps +export interface RangeSliderInputProps extends Omit< - UIKitSliderProps, + SliderProps, | 'defaultValue' | 'value' | 'onFocus' @@ -22,7 +22,7 @@ export interface RangeSliderProps propertyKeys?: [string, string]; } -const RangeSliderComponent: NodeEntity = ({ +export const RangeSliderInput: NodeEntity = ({ input, meta, props, @@ -64,7 +64,7 @@ const RangeSliderComponent: NodeEntity = ({ return ( - = ({ ); }; - -export const RangeSlider = React.memo(RangeSliderComponent); diff --git a/src/lib/unstable/kit/form-entities/RangeSliderInput/index.ts b/src/lib/unstable/kit/form-entities/RangeSliderInput/index.ts new file mode 100644 index 00000000..83c73e3c --- /dev/null +++ b/src/lib/unstable/kit/form-entities/RangeSliderInput/index.ts @@ -0,0 +1 @@ +export {RangeSliderInput, type RangeSliderInputProps} from './RangeSliderInput'; diff --git a/src/lib/unstable/kit/form-entities/SegmentedRadioGroup/index.ts b/src/lib/unstable/kit/form-entities/SegmentedRadioGroup/index.ts deleted file mode 100644 index f66f7dca..00000000 --- a/src/lib/unstable/kit/form-entities/SegmentedRadioGroup/index.ts +++ /dev/null @@ -1 +0,0 @@ -export {SegmentedRadioGroup, type SegmentedRadioGroupProps} from './SegmentedRadioGroup'; diff --git a/src/lib/unstable/kit/form-entities/SegmentedRadioGroup/SegmentedRadioGroup.scss b/src/lib/unstable/kit/form-entities/SegmentedRadioGroupInput/SegmentedRadioGroupInput.scss similarity index 92% rename from src/lib/unstable/kit/form-entities/SegmentedRadioGroup/SegmentedRadioGroup.scss rename to src/lib/unstable/kit/form-entities/SegmentedRadioGroupInput/SegmentedRadioGroupInput.scss index 60b15911..b716be9d 100644 --- a/src/lib/unstable/kit/form-entities/SegmentedRadioGroup/SegmentedRadioGroup.scss +++ b/src/lib/unstable/kit/form-entities/SegmentedRadioGroupInput/SegmentedRadioGroupInput.scss @@ -1,6 +1,6 @@ @import '../../styles/variables.scss'; -.#{$ns}segmented-radio-group { +.#{$ns}segmented-radio-group-input { &_error { .g-segmented-radio-group { .g-segmented-radio-group__option_checked { diff --git a/src/lib/unstable/kit/form-entities/SegmentedRadioGroup/SegmentedRadioGroup.tsx b/src/lib/unstable/kit/form-entities/SegmentedRadioGroupInput/SegmentedRadioGroupInput.tsx similarity index 72% rename from src/lib/unstable/kit/form-entities/SegmentedRadioGroup/SegmentedRadioGroup.tsx rename to src/lib/unstable/kit/form-entities/SegmentedRadioGroupInput/SegmentedRadioGroupInput.tsx index bb68ee9e..fd246e1c 100644 --- a/src/lib/unstable/kit/form-entities/SegmentedRadioGroup/SegmentedRadioGroup.tsx +++ b/src/lib/unstable/kit/form-entities/SegmentedRadioGroupInput/SegmentedRadioGroupInput.tsx @@ -1,33 +1,28 @@ import React from 'react'; -import { - SegmentedRadioGroup as UIKitSegmentedRadioGroup, - type SegmentedRadioGroupProps as UIKitSegmentedRadioGroupProps, -} from '@gravity-ui/uikit'; +import {SegmentedRadioGroup, type SegmentedRadioGroupProps} from '@gravity-ui/uikit'; import type {JsonSchemaString, NodeEntity} from '../../../core'; import {EntityContainer} from '../../components'; import {block, getBooleanValidationState} from '../../utils'; -import './SegmentedRadioGroup.scss'; +import './SegmentedRadioGroupInput.scss'; -const b = block('segmented-radio-group'); +const b = block('segmented-radio-group-input'); -export interface SegmentedRadioGroupProps +export interface SegmentedRadioGroupInputProps extends Omit< - UIKitSegmentedRadioGroupProps, + SegmentedRadioGroupProps, 'value' | 'onFocus' | 'onBlur' | 'onChange' | 'onUpdate' | 'qa' > { enumDescriptions?: Record; optionsDisabled?: Record; } -const SegmentedRadioGroupComponent: NodeEntity = ({ - input, - meta, - props, - schema, -}) => { +export const SegmentedRadioGroupInput: NodeEntity< + JsonSchemaString, + SegmentedRadioGroupInputProps +> = ({input, meta, props, schema}) => { const {name, onBlur, onChange, onFocus, value} = input; const {enumDescriptions, optionsDisabled, ...restEntityProps} = props; @@ -52,7 +47,7 @@ const SegmentedRadioGroupComponent: NodeEntity - ); }; - -export const SegmentedRadioGroup = React.memo(SegmentedRadioGroupComponent); diff --git a/src/lib/unstable/kit/form-entities/SegmentedRadioGroupInput/index.ts b/src/lib/unstable/kit/form-entities/SegmentedRadioGroupInput/index.ts new file mode 100644 index 00000000..5258e03a --- /dev/null +++ b/src/lib/unstable/kit/form-entities/SegmentedRadioGroupInput/index.ts @@ -0,0 +1,4 @@ +export { + SegmentedRadioGroupInput, + type SegmentedRadioGroupInputProps, +} from './SegmentedRadioGroupInput'; diff --git a/src/lib/unstable/kit/form-entities/Select/index.ts b/src/lib/unstable/kit/form-entities/Select/index.ts deleted file mode 100644 index 0054ce9b..00000000 --- a/src/lib/unstable/kit/form-entities/Select/index.ts +++ /dev/null @@ -1 +0,0 @@ -export {Select, type SelectProps} from './Select'; diff --git a/src/lib/unstable/kit/form-entities/Select/Select.tsx b/src/lib/unstable/kit/form-entities/SelectInput/SelectInput.tsx similarity index 75% rename from src/lib/unstable/kit/form-entities/Select/Select.tsx rename to src/lib/unstable/kit/form-entities/SelectInput/SelectInput.tsx index 5bb774cd..3ed59965 100644 --- a/src/lib/unstable/kit/form-entities/Select/Select.tsx +++ b/src/lib/unstable/kit/form-entities/SelectInput/SelectInput.tsx @@ -1,21 +1,15 @@ import React from 'react'; -import { - Flex, - Text, - Select as UIKitSelect, - type SelectOption as UIKitSelectOption, - type SelectProps as UIKitSelectProps, -} from '@gravity-ui/uikit'; +import {Flex, Select, type SelectOption, type SelectProps, Text} from '@gravity-ui/uikit'; import isString from 'lodash/isString'; import type {JsonSchemaString, NodeEntity} from '../../../core'; import {EntityContainer} from '../../components'; import {getValidationState} from '../../utils'; -export interface SelectProps +export interface SelectInputProps extends Omit< - UIKitSelectProps, + SelectProps, | 'value' | 'onFocus' | 'onBlur' @@ -28,10 +22,10 @@ export interface SelectProps > { enumDescriptions?: Record; optionsMeta?: Record; - options?: UIKitSelectProps['options']; + options?: SelectProps['options']; } -const SelectComponent: NodeEntity = ({ +export const SelectInput: NodeEntity = ({ input, meta, props, @@ -68,8 +62,8 @@ const SelectComponent: NodeEntity = ({ [enumDescriptions, optionsMeta, schema.enum], ); - const renderOption: UIKitSelectProps['renderOption'] = React.useCallback( - (option: UIKitSelectOption) => ( + const renderOption: SelectProps['renderOption'] = React.useCallback( + (option: SelectOption) => ( {option.content || option.text || option.value} @@ -77,14 +71,14 @@ const SelectComponent: NodeEntity = ({ [], ); - const getOptionHeight: UIKitSelectProps['getOptionHeight'] = React.useCallback( - (option: UIKitSelectOption) => (option.data?.optionMeta ? 44 : 28), + const getOptionHeight: SelectProps['getOptionHeight'] = React.useCallback( + (option: SelectOption) => (option.data?.optionMeta ? 44 : 28), [], ); return ( - 9} @@ -94,8 +88,8 @@ const SelectComponent: NodeEntity = ({ disabled={schema.readOnly} {...restEntityProps} value={value} - onFocus={onFocus as UIKitSelectProps['onFocus']} - onBlur={onBlur as UIKitSelectProps['onBlur']} + onFocus={onFocus as SelectProps['onFocus']} + onBlur={onBlur as SelectProps['onBlur']} onUpdate={onUpdate} errorMessage={undefined} validationState={getValidationState(meta)} @@ -104,5 +98,3 @@ const SelectComponent: NodeEntity = ({ ); }; - -export const Select = React.memo(SelectComponent); diff --git a/src/lib/unstable/kit/form-entities/SelectInput/index.ts b/src/lib/unstable/kit/form-entities/SelectInput/index.ts new file mode 100644 index 00000000..7a6cb1e8 --- /dev/null +++ b/src/lib/unstable/kit/form-entities/SelectInput/index.ts @@ -0,0 +1 @@ +export {SelectInput, type SelectInputProps} from './SelectInput'; diff --git a/src/lib/unstable/kit/form-entities/Slider/index.ts b/src/lib/unstable/kit/form-entities/Slider/index.ts deleted file mode 100644 index 14bb3016..00000000 --- a/src/lib/unstable/kit/form-entities/Slider/index.ts +++ /dev/null @@ -1 +0,0 @@ -export {Slider, type SliderProps} from './Slider'; diff --git a/src/lib/unstable/kit/form-entities/Slider/Slider.tsx b/src/lib/unstable/kit/form-entities/SliderInput/SliderInput.tsx similarity index 82% rename from src/lib/unstable/kit/form-entities/Slider/Slider.tsx rename to src/lib/unstable/kit/form-entities/SliderInput/SliderInput.tsx index 54f39ad1..c1fb5b78 100644 --- a/src/lib/unstable/kit/form-entities/Slider/Slider.tsx +++ b/src/lib/unstable/kit/form-entities/SliderInput/SliderInput.tsx @@ -1,14 +1,14 @@ import React from 'react'; -import {Slider as UIKitSlider, type SliderProps as UIKitSliderProps} from '@gravity-ui/uikit'; +import {Slider, type SliderProps} from '@gravity-ui/uikit'; import type {JsonSchemaNumber, NodeEntity} from '../../../core'; import {EntityContainer} from '../../components'; import {getValidationState} from '../../utils'; -export interface SliderProps +export interface SliderInputProps extends Omit< - UIKitSliderProps, + SliderProps, | 'value' | 'onFocus' | 'onBlur' @@ -19,7 +19,7 @@ export interface SliderProps | 'qa' > {} -const SliderComponent: NodeEntity = ({ +export const SliderInput: NodeEntity = ({ input, meta, props, @@ -42,7 +42,7 @@ const SliderComponent: NodeEntity = ({ return ( - = ({ ); }; - -export const Slider = React.memo(SliderComponent); diff --git a/src/lib/unstable/kit/form-entities/SliderInput/index.ts b/src/lib/unstable/kit/form-entities/SliderInput/index.ts new file mode 100644 index 00000000..8d8e00b3 --- /dev/null +++ b/src/lib/unstable/kit/form-entities/SliderInput/index.ts @@ -0,0 +1 @@ +export {SliderInput, type SliderInputProps} from './SliderInput'; diff --git a/src/lib/unstable/kit/form-entities/StringBase/index.ts b/src/lib/unstable/kit/form-entities/StringBase/index.ts deleted file mode 100644 index 7463f6d9..00000000 --- a/src/lib/unstable/kit/form-entities/StringBase/index.ts +++ /dev/null @@ -1 +0,0 @@ -export {StringBase, type StringBaseProps} from './StringBase'; diff --git a/src/lib/unstable/kit/form-entities/NumberBase/NumberBase.scss b/src/lib/unstable/kit/form-entities/StringInput/StringInput.scss similarity index 88% rename from src/lib/unstable/kit/form-entities/NumberBase/NumberBase.scss rename to src/lib/unstable/kit/form-entities/StringInput/StringInput.scss index 9aea7e84..e1b4ea43 100644 --- a/src/lib/unstable/kit/form-entities/NumberBase/NumberBase.scss +++ b/src/lib/unstable/kit/form-entities/StringInput/StringInput.scss @@ -1,7 +1,7 @@ @import '../../styles/functions.scss'; @import '../../styles/variables.scss'; -.#{$ns}number-base { +.#{$ns}string-input { &_error { .g-text-input__content { outline: none; diff --git a/src/lib/unstable/kit/form-entities/StringBase/StringBase.tsx b/src/lib/unstable/kit/form-entities/StringInput/StringInput.tsx similarity index 84% rename from src/lib/unstable/kit/form-entities/StringBase/StringBase.tsx rename to src/lib/unstable/kit/form-entities/StringInput/StringInput.tsx index 4fc4baa8..27d4e218 100644 --- a/src/lib/unstable/kit/form-entities/StringBase/StringBase.tsx +++ b/src/lib/unstable/kit/form-entities/StringInput/StringInput.tsx @@ -6,11 +6,11 @@ import type {JsonSchemaString, NodeEntity} from '../../../core'; import {EntityContainer} from '../../components'; import {block, getBooleanValidationState, getValidationState} from '../../utils'; -import './StringBase.scss'; +import './StringInput.scss'; -const b = block('string-base'); +const b = block('string-input'); -export interface StringBaseProps +export interface StringInputProps extends Omit< TextInputProps, | 'type' @@ -24,7 +24,7 @@ export interface StringBaseProps | 'qa' > {} -const StringBaseComponent: NodeEntity = ({ +export const StringInput: NodeEntity = ({ input, meta, props, @@ -49,5 +49,3 @@ const StringBaseComponent: NodeEntity = ({ ); }; - -export const StringBase = React.memo(StringBaseComponent); diff --git a/src/lib/unstable/kit/form-entities/StringInput/index.ts b/src/lib/unstable/kit/form-entities/StringInput/index.ts new file mode 100644 index 00000000..f65c845b --- /dev/null +++ b/src/lib/unstable/kit/form-entities/StringInput/index.ts @@ -0,0 +1 @@ +export {StringInput, type StringInputProps} from './StringInput'; diff --git a/src/lib/unstable/kit/form-entities/StringNumberWithScale/index.ts b/src/lib/unstable/kit/form-entities/StringNumberWithScale/index.ts deleted file mode 100644 index bf47fcf5..00000000 --- a/src/lib/unstable/kit/form-entities/StringNumberWithScale/index.ts +++ /dev/null @@ -1 +0,0 @@ -export {StringNumberWithScale, type StringNumberWithScaleProps} from './StringNumberWithScale'; diff --git a/src/lib/unstable/kit/form-entities/StringNumberWithScale/StringNumberWithScale.scss b/src/lib/unstable/kit/form-entities/StringNumberWithScaleInput/StringNumberWithScaleInput.scss similarity index 84% rename from src/lib/unstable/kit/form-entities/StringNumberWithScale/StringNumberWithScale.scss rename to src/lib/unstable/kit/form-entities/StringNumberWithScaleInput/StringNumberWithScaleInput.scss index 9b2b2ca9..94e5e076 100644 --- a/src/lib/unstable/kit/form-entities/StringNumberWithScale/StringNumberWithScale.scss +++ b/src/lib/unstable/kit/form-entities/StringNumberWithScaleInput/StringNumberWithScaleInput.scss @@ -1,7 +1,7 @@ @import '../../styles/functions.scss'; @import '../../styles/variables.scss'; -.#{$ns}string-number-with-scale { +.#{$ns}string-number-with-scale-input { &_error { .g-text-input__content { outline: none; diff --git a/src/lib/unstable/kit/form-entities/StringNumberWithScale/StringNumberWithScale.tsx b/src/lib/unstable/kit/form-entities/StringNumberWithScaleInput/StringNumberWithScaleInput.tsx similarity index 89% rename from src/lib/unstable/kit/form-entities/StringNumberWithScale/StringNumberWithScale.tsx rename to src/lib/unstable/kit/form-entities/StringNumberWithScaleInput/StringNumberWithScaleInput.tsx index 2fbabbd9..81bc99af 100644 --- a/src/lib/unstable/kit/form-entities/StringNumberWithScale/StringNumberWithScale.tsx +++ b/src/lib/unstable/kit/form-entities/StringNumberWithScaleInput/StringNumberWithScaleInput.tsx @@ -7,11 +7,11 @@ import type {JsonSchemaString, NodeEntity} from '../../../core'; import {EntityContainer} from '../../components'; import {block, getBooleanValidationState, getValidationState, isStringNumber} from '../../utils'; -import './StringNumberWithScale.scss'; +import './StringNumberWithScaleInput.scss'; -const b = block('string-number-with-scale'); +const b = block('string-number-with-scale-input'); -export interface StringNumberWithScaleProps +export interface StringNumberWithScaleInputProps extends Omit< TextInputProps, | 'defaultValue' @@ -29,12 +29,10 @@ export interface StringNumberWithScaleProps scale?: Record; } -const StringNumberWithScaleComponent: NodeEntity = ({ - input, - meta, - props, - schema, -}) => { +export const StringNumberWithScaleInput: NodeEntity< + JsonSchemaString, + StringNumberWithScaleInputProps +> = ({input, meta, props, schema}) => { const {name, onBlur, onChange, onFocus, value: inputValue} = input; const {defaultType, viewType, scale, ...restEntityProps} = props; @@ -98,13 +96,10 @@ const StringNumberWithScaleComponent: NodeEntity + onUpdate: (value: string) => onChange( isStringNumber(value) ? new Decimal(value).mul(factor).toString() : value, ), @@ -151,5 +146,3 @@ const StringNumberWithScaleComponent: NodeEntity ); }; - -export const StringNumberWithScale = React.memo(StringNumberWithScaleComponent); diff --git a/src/lib/unstable/kit/form-entities/StringNumberWithScaleInput/index.ts b/src/lib/unstable/kit/form-entities/StringNumberWithScaleInput/index.ts new file mode 100644 index 00000000..2d179d53 --- /dev/null +++ b/src/lib/unstable/kit/form-entities/StringNumberWithScaleInput/index.ts @@ -0,0 +1,4 @@ +export { + StringNumberWithScaleInput, + type StringNumberWithScaleInputProps, +} from './StringNumberWithScaleInput'; diff --git a/src/lib/unstable/kit/form-entities/Switch/index.ts b/src/lib/unstable/kit/form-entities/Switch/index.ts deleted file mode 100644 index df99c34a..00000000 --- a/src/lib/unstable/kit/form-entities/Switch/index.ts +++ /dev/null @@ -1 +0,0 @@ -export {Switch, type SwitchProps} from './Switch'; diff --git a/src/lib/unstable/kit/form-entities/Switch/Switch.scss b/src/lib/unstable/kit/form-entities/SwitchInput/SwitchInput.scss similarity index 96% rename from src/lib/unstable/kit/form-entities/Switch/Switch.scss rename to src/lib/unstable/kit/form-entities/SwitchInput/SwitchInput.scss index c82f8179..6e427b94 100644 --- a/src/lib/unstable/kit/form-entities/Switch/Switch.scss +++ b/src/lib/unstable/kit/form-entities/SwitchInput/SwitchInput.scss @@ -1,6 +1,6 @@ @import '../../styles/variables.scss'; -.#{$ns}switch { +.#{$ns}switch-input { min-height: 28px; &_error { diff --git a/src/lib/unstable/kit/form-entities/Switch/Switch.tsx b/src/lib/unstable/kit/form-entities/SwitchInput/SwitchInput.tsx similarity index 68% rename from src/lib/unstable/kit/form-entities/Switch/Switch.tsx rename to src/lib/unstable/kit/form-entities/SwitchInput/SwitchInput.tsx index 21a7d07a..c93639e2 100644 --- a/src/lib/unstable/kit/form-entities/Switch/Switch.tsx +++ b/src/lib/unstable/kit/form-entities/SwitchInput/SwitchInput.tsx @@ -1,22 +1,19 @@ import React from 'react'; -import {Switch as UIKitSwitch, type SwitchProps as UIKitSwitchProps} from '@gravity-ui/uikit'; +import {Switch, type SwitchProps} from '@gravity-ui/uikit'; import type {JsonSchemaBoolean, NodeEntity} from '../../../core'; import {EntityContainer} from '../../components'; import {block, getBooleanValidationState} from '../../utils'; -import './Switch.scss'; +import './SwitchInput.scss'; -const b = block('switch'); +const b = block('switch-input'); -export interface SwitchProps - extends Omit< - UIKitSwitchProps, - 'checked' | 'onFocus' | 'onBlur' | 'onChange' | 'onUpdate' | 'qa' - > {} +export interface SwitchInputProps + extends Omit {} -const SwitchComponent: NodeEntity = ({ +export const SwitchInput: NodeEntity = ({ input, meta, props, @@ -39,7 +36,7 @@ const SwitchComponent: NodeEntity = ({ className={b({error: getBooleanValidationState(meta)})} justifyContent="center" > - = ({ ); }; - -export const Switch = React.memo(SwitchComponent); diff --git a/src/lib/unstable/kit/form-entities/SwitchInput/index.ts b/src/lib/unstable/kit/form-entities/SwitchInput/index.ts new file mode 100644 index 00000000..8aa9bda7 --- /dev/null +++ b/src/lib/unstable/kit/form-entities/SwitchInput/index.ts @@ -0,0 +1 @@ +export {SwitchInput, type SwitchInputProps} from './SwitchInput'; diff --git a/src/lib/unstable/kit/form-entities/TextArea/index.ts b/src/lib/unstable/kit/form-entities/TextArea/index.ts deleted file mode 100644 index f855f3db..00000000 --- a/src/lib/unstable/kit/form-entities/TextArea/index.ts +++ /dev/null @@ -1 +0,0 @@ -export {TextArea, type TextAreaProps} from './TextArea'; diff --git a/src/lib/unstable/kit/form-entities/TextArea/TextArea.scss b/src/lib/unstable/kit/form-entities/TextAreaInput/TextAreaInput.scss similarity index 87% rename from src/lib/unstable/kit/form-entities/TextArea/TextArea.scss rename to src/lib/unstable/kit/form-entities/TextAreaInput/TextAreaInput.scss index b03fb887..a6fccaf6 100644 --- a/src/lib/unstable/kit/form-entities/TextArea/TextArea.scss +++ b/src/lib/unstable/kit/form-entities/TextAreaInput/TextAreaInput.scss @@ -1,7 +1,7 @@ @import '../../styles/functions.scss'; @import '../../styles/variables.scss'; -.#{$ns}text-area { +.#{$ns}text-area-input { &_error { .g-text-area__content { outline: none; diff --git a/src/lib/unstable/kit/form-entities/TextArea/TextArea.tsx b/src/lib/unstable/kit/form-entities/TextAreaInput/TextAreaInput.tsx similarity index 74% rename from src/lib/unstable/kit/form-entities/TextArea/TextArea.tsx rename to src/lib/unstable/kit/form-entities/TextAreaInput/TextAreaInput.tsx index deec0893..40bc3493 100644 --- a/src/lib/unstable/kit/form-entities/TextArea/TextArea.tsx +++ b/src/lib/unstable/kit/form-entities/TextAreaInput/TextAreaInput.tsx @@ -1,21 +1,18 @@ import React from 'react'; -import { - TextArea as UIKitTextArea, - type TextAreaProps as UIKitTextAreaProps, -} from '@gravity-ui/uikit'; +import {TextArea, type TextAreaProps} from '@gravity-ui/uikit'; import {type JsonSchemaString, type NodeEntity} from '../../../core'; import {EntityContainer} from '../../components'; import {block, getBooleanValidationState, getValidationState} from '../../utils'; -import './TextArea.scss'; +import './TextAreaInput.scss'; -const b = block('text-area'); +const b = block('text-area-input'); -export interface TextAreaProps +export interface TextAreaInputProps extends Omit< - UIKitTextAreaProps, + TextAreaProps, | 'value' | 'onFocus' | 'onBlur' @@ -26,7 +23,7 @@ export interface TextAreaProps | 'qa' > {} -const TextAreaComponent: NodeEntity = ({ +export const TextAreaInput: NodeEntity = ({ input, meta, props, @@ -34,7 +31,7 @@ const TextAreaComponent: NodeEntity = ({ }) => { return ( - = ({ ); }; - -export const TextArea = React.memo(TextAreaComponent); diff --git a/src/lib/unstable/kit/form-entities/TextAreaInput/index.ts b/src/lib/unstable/kit/form-entities/TextAreaInput/index.ts new file mode 100644 index 00000000..72c63dd4 --- /dev/null +++ b/src/lib/unstable/kit/form-entities/TextAreaInput/index.ts @@ -0,0 +1 @@ +export {TextAreaInput, type TextAreaInputProps} from './TextAreaInput'; diff --git a/src/lib/unstable/kit/form-entities/index.ts b/src/lib/unstable/kit/form-entities/index.ts index 7cde6f2c..ecfb33d2 100644 --- a/src/lib/unstable/kit/form-entities/index.ts +++ b/src/lib/unstable/kit/form-entities/index.ts @@ -1,25 +1,25 @@ -export {Checkbox, type CheckboxProps} from './Checkbox'; -export {CheckboxGroup, type CheckboxGroupProps} from './CheckboxGroup'; -export {ColorPicker, type ColorPickerProps} from './ColorPicker'; +export {CheckboxInput, type CheckboxInputProps} from './CheckboxInput'; +export {CheckboxGroupInput, type CheckboxGroupInputProps} from './CheckboxGroupInput'; +export {ColorPickerInput, type ColorPickerInputProps} from './ColorPickerInput'; export {DateInput, type DateInputProps} from './DateInput'; -export {FewOfNested, type FewOfNestedProps} from './FewOfNested'; export {FileInput, type FileInputProps} from './FileInput'; -export {Label, type LabelProps} from './Label'; -export {MultiSelect, type MultiSelectProps} from './MultiSelect'; -export {NumberBase, type NumberBaseProps} from './NumberBase'; -export {NumberWithScale, type NumberWithScaleProps} from './NumberWithScale'; -export {ObjectInline, type ObjectInlineProps} from './ObjectInline'; -export {OneOfNested, type OneOfNestedProps} from './OneOfNested'; -export {DotValue, type DotValueProps} from './DotValue'; -export {Password, type PasswordProps} from './Password'; -export {RadioGroup, type RadioGroupProps} from './RadioGroup'; +export {MultiSelectInput, type MultiSelectInputProps} from './MultiSelectInput'; +export {NumberInput, type NumberInputProps} from './NumberInput'; +export {NumberWithScaleInput, type NumberWithScaleInputProps} from './NumberWithScaleInput'; +export {PasswordInput, type PasswordInputProps} from './PasswordInput'; +export {RadioGroupInput, type RadioGroupInputProps} from './RadioGroupInput'; export {RangeInput, type RangeInputProps} from './RangeInput'; -export {RangeSlider, type RangeSliderProps} from './RangeSlider'; -export {Select, type SelectProps} from './Select'; -export {SegmentedRadioGroup, type SegmentedRadioGroupProps} from './SegmentedRadioGroup'; -export {Slider, type SliderProps} from './Slider'; -export {StringBase, type StringBaseProps} from './StringBase'; -export {StringNumberWithScale, type StringNumberWithScaleProps} from './StringNumberWithScale'; -export {Switch, type SwitchProps} from './Switch'; -export {TextArea, type TextAreaProps} from './TextArea'; -export {TextContent, type TextContentProps} from './TextContent'; +export {RangeSliderInput, type RangeSliderInputProps} from './RangeSliderInput'; +export {SelectInput, type SelectInputProps} from './SelectInput'; +export { + SegmentedRadioGroupInput, + type SegmentedRadioGroupInputProps, +} from './SegmentedRadioGroupInput'; +export {SliderInput, type SliderInputProps} from './SliderInput'; +export {StringInput, type StringInputProps} from './StringInput'; +export { + StringNumberWithScaleInput, + type StringNumberWithScaleInputProps, +} from './StringNumberWithScaleInput'; +export {SwitchInput, type SwitchInputProps} from './SwitchInput'; +export {TextAreaInput, type TextAreaInputProps} from './TextAreaInput'; diff --git a/src/lib/unstable/kit/form-layouts/Card/Card.scss b/src/lib/unstable/kit/form-layouts/Card/Card.scss deleted file mode 100644 index 421021b0..00000000 --- a/src/lib/unstable/kit/form-layouts/Card/Card.scss +++ /dev/null @@ -1,28 +0,0 @@ -@import '../../styles/functions.scss'; -@import '../../styles/variables.scss'; - -.#{$ns}card { - margin-bottom: spacing(4); - - &:last-child { - margin-bottom: 0; - } - - &__card { - padding: spacing(3) spacing(4); - } - - &__header { - min-height: 28px; - } - - &__toggler { - width: 28px; - } - - &__content { - &_hidden { - display: none; - } - } -} diff --git a/src/lib/unstable/kit/form-layouts/ColumnRow/index.ts b/src/lib/unstable/kit/form-layouts/ColumnRow/index.ts deleted file mode 100644 index a87a25d0..00000000 --- a/src/lib/unstable/kit/form-layouts/ColumnRow/index.ts +++ /dev/null @@ -1 +0,0 @@ -export {ColumnRow, type ColumnRowProps} from './ColumnRow'; diff --git a/src/lib/unstable/kit/form-layouts/ColumnRow/ColumnRow.scss b/src/lib/unstable/kit/form-layouts/FormColumn/FormColumn.scss similarity index 96% rename from src/lib/unstable/kit/form-layouts/ColumnRow/ColumnRow.scss rename to src/lib/unstable/kit/form-layouts/FormColumn/FormColumn.scss index a5751c30..73145265 100644 --- a/src/lib/unstable/kit/form-layouts/ColumnRow/ColumnRow.scss +++ b/src/lib/unstable/kit/form-layouts/FormColumn/FormColumn.scss @@ -1,7 +1,7 @@ @import '../../styles/functions.scss'; @import '../../styles/variables.scss'; -.#{$ns}column-row { +.#{$ns}form-column { margin-bottom: spacing(4); &:last-child { diff --git a/src/lib/unstable/kit/form-layouts/ColumnRow/ColumnRow.tsx b/src/lib/unstable/kit/form-layouts/FormColumn/FormColumn.tsx similarity index 90% rename from src/lib/unstable/kit/form-layouts/ColumnRow/ColumnRow.tsx rename to src/lib/unstable/kit/form-layouts/FormColumn/FormColumn.tsx index 85c79b09..c41f3014 100644 --- a/src/lib/unstable/kit/form-layouts/ColumnRow/ColumnRow.tsx +++ b/src/lib/unstable/kit/form-layouts/FormColumn/FormColumn.tsx @@ -6,15 +6,15 @@ import type {JsonSchema, NodeLayout} from '../../../core'; import {ArrayRemoveButton, EntityError, HTMLContent, LayoutContainer} from '../../components'; import {block, getValidationState} from '../../utils'; -import './ColumnRow.scss'; +import './FormColumn.scss'; -const b = block('column-row'); +const b = block('form-column'); -export interface ColumnRowProps { +export interface FormColumnProps { descriptionType?: 'tooltip' | 'bottom'; } -const Component: NodeLayout = ({ +export const FormColumn: NodeLayout = ({ children, headName, input, @@ -61,5 +61,3 @@ const Component: NodeLayout = ({ ); }; - -export const ColumnRow = React.memo(Component); diff --git a/src/lib/unstable/kit/form-layouts/FormColumn/index.ts b/src/lib/unstable/kit/form-layouts/FormColumn/index.ts new file mode 100644 index 00000000..e97e6a63 --- /dev/null +++ b/src/lib/unstable/kit/form-layouts/FormColumn/index.ts @@ -0,0 +1 @@ +export {FormColumn, type FormColumnProps} from './FormColumn'; diff --git a/src/lib/unstable/kit/form-layouts/Row/Row.scss b/src/lib/unstable/kit/form-layouts/FormRow/FormRow.scss similarity index 97% rename from src/lib/unstable/kit/form-layouts/Row/Row.scss rename to src/lib/unstable/kit/form-layouts/FormRow/FormRow.scss index 00876c8b..d712d5ba 100644 --- a/src/lib/unstable/kit/form-layouts/Row/Row.scss +++ b/src/lib/unstable/kit/form-layouts/FormRow/FormRow.scss @@ -1,7 +1,7 @@ @import '../../styles/functions.scss'; @import '../../styles/variables.scss'; -.#{$ns}row { +.#{$ns}form-row { margin-bottom: spacing(4); &:last-child { diff --git a/src/lib/unstable/kit/form-layouts/Row/Row.tsx b/src/lib/unstable/kit/form-layouts/FormRow/FormRow.tsx similarity index 91% rename from src/lib/unstable/kit/form-layouts/Row/Row.tsx rename to src/lib/unstable/kit/form-layouts/FormRow/FormRow.tsx index c6157321..6a3f6338 100644 --- a/src/lib/unstable/kit/form-layouts/Row/Row.tsx +++ b/src/lib/unstable/kit/form-layouts/FormRow/FormRow.tsx @@ -6,15 +6,15 @@ import type {JsonSchema, NodeLayout} from '../../../core'; import {ArrayRemoveButton, EntityError, HTMLContent, LayoutContainer} from '../../components'; import {block, getValidationState} from '../../utils'; -import './Row.scss'; +import './FormRow.scss'; -const b = block('row'); +const b = block('form-row'); -export interface RowProps { +export interface FormRowProps { descriptionType?: 'tooltip' | 'bottom'; } -const Component: NodeLayout = ({ +export const FormRow: NodeLayout = ({ children, headName, input, @@ -61,5 +61,3 @@ const Component: NodeLayout = ({ ); }; - -export const Row = React.memo(Component); diff --git a/src/lib/unstable/kit/form-layouts/FormRow/index.ts b/src/lib/unstable/kit/form-layouts/FormRow/index.ts new file mode 100644 index 00000000..ede919c3 --- /dev/null +++ b/src/lib/unstable/kit/form-layouts/FormRow/index.ts @@ -0,0 +1 @@ +export {FormRow, type FormRowProps} from './FormRow'; diff --git a/src/lib/unstable/kit/form-layouts/Row/index.ts b/src/lib/unstable/kit/form-layouts/Row/index.ts deleted file mode 100644 index 19fc19f5..00000000 --- a/src/lib/unstable/kit/form-layouts/Row/index.ts +++ /dev/null @@ -1 +0,0 @@ -export {Row, type RowProps} from './Row'; diff --git a/src/lib/unstable/kit/form-layouts/Transparent/Transparent.tsx b/src/lib/unstable/kit/form-layouts/Transparent/Transparent.tsx deleted file mode 100644 index efe98424..00000000 --- a/src/lib/unstable/kit/form-layouts/Transparent/Transparent.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; - -import {Flex} from '@gravity-ui/uikit'; - -import type {JsonSchema, NodeLayout} from '../../../core'; -import {ArrayRemoveButton, EntityError, LayoutContainer} from '../../components'; -import {block, getValidationState} from '../../utils'; - -import './Transparent.scss'; - -const b = block('transparent'); - -const Component: NodeLayout = ({children, headName, input, meta}) => { - return ( - - - {children} - - - - - ); -}; - -export const Transparent = React.memo(Component); diff --git a/src/lib/unstable/kit/form-layouts/index.ts b/src/lib/unstable/kit/form-layouts/index.ts index b8c9a915..7eabf538 100644 --- a/src/lib/unstable/kit/form-layouts/index.ts +++ b/src/lib/unstable/kit/form-layouts/index.ts @@ -1,6 +1,2 @@ -export {Accordeon, type AccordeonProps} from './Accordeon'; -export {Card, type CardProps} from './Card'; -export {ColumnRow, type ColumnRowProps} from './ColumnRow'; -export {Row, type RowProps} from './Row'; -export {Section, type SectionProps} from './Section'; -export {Transparent} from './Transparent'; +export {FormColumn, type FormColumnProps} from './FormColumn'; +export {FormRow, type FormRowProps} from './FormRow'; diff --git a/src/lib/unstable/kit/index.ts b/src/lib/unstable/kit/index.ts index df073aaf..8021ec35 100644 --- a/src/lib/unstable/kit/index.ts +++ b/src/lib/unstable/kit/index.ts @@ -5,14 +5,4 @@ export * from './form-entities'; export * from './form-layouts'; export * from './overview-entities'; export * from './overview-layouts'; -export { - getArrayItemIndex, - getArrayItemParentName, - getBooleanValidationState, - getValidationState, - isArrayItem, - isStringInt, - isStringFloat, - isStringNumber, - isTupleItem, -} from './utils'; +export * from './utils/common'; diff --git a/src/lib/unstable/kit/form-layouts/Accordeon/Accordeon.scss b/src/lib/unstable/kit/layouts/Accordeon/Accordeon.scss similarity index 86% rename from src/lib/unstable/kit/form-layouts/Accordeon/Accordeon.scss rename to src/lib/unstable/kit/layouts/Accordeon/Accordeon.scss index f79bb839..0ba1f7d2 100644 --- a/src/lib/unstable/kit/form-layouts/Accordeon/Accordeon.scss +++ b/src/lib/unstable/kit/layouts/Accordeon/Accordeon.scss @@ -8,6 +8,12 @@ margin-bottom: 0; } + &:hover { + .#{$ns}accordeon__copy-button { + display: block; + } + } + .g-disclosure__trigger { padding-left: 6.5px; } @@ -45,4 +51,8 @@ } } } + + &__copy-button { + display: none; + } } diff --git a/src/lib/unstable/kit/form-layouts/Accordeon/Accordeon.tsx b/src/lib/unstable/kit/layouts/Accordeon/Accordeon.tsx similarity index 68% rename from src/lib/unstable/kit/form-layouts/Accordeon/Accordeon.tsx rename to src/lib/unstable/kit/layouts/Accordeon/Accordeon.tsx index 37e58908..d43ce99a 100644 --- a/src/lib/unstable/kit/form-layouts/Accordeon/Accordeon.tsx +++ b/src/lib/unstable/kit/layouts/Accordeon/Accordeon.tsx @@ -13,8 +13,14 @@ import { type TextProps, } from '@gravity-ui/uikit'; -import type {JsonSchema, NodeLayout} from '../../../core'; -import {ArrayRemoveButton, EntityError, HTMLContent, LayoutContainer} from '../../components'; +import {type JsonSchema, type NodeLayout, SchemaRendererMode} from '../../../core'; +import { + ArrayRemoveButton, + CopyButton, + EntityError, + HTMLContent, + LayoutContainer, +} from '../../components'; import {block, getValidationState} from '../../utils'; import './Accordeon.scss'; @@ -28,15 +34,17 @@ export interface AccordeonProps extends DisclosureProps { withIndent?: boolean; } -const Component: NodeLayout = ({ +export const Accordeon: NodeLayout = ({ children, headName, input, meta, + mode, schema, props, }) => { const { + copy, titleProps, togglerProps, withIndent = false, @@ -44,6 +52,8 @@ const Component: NodeLayout = ({ ...restLayoutProps } = props; + const overviewFlag = mode === SchemaRendererMode.Overview; + const summary = React.useMemo(() => { const stopPropagation = (event: React.MouseEvent) => { event.stopPropagation(); @@ -73,16 +83,24 @@ const Component: NodeLayout = ({ ) : null} - + {overviewFlag ? ( + + ) : null} + {overviewFlag ? null : ( + + )} ); }, [ + copy, headName, input.name, + input.value, + overviewFlag, schema.title, schema.description, titleProps, @@ -91,18 +109,21 @@ const Component: NodeLayout = ({ ]); return ( - +
{children}
- + {overviewFlag ? null : ( + + )} ); }; - -export const Accordeon = React.memo(Component); diff --git a/src/lib/unstable/kit/form-layouts/Accordeon/index.ts b/src/lib/unstable/kit/layouts/Accordeon/index.ts similarity index 100% rename from src/lib/unstable/kit/form-layouts/Accordeon/index.ts rename to src/lib/unstable/kit/layouts/Accordeon/index.ts diff --git a/src/lib/unstable/kit/layouts/Card/Card.scss b/src/lib/unstable/kit/layouts/Card/Card.scss new file mode 100644 index 00000000..939b36f6 --- /dev/null +++ b/src/lib/unstable/kit/layouts/Card/Card.scss @@ -0,0 +1,51 @@ +@import '../../styles/functions.scss'; +@import '../../styles/variables.scss'; + +.#{$ns}card { + margin-bottom: spacing(4); + + &:last-child { + margin-bottom: 0; + } + + &:hover { + .#{$ns}card__copy-button { + display: block; + } + } + + &__inner { + display: flex; + flex-direction: column; + gap: spacing(4); + + &_hidden { + gap: 0; + + & > .#{$ns}card__content { + opacity: 0; + height: 0; + } + } + } + + &__card { + padding: spacing(4); + } + + &__header { + min-height: 28px; + } + + &__header-actions { + margin-left: spacing(3); + } + + &__toggler { + width: 28px; + } + + &__copy-button { + display: none; + } +} diff --git a/src/lib/unstable/kit/form-layouts/Card/Card.tsx b/src/lib/unstable/kit/layouts/Card/Card.tsx similarity index 65% rename from src/lib/unstable/kit/form-layouts/Card/Card.tsx rename to src/lib/unstable/kit/layouts/Card/Card.tsx index 62fe74d6..3604a8b9 100644 --- a/src/lib/unstable/kit/form-layouts/Card/Card.tsx +++ b/src/lib/unstable/kit/layouts/Card/Card.tsx @@ -11,8 +11,14 @@ import { type CardProps as UIKitCardProps, } from '@gravity-ui/uikit'; -import {type JsonSchema, type NodeLayout} from '../../../core'; -import {ArrayRemoveButton, EntityError, HTMLContent, LayoutContainer} from '../../components'; +import {type JsonSchema, type NodeLayout, SchemaRendererMode} from '../../../core'; +import { + ArrayRemoveButton, + CopyButton, + EntityError, + HTMLContent, + LayoutContainer, +} from '../../components'; import {block, getValidationState} from '../../utils'; import './Card.scss'; @@ -24,21 +30,25 @@ export interface CardProps extends UIKitCardProps { likeAccordeon?: boolean; } -const Component: NodeLayout = ({ +export const Card: NodeLayout = ({ children, headName, - props, input, meta, + mode, schema, + props, }) => { const { + copy, descriptionType = 'tooltip', likeAccordeon = true, open = true, ...restLayoutProps } = props; + const overviewFlag = mode === SchemaRendererMode.Overview; + const [visible, setVisible] = React.useState(likeAccordeon ? open : true); const toggleVisible = React.useCallback(() => { @@ -58,25 +68,34 @@ const Component: NodeLayout = ({ }, [schema.description, descriptionType]); const bottomDescription = React.useMemo(() => { - if (!schema.description || descriptionType !== 'bottom') { + if (!schema.description || descriptionType !== 'bottom' || overviewFlag) { return null; } return ; - }, [schema.description, descriptionType]); + }, [schema.description, descriptionType, overviewFlag]); return ( - + - +
{schema.title} {tooltip} - - + + {overviewFlag ? ( + + ) : null} + {overviewFlag ? null : ( + + )} {likeAccordeon ? (
+ {overviewFlag ? null : ( + + )} ); }; - -export const Card = React.memo(Component); diff --git a/src/lib/unstable/kit/form-layouts/Card/index.ts b/src/lib/unstable/kit/layouts/Card/index.ts similarity index 100% rename from src/lib/unstable/kit/form-layouts/Card/index.ts rename to src/lib/unstable/kit/layouts/Card/index.ts diff --git a/src/lib/unstable/kit/form-layouts/Section/Section.scss b/src/lib/unstable/kit/layouts/Section/Section.scss similarity index 82% rename from src/lib/unstable/kit/form-layouts/Section/Section.scss rename to src/lib/unstable/kit/layouts/Section/Section.scss index f6d60ed5..d9b8efde 100644 --- a/src/lib/unstable/kit/form-layouts/Section/Section.scss +++ b/src/lib/unstable/kit/layouts/Section/Section.scss @@ -8,6 +8,12 @@ margin-bottom: 0; } + &:hover { + .#{$ns}section__copy-button { + display: block; + } + } + &__header { min-height: 28px; } @@ -29,4 +35,8 @@ } } } + + &__copy-button { + display: none; + } } diff --git a/src/lib/unstable/kit/form-layouts/Section/Section.tsx b/src/lib/unstable/kit/layouts/Section/Section.tsx similarity index 54% rename from src/lib/unstable/kit/form-layouts/Section/Section.tsx rename to src/lib/unstable/kit/layouts/Section/Section.tsx index 5dff1090..a9489f51 100644 --- a/src/lib/unstable/kit/form-layouts/Section/Section.tsx +++ b/src/lib/unstable/kit/layouts/Section/Section.tsx @@ -2,8 +2,14 @@ import React from 'react'; import {Flex, HelpMark, Text, type TextProps} from '@gravity-ui/uikit'; -import type {JsonSchema, NodeLayout} from '../../../core'; -import {ArrayRemoveButton, EntityError, HTMLContent, LayoutContainer} from '../../components'; +import {type JsonSchema, type NodeLayout, SchemaRendererMode} from '../../../core'; +import { + ArrayRemoveButton, + CopyButton, + EntityError, + HTMLContent, + LayoutContainer, +} from '../../components'; import {block, getValidationState} from '../../utils'; import './Section.scss'; @@ -15,15 +21,18 @@ export interface SectionProps extends TextProps { withIndent?: boolean; } -const Component: NodeLayout = ({ +export const Section: NodeLayout = ({ children, headName, input, meta, + mode, schema, props, }) => { - const {descriptionType = 'tooltip', withIndent = false, ...restLayoutProps} = props; + const {copy, descriptionType = 'tooltip', withIndent = false, ...restLayoutProps} = props; + + const overviewFlag = mode === SchemaRendererMode.Overview; const tooltip = React.useMemo(() => { if (!schema.description || descriptionType === 'bottom') { @@ -38,15 +47,15 @@ const Component: NodeLayout = ({ }, [schema.description, descriptionType]); const bottomDescription = React.useMemo(() => { - if (!schema.description || descriptionType !== 'bottom') { + if (!schema.description || descriptionType !== 'bottom' || overviewFlag) { return null; } return ; - }, [schema.description, descriptionType]); + }, [schema.description, descriptionType, overviewFlag]); return ( - + @@ -54,15 +63,24 @@ const Component: NodeLayout = ({ {schema.title} {tooltip} - + {overviewFlag ? ( + + ) : null} + {overviewFlag ? null : ( + + )} {bottomDescription}
{children}
 - + {overviewFlag ? null : ( + + )} ); }; - -export const Section = React.memo(Component); diff --git a/src/lib/unstable/kit/form-layouts/Section/index.ts b/src/lib/unstable/kit/layouts/Section/index.ts similarity index 100% rename from src/lib/unstable/kit/form-layouts/Section/index.ts rename to src/lib/unstable/kit/layouts/Section/index.ts diff --git a/src/lib/unstable/kit/form-layouts/Transparent/Transparent.scss b/src/lib/unstable/kit/layouts/Transparent/Transparent.scss similarity index 54% rename from src/lib/unstable/kit/form-layouts/Transparent/Transparent.scss rename to src/lib/unstable/kit/layouts/Transparent/Transparent.scss index 1c26e711..40a371c1 100644 --- a/src/lib/unstable/kit/form-layouts/Transparent/Transparent.scss +++ b/src/lib/unstable/kit/layouts/Transparent/Transparent.scss @@ -7,4 +7,14 @@ &:last-child { margin-bottom: 0; } + + &:hover { + .#{$ns}transparent__copy-button { + display: block; + } + } + + &__copy-button { + display: none; + } } diff --git a/src/lib/unstable/kit/layouts/Transparent/Transparent.tsx b/src/lib/unstable/kit/layouts/Transparent/Transparent.tsx new file mode 100644 index 00000000..08e6da46 --- /dev/null +++ b/src/lib/unstable/kit/layouts/Transparent/Transparent.tsx @@ -0,0 +1,50 @@ +import React from 'react'; + +import {Flex} from '@gravity-ui/uikit'; +import isBoolean from 'lodash/isBoolean'; + +import {type JsonSchema, type NodeLayout, SchemaRendererMode} from '../../../core'; +import {ArrayRemoveButton, CopyButton, EntityError, LayoutContainer} from '../../components'; +import {block, getValidationState} from '../../utils'; + +import './Transparent.scss'; + +const b = block('transparent'); + +export interface TransparentProps { + hideEmpty?: boolean; +} + +export const Transparent: NodeLayout = ({ + children, + headName, + input, + meta, + mode, + props, +}) => { + const overviewFlag = mode === SchemaRendererMode.Overview; + + return ( + + + {children} + {overviewFlag ? null : } + {overviewFlag ? ( + + ) : null} + + {overviewFlag ? null : ( + + )} + + ); +}; diff --git a/src/lib/unstable/kit/form-layouts/Transparent/index.ts b/src/lib/unstable/kit/layouts/Transparent/index.ts similarity index 100% rename from src/lib/unstable/kit/form-layouts/Transparent/index.ts rename to src/lib/unstable/kit/layouts/Transparent/index.ts diff --git a/src/lib/unstable/kit/layouts/index.ts b/src/lib/unstable/kit/layouts/index.ts new file mode 100644 index 00000000..a79a16ff --- /dev/null +++ b/src/lib/unstable/kit/layouts/index.ts @@ -0,0 +1,4 @@ +export {Accordeon, type AccordeonProps} from './Accordeon'; +export {Card, type CardProps} from './Card'; +export {Section, type SectionProps} from './Section'; +export {Transparent} from './Transparent'; diff --git a/src/lib/unstable/kit/overview-entities/OverviewBooleanBase/OverviewBooleanBase.tsx b/src/lib/unstable/kit/overview-entities/BooleanValue/BooleanValue.tsx similarity index 76% rename from src/lib/unstable/kit/overview-entities/OverviewBooleanBase/OverviewBooleanBase.tsx rename to src/lib/unstable/kit/overview-entities/BooleanValue/BooleanValue.tsx index 17b1e7e9..edd958cd 100644 --- a/src/lib/unstable/kit/overview-entities/OverviewBooleanBase/OverviewBooleanBase.tsx +++ b/src/lib/unstable/kit/overview-entities/BooleanValue/BooleanValue.tsx @@ -1,12 +1,12 @@ import React from 'react'; import type {TextProps} from '@gravity-ui/uikit'; -import {isBoolean} from 'lodash'; +import isBoolean from 'lodash/isBoolean'; import type {JsonSchemaBoolean, NodeEntity} from '../../../core'; import {EmptyEntityValue, EntityContainer, LongValue, type LongValueProps} from '../../components'; -export interface OverviewBooleanBaseProps extends Omit { +export interface BooleanValueProps extends Omit { valueDescriptions?: { true?: string; false?: string; @@ -17,10 +17,7 @@ export interface OverviewBooleanBaseProps extends Omit = ({ - input, - props, -}) => { +export const BooleanValue: NodeEntity = ({input, props}) => { const {valueDescriptions, viewColor, ...entityRestProps} = props; if (!isBoolean(input.value)) { @@ -45,5 +42,3 @@ const OverviewBooleanBaseComponent: NodeEntity ); }; - -export const OverviewBooleanBase = React.memo(OverviewBooleanBaseComponent); diff --git a/src/lib/unstable/kit/overview-entities/BooleanValue/index.ts b/src/lib/unstable/kit/overview-entities/BooleanValue/index.ts new file mode 100644 index 00000000..f813e5c0 --- /dev/null +++ b/src/lib/unstable/kit/overview-entities/BooleanValue/index.ts @@ -0,0 +1 @@ +export {BooleanValue, type BooleanValueProps} from './BooleanValue'; diff --git a/src/lib/unstable/kit/overview-entities/ColorPickerValue/ColorPickerValue.scss b/src/lib/unstable/kit/overview-entities/ColorPickerValue/ColorPickerValue.scss new file mode 100644 index 00000000..120ea4a7 --- /dev/null +++ b/src/lib/unstable/kit/overview-entities/ColorPickerValue/ColorPickerValue.scss @@ -0,0 +1,10 @@ +@import '../../styles/variables.scss'; + +.#{$ns}color-picker-value { + &__preview { + width: 14px; + height: 14px; + margin-top: -1px; + border-radius: var(--g-border-radius-xs); + } +} diff --git a/src/lib/unstable/kit/overview-entities/ColorPickerValue/ColorPickerValue.tsx b/src/lib/unstable/kit/overview-entities/ColorPickerValue/ColorPickerValue.tsx new file mode 100644 index 00000000..6e2695b6 --- /dev/null +++ b/src/lib/unstable/kit/overview-entities/ColorPickerValue/ColorPickerValue.tsx @@ -0,0 +1,38 @@ +import React from 'react'; + +import type {JsonSchemaString, NodeEntity} from '../../../core'; +import {EmptyEntityValue, EntityContainer, LongValue, type LongValueProps} from '../../components'; +import {block} from '../../utils'; + +import './ColorPickerValue.scss'; + +const b = block('color-picker-value'); + +export interface ColorPickerValueProps extends Omit {} + +export const ColorPickerValue: NodeEntity = ({ + input, + props, +}) => { + if (!input.value) { + return ; + } + + return ( + + + {typeof CSS !== 'undefined' && + typeof CSS.supports === 'function' && + CSS.supports('color', input.value) ? ( + + ) : null} + + ); +}; diff --git a/src/lib/unstable/kit/overview-entities/ColorPickerValue/index.ts b/src/lib/unstable/kit/overview-entities/ColorPickerValue/index.ts new file mode 100644 index 00000000..201fd12f --- /dev/null +++ b/src/lib/unstable/kit/overview-entities/ColorPickerValue/index.ts @@ -0,0 +1 @@ +export {ColorPickerValue, type ColorPickerValueProps} from './ColorPickerValue'; diff --git a/src/lib/unstable/kit/overview-entities/DateValue/DateValue.tsx b/src/lib/unstable/kit/overview-entities/DateValue/DateValue.tsx new file mode 100644 index 00000000..19d61aed --- /dev/null +++ b/src/lib/unstable/kit/overview-entities/DateValue/DateValue.tsx @@ -0,0 +1,40 @@ +import React from 'react'; + +import {type DatePickerProps} from '@gravity-ui/date-components'; +import {isValidTimeZone} from '@gravity-ui/date-utils'; + +import type {JsonSchemaAny, NodeEntity} from '../../../core'; +import {EmptyEntityValue, EntityContainer, LongValue, type LongValueProps} from '../../components'; +import {DEFAULT_DATE_FORMAT} from '../../constants'; +import {parseDate} from '../../utils'; + +export interface DateValueProps extends Omit { + format?: DatePickerProps['format']; + outputFormat?: string; + timeZone?: DatePickerProps['timeZone']; +} + +export const DateValue: NodeEntity = ({input, props}) => { + const { + format = DEFAULT_DATE_FORMAT, + outputFormat, + timeZone: timeZoneProp, + ...restProps + } = props; + const timeZone = timeZoneProp && isValidTimeZone(timeZoneProp) ? timeZoneProp : undefined; + + const date = React.useMemo( + () => parseDate(input.value, outputFormat, timeZone), + [input.value, outputFormat, timeZone], + ); + + if (!date) { + return ; + } + + return ( + + + + ); +}; diff --git a/src/lib/unstable/kit/overview-entities/DateValue/index.ts b/src/lib/unstable/kit/overview-entities/DateValue/index.ts new file mode 100644 index 00000000..c7e43455 --- /dev/null +++ b/src/lib/unstable/kit/overview-entities/DateValue/index.ts @@ -0,0 +1 @@ +export {DateValue, type DateValueProps} from './DateValue'; diff --git a/src/lib/unstable/kit/overview-entities/NumberValue/NumberValue.tsx b/src/lib/unstable/kit/overview-entities/NumberValue/NumberValue.tsx new file mode 100644 index 00000000..5696b61d --- /dev/null +++ b/src/lib/unstable/kit/overview-entities/NumberValue/NumberValue.tsx @@ -0,0 +1,20 @@ +import React from 'react'; + +import isNumber from 'lodash/isNumber'; + +import type {JsonSchemaNumber, NodeEntity} from '../../../core'; +import {EmptyEntityValue, EntityContainer, LongValue, type LongValueProps} from '../../components'; + +export interface NumberValueProps extends Omit {} + +export const NumberValue: NodeEntity = ({input, props}) => { + if (!isNumber(input.value)) { + return ; + } + + return ( + + + + ); +}; diff --git a/src/lib/unstable/kit/overview-entities/NumberValue/index.ts b/src/lib/unstable/kit/overview-entities/NumberValue/index.ts new file mode 100644 index 00000000..0a0ae609 --- /dev/null +++ b/src/lib/unstable/kit/overview-entities/NumberValue/index.ts @@ -0,0 +1 @@ +export {NumberValue, type NumberValueProps} from './NumberValue'; diff --git a/src/lib/unstable/kit/overview-entities/NumberWithScaleValue/NumberWithScaleValue.tsx b/src/lib/unstable/kit/overview-entities/NumberWithScaleValue/NumberWithScaleValue.tsx new file mode 100644 index 00000000..a724c9f0 --- /dev/null +++ b/src/lib/unstable/kit/overview-entities/NumberWithScaleValue/NumberWithScaleValue.tsx @@ -0,0 +1,50 @@ +import React from 'react'; + +import {Text} from '@gravity-ui/uikit'; +import get from 'lodash/get'; +import isNumber from 'lodash/isNumber'; + +import type {JsonSchemaNumber, NodeEntity} from '../../../core'; +import {EmptyEntityValue, EntityContainer, LongValue, type LongValueProps} from '../../components'; + +export interface NumberWithScaleValueProps extends Omit { + scale?: Record; + viewType?: string; +} +export const NumberWithScaleValue: NodeEntity = ({ + input, + props, +}) => { + const {scale, viewType, ...restProps} = props; + + const level = React.useMemo(() => { + const determined = viewType ? get(scale, viewType) : undefined; + let suggested: {title: string; factor: number} | undefined = isNumber(determined?.factor) + ? determined + : undefined; + + Object.values(scale || {}).forEach((item) => { + if ( + isNumber(input.value) && + isNumber(item.factor) && + Math.abs(input.value / item.factor) >= 1 && + (!suggested || item.factor > suggested.factor) + ) { + suggested = item; + } + }); + + return suggested; + }, [input.value, scale, viewType]); + + if (!isNumber(input.value)) { + return ; + } + + return ( + + + {level?.title ? {level.title} : null} + + ); +}; diff --git a/src/lib/unstable/kit/overview-entities/NumberWithScaleValue/index.ts b/src/lib/unstable/kit/overview-entities/NumberWithScaleValue/index.ts new file mode 100644 index 00000000..615bc3e6 --- /dev/null +++ b/src/lib/unstable/kit/overview-entities/NumberWithScaleValue/index.ts @@ -0,0 +1 @@ +export {NumberWithScaleValue, type NumberWithScaleValueProps} from './NumberWithScaleValue'; diff --git a/src/lib/unstable/kit/overview-entities/OverviewBooleanBase/index.ts b/src/lib/unstable/kit/overview-entities/OverviewBooleanBase/index.ts deleted file mode 100644 index 9d486b80..00000000 --- a/src/lib/unstable/kit/overview-entities/OverviewBooleanBase/index.ts +++ /dev/null @@ -1 +0,0 @@ -export {OverviewBooleanBase, type OverviewBooleanBaseProps} from './OverviewBooleanBase'; diff --git a/src/lib/unstable/kit/overview-entities/OverviewStringBase/index.ts b/src/lib/unstable/kit/overview-entities/OverviewStringBase/index.ts deleted file mode 100644 index 80ff76b8..00000000 --- a/src/lib/unstable/kit/overview-entities/OverviewStringBase/index.ts +++ /dev/null @@ -1 +0,0 @@ -export {OverviewStringBase, type OverviewStringBaseProps} from './OverviewStringBase'; diff --git a/src/lib/unstable/kit/overview-entities/PrimitiveArrayValue/PrimitiveArrayValue.tsx b/src/lib/unstable/kit/overview-entities/PrimitiveArrayValue/PrimitiveArrayValue.tsx new file mode 100644 index 00000000..3d6c6455 --- /dev/null +++ b/src/lib/unstable/kit/overview-entities/PrimitiveArrayValue/PrimitiveArrayValue.tsx @@ -0,0 +1,53 @@ +import React from 'react'; + +import type {JsonSchemaArray, NodeEntity} from '../../../core'; +import {EmptyEntityValue, EntityContainer, LongValue, type LongValueProps} from '../../components'; + +export interface PrimitiveArrayValueProps extends Omit { + direction?: 'column' | 'row'; + enumDescriptions?: Record; +} + +export const PrimitiveArrayValue: NodeEntity = ({ + input, + props, +}) => { + const {direction = 'row', enumDescriptions, ...restProps} = props; + + const values = React.useMemo(() => { + if (!Array.isArray(input.value)) { + return []; + } + + return input.value.map((item) => { + const stringValue = String(item); + + return enumDescriptions?.[stringValue] || stringValue; + }); + }, [enumDescriptions, input.value]); + + if (!values.length) { + return ; + } + + if (direction === 'column') { + return ( + + {values.map((item, index) => ( + + ))} + + ); + } + + return ( + + + + ); +}; diff --git a/src/lib/unstable/kit/overview-entities/PrimitiveArrayValue/index.ts b/src/lib/unstable/kit/overview-entities/PrimitiveArrayValue/index.ts new file mode 100644 index 00000000..1d971f95 --- /dev/null +++ b/src/lib/unstable/kit/overview-entities/PrimitiveArrayValue/index.ts @@ -0,0 +1 @@ +export {PrimitiveArrayValue, type PrimitiveArrayValueProps} from './PrimitiveArrayValue'; diff --git a/src/lib/unstable/kit/overview-entities/RangeValue/RangeValue.tsx b/src/lib/unstable/kit/overview-entities/RangeValue/RangeValue.tsx new file mode 100644 index 00000000..974de912 --- /dev/null +++ b/src/lib/unstable/kit/overview-entities/RangeValue/RangeValue.tsx @@ -0,0 +1,39 @@ +import React from 'react'; + +import {Text} from '@gravity-ui/uikit'; +import isNumber from 'lodash/isNumber'; + +import type {JsonSchemaObject, NodeEntity} from '../../../core'; +import {EmptyEntityValue, EntityContainer, LongValue, type LongValueProps} from '../../components'; +import {DASH} from '../../constants'; + +export interface RangeValueProps extends Omit { + propertyKeys?: [string, string]; + separator?: string; +} + +export const RangeValue: NodeEntity = ({input, props}) => { + const {propertyKeys, separator = DASH, ...restProps} = props; + const [fromKey, toKey] = propertyKeys || ['from', 'to']; + + const from = input.value?.[fromKey]; + const to = input.value?.[toKey]; + + if (!isNumber(from) || !isNumber(to)) { + return ; + } + + return ( + + + {separator} + + + ); +}; diff --git a/src/lib/unstable/kit/overview-entities/RangeValue/index.ts b/src/lib/unstable/kit/overview-entities/RangeValue/index.ts new file mode 100644 index 00000000..e6c7ed78 --- /dev/null +++ b/src/lib/unstable/kit/overview-entities/RangeValue/index.ts @@ -0,0 +1 @@ +export {RangeValue, type RangeValueProps} from './RangeValue'; diff --git a/src/lib/unstable/kit/overview-entities/StringNumberWithScaleValue/StringNumberWithScaleValue.tsx b/src/lib/unstable/kit/overview-entities/StringNumberWithScaleValue/StringNumberWithScaleValue.tsx new file mode 100644 index 00000000..ff4d5290 --- /dev/null +++ b/src/lib/unstable/kit/overview-entities/StringNumberWithScaleValue/StringNumberWithScaleValue.tsx @@ -0,0 +1,57 @@ +import React from 'react'; + +import {Text} from '@gravity-ui/uikit'; +import Decimal from 'decimal.js'; +import get from 'lodash/get'; + +import type {JsonSchemaString, NodeEntity} from '../../../core'; +import {EmptyEntityValue, EntityContainer, LongValue, type LongValueProps} from '../../components'; +import {isStringNumber} from '../../utils'; + +export interface StringNumberWithScaleValueProps extends Omit { + scale?: Record; + viewType?: string; +} +export const StringNumberWithScaleValue: NodeEntity< + JsonSchemaString, + StringNumberWithScaleValueProps +> = ({input, props}) => { + const {scale, viewType, ...restProps} = props; + + const level = React.useMemo(() => { + const determined = viewType ? get(scale, viewType) : undefined; + let suggested: {title: string; factor: string} | undefined = isStringNumber( + determined?.factor, + ) + ? determined + : undefined; + + Object.values(scale || {}).forEach((item) => { + if ( + isStringNumber(input.value) && + isStringNumber(item.factor) && + new Decimal(input.value).div(item.factor).abs().gte(1) && + (!suggested || new Decimal(item.factor).gt(suggested.factor)) + ) { + suggested = item; + } + }); + + return suggested; + }, [input.value, scale, viewType]); + + if (!isStringNumber(input.value)) { + return ; + } + + return ( + + + {level?.title ? {level.title} : null} + + ); +}; diff --git a/src/lib/unstable/kit/overview-entities/StringNumberWithScaleValue/index.ts b/src/lib/unstable/kit/overview-entities/StringNumberWithScaleValue/index.ts new file mode 100644 index 00000000..d7ed04ff --- /dev/null +++ b/src/lib/unstable/kit/overview-entities/StringNumberWithScaleValue/index.ts @@ -0,0 +1,4 @@ +export { + StringNumberWithScaleValue, + type StringNumberWithScaleValueProps, +} from './StringNumberWithScaleValue'; diff --git a/src/lib/unstable/kit/overview-entities/OverviewStringBase/OverviewStringBase.tsx b/src/lib/unstable/kit/overview-entities/StringValue/StringValue.tsx similarity index 60% rename from src/lib/unstable/kit/overview-entities/OverviewStringBase/OverviewStringBase.tsx rename to src/lib/unstable/kit/overview-entities/StringValue/StringValue.tsx index 10ca4eab..0931b961 100644 --- a/src/lib/unstable/kit/overview-entities/OverviewStringBase/OverviewStringBase.tsx +++ b/src/lib/unstable/kit/overview-entities/StringValue/StringValue.tsx @@ -3,12 +3,9 @@ import React from 'react'; import type {JsonSchemaString, NodeEntity} from '../../../core'; import {EmptyEntityValue, EntityContainer, LongValue, type LongValueProps} from '../../components'; -export interface OverviewStringBaseProps extends Omit {} +export interface StringValueProps extends Omit {} -const OverviewStringBaseComponent: NodeEntity = ({ - input, - props, -}) => { +export const StringValue: NodeEntity = ({input, props}) => { if (!input.value) { return ; } @@ -19,5 +16,3 @@ const OverviewStringBaseComponent: NodeEntity ); }; - -export const OverviewStringBase = React.memo(OverviewStringBaseComponent); diff --git a/src/lib/unstable/kit/overview-entities/StringValue/index.ts b/src/lib/unstable/kit/overview-entities/StringValue/index.ts new file mode 100644 index 00000000..1ae382af --- /dev/null +++ b/src/lib/unstable/kit/overview-entities/StringValue/index.ts @@ -0,0 +1 @@ +export {StringValue, type StringValueProps} from './StringValue'; diff --git a/src/lib/unstable/kit/overview-entities/index.ts b/src/lib/unstable/kit/overview-entities/index.ts index 7e8cf618..db3fdc50 100644 --- a/src/lib/unstable/kit/overview-entities/index.ts +++ b/src/lib/unstable/kit/overview-entities/index.ts @@ -1,2 +1,12 @@ -export {OverviewBooleanBase, type OverviewBooleanBaseProps} from './OverviewBooleanBase'; -export {OverviewStringBase, type OverviewStringBaseProps} from './OverviewStringBase'; +export {BooleanValue, type BooleanValueProps} from './BooleanValue'; +export {ColorPickerValue, type ColorPickerValueProps} from './ColorPickerValue'; +export {DateValue, type DateValueProps} from './DateValue'; +export {NumberValue, type NumberValueProps} from './NumberValue'; +export {NumberWithScaleValue, type NumberWithScaleValueProps} from './NumberWithScaleValue'; +export {PrimitiveArrayValue, type PrimitiveArrayValueProps} from './PrimitiveArrayValue'; +export {RangeValue, type RangeValueProps} from './RangeValue'; +export { + StringNumberWithScaleValue, + type StringNumberWithScaleValueProps, +} from './StringNumberWithScaleValue'; +export {StringValue, type StringValueProps} from './StringValue'; diff --git a/src/lib/unstable/kit/overview-layouts/OverviewColumn/OverviewColumn.scss b/src/lib/unstable/kit/overview-layouts/OverviewColumn/OverviewColumn.scss new file mode 100644 index 00000000..d461897b --- /dev/null +++ b/src/lib/unstable/kit/overview-layouts/OverviewColumn/OverviewColumn.scss @@ -0,0 +1,33 @@ +@import '../../styles/functions.scss'; +@import '../../styles/variables.scss'; + +.#{$ns}overview-column { + margin-bottom: spacing(4); + + &:last-child { + margin-bottom: 0; + } + + &:hover { + .#{$ns}overview-column__copy-button { + display: block; + } + } + + &__top { + display: inline; + } + + &__title { + min-height: 18px; + margin-right: spacing(1); + } + + &__help-mark { + margin-top: 1.5px; + } + + &__copy-button { + display: none; + } +} diff --git a/src/lib/unstable/kit/overview-layouts/OverviewColumn/OverviewColumn.tsx b/src/lib/unstable/kit/overview-layouts/OverviewColumn/OverviewColumn.tsx new file mode 100644 index 00000000..b0fe0a0b --- /dev/null +++ b/src/lib/unstable/kit/overview-layouts/OverviewColumn/OverviewColumn.tsx @@ -0,0 +1,48 @@ +import React from 'react'; + +import {Flex, HelpMark, Text} from '@gravity-ui/uikit'; + +import type {JsonSchema, NodeLayout} from '../../../core'; +import {CopyButton, HTMLContent, LayoutContainer} from '../../components'; +import {block} from '../../utils'; + +import './OverviewColumn.scss'; + +const b = block('overview-column'); + +export const OverviewColumn: NodeLayout = ({children, input, schema, props}) => { + const tooltip = React.useMemo(() => { + if (!schema.description) { + return null; + } + + return ( + + + + ); + }, [schema.description]); + + return ( + + +
+ + {schema.title} + + {tooltip} +
+ + + + {children} + + + + + ); +}; diff --git a/src/lib/unstable/kit/overview-layouts/OverviewColumn/index.ts b/src/lib/unstable/kit/overview-layouts/OverviewColumn/index.ts new file mode 100644 index 00000000..1ba52a8b --- /dev/null +++ b/src/lib/unstable/kit/overview-layouts/OverviewColumn/index.ts @@ -0,0 +1 @@ +export {OverviewColumn} from './OverviewColumn'; diff --git a/src/lib/unstable/kit/overview-layouts/OverviewRow/OverviewRow.scss b/src/lib/unstable/kit/overview-layouts/OverviewRow/OverviewRow.scss index 8acb763f..5ef1e68c 100644 --- a/src/lib/unstable/kit/overview-layouts/OverviewRow/OverviewRow.scss +++ b/src/lib/unstable/kit/overview-layouts/OverviewRow/OverviewRow.scss @@ -20,7 +20,7 @@ flex-shrink: 0; min-height: 20px; display: flex; - align-items: baseline; + align-items: flex-start; } &__title { @@ -30,11 +30,12 @@ &__help-mark { min-width: 16px; margin-left: spacing(1); - margin-top: 1.5px; + margin-top: 1px; } &__dots { min-width: 25px; + height: 13.5px; flex-grow: 1; margin: 0 spacing(0.5); border-bottom: 1px dotted var(--g-color-text-secondary); diff --git a/src/lib/unstable/kit/overview-layouts/OverviewRow/OverviewRow.tsx b/src/lib/unstable/kit/overview-layouts/OverviewRow/OverviewRow.tsx index bba873eb..9f8fceaa 100644 --- a/src/lib/unstable/kit/overview-layouts/OverviewRow/OverviewRow.tsx +++ b/src/lib/unstable/kit/overview-layouts/OverviewRow/OverviewRow.tsx @@ -10,7 +10,7 @@ import './OverviewRow.scss'; const b = block('overview-row'); -const Component: NodeLayout = ({children, input, schema, props}) => { +export const OverviewRow: NodeLayout = ({children, input, schema, props}) => { const tooltip = React.useMemo(() => { if (!schema.description) { return null; @@ -45,5 +45,3 @@ const Component: NodeLayout = ({children, input, schema, props}) => ); }; - -export const OverviewRow = React.memo(Component); diff --git a/src/lib/unstable/kit/overview-layouts/index.ts b/src/lib/unstable/kit/overview-layouts/index.ts index 082e6871..ccfe092a 100644 --- a/src/lib/unstable/kit/overview-layouts/index.ts +++ b/src/lib/unstable/kit/overview-layouts/index.ts @@ -1 +1,2 @@ +export {OverviewColumn} from './OverviewColumn'; export {OverviewRow} from './OverviewRow'; diff --git a/src/lib/unstable/kit/utils/__tests__/date.test.ts b/src/lib/unstable/kit/utils/__tests__/date.test.ts new file mode 100644 index 00000000..91330e67 --- /dev/null +++ b/src/lib/unstable/kit/utils/__tests__/date.test.ts @@ -0,0 +1,75 @@ +import {dateTime} from '@gravity-ui/date-utils'; + +import {parseDate} from '../date'; + +describe('parseDate', () => { + test('returns null for empty values', () => { + expect(parseDate(undefined)).toBeNull(); + expect(parseDate(null)).toBeNull(); + expect(parseDate('')).toBeNull(); + expect(parseDate(0)).toBeNull(); + expect(parseDate(false)).toBeNull(); + }); + + test('parses an ISO string', () => { + const result = parseDate('2020-01-01T00:00:00.000Z'); + + expect(result).not.toBeNull(); + expect(result?.toISOString()).toBe('2020-01-01T00:00:00.000Z'); + }); + + test('parses a Date instance', () => { + const result = parseDate(new Date('2020-01-01T00:00:00.000Z')); + + expect(result).not.toBeNull(); + expect(result?.toISOString()).toBe('2020-01-01T00:00:00.000Z'); + }); + + test('parses a millisecond timestamp', () => { + const timestamp = Date.UTC(2020, 0, 1); + const result = parseDate(timestamp); + + expect(result).not.toBeNull(); + expect(result?.valueOf()).toBe(timestamp); + }); + + test('parses a timestamp object with seconds', () => { + const result = parseDate({seconds: 1577836800, nanos: 0}); + + expect(result).not.toBeNull(); + expect(result?.toISOString()).toBe('2020-01-01T00:00:00.000Z'); + }); + + test('does not convert a timestamp object when seconds is 0', () => { + const result = parseDate({seconds: 0}); + + expect(result?.toISOString()).not.toBe('1970-01-01T00:00:00.000Z'); + }); + + test('parses a string with the given output format', () => { + const result = parseDate('01.01.2020 00:00', 'DD.MM.YYYY HH:mm'); + + expect(result).not.toBeNull(); + expect(result?.format('YYYY-MM-DD')).toBe('2020-01-01'); + }); + + test('applies the given time zone', () => { + const result = parseDate('2020-01-01T00:00:00.000Z', undefined, 'America/New_York'); + + expect(result).not.toBeNull(); + expect(result?.timeZone()).toBe('America/New_York'); + expect(result?.format('YYYY-MM-DD HH:mm')).toBe('2019-12-31 19:00'); + }); + + test('returns a DateTime equivalent to dateTime for the same input', () => { + const input = '2020-06-15T12:30:00.000Z'; + const result = parseDate(input); + + expect(result?.valueOf()).toBe(dateTime({input}).valueOf()); + }); + + test('returns null for an unparseable value', () => { + expect(parseDate('not-a-date')).toBeNull(); + expect(parseDate({foo: 'bar'})).toBeNull(); + }); +}); diff --git a/src/lib/unstable/kit/utils/date.ts b/src/lib/unstable/kit/utils/date.ts new file mode 100644 index 00000000..bb260cae --- /dev/null +++ b/src/lib/unstable/kit/utils/date.ts @@ -0,0 +1,19 @@ +import {type DateTime, dateTimeParse} from '@gravity-ui/date-utils'; + +export const parseDate = ( + inputValue: unknown, + outputFormat?: string, + timeZone?: string, +): DateTime | null => { + if (!inputValue) { + return null; + } + + let raw = inputValue as {seconds?: number} | string | number | Date; + + if (typeof raw === 'object' && raw !== null && 'seconds' in raw && raw.seconds) { + raw = raw.seconds * 1000; + } + + return dateTimeParse(raw, {format: outputFormat, timeZone}) || null; +}; diff --git a/src/lib/unstable/kit/utils/index.ts b/src/lib/unstable/kit/utils/index.ts index 6cd95034..42ee179d 100644 --- a/src/lib/unstable/kit/utils/index.ts +++ b/src/lib/unstable/kit/utils/index.ts @@ -10,3 +10,4 @@ export { isStringNumber, isTupleItem, } from './common'; +export {parseDate} from './date'; diff --git a/src/stories/Unstable.stories.tsx b/src/stories/Unstable.stories.tsx index 16ec775f..d1b67150 100644 --- a/src/stories/Unstable.stories.tsx +++ b/src/stories/Unstable.stories.tsx @@ -98,7 +98,7 @@ const schema: JsonSchemaObject = { cm: {title: 'cm', factor: '0.01'}, }, defaultType: 'm', - overviewEntity: 'km', + viewType: 'm', }, }, }, @@ -120,7 +120,7 @@ const schema: JsonSchemaObject = { cm: {title: 'cm', factor: 0.01}, }, defaultType: 'm', - viewType: 'km', + viewType: 'm', }, }), }, @@ -135,7 +135,7 @@ const schema: JsonSchemaObject = { nodeParameters: { type: NodeType.Number, entity: 'base', - formLayout: 'transparent', + layout: 'transparent', }, }, to: { @@ -144,7 +144,7 @@ const schema: JsonSchemaObject = { nodeParameters: defineNodeParameters({ type: NodeType.Number, entity: 'base', - formLayout: 'transparent', + layout: 'transparent', }), }, }, @@ -165,7 +165,7 @@ const schema: JsonSchemaObject = { nodeParameters: { type: NodeType.String, entity: 'select', - formLayout: 'transparent', + layout: 'transparent', }, }, bar: { @@ -174,7 +174,7 @@ const schema: JsonSchemaObject = { nodeParameters: { type: NodeType.Number, entity: 'base', - formLayout: 'transparent', + layout: 'transparent', }, }, rab: { @@ -183,7 +183,7 @@ const schema: JsonSchemaObject = { nodeParameters: { type: NodeType.Boolean, entity: 'base', - formLayout: 'transparent', + layout: 'transparent', }, }, }, @@ -244,7 +244,7 @@ const schema: JsonSchemaObject = { nodeParameters: { type: NodeType.Object, entity: 'base', - formLayout: 'section', + layout: 'section', }, }, bar: { @@ -269,7 +269,7 @@ const schema: JsonSchemaObject = { nodeParameters: { type: NodeType.Object, entity: 'one_of_nested', - formLayout: 'transparent', + layout: 'transparent', entityProps: { booleanToKey: { true: 'foo', @@ -328,7 +328,7 @@ const schema: JsonSchemaObject = { nodeParameters: { type: NodeType.Object, entity: 'base', - formLayout: 'section', + layout: 'section', }, }, bar: { @@ -353,7 +353,7 @@ const schema: JsonSchemaObject = { nodeParameters: { type: NodeType.Object, entity: 'few_of_nested', - formLayout: 'transparent', + layout: 'transparent', entityProps: { toggler: { title: 'few of toggler', @@ -366,6 +366,7 @@ const schema: JsonSchemaObject = { layout: 'row', }, }, + withIndent: true, }, }, }, @@ -386,7 +387,7 @@ const schema: JsonSchemaObject = { nodeParameters: { type: NodeType.Array, entity: 'base', - formLayout: 'card', + layout: 'card', }, }, tuple: { @@ -421,13 +422,13 @@ const schema: JsonSchemaObject = { layout: 'row', }, }, - array_table: { + table: { default: [ {name: 'John', surname: 'Doe', age: 30}, {name: 'Jane', surname: 'Smith', age: 25}, ], type: JsonSchemaType.Array, - title: 'array_table', + title: 'table', description: 'array table description', items: { properties: { @@ -437,7 +438,7 @@ const schema: JsonSchemaObject = { nodeParameters: { type: NodeType.String, entity: 'base', - formLayout: 'transparent', + layout: 'cell', }, }, surname: { @@ -445,7 +446,7 @@ const schema: JsonSchemaObject = { nodeParameters: { type: NodeType.String, entity: 'base', - formLayout: 'transparent', + layout: 'cell', }, }, age: { @@ -453,7 +454,7 @@ const schema: JsonSchemaObject = { nodeParameters: { type: NodeType.Number, entity: 'base', - formLayout: 'transparent', + layout: 'cell', }, }, }, @@ -461,17 +462,17 @@ const schema: JsonSchemaObject = { nodeParameters: { type: NodeType.Object, entity: 'base', - formLayout: 'accordeon', - formLayoutProps: { + layout: 'accordeon', + layoutProps: { withIndent: true, }, }, }, nodeParameters: { type: NodeType.Array, - entity: 'array_table', - formLayout: 'accordeon', - formLayoutProps: { + entity: 'table', + layout: 'accordeon', + layoutProps: { withIndent: true, }, }, @@ -494,7 +495,7 @@ const schema: JsonSchemaObject = { type: NodeType.String, entity: 'base', layout: 'row', - formLayoutProps: { + layoutProps: { descriptionType: 'bottom', required: true, }, @@ -599,7 +600,7 @@ const schema: JsonSchemaObject = { description: 'date input description', nodeParameters: { type: NodeType.Any, - entity: 'date_input', + entity: 'date', layout: 'row', }, }, @@ -652,7 +653,7 @@ const schema: JsonSchemaObject = { nodeParameters: { type: NodeType.String, entity: 'select', - formLayout: 'accordeon', + layout: 'accordeon', entityProps: { enumDescriptions: { draft: 'Draft', @@ -679,7 +680,7 @@ const schema: JsonSchemaObject = { nodeParameters: { type: NodeType.String, entity: 'select', - formLayout: 'accordeon', + layout: 'accordeon', entityProps: { enumDescriptions: { draft: 'Draft', @@ -698,7 +699,7 @@ const schema: JsonSchemaObject = { nodeParameters: { type: NodeType.Object, entity: 'base', - formLayout: 'transparent', + layout: 'transparent', }, }, checkbox_group: { @@ -712,7 +713,7 @@ const schema: JsonSchemaObject = { nodeParameters: { type: NodeType.Array, entity: 'checkbox_group', - formLayout: 'accordeon', + layout: 'accordeon', entityProps: { direction: 'column', enumDescriptions: { @@ -739,7 +740,7 @@ const schema: JsonSchemaObject = { nodeParameters: { type: NodeType.Array, entity: 'checkbox_group', - formLayout: 'accordeon', + layout: 'accordeon', entityProps: { direction: 'column', enumDescriptions: { @@ -757,7 +758,7 @@ const schema: JsonSchemaObject = { nodeParameters: { type: NodeType.Object, entity: 'base', - formLayout: 'transparent', + layout: 'transparent', }, }, multi_select: { @@ -818,7 +819,7 @@ const schema: JsonSchemaObject = { nodeParameters: { type: NodeType.String, entity: 'base', - formLayout: 'transparent', + layout: 'transparent', }, }, }, @@ -847,8 +848,8 @@ const schema: JsonSchemaObject = { nodeParameters: { type: NodeType.Object, entity: 'base', - formLayout: 'section', - formLayoutProps: { + layout: 'section', + layoutProps: { descriptionType: 'bottom', withIndent: true, variant: 'subheader-2', @@ -910,7 +911,7 @@ const value = { }, array: ['test', 'test2'], tuple: ['test', 123], - array_table: [ + table: [ {name: 'John', surname: 'Doe', age: 30}, {name: 'Jane', surname: 'Smith', age: 25}, ], @@ -1155,7 +1156,7 @@ const template = () => { const Template: StoryFn = (__) => { const [cfg, _setCfg] = React.useState(config); const [sch, _setSch] = React.useState(schema); - const [mode, setMode] = React.useState(SchemaRendererMode.Overview); + const [mode, setMode] = React.useState(SchemaRendererMode.Form); React.useEffect(() => { setTimeout(() => {