@cloud-ru/uikit-product-calculator 0.33.3

package/src/components/Welcome/Welcome.tsx

@@ -0,0 +1,138 @@
+import { PlusSVG } from '@cloud-ru/uikit-product-icons';
+import { LAYOUT_TYPE } from '@cloud-ru/uikit-product-utils';
+import { ButtonFilled } from '@snack-uikit/button';
+import { FieldStepper } from '@snack-uikit/fields';
+import { Typography } from '@snack-uikit/typography';
+
+import { useCalculatorContext, useProductContext } from '../../contexts';
+import { PRICE_PERIOD } from '../../types';
+import { parseKeyToDataTest } from '../../utils';
+import { HeaderContainer } from '../HeaderContainer';
+import { PriceSummary, SummaryAppearance } from '../PriceSummary';
+import { PriceCount } from '../ProductHeadline/components';
+import styles from './styles.module.scss';
+
+const WELCOME_STEPS = [
+  'Нажмите Добавить сервис',
+  'Выберите платформу и продукт',
+  'Настройте конфигурацию',
+  'Подключите сразу или оставьте заявку',
+];
+
+type WelcomeProps = { image?: string };
+
+export function Welcome({ image }: WelcomeProps) {
+  const {
+    setCatalogOpen,
+    actions: { onStartClick },
+  } = useCalculatorContext();
+
+  const { price } = useProductContext();
+
+  const handleCatalogOpen = () => {
+    onStartClick?.();
+    setCatalogOpen(true);
+  };
+
+  const { layoutType } = useCalculatorContext();
+
+  const isTablet = layoutType !== LAYOUT_TYPE.Desktop && layoutType !== LAYOUT_TYPE.DesktopSmall;
+  const isDesctopSmall = layoutType === LAYOUT_TYPE.DesktopSmall;
+  const isMobile = layoutType === LAYOUT_TYPE.Mobile;
+
+  const TitleComponent = isTablet ? Typography.SansTitleL : Typography.SansHeadlineS;
+
+  return (
+    <div
+      data-test-id={parseKeyToDataTest('welcome')}
+      className={styles.wrapper}
+      data-desktop-small={isDesctopSmall || undefined}
+      data-tablet={isTablet || undefined}
+    >
+      <div
+        className={styles.configurator}
+        data-test-id={parseKeyToDataTest('welcome', 'configurator')}
+        data-desktop-small={isDesctopSmall || undefined}
+        data-tablet={isTablet || undefined}
+      >
+        <HeaderContainer dataTestId={parseKeyToDataTest('welcome', 'header')}>
+          <div className={styles.left}>
+            <TitleComponent data-test-id={parseKeyToDataTest('product', 'title')}>Конфигурация сервиса</TitleComponent>
+          </div>
+
+          <div className={styles.right} data-tablet={isTablet || undefined}>
+            <PriceCount price={price} pricePeriod={PRICE_PERIOD.Month} mobile={isMobile} />
+
+            <div className={styles.counter} data-test-id={parseKeyToDataTest('product', 'counter')}>
+              <FieldStepper size='m' step={1} min={1} max={1} value={1} disabled allowMoreThanLimits={false} />
+            </div>
+
+            {!isTablet && (
+              <ButtonFilled
+                fullWidth={isTablet}
+                label='Подключить'
+                size='m'
+                appearance='primary'
+                onClick={() => {}}
+                disabled
+              />
+            )}
+          </div>
+        </HeaderContainer>
+        <div
+          className={styles.body}
+          data-mobile={isMobile || undefined}
+          data-tablet={isTablet || undefined}
+          data-test-id={parseKeyToDataTest('welcome', 'body')}
+        >
+          <div className={styles.headings}>
+            <Typography.SansBodyM className={styles.desc} data-test-id={parseKeyToDataTest('welcome', 'desc')}>
+              Соберите свою конфигурацию ресурсов, узнайте ее стоимость
+              <br />и подключите. Калькулятор предложит бесплатные
+              <br />
+              конфигурации для экономии на старте
+            </Typography.SansBodyM>
+            {(isTablet || isDesctopSmall) && (
+              <ButtonFilled
+                onClick={handleCatalogOpen}
+                size='m'
+                icon={<PlusSVG />}
+                label='Добавить сервис'
+                appearance='primary'
+                data-test-id={parseKeyToDataTest('welcome', 'button')}
+              />
+            )}
+          </div>
+          <div className={styles.steps} data-test-id={parseKeyToDataTest('welcome', 'steps')}>
+            {WELCOME_STEPS.map((item, index) => (
+              <div className={styles.step} key={index} data-test-id={parseKeyToDataTest('welcome', 'step')}>
+                <div className={styles.number}>
+                  <Typography.SansLabelL>{index + 1}</Typography.SansLabelL>
+                </div>
+                <Typography.SansTitleS>{item}</Typography.SansTitleS>
+              </div>
+            ))}
+          </div>
+          {image && (
+            <img
+              className={styles.image}
+              src={image}
+              alt='calculator'
+              data-test-id={parseKeyToDataTest('welcome', 'image')}
+              data-mobile={isMobile || undefined}
+              data-tablet={isTablet || undefined}
+            />
+          )}
+        </div>
+      </div>
+      <div
+        className={styles.priceSummary}
+        data-desktop-small={isDesctopSmall || undefined}
+        data-tablet={isTablet || undefined}
+        data-test-id={parseKeyToDataTest('welcome', 'summary')}
+      >
+        <PriceSummary appearance={SummaryAppearance.Welcome} />
+      </div>
+    </div>
+  );
+}

