@cloud-ru/uikit-product-calculator 0.33.3

package/src/components/Controls/CarouselControl/CarouselControl.tsx

@@ -0,0 +1,173 @@
+import { useEffect, useMemo, useState } from 'react';
+
+import { ChevronLeftSVG, ChevronRightSVG } from '@cloud-ru/uikit-product-icons';
+import { ButtonFunction } from '@snack-uikit/button';
+import { Carousel, CarouselProps } from '@snack-uikit/carousel';
+import { FieldDecorator } from '@snack-uikit/fields';
+import { PaginationSlider } from '@snack-uikit/pagination';
+import { ToggleGroup } from '@snack-uikit/toggles';
+
+import { useAdaptive } from '../../../hooks';
+import { FormValues } from '../../../types';
+import { parseKeyToDataTest } from '../../../utils';
+import { CONTROL } from '../constants';
+import { ToggleCard, ToggleCardItem } from '../ToggleCard';
+import { BaseControlWithItems } from '../types';
+import styles from './styles.module.scss';
+
+type CarouselUiProps = Pick<
+  CarouselProps,
+  | 'transition'
+  | 'scrollBy'
+  | 'className'
+  | 'swipe'
+  | 'infiniteScroll'
+  | 'arrows'
+  | 'showItems'
+  | 'pagination'
+  | 'gap'
+  | 'swipeActivateLength'
+>;
+
+export type CarouselControl = {
+  type: typeof CONTROL.Carousel;
+  defaultValue?: string;
+} & BaseControlWithItems<ToggleCardItem, CarouselUiProps>;
+
+export type CarouselControlUiProps = {
+  value?: string;
+  onChange?(value: string): void;
+  watchedValues?: FormValues;
+} & CarouselControl;
+
+export function CarouselControlUi({
+  items: itemsProp,
+  value,
+  onChange,
+  uiProps,
+  decoratorProps,
+  watchedValues,
+  relateFn,
+  accessorKey,
+}: CarouselControlUiProps) {
+  const { isMobile } = useAdaptive();
+
+  const {
+    items: relatedItems,
+    decoratorProps: relatedDecoratorProps,
+    uiProps: relatedUiProps,
+  } = useMemo(() => relateFn?.(watchedValues ?? {}) ?? {}, [relateFn, watchedValues]);
+
+  const items = useMemo(() => relatedItems ?? itemsProp, [itemsProp, relatedItems]);
+  const [page, setPage] = useState<number>(0);
+
+  const maxPage = isMobile ? items.length : items.length - 1;
+
+  const dataTestAttribute = parseKeyToDataTest('carousel', accessorKey);
+  const navigationDataTestAttribute = parseKeyToDataTest('carousel-navigation');
+
+  useEffect(() => {
+    const pageIndex = items.findIndex(item => String(item.value) === String(value));
+
+    if (pageIndex !== -1) {
+      const itemPage = isMobile ? pageIndex : Math.max(pageIndex - 1, 0);
+
+      const timeout = setTimeout(() => {
+        setPage(itemPage);
+      }, 0);
+
+      return () => {
+        clearTimeout(timeout);
+      };
+    }
+  }, [isMobile, items, value]);
+
+  useEffect(() => {
+    const pageIndex = items.findIndex(item => String(item.value) === String(value));
+
+    if (page > maxPage + 1) {
+      setPage(pageIndex);
+    }
+  }, [value, onChange, items, page, maxPage]);
+
+  const decPage = () => {
+    setPage(page => Math.max(0, page - 1));
+  };
+  const incPage = () => {
+    setPage(page => Math.min(page + 1, Math.max(maxPage - 1, 0)));
+  };
+
+  useEffect(() => {
+    if (!items.find(item => String(item.value) === String(value))) {
+      onChange?.(String(items?.[0]?.value));
+      setPage(0);
+    }
+  }, [value, onChange, items, relatedItems]);
+
+  const visible = relatedUiProps?.visible ?? uiProps?.visible ?? true;
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <div className={styles.carousel}>
+      <FieldDecorator
+        size='m'
+        caption={
+          maxPage > 1
+            ? ((
+                <div className={styles.controls}>
+                  <ButtonFunction
+                    icon={<ChevronLeftSVG />}
+                    size='s'
+                    onClick={decPage}
+                    data-test-id={`${navigationDataTestAttribute}-button-left`}
+                  />
+                  <ButtonFunction
+                    icon={<ChevronRightSVG />}
+                    size='s'
+                    onClick={incPage}
+                    data-test-id={`${navigationDataTestAttribute}-button-right`}
+                  />
+                </div>
+              ) as unknown as string)
+            : undefined
+        }
+        {...decoratorProps}
+        {...relatedDecoratorProps}
+        data-test-id={dataTestAttribute}
+      >
+        <ToggleGroup
+          selectionMode='single'
+          value={value}
+          onChange={value => {
+            value && onChange?.(value);
+          }}
+        >
+          <Carousel
+            pagination={false}
+            arrows={false}
+            {...uiProps}
+            scrollBy={1}
+            swipe
+            infiniteScroll={false}
+            showItems={isMobile ? 1.1 : 2.1}
+            state={{
+              page: page || 0,
+              onChange: page => setPage(page % maxPage),
+            }}
+          >
+            {items.map(item => (
+              <ToggleCard {...item} key={item.value} />
+            ))}
+          </Carousel>
+        </ToggleGroup>
+
+        <div className={styles.pagination}>
+          {maxPage > 1 && <PaginationSlider page={page + 1} total={maxPage} onChange={page => setPage(page - 1)} />}
+        </div>
+      </FieldDecorator>
+    </div>
+  );
+}

