@cloud-ru/uikit-product-calculator 0.33.3

package/src/components/Controls/TableControl/TableControl.tsx

@@ -0,0 +1,162 @@
+import cn from 'classnames';
+import { ReactNode } from 'react';
+
+import { FieldStepperProps } from '@snack-uikit/fields';
+import { Scroll } from '@snack-uikit/scroll';
+import { QuestionTooltip } from '@snack-uikit/tooltip';
+import { Typography } from '@snack-uikit/typography';
+
+import { useAdaptive } from '../../../hooks';
+import { AnyType, FormValues, Price } from '../../../types';
+import { formatNumber, getPrice, getValue, setValue } from '../../../utils';
+import { CONTROL } from '../constants';
+import { ObjectDecorator } from '../ObjectDecorator';
+import { StepperControlUi } from '../StepperControl';
+import { BaseDecoratorProps, TooltipPlacement } from '../types';
+import { StepperWithAllowedValues } from './helperComponents';
+import styles from './styles.module.scss';
+
+type TableRow = {
+  label: string;
+  labelTooltip?: ReactNode;
+  labelTooltipPlacement?: TooltipPlacement;
+  accessorKey: string;
+  priceAccessorKey?: string;
+
+  allowedValues?: number[];
+
+  uiProps?: Pick<FieldStepperProps, 'step' | 'min' | 'max' | 'disabled' | 'postfix'>;
+};
+
+export type TableControl = {
+  type: typeof CONTROL.Table;
+  defaultValue?: FormValues;
+  accessorKey: string;
+
+  decoratorProps?: Pick<BaseDecoratorProps, 'label' | 'labelTooltip' | 'labelTooltipPlacement'>;
+  counter?: {
+    accessorKey: string;
+    label: string;
+    uiProps?: Pick<FieldStepperProps, 'step' | 'min' | 'max' | 'disabled' | 'postfix'>;
+  };
+
+  rows: TableRow[];
+
+  onChangeFn?: never;
+  relateFn?: never;
+  watchedControls?: never;
+};
+
+export type TableControlUiProps = {
+  value?: string;
+  onChange?(value?: string): void;
+  watchedValues?: FormValues;
+  priceList: Record<string, Price>;
+} & TableControl;
+
+export function TableControlUi({
+  rows,
+  counter,
+  decoratorProps,
+  value: valueProp,
+  onChange: onChangeProp,
+  priceList,
+  accessorKey,
+}: TableControlUiProps) {
+  const { isMobile } = useAdaptive();
+
+  const onChange = (accessorKey: string) => (newValue: AnyType) => {
+    setValue(valueProp, accessorKey, newValue);
+    onChangeProp?.(valueProp);
+  };
+
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.headline} data-mobile={isMobile || undefined}>
+        <ObjectDecorator {...decoratorProps} />
+
+        {counter && (
+          <div className={styles.counter}>
+            <Typography.SansBodyS> {counter.label}</Typography.SansBodyS>
+            <StepperControlUi
+              value={getValue(valueProp, counter.accessorKey)}
+              onChange={onChange(counter.accessorKey)}
+              uiProps={{
+                min: 1,
+                size: 's',
+                showHint: false,
+                ...counter.uiProps,
+              }}
+              accessorKey={accessorKey}
+              type='stepper'
+              decoratorProps={{}}
+            />
+          </div>
+        )}
+      </div>
+
+      <div className={styles.table}>
+        <Scroll barHideStrategy='never'>
+          <div className={cn(styles.row, styles.header)}>
+            <div className={styles.cell}>Ресурс</div>
+            <div className={styles.cell}>Количество</div>
+            <div className={styles.cell}>Стоимость в месяц</div>
+          </div>
+
+          {rows.map(({ accessorKey, label, labelTooltip, labelTooltipPlacement, uiProps, allowedValues }) => (
+            <div className={styles.row} key={accessorKey}>
+              <div className={styles.cell}>
+                <span>
+                  {label}&nbsp;
+                  {labelTooltip && (
+                    <span className={styles.tipWrapperInline}>
+                      <QuestionTooltip
+                        data-pointer
+                        tip={labelTooltip}
+                        placement={labelTooltipPlacement}
+                        size='xs'
+                        tabIndex={-1}
+                      />
+                    </span>
+                  )}
+                </span>
+              </div>
+              <div className={styles.cell}>
+                {allowedValues ? (
+                  <StepperWithAllowedValues
+                    value={getValue(valueProp, accessorKey)}
+                    onChange={onChange(accessorKey)}
+                    allowedValues={allowedValues}
+                    {...uiProps}
+                  />
+                ) : (
+                  <StepperControlUi
+                    value={getValue(valueProp, accessorKey)}
+                    onChange={onChange(accessorKey)}
+                    uiProps={{
+                      showHint: false,
+                      min: 0,
+                      size: 's',
+                      ...uiProps,
+                    }}
+                    type='stepper'
+                    decoratorProps={{}}
+                    accessorKey={accessorKey}
+                  />
+                )}
+              </div>
+              <div className={styles.cell}>
+                {formatNumber(
+                  getPrice({
+                    price: getValue(priceList, accessorKey),
+                    pricePeriod: 'month',
+                  }),
+                ) + ' ₽'}
+              </div>
+            </div>
+          ))}
+        </Scroll>
+      </div>
+    </div>
+  );
+}

