@alfalab/core-components 19.11.1 → 20.0.0

package/calendar-range/cssm/index.d.ts

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

package/calendar-range/cssm/index.js

@@ -1,16 +0,0 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var Component = require('./Component.js');
-require('react');
-require('classnames');
-require('date-fns');
-require('../../calendar/cssm');
-require('../../calendar-input/cssm');
-require('./utils.js');
-require('./useCalendarMonthes.js');
-require('./useCalendarMaxMinDates.js');
-require('./index.module.css');
-
-
-
-exports.CalendarRange = Component.CalendarRange;

package/calendar-range/cssm/index.module.css

@@ -1,38 +0,0 @@
-:root {
-    --color-light-graphic-primary: #0b1f35;
-
-    /* TODO: цвета добавлены руками. Обновить токены */
-    --color-light-text-secondary-inverted-transparent: rgba(255, 255, 255, 0.7);
-}
-:root {
-
-    /* Hard */
-
-    /* Up */
-
-    /* Hard up */
-}
-:root {
-    --gap-xs: 8px;
-}
-.component {
-    display: flex
-}
-.component button[aria-selected='true'] {
-        cursor: pointer;
-    }
-.divider {
-    height: 48px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 16px;
-    margin: 0 var(--gap-xs)
-}
-.divider:after {
-        content: '';
-        display: block;
-        width: 100%;
-        height: 1px;
-        background-color: var(--color-light-graphic-primary);
-    }

package/calendar-range/cssm/useCalendarMaxMinDates.d.ts

@@ -1,16 +0,0 @@
-type useMaxMinDatesProps = {
-    isPopover: boolean;
-    monthTo: number;
-    monthFrom: number;
-    selectedTo?: number;
-    selectedFrom?: number;
-    maxDate?: number;
-    minDate?: number;
-};
-declare function useCalendarMaxMinDates({ isPopover, monthTo, monthFrom, selectedTo, selectedFrom, maxDate, minDate, }: useMaxMinDatesProps): {
-    fromMinDate: number | undefined;
-    toMaxDate: number | undefined;
-    fromMaxDate: number | undefined;
-    toMinDate: number | undefined;
-};
-export { useCalendarMaxMinDates };

package/calendar-range/cssm/useCalendarMaxMinDates.js

@@ -1,20 +0,0 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var dateFns = require('date-fns');
-var coreComponentsCalendar = require('../../calendar/cssm');
-
-function useCalendarMaxMinDates(_a) {
-    var isPopover = _a.isPopover, monthTo = _a.monthTo, monthFrom = _a.monthFrom, selectedTo = _a.selectedTo, selectedFrom = _a.selectedFrom, maxDate = _a.maxDate, minDate = _a.minDate;
-    var popoverFromMaxDate = selectedTo || maxDate;
-    var fromMaxDate = coreComponentsCalendar.limitDate(dateFns.endOfMonth(monthFrom), minDate, maxDate).getTime();
-    var popoverToMinDate = selectedFrom || minDate;
-    var toMinDate = coreComponentsCalendar.limitDate(dateFns.startOfMonth(monthTo), minDate, maxDate).getTime();
-    return {
-        fromMinDate: minDate,
-        toMaxDate: maxDate,
-        fromMaxDate: isPopover ? popoverFromMaxDate : fromMaxDate,
-        toMinDate: isPopover ? popoverToMinDate : toMinDate,
-    };
-}
-
-exports.useCalendarMaxMinDates = useCalendarMaxMinDates;

package/calendar-range/cssm/useCalendarMonthes.d.ts

@@ -1,14 +0,0 @@
-import { ValueState } from "./utils";
-type useMonthProps = {
-    defaultMonth: number;
-    isPopover: boolean;
-    inputValueFrom: ValueState;
-    inputValueTo: ValueState;
-};
-declare function useCalendarMonthes({ inputValueFrom, inputValueTo, defaultMonth, isPopover, }: useMonthProps): {
-    monthFrom: number;
-    monthTo: number;
-    handleMonthFromChange: (newMonthFrom: number) => void;
-    handleMonthToChange: (newMonthTo: number) => void;
-};
-export { useCalendarMonthes };

package/calendar-range/cssm/useCalendarMonthes.js

