@alfalab/core-components-confirmation 12.5.2 → 13.0.0

package/modern/desktop.js

@@ -1,18 +1,20 @@
 export { ConfirmationDesktop } from './component.desktop.js';
+export { useConfirmation, useCountdown } from './utils.js';
 import 'react';
 import './components/base-confirmation/component.js';
 import 'classnames';
 import '@alfalab/hooks';
 import './context.js';
-import './utils.js';
 import './types.js';
 import './components/screens/initial/component.js';
-import '@alfalab/core-components-button/modern';
-import '@alfalab/core-components-code-input/modern';
+import '@alfalab/core-components-button/modern/mobile';
+import '@alfalab/core-components-code-input/modern/desktop';
+import '@alfalab/core-components-code-input/modern/mobile';
 import '@alfalab/core-components-link/modern';
 import '@alfalab/core-components-typography/modern';
 import './components/header/component.js';
-import './countdown-section-a28d693c.js';
+import './countdown-section-dd4e5fe3.js';
+import '@alfalab/core-components-button/modern';
 import '@alfalab/core-components-loader/modern';
 import './components/screens/hint/component.js';
 import './components/screens/fatal-error/component.js';

package/modern/index.d.ts

@@ -1,6 +1,2 @@
-export { ConfirmationDesktop as Confirmation } from "./desktop";
-export * from "./responsive";
-export * from "./components/index";
-export * from "./context";
-export * from "./types";
-export * from "./utils";
+export { ConfirmationResponsive as Confirmation, ResponsiveConfirmationProps as ConfirmationProps } from "./component.responsive";
+export { useConfirmation, useCountdown } from "./utils";

package/modern/index.js

@@ -1,22 +1,25 @@
-export { ConfirmationDesktop as Confirmation } from './component.desktop.js';
-export { ConfirmationResponsive } from './component.responsive.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 { 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, useConfirmation, useCountdown } from './utils.js';
+export { ConfirmationResponsive as Confirmation } from './component.responsive.js';
+export { useConfirmation, useCountdown } from './utils.js';
 import 'react';
+import '@alfalab/core-components-mq/modern';
+import './component.desktop.js';
 import './components/base-confirmation/component.js';
 import 'classnames';
 import '@alfalab/hooks';
-import './component.mobile.js';
-import '@alfalab/core-components-button/modern';
-import '@alfalab/core-components-code-input/modern';
+import './context.js';
+import './types.js';
+import './components/screens/initial/component.js';
+import '@alfalab/core-components-button/modern/mobile';
+import '@alfalab/core-components-code-input/modern/desktop';
+import '@alfalab/core-components-code-input/modern/mobile';
 import '@alfalab/core-components-link/modern';
 import '@alfalab/core-components-typography/modern';
 import './components/header/component.js';
-import './countdown-section-a28d693c.js';
+import './countdown-section-dd4e5fe3.js';
+import '@alfalab/core-components-button/modern';
 import '@alfalab/core-components-loader/modern';
+import './components/screens/hint/component.js';
+import './components/screens/fatal-error/component.js';
+import './components/screens/temp-block/component.js';
+import './components/countdown-loader/component.js';
+import './component.mobile.js';

package/modern/mobile.css