package/src/components/Controls/TableControl/helperComponents/StepperWithAllowedValues.tsx

@@ -0,0 +1,50 @@
+import { ReactNode, useState } from 'react';
+
+import { MinusSVG, PlusSVG } from '@cloud-ru/uikit-product-icons';
+import { ButtonFunction } from '@snack-uikit/button';
+import { InputPrivate } from '@snack-uikit/input-private';
+
+import styles from './styles.module.scss';
+
+type StepperWithAllowedValuesProps = {
+  value: number;
+  onChange(value: number): void;
+  allowedValues: number[];
+  postfix?: ReactNode;
+};
+
+export function StepperWithAllowedValues({ value, onChange, allowedValues, postfix }: StepperWithAllowedValuesProps) {
+  const [selectedIdx, setSelectedIdx] = useState<number>(allowedValues.findIndex(item => item === value));
+
+  return (
+    <div className={styles.input}>
+      <ButtonFunction
+        icon={<MinusSVG />}
+        onClick={() => {
+          const newIdx = Math.max(selectedIdx - 1, 0);
+          setSelectedIdx(newIdx);
+          onChange(allowedValues[newIdx]);
+        }}
+      />
+      <div className={styles.content}>
+        <div
+          style={{
+            width: `${allowedValues[selectedIdx].toString().length * 8}px`,
+          }}
+        >
+          <InputPrivate readonly value={String(allowedValues[selectedIdx])} />
+        </div>
+        {postfix && <div className={styles.postfix}>{postfix}</div>}
+      </div>
+
+      <ButtonFunction
+        icon={<PlusSVG />}
+        onClick={() => {
+          const newIdx = Math.min(selectedIdx + 1, allowedValues.length - 1);
+          setSelectedIdx(newIdx);
+          onChange(allowedValues[newIdx]);
+        }}
+      />
+    </div>
+  );
+}

package/src/components/Controls/TableControl/helperComponents/index.ts

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

package/src/components/Controls/TableControl/helperComponents/styles.module.scss

@@ -0,0 +1,53 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as ft;
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-fields' as ft-fields;
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-element' as ft-element;
+
+.input {
+  @include ft.composite-var(ft-fields.$fields-single-line-container-s);
+
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+
+  border-style: solid;
+  border-color: ft.$sys-neutral-decor-default;
+  padding: 0 2px;
+  gap: 0;
+
+  &:hover {
+    background-color: ft.$sys-neutral-background2-level;
+  }
+
+  &:focus-within {
+    @include ft.outline-var(ft-element.$container-focused-m);
+
+    background-color: ft.$sys-neutral-background2-level;
+    border-color: ft.$sys-primary-accent-default;
+    outline-color: ft.$sys-primary-decor-activated;
+  }
+
+  .content {
+    @include ft.composite-var(ft.$sans-body-s);
+
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: ft.$dimension-050m;
+
+    input:read-only {
+      @include ft.composite-var(ft.$sans-body-s);
+
+      /* stylelint-disable-next-line declaration-no-important */
+      color: ft.$sys-neutral-text-main !important;
+
+      cursor: default;
+    }
+  }
+
+  .postfix {
+    color: ft.$sys-neutral-text-support;
+  }
+}

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

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

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

