feat: added accordeon card to config (#162)

Authored-by: Aleksei <[email protected]>

src/lib/kit/components/AccordeonCard/AccordeonCard.scss

@@ -5,11 +5,25 @@
     flex-direction: column;
     justify-content: space-between;
     box-sizing: border-box;
-    max-width: 750px;
     box-shadow: 0 1px 5px var(--g-color-sfx-shadow);
     border-radius: 5px;
     color: var(--g-color-text-primary);
     background-color: var(--g-color-base-float);
+    .#{$ns}row {
+        width: 100%;
+        max-width: unset;
+
+        .#{$ns}select,
+        .#{$ns}multi-select,
+        .#{$ns}transparent_array-item {
+            max-width: unset;
+        }
+    }
+
+    .#{$ns}monaco-input,
+    .#{$ns}monaco-base-view {
+        width: 100%;
+    }
 
     &:hover {
         box-shadow: 0 3px 10px var(--g-color-sfx-shadow);
@@ -85,7 +99,6 @@
 
     &__body {
         display: none;
-        margin-top: -10px 0 8px;
         padding: 16px;
 
         &_open {

src/lib/kit/components/AccordeonCard/AccordeonCard.tsx

@@ -22,6 +22,7 @@ export interface AccordeonCardProps {
     ignoreHeaderToggle?: boolean;
     titleSize?: 's' | 'm';
     alwaysOpen?: boolean;
+    classNameBody?: string;
 }
 export const AccordeonCard: React.FC<AccordeonCardProps> = ({
     className,
@@ -35,6 +36,7 @@ export const AccordeonCard: React.FC<AccordeonCardProps> = ({
     titleSize = 'm',
     alwaysOpen,
     children,
+    classNameBody,
 }) => {
     const accordeonRef = React.useRef<HTMLDivElement>(null);
     const bodyRef = React.useRef<HTMLDivElement>(null);
@@ -114,7 +116,7 @@ export const AccordeonCard: React.FC<AccordeonCardProps> = ({
                     </div>
                 ) : null}
             </div>
-            <div ref={bodyRef} className={b('body', {open: open && !emptyBody})}>
+            <div ref={bodyRef} className={b('body', {open: open && !emptyBody}, classNameBody)}>
                 {children}
             </div>
         </div>

src/lib/kit/components/Inputs/CardOneOf/CardOneOf.tsx

@@ -12,7 +12,7 @@ import {
 } from '../../../../core';
 import {useErrorChecker, useOneOf} from '../../../hooks';
 import {Row} from '../../Layouts';
-import {RemoveButton} from '../../Layouts/Accordeon/RemoveButton';
+import {RemoveButton} from '../../RemoveButton';
 
 export const CardOneOf: ObjectIndependentInput = (props) => {
     const {input, meta, spec, name} = props;

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

@@ -3,10 +3,9 @@ import React from 'react';
 import {ArrayLayoutProps, ObjectLayoutProps} from '../../../../core';
 import {ErrorWrapper} from '../../../components';
 import {useErrorChecker} from '../../../hooks';
+import {RemoveButton} from '../../RemoveButton';
 import {SimpleVerticalAccordeon} from '../../SimpleVerticalAccordeon';
 
-import {RemoveButton} from './RemoveButton';
-
 export const Accordeon = <T extends ArrayLayoutProps | ObjectLayoutProps>({
     name,
     spec,

src/lib/kit/components/Layouts/AccordeonCard/AccordeonCardForm.scss

@@ -0,0 +1,7 @@
+@import '../../../styles/variables.scss';
+
+.#{$ns}accordeon-card-form {
+    &__accordeon-card-body {
+        padding-right: 32px;
+    }
+}

src/lib/kit/components/Layouts/AccordeonCard/AccordeonCardForm.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+
+import {ArrayLayoutProps, ObjectLayoutProps} from '../../../../core';
+import {useErrorChecker} from '../../../hooks';
+import {block} from '../../../utils';
+import {AccordeonCard} from '../../AccordeonCard';
+import {ErrorWrapper} from '../../ErrorWrapper';
+import {RemoveButton} from '../../RemoveButton';
+
+import './AccordeonCardForm.scss';
+
+const b = block('accordeon-card-form');
+
+export const AccordeonCardForm = <T extends ArrayLayoutProps | ObjectLayoutProps>({
+    name,
+    spec,
+    input,
+    children,
+    meta,
+}: T): JSX.Element => {
+    const [open, setOpen] = React.useState(Boolean(spec.viewSpec?.layoutOpen));
+
+    const onDrop = React.useCallback(() => {
+        setOpen(false);
+        input.onDrop();
+    }, [input.onDrop, setOpen]);
+
+    const removeButton = React.useMemo(() => {
+        if (spec.required || !input.value) {
+            return null;
+        }
+
+        return <RemoveButton name={name} onDrop={onDrop} />;
+    }, [spec.required, input.value, onDrop, name]);
+
+    useErrorChecker({name, meta, open, setOpen});
+
+    return (
+        <AccordeonCard
+            classNameBody={b('accordeon-card-body')}
+            name={name}
+            header={spec.viewSpec.layoutTitle || ''}
+            description={spec.viewSpec.layoutDescription || ''}
+            open={open}
+            onToggle={setOpen}
+            headerActionsTemplate={removeButton}
+        >
+            <ErrorWrapper name={name} meta={meta} withoutChildErrorStyles>
+                {children}
+            </ErrorWrapper>
+        </AccordeonCard>
+    );
+};

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

@@ -0,0 +1,65 @@
+import React from 'react';
+
+import {ACCORDEON_CARD, VALUE} from './helpers';
+
+import {test} from '~playwright/core';
+import {DynamicForm} from '~playwright/core/DynamicForm';
+import {DynamicView} from '~playwright/core/DynamicView';
+
+test.describe('Accordeon Card Form', () => {
+    test.describe('test array specs', () => {
+        test('array spec', async ({mount, expectScreenshot}) => {
+            await mount(<DynamicForm spec={ACCORDEON_CARD.arraySpec} />);
+
+            await expectScreenshot();
+        });
+
+        test('required', async ({mount, expectScreenshot}) => {
+            await mount(<DynamicForm spec={ACCORDEON_CARD.required} />);
+
+            await expectScreenshot();
+        });
+
+        test('error max length', async ({mount, expectScreenshot}) => {
+            const component = await mount(<DynamicForm spec={ACCORDEON_CARD.errorMaxLength} />);
+
+            await component.getByText('Add element').click();
+
+            await expectScreenshot();
+        });
+
+        test('error min length', async ({mount, expectScreenshot}) => {
+            const component = await mount(<DynamicForm spec={ACCORDEON_CARD.errorMinLength} />);
+
+            await component.getByText('Add element').click();
+
+            await expectScreenshot();
+        });
+
+        test('description', async ({mount, expectScreenshot}) => {
+            await mount(<DynamicForm spec={ACCORDEON_CARD.description} />);
+
+            await expectScreenshot();
+        });
+    });
+
+    test('object spec', async ({mount, expectScreenshot}) => {
+        await mount(<DynamicForm spec={ACCORDEON_CARD.objectSpec} />);
+
+        await expectScreenshot();
+    });
+});
+
+test.describe('Accordeon Card View', () => {
+    test('array spec', async ({mount, expectScreenshot}) => {
+        await mount(<DynamicView spec={ACCORDEON_CARD.arraySpec} value={VALUE.array} />);
+
+        await expectScreenshot();
+    });
+
+    test('object spec', async ({mount, expectScreenshot}) => {
+        await mount(<DynamicView spec={ACCORDEON_CARD.objectSpec} value={VALUE.object} />);
+
+        await expectScreenshot();
+    });
+});

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

@@ -0,0 +1,151 @@
+import {ArraySpec, FormValue, ObjectSpec, SpecTypes} from '../../../../../core';
+
+export const ACCORDEON_CARD: Record<string, ArraySpec | ObjectSpec> = {
+    arraySpec: {
+        defaultValue: ['value'],
+        type: SpecTypes.Array,
+        items: {
+            type: SpecTypes.String,
+            viewSpec: {
+                type: 'base',
+                layout: 'row',
+                layoutTitle: 'Element',
+            },
+        },
+        viewSpec: {
+            type: 'base',
+            layout: 'accordeon_card',
+            layoutTitle: 'Accordeon Card',
+            layoutOpen: true,
+            itemLabel: 'Add element',
+        },
+    },
+    required: {
+        required: true,
+        defaultValue: ['foo', 'bar', 'rab', 'oof'],
+        type: SpecTypes.Array,
+        items: {
+            type: SpecTypes.String,
+            viewSpec: {
+                type: 'base',
+                layout: 'row',
+                layoutTitle: 'Element',
+            },
+        },
+        viewSpec: {
+            type: 'base',
+            layout: 'accordeon_card',
+            layoutTitle: 'Elements',
+            layoutOpen: true,
+            itemLabel: 'Add element',
+        },
+    },
+    errorMaxLength: {
+        maxLength: BigInt(4),
+        defaultValue: ['foo', 'bar', 'rab', 'oof'],
+        type: SpecTypes.Array,
+        items: {
+            type: SpecTypes.String,
+            viewSpec: {
+                type: 'base',
+                layout: 'row',
+                layoutTitle: 'Element',
+            },
+        },
+        viewSpec: {
+            type: 'base',
+            layout: 'accordeon_card',
+            layoutTitle: 'Elements',
+            layoutOpen: true,
+            itemLabel: 'Add element',
+        },
+    },
+    errorMinLength: {
+        minLength: BigInt(4),
+        type: SpecTypes.Array,
+        items: {
+            type: SpecTypes.String,
+            viewSpec: {
+                type: 'base',
+                layout: 'row',
+                layoutTitle: 'Element',
+            },
+        },
+        viewSpec: {
+            type: 'base',
+            layout: 'accordeon_card',
+            layoutTitle: 'Elements',
+            layoutOpen: true,
+            itemLabel: 'Add element',
+        },
+    },
+    description: {
+        defaultValue: ['foo', 'bar', 'rab', 'oof'],
+        type: SpecTypes.Array,
+        items: {
+            type: SpecTypes.String,
+            viewSpec: {
+                type: 'base',
+                layout: 'row',
+                layoutTitle: 'Element',
+            },
+        },
+        viewSpec: {
+            type: 'base',
+            layout: 'accordeon_card',
+            layoutTitle: 'Elements',
+            layoutDescription: 'description',
+            layoutOpen: true,
+            itemLabel: 'Add element',
+        },
+    },
+    objectSpec: {
+        defaultValue: {
+            name: 'value',
+            age: 10,
+            license: false,
+        },
+        type: SpecTypes.Object,
+        properties: {
+            name: {
+                type: SpecTypes.String,
+                viewSpec: {
+                    type: 'base',
+                    layout: 'row',
+                    layoutTitle: 'Name',
+                },
+            },
+            age: {
+                type: SpecTypes.Number,
+                viewSpec: {
+                    type: 'base',
+                    layout: 'row',
+                    layoutTitle: 'Age',
+                },
+            },
+            license: {
+                type: SpecTypes.Boolean,
+                viewSpec: {
+                    type: 'base',
+                    layout: 'row',
+                    layoutTitle: 'License',
+                },
+            },
+        },
+        viewSpec: {
+            type: 'base',
+            layout: 'accordeon_card',
+            layoutTitle: 'Candidate',
+            layoutOpen: true,
+        },
+    },
+};
+
+export const VALUE: Record<string, FormValue> = {
+    array: ['value', 'value'],
+    object: {
+        name: 'name',
+        age: 21,
+        license: true,
+    },
+};

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

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

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

@@ -3,8 +3,7 @@ import React from 'react';
 import {FieldValue, LayoutProps, Spec} from '../../../core';
 import {Card, ErrorWrapper} from '../../components';
 import {useErrorChecker} from '../../hooks';
-
-import {RemoveButton} from './Accordeon/RemoveButton';
+import {RemoveButton} from '../RemoveButton';
 
 export const CardAccordeon = <T extends FieldValue, S extends Spec>({
     name,

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

@@ -2,8 +2,7 @@ import React from 'react';
 
 import {FieldValue, LayoutProps, Spec} from '../../../core';
 import {Card, ErrorWrapper} from '../../components';
-
-import {RemoveButton} from './Accordeon/RemoveButton';
+import {RemoveButton} from '../RemoveButton';
 
 export const CardSection = <T extends FieldValue, S extends Spec>({
     name,

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

@@ -1,4 +1,5 @@
 export * from './Accordeon';
+export * from './AccordeonCard';
 export * from './CardAccordeon';
 export * from './CardSection';
 export * from './Row';

src/lib/kit/components/Layouts/Accordeon/RemoveButton.tsx → src/lib/kit/components/RemoveButton/RemoveButton.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import {Ellipsis} from '@gravity-ui/icons';
 import {Button, DropdownMenu, DropdownMenuItemMixed, Icon} from '@gravity-ui/uikit';
 
-import i18n from '../../../i18n';
+import i18n from '../../i18n';
 
 export interface RemoveButtonProps {
     name: string;

src/lib/kit/components/RemoveButton/index.tsx

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