@alfalab/core-components-pattern-lock-v1 1.0.0

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

@@ -0,0 +1,3 @@
+export type { PatternLockProps } from './typings';
+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 PatternLockMobileV1 = forwardRef<TPatternLockInstance, CommonPatternLockProps>(
+    (restProps, ref) => <BasePatternLock {...restProps} ref={ref} styles={styles} />,
+);

package/src/mobile/index.ts

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

package/src/mobile/mobile.module.css

@@ -0,0 +1,32 @@
+@import '@alfalab/core-components-themes/src/default.css';
+@import '../vars.css';
+
+.component {
+    max-width: var(--pattern-lock-v1-max-width);
+    margin: var(--gap-xs) 0 var(--gap-xl) 0;
+}
+
+.forgotBtn {
+    margin: var(--gap-xl) auto 0;
+}
+
+@media screen and (min-width: 360px) {
+    .forgotBtn {
+        margin-top: var(--gap-2xl);
+        min-height: var(--size-s-height);
+    }
+
+    .component {
+        margin-bottom: var(--gap-s);
+    }
+}
+
+@media screen and (min-width: 390px) {
+    .forgotBtn {
+        min-height: var(--size-m-height);
+    }
+
+    .component {
+        margin-bottom: var(--gap-l);
+    }
+}

package/src/mobile/package.json

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

package/src/shared/index.ts

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

package/src/shared/package.json

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

package/src/typings.ts