@@ -0,0 +1,104 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-table' as ft-table;
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as ft;
+
+.tipWrapper {
+  display: inline-flex;
+  height: 16px;
+  align-items: center;
+}
+
+.tipWrapperInline {
+  display: inline-flex;
+  height: 16px;
+  > span {
+    transform: translate(0, 3px);
+  }
+}
+
+$border: solid ft-table.$border-width-table ft.$sys-neutral-decor-default;
+
+.table {
+  @include ft.composite-var(ft.$sans-body-m);
+
+  border-radius: ft-table.$radius-table-container;
+
+  border: $border;
+  box-sizing: border-box;
+}
+
+.row {
+  @include ft-table.composite-var(ft-table.$table-line-container);
+
+  height: auto;
+  min-height: ft-table.$size-table-line-height;
+
+  display: grid;
+  grid-template-columns: 2fr minmax(186px, 1fr) minmax(160px, 1fr);
+  align-items: center;
+
+  box-sizing: border-box;
+
+  min-width: 500px;
+}
+
+.cell {
+  @include ft-table.composite-var(ft-table.$table-cells);
+
+  box-sizing: border-box;
+
+  display: flex;
+  height: 100%;
+  width: 100%;
+
+  align-items: center;
+
+  color: ft.$sys-neutral-text-main;
+
+  padding-top: 2px;
+  padding-bottom: 2px;
+
+  border-right: $border;
+  border-bottom: $border;
+}
+
+.cell:last-child {
+  border-right: none;
+}
+
+.row.header {
+  .cell {
+    color: ft.$sys-neutral-text-light;
+  }
+}
+
+.row:last-child {
+  .cell {
+    border-bottom: none;
+  }
+}
+
+.headline {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  flex-direction: row;
+
+  &[data-mobile] {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}
+
+.counter {
+  display: grid;
+  grid-template-columns: 1fr 120px;
+  gap: 24px;
+  align-items: center;
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}

package/src/components/Controls/ToggleCard/ToggleCard.tsx

@@ -0,0 +1,46 @@
+import { ReactNode } from 'react';
+
+import { Card } from '@snack-uikit/card';
+import { useToggleGroup } from '@snack-uikit/toggles';
+import { Tooltip } from '@snack-uikit/tooltip';
+
+import styles from './styles.module.scss';
+
+export type ToggleCardItem = {
+  value: string;
+
+  label?: string;
+  description?: ReactNode;
+
+  disabled?: boolean;
+  disabledReason?: ReactNode;
+
+  dataTestId?: string;
+};
+
+export function ToggleCard({ value, label, description, disabled, disabledReason, dataTestId }: ToggleCardItem) {
+  const { isChecked, handleClick } = useToggleGroup({ value });
+
+  return (
+    <Tooltip open={disabled && disabled ? undefined : false} tip={disabledReason}>
+      <Card
+        outline
+        checked={isChecked}
+        onClick={handleClick}
+        className={styles.card}
+        disabled={disabled}
+        data-test-id={dataTestId}
+        size='s'
+      >
+        <Card.Header
+          title={label ?? value}
+          description={description as string}
+          truncate={{
+            title: 10,
+            description: 20,
+          }}
+        />
+      </Card>
+    </Tooltip>
+  );
+}

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

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

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

@@ -0,0 +1,11 @@
+.card {
+  min-height: 100%;
+
+  div {
+    min-height: 100%;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    width: 100%;
+  }
+}

package/src/components/Controls/ToggleCardsControl/ToggleCardsControl.tsx

@@ -0,0 +1,93 @@
+import { useEffect, useMemo } from 'react';
+
+import { CarouselProps } from '@snack-uikit/carousel';
+import { FieldDecorator } from '@snack-uikit/fields';
+import { ToggleGroup } from '@snack-uikit/toggles';
+
+import { useAdaptive } from '../../../hooks';
+import { FormValues } from '../../../types';
+import { parseKeyToDataTest } from '../../../utils';
+import { CarouselControlUi } from '../CarouselControl';
+import { CONTROL } from '../constants';
+import { ToggleCard, ToggleCardItem } from '../ToggleCard';
+import { BaseControlWithItems } from '../types';
+import styles from './styles.module.scss';
+
+type UiProps = Pick<
+  CarouselProps,
+  'transition' | 'scrollBy' | 'className' | 'swipe' | 'infiniteScroll' | 'arrows' | 'showItems' | 'pagination' | 'gap'
+>;
+
+export type ToggleCardsControl = {
+  type: typeof CONTROL.ToggleCards;
+  accessorKey?: string;
+  defaultValue?: string;
+} & BaseControlWithItems<ToggleCardItem, UiProps>;
+
+export type ToggleCardsControlUiProps = {
+  value?: string;
+  onChange?(value: string): void;
+  watchedValues?: FormValues;
+} & ToggleCardsControl;
+
+function ToggleCardsControlUiDesktop({
+  items: itemsProp,
+  uiProps,
+  value,
+  onChange,
+  decoratorProps,
+  relateFn,
+  watchedValues,
+  accessorKey,
+}: ToggleCardsControlUiProps) {
+  const {
+    items: relatedItems,
+    decoratorProps: relatedDecoratorProps,
+    uiProps: relatedUiProps,
+  } = useMemo(() => relateFn?.(watchedValues ?? {}) ?? {}, [relateFn, watchedValues]);
+
+  const items = useMemo(() => relatedItems ?? itemsProp, [itemsProp, relatedItems]);
+
+  const dataTestAttribute = parseKeyToDataTest('toggle-cards', accessorKey);
+
+  useEffect(() => {
+    if (!items.find(item => String(item.value) === String(value))) {
+      onChange?.(String(items?.[0]?.value));
+    }
+  }, [value, onChange, items, relatedItems]);
+
+  const visible = relatedUiProps?.visible ?? uiProps?.visible ?? true;
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <div className={styles.carousel}>
+      <FieldDecorator size='m' {...decoratorProps} {...relatedDecoratorProps} data-test-id={dataTestAttribute}>
+        <ToggleGroup
+          selectionMode='single'
+          value={value}
+          onChange={value => {
+            value && onChange?.(value);
+          }}
+        >
+          <div className={styles.group}>
+            {items.map(item => (
+              <ToggleCard {...item} key={item.value} />
+            ))}
+          </div>
+        </ToggleGroup>
+      </FieldDecorator>
+    </div>
+  );
+}
+export function ToggleCardsControlUi(props: ToggleCardsControlUiProps) {
+  const { isMobile } = useAdaptive();
+
+  if (isMobile) {
+    return <CarouselControlUi {...props} type={CONTROL.Carousel} />;
+  }
+
+  return <ToggleCardsControlUiDesktop {...props} />;
+}

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

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

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

