@alfalab/core-components-pattern-lock 2.3.0 → 2.4.0

package/moderncssm/typings.d.ts

@@ -0,0 +1,91 @@
+import { MouseEvent } from 'react';
+import { ReactPatternLockProps } from '@alfalab/react-canvas-pattern-lock';
+type ConditionalProps = {
+    /**
+     * Показать кнопку "забыли код"
+     * @default "Забыли код?"
+     */
+    showForgotCodeBtn: true;
+    /**
+     * Текст кнопки "забыли код"
+     * @default "Забыли код?"
+     */
+    forgotCodeBtnText?: string;
+    /**
+     * Коллбэк, вызываемый при клике на кнопку "Забыли код"
+     */
+    onForgotBtnClick: (event: MouseEvent<HTMLButtonElement>) => void;
+} | {
+    showForgotCodeBtn?: false;
+    onForgotBtnClick?: never;
+    forgotCodeBtnText?: never;
+};
+type CommonPatternLockProps = {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Идентификатор для систем автоматизированного тестирования.
+     * Для сообщения используется модификатор -message, ошибки -error,
+     * кнопки "забыли код" -forgot-code-btn
+     */
+    dataTestId?: string;
+    /**
+     * Следить ли за изменениями значений цветовых токенов
+     * @default false
+     */
+    observeTokens?: boolean;
+    /**
+     * Параметры MutationObserver для наблюдения за изменениями режима(css custom properties)
+     */
+    observerParams?: {
+        getTarget?: () => Node;
+        options?: MutationObserverInit;
+    };
+    /**
+     * Дополнительный класс для message/errorMessage
+     */
+    messageClassName?: string;
+    /**
+     * Отключает ввод паттерна
+     * @default false
+     */
+    disabled?: boolean;
+} & Omit<ReactPatternLockProps, 'theme' | 'width' | 'height' | 'rows' | 'cols' | 'hover' | 'justifyNodes'> & ConditionalProps;
+type PrivatePatternLockProps = {
+    /**
+     * Включает ховер-эффект
+     */
+    hover?: boolean;
+    /**
+     * Стили компонента
+     */
+    styles: {
+        [key: string]: string;
+    };
+};
+type PatternLockProps = CommonPatternLockProps & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
+};
+type ObservableTokens = {
+    ACCENT_INITIAL: string;
+    ACCENT_SUCCESS: string;
+    ACCENT_FAILURE: string;
+    RING_BG_INITIAL: string;
+    SELECTED_RING_BG_INITIAL: string;
+    SELECTED_RING_BG_SUCCESS: string;
+    SELECTED_RING_BG_FAILURE: string;
+    PRIMARY: string;
+    HOVER_INNER: string;
+    HOVER_OUTER: string;
+};
+export { CommonPatternLockProps, PrivatePatternLockProps, PatternLockProps, ObservableTokens };

package/moderncssm/typings.js

@@ -0,0 +1 @@
+

package/moderncssm/utils.d.ts

@@ -0,0 +1,14 @@
+import { Theme, ThemeParams } from '@alfalab/react-canvas-pattern-lock';
+declare function getDefaultObserveTarget(): HTMLHeadElement;
+declare function getColorByToken(token: string): string;
+declare const getSizes: () => {
+    elementSizes: ThemeParams['dimens'];
+    width: number;
+    height: number;
+};
+declare function getTheme(dimens: ThemeParams['dimens']): Theme;
+declare function getPatternLockTestIds(dataTestId: string): {
+    patternLock: string;
+    forgotCodeBtn: string;
+};
+export { getDefaultObserveTarget, getColorByToken, getSizes, getTheme, getPatternLockTestIds };

package/moderncssm/utils.js

