feat(CheckboxGroup): added new input CheckboxGroup (#214)

src/lib/core/types/specs.ts

@@ -43,6 +43,10 @@ export interface ArraySpec<
         };
         inputProps?: InputComponentProps;
         layoutProps?: LayoutComponentProps;
+        checkboxGroupParams?: {
+            placement?: 'horizontal' | 'vertical';
+            disabled?: Record<string, boolean>;
+        };
     };
 }
 

src/lib/kit/components/Inputs/CheckboxGroup/CheckboxGroup.scss

@@ -0,0 +1,23 @@
+@import '../../../styles/variables';
+
+.#{$ns}checkbox-group {
+    display: flex;
+    align-items: center;
+    height: 28px;
+
+    & > *:not(:last-child) {
+        margin-right: 6px;
+    }
+
+    &_vertical {
+        flex-direction: column;
+        align-items: flex-start;
+        margin-top: 8px;
+        height: auto;
+
+        & > *:not(:last-child) {
+            margin-right: 0px;
+            margin-bottom: 6px;
+        }
+    }
+}

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

@@ -0,0 +1,72 @@
+import React from 'react';
+
+import {ArrayInput, FieldArrayValue, transformArrIn, transformArrOut} from '../../../../core';
+import {Checkbox, type CheckboxProps as CheckboxBaseProps} from '@gravity-ui/uikit';
+import {block} from '../../../utils';
+
+import './CheckboxGroup.scss';
+
+const b = block('checkbox-group');
+
+export interface CheckboxGroupProps
+    extends Omit<
+        CheckboxBaseProps,
+        'checked' | 'onChange' | 'onBlur' | 'onFocus' | 'disabled' | 'qa' | 'content'
+    > {}
+
+export const CheckboxGroup: ArrayInput<CheckboxGroupProps> = ({name, input, spec, inputProps}) => {
+    const {value, onBlur, onChange, onFocus} = input;
+
+    const _value: string[] | undefined = React.useMemo(
+        () => transformArrOut<FieldArrayValue, string[]>(value),
+        [value],
+    );
+
+    const options = React.useMemo(
+        () =>
+            spec.enum?.map((id) => ({
+                value: id,
+                text: spec.description?.[id] || id,
+            })),
+        [spec.enum, spec.description],
+    );
+
+    const handleUpdate = React.useCallback(
+        (optionValue: string, selected: boolean) => {
+            let newValue = _value || [];
+
+            if (selected) {
+                newValue.push(optionValue);
+            } else {
+                newValue = newValue.filter((id) => id !== optionValue);
+            }
+
+            onChange(transformArrIn<string[], FieldArrayValue>(newValue));
+        },
+        [_value, onChange],
+    );
+
+    return (
+        <div
+            className={b({vertical: spec.viewSpec.checkboxGroupParams?.placement === 'vertical'})}
+            data-qa={name}
+        >
+            {options?.map(({value: optionValue, text}) => (
+                <Checkbox
+                    {...inputProps}
+                    qa={name && `${name}-${optionValue}`}
+                    key={optionValue}
+                    checked={_value?.includes(optionValue)}
+                    onUpdate={(selected: boolean) => handleUpdate(optionValue, selected)}
+                    disabled={
+                        spec.viewSpec.disabled ||
+                        spec.viewSpec.checkboxGroupParams?.disabled?.[optionValue]
+                    }
+                    content={text}
+                    onBlur={onBlur}
+                    onFocus={onFocus}
+                />
+            ))}
+        </div>
+    );
+};

