@cloud-ru/uikit-product-fields-predefined 0.13.3

package/src/components/FieldPhone/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './useCountries';
+export * from './useMapCountryToOptions';

package/src/components/FieldPhone/hooks/useCountries.ts

@@ -0,0 +1,40 @@
+import { useMemo } from 'react';
+
+import { ALL_COUNTRY_CODES } from '../countries';
+import { Country, CountrySettings, FieldPhoneOptionsProps } from '../types';
+import { uniqueSet } from '../utils';
+import { useMapCountryToOptions } from './useMapCountryToOptions';
+
+export function useCountries(optionsSettings?: CountrySettings): FieldPhoneOptionsProps[] {
+  const mapCountryToOption = useMapCountryToOptions();
+
+  const filterCountries = useMemo(() => {
+    if (!optionsSettings) {
+      return () => true;
+    }
+
+    const { includedCountries, excludedCountries } = optionsSettings;
+    const uniqueKey = 'value' satisfies keyof Country;
+
+    if (includedCountries) {
+      const includedSet = uniqueSet(includedCountries, uniqueKey);
+      return (country: Country) => includedSet.has(country[uniqueKey]);
+    }
+    if (excludedCountries) {
+      const excludedSet = uniqueSet(excludedCountries, uniqueKey);
+      return (country: Country) => !excludedSet.has(country[uniqueKey]);
+    }
+    return () => true;
+  }, [optionsSettings]);
+
+  return useMemo(() => {
+    if (optionsSettings?.overriddenOptions) return optionsSettings.overriddenOptions;
+
+    return ALL_COUNTRY_CODES.reduce<FieldPhoneOptionsProps[]>((result, country) => {
+      if (filterCountries(country)) {
+        result.push(mapCountryToOption(country));
+      }
+      return result;
+    }, []);
+  }, [optionsSettings, filterCountries, mapCountryToOption]);
+}

package/src/components/FieldPhone/hooks/useMapCountryToOptions.ts

@@ -0,0 +1,25 @@
+import { useCallback } from 'react';
+
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+
+import { Country, FieldPhoneOptionsProps } from '../types';
+
+export function useMapCountryToOptions() {
+  const { t } = useLocale('FieldsPredefined');
+
+  const mapCountryToOption = useCallback(
+    ({ value: id, mask, caption, beforeContent, iso2 }: Country): FieldPhoneOptionsProps => ({
+      id,
+      mask,
+      content: {
+        option: t(`FieldPhone.${id}`),
+        caption: caption,
+      },
+      beforeContent,
+      iso2,
+    }),
+    [t],
+  );
+
+  return mapCountryToOption;
+}

package/src/components/FieldPhone/index.ts

@@ -0,0 +1,7 @@
+export * from './FieldPhone';
+
+export type { FieldPhoneOptionsProps, CountrySettings } from './types';
+
+export * from './countries';
+export * from './hooks';
+export { formatPhoneNumber, detectCountryByPhone } from './utils';

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

@@ -0,0 +1,9 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-element' as ste;
+
+.fieldPhone {
+  &[data-empty] {
+    input {
+      color: ste.$sys-neutral-text-disabled;
+    }
+  }
+}

package/src/components/FieldPhone/types.ts

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+import { useIMask } from 'react-imask';
+
+import { ALL_COUNTRY_CODES } from './countries';
+
+export type FieldPhoneOptionsProps = {
+  id: string;
+  beforeContent: ReactNode;
+  content: {
+    option: string;
+    caption: string;
+  };
+  mask: string;
+  iso2: string;
+};
+
+export type MaskOptions = Parameters<typeof useIMask>[0];
+
+export type Country = (typeof ALL_COUNTRY_CODES)[number];
+
+type OneOf<T extends object> = {
+  [K in keyof T]: { [P in K]: T[P] } & { [P in Exclude<keyof T, K>]?: never };
+}[keyof T];
+
+export type CountrySettings = OneOf<{
+  /** Список элементов выпадающего списка со странами, который будет передан в селект-компонент и переопределит список объявленных стран внутри пакета */
+  overriddenOptions: FieldPhoneOptionsProps[];
+  /** Список стран, которые должны отображаться в селекторе (будут выбраны из перечня стран, объявленных внутри пакета) */
+  includedCountries: Country[];
+  /** Список стран, которые будут исключены из списка объявленных стран внутри пакета */
+  excludedCountries: Country[];
+}>;

package/src/components/FieldPhone/utils.ts