@@ -1,44 +0,0 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var dateFns = require('date-fns');
-
-function useCalendarMonthes(_a) {
-    var inputValueFrom = _a.inputValueFrom, inputValueTo = _a.inputValueTo, defaultMonth = _a.defaultMonth, isPopover = _a.isPopover;
-    var initialMonthFrom = !inputValueFrom.value || !inputValueFrom.date
-        ? defaultMonth
-        : dateFns.startOfMonth(inputValueFrom.date).getTime();
-    var initialMonthTo = isPopover ? initialMonthFrom : dateFns.addMonths(initialMonthFrom, 1).getTime();
-    var _b = React.useState(initialMonthFrom), monthFrom = _b[0], setMonthFrom = _b[1];
-    var _c = React.useState(initialMonthTo), monthTo = _c[0], setMonthTo = _c[1];
-    var handleMonthFromChange = React.useCallback(function (newMonthFrom) {
-        setMonthFrom(newMonthFrom);
-        if (!isPopover) {
-            var nextMonth = dateFns.addMonths(newMonthFrom, 1).getTime();
-            setMonthTo(nextMonth);
-            return;
-        }
-        if (!inputValueTo.date) {
-            setMonthTo(newMonthFrom);
-        }
-    }, [isPopover, setMonthFrom, setMonthTo, inputValueTo]);
-    var handleMonthToChange = React.useCallback(function (newMonthTo) {
-        setMonthTo(newMonthTo);
-        if (!isPopover) {
-            var prevMonth = dateFns.subMonths(newMonthTo, 1).getTime();
-            setMonthFrom(prevMonth);
-            return;
-        }
-        if (!inputValueFrom.date) {
-            setMonthFrom(newMonthTo);
-        }
-    }, [isPopover, setMonthFrom, setMonthTo, inputValueFrom]);
-    return {
-        monthFrom: monthFrom,
-        monthTo: monthTo,
-        handleMonthFromChange: handleMonthFromChange,
-        handleMonthToChange: handleMonthToChange,
-    };
-}
-
-exports.useCalendarMonthes = useCalendarMonthes;

package/calendar-range/cssm/utils.d.ts

@@ -1,11 +0,0 @@
-type ValueState = {
-    date: number | null;
-    value: string;
-};
-declare const initialValueState: {
-    date: null;
-    value: string;
-};
-declare const getCorrectValueState: (stateValue: ValueState, propValue?: string | undefined, minDate?: number | undefined, maxDate?: number | undefined) => ValueState;
-declare const isDayButton: (node: HTMLElement | null) => string | false | null | undefined;
-export { ValueState, initialValueState, getCorrectValueState, isDayButton };

package/calendar-range/cssm/utils.js

@@ -1,22 +0,0 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var coreComponentsCalendar = require('../../calendar/cssm');
-var coreComponentsCalendarInput = require('../../calendar-input/cssm');
-
-var initialValueState = { date: null, value: '' };
-var getCorrectValueState = function (stateValue, propValue, minDate, maxDate) {
-    var state = propValue === undefined
-        ? stateValue
-        : { value: propValue, date: coreComponentsCalendarInput.parseDateString(propValue).getTime() };
-    if (!coreComponentsCalendar.dateInLimits(state.date, minDate, maxDate)) {
-        state.date = null;
-    }
-    return state;
-};
-var isDayButton = function (node) {
-    return node && node.tagName === 'BUTTON' && node.dataset.date;
-};
-
-exports.getCorrectValueState = getCorrectValueState;
-exports.initialValueState = initialValueState;
-exports.isDayButton = isDayButton;

package/calendar-with-skeleton/cssm/Component.d.ts

