@alfalab/core-components 23.13.0 → 24.0.0

package/confirmation/modern/components/screens/initial/index.css

@@ -0,0 +1,101 @@
+/* hash: 135il */
+:root {
+    --color-light-text-primary: #0b1f35;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-2xs: 4px;
+    --gap-m: 16px;
+    --gap-xl: 24px;
+    --gap-2xl: 32px;
+    --gap-2xs-neg: -4px;
+}
+:root {
+    --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
+        sans-serif;
+}
+:root {
+    /* title */
+    --confirmation-title-font-size: 22px;
+    --confirmation-title-line-height: 26px;
+    --confirmation-title-font-weight: 700;
+    --confirmation-title-font-family: var(--font-family-system);
+    --confirmation-title-color: var(--color-light-text-primary);
+    --confirmation-title-font-feature-settings: normal;
+
+    /* text */
+
+    /* error */
+
+    /* input */
+}
+.confirmation__component_ntnxq {
+    display: flex;
+    flex-direction: column;
+}
+.confirmation__header_ntnxq {
+    margin: 0;
+    margin-bottom: var(--gap-xl);
+    font-size: var(--confirmation-title-font-size);
+    line-height: var(--confirmation-title-line-height);
+    font-weight: var(--confirmation-title-font-weight);
+    font-family: var(--confirmation-title-font-family);
+    color: var(--confirmation-title-color);
+    font-feature-settings: var(--confirmation-title-font-feature-settings);
+}
+.confirmation__phone_ntnxq {
+    margin-bottom: var(--gap-2xl);
+    color: var(--color-light-text-primary);
+}
+.confirmation__inputContainer_ntnxq {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: var(--gap-2xl);
+}
+.confirmation__compact_ntnxq {
+    margin-bottom: var(--gap-xl);
+}
+.confirmation__loaderWrap_ntnxq {
+    display: flex;
+    align-items: center;
+}
+.confirmation__center_ntnxq {
+    align-items: center;
+    text-align: center
+}
+.confirmation__center_ntnxq .confirmation__codeInput_ntnxq,
+    .confirmation__center_ntnxq .confirmation__loaderWrap_ntnxq {
+        justify-content: center;
+    }
+.confirmation__center_ntnxq input {
+        margin: 0 var(--gap-2xs);
+    }
+.confirmation__smsComeLink_ntnxq {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 400;
+}
+.confirmation__countdownContainer_ntnxq {
+    margin-bottom: var(--gap-xl);
+}
+.confirmation__getCodeButton_ntnxq {
+    position: relative;
+    top: var(--gap-2xs-neg);
+    margin-bottom: var(--gap-m);
+}
+.confirmation__countdown_ntnxq {
+    display: flex;
+}
+.confirmation__countdownTimer_ntnxq {
+    display: flex;
+    justify-content: flex-start;
+    min-width: 45px;
+    margin-left: var(--gap-2xs);
+}

package/confirmation/modern/components/screens/initial/index.d.ts

@@ -0,0 +1 @@
+export * from "./component";

package/confirmation/modern/components/screens/initial/index.js

@@ -0,0 +1,11 @@
+import 'react';
+import 'classnames';
+import '@alfalab/hooks';
+import '../../../utils.js';
+import '../../../context.js';
+import '../../../../../code-input/modern';
+import '../../../../../link/modern';
+import '../../../../../loader/modern';
+import '../../../../../button/modern';
+import '../../../countdown-section-91f055c8.js';
+export { Initial } from './component.js';

package/confirmation/modern/components/screens/temp-block/component.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const TempBlock: () => JSX.Element;
+export { TempBlock };

package/confirmation/modern/components/screens/temp-block/component.js

@@ -0,0 +1,28 @@
+import React, { useContext, useEffect, Fragment } from 'react';
+import { useCountdown, formatMsAsMinutes } from '../../../utils.js';
+import { ConfirmationContext } from '../../../context.js';
+import { CountdownLoader } from '../../countdown-loader/component.js';
+
+var styles = {"header":"confirmation__header_1qqfu","description":"confirmation__description_1qqfu","countdownWrap":"confirmation__countdownWrap_1qqfu","loader":"confirmation__loader_1qqfu"};
+require('./index.css');
+
+const TempBlock = () => {
+    const { texts, tempBlockDuration, onChangeScreen, onTempBlockFinished } = useContext(ConfirmationContext);
+    const [timeLeft, startTimer] = useCountdown(tempBlockDuration);
+    useEffect(() => {
+        startTimer();
+    }, [startTimer]);
+    useEffect(() => {
+        if (timeLeft === 0 && onTempBlockFinished) {
+            onTempBlockFinished();
+        }
+    }, [timeLeft, onChangeScreen, onTempBlockFinished]);
+    return (React.createElement(Fragment, null,
+        React.createElement("h3", { className: styles.header }, texts.tempBlockTitle),
+        React.createElement("div", { className: styles.description }, texts.tempBlockDescription),
+        React.createElement("div", { className: styles.countdownWrap },
+            React.createElement(CountdownLoader, { progress: 1 - timeLeft / tempBlockDuration, className: styles.loader }),
+            formatMsAsMinutes(timeLeft))));
+};
+
+export { TempBlock };