package/src/components/Controls/CarouselControl/index.ts

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

package/src/components/Controls/CarouselControl/styles.module.scss

@@ -0,0 +1,32 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as stv;
+
+.carousel {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+
+  gap: stv.$dimension-1m;
+
+  ul {
+    margin: 0;
+    padding: 0 0 0 stv.$dimension-2m;
+    list-style-type: disc;
+  }
+
+  li {
+    list-style-type: disc;
+  }
+}
+
+.controls {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  color: stv.$sys-neutral-text-support;
+}
+
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/src/components/Controls/Control/Control.tsx

@@ -0,0 +1,205 @@
+import { useEffect } from 'react';
+
+import { useCalculatorContext, useProductContext } from '../../../contexts';
+import { AnyType, FormValues, PRICE_PERIOD } from '../../../types';
+import { getValue, setValue } from '../../../utils';
+import { AlertControlUi } from '../AlertControl';
+import { ArrayControlUi } from '../ArrayControl';
+import { CarouselControlUi } from '../CarouselControl';
+import { CONTROL } from '../constants';
+import { ObjectControlUi } from '../ObjectControl';
+import { SegmentedControlUi } from '../SegmentedControl';
+import { SelectMultipleUi, SelectSingleUi } from '../SelectControl';
+import { SliderControlUi } from '../SliderControl';
+import { StepperControlUi } from '../StepperControl';
+import { TableControlUi } from '../TableControl';
+import { ToggleCardsControlUi } from '../ToggleCardsControl';
+import { ToggleControlUi } from '../ToggleControl';
+import { ToggleObjectControlUi } from '../ToggleObjectControl';
+import { FormControl } from '../types';
+
+type ControlProps = {
+  formControl: FormControl & {
+    accessorKey?: string;
+    onChangePeriod?: (period: PRICE_PERIOD, setValue: (arr: [string, AnyType][]) => void) => void;
+    canChangeWholePricePeriod?: boolean;
+  };
+};
+
+export function Control({ formControl }: ControlProps) {
+  const { calculatorType } = useCalculatorContext();
+  const { value: valueProp, onChange: onChangeProp, priceList: priceListProp } = useProductContext();
+  const { pricePeriod, setPricePeriod, onAnalyticsClick } = useCalculatorContext();
+
+  const accessorKey = formControl?.accessorKey ?? '';
+
+  useEffect(() => {
+    const setValueFn = (arr: [string, AnyType][]) => {
+      arr.forEach(([accessorKey, newValue]) => {
+        setValue(valueProp, accessorKey, newValue);
+      });
+
+      onChangeProp(valueProp);
+    };
+
+    // Если в разных продуктах есть поля с одинаковыми названиями ключа,
+    // то в formControl может возникнуть конфликт с определением и изменением значений этих полей.
+    // Попробуйте поменять название поля на другое уникальное значение.
+
+    formControl?.onChangePeriod?.(pricePeriod, setValueFn);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pricePeriod]);
+
+  const watchedValues = Object.keys(formControl?.watchedControls ?? {})?.reduce((res, fieldName) => {
+    const key = formControl?.watchedControls?.[fieldName];
+
+    if (key) {
+      res[fieldName] = getValue(valueProp, key);
+    }
+    return res;
+  }, {} as FormValues);
+
+  watchedValues.calculatorType = calculatorType;
+
+  if (formControl.type === CONTROL.Object) {
+    return <ObjectControlUi {...formControl} watchedValues={watchedValues} />;
+  }
+
+  if (formControl.type === CONTROL.Array) {
+    return <ArrayControlUi {...formControl} />;
+  }
+
+  const value = getValue(valueProp, accessorKey);
+  const priceList = getValue(priceListProp, accessorKey);
+  let onChange = (uiType: string) => (newValue: AnyType) => {
+    if (formControl?.canChangeWholePricePeriod) {
+      setPricePeriod(newValue);
+    }
+    if (typeof newValue === 'object') {
+      onAnalyticsClick(Object.values(newValue).join(' '), `${uiType}-${accessorKey}`);
+    } else {
+      onAnalyticsClick(String(newValue), `${uiType}-${accessorKey}`);
+    }
+    setValue(valueProp, accessorKey, newValue);
+    onChangeProp(valueProp);
+  };
+
+  if (formControl?.onChangeFn) {
+    const setValueFn = (arr: [string, AnyType][]) => {
+      arr.forEach(([accessorKey, newValue]) => {
+        setValue(valueProp, accessorKey, newValue);
+      });
+
+      onChangeProp(valueProp);
+    };
+
+    onChange = (uiType: string) => (newValue: AnyType) => {
+      onAnalyticsClick(String(newValue), `${uiType}-${accessorKey}`);
+      formControl?.onChangeFn?.(newValue, setValueFn);
+    };
+  }
+
+  switch (formControl.type) {
+    case CONTROL.Table: {
+      return (
+        <TableControlUi {...formControl} value={value} onChange={onChange('table-control-ui')} priceList={priceList} />
+      );
+    }
+    case CONTROL.Carousel: {
+      return (
+        <CarouselControlUi
+          {...formControl}
+          value={value}
+          onChange={onChange('carousel-control-ui')}
+          watchedValues={watchedValues}
+        />
+      );
+    }
+    case CONTROL.ToggleCards: {
+      return (
+        <ToggleCardsControlUi
+          {...formControl}
+          value={value}
+          onChange={onChange('toggle-cards-control-ui')}
+          watchedValues={watchedValues}
+        />
+      );
+    }
+    case CONTROL.SelectSingle: {
+      return (
+        <SelectSingleUi
+          {...formControl}
+          value={value}
+          onChange={onChange('select-single-ui')}
+          watchedValues={watchedValues}
+        />
+      );
+    }
+    case CONTROL.SelectMultiple: {
+      return (
+        <SelectMultipleUi
+          {...formControl}
+          value={value}
+          onChange={onChange('select-multiple-ui')}
+          watchedValues={watchedValues}
+        />
+      );
+    }
+    case CONTROL.Segmented: {
+      return (
+        <SegmentedControlUi
+          {...formControl}
+          value={value}
+          onChange={onChange('segment-control-ui')}
+          watchedValues={watchedValues}
+        />
+      );
+    }
+    case CONTROL.Toggle: {
+      return (
+        <ToggleControlUi
+          {...formControl}
+          value={value}
+          onChange={onChange('toggle-control-ui')}
+          watchedValues={watchedValues}
+        />
+      );
+    }
+    case CONTROL.Stepper: {
+      return (
+        <StepperControlUi
+          {...formControl}
+          value={value}
+          onChange={onChange('stepper-control-ui')}
+          watchedValues={watchedValues}
+        />
+      );
+    }
+    case CONTROL.ToggleObject: {
+      return (
+        <ToggleObjectControlUi
+          {...formControl}
+          value={value}
+          onChange={onChange('toggle-object-ui')}
+          watchedValues={watchedValues}
+        />
+      );
+    }
+    case CONTROL.Alert: {
+      return <AlertControlUi {...formControl} watchedValues={watchedValues} />;
+    }
+    case CONTROL.Slider: {
+      return (
+        <SliderControlUi
+          {...formControl}
+          value={value}
+          onChange={onChange('slider-control-ui')}
+          watchedValues={watchedValues}
+        />
+      );
+    }
+    default:
+      throw new Error('not reachable');
+  }
+}

