@alfalab/core-components-confirmation 13.6.2 → 13.7.0

package/moderncssm/context.js

@@ -0,0 +1,26 @@
+import { createContext } from 'react';
+import { ONE_MINUTE, ONE_DAY } from './utils.js';
+
+const mockFn = () => undefined;
+const ConfirmationContext = createContext({
+    alignContent: 'left',
+    texts: {},
+    state: 'INITIAL',
+    screen: 'INITIAL',
+    requiredCharAmount: 5,
+    countdownDuration: ONE_MINUTE,
+    timeLeft: ONE_MINUTE,
+    tempBlockDuration: ONE_DAY,
+    phone: '',
+    hideCountdownSection: false,
+    breakpoint: 1024,
+    initialScreenHintSlot: null,
+    onTempBlockFinished: mockFn,
+    onInputFinished: mockFn,
+    onChangeState: mockFn,
+    onSmsRetryClick: mockFn,
+    onChangeScreen: mockFn,
+    onFatalErrorOkButtonClick: mockFn,
+});
+
+export { ConfirmationContext };

package/moderncssm/desktop/component.desktop.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { ConfirmationProps } from "../types";
+type DesktopConfirmationProps = Omit<ConfirmationProps, 'mobile' | 'breakpoint'>;
+declare const ConfirmationDesktop: FC<DesktopConfirmationProps>;
+export { DesktopConfirmationProps, ConfirmationDesktop };

package/moderncssm/desktop/component.desktop.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { BaseConfirmation } from '../components/base-confirmation/component.js';
+
+const ConfirmationDesktop = (props) => (React.createElement(BaseConfirmation, { ...props }));
+
+export { ConfirmationDesktop };

package/moderncssm/desktop/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./component.desktop";
+export { useConfirmation, useCountdown } from "../utils";

package/moderncssm/desktop/index.js

@@ -0,0 +1,2 @@
+export { ConfirmationDesktop } from './component.desktop.js';
+export { useConfirmation, useCountdown } from '../utils.js';

package/moderncssm/index.d.ts

@@ -0,0 +1,2 @@
+export { ConfirmationResponsive as Confirmation, ResponsiveConfirmationProps as ConfirmationProps } from "./component.responsive";
+export { useConfirmation, useCountdown } from "./utils";

package/moderncssm/index.js

@@ -0,0 +1,2 @@
+export { ConfirmationResponsive as Confirmation } from './component.responsive.js';
+export { useConfirmation, useCountdown } from './utils.js';

package/moderncssm/mobile/component.mobile.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { ConfirmationProps } from "../types";
+type MobileConfirmationProps = Omit<ConfirmationProps, 'mobile'>;
+declare const ConfirmationMobile: FC<MobileConfirmationProps>;
+export { MobileConfirmationProps, ConfirmationMobile };

package/moderncssm/mobile/component.mobile.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import cn from 'classnames';
+import { BaseConfirmation } from '../components/base-confirmation/component.js';
+import styles from './mobile.module.css';
+
+const ConfirmationMobile = ({ className, ...resProps }) => (React.createElement(BaseConfirmation, { mobile: true, className: cn(className, styles.container), ...resProps }));
+
+export { ConfirmationMobile };

package/moderncssm/mobile/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./component.mobile";
+export { useConfirmation, useCountdown } from "../utils";

package/moderncssm/mobile/index.js

@@ -0,0 +1,2 @@
+export { ConfirmationMobile } from './component.mobile.js';
+export { useConfirmation, useCountdown } from '../utils.js';

package/moderncssm/mobile/mobile.module.css

@@ -0,0 +1,3 @@
+.container {
+    max-width: 288px;
+}

package/moderncssm/shared/index.d.ts

@@ -0,0 +1,4 @@
+export * from "../components/index";
+export * from "../context";
+export * from "../types";
+export { formatMsAsMinutes, ONE_MINUTE, ONE_DAY } from "../utils";

package/moderncssm/shared/index.js

