@cloud-ru/uikit-product-calculator 0.33.3

package/src/components/Controls/ToggleControl/components/SwitchRow.tsx

@@ -0,0 +1,98 @@
+import cn from 'classnames';
+import { KeyboardEventHandler, ReactNode } from 'react';
+
+import { extractSupportProps } from '@cloud-ru/uikit-product-utils';
+import { Switch } from '@snack-uikit/toggles';
+import { Tooltip } from '@snack-uikit/tooltip';
+
+import { parseKeyToDataTest } from '../../../../utils';
+import { ObjectDecorator } from '../../ObjectDecorator';
+import { TooltipPlacement } from '../../types';
+import styles from './styles.module.scss';
+
+export type SwitchRowProps = {
+  label?: string;
+  description?: string;
+  checked: boolean;
+  disabled?: boolean;
+  loading?: boolean;
+  onChange(checked: boolean): void;
+  labelTooltip?: ReactNode;
+  labelTooltipPlacement?: TooltipPlacement;
+  disabledToggleTip?: ReactNode;
+  className?: string;
+  disableTitleTruncate?: boolean;
+  dataTestId: string;
+};
+
+export function SwitchRow({
+  label,
+  description,
+  checked,
+  disabled,
+  onChange,
+  labelTooltip,
+  labelTooltipPlacement,
+  className,
+  disabledToggleTip,
+  loading,
+  dataTestId,
+  ...rest
+}: SwitchRowProps) {
+  const handleChange = () => !disabled && onChange(!checked);
+
+  const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = e => {
+    if (e.code === 'Enter' || e.code === 'Space') {
+      handleChange();
+    }
+  };
+
+  const toggle = (
+    <Switch
+      size='m'
+      checked={checked}
+      disabled={disabled}
+      data-pointer
+      showIcon={false}
+      tabIndex={-1}
+      loading={loading}
+    />
+  );
+
+  return (
+    <div
+      className={cn(styles.switchRow, className)}
+      role='switch'
+      aria-checked={checked}
+      tabIndex={disabled ? -1 : 0}
+      onClick={handleChange}
+      onKeyDown={handleKeyDown}
+      data-disabled={disabled || undefined}
+      data-loading={loading || undefined}
+      data-checked={checked || undefined}
+      data-mobile
+      data-test-id={dataTestId}
+      {...extractSupportProps(rest)}
+    >
+      <div className={styles.headline}>
+        <div className={styles.titleLayout}>
+          <div className={styles.titleWrapper} data-test-id={parseKeyToDataTest('toggle', 'title')}>
+            <ObjectDecorator label={label} labelTooltip={labelTooltip} labelTooltipPlacement={labelTooltipPlacement} />
+          </div>
+        </div>
+
+        <div className={styles.wrap}>
+          {disabled && disabledToggleTip ? (
+            <Tooltip tip={disabledToggleTip} triggerClassName={styles.switchRowWrapper}>
+              {toggle}
+            </Tooltip>
+          ) : (
+            toggle
+          )}
+        </div>
+      </div>
+
+      {description && <span className={styles.description}>{description}</span>}
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,110 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-element' as element;
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-accordion' as accordion;
+
+.description {
+  @include accordion.composite-var(accordion.$sans-body-m);
+
+  color: accordion.$sys-neutral-text-support;
+}
+
+.titleLayout {
+  @include accordion.composite-var(accordion.$sans-title-m);
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 4px;
+  flex-grow: 0;
+  overflow: hidden;
+
+  color: accordion.$sys-neutral-text-main;
+}
+
+.headline {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+
+  justify-content: space-between;
+}
+
+.switchRowWrapper {
+  display: inline-flex;
+}
+
+.switchRow {
+  @include accordion.composite-var(accordion.$collapse-block-container-primary);
+  @include accordion.composite-var(accordion.$collapse-block, 'container', 'shape-round');
+
+  box-sizing: border-box;
+
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  border: solid 1px accordion.$sys-neutral-decor-default;
+
+  background-color: accordion.$sys-neutral-background1-level;
+
+  &:focus-within,
+  &:hover {
+    background-color: accordion.$sys-neutral-background2-level;
+  }
+
+  &:focus-visible {
+    @include accordion.outline-var(element.$container-focused-s);
+
+    outline-color: accordion.$sys-available-complementary;
+  }
+
+  * {
+    &[data-pointer] {
+      cursor: pointer;
+    }
+  }
+
+  &[data-loading] {
+    cursor: wait;
+
+    * {
+      &[data-pointer] {
+        cursor: wait;
+      }
+    }
+  }
+
+  &[data-disabled] {
+    cursor: not-allowed;
+    background-color: transparent;
+
+    &::before {
+      background-color: accordion.$sys-neutral-accent-default;
+      opacity: 0.08;
+    }
+
+    .titleLayout,
+    .description {
+      color: accordion.$sys-neutral-text-disabled;
+    }
+
+    * {
+      &[data-pointer] {
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  &[data-mobile] {
+    padding: 16px;
+  }
+}
+
+.titleWrapper {
+  display: flex;
+  align-items: flex-start;
+  overflow: hidden;
+  gap: 4px;
+}
+
+.wrap {
+  display: flex;
+}

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

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

package/src/components/Controls/ToggleObjectControl/ToggleObjectControl.tsx

@@ -0,0 +1,111 @@
+import { useMemo, useState } from 'react';
+
+import { MobileAccordionPrimary } from '@cloud-ru/uikit-product-mobile-accordion';
+import { Divider } from '@snack-uikit/divider';
+import { Switch } from '@snack-uikit/toggles';
+
+import { ProductContext, useCalculatorContext, useProductContext } from '../../../contexts';
+import { FormValues } from '../../../types';
+import { getValue, setValue } from '../../../utils';
+import { CONTROL } from '../constants';
+import { Control } from '../Control';
+import { ObjectDecorator } from '../ObjectDecorator';
+import { BaseControl, FormControl } from '../types';
+import styles from './styles.module.scss';
+
+type UiProps = {
+  disabled?: boolean;
+};
+
+export type ToggleObjectControl = {
+  type: typeof CONTROL.ToggleObject;
+  /**
+   * Поле, для значения вкл/выкл контрола
+   *
+   * @example 'eipIsNeeded'
+   */
+  switchKey: string;
+  /** Конфигурация тела аккордеона */
+  control: FormControl;
+
+  onChangeFn?: never;
+} & Pick<
+  BaseControl<UiProps>,
+  'decoratorProps' | 'uiProps' | 'watchedControls' | 'relateFn' | 'onChangePeriod' | 'canChangeWholePricePeriod'
+>;
+
+type ToggleObjectControlUiProps = ToggleObjectControl & {
+  value: FormValues;
+  onChange(value: FormValues): void;
+  watchedValues?: FormValues;
+};
+
+export function ToggleObjectControlUi({
+  decoratorProps,
+  control,
+  switchKey,
+  relateFn,
+  watchedValues,
+  uiProps,
+}: ToggleObjectControlUiProps) {
+  const [expanded, setExpanded] = useState<string | undefined>(undefined);
+
+  const { value: valueProp, onChange: onChangeProp } = useProductContext();
+  const { onAnalyticsClick } = useCalculatorContext();
+
+  const { decoratorProps: relatedDecoratorProps, uiProps: relatedUiProps } = useMemo(
+    () => relateFn?.(watchedValues ?? {}) ?? {},
+    [relateFn, watchedValues],
+  );
+  const value: boolean = getValue(valueProp, switchKey);
+  const onChange = (newValue: boolean) => {
+    setValue(valueProp, switchKey, newValue);
+    onChangeProp({ ...valueProp });
+  };
+
+  const AdaptiveAccordionPrimary = MobileAccordionPrimary;
+
+  const visible = relatedUiProps?.visible ?? uiProps?.visible ?? true;
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <>
+      <AdaptiveAccordionPrimary selectionMode='single' expanded={expanded} onExpandedChange={setExpanded}>
+        <AdaptiveAccordionPrimary.CollapseBlock
+          outline
+          id='key'
+          header={<ObjectDecorator {...decoratorProps} {...relatedDecoratorProps} />}
+          actions={
+            <Switch
+              showIcon={false}
+              checked={value}
+              onChange={checked => {
+                onAnalyticsClick(String(checked), `toggle-object-control-ui`);
+                onChange(checked);
+                checked && setExpanded('key');
+              }}
+            />
+          }
+        >
+          <div className={styles.content}>
+            <Divider />
+            <ProductContext.Provider
+              value={{
+                value: valueProp,
+                onChange: newValue => {
+                  setValue(newValue, switchKey, true);
+                  onChangeProp({ ...newValue });
+                },
+              }}
+            >
+              <Control formControl={{ ...control, accessorKey: '' }} />
+            </ProductContext.Provider>
+          </div>
+        </AdaptiveAccordionPrimary.CollapseBlock>
+      </AdaptiveAccordionPrimary>
+    </>
+  );
+}

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

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

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

@@ -0,0 +1,13 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as stv;
+
+.content {
+  display: flex;
+  flex-direction: column;
+  margin-top: stv.$dimension-1m;
+  gap: stv.$dimension-3m;
+  padding: stv.$dimension-050m;
+}
+
+.tip {
+  max-width: stv.$size-tooltip-container-max-width;
+}

package/src/components/Controls/constants.ts

@@ -0,0 +1,16 @@
+export const CONTROL = {
+  Object: 'object',
+  Array: 'array',
+  ToggleObject: 'toggle-object',
+  SelectSingle: 'select-single',
+  SelectMultiple: 'select-multiple',
+  Segmented: 'segmented',
+  Carousel: 'carousel',
+  Toggle: 'toggle',
+  ToggleCards: 'toggle-cards',
+  Stepper: 'stepper',
+  Alert: 'alert',
+  Table: 'table',
+  Slider: 'slider',
+  StepperWithValues: 'stepper-with-values',
+} as const;

package/src/components/Controls/index.tsx

@@ -0,0 +1,26 @@
+import { AlertControl } from './AlertControl';
+import { ArrayControl } from './ArrayControl';
+import { CarouselControl } from './CarouselControl';
+import { ObjectControl } from './ObjectControl';
+import { SegmentedControl } from './SegmentedControl';
+import { SelectMultipleControl, SelectSingleControl } from './SelectControl';
+import { StepperControl } from './StepperControl';
+import { ToggleControl } from './ToggleControl';
+import { ToggleObjectControl } from './ToggleObjectControl';
+
+export type { FormControl, FormConfig } from './types';
+
+export type {
+  CarouselControl,
+  SelectSingleControl,
+  SelectMultipleControl,
+  SegmentedControl,
+  ToggleControl,
+  StepperControl,
+  ObjectControl,
+  ArrayControl,
+  ToggleObjectControl,
+  AlertControl,
+};
+
+export * from './constants';

package/src/components/Controls/types.ts

@@ -0,0 +1,181 @@
+import { ReactNode } from 'react';
+
+import { AnyType, FormValues, PRICE_PERIOD } from '../../types';
+import { AlertControl } from './AlertControl';
+import { ArrayControl } from './ArrayControl';
+import { CarouselControl } from './CarouselControl';
+import { ObjectControl } from './ObjectControl';
+import { SegmentedControl } from './SegmentedControl';
+import { SelectMultipleControl, SelectSingleControl } from './SelectControl';
+import { SliderControl } from './SliderControl';
+import { StepperControl } from './StepperControl';
+import { TableControl } from './TableControl';
+import { ToggleCardsControl } from './ToggleCardsControl';
+import { ToggleControl } from './ToggleControl';
+import { ToggleObjectControl } from './ToggleObjectControl';
+
+export type TooltipPlacement =
+  | 'left'
+  | 'left-start'
+  | 'left-end'
+  | 'right'
+  | 'right-start'
+  | 'right-end'
+  | 'top'
+  | 'top-start'
+  | 'top-end'
+  | 'bottom'
+  | 'bottom-start'
+  | 'bottom-end';
+
+/** Базовые параметры декоратора для поля */
+export type BaseDecoratorProps = {
+  /** Лейбл */
+  label?: string;
+  /** Дополнительный текст */
+  hint?: string;
+  /** Вспомогательный тултип */
+  labelTooltip?: ReactNode;
+  /** Расположение тултипа */
+  labelTooltipPlacement?: TooltipPlacement;
+  /** Дополтительный текст сверху */
+  caption?: string;
+  /** Флаг обязательное поле или нет */
+  required?: boolean;
+};
+
+export type WithVisible<T> = T & {
+  /** Флаг, отрисовывать элемент или нет */
+  visible?: boolean;
+};
+
+export type BaseControl<UiPropsT, DecoratorPropsT = BaseDecoratorProps> = {
+  /** Пропсы для декоратора
+   *
+   * @example
+   * {
+   *  label: 'Колличество vCpu',
+   *  labelToolTip: 'Виртуальные ядра'
+   * }
+   */
+  decoratorProps: DecoratorPropsT;
+  /**
+   * Специфичные пропсы для контролла
+   *
+   * @example
+   * {
+   *  min: 0;
+   *  max: 100;
+   *  visible: true;
+   * }
+   */
+  uiProps?: WithVisible<UiPropsT>;
+  /**
+   * Поле (полный путь),  куда будет сохраняться значение контролла
+   *
+   * @example 'esc.cpu'
+   */
+  accessorKey: string;
+  /**
+   * Функция для мутирования значения формы, eсли при изменении контролла, нужно изменить "явно" значения других
+   *
+   *
+   * @param {string} value - Новое значение, которое было установлено.
+   *
+   * @param {function(Array<[string, AnyType]>): void} setValue - Функция для установки нового значения.
+   *
+   * @returns {void}
+   *
+   * @example (value, setValue) => {
+   *  // Изменение значения текущего контролла
+   *  const arr = [['currentControlAccessorKey', value]];
+   *  // Некоторое условие
+   *  if(...someRule) {
+   *    // Задаем значения для других контроллов
+   *    arr.push(['someAnotherKey_1', someValue_1]);
+   *    arr.push(['someAnotherKey_2', someValue_2]);
+   * }
+   * // Мутируем конфигурацию формы, чтобы применить изменения
+   * setValue(arr);
+   * }
+   */
+  onChangeFn?(value: string, setValue: (arr: [string, AnyType][]) => void): void;
+  /**
+   * Отслеживаемые "более главные" поля
+   *
+   * @example { storageClass: 'storages[0].obs.storageClass' },
+   */
+  watchedControls?: Record<string, string>;
+  /**
+   * Функция для изменения параметров контролла
+   *
+   * @param watchedValues - вычисленные 'watchedControls'
+   *
+   * @example ({ storageClass }) => {
+   *    if (storageClass !== StorageClassItem.Cold) {
+   *      return {
+   *         uiProps: {
+   *           visible: false,
+   *        },
+   *      };
+   *    }
+   *  }
+   */
+  relateFn?(watchedValues: FormValues):
+    | {
+        decoratorProps?: Partial<DecoratorPropsT>;
+        uiProps?: Partial<WithVisible<UiPropsT>>;
+      }
+    | undefined;
+  onChangePeriod?: (value: PRICE_PERIOD, setValue: (arr: [string, AnyType][]) => void) => void;
+  canChangeWholePricePeriod?: boolean;
+};
+
+export type BaseControlWithItems<ItemT, UiPropsT, DecoratorPropsT = BaseDecoratorProps> = Omit<
+  BaseControl<UiPropsT, DecoratorPropsT>,
+  'relateFn'
+> & {
+  /** Массив перечисляемых опций */
+  items: ItemT[];
+  /**
+   * Функция для изменения параметров контролла
+   *
+   * @param watchedValues - вычисленные 'watchedControls'
+   *
+   * @example ({ storageClass }) => {
+   *    if (storageClass !== StorageClassItem.Cold) {
+   *      return {
+   *         uiProps: {
+   *           visible: false,
+   *        },
+   *      };
+   *    }
+   *  }```
+   */
+  relateFn?(watchedValues: FormValues):
+    | {
+        decoratorProps?: Partial<DecoratorPropsT>;
+        uiProps?: Partial<WithVisible<UiPropsT>>;
+        items?: ItemT[];
+      }
+    | undefined;
+  onChangePeriod?: (value: PRICE_PERIOD, setValue: (arr: [string, AnyType][]) => void) => void;
+  canChangeWholePricePeriod?: boolean;
+};
+
+export type FormControl =
+  | CarouselControl
+  | SelectSingleControl
+  | SelectMultipleControl
+  | SegmentedControl
+  | ToggleControl
+  | StepperControl
+  | ObjectControl
+  | ArrayControl
+  | ToggleObjectControl
+  | AlertControl
+  | ToggleCardsControl
+  | SliderControl
+  | TableControl;
+
+export type FormConfig = Omit<ObjectControl, 'type'>;

package/src/components/Controls/utils.ts

@@ -0,0 +1,49 @@
+import { FormValues } from '../../types';
+import { setValue } from '../../utils';
+import { CONTROL } from './constants';
+import { FormControl } from './types';
+
+export function getDefaultValues(controls: Record<string, FormControl>): FormValues {
+  const defaultValue: FormValues = {};
+
+  function internalGetDefaultValues(controls: Record<string, FormControl>) {
+    Object.entries(controls).forEach(([key, control]) => {
+      if (control) {
+        switch (control.type) {
+          case CONTROL.Object: {
+            if (control.defaultValue !== undefined) {
+              setValue(defaultValue, key, JSON.parse(JSON.stringify(control.defaultValue)));
+            }
+
+            internalGetDefaultValues(control.controls);
+
+            break;
+          }
+
+          case CONTROL.ToggleObject: {
+            setValue(defaultValue, control.switchKey, false);
+            internalGetDefaultValues({ _: control.control });
+
+            break;
+          }
+
+          case CONTROL.Alert: {
+            break;
+          }
+
+          default: {
+            if (control.defaultValue !== undefined) {
+              const restedValue = JSON.parse(JSON.stringify(control.defaultValue));
+
+              setValue(defaultValue, control?.accessorKey ?? '', restedValue);
+            }
+          }
+        }
+      }
+    });
+  }
+
+  internalGetDefaultValues(controls);
+
+  return defaultValue;
+}

package/src/components/Disclaimer/Disclaimer.tsx

@@ -0,0 +1,33 @@
+import cn from 'classnames';
+
+import { Typography } from '@snack-uikit/typography';
+
+import { useCalculatorContext } from '../../contexts';
+import { CALCULATOR_TYPE } from '../../types';
+import { parseKeyToDataTest } from '../../utils';
+import styles from './styles.module.scss';
+
+type DisclaimerProps = {
+  className?: string;
+};
+
+export function Disclaimer({ className }: DisclaimerProps) {
+  const { layoutType, calculatorType } = useCalculatorContext();
+  const dataTestAttribute = parseKeyToDataTest('disclaimer');
+
+  return (
+    <div
+      className={cn(styles.footer, className)}
+      data-mobile={layoutType === 'mobile' || undefined}
+      data-test-id={dataTestAttribute}
+    >
+      {calculatorType !== CALCULATOR_TYPE.Partners && (
+        <Typography family='sans' purpose='body' size={layoutType === 'mobile' ? 's' : 'm'} className={styles.text}>
+          Рассчитываемая Калькулятором стоимость является предварительной, основанной на внесенных пользователем данных,
+          и не может расцениваться как предложение заключить договор по определенной Калькулятором цене
+          (не&nbsp;является офертой).
+        </Typography>
+      )}
+    </div>
+  );
+}

package/src/components/Disclaimer/index.ts

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

package/src/components/Disclaimer/styles.module.scss

@@ -0,0 +1,14 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables';
+
+.footer {
+  color: styles-theme-variables.$sys-neutral-text-light;
+  display: flex;
+  flex-direction: column;
+  gap: styles-theme-variables.$dimension-3m;
+  max-width: 800px;
+  text-align: justify;
+}
+
+.text {
+  text-align: left;
+}