@@ -0,0 +1,103 @@
+import { MouseEvent, ReactNode } from 'react';
+import { ReactPatternLockProps } from 'react-canvas-pattern-lock';
+
+type ConditionalProps =
+    | {
+          /**
+           * Показать кнопку "забыли код"
+           * @default "Забыли код?"
+           */
+          showForgotCodeBtn: true;
+
+          /**
+           * Текст кнопки "забыли код"
+           * @default "Забыли код?"
+           */
+          forgotCodeBtnText?: string;
+
+          /**
+           * Коллбэк, вызываемый при клике на кнопку "Забыли код"
+           */
+          onForgotBtnClick: (event: MouseEvent<HTMLButtonElement>) => void;
+      }
+    | {
+          showForgotCodeBtn?: false;
+          onForgotBtnClick?: never;
+          forgotCodeBtnText?: never;
+      };
+
+export type CommonPatternLockProps = {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+
+    /**
+     * Сообщение об ошибке
+     */
+    error?: ReactNode;
+
+    /**
+     * Сообщение над графическим ключом
+     */
+    message?: ReactNode;
+
+    /**
+     * Идентификатор для систем автоматизированного тестирования.
+     * Для сообщения используется модификатор -message, ошибки -error,
+     * кнопки "забыли код" -forgot-code-btn
+     */
+    dataTestId?: string;
+
+    /**
+     * Следить ли за изменениями значений цветовых токенов
+     * @default false
+     */
+    observeTokens?: boolean;
+
+    /**
+     * Параметры MutationObserver для наблюдения за изменениями режима(css custom properties)
+     */
+    observerParams?: {
+        getTarget?: () => Node;
+        options?: MutationObserverInit;
+    };
+
+    /**
+     * Дополнительный класс для 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;
+    ACCENT_FAILURE: string;
+    RING_BG_INITIAL: string;
+    SELECTED_RING_BG_INITIAL: string;
+    SELECTED_RING_BG_SUCCESS: string;
+    SELECTED_RING_BG_FAILURE: string;
+    PRIMARY: string;
+    BG: string;
+    HOVER_INNER: string;
+    HOVER_OUTER: string;
+};

package/src/utils.ts

@@ -0,0 +1,105 @@
+import { Theme, ThemeParams } from 'react-canvas-pattern-lock';
+
+import { getDataTestId } from '@alfalab/core-components-shared';
+
+import { OBSERVABLE_TOKENS, THEME_STATE } from './consts';
+
+export function getDefaultObserveTarget() {
+    return document.head;
+}
+
+export function getColorByToken(token: string) {
+    return getComputedStyle(document.documentElement).getPropertyValue(token);
+}
+
+export const getSizes = (() => {
+    const COMMON_SIZES = {
+        lineWidth: 6,
+        nodeRing: 0,
+        nodeCore: 12,
+    };
+
+    let cachedSize: { elementSizes: ThemeParams['dimens']; width: number; height: number };
+
+    return () => {
+        if (cachedSize) {
+            return cachedSize;
+        }
+
+        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,
+                height: 322,
+            };
+        } else if (window.matchMedia('(min-width: 360px)').matches) {
+            cachedSize = {
+                elementSizes: { ...COMMON_SIZES, nodeRadius: 38 },
+                width: 292,
+                height: 292,
+            };
+        } else {
+            cachedSize = {
+                elementSizes: { ...COMMON_SIZES, nodeRadius: 32 },
+                width: 240,
+                height: 240,
+            };
+        }
+
+        return cachedSize;
+    };
+})();
+
+export function getTheme(dimens: ThemeParams['dimens']): Theme {
+    const baseColors = {
+        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 {
+        [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,
+        },
+    };
+}
+
+export function getPatternLockTestIds(dataTestId: string) {
+    return {
+        patternLock: dataTestId,
+        forgotCodeBtn: getDataTestId(dataTestId, 'forgot-code-btn'),
+        error: getDataTestId(dataTestId, 'error'),
+        message: getDataTestId(dataTestId, 'message'),
+    };
+}

package/src/vars.css

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

package/typings.d.ts

@@ -0,0 +1,91 @@
+import { MouseEvent, ReactNode } from 'react';
+import { ReactPatternLockProps } from '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;
+    /**
+     * Сообщение об ошибке
+     */
+    error?: ReactNode;
+    /**
+     * Сообщение над графическим ключом
+     */
+    message?: ReactNode;
+    /**
+     * Идентификатор для систем автоматизированного тестирования.
+     * Для сообщения используется модификатор -message, ошибки -error,
+     * кнопки "забыли код" -forgot-code-btn
+     */
+    dataTestId?: string;
+    /**
+     * Следить ли за изменениями значений цветовых токенов
+     * @default false
+     */
+    observeTokens?: boolean;
+    /**
+     * Параметры MutationObserver для наблюдения за изменениями режима(css custom properties)
+     */
+    observerParams?: {
+        getTarget?: () => Node;
+        options?: MutationObserverInit;
+    };
+    /**
+     * Дополнительный класс для 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;
+    ACCENT_FAILURE: string;
+    RING_BG_INITIAL: string;
+    SELECTED_RING_BG_INITIAL: string;
+    SELECTED_RING_BG_SUCCESS: string;
+    SELECTED_RING_BG_FAILURE: string;
+    PRIMARY: string;
+    BG: string;
+    HOVER_INNER: string;
+    HOVER_OUTER: string;
+};
+export { CommonPatternLockProps, PrivatePatternLockProps, PatternLockProps, ObservableTokens };

package/typings.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/utils.d.ts

@@ -0,0 +1,16 @@
+import { Theme, ThemeParams } from '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;
+    error: string;
+    message: string;
+};
+export { getDefaultObserveTarget, getColorByToken, getSizes, getTheme, getPatternLockTestIds };

package/utils.js

@@ -0,0 +1,96 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var coreComponentsShared = require('@alfalab/core-components-shared');
+var consts = require('./consts.js');
+
+function getDefaultObserveTarget() {
+    return document.head;
+}
+function getColorByToken(token) {
+    return getComputedStyle(document.documentElement).getPropertyValue(token);
+}
+var getSizes = (function () {
+    var COMMON_SIZES = {
+        lineWidth: 6,
+        nodeRing: 0,
+        nodeCore: 12,
+    };
+    var cachedSize;
+    return function () {
+        if (cachedSize) {
+            return cachedSize;
+        }
+        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,
+                height: 322,
+            };
+        }
+        else if (window.matchMedia('(min-width: 360px)').matches) {
+            cachedSize = {
+                elementSizes: tslib.__assign(tslib.__assign({}, COMMON_SIZES), { nodeRadius: 38 }),
+                width: 292,
+                height: 292,
+            };
+        }
+        else {
+            cachedSize = {
+                elementSizes: tslib.__assign(tslib.__assign({}, COMMON_SIZES), { nodeRadius: 32 }),
+                width: 240,
+                height: 240,
+            };
+        }
+        return cachedSize;
+    };
+})();
+function getTheme(dimens) {
+    var _a;
+    var baseColors = {
+        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] = {
+            colors: tslib.__assign(tslib.__assign({}, baseColors), { accent: getColorByToken(consts.OBSERVABLE_TOKENS.ACCENT_INITIAL), selectedRingBg: getColorByToken(consts.OBSERVABLE_TOKENS.SELECTED_RING_BG_INITIAL) }),
+            dimens: dimens,
+        },
+        _a[consts.THEME_STATE.SUCCESS] = {
+            colors: tslib.__assign(tslib.__assign({}, baseColors), { accent: getColorByToken(consts.OBSERVABLE_TOKENS.ACCENT_SUCCESS), selectedRingBg: getColorByToken(consts.OBSERVABLE_TOKENS.SELECTED_RING_BG_SUCCESS) }),
+            dimens: dimens,
+        },
+        _a[consts.THEME_STATE.FAILURE] = {
+            colors: tslib.__assign(tslib.__assign({}, baseColors), { accent: getColorByToken(consts.OBSERVABLE_TOKENS.ACCENT_FAILURE), selectedRingBg: getColorByToken(consts.OBSERVABLE_TOKENS.SELECTED_RING_BG_FAILURE) }),
+            dimens: dimens,
+        },
+        _a;
+}
+function getPatternLockTestIds(dataTestId) {
+    return {
+        patternLock: dataTestId,
+        forgotCodeBtn: coreComponentsShared.getDataTestId(dataTestId, 'forgot-code-btn'),
+        error: coreComponentsShared.getDataTestId(dataTestId, 'error'),
+        message: coreComponentsShared.getDataTestId(dataTestId, 'message'),
+    };
+}
+
+exports.getColorByToken = getColorByToken;
+exports.getDefaultObserveTarget = getDefaultObserveTarget;
+exports.getPatternLockTestIds = getPatternLockTestIds;
+exports.getSizes = getSizes;
+exports.getTheme = getTheme;