@@ -0,0 +1,8 @@
+export { Initial } from '../components/screens/initial/component.js';
+export { Hint } from '../components/screens/hint/component.js';
+export { FatalError } from '../components/screens/fatal-error/component.js';
+export { TempBlock } from '../components/screens/temp-block/component.js';
+export { CountdownLoader } from '../components/countdown-loader/component.js';
+export { ConfirmationContext } from '../context.js';
+export { defaultTexts } from '../types.js';
+export { ONE_DAY, ONE_MINUTE, formatMsAsMinutes } from '../utils.js';

package/moderncssm/types.d.ts

@@ -0,0 +1,167 @@
+import { ComponentType, ReactNode } from 'react';
+type ConfirmationProps = {
+    /**
+     * Экран компонента
+     */
+    screen: ConfirmationScreen | string;
+    /**
+     * Состояние компонента
+     */
+    state: ConfirmationState | string;
+    /**
+     * Мобильная версия компонента для экрана
+     */
+    mobile?: boolean;
+    /**
+     * Позиционирование контента
+     */
+    alignContent?: 'left' | 'center';
+    /**
+     * Объект с текстами
+     */
+    texts?: ConfirmationTexts;
+    /**
+     * Количество символов, которое можно ввести в поле ввода подписания до того, как произойдет автоотправка
+     */
+    requiredCharAmount?: number;
+    /**
+     * Длительность обратного отсчета на кнопке повторного запроса сообщения, в милисекундах
+     */
+    countdownDuration?: number;
+    /**
+     * Продолжительность блокировки формы (ms)
+     */
+    tempBlockDuration?: number;
+    /**
+     * Номер телефона, на который отправлен код
+     */
+    phone?: string;
+    /**
+     * Не осталось попыток ввода кода
+     */
+    blockSmsRetry?: boolean;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Сss класс для стилизации общей обёртки
+     */
+    className?: string;
+    /**
+     * Флаг - нужно ли очищать код при возникновении ошибки
+     */
+    clearCodeOnError?: boolean;
+    /**
+     * Функция обновления состояния компонента
+     */
+    onChangeState: (state: ConfirmationState | string) => void;
+    /**
+     * Функция обновления состояния компонента
+     */
+    onChangeScreen: (state: ConfirmationScreen | string) => void;
+    /**
+     * Обработчик события завершения ввода кода подписания
+     */
+    onInputFinished: (code: string) => void;
+    /**
+     * Обработчик события нажатия на кнопку "Запросить код"
+     */
+    onSmsRetryClick: () => void;
+    /**
+     * Клик по кнопке "Понятно" на экране фатальной ошибки
+     */
+    onFatalErrorOkButtonClick?: () => void;
+    /**
+     * Временная блокировка формы закончилась
+     */
+    onTempBlockFinished?: () => void;
+    /**
+     * Возввращает объект, где ключ - название экрана (screen), значение - компонент для экрана
+     */
+    getScreensMap?: (defaulScreensMap: ScreensMap) => ScreensMap;
+    /**
+     * Дочерние элементы.
+     */
+    children?: ReactNode;
+    /**
+     * Скрыть секцию с повторной отправкой кода
+     * @default false
+     */
+    hideCountdownSection?: boolean;
+    /**
+     *  Слот для контента с подсказкой на главном экране
+     */
+    initialScreenHintSlot?: ReactNode;
+    /**
+     * Контрольная точка для кнопки, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+    /**
+     * Продолжительность отображения ошибки
+     * @default 1300
+     */
+    errorVisibleDuration?: number;
+};
+type TConfirmationContext = Required<Pick<ConfirmationProps, 'alignContent' | 'texts' | 'state' | 'screen' | 'requiredCharAmount' | 'onInputFinished' | 'countdownDuration' | 'onChangeState' | 'onSmsRetryClick' | 'onChangeScreen' | 'onFatalErrorOkButtonClick' | 'tempBlockDuration' | 'hideCountdownSection'>> & Pick<ConfirmationProps, 'phone' | 'blockSmsRetry' | 'onTempBlockFinished' | 'clearCodeOnError' | 'initialScreenHintSlot' | 'errorVisibleDuration'> & {
+    timeLeft: number;
+} & {
+    /**
+     * Контрольная точка для кнопки, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+};
+type ConfirmationTexts = {
+    /**
+     * Экран INITIAL
+     */
+    title?: ReactNode;
+    codeError?: string;
+    codeChecking?: string;
+    codeSending?: string;
+    codeSended?: string;
+    buttonRetry?: string;
+    linkToHint?: string;
+    noAttemptsLeft?: string;
+    countdown?: string;
+    /**
+     * Экран HINT
+     */
+    hintButton?: string;
+    /**
+     * Экран FATAL_ERROR
+     */
+    fatalErrorTitle?: ReactNode;
+    fatalErrorDescription?: ReactNode;
+    fatalErrorButton?: string;
+    /**
+     * Экран TEMP_BLOCK
+     */
+    tempBlockTitle?: ReactNode;
+    tempBlockDescription?: ReactNode;
+};
+type ConfirmationScreen = 'INITIAL' | 'HINT' | 'FATAL_ERROR' | 'TEMP_BLOCK';
+type ConfirmationState = 'INITIAL' | 'CODE_CHECKING' | 'CODE_SENDING' | 'CODE_ERROR';
+type ScreensMap = {
+    [key: string]: ComponentType;
+};
+declare const defaultTexts: {
+    title: string;
+    codeError: string;
+    codeChecking: string;
+    codeSending: string;
+    buttonRetry: string;
+    linkToHint: string;
+    hintButton: string;
+    noAttemptsLeft: string;
+    fatalErrorTitle: string;
+    fatalErrorDescription: string;
+    fatalErrorButton: string;
+    tempBlockTitle: string;
+    tempBlockDescription: string;
+    codeSended: string;
+    countdown: string;
+};
+export { ConfirmationProps, TConfirmationContext, ConfirmationTexts, ConfirmationScreen, ConfirmationState, ScreensMap, defaultTexts };

