@alfalab/core-components-circular-progress-bar 3.6.7 → 3.7.0

package/moderncssm/use-timer.js

@@ -0,0 +1,24 @@
+import { useState, useEffect } from 'react';
+import { noop } from '@alfalab/core-components-shared/moderncssm';
+
+const MAX_PERSENT_VALUE = 100;
+function makeTitle(time) {
+    return `${Math.trunc(time / 60)}:${`${time % 60}`.padStart(2, '0')}`;
+}
+function useTimer(time, active = true, counting, interval = 1000, step = 1) {
+    const [passedTime, setPassedTime] = useState(0);
+    const isCompleted = passedTime === time;
+    const persentValue = Math.trunc((passedTime / time) * MAX_PERSENT_VALUE);
+    useEffect(() => {
+        if (!active || isCompleted) {
+            return noop;
+        }
+        const timer = setInterval(() => {
+            setPassedTime((prevPassed) => prevPassed + step);
+        }, interval);
+        return () => clearInterval(timer);
+    }, [interval, isCompleted, active, step]);
+    return [persentValue, makeTitle(counting === 'backward' ? time - passedTime : passedTime)];
+}
+
+export { useTimer };

package/moderncssm/utils/get-circular-progress-bar-test-ids.d.ts

@@ -0,0 +1,8 @@
+declare function getCircularProgressBarTestIds(dataTestId: string): {
+    progressBar: string;
+    title: string;
+    subtitle: string;
+    circleProgressBar: string;
+    circleProgressValue: string;
+};
+export { getCircularProgressBarTestIds };

package/moderncssm/utils/get-circular-progress-bar-test-ids.js

@@ -0,0 +1,13 @@
+import { getDataTestId } from '@alfalab/core-components-shared/moderncssm';
+
+function getCircularProgressBarTestIds(dataTestId) {
+    return {
+        progressBar: dataTestId,
+        title: getDataTestId(dataTestId, 'title'),
+        subtitle: getDataTestId(dataTestId, 'subtitle'),
+        circleProgressBar: getDataTestId(dataTestId, 'circle-progress-bar'),
+        circleProgressValue: getDataTestId(dataTestId, 'circle-progress-value'),
+    };
+}
+
+export { getCircularProgressBarTestIds };

package/moderncssm/utils/is-typography-color.d.ts

@@ -0,0 +1,3 @@
+import { TypographyColor } from "../types/typography-color";
+declare const isTypographyColor: (color: TypographyColor | string) => color is TypographyColor;
+export { isTypographyColor };

package/moderncssm/utils/is-typography-color.js

@@ -0,0 +1,5 @@
+import { TYPOGRAPHY_COLOR } from '../consts.js';
+
+const isTypographyColor = (color) => TYPOGRAPHY_COLOR.includes(color);
+
+export { isTypographyColor };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-circular-progress-bar",
-    "version": "3.6.7",
+    "version": "3.7.0",
     "description": "",
     "keywords": [],
     "license": "MIT",
@@ -12,13 +12,14 @@
     },
     "sideEffects": false,
     "dependencies": {
-        "@alfalab/core-components-typography": "^4.11.3",
+        "@alfalab/core-components-typography": "^4.11.4",
+        "@alfalab/core-components-shared": "^0.14.1",
         "classnames": "^2.5.1",
         "tslib": "^2.4.0"
     },
     "peerDependencies": {
         "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
-    "themesVersion": "13.7.0",
-    "varsVersion": "9.16.0"
+    "themesVersion": "13.7.1",
+    "varsVersion": "9.18.0"
 }

package/shared/index.d.ts

@@ -0,0 +1 @@
+export { getCircularProgressBarTestIds } from "../utils/get-circular-progress-bar-test-ids";

package/shared/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var utils_getCircularProgressBarTestIds = require('../utils/get-circular-progress-bar-test-ids.js');
+
+
+
+exports.getCircularProgressBarTestIds = utils_getCircularProgressBarTestIds.getCircularProgressBarTestIds;

package/shared/package.json

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

package/src/Component.tsx

