@cloud-ru/uikit-product-calculator 0.33.3

package/src/components/Catalog/Catalog.tsx

@@ -0,0 +1,225 @@
+import cn from 'classnames';
+import { useState } from 'react';
+
+import { FilterSVG } from '@cloud-ru/uikit-product-icons';
+import { MobileDroplist } from '@cloud-ru/uikit-product-mobile-dropdown';
+import { AdaptiveFieldSelect } from '@cloud-ru/uikit-product-mobile-fields';
+import { MobileModalCustom } from '@cloud-ru/uikit-product-mobile-modal';
+import { LAYOUT_TYPE, LayoutType } from '@cloud-ru/uikit-product-utils';
+import { ButtonFilled } from '@snack-uikit/button';
+import { Card } from '@snack-uikit/card';
+import { Divider } from '@snack-uikit/divider';
+import { List } from '@snack-uikit/list';
+import { ModalCustom } from '@snack-uikit/modal';
+import { Tag } from '@snack-uikit/tag';
+import { Tooltip } from '@snack-uikit/tooltip';
+
+import { useCalculatorContext } from '../../contexts';
+import { useCatalogCardClick } from '../../hooks';
+import { CatalogConfig, PlatformType } from '../../types';
+import { parseKeyToDataTest } from '../../utils';
+import { PrivateCardHeader } from './components';
+import styles from './styles.module.scss';
+
+const bannerText = {
+  public: 'Доступна всем',
+  request: 'Для всех, по заявке',
+  legal: 'Только для юрлиц',
+};
+
+export type CatalogProps = {
+  layoutType?: LayoutType;
+  config: CatalogConfig;
+  open: boolean;
+  setOpen(open: boolean): void;
+  onCardClick?(productId: string): void;
+};
+
+export function Catalog() {
+  const {
+    selectedPlatform,
+    setSelectedPlatform,
+    setSelectedCategory,
+    selectedCategory,
+
+    products,
+    layoutType = LAYOUT_TYPE.Desktop,
+    config,
+    catalogOpen,
+    setCatalogOpen,
+
+    actions: { onPlatformSelect },
+  } = useCalculatorContext();
+
+  const handleCatalogCardClick = useCatalogCardClick();
+
+  const handlePlatformChange = (platformId: PlatformType) => {
+    onPlatformSelect?.(platformId);
+    setSelectedPlatform(platformId);
+    setSelectedCategory(config.catalog[platformId][0].id);
+  };
+
+  const categoryOptions = config.catalog[selectedPlatform].map(({ id, dataTestId, label }) => ({
+    id,
+    content: {
+      option: label,
+    },
+    'data-test-id': dataTestId,
+  }));
+
+  const [openMobileCategory, setOpenMobileCategory] = useState<boolean>(false);
+
+  const isMobile = layoutType !== LAYOUT_TYPE.Desktop && layoutType !== LAYOUT_TYPE.DesktopSmall;
+  const AdaptiveModal = isMobile ? MobileModalCustom : ModalCustom;
+
+  return (
+    <AdaptiveModal
+      open={catalogOpen}
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      size='l'
+      onClose={() => {
+        setCatalogOpen?.(false);
+      }}
+      className={cn({ [styles.modal]: !isMobile })}
+      data-test-id={parseKeyToDataTest('catalog')}
+    >
+      <AdaptiveModal.Header title='Каталог продуктов' />
+      <AdaptiveModal.Body
+        content={
+          <div className={styles.wrapper} data-mobile={isMobile || undefined}>
+            <div className={styles.sidebar}>
+              <AdaptiveFieldSelect
+                layoutType={layoutType}
+                value={selectedPlatform}
+                onChange={handlePlatformChange}
+                size='m'
+                label='Облачная платформа'
+                widthStrategy='eq'
+                searchable={false}
+                showClearButton={false}
+                options={config.platforms.map(({ icon, description, id, label, dataTestId, access }) => ({
+                  value: id,
+                  beforeContent: icon,
+                  truncate: {
+                    option: 2,
+                    description: 3,
+                    variant: 'end',
+                  },
+                  'data-test-id': dataTestId,
+                  option: label,
+                  description: (
+                    <div className={styles.description}>
+                      <span>{description} </span>
+                      <div>
+                        <Tag label={bannerText[access]} appearance='green' />
+                      </div>
+                    </div>
+                  ) as unknown as string,
+                }))}
+              />
+              {!isMobile && (
+                <div className={styles.categoriesWrapper}>
+                  <Divider orientation='vertical' />
+                  <List
+                    size='m'
+                    items={categoryOptions}
+                    selection={{
+                      value: selectedCategory,
+                      onChange: value => value && setSelectedCategory(value),
+                      mode: 'single',
+                    }}
+                  />
+                </div>
+              )}
+            </div>
+
+            <div className={styles.content}>
+              <div className={styles.contentHeadline} data-test-id={parseKeyToDataTest('catalog', 'category-title')}>
+                {config.catalog[selectedPlatform].find(item => item.id === selectedCategory)?.label}
+              </div>
+
+              <div className={styles.contentCards}>
+                {config.catalog[selectedPlatform].find(item => item.id === selectedCategory)?.banner || null}
+
+                {config.catalog[selectedPlatform]
+                  .find(item => item.id === selectedCategory)
+                  ?.visibleProducts.map(productId => config.products[productId])
+                  .filter(Boolean)
+                  .map(product => {
+                    const disabled = product.freeTier && Object.keys(products).includes(product.id);
+                    return (
+                      <Card
+                        key={product.id}
+                        className={styles.card}
+                        size={isMobile ? 's' : 'm'}
+                        outline
+                        disabled={disabled}
+                        onClick={disabled ? undefined : () => handleCatalogCardClick?.(product.id)}
+                        promoBadge={disabled ? { text: 'Добавлен', appearance: 'green' } : undefined}
+                        header={
+                          <Tooltip
+                            open={disabled ? undefined : false}
+                            tip={
+                              'Free tier продукты можно добавить только один раз. Чтобы посмотреть конфигурацию продукта, кликните на его карточку в расчете'
+                            }
+                          >
+                            <PrivateCardHeader
+                              icon={product?.icon}
+                              title={product?.label}
+                              metadata={product?.caption}
+                              description={
+                                product?.freeTier ? (
+                                  <div className={styles.tag} data-test-id={parseKeyToDataTest('catalog', 'card-tag')}>
+                                    <Tag label='Бесплатная конфигурация' appearance='green' />
+                                  </div>
+                                ) : null
+                              }
+                            />
+                          </Tooltip>
+                        }
+                        data-test-id={parseKeyToDataTest('catalog', 'card')}
+                      />
+                    );
+                  })}
+              </div>
+            </div>
+          </div>
+        }
+      />
+
+      {isMobile && (
+        <AdaptiveModal.Footer
+          actions={
+            <MobileDroplist
+              open={openMobileCategory}
+              onOpenChange={setOpenMobileCategory}
+              items={categoryOptions}
+              selection={{
+                value: selectedCategory,
+                onChange: value => {
+                  setSelectedCategory(value);
+                  setOpenMobileCategory(false);
+                },
+                mode: 'single',
+              }}
+              label='Категории'
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              // @ts-ignore
+              size='l'
+            >
+              <div className={styles.categoriesWrapper}>
+                <ButtonFilled
+                  size='m'
+                  appearance='neutral'
+                  icon={<FilterSVG />}
+                  label={`Категории: ${config.catalog[selectedPlatform].find(item => item.id === selectedCategory)?.label}`}
+                />
+              </div>
+            </MobileDroplist>
+          }
+        />
+      )}
+    </AdaptiveModal>
+  );
+}