@@ -0,0 +1,71 @@
+import { parsePhoneNumber } from 'awesome-phonenumber';
+
+import { ABKHAZIA_COUNTRY_CODE, RUSSIA_COUNTRY_CODE } from './countries';
+import { FieldPhoneOptionsProps } from './types';
+
+export const uniqueSet = <T, K extends keyof T>(arr: T[], key: K): Set<T[K]> => new Set(arr.map(obj => obj[key]));
+
+/* Приходит +79878887879/+7987****875, на основании mask возвращается +7 987-888-78-79/+7 987-***-*8-75 */
+export const formatPhoneNumber = <T extends { caption: string; mask: string }>(
+  phone: string,
+  countries: readonly T[],
+): string => {
+  const digits = phone.replace(/[^\d*]/g, '');
+
+  const country = countries.find(item => digits.startsWith(item.caption.replace('+', '')));
+
+  if (!country) {
+    return phone;
+  }
+
+  const countryCode = country.caption.replace('+', '');
+  const restNumber = digits.slice(countryCode.length);
+
+  let formatted = '';
+  let index = 0;
+  for (const char of country.mask) {
+    if (char === 'X') {
+      formatted += restNumber.charAt(index) || '';
+      index++;
+    } else {
+      formatted += char;
+    }
+  }
+
+  return `${country.caption} ${formatted}`;
+};
+
+const byId = (id: string) => (option: FieldPhoneOptionsProps) => option.id === id;
+
+export function detectCountryByPhone(text: string, options: FieldPhoneOptionsProps[]) {
+  const cleaned = text.replace(/[^\d+]/g, '');
+
+  const withPlus = cleaned.startsWith('+') ? cleaned : `+${cleaned}`;
+  const parsedNumber = parsePhoneNumber(withPlus);
+  const regionCode = parsedNumber.regionCode;
+
+  /* У Абхазии iso2 совпадает с Россией */
+  if (/^\+?7(840|940)/.test(cleaned)) {
+    let russia: FieldPhoneOptionsProps | undefined;
+
+    for (const option of options) {
+      const id = option.id;
+      const iso = option.iso2;
+
+      if (id === ABKHAZIA_COUNTRY_CODE.value) {
+        return option;
+      }
+      if (!russia && (id === RUSSIA_COUNTRY_CODE.value || iso === RUSSIA_COUNTRY_CODE.iso2)) {
+        russia = option;
+      }
+    }
+
+    return russia;
+  }
+
+  if (regionCode === RUSSIA_COUNTRY_CODE.iso2) {
+    return options.find(byId(RUSSIA_COUNTRY_CODE.value));
+  }
+
+  return options.find(opt => opt.iso2 === regionCode);
+}

package/src/components/SelectCreate/SelectCreate.tsx