@@ -1,9 +1,17 @@
+/* eslint-disable complexity */
 import React, { ElementType, ReactNode, useMemo } from 'react';
 import cn from 'classnames';
 
+import { getDataTestId, isObject } from '@alfalab/core-components-shared';
 import { Text, TitleMobile } from '@alfalab/core-components-typography';
 
+import { ComponentSize } from './types/component-size';
+import { TypographyColor } from './types/typography-color';
+import { isTypographyColor } from './utils/is-typography-color';
 import {
+    MAX_PROGRESS_VALUE,
+    MAX_TIMER_VALUE,
+    MIN_TIMER_VALUE,
     SIZE_TO_CLASSNAME_MAP,
     SIZES,
     STROKE,
@@ -11,16 +19,32 @@ import {
     VIEW_TEXT,
     VIEW_TITLE,
 } from './consts';
+import { useTimer } from './use-timer';
 
 import styles from './index.module.css';
 
-export type TypographyColor = 'primary' | 'secondary' | 'tertiary' | 'positive' | 'negative';
-
 export type CircularProgressBarProps = {
     /**
      * Уровень прогресса, %
      */
-    value: number;
+
+    value:
+        | number
+        | {
+              /**
+               * Время таймера в секундах
+               * Минимальное значение 0
+               * Максимальное значение 3600
+               */
+              timer: number;
+              /**
+               * Направлние отсчета таймера
+               * forward: считаем от 0 до указанного значения
+               * backward: считаем от указанного значения до 0
+               * @default backward
+               */
+              counting?: 'forward' | 'backward';
+          };
 
     /**
      * Дополнительный класс
@@ -37,6 +61,18 @@ export type CircularProgressBarProps = {
      */
     contentColor?: TypographyColor | string;
 
+    /**
+     * Цвет заголовка
+     * Приоритет выше чем у `contentColor`
+     */
+    titleColor?: TypographyColor | string;
+
+    /**
+     * Цвет подзаголовка
+     * Приоритет выше чем у `contentColor`
+     */
+    subtitleColor?: TypographyColor | string;
+
     /**
      * Дополнительный текст
      */
@@ -59,9 +95,10 @@ export type CircularProgressBarProps = {
 
     /**
      * Размер (xxl — 144×144px, xl — 128×128px, l — 80×80px, m — 64×64px, s — 48×48px, xs — 24×24px)
-     * @description xs, s, m, l, xl, xxl deprecated, используйте вместо них 24, 48, 64 , 80, 128, 144 соответственно
+     * @description xs, s, m, l, xl, xxl deprecated, используйте вместо них 24, 48, 64, 80, 128, 144 соответственно
+     * @default 64
      */
-    size?: 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs' | 24 | 48 | 64 | 80 | 128 | 144;
+    size?: ComponentSize;
 
     /**
      * Наличие желоба
@@ -134,18 +171,24 @@ export type CircularProgressBarProps = {
      * Цвет желоба
      */
     strokeColor?: string;
+
+    /**
+     * Направление заполнения круга
+     * @default desc
+     */
+    directionType?: 'asc' | 'desc';
 };
 
 /**
  * Компонент круглого прогресс бара.
  */
 export const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
-    value,
+    value: valueFromProps,
     view = 'positive',
     size = 64,
     className,
     dataTestId,
-    title = value ? value.toString() : '0',
+    title: titleFromProps = isObject(valueFromProps) ? null : `${valueFromProps}`,
     titleComplete,
     subtitle,
     contentColor = 'secondary',
@@ -162,7 +205,29 @@ export const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
     progressStrokeColor,
     circleColor,
     strokeColor,
+    directionType = 'asc',
+    titleColor,
+    subtitleColor,
 }) => {
+    const isTimer = isObject(valueFromProps);
+    const [timerValue, timerTitle] = useTimer(
+        isTimer ? Math.min(Math.max(valueFromProps.timer, MIN_TIMER_VALUE), MAX_TIMER_VALUE) : -1,
+        isTimer,
+        isTimer ? valueFromProps.counting ?? 'backward' : 'backward',
+    );
+    let value: number;
+    let title: React.ReactNode;
+
+    if (isTimer) {
+        value = timerValue;
+        title = timerTitle;
+    } else {
+        value = valueFromProps;
+        title = titleFromProps;
+    }
+
+    value = directionType === 'desc' ? MAX_PROGRESS_VALUE - value : value;
+
     const memorized = useMemo(() => {
         const strokeWidth = STROKE[size];
         const maxProgress = 100;
@@ -184,41 +249,70 @@ export const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
             strokeDasharray,
             strokeDashoffset,
         };
-    }, [value, size]);
+    }, [size, value]);
 
     const isComplete = value === 100;
     const isCompleteTextColor = isComplete && completeTextColor;
     const titleContent = titleComplete && isComplete ? titleComplete : title;
     const subtitleContent = subtitleComplete && isComplete ? subtitleComplete : subtitle;
     const IconComponent = IconComplete && isComplete ? IconComplete : Icon;