package/src/components/Welcome/index.ts

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

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

@@ -0,0 +1,155 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as stv;
+
+.wrapper {
+  display: flex;
+  gap: 32px;
+
+  &[data-desktop-small] {
+    flex-direction: column;
+  }
+
+  &[data-tablet] {
+    flex-direction: column;
+  }
+}
+
+.configurator {
+  background-color: stv.$sys-neutral-background1-level;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  width: 800px;
+  min-height: 569px;
+
+  &[data-desktop-small] {
+    width: 100%;
+    min-height: auto;
+  }
+
+  &[data-tablet] {
+    width: 100%;
+    min-height: auto;
+  }
+}
+
+.priceSummary {
+  width: 384px;
+  flex-shrink: 0;
+  position: sticky;
+  top: 24px;
+
+  &[data-desktop-small] {
+    display: none;
+  }
+
+  &[data-tablet] {
+    display: none;
+  }
+}
+
+.left,
+.right {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+}
+
+.left {
+  gap: stv.$dimension-1m;
+}
+
+.right {
+  justify-content: flex-end;
+  align-items: flex-start;
+  gap: stv.$dimension-2m;
+
+  &[data-tablet] {
+    display: none;
+  }
+}
+
+.counter {
+  max-width: 140px;
+  min-width: 100px;
+}
+
+.body {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  padding: stv.$dimension-4m;
+  display: flex;
+  gap: stv.$dimension-4m;
+  flex-direction: column;
+  position: relative;
+  justify-content: space-between;
+  /* stylelint-disable-next-line declaration-property-value-allowed-list */
+  z-index: 0;
+  overflow: hidden;
+
+  &[data-tablet] {
+    padding: stv.$dimension-3m;
+
+    @media (max-width: 767px) {
+      padding-bottom: 150px;
+    }
+  }
+
+  &[data-mobile] {
+    padding: stv.$dimension-2m;
+    padding-bottom: 150px;
+  }
+}
+
+.headings {
+  display: flex;
+  flex-direction: column;
+  gap: stv.$dimension-3m;
+}
+
+.steps {
+  display: flex;
+  flex-direction: column;
+  gap: stv.$dimension-2m;
+}
+
+.image {
+  width: 400px;
+  height: 293px;
+  object-fit: cover;
+  bottom: 0;
+  right: 0;
+  position: absolute;
+  /* stylelint-disable-next-line declaration-property-value-allowed-list */
+  z-index: -1;
+
+  &[data-tablet] {
+    width: 309px;
+    height: 210px;
+  }
+
+  &[data-mobile] {
+    width: 240px;
+    height: 164px;
+  }
+}
+
+.desc {
+  color: stv.$sys-neutral-text-support;
+}
+
+.step {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.number {
+  background-color: stv.$sys-neutral-background;
+  height: 24px;
+  width: 24px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

package/src/components/index.ts

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

package/src/config/config.tsx

@@ -0,0 +1,27 @@
+import { CatalogConfig } from '../types';
+import { ADVANCED_CATALOG, ADVANCED_PLATFORM, ADVANCED_PRODUCT, ADVANCED_PRODUCTS } from './platforms/advanced';
+import { EVOLUTION_CATALOG, EVOLUTION_PLATFORM, EVOLUTION_PRODUCT, EVOLUTION_PRODUCTS } from './platforms/evolution';
+import { VM_WARE_CATALOG, VM_WARE_PLATFORM, VM_WARE_PRODUCT, VM_WARE_PRODUCTS } from './platforms/vmware';
+
+export type ValueOf<T> = T[keyof T];
+
+export const CATALOG_CONFIG: CatalogConfig = {
+  platforms: [EVOLUTION_PLATFORM, ADVANCED_PLATFORM, VM_WARE_PLATFORM],
+
+  products: {
+    ...EVOLUTION_PRODUCTS,
+    ...ADVANCED_PRODUCTS,
+    ...VM_WARE_PRODUCTS,
+  },
+
+  catalog: {
+    ...EVOLUTION_CATALOG,
+    ...ADVANCED_CATALOG,
+    ...VM_WARE_CATALOG,
+  },
+};
+
+export type ProductType =
+  | ValueOf<typeof ADVANCED_PRODUCT>
+  | ValueOf<typeof VM_WARE_PRODUCT>
+  | ValueOf<typeof EVOLUTION_PRODUCT>;

package/src/config/index.ts

@@ -0,0 +1,2 @@
+export * from './config';
+export * from './platforms';

package/src/config/platforms/advanced/catalog.ts

@@ -0,0 +1,82 @@
+import { CATEGORY, PLATFORM } from '../../../constants';
+import { CatalogConfig } from '../../../types';
+import { ADVANCED_PRODUCT } from './constants';
+
+export const ADVANCED_CATALOG: CatalogConfig['catalog'] = {
+  [PLATFORM.Advanced]: [
+    {
+      id: CATEGORY.Popular,
+      label: 'Популярное',
+      dataTestId: 'popular',
+      visibleProducts: [
+        ADVANCED_PRODUCT.AdvancedCloudServer,
+        ADVANCED_PRODUCT.AdvancedMySqlDataBase,
+        ADVANCED_PRODUCT.AdvancedPostgreSqlDatabase,
+        ADVANCED_PRODUCT.AdvancedSqlDatabase,
+        ADVANCED_PRODUCT.AdvancedObjectStorage,
+      ],
+    },
+    {
+      id: CATEGORY.Computations,
+      label: 'Вычисления',
+      dataTestId: 'computations',
+      visibleProducts: [ADVANCED_PRODUCT.AdvancedCloudServer, ADVANCED_PRODUCT.AdvancedServerlessFunctions],
+    },
+    {
+      id: CATEGORY.Network,
+      label: 'Сеть',
+      dataTestId: 'network',
+      visibleProducts: [ADVANCED_PRODUCT.AdvancedNetwork, ADVANCED_PRODUCT.AdvancedElasticLoadBalance],
+    },
+    {
+      id: CATEGORY.Containerization,
+      label: 'Контейнеры',
+      dataTestId: 'containerization',
+      visibleProducts: [ADVANCED_PRODUCT.AdvancedCloudContainerEngine],
+    },
+    {
+      id: CATEGORY.Database,
+      label: 'Базы данных',
+      dataTestId: 'database',
+      visibleProducts: [
+        ADVANCED_PRODUCT.AdvancedMySqlDataBase,
+        ADVANCED_PRODUCT.AdvancedPostgreSqlDatabase,
+        ADVANCED_PRODUCT.AdvancedSqlDatabase,
+        ADVANCED_PRODUCT.AdvancedDocumentDatabase,
+      ],
+    },
+    {
+      id: CATEGORY.Storage,
+      label: 'Хранилище',
+      dataTestId: 'storage',
+      visibleProducts: [
+        ADVANCED_PRODUCT.AdvancedObjectStorage,
+        ADVANCED_PRODUCT.AdvancedCloudBackup,
+        ADVANCED_PRODUCT.AdvancedScalableFile,
+        ADVANCED_PRODUCT.AdvancedDataWarehouseService,
+      ],
+    },
+    {
+      id: CATEGORY.Analytic,
+      label: 'Аналитика данных',
+      dataTestId: CATEGORY.Analytic,
+      visibleProducts: [
+        ADVANCED_PRODUCT.AdvancedMapReduce,
+        ADVANCED_PRODUCT.AdvancedDataLakeInsight,
+        ADVANCED_PRODUCT.AdvancedDataAsYouUse,
+        ADVANCED_PRODUCT.AdvancedElasticsearch,
+      ],
+    },
+    {
+      id: CATEGORY.Development,
+      label: 'Разработка',
+      dataTestId: 'development',
+      visibleProducts: [
+        ADVANCED_PRODUCT.AdvancedDmsRabbitMq,
+        ADVANCED_PRODUCT.AdvancesDmsKafka,
+        ADVANCED_PRODUCT.AdvancedDcsRedis,
+        ADVANCED_PRODUCT.AdvancedDcsMemcached,
+      ],
+    },
+  ],
+};

package/src/config/platforms/advanced/constants.ts

@@ -0,0 +1,23 @@
+export const ADVANCED_PRODUCT = {
+  AdvancedMySqlDataBase: 'mySqlDatabase',
+  AdvancedDcsMemcached: 'dcsMemcached',
+  AdvancedDmsRabbitMq: 'dmsRabbitMq',
+  AdvancedDcsRedis: 'dcsRedis',
+  AdvancesDmsKafka: 'dmsKafka',
+  AdvancedMapReduce: 'mapReduce',
+  AdvancedDataLakeInsight: 'dataLakeInsight',
+  AdvancedDataAsYouUse: 'dataAsYouUse',
+  AdvancedServerlessFunctions: 'functionGraph',
+  AdvancedObjectStorage: 'objectStorage',
+  AdvancedElasticsearch: 'cloudSearchService',
+  AdvancedDataWarehouseService: 'dataWarehouseService',
+  AdvancedScalableFile: 'scalableFile',
+  AdvancedCloudBackup: 'cloudBackup',
+  AdvancedCloudContainerEngine: 'cloudContainerEngine',
+  AdvancedElasticLoadBalance: 'elasticLoadBalance',
+  AdvancedSqlDatabase: 'sqlDatabase',
+  AdvancedPostgreSqlDatabase: 'postgreSqlDatabase',
+  AdvancedDocumentDatabase: 'documentDatabase',
+  AdvancedCloudServer: 'cloudServer',
+  AdvancedNetwork: 'network',
+} as const;

package/src/config/platforms/advanced/index.ts

@@ -0,0 +1,5 @@
+export * from './catalog';
+export * from './constants';
+export * from './platform';
+export * from './products';
+export * from './product-config';

package/src/config/platforms/advanced/platform.tsx

@@ -0,0 +1,13 @@
+import { AdvancedPlatformSVG } from '@cloud-ru/uikit-product-icons';
+
+import { PLATFORM } from '../../../constants';
+import { Platform } from '../../../types';
+
+export const ADVANCED_PLATFORM: Platform = {
+  id: PLATFORM.Advanced,
+  icon: <AdvancedPlatformSVG />,
+  label: 'Advanced Cloud.ru',
+  description: '60+ IaaS- и PaaS-сервисов для развития инфраструктуры',
+  access: 'request',
+  dataTestId: 'calculator-catalog-platform-advanced',
+};

package/src/config/platforms/advanced/product-config/AdvancedCloudBackup.ts

@@ -0,0 +1,76 @@
+import { CONTROL, FormConfig } from '../../../../components';
+import { getObs, UnitsOfCalculationItem } from '../../../utils/obs';
+
+const StorageClassItem = {
+  VirtualServer: 'Virtual server',
+  Volume: 'Volume',
+  SFSTurbo: 'SFS Turbo',
+};
+
+const storageClassItems = [
+  {
+    value: StorageClassItem.VirtualServer,
+    label: 'Virtual server',
+    description:
+      'Предназначен для сервисов Elastic Cloud Server (ECS) и Bare Metal Server (BMS), с помощью которого осуществляется бэкап системных дисков и дисков с данными.',
+  },
+  {
+    value: StorageClassItem.Volume,
+    label: 'Volume',
+    description:
+      'Предназначен для сервиса Elastic Volume Sevice (EVS), с помощью которого осуществляется бэкап системных дисков или дисков с данными.',
+  },
+  {
+    value: StorageClassItem.SFSTurbo,
+    label: 'SFS Turbo',
+    description:
+      'Предназначен для сервиса Scalable File Service (SFS), с помощью которого осуществляется бэкап файлового хранилища.',
+  },
+];
+
+export const CLOUD_BACKUP_FORM_CONFIG: FormConfig = {
+  ui: ['serviceAlert', 'service', ['storage']],
+  controls: {
+    serviceAlert: {
+      type: CONTROL.Alert,
+      uiProps: {
+        description: 'Рекомендуем выбирать объем хранилища под бэкапы на 20% больше объема самого продукта',
+      },
+      accessorKey: 'cbr.alert',
+    },
+    service: {
+      type: CONTROL.Carousel,
+      defaultValue: StorageClassItem.VirtualServer,
+      items: storageClassItems,
+      accessorKey: 'cbr.service',
+      decoratorProps: {
+        label: 'Тип продукта',
+      },
+    },
+    storage: getObs({
+      space: {
+        accessorKey: 'cbr.storage.space',
+        label: 'Размер хранилища',
+        defaultValue: 1,
+        uiProps: {
+          min: 1,
+          max: 9_999_998_976,
+        },
+        relateFn: ({ unitsOfCalculation }) => {
+          if (unitsOfCalculation === UnitsOfCalculationItem.Tb) {
+            return {
+              uiProps: {
+                max: 9_765_624,
+                postfix: 'ТБ',
+              },
+            };
+          }
+        },
+      },
+      units: {
+        accessorKey: 'cbr.storage.unitsOfCalculation',
+        defaultValue: 'gb',
+      },
+    }),
+  },
+};