@@ -1,4 +1,4 @@
-/* hash: 5kxvr */
-.confirmation__container_1gfq6 {
+/* hash: pdq5h */
+.confirmation__container_hgizz {
     max-width: 288px;
 }

package/modern/mobile.d.ts

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

package/modern/mobile.js

@@ -1,18 +1,20 @@
 export { ConfirmationMobile } from './component.mobile.js';
+export { useConfirmation, useCountdown } from './utils.js';
 import 'react';
 import 'classnames';
 import './components/base-confirmation/component.js';
 import '@alfalab/hooks';
 import './context.js';
-import './utils.js';
 import './types.js';
 import './components/screens/initial/component.js';
-import '@alfalab/core-components-button/modern';
-import '@alfalab/core-components-code-input/modern';
+import '@alfalab/core-components-button/modern/mobile';
+import '@alfalab/core-components-code-input/modern/desktop';
+import '@alfalab/core-components-code-input/modern/mobile';
 import '@alfalab/core-components-link/modern';
 import '@alfalab/core-components-typography/modern';
 import './components/header/component.js';
-import './countdown-section-a28d693c.js';
+import './countdown-section-dd4e5fe3.js';
+import '@alfalab/core-components-button/modern';
 import '@alfalab/core-components-loader/modern';
 import './components/screens/hint/component.js';
 import './components/screens/fatal-error/component.js';

package/modern/shared.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/modern/shared.js

@@ -0,0 +1,20 @@
+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';
+import 'react';
+import 'classnames';
+import '@alfalab/core-components-button/modern/mobile';
+import '@alfalab/core-components-code-input/modern/desktop';
+import '@alfalab/core-components-code-input/modern/mobile';
+import '@alfalab/core-components-link/modern';
+import '@alfalab/core-components-typography/modern';
+import '@alfalab/hooks';
+import './components/header/component.js';
+import './countdown-section-dd4e5fe3.js';
+import '@alfalab/core-components-button/modern';
+import '@alfalab/core-components-loader/modern';

package/modern/types.d.ts

@@ -89,9 +89,20 @@ type ConfirmationProps = {
      * @default false
      */
     hideCountdownSection?: boolean;
+    /**
+     * Контрольная точка для кнопки, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: 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'> & {
     timeLeft: number;
+} & {
+    /**
+     * Контрольная точка для кнопки, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
 };
 type ConfirmationTexts = {
     /**

package/package.json

@@ -1,21 +1,46 @@
 {
     "name": "@alfalab/core-components-confirmation",
-    "version": "12.5.2",
+    "version": "13.0.0",
     "description": "Sms confirmation component",
     "keywords": [],
     "license": "MIT",
     "main": "index.js",
     "module": "./esm/index.js",
+    "exports": {
+        ".": {
+            "import": "./esm/index.js",
+            "require": "./index.js"
+        },
+        "./mobile": {
+            "import": "./esm/mobile.js",
+            "require": "./mobile.js"
+        },
+        "./desktop": {
+            "import": "./esm/desktop.js",
+            "require": "./desktop.js"
+        },
+        "./shared": {
+            "import": "./esm/shared.js",
+            "require": "./shared.js"
+        },
+        "./esm": "./esm/index.js",
+        "./cssm": "./cssm/index.js",
+        "./modern": "./modern/index.js",
+        "./esm/*": "./esm/*",
+        "./cssm/*": "./cssm/*",
+        "./modern/*": "./modern/*"
+    },
     "publishConfig": {
         "access": "public",
         "directory": "dist"
     },
     "dependencies": {
-        "@alfalab/core-components-button": "^8.5.1",
-        "@alfalab/core-components-code-input": "^2.3.4",
-        "@alfalab/core-components-link": "^5.0.6",
-        "@alfalab/core-components-loader": "^3.0.7",
-        "@alfalab/core-components-typography": "^3.2.2",
+        "@alfalab/core-components-button": "^9.0.0",
+        "@alfalab/core-components-code-input": "^3.0.0",
+        "@alfalab/core-components-link": "^5.1.0",
+        "@alfalab/core-components-loader": "^3.1.0",
+        "@alfalab/core-components-typography": "^4.0.0",
+        "@alfalab/core-components-mq": "^4.2.0",
         "@alfalab/hooks": "^1.13.0",
         "classnames": "^2.3.1",
         "tslib": "^2.4.0"

package/shared.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/shared.js

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_screens_initial_component = require('./components/screens/initial/component.js');
+var components_screens_hint_component = require('./components/screens/hint/component.js');
+var components_screens_fatalError_component = require('./components/screens/fatal-error/component.js');
+var components_screens_tempBlock_component = require('./components/screens/temp-block/component.js');
+var components_countdownLoader_component = require('./components/countdown-loader/component.js');
+var context = require('./context.js');
+var types = require('./types.js');
+var utils = require('./utils.js');
+require('react');
+require('classnames');
+require('@alfalab/core-components-button/mobile');
+require('@alfalab/core-components-code-input/desktop');
+require('@alfalab/core-components-code-input/mobile');
+require('@alfalab/core-components-link');
+require('@alfalab/core-components-typography');
+require('@alfalab/hooks');
+require('./components/header/component.js');
+require('./countdown-section-fb6524aa.js');
+require('@alfalab/core-components-button');
+require('@alfalab/core-components-loader');
+
+
+
+exports.Initial = components_screens_initial_component.Initial;
+exports.Hint = components_screens_hint_component.Hint;
+exports.FatalError = components_screens_fatalError_component.FatalError;
+exports.TempBlock = components_screens_tempBlock_component.TempBlock;
+exports.CountdownLoader = components_countdownLoader_component.CountdownLoader;
+exports.ConfirmationContext = context.ConfirmationContext;
+exports.defaultTexts = types.defaultTexts;
+exports.ONE_DAY = utils.ONE_DAY;
+exports.ONE_MINUTE = utils.ONE_MINUTE;
+exports.formatMsAsMinutes = utils.formatMsAsMinutes;

package/src/component.desktop.tsx

@@ -0,0 +1,10 @@
+import React, { FC } from 'react';
+
+import { BaseConfirmation } from './components/base-confirmation';
+import { ConfirmationProps } from './types';
+
+export type DesktopConfirmationProps = Omit<ConfirmationProps, 'mobile' | 'breakpoint'>;
+
+export const ConfirmationDesktop: FC<DesktopConfirmationProps> = (props) => (
+    <BaseConfirmation {...props} />
+);

package/src/component.mobile.tsx

@@ -0,0 +1,13 @@
+import React, { FC } from 'react';
+import cn from 'classnames';
+
+import { BaseConfirmation } from './components/base-confirmation';
+import { ConfirmationProps } from './types';
+
+import styles from './mobile.module.css';
+
+export type MobileConfirmationProps = Omit<ConfirmationProps, 'mobile'>;
+
+export const ConfirmationMobile: FC<MobileConfirmationProps> = ({ className, ...resProps }) => (
+    <BaseConfirmation mobile={true} className={cn(className, styles.container)} {...resProps} />
+);

package/src/component.responsive.tsx

@@ -0,0 +1,31 @@
+import React, { FC } from 'react';
+
+import { useMatchMedia } from '@alfalab/core-components-mq';
+
+import { ConfirmationDesktop } from './component.desktop';
+import { ConfirmationMobile } from './component.mobile';
+import { ConfirmationProps } from './types';
+
+export type ResponsiveConfirmationProps = Omit<
+    ConfirmationProps,
+    'confirmationScreens' | 'breakpoint'
+> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+};
+
+export const ConfirmationResponsive: FC<ResponsiveConfirmationProps> = ({
+    breakpoint = 1024,
+    ...restProps
+}) => {
+    const [isDesktop] = useMatchMedia(`(min-width: ${breakpoint}px)`, true);
+
+    return isDesktop ? (
+        <ConfirmationDesktop {...restProps} />
+    ) : (
+        <ConfirmationMobile breakpoint={breakpoint} {...restProps} />
+    );
+};

package/src/components/base-confirmation/component.tsx

@@ -0,0 +1,123 @@
+import React, { ComponentType, FC, useEffect } from 'react';
+import cn from 'classnames';
+
+import { usePrevious } from '@alfalab/hooks';
+
+import { ConfirmationContext } from '../../context';
+import { ConfirmationProps, defaultTexts, TConfirmationContext } from '../../types';
+import { ONE_DAY, ONE_MINUTE, useCountdown } from '../../utils';
+import { FatalError, Hint, Initial, TempBlock } from '../screens';
+
+import styles from './index.module.css';
+
+const confirmationScreens: { [key: string]: ComponentType<{ mobile?: boolean }> } = {
+    INITIAL: Initial,
+    HINT: Hint,
+    FATAL_ERROR: FatalError,
+    TEMP_BLOCK: TempBlock,
+};
+
+export const BaseConfirmation: FC<ConfirmationProps> = ({
+    state,
+    screen,
+    alignContent = 'left',
+    children,
+    requiredCharAmount = 5,
+    countdownDuration = ONE_MINUTE,
+    tempBlockDuration = ONE_DAY,
+    phone,
+    blockSmsRetry,
+    dataTestId,
+    className,
+    getScreensMap,
+    onInputFinished,
+    onChangeState,
+    onSmsRetryClick,
+    onChangeScreen,
+    onFatalErrorOkButtonClick,
+    onTempBlockFinished,
+    mobile,
+    clearCodeOnError = true,
+    hideCountdownSection = false,
+    breakpoint = 1024,
+    ...restProps
+}) => {
+    const [timeLeft, startTimer, stopTimer] = useCountdown(countdownDuration);
+
+    const prevState = usePrevious(state);
+
+    useEffect(() => {
+        startTimer();
+    }, [startTimer]);
+
+    useEffect(() => {
+        /**
+         * Перезапускаем таймер после повторного запроса кода
+         */
+        if (state === 'INITIAL' && prevState === 'CODE_SENDING') {
+            startTimer();
+        }
+    }, [state, prevState, startTimer]);
+
+    useEffect(() => {
+        /**
+         * Останавливаем таймер, если новый экран/состояние не содержит таймер
+         */
+        if (!['INITIAL', 'HINT', 'TEMP_BLOCK'].includes(screen) || blockSmsRetry) {
+            stopTimer();
+        }
+    }, [state, screen, blockSmsRetry, stopTimer]);
+
+    const handleSmsRetry = () => {
+        onChangeState('CODE_SENDING');
+
+        onSmsRetryClick();
+    };
+
+    const handleInputFinished = (code: string) => {
+        onChangeState('CODE_CHECKING');
+
+        onInputFinished(code);
+    };
+
+    const handleFatalErrorOkButtonClick = () => {
+        if (onFatalErrorOkButtonClick) {
+            onFatalErrorOkButtonClick();
+        }
+    };
+
+    // eslint-disable-next-line react/jsx-no-constructed-context-values
+    const contextValue: TConfirmationContext = {
+        hideCountdownSection,
+        alignContent,
+        texts: { ...defaultTexts, ...restProps.texts },
+        state,
+        screen,
+        requiredCharAmount,
+        countdownDuration,
+        timeLeft,
+        tempBlockDuration,
+        phone,
+        blockSmsRetry,
+        breakpoint,
+        onTempBlockFinished,
+        onChangeState,
+        onChangeScreen,
+        clearCodeOnError,
+        onInputFinished: handleInputFinished,
+        onSmsRetryClick: handleSmsRetry,
+        onFatalErrorOkButtonClick: handleFatalErrorOkButtonClick,
+    };
+
+    const screensMap = getScreensMap ? getScreensMap(confirmationScreens) : confirmationScreens;
+
+    const CurrentScreen = screensMap[screen];
+
+    return (
+        <ConfirmationContext.Provider value={contextValue}>
+            <div className={cn(styles.component, className)} data-test-id={dataTestId}>
+                {CurrentScreen && <CurrentScreen mobile={mobile} />}
+            </div>
+        </ConfirmationContext.Provider>
+    );
+};

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