@@ -1,24 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-import { CalendarProps } from "../../calendar";
-type CalendarWithSkeletonProps = CalendarProps & {
-    /**
-     * Флаг включения анимации скелета
-     */
-    animate?: boolean;
-    /**
-     * Флаг управлением видимостью календаря
-     */
-    calendarVisible?: boolean;
-};
-declare const CalendarWithSkeleton: React.ForwardRefExoticComponent<CalendarProps & {
-    /**
-     * Флаг включения анимации скелета
-     */
-    animate?: boolean | undefined;
-    /**
-     * Флаг управлением видимостью календаря
-     */
-    calendarVisible?: boolean | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
-export { CalendarWithSkeletonProps, CalendarWithSkeleton };

package/calendar-with-skeleton/cssm/Component.js

@@ -1,74 +0,0 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var cn = require('classnames');
-var reactTransitionGroup = require('react-transition-group');
-var coreComponentsSkeleton = require('../../skeleton/cssm');
-var coreComponentsCalendar = require('../../calendar/cssm');
-var styles = require('./index.module.css');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
-var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
-
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-var __assign = function () {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s)
-                if (Object.prototype.hasOwnProperty.call(s, p))
-                    t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-function __rest(s, e) {
-    var t = {};
-    for (var p in s)
-        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-            t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-var CalendarWithSkeleton = React.forwardRef(function (_a, ref) {
-    var _b;
-    var _c = _a.calendarVisible, calendarVisible = _c === void 0 ? true : _c, _d = _a.animate, animate = _d === void 0 ? true : _d, restProps = __rest(_a, ["calendarVisible", "animate"]);
-    var skeletonProps = { visible: true, animate: animate };
-    return (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].component, (_b = {},
-            _b[styles__default['default'].calendarVisible] = calendarVisible,
-            _b)) },
-        calendarVisible && React__default['default'].createElement(coreComponentsCalendar.Calendar, __assign({ ref: ref }, restProps)),
-        React__default['default'].createElement(reactTransitionGroup.CSSTransition, { in: !calendarVisible, timeout: 200, unmountOnExit: true, classNames: styles__default['default'] },
-            React__default['default'].createElement("div", { className: styles__default['default'].skeleton, ref: calendarVisible ? undefined : ref },
-                React__default['default'].createElement(coreComponentsSkeleton.Skeleton, __assign({}, skeletonProps, { className: styles__default['default'].header })),
-                React__default['default'].createElement(coreComponentsSkeleton.Skeleton, __assign({}, skeletonProps, { className: styles__default['default'].weekDays })),
-                React__default['default'].createElement(coreComponentsSkeleton.Skeleton, __assign({}, skeletonProps, { className: styles__default['default'].row })),
-                React__default['default'].createElement(coreComponentsSkeleton.Skeleton, __assign({}, skeletonProps, { className: styles__default['default'].row })),
-                React__default['default'].createElement(coreComponentsSkeleton.Skeleton, __assign({}, skeletonProps, { className: styles__default['default'].row })),
-                React__default['default'].createElement(coreComponentsSkeleton.Skeleton, __assign({}, skeletonProps, { className: styles__default['default'].row })),
-                React__default['default'].createElement(coreComponentsSkeleton.Skeleton, __assign({}, skeletonProps, { className: styles__default['default'].row }))))));
-});
-
-exports.CalendarWithSkeleton = CalendarWithSkeleton;

package/calendar-with-skeleton/cssm/index.d.ts

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

package/calendar-with-skeleton/cssm/index.js

@@ -1,13 +0,0 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var Component = require('./Component.js');
-require('react');
-require('classnames');
-require('react-transition-group');
-require('../../skeleton/cssm');
-require('../../calendar/cssm');
-require('./index.module.css');
-
-
-
-exports.CalendarWithSkeleton = Component.CalendarWithSkeleton;

package/calendar-with-skeleton/cssm/index.module.css

@@ -1,63 +0,0 @@
-:root {
-    --color-light-bg-primary: #fff;
-
-    /* TODO: цвета добавлены руками. Обновить токены */
-    --color-light-text-secondary-inverted-transparent: rgba(255, 255, 255, 0.7);
-}
-:root {
-
-    /* Hard */
-
-    /* Up */
-
-    /* Hard up */
-}
-:root {
-    --gap-m: 16px;
-    --gap-l: 20px;
-}
-.component {
-    width: var(--calendar-width);
-    height: var(--calendar-height);
-    position: relative;
-}
-.calendarVisible {
-    height: auto;
-}
-.skeleton {
-    display: flex;
-    flex-direction: column;
-    padding: var(--gap-m);
-    pointer-events: all;
-    box-sizing: border-box;
-    position: absolute;
-    transition: 0.2s ease;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background-color: var(--color-light-bg-primary);
-    background-clip: content-box;
-}
-.header {
-    height: 48px;
-    margin-bottom: var(--gap-l);
-}
-.weekDays {
-    height: 12px;
-    margin-bottom: var(--gap-m);
-}
-.row {
-    height: 32px
-}
-.row + .row {
-        margin-top: 10px;
-    }
-.enter,
-.enterActive,
-.exit {
-    opacity: 1;
-}
-.exitActive {
-    opacity: 0;
-}