package/src/components/Catalog/components/PrivateCardHeader.tsx

@@ -0,0 +1,63 @@
+import cn from 'classnames';
+import { ReactNode } from 'react';
+
+import { IconPredefined, IconPredefinedProps } from '@snack-uikit/icon-predefined';
+import { Typography } from '@snack-uikit/typography';
+import { excludeSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import { parseKeyToDataTest } from '../../../utils';
+import styles from './styles.module.scss';
+
+export type ProductCardHeaderProps = WithSupportProps<{
+  /** Заголовок */
+  title: string;
+  /** Подзаголовок */
+  description?: ReactNode;
+  /** Метаинформация */
+  metadata?: string;
+  icon?: IconPredefinedProps['icon'];
+  /** CSS-класс для элемента с контентом */
+  className?: string;
+}>;
+
+export function PrivateCardHeader({
+  title,
+  description,
+  metadata,
+  icon,
+  className,
+
+  ...rest
+}: ProductCardHeaderProps) {
+  return (
+    <div className={cn(styles.titleLayout, className)} {...excludeSupportProps(rest)}>
+      {icon && <IconPredefined icon={icon} size='s' decor={false} appearance='neutral' shape='square' />}
+
+      <div className={styles.contentLayout}>
+        <Typography
+          family='sans'
+          size='s'
+          purpose='title'
+          className={styles.title}
+          data-test-id={parseKeyToDataTest('catalog-card', 'title')}
+        >
+          {title}
+        </Typography>
+
+        {metadata && <Typography.SansBodyS className={styles.metadata}>{metadata}</Typography.SansBodyS>}
+
+        {description && (
+          <Typography
+            family='sans'
+            size='m'
+            purpose='body'
+            className={styles.description}
+            data-test-id={parseKeyToDataTest('catalog-card', 'desc')}
+          >
+            {description}
+          </Typography>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/Catalog/components/index.ts

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

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

@@ -0,0 +1,35 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as stv;
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-card' as st-card;
+
+$sizes: 's', 'm', 'l';
+
+.titleLayout {
+  @include stv.composite-var(st-card.$card, 'content', 's', 'header');
+
+  display: flex;
+  align-items: flex-start;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.contentLayout {
+  overflow: hidden;
+  display: block;
+  max-width: 100%;
+}
+
+.title {
+  display: block;
+  max-width: 100%;
+  color: stv.$sys-neutral-text-main;
+}
+
+.metadata {
+  max-width: 100%;
+  color: stv.$sys-neutral-text-light;
+}
+
+.description {
+  max-width: 100%;
+  color: stv.$sys-neutral-text-support;
+}

package/src/components/Catalog/index.ts

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

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

@@ -0,0 +1,104 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as stv;
+
+.calculator {
+  box-sizing: border-box;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: stv.$dimension-2m;
+  min-height: 400px;
+  padding-bottom: stv.$dimension-3m;
+}
+
+.contentHeadline {
+  @include stv.composite-var(stv.$sans-title-l);
+}
+
+.contentCards {
+  display: flex;
+  flex-wrap: wrap;
+  gap: stv.$dimension-2m;
+}
+
+.categoriesWrapper {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  margin-top: stv.$dimension-2m;
+}
+
+.selectCard {
+  display: flex;
+  padding: stv.$dimension-3m;
+  border: solid 1px stv.$sys-neutral-decor-default;
+}
+
+.card {
+  width: 280px;
+}
+
+.modal {
+  /* stylelint-disable-next-line declaration-no-important */
+  width: 1298px !important;
+
+  max-width: calc(100dvw - 2 * stv.$dimension-3m);
+
+  color: stv.$sys-neutral-text-main;
+}
+
+.sidebar {
+  padding-bottom: stv.$dimension-3m;
+}
+
+.wrapper {
+  position: relative;
+  min-height: 100%;
+
+  /* stylelint-disable-next-line declaration-property-value-allowed-list */
+  z-index: 0;
+  display: grid;
+  grid-template-columns: 256px 1fr;
+
+  gap: stv.$dimension-4m;
+
+  &[data-mobile] {
+    grid-template-columns: 1fr;
+    gap: stv.$dimension-1m;
+    min-height: inherit;
+
+    .card {
+      width: 100%;
+      height: inherit;
+    }
+    .content {
+      min-height: inherit;
+    }
+
+    .sidebar {
+      position: sticky;
+      top: 0;
+      left: 0;
+      background-color: stv.$sys-neutral-background1-level;
+      padding: stv.$dimension-3m 0 stv.$dimension-1m;
+      transform: translateY(calc(0px - stv.$dimension-3m));
+
+      /* stylelint-disable-next-line declaration-property-value-allowed-list */
+      z-index: 1;
+    }
+
+    .contentCards {
+      margin: 0 stv.$dimension-050m;
+    }
+  }
+}
+
+.description {
+  display: flex;
+  flex-direction: column;
+  gap: stv.$dimension-050m;
+}
+
+.tag {
+  margin-top: stv.$dimension-050m;
+}

package/src/components/Controls/AlertControl/AlertControl.tsx

@@ -0,0 +1,44 @@
+import { useMemo } from 'react';
+
+import { Alert, AlertProps } from '@snack-uikit/alert';
+
+import { FormValues } from '../../../types';
+import { parseKeyToDataTest } from '../../../utils';
+import { CONTROL } from '../constants';
+import { BaseControl, WithVisible } from '../types';
+
+export type AlertControl = Pick<
+  BaseControl<AlertProps>,
+  'uiProps' | 'accessorKey' | 'watchedControls' | 'onChangePeriod' | 'canChangeWholePricePeriod'
+> & {
+  type: typeof CONTROL.Alert;
+  relateFn?(watchedValues: FormValues):
+    | {
+        uiProps?: Partial<WithVisible<AlertProps>>;
+      }
+    | undefined;
+  onChangeFn?: never;
+};
+
+export type AlertControlUiProps = AlertControl & { watchedValues?: FormValues };
+
+export function AlertControlUi({ uiProps, relateFn, watchedValues, accessorKey }: AlertControlUiProps) {
+  const { uiProps: relatedUiProps } = useMemo(() => relateFn?.(watchedValues ?? {}) ?? {}, [relateFn, watchedValues]);
+  const dataTestAttribute = parseKeyToDataTest('alert', accessorKey);
+  const visible = relatedUiProps?.visible ?? uiProps?.visible ?? true;
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <Alert
+      description={''}
+      appearance='info'
+      outline
+      {...uiProps}
+      {...relatedUiProps}
+      data-test-id={dataTestAttribute}
+    />
+  );
+}

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

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

package/src/components/Controls/ArrayControl/ArrayControl.tsx

@@ -0,0 +1,105 @@
+import { PlusSVG, TrashSVG } from '@cloud-ru/uikit-product-icons';
+import { ButtonFunction } from '@snack-uikit/button';
+
+import { ProductContext, useProductContext } from '../../../contexts';
+import { useAdaptive } from '../../../hooks';
+import { AnyType } from '../../../types';
+import { getValue, parseKeyToDataTest, setValue } from '../../../utils';
+import { CONTROL } from '../constants';
+import { ObjectControl, ObjectControlUi } from '../ObjectControl';
+import { getDefaultValues } from '../utils';
+import styles from './styles.module.scss';
+
+export type ArrayControl = {
+  type: typeof CONTROL.Array;
+  /** Минимальное кол-во элементов массива */
+  min?: number;
+  /** Максимальное кол-во элементов массива */
+  max: number;
+  /**
+   * Поле (полный путь),  куда будет сохраняться значение
+   *
+   * @example 'esc.cpu'
+   */
+  accessorKey: string;
+  /** Текст кнопки добавления нового элемента */
+  addText: string;
+  /** Дефолтное значение */
+  defaultValue: AnyType[];
+
+  invertTrashOffset?: boolean;
+
+  onChangeFn?: never;
+  relateFn?: never;
+} & Omit<ObjectControl, 'type'>;
+
+type ArrayControlUiProps = ArrayControl;
+
+export function ArrayControlUi({
+  accessorKey,
+  ui,
+  controls,
+  max,
+  addText,
+  min = 0,
+  invertTrashOffset,
+}: ArrayControlUiProps) {
+  const { value: valueProp, onChange: onChangeProp } = useProductContext();
+  const { isMobile } = useAdaptive();
+
+  const value: AnyType[] = getValue(valueProp, accessorKey);
+
+  const onChange = (newValue: AnyType) => {
+    setValue(valueProp, accessorKey, newValue);
+
+    onChangeProp(valueProp);
+  };
+
+  return (
+    <div className={styles.container}>
+      {value?.map((_, idx) => (
+        <ProductContext.Provider
+          key={idx}
+          value={{
+            value: { ...getValue(value, `[${idx}]`) },
+            onChange: newValue => {
+              setValue(value, `[${idx}]`, newValue);
+              onChange(value);
+            },
+          }}
+        >
+          <div key={idx} className={styles.row}>
+            <div className={styles.wrap} data-mobile={isMobile || undefined}>
+              <ObjectControlUi ui={ui} controls={controls} type={CONTROL.Object} />
+            </div>
+
+            {(value ?? []).length > min && (
+              <ButtonFunction
+                icon={<TrashSVG />}
+                className={invertTrashOffset ? styles.trashInvert : styles.trash}
+                size='m'
+                onClick={() => {
+                  value?.splice(idx, 1);
+                  onChange(value);
+                }}
+              />
+            )}
+          </div>
+        </ProductContext.Provider>
+      ))}
+
+      {(value ?? []).length < max && (
+        <ButtonFunction
+          icon={<PlusSVG />}
+          size='m'
+          iconPosition='before'
+          label={addText}
+          onClick={() => {
+            onChange((value ?? []).concat([getDefaultValues(controls)]));
+          }}
+          data-test-id={parseKeyToDataTest('button')}
+        />
+      )}
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,33 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as stv;
+
+.row {
+  display: grid;
+  grid-template-columns: 1fr auto;
+
+  gap: stv.$dimension-1m;
+  align-items: flex-start;
+
+  .trash {
+    margin-top: stv.$dimension-3m;
+  }
+
+  .trashInvert {
+    margin-top: calc(0px - stv.$dimension-1m);
+  }
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: stv.$dimension-3m;
+}
+
+.wrap {
+  display: flex;
+  flex-direction: column;
+  gap: stv.$dimension-3m;
+
+  &[data-mobile] {
+    gap: stv.$dimension-2m;
+  }
+}