@@ -0,0 +1,8 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.component {
+    width: 100%;
+    max-width: 388px;
+    margin: 0 auto;
+    color: var(--color-light-text-secondary);
+}

package/src/components/base-confirmation/index.ts

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

package/src/components/countdown-loader/component.tsx

@@ -0,0 +1,37 @@
+import React, { FC } from 'react';
+
+import styles from './index.module.css';
+
+type Props = {
+    progress: number; // 0-1
+    className?: string;
+};
+
+const SIZE = 16;
+const STROKE_WIDTH = 2;
+
+const CENTER = SIZE / 2;
+const RADIUS = CENTER - STROKE_WIDTH / 2;
+/** Длина окружности */
+const CIRCUMFERENCE = Math.PI * RADIUS * 2;
+
+export const CountdownLoader: FC<Props> = ({ progress, className }) => {
+    const value = Math.min(progress, 1);
+
+    const strokeDasharray = CIRCUMFERENCE.toFixed(2);
+    const strokeDashoffset = (value * CIRCUMFERENCE).toFixed(2);
+
+    return (
+        <svg width={SIZE} height={SIZE} viewBox={`0 0 ${SIZE} ${SIZE}`} className={className}>
+            <circle
+                cx={CENTER}
+                cy={CENTER}
+                r={RADIUS}
+                strokeDasharray={strokeDasharray}
+                strokeDashoffset={strokeDashoffset}
+                transform={`rotate(-90 ${CENTER} ${CENTER})`}
+                className={styles.circle}
+            />
+        </svg>
+    );
+};

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