package/card-image/cssm/Component.d.ts

@@ -1,50 +0,0 @@
-import { FC } from 'react';
-declare const ASPECT_RATIO = 0.63;
-declare const DEFAULT_WIDTH = 280;
-declare const DEFAULT_BASE_URL = "https://online.alfabank.ru/cards-images/cards/";
-type CardImageProps = {
-    /**
-     * Идентификатор карты
-     * (например: ER, GQ, SU)
-     */
-    cardId?: string;
-    /**
-     * Какие слои показывать, через запятую без пробелов
-     * (полный набор: BACKGROUND,CARD_NUMBER,CARD_HOLDER,PAY_PASS,CHIP,LOGO,PAYMENT_SYSTEM,RESERVED_1,RESERVED_2,VALID_DATE)
-     */
-    layers?: string;
-    /**
-     * Ширина изображения
-     */
-    width?: number;
-    /**
-     * Скругление углов
-     */
-    rounded?: boolean;
-    /**
-     * Базовый URL сервиса с изображениями
-     */
-    baseUrl?: string;
-    /**
-     * Колбек, вызываемый при загрузке изображения
-     */
-    onLoad?: () => void;
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    alt?: string;
-    /**
-     * Уникальный идентификатор блока
-     */
-    id?: string;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
-};
-declare const CardImage: FC<CardImageProps>;
-export { ASPECT_RATIO, DEFAULT_WIDTH, DEFAULT_BASE_URL, CardImageProps, CardImage };

package/card-image/cssm/Component.js

@@ -1,38 +0,0 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var cn = require('classnames');
-var styles = require('./index.module.css');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
-var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
-
-var ASPECT_RATIO = 0.63;
-var DEFAULT_WIDTH = 280;
-var DEFAULT_BASE_URL = 'https://online.alfabank.ru/cards-images/cards/';
-var CardImage = function (_a) {
-    var cardId = _a.cardId, _b = _a.layers, layers = _b === void 0 ? 'BACKGROUND,CARD_NUMBER,CARD_HOLDER,PAY_PASS,CHIP,LOGO,PAYMENT_SYSTEM,RESERVED_1,RESERVED_2,VALID_DATE' : _b, _c = _a.width, width = _c === void 0 ? DEFAULT_WIDTH : _c, _d = _a.baseUrl, baseUrl = _d === void 0 ? DEFAULT_BASE_URL : _d, _e = _a.rounded, rounded = _e === void 0 ? true : _e, alt = _a.alt, id = _a.id, dataTestId = _a.dataTestId, onLoad = _a.onLoad, className = _a.className;
-    var _f = React.useState(false), loaded = _f[0], setLoaded = _f[1];
-    var image = React.useRef(null);
-    var height = width * ASPECT_RATIO;
-    var handleLoadedImage = React.useCallback(function () {
-        setLoaded(true);
-        if (onLoad) {
-            onLoad();
-        }
-    }, [onLoad]);
-    var cardImageUrl = "" + baseUrl + cardId + "/images?layers=" + layers + "&width=" + width;
-    var cardImageUrl2x = "" + baseUrl + cardId + "/images?layers=" + layers + "&width=" + width * 2;
-    return (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].cardImage, rounded && styles__default['default'].rounded, loaded && styles__default['default'].loaded, className), style: {
-            width: width,
-            height: height,
-        }, id: id, "data-test-id": dataTestId }, cardId && (React__default['default'].createElement("img", { ref: image, className: styles__default['default'].image, width: width, height: height, src: cardImageUrl, srcSet: cardImageUrl2x + " 2x", alt: alt, role: 'presentation', onLoad: handleLoadedImage }))));
-};
-
-exports.ASPECT_RATIO = ASPECT_RATIO;
-exports.CardImage = CardImage;
-exports.DEFAULT_BASE_URL = DEFAULT_BASE_URL;
-exports.DEFAULT_WIDTH = DEFAULT_WIDTH;