@@ -0,0 +1,122 @@
+import { memo, useCallback, useMemo } from 'react';
+
+import { PlusSVG } from '@cloud-ru/uikit-product-icons';
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { AdaptiveFieldSelect } from '@cloud-ru/uikit-product-mobile-fields';
+import { AdaptiveDrawer, AdaptiveModal, DrawerProps, ModalProps } from '@cloud-ru/uikit-product-mobile-modal';
+import { extractSupportProps, WithLayoutType, WithSupportProps } from '@cloud-ru/uikit-product-utils';
+import { ButtonFunction } from '@snack-uikit/button';
+import { IconPredefinedProps } from '@snack-uikit/icon-predefined';
+import { TooltipProps, WithTooltip } from '@snack-uikit/tooltip';
+
+import { useOpen } from '../../hooks';
+import { SelectFooter } from './SelectFooter';
+import { EntityName, FieldSelectProps, LayoutProps } from './types';
+import { useSelectDataStates } from './useSelectDataStates';
+
+export type SelectCreateProps = WithSupportProps<
+  WithLayoutType &
+    LayoutProps & {
+      /** Тип объекта для создания новой опции (в единственном числе вин.падеже для кнопки Создать <entityName> и множественном числе) */
+      entityName: EntityName;
+      /** Коллбек создания новой опции, при успешном выполнении возвращает value новой опции */
+      submitHandler: () => Promise<string | void>;
+      /** Пропсы прокидываемые в селект */
+      selectProps: FieldSelectProps;
+      /** Коллбек рефетча запроса на получение списка опций в случае ошибки (при передаче dataError в selectProps). */
+      onRefetch?: VoidFunction;
+      className?: string;
+      /** Коллбек после закрытия модального окна/дровера */
+      afterClose?: VoidFunction;
+      /** Иконка сервиса */
+      entityIcon?: IconPredefinedProps['icon'];
+      /** Управление состоянием компонента в зависимости от прав пользователя (по дефолту permission = 'canCreate') */
+      permission?: 'none' | 'canRead' | 'canCreate';
+    }
+>;
+
+export const SelectCreate = memo(function SelectCreate({
+  selectProps,
+  createLayoutProps,
+  createLayoutType = 'drawer',
+  entityName,
+  submitHandler,
+  onRefetch,
+  className,
+  afterClose,
+  entityIcon,
+  permission = 'canCreate',
+  layoutType,
+  ...rest
+}: SelectCreateProps) {
+  const { t } = useLocale('FieldsPredefined');
+  const { onClose, onOpen, isOpen } = useOpen();
+  const selectDataStates = useSelectDataStates({ entityName, entityIcon, onRefetch });
+  const selectSize: FieldSelectProps['size'] = selectProps.size || 'm';
+
+  const handleClose = useCallback(() => {
+    onClose();
+    afterClose?.();
+  }, [afterClose, onClose]);
+
+  const handleCreate = useCallback(async () => {
+    const newOption = await submitHandler();
+    selectProps.onChange?.(newOption);
+    handleClose();
+  }, [handleClose, selectProps, submitHandler]);
+
+  const buttons = useMemo<Pick<ModalProps, 'approveButton' | 'cancelButton'>>(
+    () => ({
+      approveButton: { label: t('SelectCreate.buttonCreate'), onClick: handleCreate },
+      cancelButton: { label: t('SelectCreate.buttonCancel'), onClick: onClose },
+    }),
+    [t, handleCreate, onClose],
+  );
+
+  const formLayout = useMemo(() => {
+    const layoutProps = { ...createLayoutProps, ...buttons, open: isOpen, onClose: handleClose, layoutType };
+
+    return createLayoutType === 'modal' ? (
+      <AdaptiveModal {...(layoutProps as WithLayoutType<ModalProps>)} />
+    ) : (
+      <AdaptiveDrawer {...(layoutProps as WithLayoutType<DrawerProps>)} />
+    );
+  }, [createLayoutProps, buttons, isOpen, handleClose, layoutType, createLayoutType]);
+
+  const createBtnLabel = `${t('SelectCreate.buttonCreate')} ${entityName.single.toLocaleLowerCase()}`;
+
+  const tooltipProps: TooltipProps = {
+    tip: t('SelectCreate.noPermission'),
+    placement: 'top',
+  };
+
+  return (
+    <div className={className} {...extractSupportProps(rest)} data-test-id='select-create__wrapper'>
+      <WithTooltip tooltip={permission === 'none' ? tooltipProps : undefined}>
+        <AdaptiveFieldSelect
+          layoutType={layoutType}
+          placeholder={t('SelectCreate.selectPlaceholder')}
+          {...selectDataStates}
+          {...selectProps}
+          size={selectSize}
+          footer={
+            <SelectFooter onClick={onOpen} createButtonLabel={createBtnLabel} canCreate={permission === 'canCreate'} />
+          }
+          disabled={permission === 'none'}
+        />
+        <WithTooltip tooltip={permission === 'canRead' ? tooltipProps : undefined}>
+          <ButtonFunction
+            label={createBtnLabel}
+            icon={<PlusSVG />}
+            iconPosition='before'
+            onClick={onOpen}
+            size={selectSize}
+            data-test-id='select-create__create-button'
+            disabled={permission !== 'canCreate'}
+          />
+        </WithTooltip>
+      </WithTooltip>
+      {formLayout}
+    </div>
+  );
+});

package/src/components/SelectCreate/SelectFooter/SelectFooter.tsx

@@ -0,0 +1,29 @@
+import { PlusSVG } from '@cloud-ru/uikit-product-icons';
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { ButtonFunction } from '@snack-uikit/button';
+import { WithTooltip } from '@snack-uikit/tooltip';
+
+import styled from './styles.module.scss';
+type SelectFooterProps = {
+  onClick: VoidFunction;
+  createButtonLabel: string;
+  canCreate: boolean;
+};
+export function SelectFooter({ onClick, createButtonLabel, canCreate }: SelectFooterProps) {
+  const { t } = useLocale('FieldsPredefined');
+
+  return (
+    <div className={styled.footerWrapper}>
+      <WithTooltip tooltip={canCreate ? undefined : { tip: t('SelectCreate.noPermission'), placement: 'top' }}>
+        <ButtonFunction
+          label={createButtonLabel}
+          onClick={onClick}
+          icon={<PlusSVG />}
+          iconPosition='before'
+          data-test-id='select-create__create-button-footer'
+          disabled={!canCreate}
+        />
+      </WithTooltip>
+    </div>
+  );
+}

package/src/components/SelectCreate/SelectFooter/index.ts

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