@@ -0,0 +1,7 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.circle {
+    fill: transparent;
+    stroke: var(--color-light-graphic-tertiary);
+    stroke-width: 2px;
+}

package/src/components/countdown-loader/index.ts

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

package/src/components/header/component.tsx

@@ -0,0 +1,28 @@
+import React, { FC, ReactNode } from 'react';
+import cn from 'classnames';
+
+import { Typography } from '@alfalab/core-components-typography';
+
+import styles from './index.module.css';
+
+export type HeaderProps = {
+    /**
+     * Контент шапки
+     */
+    children?: ReactNode;
+
+    /**
+     * Отображать в мобильной версии экран компонента
+     */
+    mobile?: boolean;
+};
+
+export const Header: FC<HeaderProps> = ({ mobile, children }) => (
+    <Typography.Title
+        className={cn(styles.header, styles.typography, { [styles.typographyMobile]: mobile })}
+        tag='h3'
+        color='primary'
+    >
+        {children}
+    </Typography.Title>
+);

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

@@ -0,0 +1,21 @@
+@import '../../vars.css';
+
+.header.header {
+    margin-bottom: var(--gap-xl);
+}
+
+.typography.typography.typography {
+    font-feature-settings: var(--confirmation-header-font-feature-settings);
+    font-size: var(--confirmation-header-desktop-font-size);
+    line-height: var(--confirmation-header-desktop-line-height);
+    font-weight: var(--confirmation-header-desktop-font-weight);
+    font-family: var(--confirmation-header-desktop-font-family);
+}
+
+.typographyMobile.typographyMobile.typographyMobile {
+    font-feature-settings: var(--confirmation-header-font-feature-settings);
+    font-size: var(--confirmation-header-mobile-font-size);
+    line-height: var(--confirmation-header-mobile-line-height);
+    font-weight: var(--confirmation-header-mobile-font-weight);
+    font-family: var(--confirmation-header-mobile-font-family);
+}

