feat: added accordeon card to config (#162)

Authored-by: Aleksei <[email protected]>

Author: LehaRybkoha

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>
+    );
+};