@@ -0,0 +1,40 @@
+@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;
+
+  .headline {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .label {
+      @include stv.composite-var(stv.$sans-label-l);
+      color: stv.$sys-neutral-text-support;
+      .tip {
+        transform: translateY(stv.$dimension-050m);
+        margin-left: stv.$dimension-050m;
+      }
+    }
+  }
+
+  ul {
+    margin: 0;
+    padding: 0 0 0 stv.$dimension-2m;
+    list-style-type: disc;
+  }
+
+  li {
+    list-style-type: disc;
+  }
+}
+
+.group {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: stv.$dimension-2m;
+}

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

@@ -0,0 +1,59 @@
+import { useMemo } from 'react';
+
+import { AnyType, FormValues, PRICE_PERIOD } from '../../../types';
+import { parseKeyToDataTest } from '../../../utils';
+import { CONTROL } from '../constants';
+import { BaseControl } from '../types';
+import { SwitchRow, SwitchRowProps } from './components';
+
+type UiProps = Pick<SwitchRowProps, 'className' | 'disabled' | 'description'>;
+
+export type ToggleControl = {
+  type: typeof CONTROL.Toggle;
+  defaultValue?: boolean;
+} & BaseControl<UiProps>;
+
+export type ToggleControlUiProps = ToggleControl & {
+  value?: boolean;
+  onChange?(value: boolean): void;
+  onChangePeriod?: (value: PRICE_PERIOD, setValue: (arr: [string, AnyType][]) => void) => void;
+  canChangeWholePricePeriod?: boolean;
+  watchedValues?: FormValues;
+};
+
+const noop = () => {};
+
+export function ToggleControlUi({
+  decoratorProps,
+  uiProps,
+  value,
+  onChange,
+  watchedValues,
+  relateFn,
+  accessorKey,
+}: ToggleControlUiProps) {
+  const { decoratorProps: relatedDecoratorProps, uiProps: relatedUiProps } = useMemo(
+    () => relateFn?.(watchedValues ?? {}) ?? {},
+    [relateFn, watchedValues],
+  );
+
+  const dataTestAttribute = parseKeyToDataTest('toggle', accessorKey);
+
+  const visible = relatedUiProps?.visible ?? uiProps?.visible ?? true;
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <SwitchRow
+      checked={value || false}
+      onChange={onChange ?? noop}
+      dataTestId={dataTestAttribute}
+      {...decoratorProps}
+      {...relatedDecoratorProps}
+      {...uiProps}
+      {...relatedUiProps}
+    />
+  );
+}