package/moderncssm/types.js

@@ -0,0 +1,19 @@
+const defaultTexts = {
+    title: 'Введите код из\xa0сообщения',
+    codeError: 'Код введён неверно',
+    codeChecking: '',
+    codeSending: '',
+    buttonRetry: 'Запросить код повторно',
+    linkToHint: 'Не\xa0приходит сообщение?',
+    hintButton: 'Вернуться к\xa0вводу кода',
+    noAttemptsLeft: 'Не\xa0осталось попыток запроса кода',
+    fatalErrorTitle: 'Ввести код больше нельзя',
+    fatalErrorDescription: 'Вы\xa0ввели код неверно более 5\xa0раз. В\xa0целях безопасности мы\xa0ограничили дальнейший ввод.',
+    fatalErrorButton: 'Понятно',
+    tempBlockTitle: 'Превышено количество попыток запроса кода',
+    tempBlockDescription: 'Повторное подтверждение кодом будет возможно через 24\xa0часа',
+    codeSended: 'Код выслан',
+    countdown: 'Запросить повторно можно через',
+};
+
+export { defaultTexts };

package/moderncssm/utils.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import { ConfirmationProps } from "./types";
+/**
+ * Форматирование миллисекунд в hh:mm:ss.
+ *
+ * @param {Number} ms миллисекунды
+ * @returns {String} время в формате mm:ss
+ */
+declare function formatMsAsMinutes(ms: number): string;
+type UseCountdown = (countdownDuration: number, tick?: number) => [number, () => void, () => void];
+/**
+ * Возвращает время, которое осталось до истечения таймера в ms
+ */
+declare const useCountdown: UseCountdown;
+declare const ONE_DAY: number;
+declare const ONE_MINUTE: number;
+type UseConfirmationParams = {
+    state?: ConfirmationProps['state'];
+    screen?: ConfirmationProps['screen'];
+    blockSmsRetry?: ConfirmationProps['blockSmsRetry'];
+};
+declare const useConfirmation: ({ state, screen, blockSmsRetry }?: UseConfirmationParams) => {
+    confirmationState: string;
+    confirmationScreen: string;
+    confirmationBlockSmsRetry: boolean;
+    setConfirmationState: import("react").Dispatch<import("react").SetStateAction<string>>;
+    setConfirmationScreen: import("react").Dispatch<import("react").SetStateAction<string>>;
+    setConfirmationBlockSmsRetry: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+};
+export { formatMsAsMinutes, useCountdown, ONE_DAY, ONE_MINUTE, useConfirmation };