package/src/components/Controls/Control/index.ts

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

package/src/components/Controls/ObjectControl/ObjectControl.tsx

@@ -0,0 +1,150 @@
+import { ReactNode, useMemo } from 'react';
+
+import { useCalculatorContext } from '../../../contexts';
+import { AnyType, FormValues, PRICE_PERIOD } from '../../../types';
+import { parseKeyToDataTest } from '../../../utils';
+import { FormControl } from '..';
+import { CONTROL } from '../constants';
+import { Control } from '../Control';
+import { ObjectDecorator } from '../ObjectDecorator';
+import { BaseDecoratorProps } from '../types';
+import styles from './styles.module.scss';
+
+type RowConfig = {
+  controls: string[];
+  template?: string;
+};
+
+type FormRow = string | [string, string] | ReactNode | RowConfig;
+
+function isRowConfig(row: FormRow): row is RowConfig {
+  return Boolean(typeof row === 'object' && row && 'controls' in row);
+}
+
+export type ObjectControl = {
+  type: typeof CONTROL.Object;
+  /**
+   * Контроллы для описания конфигурации продукта
+   *
+   * Ключи используются для ui схемы
+   *
+   * @example {
+   *  alert: {
+   *    type: CONTROL.Alert,
+   *     ...someAlertProps
+   *   },
+   *   cpu: {
+   *     type: CONTROL.Segmented,
+   *     ...someSegmentedProps
+   *   }
+   * }
+   */
+  controls: Record<string, FormControl>;
+  /**
+   * Построчная UI схема для отображения контроллов.
+   *
+   * Элементы - ключи объекта controls
+   *
+   * @example ['specification', ['cpu', 'ram'], ['systemDisk', 'additionalDisk'], ['instanceCount']],
+   */
+  ui: FormRow[];
+  /** Флаг, отрисовывать элемент или нет */
+  visible?: boolean;
+  /** Исходное значение */
+  defaultValue?: FormValues;
+  decoratorProps?: Pick<BaseDecoratorProps, 'label' | 'labelTooltip' | 'labelTooltipPlacement'>;
+  /**
+   * Отслеживаемые "более главные" поля
+   *
+   * @example { storageClass: 'storages[0].obs.storageClass' },
+   */
+  watchedControls?: Record<string, string>;
+  /**
+   * Функция для изменения параметров контролла
+   *
+   * @param watchedValues - вычисленные 'watchedControls'
+   *
+   * @example ({ storageClass }) => {
+   *    if (storageClass !== StorageClassItem.Cold) {
+   *      return {
+   *           visible: false,
+   *      };
+   *    }
+   *  }
+   */
+  relateFn?(watchedValues: FormValues):
+    | {
+        visible?: boolean;
+      }
+    | undefined;
+  onChangePeriod?: (value: PRICE_PERIOD, setValue: (arr: [string, AnyType][]) => void) => void;
+  canChangeWholePricePeriod?: boolean;
+};
+
+type ObjectControlUiProps = ObjectControl & { watchedValues?: FormValues };
+
+export function ObjectControlUi({
+  controls,
+  ui,
+  watchedValues,
+  relateFn,
+  visible: visibleProp,
+  decoratorProps,
+}: ObjectControlUiProps) {
+  const { layoutType } = useCalculatorContext();
+  const isMobile = layoutType === 'mobile';
+  const { visible: relatedVisible } = useMemo(() => relateFn?.(watchedValues ?? {}) ?? {}, [relateFn, watchedValues]);
+
+  const dataTestAttribute = parseKeyToDataTest('row');
+
+  const visible = relatedVisible ?? visibleProp ?? true;
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <>
+      {decoratorProps && decoratorProps.label && <ObjectDecorator {...decoratorProps} />}
+
+      {ui.map(uiRow => {
+        if (typeof uiRow === 'string') {
+          return <Control formControl={controls[uiRow]} key={uiRow} />;
+        }
+
+        if (Array.isArray(uiRow)) {
+          return (
+            <div
+              className={styles.row}
+              data-test-id={dataTestAttribute}
+              data-mobile={isMobile || undefined}
+              key={uiRow.join(' ')}
+            >
+              {uiRow.map(rowItem => (
+                <Control formControl={controls[rowItem]} key={rowItem} />
+              ))}
+            </div>
+          );
+        }
+
+        if (isRowConfig(uiRow)) {
+          return (
+            <div
+              className={styles.rowConfig}
+              key={uiRow.controls.join(' ')}
+              style={{
+                gridTemplateColumns: uiRow.template || '1fr 84px',
+              }}
+            >
+              {uiRow.controls.map(rowItem => (
+                <Control formControl={controls[rowItem]} key={rowItem} />
+              ))}
+            </div>
+          );
+        }
+
+        return <>{uiRow}</>;
+      })}
+    </>
+  );
+}

