feat: add column view (#257)

Author: itwillwork

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/__snapshots__/Column.visual.test.tsx-snapshots/Column-Form-object-spec-dark-chromium-linux.png

@@ -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/__snapshots__/Column.visual.test.tsx-snapshots/Column-Form-object-spec-dark-webkit-linux.png

@@ -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/__snapshots__/Column.visual.test.tsx-snapshots/Column-Form-object-spec-light-chromium-linux.png

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

src/lib/kit/components/Layouts/Column/__snapshots__/Column.visual.test.tsx-snapshots/Column-Form-object-spec-light-webkit-linux.png

@@ -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';