src/lib/kit/components/Inputs/CheckboxGroup/__tests__/CheckboxGroup.visual.test.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+import {CHECKBOX_GROUP, VALUE} from './helpers';
+
+import {test} from '~playwright/core';
+import {DynamicForm} from '~playwright/core/DynamicForm';
+import {DynamicView} from '~playwright/core/DynamicView';
+
+test.describe('CheckboxGroup', () => {
+    test('default', async ({mount, expectScreenshot}) => {
+        await mount(<DynamicForm spec={CHECKBOX_GROUP.default} />);
+
+        await expectScreenshot();
+    });
+
+    test('default value', async ({mount, expectScreenshot}) => {
+        await mount(<DynamicForm spec={CHECKBOX_GROUP.defaultValue} />);
+
+        await expectScreenshot();
+    });
+
+    test('placement vertical', async ({mount, expectScreenshot}) => {
+        await mount(<DynamicForm spec={CHECKBOX_GROUP.placementVertical} />);
+
+        await expectScreenshot();
+    });
+
+    test('disabled', async ({mount, expectScreenshot}) => {
+        await mount(<DynamicForm spec={CHECKBOX_GROUP.disabled} />);
+
+        await expectScreenshot();
+    });
+});
+
+test.describe('CheckboxGroup view', () => {
+    test('vertical', async ({mount, expectScreenshot}) => {
+        await mount(<DynamicView spec={CHECKBOX_GROUP.placementVertical} value={VALUE.vertical} />);
+
+        await expectScreenshot();
+    });
+
+    test('horizontal', async ({mount, expectScreenshot}) => {
+        await mount(<DynamicView spec={CHECKBOX_GROUP.default} value={VALUE.horizontal} />);
+
+        await expectScreenshot();
+    });
+});

src/lib/kit/components/Inputs/CheckboxGroup/__tests__/helpers.ts

@@ -0,0 +1,102 @@
+import {ArraySpec, FormValue, SpecTypes} from '../../../../../core';
+
+export const CHECKBOX_GROUP: Record<string, ArraySpec> = {
+    default: {
+        type: SpecTypes.Array,
+        enum: ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'],
+        description: {
+            monday: 'Mon',
+            tuesday: 'Tue',
+            wednesday: 'Wed',
+            thursday: 'Thu',
+            friday: 'Fri',
+            saturday: 'Sat',
+            sunday: 'Sun',
+        },
+        viewSpec: {
+            type: 'checkbox_group',
+            layout: 'row',
+            layoutTitle: 'Days of the week',
+            checkboxGroupParams: {
+                disabled: {
+                    monday: true,
+                },
+            },
+        },
+    },
+    defaultValue: {
+        defaultValue: ['monday', 'wednesday'],
+        type: SpecTypes.Array,
+        enum: ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'],
+        description: {
+            monday: 'Mon',
+            tuesday: 'Tue',
+            wednesday: 'Wed',
+            thursday: 'Thu',
+            friday: 'Fri',
+            saturday: 'Sat',
+            sunday: 'Sun',
+        },
+        viewSpec: {
+            type: 'checkbox_group',
+            layout: 'row',
+            layoutTitle: 'Days of the week',
+            layoutDescription: 'Description Days of the week',
+            checkboxGroupParams: {
+                disabled: {
+                    monday: true,
+                },
+            },
+        },
+    },
+    placementVertical: {
+        defaultValue: ['monday', 'wednesday'],
+        type: SpecTypes.Array,
+        enum: ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'],
+        description: {
+            monday: 'Mon',
+            tuesday: 'Tue',
+            wednesday: 'Wed',
+            thursday: 'Thu',
+            friday: 'Fri',
+            saturday: 'Sat',
+            sunday: 'Sun',
+        },
+        viewSpec: {
+            type: 'checkbox_group',
+            layout: 'row',
+            layoutTitle: 'Days of the week',
+            layoutDescription: 'Description Days of the week',
+            checkboxGroupParams: {
+                placement: 'vertical',
+                disabled: {
+                    monday: true,
+                },
+            },
+        },
+    },
+    disabled: {
+        type: SpecTypes.Array,
+        enum: ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'],
+        description: {
+            monday: 'Mon',
+            tuesday: 'Tue',
+            wednesday: 'Wed',
+            thursday: 'Thu',
+            friday: 'Fri',
+            saturday: 'Sat',
+            sunday: 'Sun',
+        },
+        viewSpec: {
+            type: 'checkbox_group',
+            layout: 'row',
+            layoutTitle: 'Days of the week',
+            disabled: true,
+        },
+    },
+};
+
+export const VALUE: Record<string, FormValue> = {
+    vertical: ['monday', 'wednesday', 'saturday'],
+    horizontal: ['monday', 'wednesday', 'saturday'],
+};