@@ -0,0 +1,73 @@
+import { getDataTestId } from '@alfalab/core-components-shared/moderncssm';
+import { OBSERVABLE_TOKENS, THEME_STATE } from './consts.js';
+
+function getDefaultObserveTarget() {
+    return document.head;
+}
+function getColorByToken(token) {
+    return getComputedStyle(document.documentElement).getPropertyValue(token);
+}
+const getSizes = (() => {
+    const COMMON_SIZES = {
+        lineWidth: 6,
+        nodeRing: 0,
+        nodeCore: 12,
+    };
+    let cachedSize;
+    return () => {
+        if (cachedSize) {
+            return cachedSize;
+        }
+        cachedSize = {
+            elementSizes: { ...COMMON_SIZES, nodeRadius: 32 },
+            width: 240,
+            height: 240,
+        };
+        return cachedSize;
+    };
+})();
+function getTheme(dimens) {
+    const baseColors = {
+        primary: getColorByToken(OBSERVABLE_TOKENS.PRIMARY),
+        bg: 'transparent',
+        ringBg: getColorByToken(OBSERVABLE_TOKENS.RING_BG_INITIAL),
+        hover: {
+            inner: getColorByToken(OBSERVABLE_TOKENS.HOVER_INNER),
+            outer: getColorByToken(OBSERVABLE_TOKENS.HOVER_OUTER),
+        },
+    };
+    return {
+        [THEME_STATE.INITIAL]: {
+            colors: {
+                ...baseColors,
+                accent: getColorByToken(OBSERVABLE_TOKENS.ACCENT_INITIAL),
+                selectedRingBg: getColorByToken(OBSERVABLE_TOKENS.SELECTED_RING_BG_INITIAL),
+            },
+            dimens,
+        },
+        [THEME_STATE.SUCCESS]: {
+            colors: {
+                ...baseColors,
+                accent: getColorByToken(OBSERVABLE_TOKENS.ACCENT_SUCCESS),
+                selectedRingBg: getColorByToken(OBSERVABLE_TOKENS.SELECTED_RING_BG_SUCCESS),
+            },
+            dimens,
+        },
+        [THEME_STATE.FAILURE]: {
+            colors: {
+                ...baseColors,
+                accent: getColorByToken(OBSERVABLE_TOKENS.ACCENT_FAILURE),
+                selectedRingBg: getColorByToken(OBSERVABLE_TOKENS.SELECTED_RING_BG_FAILURE),
+            },
+            dimens,
+        },
+    };
+}
+function getPatternLockTestIds(dataTestId) {
+    return {
+        patternLock: dataTestId,
+        forgotCodeBtn: getDataTestId(dataTestId, 'forgot-code-btn'),
+    };
+}
+
+export { getColorByToken, getDefaultObserveTarget, getPatternLockTestIds, getSizes, getTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-pattern-lock",
-    "version": "2.3.0",
+    "version": "2.4.0",
     "description": "Pattern lock",
     "keywords": [],
     "license": "MIT",
@@ -15,13 +15,13 @@
         "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-button": "^11.5.4",
+        "@alfalab/core-components-button": "^11.6.0",
         "@alfalab/core-components-shared": "^0.12.0",
         "@alfalab/core-components-mq": "^4.3.0",
         "@alfalab/react-canvas-pattern-lock": "^2.0.7",
         "classnames": "^2.3.1",
         "tslib": "^2.4.0"
     },
-    "themesVersion": "13.0.1",
-    "varsVersion": "9.11.1"
+    "themesVersion": "13.1.0",
+    "varsVersion": "9.12.0"
 }

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

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 @import '../../vars.css';
 
 .component {
@@ -15,13 +15,13 @@
 
     & .canvasContainer {
         box-sizing: border-box;
-        padding: var(--gap-m) var(--gap-m);
+        padding: var(--gap-16) var(--gap-16);
         min-width: var(--pattern-lock-min-width);
         min-height: var(--pattern-lock-min-height);
 
         & .canvasInner {
             box-sizing: border-box;
-            padding: 0 var(--gap-m);
+            padding: 0 var(--gap-16);
             min-width: var(--pattern-lock-min-height);
         }
     }

package/src/desktop/desktop.module.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 @import '../vars.css';
 
 .component {
@@ -7,7 +7,7 @@
 }
 
 .forgotBtn {
-    margin: var(--gap-xs) auto 0;
+    margin: var(--gap-8) auto 0;
 }
 
 .hiddenBtn {

package/src/mobile/mobile.module.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 @import '../vars.css';
 
 .component {
@@ -7,5 +7,5 @@
 }
 
 .forgotBtn {
-    margin: var(--gap-xs) auto 0;
+    margin: var(--gap-8) auto 0;
 }