package/src/components/SelectCreate/SelectFooter/styles.module.scss

@@ -0,0 +1,9 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables.scss';
+
+.footerWrapper {
+  display: flex;
+  align-items: center;
+  padding-top: 4px;
+  border-top: 1px solid styles-theme-variables.$sys-neutral-decor-disabled;
+}
+

package/src/components/SelectCreate/index.ts

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

package/src/components/SelectCreate/types.ts

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+
+import { FieldSelectMultipleProps, FieldSelectSingleProps } from '@cloud-ru/uikit-product-mobile-fields';
+import { AdaptiveDrawerProps, AdaptiveModalProps } from '@cloud-ru/uikit-product-mobile-modal';
+
+type CommonModalDrawerProps = 'open' | 'onClose' | 'approveButton' | 'cancelButton' | 'layoutType';
+type CreateLayoutModalProps = Omit<AdaptiveModalProps, CommonModalDrawerProps> & { content: ReactNode };
+type CreateLayoutDrawerProps = Omit<AdaptiveDrawerProps, CommonModalDrawerProps>;
+
+export type LayoutProps =
+  | {
+      /** По клику на кнопку создания открывать модальное окно или дровер */
+      createLayoutType: 'modal';
+      /** Пропсы передаваемые в модалку или дровер создания новой опции */
+      createLayoutProps: CreateLayoutModalProps;
+    }
+  | {
+      createLayoutType: 'drawer';
+      createLayoutProps: CreateLayoutDrawerProps;
+    };
+
+export type EntityName = {
+  plural: string;
+  single: string;
+};
+
+export type OmittedSelectProps = 'footer' | 'noResultState' | 'noDataState' | 'errorDataState';
+
+export type FieldSelectProps =
+  | (Omit<FieldSelectSingleProps, OmittedSelectProps> & {
+      selection?: 'single';
+    })
+  | (Omit<FieldSelectMultipleProps, OmittedSelectProps> & {
+      selection: 'multiple';
+    });

package/src/components/SelectCreate/useSelectDataStates.tsx

@@ -0,0 +1,53 @@
+import { useMemo } from 'react';
+
+import { SearchSVG, UpdateSVG } from '@cloud-ru/uikit-product-icons';
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { FieldSelectProps } from '@cloud-ru/uikit-product-mobile-fields';
+import { ButtonTonal } from '@snack-uikit/button';
+import { IconPredefinedProps } from '@snack-uikit/icon-predefined';
+
+import { capitalize } from '../../helpers';
+import { EntityName } from './types';
+
+type Props = {
+  onRefetch?: VoidFunction;
+  entityName: EntityName;
+  entityIcon?: IconPredefinedProps['icon'];
+};
+
+export function useSelectDataStates({ onRefetch, entityName, entityIcon }: Props) {
+  const { t } = useLocale('FieldsPredefined');
+
+  return useMemo<Pick<FieldSelectProps, 'noResultsState' | 'noDataState' | 'errorDataState'>>(
+    () => ({
+      noDataState: {
+        icon: { icon: entityIcon ?? SearchSVG },
+        description: `${capitalize(entityName.plural)} ${t('SelectCreate.noData')}`,
+      },
+      noResultsState: {
+        icon: { icon: SearchSVG },
+        description: (
+          <>
+            {capitalize(entityName.plural)} {t('SelectCreate.noResult')}.
+            <br />
+            {t('SelectCreate.changeRequest')} {entityName.single.toLocaleLowerCase()}
+          </>
+        ),
+      },
+      errorDataState: {
+        description: `${t('SelectCreate.loadError')} ${entityName.plural.toLocaleLowerCase()}`,
+        footer: onRefetch ? (
+          <ButtonTonal
+            label={t('SelectCreate.buttonRefetch')}
+            icon={<UpdateSVG />}
+            appearance='neutral'
+            onClick={onRefetch}
+          />
+        ) : (
+          <></>
+        ),
+      },
+    }),
+    [entityIcon, entityName, t, onRefetch],
+  );
+}

package/src/components/index.ts

@@ -0,0 +1,5 @@
+export * from './FieldPhone';
+export * from './SelectCreate';
+export * from './FieldAi';
+export * from './FieldChat';
+export * from './AIDisclaimer';

package/src/helperComponents/FieldSubmitButton/FieldSubmitButton.tsx