src/lib/kit/components/Inputs/CheckboxGroup/index.ts

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

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

@@ -1,6 +1,7 @@
 export * from './ArrayBase';
 export * from './CardOneOf';
 export * from './Checkbox';
+export * from './CheckboxGroup';
 export * from './FileInput';
 export * from './DateInput';
 export * from './MonacoInput';

src/lib/kit/components/Views/CheckboxGroupView/CheckboxGroupView.scss

@@ -0,0 +1,35 @@
+@import '../../../styles/variables.scss';
+
+.#{$ns}checkbox-group-view {
+    display: flex;
+
+    & > *:not(:last-child) {
+        margin-right: 6px;
+    }
+
+    &_vertical {
+        flex-direction: column;
+        align-items: flex-start;
+
+        & > *:not(:last-child) {
+            margin-right: 0px;
+            margin-bottom: 6px;
+        }
+    }
+
+    &__tooltip {
+        overflow-wrap: break-word;
+    }
+
+    &__tooltip-container {
+        max-width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: block;
+        margin-bottom: 6px;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+}

src/lib/kit/components/Views/CheckboxGroupView/CheckboxGroupView.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import {Popover} from '@gravity-ui/uikit';
+import {COMMON_POPOVER_PLACEMENT} from '../../../constants/common';
+import {ArrayView} from '../../../../core';
+import {block} from '../../../utils';
+
+import './CheckboxGroupView.scss';
+
+const b = block('checkbox-group-view');
+
+export const CheckboxGroupView: ArrayView = ({spec, value = []}) => {
+    const _value = value as string[];
+
+    const items = React.useMemo(
+        () => _value.map((item) => spec.description?.[item] || item),
+        [spec.description, _value],
+    );
+
+    const verticalPlacement = React.useMemo(
+        () => spec.viewSpec.checkboxGroupParams?.placement === 'vertical',
+        [spec.viewSpec.checkboxGroupParams?.placement],
+    );
+
+    return (
+        <div className={b({vertical: verticalPlacement})}>
+            {items.map((item, idx) => (
+                <Popover
+                    placement={COMMON_POPOVER_PLACEMENT}
+                    key={item}
+                    content={item}
+                    className={b('tooltip-container')}
+                    contentClassName={b('tooltip')}
+                    disabled={item.length < 51}
+                >
+                    {item}
+                    {!verticalPlacement && idx !== items.length - 1 ? ', ' : null}
+                </Popover>
+            ))}
+        </div>
+    );
+};

src/lib/kit/components/Views/CheckboxGroupView/index.ts

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

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

@@ -1,5 +1,6 @@
 export * from './ArrayBaseView';
 export * from './BaseView';
+export * from './CheckboxGroupView';
 export * from './CardOneOfView';
 export * from './FileInputView';
 export * from './MonacoInputView';

src/lib/kit/constants/config.tsx

@@ -10,6 +10,8 @@ import {
     CardOneOfView,
     CardSection,
     Checkbox,
+    CheckboxGroup,
+    CheckboxGroupView,
     DateInput,
     DateView,
     FileInput,
@@ -79,6 +81,7 @@ export const dynamicConfig: DynamicFormConfig = {
             select: {Component: MultiSelect},
             table: {Component: TableArrayInput},
             base: {Component: ArrayBase},
+            checkbox_group: {Component: CheckboxGroup},
         },
         layouts: {
             row: Row,
@@ -193,6 +196,7 @@ export const dynamicViewConfig: DynamicViewConfig = {
             select: {Component: MultiSelectView},
             table: {Component: TableArrayView},
             base: {Component: ArrayBaseView},
+            checkbox_group: {Component: CheckboxGroupView},
         },
         layouts: {
             row: ViewRow,

src/stories/ArrayBase.stories.tsx

@@ -39,6 +39,7 @@ const excludeOptions = [
     'viewSpec.table',
     'viewSpec.placeholder',
     'viewSpec.selectParams',
+    'viewSpec.checkboxGroupParams',
     'viewSpec.inputProps',
 ];