+
     const typographyContentColor = TYPOGRAPHY_COLOR.includes(contentColor)
         ? (contentColor as TypographyColor)
         : undefined;
 
+    const getTextColor = (color?: TypographyColor | string) => {
+        if (isCompleteTextColor) {
+            return completeTextColor;
+        }
+
+        if (color) {
+            return isTypographyColor(color) ? color : undefined;
+        }
+
+        return typographyContentColor;
+    };
+
+    const getTextStyleColor = (color?: TypographyColor | string) => {
+        if (color) {
+            if (!isTypographyColor(color)) {
+                return { color };
+            }
+
+            return {};
+        }
+
+        return {
+            ...(!typographyContentColor && { color: contentColor }),
+        };
+    };
+
     const renderTitleString = () =>
         SIZES[size] > 64 ? (
             <TitleMobile
                 className={cn(styles.typography, styles.title)}
-                color={isCompleteTextColor ? completeTextColor : typographyContentColor}
+                color={getTextColor(titleColor)}
                 tag='div'
                 font='system'
                 view={VIEW_TITLE[size]}
                 style={{
-                    ...(!typographyContentColor && { color: contentColor }),
+                    ...getTextStyleColor(titleColor),
                 }}
+                dataTestId={getDataTestId(dataTestId, 'title')}
             >
                 {titleContent}
             </TitleMobile>
         ) : (
             <Text
                 className={styles.title}
-                color={isCompleteTextColor ? completeTextColor : typographyContentColor}
+                color={getTextColor(titleColor)}
                 tag='div'
                 weight='bold'
                 view={VIEW_TEXT[size]}
                 style={{
-                    ...(!typographyContentColor && { color: contentColor }),
+                    ...getTextStyleColor(titleColor),
                 }}
+                dataTestId={getDataTestId(dataTestId, 'title')}
             >
                 {titleContent}
             </Text>
@@ -231,10 +325,11 @@ export const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
             <Text
                 tag='div'
                 className={styles.subtitle}
-                color={isCompleteTextColor ? completeTextColor : typographyContentColor}
+                color={getTextColor(subtitleColor)}
                 view='primary-small'
+                dataTestId={getDataTestId(dataTestId, 'subtitle')}
                 style={{
-                    ...(!typographyContentColor && { color: contentColor }),
+                    ...getTextStyleColor(subtitleColor),
                 }}
             >
                 {subtitleContent}
@@ -296,6 +391,7 @@ export const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
                     cy={memorized.center}
                     r={memorized.radius}
                     strokeWidth={STROKE[size]}
+                    data-test-id={getDataTestId(dataTestId, 'circle-progress-bar')}
                 />
                 <circle
                     className={cn(
@@ -317,6 +413,7 @@ export const CircularProgressBar: React.FC<CircularProgressBarProps> = ({
                             : memorized.strokeDashoffset
                     }
                     transform={`rotate(${-90} ${memorized.center} ${memorized.center})`}
+                    data-test-id={getDataTestId(dataTestId, 'circle-progress-value')}
                 />
             </svg>
             <div

package/src/consts.ts

@@ -9,6 +9,7 @@ export const SIZES = {
     48: 48,
     64: 64,
     80: 80,
+    96: 96,
     128: 128,
     144: 144,
 };
@@ -24,6 +25,7 @@ export const STROKE = {
     48: 4,
     64: 6,
     80: 8,
+    96: 8,
     128: 10,
     144: 12,
 };
@@ -39,6 +41,7 @@ export const VIEW_TITLE = {
     48: 'small',
     64: 'small',
     80: 'xsmall',
+    96: 'xsmall',
     128: 'medium',
     144: 'medium',
 } as const;
@@ -54,6 +57,7 @@ export const VIEW_TEXT = {
     48: 'secondary-small',
     64: 'secondary-large',
     80: 'secondary-large',
+    96: 'secondary-large',
     128: 'secondary-large',
     144: 'secondary-large',
 } as const;
@@ -71,6 +75,12 @@ export const SIZE_TO_CLASSNAME_MAP = {
     48: 'size-48',
     64: 'size-64',
     80: 'size-80',
+    96: 'size-96',
     128: 'size-128',
     144: 'size-144',
 };
+
+export const MAX_PROGRESS_VALUE = 100;
+
+export const MIN_TIMER_VALUE = 0;
+export const MAX_TIMER_VALUE = 3599;

package/src/index.module.css

@@ -96,6 +96,19 @@
     }
 }
 
+.size-96 {
+    width: 96px;
+    height: 96px;
+
+    & .labelWrapper {
+        max-width: 64px;
+    }
+
+    & .title {
+        max-height: 20px;
+    }
+}
+
 .size-80 {
     width: 80px;
     height: 80px;
@@ -188,6 +201,11 @@
         max-height: 64px;
     }
 
+    &.size-96 {
+        max-width: 48px;
+        max-height: 48px;
+    }
+
     &.size-80 {
         max-width: 48px;
         max-height: 48px;

package/src/index.ts

@@ -1 +1,2 @@
 export * from './Component';
+export * from './types/typography-color';

package/src/shared/index.ts

@@ -0,0 +1 @@
+export { getCircularProgressBarTestIds } from '../utils/get-circular-progress-bar-test-ids';

package/src/shared/package.json

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

package/src/types/component-size.ts

@@ -0,0 +1 @@
+export type ComponentSize = 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs' | 24 | 48 | 64 | 80 | 128 | 144;

package/src/types/typography-color.ts

@@ -0,0 +1 @@
+export type TypographyColor = 'primary' | 'secondary' | 'tertiary' | 'positive' | 'negative';

package/src/use-timer.ts

@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react';
+
+import { noop } from '@alfalab/core-components-shared';
+
+const MAX_PERSENT_VALUE = 100;
+
+function makeTitle(time: number) {
+    return `${Math.trunc(time / 60)}:${`${time % 60}`.padStart(2, '0')}`;
+}
+
+export function useTimer(
+    time: number,
+    active = true,
+    counting: 'forward' | 'backward',
+    interval = 1000,
+    step = 1,
+): [value: number, title: string] {
+    const [passedTime, setPassedTime] = useState(0);
+    const isCompleted = passedTime === time;
+    const persentValue = Math.trunc((passedTime / time) * MAX_PERSENT_VALUE);
+
+    useEffect(() => {
+        if (!active || isCompleted) {
+            return noop;
+        }
+
+        const timer = setInterval(() => {
+            setPassedTime((prevPassed) => prevPassed + step);
+        }, interval);
+
+        return () => clearInterval(timer);
+    }, [interval, isCompleted, active, step]);
+
+    return [persentValue, makeTitle(counting === 'backward' ? time - passedTime : passedTime)];
+}

package/src/utils/get-circular-progress-bar-test-ids.ts

@@ -0,0 +1,11 @@
+import { getDataTestId } from '@alfalab/core-components-shared';
+
+export function getCircularProgressBarTestIds(dataTestId: string) {
+    return {
+        progressBar: dataTestId,
+        title: getDataTestId(dataTestId, 'title'),
+        subtitle: getDataTestId(dataTestId, 'subtitle'),
+        circleProgressBar: getDataTestId(dataTestId, 'circle-progress-bar'),
+        circleProgressValue: getDataTestId(dataTestId, 'circle-progress-value'),
+    };
+}

package/src/utils/is-typography-color.ts

@@ -0,0 +1,5 @@
+import { TYPOGRAPHY_COLOR } from '../consts';
+import { TypographyColor } from '../types/typography-color';
+
+export const isTypographyColor = (color: TypographyColor | string): color is TypographyColor =>
+    TYPOGRAPHY_COLOR.includes(color);

package/types/component-size.d.ts

@@ -0,0 +1,2 @@
+type ComponentSize = 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs' | 24 | 48 | 64 | 80 | 128 | 144;
+export { ComponentSize };

package/types/component-size.js

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

package/types/typography-color.d.ts

@@ -0,0 +1,2 @@
+type TypographyColor = 'primary' | 'secondary' | 'tertiary' | 'positive' | 'negative';
+export { TypographyColor };

package/types/typography-color.js

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

package/use-timer.d.ts

@@ -0,0 +1,2 @@
+declare function useTimer(time: number, active: boolean | undefined, counting: 'forward' | 'backward', interval?: number, step?: number): [value: number, title: string];
+export { useTimer };

package/use-timer.js

@@ -0,0 +1,31 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var coreComponentsShared = require('@alfalab/core-components-shared');
+
+var MAX_PERSENT_VALUE = 100;
+function makeTitle(time) {
+    return "".concat(Math.trunc(time / 60), ":").concat("".concat(time % 60).padStart(2, '0'));
+}
+function useTimer(time, active, counting, interval, step) {
+    if (active === void 0) { active = true; }
+    if (interval === void 0) { interval = 1000; }
+    if (step === void 0) { step = 1; }
+    var _a = React.useState(0), passedTime = _a[0], setPassedTime = _a[1];
+    var isCompleted = passedTime === time;
+    var persentValue = Math.trunc((passedTime / time) * MAX_PERSENT_VALUE);
+    React.useEffect(function () {
+        if (!active || isCompleted) {
+            return coreComponentsShared.noop;
+        }
+        var timer = setInterval(function () {
+            setPassedTime(function (prevPassed) { return prevPassed + step; });
+        }, interval);
+        return function () { return clearInterval(timer); };
+    }, [interval, isCompleted, active, step]);
+    return [persentValue, makeTitle(counting === 'backward' ? time - passedTime : passedTime)];
+}
+
+exports.useTimer = useTimer;

package/utils/get-circular-progress-bar-test-ids.d.ts

@@ -0,0 +1,8 @@
+declare function getCircularProgressBarTestIds(dataTestId: string): {
+    progressBar: string;
+    title: string;
+    subtitle: string;
+    circleProgressBar: string;
+    circleProgressValue: string;
+};
+export { getCircularProgressBarTestIds };

package/utils/get-circular-progress-bar-test-ids.js

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var coreComponentsShared = require('@alfalab/core-components-shared');
+
+function getCircularProgressBarTestIds(dataTestId) {
+    return {
+        progressBar: dataTestId,
+        title: coreComponentsShared.getDataTestId(dataTestId, 'title'),
+        subtitle: coreComponentsShared.getDataTestId(dataTestId, 'subtitle'),
+        circleProgressBar: coreComponentsShared.getDataTestId(dataTestId, 'circle-progress-bar'),
+        circleProgressValue: coreComponentsShared.getDataTestId(dataTestId, 'circle-progress-value'),
+    };
+}
+
+exports.getCircularProgressBarTestIds = getCircularProgressBarTestIds;

package/utils/is-typography-color.d.ts

@@ -0,0 +1,3 @@
+import { TypographyColor } from "../types/typography-color";
+declare const isTypographyColor: (color: TypographyColor | string) => color is TypographyColor;
+export { isTypographyColor };

package/utils/is-typography-color.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var consts = require('../consts.js');
+
+var isTypographyColor = function (color) {
+    return consts.TYPOGRAPHY_COLOR.includes(color);
+};
+
+exports.isTypographyColor = isTypographyColor;