package/src/components/Controls/ObjectControl/index.ts

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

package/src/components/Controls/ObjectControl/styles.module.scss

@@ -0,0 +1,18 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as stv;
+
+.row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: stv.$dimension-2m;
+
+  &[data-mobile] {
+    grid-template-columns: 1fr;
+  }
+}
+
+.rowConfig {
+  display: grid;
+  grid-template-columns: 1fr 84px;
+  gap: stv.$dimension-1m;
+  width: 100%;
+}

package/src/components/Controls/ObjectDecorator/ObjectDecorator.tsx

@@ -0,0 +1,23 @@
+import { QuestionTooltip } from '@snack-uikit/tooltip';
+import { Typography } from '@snack-uikit/typography';
+
+import { BaseDecoratorProps } from '../types';
+import styles from './styles.module.scss';
+
+export function ObjectDecorator({
+  label,
+  labelTooltip,
+  labelTooltipPlacement,
+}: Pick<BaseDecoratorProps, 'label' | 'labelTooltip' | 'labelTooltipPlacement'>) {
+  return (
+    <span className={styles.title}>
+      <Typography.SansTitleM>{label}</Typography.SansTitleM>
+
+      {labelTooltip && (
+        <span className={styles.tipWrapperInline}>
+          <QuestionTooltip placement={labelTooltipPlacement} data-pointer tip={labelTooltip} size='s' tabIndex={-1} />
+        </span>
+      )}
+    </span>
+  );
+}

package/src/components/Controls/ObjectDecorator/index.ts

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

package/src/components/Controls/ObjectDecorator/styles.module.scss

@@ -0,0 +1,15 @@
+.tipWrapper {
+  display: inline-flex;
+  height: 20px;
+  align-items: center;
+}
+
+.tipWrapperInline {
+  display: inline-flex;
+  height: 20px;
+  padding-left: 4px;
+
+  > span {
+    transform: translate(0, 4px);
+  }
+}