feat: add column view (#257)

src/lib/kit/components/Layouts/Column/Column.scss

@@ -0,0 +1,81 @@
+@import '../../../styles/variables.scss';
+
+.#{$ns}column {
+    margin-bottom: 15px;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+
+    &__first-row {
+        min-height: 28px;
+        display: flex;
+        margin-bottom: auto;
+        flex-direction: column;
+        flex-shrink: 0;
+
+        &-inner {
+            display: inline;
+            margin-top: auto;
+            margin-bottom: auto;
+        }
+
+        &::after {
+            content: '';
+            width: 100%;
+            flex-shrink: 1;
+        }
+    }
+
+    &__title {
+        word-break: break-word;
+        margin-right: 3px;
+
+        &_required {
+            &::after {
+                content: '*';
+                color: var(--g-color-text-danger);
+            }
+        }
+    }
+
+    &__note {
+        position: relative;
+
+        &-inner {
+            position: absolute;
+            margin-top: 1px;
+
+            .g-help-popover {
+                display: flex;
+
+                & > span {
+                    display: flex;
+                }
+            }
+        }
+    }
+
+    &__second-row {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+
+        &-inner {
+            display: flex;
+            justify-content: space-around;
+        }
+    }
+
+    &__remove-button {
+        margin-left: 5px;
+    }
+
+    &__required-mark {
+        color: var(--g-color-text-danger);
+    }
+
+    &__error-wrapper {
+        min-width: 100%;
+    }
+}