package/confirmation/{components/overlimit → modern/components/screens/temp-block}/index.css

@@ -1,7 +1,4 @@
-/* hash: 12an0 */
-:root {
-    --color-static-status-red: #d91d0b;
-}
+/* hash: 1bdwf */
 :root {
     --color-light-text-primary: #0b1f35;
     --color-light-text-secondary: #546272;
@@ -15,11 +12,9 @@
     /* Hard up */
 }
 :root {
-    --gap-2xs: 4px;
     --gap-xs: 8px;
     --gap-xl: 24px;
     --gap-2xl: 32px;
-    --gap-3xl: 40px;
 }
 :root {
     --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
@@ -45,46 +40,29 @@
 
     /* input */
 }
-.confirmation__component_1iqq7 {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-.confirmation__title_1iqq7 {
+.confirmation__header_1qqfu {
+    margin: 0;
+    margin-bottom: var(--gap-xl);
     font-size: var(--confirmation-title-font-size);
     line-height: var(--confirmation-title-line-height);
     font-weight: var(--confirmation-title-font-weight);
     font-family: var(--confirmation-title-font-family);
     color: var(--confirmation-title-color);
     font-feature-settings: var(--confirmation-title-font-feature-settings);
-
-    margin-bottom: var(--gap-3xl);
 }
-.confirmation__description_1iqq7 {
+.confirmation__description_1qqfu {
     font-size: var(--confirmation-text-font-size);
     line-height: var(--confirmation-text-line-height);
     font-weight: var(--confirmation-text-font-weight);
     font-family: var(--confirmation-text-font-family);
     color: var(--confirmation-text-color);
+
+    margin-bottom: var(--gap-2xl);
 }
-.confirmation__countdown_1iqq7 {
+.confirmation__countdownWrap_1qqfu {
     display: flex;
     align-items: center;
-    justify-content: center;
-    margin-top: var(--gap-2xs);
 }
-.confirmation__loader_1iqq7 {
+.confirmation__loader_1qqfu {
     margin-right: var(--gap-xs);
 }
-.confirmation__timePassed_1iqq7 {
-    display: flex;
-    min-width: 3em;
-}
-.confirmation__getCodeButton_1iqq7 {
-    margin-top: var(--gap-2xl);
-}
-.confirmation__alertIcon_1iqq7 {
-    text-align: center;
-    margin-bottom: var(--gap-xl);
-    color: var(--color-static-status-red);
-}

package/confirmation/modern/components/screens/temp-block/index.d.ts

@@ -0,0 +1 @@
+export * from "./component";

package/confirmation/modern/components/screens/temp-block/index.js

@@ -0,0 +1,5 @@
+import 'react';
+import '../../../utils.js';
+import '../../../context.js';
+import '../../countdown-loader/component.js';
+export { TempBlock } from './component.js';

package/confirmation/modern/context.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { TConfirmationContext } from "./types";
+declare const ConfirmationContext: import("react").Context<TConfirmationContext>;
+export { ConfirmationContext };

package/confirmation/modern/context.js

@@ -0,0 +1,23 @@
+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: '',
+    onTempBlockFinished: mockFn,
+    onInputFinished: mockFn,
+    onChangeState: mockFn,
+    onSmsRetryClick: mockFn,
+    onChangeScreen: mockFn,
+    onFatalErrorOkButtonClick: mockFn,
+});
+
+export { ConfirmationContext };

package/confirmation/modern/countdown-section-91f055c8.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+type CountdownSectionProps = {
+    codeSendHintVisible: boolean;
+    timePassed: boolean;
+    processing: boolean;
+    handleSmsRetryClick: () => void;
+};
+declare const CountdownSection: FC<CountdownSectionProps>;
+export { CountdownSection };

package/confirmation/modern/countdown-section-91f055c8.js

@@ -0,0 +1,32 @@
+import React, { useContext } from 'react';
+import cn from 'classnames';
+import { formatMsAsMinutes } from './utils.js';
+import { ConfirmationContext } from './context.js';
+import { Loader } from '../../loader/modern';
+import { Button } from '../../button/modern';
+
+var styles = {"component":"confirmation__component_ntnxq","header":"confirmation__header_ntnxq","phone":"confirmation__phone_ntnxq","inputContainer":"confirmation__inputContainer_ntnxq","compact":"confirmation__compact_ntnxq","loaderWrap":"confirmation__loaderWrap_ntnxq","center":"confirmation__center_ntnxq","codeInput":"confirmation__codeInput_ntnxq","smsComeLink":"confirmation__smsComeLink_ntnxq","countdownContainer":"confirmation__countdownContainer_ntnxq","getCodeButton":"confirmation__getCodeButton_ntnxq","countdown":"confirmation__countdown_ntnxq","countdownTimer":"confirmation__countdownTimer_ntnxq"};
+require('./components/screens/initial/index.css');
+
+const CountdownSection = ({ codeSendHintVisible, timePassed, processing, handleSmsRetryClick, }) => {
+    const { state, texts, timeLeft, blockSmsRetry } = useContext(ConfirmationContext);
+    if (codeSendHintVisible) {
+        return React.createElement("div", { className: styles.countdownContainer }, texts.codeSended);
+    }
+    if (processing) {
+        return (React.createElement("div", { className: cn(styles.loaderWrap, styles.countdownContainer) },
+            React.createElement(Loader, null),
+            React.createElement("span", { className: styles.loaderText }, state === 'CODE_CHECKING' ? texts.codeChecking : texts.codeSending)));
+    }
+    if (blockSmsRetry) {
+        return React.createElement("div", { className: styles.countdownContainer }, texts.noAttemptsLeft);
+    }
+    if (timePassed) {
+        return (React.createElement(Button, { size: 'xxs', view: 'secondary', onClick: handleSmsRetryClick, className: styles.getCodeButton }, texts.buttonRetry));
+    }
+    return (React.createElement("div", { className: cn(styles.countdown, styles.countdownContainer) },
+        texts.countdown,
+        React.createElement("div", { className: styles.countdownTimer }, formatMsAsMinutes(timeLeft))));
+};
+
+export { CountdownSection as C, styles as s };

package/confirmation/modern/index.css

@@ -1,6 +1,5 @@
-/* hash: 14smn */
+/* hash: dh3od */
 :root {
-    --color-light-text-primary: #0b1f35;
     --color-light-text-secondary: #546272;
 }
 :root {
@@ -11,24 +10,12 @@
 
     /* Hard up */
 }
-:root {
-    --gap-xs: 8px;
-    --gap-xl: 24px;
-    --gap-2xl: 32px;
-    --gap-4xl: 48px;
-}
 :root {
     --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
         sans-serif;
 }
 :root {
     /* title */
-    --confirmation-title-font-size: 22px;
-    --confirmation-title-line-height: 26px;
-    --confirmation-title-font-weight: 700;
-    --confirmation-title-font-family: var(--font-family-system);
-    --confirmation-title-color: var(--color-light-text-primary);
-    --confirmation-title-font-feature-settings: normal;
 
     /* text */
     --confirmation-text-font-size: 16px;
@@ -41,54 +28,7 @@
 
     /* input */
 }
-.confirmation__component_4crub {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    font-family: var(--confirmation-font-family);
-}
-.confirmation__error_4crub {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-}
-.confirmation__errorHeader_4crub {
-    font-size: var(--confirmation-title-font-size);
-    line-height: var(--confirmation-title-line-height);
-    font-weight: var(--confirmation-title-font-weight);
-    font-family: var(--confirmation-title-font-family);
-    color: var(--confirmation-title-color);
-    font-feature-settings: var(--confirmation-title-font-feature-settings);
-
-    margin-bottom: var(--gap-2xl);
-    color: var(--confirmation-title-color);
-}
-.confirmation__errorText_4crub {
-    font-size: var(--confirmation-text-font-size);
-    line-height: var(--confirmation-text-line-height);
-    font-weight: var(--confirmation-text-font-weight);
-    font-family: var(--confirmation-text-font-family);
-    color: var(--confirmation-text-color);
-
-    margin-bottom: var(--gap-2xl);
-    color: var(--confirmation-text-color);
-}
-.confirmation__phoneHintWrap_4crub {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-}
-.confirmation__phoneHintText_4crub {
-    font-size: var(--confirmation-text-font-size);
-    line-height: var(--confirmation-text-line-height);
-    font-weight: var(--confirmation-text-font-weight);
-    font-family: var(--confirmation-text-font-family);
-    color: var(--confirmation-text-color);
-
-    margin-bottom: var(--gap-xl);
-    color: var(--confirmation-text-color);
-}
-.confirmation__phonesWrap_4crub {
+.confirmation__component_1lhb7 {
     font-size: var(--confirmation-text-font-size);
     line-height: var(--confirmation-text-line-height);
     font-weight: var(--confirmation-text-font-weight);
@@ -97,23 +37,11 @@
 
     display: flex;
     flex-direction: column;
-    margin-bottom: var(--gap-4xl);
-}
-.confirmation__phoneWrap_4crub {
-    margin-bottom: var(--gap-xs)
-}
-.confirmation__phoneWrap_4crub:last-child {
-        margin-bottom: 0;
-    }
-.confirmation__phoneDescription_4crub {
-    color: var(--confirmation-text-color);
+    width: 100%;
+    max-width: 400px;
+    margin: 0 auto;
 }
-.confirmation__component_4crub.confirmation__center_4crub {
+.confirmation__center_1lhb7 {
+    align-items: center;
     text-align: center;
 }
-.confirmation__center_4crub .confirmation__phoneHintWrap_4crub {
-        align-items: center;
-    }
-.confirmation__center_4crub .confirmation__error_4crub {
-        align-items: center;
-    }

package/confirmation/modern/index.d.ts

@@ -1,2 +1,5 @@
 export * from "./component";
 export * from "./components/index";
+export * from "./context";
+export * from "./types";
+export * from "./utils";

package/confirmation/modern/index.js

@@ -1,15 +1,17 @@
 import 'react';
 import 'classnames';
-import '@alfalab/utils';
 import '@alfalab/hooks';
-import '@alfalab/icons-glyph';
-import '../../button/modern';
+export { ONE_DAY, ONE_MINUTE, formatMsAsMinutes, useConfirmation, useCountdown } from './utils.js';
+export { ConfirmationContext } from './context.js';
+export { defaultTexts } from './types.js';
+import '../../code-input/modern';
 import '../../link/modern';
-export { CountdownLoader } from './components/countdown-loader/component.js';
-export { Countdown, formatMsAsMinutes } from './components/countdown/component.js';
 import '../../loader/modern';
-import './components/code-input/utils.js';
-import './components/code-input/component.js';
-export { SignConfirmation } from './components/sign-confirmation/component.js';
-export { Overlimit } from './components/overlimit/component.js';
+import '../../button/modern';
+import './countdown-section-91f055c8.js';
+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 { CountdownLoader } from './components/countdown-loader/component.js';
+export { TempBlock } from './components/screens/temp-block/component.js';
 export { Confirmation } from './component.js';

package/confirmation/modern/types.d.ts

@@ -0,0 +1,130 @@
+import { ComponentType, ReactNode } from 'react';
+type ConfirmationProps = {
+    /**
+     * Экран компонента
+     */
+    screen: ConfirmationScreen | string;
+    /**
+     * Состояние компонента
+     */
+    state: ConfirmationState | string;
+    /**
+     * Позиционирование контента
+     */
+    alignContent?: 'left' | 'center';
+    /**
+     * Объект с текстами
+     */
+    texts?: ConfirmationTexts;
+    /**
+     * Количество символов, которое можно ввести в поле ввода подписания до того, как произойдет автоотправка
+     */
+    requiredCharAmount?: number;
+    /**
+     * Длительность обратного отсчета на кнопке повторного запроса сообщения, в милисекундах
+     */
+    countdownDuration?: number;
+    /**
+     * Продолжительность блокировки формы (ms)
+     */
+    tempBlockDuration?: number;
+    /**
+     * Номер телефона, на который отправлен код
+     */
+    phone?: string;
+    /**
+     * Не осталось попыток ввода кода
+     */
+    blockSmsRetry?: boolean;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Сss класс для стилизации общей обёртки
+     */
+    className?: string;
+    /**
+     * Функция обновления состояния компонента
+     */
+    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;
+};
+type TConfirmationContext = Required<Pick<ConfirmationProps, 'alignContent' | 'texts' | 'state' | 'screen' | 'requiredCharAmount' | 'onInputFinished' | 'countdownDuration' | 'onChangeState' | 'onSmsRetryClick' | 'onChangeScreen' | 'onFatalErrorOkButtonClick' | 'tempBlockDuration'>> & Pick<ConfirmationProps, 'phone' | 'blockSmsRetry' | 'onTempBlockFinished'> & {
+    timeLeft: 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/confirmation/modern/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/confirmation/modern/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 };