package/moderncssm/utils.js

@@ -0,0 +1,72 @@
+import { useRef, useState, useCallback, useEffect } from 'react';
+
+/**
+ * Форматирование миллисекунд в hh:mm:ss.
+ *
+ * @param {Number} ms миллисекунды
+ * @returns {String} время в формате mm:ss
+ */
+function formatMsAsMinutes(ms) {
+    const totalSeconds = Math.ceil(ms / 1000);
+    const totalMinutes = Math.floor(totalSeconds / 60);
+    const totalHours = Math.floor(totalMinutes / 60);
+    const seconds = totalSeconds % 60;
+    const paddedSeconds = `00${seconds}`.slice(-2);
+    if (totalHours > 0) {
+        const minutes = totalMinutes % 60;
+        const paddedMinutes = `00${minutes}`.slice(-2);
+        const paddedHours = `00${totalHours}`.slice(-2);
+        return `${paddedHours}:${paddedMinutes}:${paddedSeconds}`;
+    }
+    const paddedMinutes = `00${totalMinutes}`.slice(-2);
+    return `${paddedMinutes}:${paddedSeconds}`;
+}
+/**
+ * Возвращает время, которое осталось до истечения таймера в ms
+ */
+const useCountdown = (countdownDuration, tick = 1000) => {
+    const timerId = useRef(0);
+    const start = useRef(0);
+    const [timePassed, setTimePassed] = useState(0);
+    const stopTimer = useCallback(() => {
+        window.clearInterval(timerId.current);
+    }, []);
+    const updateProgress = useCallback(() => {
+        const passed = Date.now() - start.current;
+        if (passed >= countdownDuration) {
+            stopTimer();
+            setTimePassed(countdownDuration);
+        }
+        else {
+            setTimePassed(passed);
+        }
+    }, [countdownDuration, stopTimer]);
+    const startTimer = useCallback(() => {
+        stopTimer();
+        start.current = Date.now();
+        updateProgress();
+        timerId.current = window.setInterval(updateProgress, tick);
+    }, [stopTimer, updateProgress, tick]);
+    const timeLeft = countdownDuration - timePassed;
+    useEffect(() => () => {
+        stopTimer();
+    }, [stopTimer]);
+    return [timeLeft, startTimer, stopTimer];
+};
+const ONE_DAY = 24 * 60 * 60 * 1000;
+const ONE_MINUTE = 60 * 1000;
+const useConfirmation = ({ state, screen, blockSmsRetry } = {}) => {
+    const [confirmationState, setConfirmationState] = useState(state ?? 'INITIAL');
+    const [confirmationScreen, setConfirmationScreen] = useState(screen ?? 'INITIAL');
+    const [confirmationBlockSmsRetry, setConfirmationBlockSmsRetry] = useState(blockSmsRetry ?? false);
+    return {
+        confirmationState,
+        confirmationScreen,
+        confirmationBlockSmsRetry,
+        setConfirmationState,
+        setConfirmationScreen,
+        setConfirmationBlockSmsRetry,
+    };
+};
+
+export { ONE_DAY, ONE_MINUTE, formatMsAsMinutes, useConfirmation, useCountdown };

package/moderncssm/vars.css