package/src/components/header/index.ts

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

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from './screens';
+export * from './countdown-loader';

package/src/components/screens/fatal-error/component.tsx

@@ -0,0 +1,46 @@
+import React, { FC, useContext } from 'react';
+import cn from 'classnames';
+
+import { Button } from '@alfalab/core-components-button';
+import { Typography } from '@alfalab/core-components-typography';
+
+import { ConfirmationContext } from '../../../context';
+import { Header } from '../../header';
+
+import styles from './index.module.css';
+
+export type FatalErrorProps = {
+    /**
+     * Отображать в мобильной версии экран компонента
+     */
+    mobile?: boolean;
+};
+
+export const FatalError: FC<FatalErrorProps> = ({ mobile }) => {
+    const { alignContent, texts, onFatalErrorOkButtonClick, breakpoint } =
+        useContext(ConfirmationContext);
+
+    return (
+        <div className={cn(styles.component, styles[alignContent])}>
+            <Header mobile={mobile}>{texts.fatalErrorTitle}</Header>
+
+            <Typography.Text
+                view='primary-medium'
+                color='primary'
+                className={cn({ [styles.typographyTheme]: !mobile })}
+            >
+                {texts.fatalErrorDescription}
+            </Typography.Text>
+
+            <Button
+                size={mobile ? 'xs' : 's'}
+                view='secondary'
+                onClick={onFatalErrorOkButtonClick}
+                className={styles.button}
+                breakpoint={breakpoint}
+            >
+                {texts.fatalErrorButton}
+            </Button>
+        </div>
+    );
+};

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

@@ -0,0 +1,23 @@
+@import '../../../vars.css';
+
+.component {
+    display: flex;
+    flex-direction: column;
+}
+
+.typographyTheme.typographyTheme {
+    @mixin _confirmation-text;
+}
+
+.left {
+    align-items: flex-start;
+}
+
+.center {
+    align-items: center;
+    text-align: center;
+}
+
+.button {
+    margin-top: var(--gap-2xl);
+}

package/src/components/screens/fatal-error/index.ts

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