feat: added new input Radio Group (#292)

Author: NasgulNexus

.storybook/main.ts

@@ -11,7 +11,7 @@ const config: StorybookConfig = {
                 actions: false,
                 backgrounds: false,
                 controls: false,
-                measure: false,
+                measure: true,
                 outline: false,
                 toolbars: true,
                 viewport: false,

docs/input-props-map.md

@@ -192,6 +192,10 @@ export interface StringSpec<
             filterPlaceholder?: string;
             meta?: Record<string, string>;
         };
+        radioGroupParams?: {
+            direction?: 'horizontal' | 'vertical';
+            disabled?: Record<string, boolean>;
+        };
         inputProps?: InputComponentProps;
         layoutProps?: LayoutComponentProps;
         generateRandomValueButton?: boolean;

docs/spec.md

@@ -0,0 +1,12 @@
+@import '../../../styles/variables.scss';
+
+.#{$ns}radio-group {
+    align-items: center;
+    height: var(--df-radio-group-height, 28px);
+
+    &_vertical {
+        align-items: flex-start;
+        margin-top: var(--df-radio-group-vertical-margin-top, var(--g-spacing-2));
+        height: auto;
+    }
+}

docs/styles.md

@@ -0,0 +1,68 @@
+import React from 'react';
+
+import {
+    Flex,
+    RadioGroup as RadioGroupBase,
+    type RadioGroupProps as RadioGroupBaseProps,
+    type RadioGroupOption,
+} from '@gravity-ui/uikit';
+
+import type {StringInput} from '../../../../core';
+import {block} from '../../../utils';
+
+import './RadioGroup.scss';
+
+const b = block('radio-group');
+
+export interface RadioGroupProps
+    extends Omit<
+        RadioGroupBaseProps,
+        'direction' | 'onChange' | 'onBlur' | 'onFocus' | 'disabled' | 'qa' | 'content'
+    > {
+    withCustomOptions?: boolean;
+}
+
+export const RadioGroup: StringInput<RadioGroupProps> = ({name, input, spec, inputProps}) => {
+    const {value, onBlur, onChange, onFocus} = input;
+
+    const {withCustomOptions, options: externalOptions} = inputProps || {};
+
+    const options: RadioGroupOption[] = React.useMemo(
+        () =>
+            withCustomOptions
+                ? externalOptions || []
+                : spec.enum?.map((id) => ({
+                      value: id,
+                      content: spec.description?.[id] || id,
+                      disabled: spec.viewSpec.radioGroupParams?.disabled?.[id] || false,
+                  })) || [],
+        [
+            withCustomOptions,
+            externalOptions,
+            spec.enum,
+            spec.description,
+            spec.viewSpec.radioGroupParams?.disabled,
+        ],
+    );
+
+    if (options.length === 0) {
+        return null;
+    }
+
+    return (
+        <Flex className={b({vertical: spec.viewSpec.radioGroupParams?.direction === 'vertical'})}>
+            <RadioGroupBase
+                {...inputProps}
+                name={name}
+                qa={name}
+                disabled={spec.viewSpec.disabled}
+                onUpdate={onChange}
+                onBlur={onBlur}
+                onFocus={onFocus}
+                value={value}
+                options={options}
+                direction={spec.viewSpec.radioGroupParams?.direction || 'horizontal'}
+            />
+        </Flex>
+    );
+};