@@ -0,0 +1,42 @@
+import { ArrowUpSVG } from '@cloud-ru/uikit-product-icons';
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { ButtonFilled } from '@snack-uikit/button';
+import { Tooltip } from '@snack-uikit/tooltip';
+
+export type FieldSubmitButtonProps = {
+  active: boolean;
+  handleClick(): void;
+  size?: 'xs' | 's';
+  className?: string;
+  fullWidth?: boolean;
+  showTooltip?: boolean;
+};
+
+export function FieldSubmitButton({
+  active,
+  handleClick,
+  size = 'xs',
+  className,
+  fullWidth,
+  showTooltip = true,
+}: FieldSubmitButtonProps) {
+  const { t } = useLocale('FieldsPredefined');
+
+  if (active) {
+    return (
+      <Tooltip tip={t('FieldAi.submit.tooltip')} hoverDelayOpen={600} open={showTooltip ? undefined : false}>
+        <ButtonFilled
+          fullWidth={fullWidth}
+          icon={<ArrowUpSVG />}
+          size={size}
+          appearance='primary'
+          type='submit'
+          onClick={handleClick}
+          className={className}
+        />
+      </Tooltip>
+    );
+  }
+
+  return <ButtonFilled icon={<ArrowUpSVG />} size={size} disabled className={className} fullWidth={fullWidth} />;
+}

package/src/helperComponents/FieldSubmitButton/index.ts

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

package/src/helperComponents/TextAreaActionsFooter/TextAreaActionsFooter.tsx

@@ -0,0 +1,18 @@
+import cn from 'classnames';
+import { ReactNode } from 'react';
+
+import styles from './styles.module.scss';
+
+type TextAreaActionsFooterProps = {
+  left?: ReactNode;
+  right?: ReactNode;
+};
+
+export function TextAreaActionsFooter({ left, right }: TextAreaActionsFooterProps) {
+  return (
+    <div className={styles.actionsFooter}>
+      <div className={styles.actionsWrapper}>{left}</div>
+      <div className={cn(styles.actionsWrapper, styles.right)}>{right}</div>
+    </div>
+  );
+}

package/src/helperComponents/TextAreaActionsFooter/index.ts

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

package/src/helperComponents/TextAreaActionsFooter/styles.module.scss

@@ -0,0 +1,23 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as ste;
+
+.actionsFooter {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding-bottom: 7px;
+}
+
+.actionsWrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: ste.$dimension-050m;
+}
+
+.right {
+  justify-content: flex-end;
+  width: 100%;
+  padding-right: 8px;
+}

package/src/helpers/capitalize.ts

@@ -0,0 +1,3 @@
+export function capitalize(word: string) {
+  return word.charAt(0).toUpperCase() + word.slice(1);
+}

package/src/helpers/getSymbolsRangeFromMask.ts

@@ -0,0 +1,17 @@
+/**
+ * Возвращает кол-во символов для маски - со скобками и без
+ * @function helper
+ */
+export function getSymbolsRangeFromMask(mask: string = '') {
+  // Считаем все 'X' и цифры в строке
+  const maxNumberLength = (mask.match(/[X\d]/g) || []).length;
+
+  // Удаляем содержимое внутри скобок, включая сами скобки для подсчёта без учёта их содержимого
+  const stringWithoutBrackets = mask.replace(/\[[^\]]*\]/g, '');
+
+  // Считаем 'X' и цифры после удаления содержимого в скобках
+  const minNumberLength = (stringWithoutBrackets.match(/[X\d]/g) || []).length;
+
+  // Возвращаем оба значения: без учёта и с учётом содержимого в скобках
+  return { minNumberLength, maxNumberLength };
+}

package/src/helpers/index.ts

@@ -0,0 +1,3 @@
+export * from './capitalize';
+export * from './isTouchDevice';
+export * from './getSymbolsRangeFromMask';

package/src/helpers/isTouchDevice.ts

@@ -0,0 +1,5 @@
+import { LayoutType } from '@cloud-ru/uikit-product-utils';
+
+export function isTouchDevice(layoutType: LayoutType) {
+  return ['mobile', 'tablet'].includes(layoutType);
+}

package/src/hooks/index.ts

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

package/src/hooks/useOpen.ts

@@ -0,0 +1,22 @@
+import { useCallback, useMemo, useState } from 'react';
+
+export function useOpen(defaultState = false) {
+  const [isOpen, setIsOpen] = useState(defaultState);
+
+  const onClose = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+
+  const onOpen = useCallback(() => {
+    setIsOpen(true);
+  }, []);
+
+  return useMemo(
+    () => ({
+      isOpen,
+      onClose,
+      onOpen,
+    }),
+    [isOpen, onClose, onOpen],
+  );
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './components';
+export { getSymbolsRangeFromMask } from './helpers';
+export { setNonce } from '@cloud-ru/uikit-product-mobile-fields';