@@ -0,0 +1,11 @@
+/* */
+
+:root {
+    /* desktop */
+
+    /* mobile */
+
+    /* text */
+
+    /* header */
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-confirmation",
-    "version": "13.6.2",
+    "version": "13.7.0",
     "description": "Sms confirmation component",
     "keywords": [],
     "license": "MIT",
@@ -11,11 +11,11 @@
         "directory": "dist"
     },
     "dependencies": {
-        "@alfalab/core-components-button": "^11.5.4",
-        "@alfalab/core-components-code-input": "^3.4.0",
-        "@alfalab/core-components-link": "^5.2.2",
-        "@alfalab/core-components-spinner": "^3.4.0",
-        "@alfalab/core-components-typography": "^4.8.0",
+        "@alfalab/core-components-button": "^11.6.0",
+        "@alfalab/core-components-code-input": "^3.5.0",
+        "@alfalab/core-components-link": "^5.3.0",
+        "@alfalab/core-components-spinner": "^3.5.0",
+        "@alfalab/core-components-typography": "^4.10.0",
         "@alfalab/core-components-mq": "^4.3.0",
         "@alfalab/hooks": "^1.13.0",
         "classnames": "^2.3.1",
@@ -24,6 +24,6 @@
     "peerDependencies": {
         "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
-    "themesVersion": "13.0.1",
-    "varsVersion": "9.11.1"
+    "themesVersion": "13.1.0",
+    "varsVersion": "9.12.0"
 }

package/src/components/base-confirmation/index.module.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 
 .component {
     width: 100%;

package/src/components/countdown-loader/index.module.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 
 .circle {
     fill: transparent;

package/src/components/header/index.module.css

@@ -1,7 +1,7 @@
 @import '../../vars.css';
 
 .header.header {
-    margin-bottom: var(--gap-xl);
+    margin-bottom: var(--gap-24);
 }
 
 .typography.typography.typography {

package/src/components/screens/fatal-error/index.module.css

@@ -19,5 +19,5 @@
 }
 
 .button.button {
-    margin-top: var(--gap-2xl);
+    margin-top: var(--gap-32);
 }

package/src/components/screens/hint/index.module.css

@@ -15,7 +15,7 @@
 }
 
 .text.text {
-    margin-bottom: var(--gap-xl);
+    margin-bottom: var(--gap-24);
 }
 
 .typographyTheme.typographyTheme {
@@ -25,11 +25,11 @@
 .phonesWrap {
     display: flex;
     flex-direction: column;
-    margin-bottom: var(--gap-xl);
+    margin-bottom: var(--gap-24);
 }
 
 .phoneWrap {
-    margin-bottom: var(--gap-xs);
+    margin-bottom: var(--gap-8);
 
     &:last-child {
         margin-bottom: 0;
@@ -41,7 +41,7 @@
 }
 
 .hintButton {
-    margin-top: var(--gap-2xl);
+    margin-top: var(--gap-32);
 }
 
 .phoneContentMobile {

package/src/components/screens/initial/index.module.css

@@ -11,11 +11,11 @@
 
 .phone.phone {
     color: var(--color-light-text-primary);
-    margin-bottom: var(--gap-2xl);
+    margin-bottom: var(--gap-32);
 }
 
 .compact {
-    margin-bottom: var(--gap-xl);
+    margin-bottom: var(--gap-24);
 }
 
 .loaderWrap {
@@ -37,7 +37,7 @@
 }
 
 .codeInput {
-    margin-bottom: var(--gap-s);
+    margin-bottom: var(--gap-12);
 }
 
 .smsBtn.smsBtn {
@@ -50,20 +50,20 @@
 
 .countdownContainer.countdownContainer {
     color: var(--color-light-text-secondary);
-    margin-bottom: var(--gap-xl);
+    margin-bottom: var(--gap-24);
 }
 
 .countdownMobile.countdownMobile {
-    margin-bottom: var(--gap-l);
+    margin-bottom: var(--gap-20);
 }
 .countdownLoaderMobile.countdownLoaderMobile {
-    margin-bottom: var(--gap-m);
+    margin-bottom: var(--gap-16);
 }
 
 .getCodeButton {
     position: relative;
-    top: var(--gap-2xs-neg);
-    margin-bottom: var(--gap-m);
+    top: var(--gap-4-neg);
+    margin-bottom: var(--gap-16);
 }
 
 .getCodeButtonMobile {

package/src/components/screens/temp-block/index.module.css

@@ -15,7 +15,7 @@
 }
 
 .description.description {
-    margin-bottom: var(--gap-xs);
+    margin-bottom: var(--gap-8);
 }
 
 .countdownWrap {
@@ -24,5 +24,5 @@
 }
 
 .loader {
-    margin-right: var(--gap-xs);
+    margin-right: var(--gap-8);
 }

package/src/vars.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 
 :root {
     /* desktop */