src/lib/kit/components/Layouts/Column/Column.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+
+import {HelpPopover} from '@gravity-ui/components';
+import {TrashBin} from '@gravity-ui/icons';
+import {Button, Icon, Text} from '@gravity-ui/uikit';
+
+import {
+    FieldValue,
+    LayoutProps,
+    Spec,
+    StringSpec,
+    isArrayItem,
+    isArraySpec,
+    isObjectSpec,
+    withGenerateButton,
+} from '../../../../core';
+import {ErrorWrapper, GenerateRandomValueButton} from '../../../components';
+import {block} from '../../../utils';
+
+import './Column.scss';
+
+const b = block('column');
+
+interface ColumnProps {}
+
+const ColumnBase = <T extends FieldValue, S extends Spec>({
+    name,
+    spec,
+    input,
+    meta,
+    children,
+}: LayoutProps<T, undefined, undefined, S> & ColumnProps) => {
+    const arrayItem = React.useMemo(() => isArrayItem(name), [name]);
+    const generateButton = React.useMemo(() => withGenerateButton(spec), [spec]);
+
+    return (
+        <div className={b()}>
+            <div className={b('first-row')}>
+                <div className={b('first-row-inner')}>
+                    <Text className={b('title', {required: spec.required})}>
+                        {spec.viewSpec.layoutTitle}
+                    </Text>
+                    {spec.viewSpec.layoutDescription ? (
+                        <span className={b('note')}>
+                            <Text className={b('note-inner')}>
+                                <HelpPopover
+                                    htmlContent={spec.viewSpec.layoutDescription}
+                                    placement={['bottom', 'top']}
+                                />
+                            </Text>
+                        </span>
+                    ) : null}
+                </div>
+            </div>
+            <div className={b('second-row')}>
+                <div className={b('second-row-inner')}>
+                    <ErrorWrapper
+                        name={name}
+                        meta={meta}
+                        withoutChildErrorStyles={
+                            // TODO: remove condition spec.viewSpec.type !== 'select'
+                            (isArraySpec(spec) && spec.viewSpec.type !== 'select') ||
+                            isObjectSpec(spec)
+                        }
+                        className={b('error-wrapper')}
+                    >
+                        {children}
+                    </ErrorWrapper>
+                    {generateButton ? (
+                        <GenerateRandomValueButton
+                            spec={spec as StringSpec}
+                            onChange={input.onChange as (value: string) => void}
+                        />
+                    ) : null}
+                    {arrayItem ? (
+                        <Button
+                            view="flat-secondary"
+                            className={b('remove-button')}
+                            onClick={input.onDrop}
+                            qa={`${name}-remove-item`}
+                        >
+                            <Icon data={TrashBin} size={16} />
+                        </Button>
+                    ) : null}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export const Column = <T extends FieldValue, S extends Spec>(
+    props: LayoutProps<T, undefined, undefined, S>,
+) => <ColumnBase {...props} />;

src/lib/kit/components/Layouts/Column/__tests__/Column.visual.test.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import {COLUMN_CARD} from './helpers';
+
+import {test} from '~playwright/core';
+import {DynamicForm} from '~playwright/core/DynamicForm';
+
+test.describe('Column Form', () => {
+    test('object spec', async ({mount, expectScreenshot}) => {
+        await mount(<DynamicForm spec={COLUMN_CARD} />);
+
+        await expectScreenshot();
+    });
+});

src/lib/kit/components/Layouts/Column/__tests__/helpers.ts

@@ -0,0 +1,55 @@
+import {FormValue, ObjectSpec, SpecTypes} from '../../../../../core';
+
+export const COLUMN_CARD: ObjectSpec = {
+    defaultValue: {
+        name: 'value',
+        age: 10,
+        license: false,
+    },
+    type: SpecTypes.Object,
+    properties: {
+        name: {
+            type: SpecTypes.String,
+            viewSpec: {
+                type: 'base',
+                layout: 'column',
+                layoutDescription: 'Description for Name',
+                layoutTitle: 'Name',
+            },
+        },
+        age: {
+            type: SpecTypes.Number,
+            viewSpec: {
+                type: 'base',
+                layout: 'column',
+                layoutDescription: 'Description for Age',
+                layoutTitle: 'Age',
+            },
+        },
+        license: {
+            type: SpecTypes.Boolean,
+            viewSpec: {
+                type: 'base',
+                layout: 'column',
+                layoutDescription: 'Description for License',
+                layoutTitle: 'License',
+            },
+        },
+    },
+    viewSpec: {
+        type: 'base',
+        layout: 'accordeon',
+        layoutTitle: 'Candidate',
+        layoutDescription: 'Description for base',
+        layoutOpen: true,
+    },
+};
+
+export const VALUE: Record<string, FormValue> = {
+    array: ['value', 'value'],
+    object: {
+        name: 'name',
+        age: 21,
+        license: true,
+    },
+};

src/lib/kit/components/Layouts/Column/index.ts

@@ -0,0 +1 @@
+export * from './Column';

src/lib/kit/components/Layouts/index.ts

@@ -3,6 +3,7 @@ export * from './AccordeonCard';
 export * from './CardAccordeon';
 export * from './CardSection';
 export * from './Row';
+export * from './Column';
 export * from './Section';
 export * from './TableCell';
 export * from './Transparent';

src/lib/kit/components/ViewLayouts/ViewColumn/ViewColumn.scss

@@ -0,0 +1,31 @@
+@import '../../../styles/variables.scss';
+@import '../../../styles/mixins.scss';
+
+.#{$ns}view-column {
+    margin-bottom: 20px;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+
+    &__first-row {
+        display: flex;
+        align-items: baseline;
+    }
+
+    &__note {
+        margin-inline-start: var(--g-spacing-half);
+    }
+
+    &__second-row {
+        & > .#{$ns}view-transparent {
+            margin-bottom: 6px;
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+    }
+
+    @include with-copy-button();
+}

src/lib/kit/components/ViewLayouts/ViewColumn/ViewColumn.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+import {Text} from '@gravity-ui/uikit';
+import {HelpPopover} from '@gravity-ui/components';
+
+import {FormValue, Spec, ViewLayoutProps, useDynamicFormsCtx} from '../../../../core';
+import {CopyButton} from '../../../../kit';
+import {block, isNotEmptyValue} from '../../../utils';
+
+import './ViewColumn.scss';
+
+const b = block('view-column');
+
+export const ViewColumn = <T extends FormValue, S extends Spec>({
+    value,
+    spec,
+    children,
+}: ViewLayoutProps<T, S>) => {
+    const {showLayoutDescription} = useDynamicFormsCtx();
+
+    if (!isNotEmptyValue(value, spec)) {
+        return null;
+    }
+
+    return (
+        <div className={b()}>
+            <div className={b('first-row')}>
+                <Text color="secondary" ellipsis={true}>
+                    {spec.viewSpec.layoutTitle}
+                </Text>
+                {showLayoutDescription && spec.viewSpec.layoutDescription ? (
+                    <HelpPopover
+                        className={b('note')}
+                        htmlContent={spec.viewSpec.layoutDescription}
+                        placement={['bottom', 'top']}
+                    />
+                ) : null}
+            </div>
+            <div className={b('second-row')}>{children}</div>
+            <CopyButton spec={spec} value={value} />
+        </div>
+    );
+};

src/lib/kit/components/ViewLayouts/ViewColumn/__tests__/ViewColumn.visual.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import {VALUE, VIEW_COLUMN} from './helpers';
+
+import {test} from '~playwright/core';
+import {DynamicView} from '~playwright/core/DynamicView';
+
+test.describe('ViewColumn View', () => {
+    test('object spec', async ({mount, expectScreenshot}) => {
+        await mount(<DynamicView spec={VIEW_COLUMN} value={VALUE} />);
+
+        await expectScreenshot();
+    });
+
+    test('object spec with layoutDescription', async ({mount, expectScreenshot}) => {
+        await mount(<DynamicView spec={VIEW_COLUMN} value={VALUE} showLayoutDescription />);
+
+        await expectScreenshot();
+    });
+});