@alfalab/core-components-pattern-lock 1.5.1 → 1.6.1

package/src/{Component.tsx → components/base-pattern-lock/Component.tsx}

@@ -4,16 +4,23 @@ import { ReactCanvasPatternLock } from 'react-canvas-pattern-lock';
 import cn from 'classnames';
 
 import { ButtonMobile } from '@alfalab/core-components-button/mobile';
-import { Gap } from '@alfalab/core-components-gap';
 import { getDataTestId } from '@alfalab/core-components-shared';
 
-import { DEFAULT_EXTRA_BOUNDS, OBSERVABLE_TOKENS, OBSERVE_OPTIONS, THEME_STATE } from './consts';
-import type { PatternLockProps } from './typings';
-import { getColorByToken, getDefaultObserveTarget, getSizes, getTheme } from './utils';
-
-import styles from './index.module.css';
-
-export const PatternLock = forwardRef<TPatternLockInstance, PatternLockProps>(
+import {
+    DEFAULT_EXTRA_BOUNDS,
+    OBSERVABLE_TOKENS,
+    OBSERVE_OPTIONS,
+    THEME_STATE,
+} from '../../consts';
+import type { CommonPatternLockProps, PrivatePatternLockProps } from '../../typings';
+import { getColorByToken, getDefaultObserveTarget, getSizes, getTheme } from '../../utils';
+
+import commonStyles from './index.module.css';
+
+export const BasePatternLock = forwardRef<
+    TPatternLockInstance,
+    CommonPatternLockProps & PrivatePatternLockProps
+>(
     (
         {
             observeTokens = false,
@@ -27,6 +34,9 @@ export const PatternLock = forwardRef<TPatternLockInstance, PatternLockProps>(
             onForgotBtnClick,
             extraBounds = DEFAULT_EXTRA_BOUNDS,
             message,
+            messageClassName,
+            hover,
+            styles = {},
             ...restProps
         },
         ref,
@@ -77,14 +87,17 @@ export const PatternLock = forwardRef<TPatternLockInstance, PatternLockProps>(
         }, [observeTokens]);
 
         const renderMessage = () => (
-            <div className={styles.message} data-test-id={getDataTestId(dataTestId, 'message')}>
+            <div
+                className={cn(commonStyles.message, messageClassName)}
+                data-test-id={getDataTestId(dataTestId, 'message')}
+            >
                 {message}
             </div>
         );
 
         const renderError = () => (
             <div
-                className={cn(styles.message, styles.error)}
+                className={cn(commonStyles.message, commonStyles.error, messageClassName)}
                 data-test-id={getDataTestId(dataTestId, 'error')}
             >
                 {error}
@@ -93,15 +106,13 @@ export const PatternLock = forwardRef<TPatternLockInstance, PatternLockProps>(
 
         return (
             <div
-                className={cn(styles.component, className, { [styles.hidden]: !params })}
+                className={cn(commonStyles.component, styles.component, className, {
+                    [commonStyles.hidden]: !params,
+                })}
                 data-test-id={dataTestId}
             >
-                <Gap size='xs' />
-
                 {error ? renderError() : renderMessage()}
 
-                <Gap size='3xl' />
-
                 <ReactCanvasPatternLock
                     {...restProps}
                     {...params}
@@ -110,19 +121,24 @@ export const PatternLock = forwardRef<TPatternLockInstance, PatternLockProps>(
                     cols={3}
                     justifyNodes={justifyNodes}
                     extraBounds={extraBounds}
+                    hover={hover}
                 />
 
                 {showForgotCodeBtn ? (
                     <ButtonMobile
-                        view='link'
-                        className={styles.forgotBtn}
+                        view='transparent'
+                        className={cn(commonStyles.forgotBtn, styles.forgotBtn)}
                         onClick={onForgotBtnClick}
                         dataTestId={getDataTestId(dataTestId, 'forgot-code-btn')}
                     >
                         {forgotCodeBtnText}
                     </ButtonMobile>
                 ) : (
-                    <div className={styles.forgotBtn} />
+                    <div
+                        className={cn(commonStyles.forgotBtn, styles.forgotBtn, {
+                            [styles.hiddenBtn]: Boolean(styles.hiddenBtn),
+                        })}
+                    />
                 )}
             </div>
         );

package/src/components/base-pattern-lock/index.module.css

@@ -0,0 +1,34 @@
+@import '@alfalab/core-components-themes/src/default.css';
+@import '../../vars.css';
+
+.component {
+    & canvas {
+        display: block;
+        margin: 0 auto;
+    }
+}
+
+.hidden {
+    visibility: hidden;
+}
+
+.message {
+    @mixin paragraph_primary_medium;
+
+    text-align: center;
+    padding: 0 var(--gap-m) var(--gap-3xl);
+    min-height: 24px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--color-light-text-primary);
+}
+
+.error {
+    color: var(--color-light-text-negative);
+}
+
+.forgotBtn {
+    display: block;
+    min-height: var(--size-xs-height);
+}

package/src/components/base-pattern-lock/index.ts

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

package/src/consts.ts

@@ -21,6 +21,8 @@ export const OBSERVABLE_TOKENS: ObservableTokens = {
     SELECTED_RING_BG_INITIAL: '--color-light-specialbg-tertiary-transparent',
     SELECTED_RING_BG_SUCCESS: '--color-light-graphic-positive-alpha-10',
     SELECTED_RING_BG_FAILURE: '--color-light-graphic-negative-alpha-10',
+    HOVER_INNER: '--color-light-neutral-500-hover',
+    HOVER_OUTER: '--color-light-neutral-translucent-200-hover',
 };
 
 export const THEME_STATE = {

package/src/desktop/Component.desktop.tsx

@@ -0,0 +1,11 @@
+import React, { forwardRef } from 'react';
+import type { TPatternLockInstance } from 'react-canvas-pattern-lock';
+
+import { BasePatternLock } from '../components/base-pattern-lock';
+import { CommonPatternLockProps } from '../typings';
+
+import styles from './desktop.module.css';
+
+export const PatternLockDesktop = forwardRef<TPatternLockInstance, CommonPatternLockProps>(
+    (restProps, ref) => <BasePatternLock {...restProps} hover={true} ref={ref} styles={styles} />,
+);

package/src/desktop/desktop.module.css

@@ -0,0 +1,15 @@
+@import '@alfalab/core-components-themes/src/default.css';
+@import '../vars.css';
+
+.component {
+    max-width: var(--pattern-lock-desktop-max-width);
+    margin: var(--gap-xs) 0 var(--gap-xl) 0;
+}
+
+.forgotBtn {
+    margin: var(--gap-xl) auto 0;
+}
+
+.hiddenBtn {
+    display: none;
+}

package/src/desktop/index.ts

@@ -0,0 +1,2 @@
+export { PatternLockDesktop } from './Component.desktop';
+export type { CommonPatternLockProps as PatternLockDesktopProps } from '../typings';

package/src/desktop/package.json

@@ -0,0 +1,3 @@
+{
+    "module": "../esm/desktop/index.js"
+}

package/src/hooks/use-pattern-lock-cleanup.tsx

@@ -0,0 +1,16 @@
+import { useMemo } from 'react';
+import type { TPatternLockInstance } from 'react-canvas-pattern-lock';
+
+export const usePatternLockCleanup = (
+    patternLockRef: React.MutableRefObject<TPatternLockInstance | null>,
+) => {
+    const clear = useMemo(() => {
+        if (patternLockRef.current) {
+            patternLockRef.current.setInitialState();
+        }
+    }, [patternLockRef]);
+
+    return {
+        clear,
+    };
+};

package/src/index.ts

@@ -1,3 +1,3 @@
 export type { PatternLockProps } from './typings';
-export * from './Component';
+export * from './Component.responsive';
 export { THEME_STATE } from './consts';

package/src/mobile/Component.mobile.tsx

@@ -0,0 +1,11 @@
+import React, { forwardRef } from 'react';
+import type { TPatternLockInstance } from 'react-canvas-pattern-lock';
+
+import { BasePatternLock } from '../components/base-pattern-lock';
+import { CommonPatternLockProps } from '../typings';
+
+import styles from './mobile.module.css';
+
+export const PatternLockMobile = forwardRef<TPatternLockInstance, CommonPatternLockProps>(
+    (restProps, ref) => <BasePatternLock {...restProps} ref={ref} styles={styles} />,
+);

package/src/mobile/index.ts

@@ -0,0 +1,2 @@
+export { PatternLockMobile } from './Component.mobile';
+export type { CommonPatternLockProps as PatternLockMobileProps } from '../typings';

package/src/{index.module.css → mobile/mobile.module.css}

@@ -1,39 +1,12 @@
 @import '@alfalab/core-components-themes/src/default.css';
-@import './vars.css';
+@import '../vars.css';
 
 .component {
     max-width: var(--pattern-lock-max-width);
     margin: var(--gap-xs) 0 var(--gap-xl) 0;
-
-    & canvas {
-        display: block;
-        margin: 0 auto;
-    }
-}
-
-.hidden {
-    visibility: hidden;
-}
-
-.message {
-    @mixin paragraph_primary_medium;
-
-    text-align: center;
-    padding: 0 var(--gap-m);
-    min-height: 24px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    color: var(--color-light-text-primary);
-}
-
-.error {
-    color: var(--color-light-text-negative);
 }
 
 .forgotBtn {
-    display: block;
-    min-height: var(--size-xs-height);
     margin: var(--gap-xl) auto 0;
 }
 

package/src/mobile/package.json

@@ -0,0 +1,3 @@
+{
+    "module": "../esm/mobile/index.js"
+}

package/src/shared/index.ts

@@ -1 +1,2 @@
 export { getPatternLockTestIds } from '../utils';
+export { usePatternLockCleanup } from '../hooks/use-pattern-lock-cleanup';

package/src/typings.ts

@@ -4,7 +4,7 @@ import { ReactPatternLockProps } from 'react-canvas-pattern-lock';
 type ConditionalProps =
     | {
           /**
-           * Текст кнопки "забыли код"
+           * Показать кнопку "забыли код"
            * @default "Забыли код?"
            */
           showForgotCodeBtn: true;
@@ -26,7 +26,7 @@ type ConditionalProps =
           forgotCodeBtnText?: never;
       };
 
-export type PatternLockProps = {
+export type CommonPatternLockProps = {
     /**
      * Дополнительный класс.
      */
@@ -62,9 +62,32 @@ export type PatternLockProps = {
         getTarget?: () => Node;
         options?: MutationObserverInit;
     };
-} & Omit<ReactPatternLockProps, 'theme' | 'width' | 'height' | 'rows' | 'cols'> &
+
+    /**
+     * Дополнительный класс для message/errorMessage
+     */
+    messageClassName?: string;
+} & Omit<ReactPatternLockProps, 'theme' | 'width' | 'height' | 'rows' | 'cols' | 'hover'> &
     ConditionalProps;
 
+export type PrivatePatternLockProps = {
+    /**
+     * Включает ховер-эффект
+     */
+    hover?: boolean;
+    /**
+     * Стили компонента.
+     */
+    styles: { [key: string]: string };
+};
+
+export type PatternLockProps = CommonPatternLockProps & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+};
 export type ObservableTokens = {
     ACCENT_INITIAL: string;
     ACCENT_SUCCESS: string;
@@ -75,4 +98,6 @@ export type ObservableTokens = {
     SELECTED_RING_BG_FAILURE: string;
     PRIMARY: string;
     BG: string;
+    HOVER_INNER: string;
+    HOVER_OUTER: string;
 };

package/src/utils.ts

@@ -26,7 +26,13 @@ export const getSizes = (() => {
             return cachedSize;
         }
 
-        if (window.matchMedia('(min-width: 390px)').matches) {
+        if (window.matchMedia('(min-width: 600px)').matches) {
+            cachedSize = {
+                elementSizes: { ...COMMON_SIZES, nodeRadius: 32 },
+                width: 240,
+                height: 240,
+            };
+        } else if (window.matchMedia('(min-width: 390px)').matches) {
             cachedSize = {
                 elementSizes: { ...COMMON_SIZES, nodeRadius: 43 },
                 width: 322,
@@ -55,6 +61,10 @@ export function getTheme(dimens: ThemeParams['dimens']): Theme {
         primary: getColorByToken(OBSERVABLE_TOKENS.PRIMARY),
         bg: getColorByToken(OBSERVABLE_TOKENS.BG),
         ringBg: getColorByToken(OBSERVABLE_TOKENS.RING_BG_INITIAL),
+        hover: {
+            inner: getColorByToken(OBSERVABLE_TOKENS.HOVER_INNER),
+            outer: getColorByToken(OBSERVABLE_TOKENS.HOVER_OUTER),
+        },
     };
 
     return {

package/src/vars.css

@@ -1,3 +1,4 @@
 :root {
     --pattern-lock-max-width: 500px;
+    --pattern-lock-desktop-max-width: 240px;
 }

package/typings.d.ts

@@ -2,7 +2,7 @@ import { MouseEvent, ReactNode } from 'react';
 import { ReactPatternLockProps } from 'react-canvas-pattern-lock';
 type ConditionalProps = {
     /**
-     * Текст кнопки "забыли код"
+     * Показать кнопку "забыли код"
      * @default "Забыли код?"
      */
     showForgotCodeBtn: true;
@@ -20,7 +20,7 @@ type ConditionalProps = {
     onForgotBtnClick?: never;
     forgotCodeBtnText?: never;
 };
-type PatternLockProps = {
+type CommonPatternLockProps = {
     /**
      * Дополнительный класс.
      */
@@ -51,7 +51,30 @@ type PatternLockProps = {
         getTarget?: () => Node;
         options?: MutationObserverInit;
     };
-} & Omit<ReactPatternLockProps, 'theme' | 'width' | 'height' | 'rows' | 'cols'> & ConditionalProps;
+    /**
+     * Дополнительный класс для message/errorMessage
+     */
+    messageClassName?: string;
+} & Omit<ReactPatternLockProps, 'theme' | 'width' | 'height' | 'rows' | 'cols' | 'hover'> & ConditionalProps;
+type PrivatePatternLockProps = {
+    /**
+     * Включает ховер-эффект
+     */
+    hover?: boolean;
+    /**
+     * Стили компонента.
+     */
+    styles: {
+        [key: string]: string;
+    };
+};
+type PatternLockProps = CommonPatternLockProps & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+};
 type ObservableTokens = {
     ACCENT_INITIAL: string;
     ACCENT_SUCCESS: string;
@@ -62,5 +85,7 @@ type ObservableTokens = {
     SELECTED_RING_BG_FAILURE: string;
     PRIMARY: string;
     BG: string;
+    HOVER_INNER: string;
+    HOVER_OUTER: string;
 };
-export { PatternLockProps, ObservableTokens };
+export { CommonPatternLockProps, PrivatePatternLockProps, PatternLockProps, ObservableTokens };

package/utils.js

@@ -23,7 +23,14 @@ var getSizes = (function () {
         if (cachedSize) {
             return cachedSize;
         }
-        if (window.matchMedia('(min-width: 390px)').matches) {
+        if (window.matchMedia('(min-width: 600px)').matches) {
+            cachedSize = {
+                elementSizes: tslib.__assign(tslib.__assign({}, COMMON_SIZES), { nodeRadius: 32 }),
+                width: 240,
+                height: 240,
+            };
+        }
+        else if (window.matchMedia('(min-width: 390px)').matches) {
             cachedSize = {
                 elementSizes: tslib.__assign(tslib.__assign({}, COMMON_SIZES), { nodeRadius: 43 }),
                 width: 322,
@@ -53,6 +60,10 @@ function getTheme(dimens) {
         primary: getColorByToken(consts.OBSERVABLE_TOKENS.PRIMARY),
         bg: getColorByToken(consts.OBSERVABLE_TOKENS.BG),
         ringBg: getColorByToken(consts.OBSERVABLE_TOKENS.RING_BG_INITIAL),
+        hover: {
+            inner: getColorByToken(consts.OBSERVABLE_TOKENS.HOVER_INNER),
+            outer: getColorByToken(consts.OBSERVABLE_TOKENS.HOVER_OUTER),
+        },
     };
     return _a = {},
         _a[consts.THEME_STATE.INITIAL] = {