intelicoreact 1.6.1 → 1.6.3

package/dist/ArrayElement.d.ts

@@ -0,0 +1,13 @@
+import type { PrettyPrint } from './PrettyPrint';
+
+/**
+ * Извлекает тип элементов массива.
+ * @template T - Тип массива
+ * @example
+ * type Numbers = number[]
+ * type NumberType = ArrayElement<Numbers> // number
+ *
+ * type MixedArray = (string | number)[]
+ * type ElementType = ArrayElement<MixedArray> // string | number
+ */
+export type ArrayElement<T> = PrettyPrint<T extends (infer U)[] ? U : never>

package/dist/AsyncReturnType.d.ts

@@ -0,0 +1,17 @@
+import type { PrettyPrint } from './PrettyPrint';
+
+/**
+ * Извлекает тип значения, возвращаемого асинхронной функцией.
+ * @template T - Тип асинхронной функции
+ * @example
+ * async function fetchUser() {
+ *   return { id: 1, name: 'John' }
+ * }
+ *
+ * type User = AsyncReturnType<typeof fetchUser>
+ *  { id: number; name: string }
+ *
+ * type Response = AsyncReturnType<() => Promise<string>>
+ * string
+ */
+export type AsyncReturnType<T extends (...args: any) => Promise<any>> = PrettyPrint<T extends (...args: any) => Promise<infer R> ? R : never>

package/dist/Atomic/UI/MonoAccordion/MonoAccordion.js

@@ -9,8 +9,8 @@ Object.defineProperty(exports, "default", {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
 require("./MonoAccordion.scss");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
@@ -58,61 +58,62 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const RC = 'mono-accordion';
-const dataSetDefault = {};
-const MonoAccordion = ({ titleJSX, icon, children, isOpen, onClick, className, disabled = false, testId = 'mono-accordion', datasetProp = dataSetDefault })=>{
-    const contentRef = (0, _react.useRef)(null);
-    const containerRef = (0, _react.useRef)(null);
-    const handleClick = (0, _react.useCallback)((e)=>{
-        e.stopPropagation();
-        if (!disabled) {
+const RC = "mono-accordion";
+const MonoAccordion = ({ titleJSX, icon, children, isOpen, onClick, className, disabled, testId = "mono-accordion", datasetProp = {} })=>{
+    const [maxHeight, setMaxHeight] = (0, _react.useState)();
+    const titleRef = (0, _react.useRef)();
+    const containerRef = (0, _react.useRef)();
+    const setHeight = (value)=>{
+        if (value !== undefined) setMaxHeight((state)=>`${value}px`);
+        else setMaxHeight((state)=>{
+            var _Array_from_reduce, _Array_from, _containerRef_current;
+            return `${(_Array_from = Array.from((_containerRef_current = containerRef.current) === null || _containerRef_current === void 0 ? void 0 : _containerRef_current.childNodes)) === null || _Array_from === void 0 ? void 0 : (_Array_from_reduce = _Array_from.reduce) === null || _Array_from_reduce === void 0 ? void 0 : _Array_from_reduce.call(_Array_from, (acc, el)=>acc + el.offsetHeight, 0)}px`;
+        });
+    };
+    const handleClick = (e)=>{
+        if (!Array.from(titleRef.current.childNodes).some((el)=>el.contains(e.target))) {
             onClick(e);
-        }
-    }, [
-        onClick,
-        disabled
-    ]);
-    // Обновляем CSS переменную с высотой контента при изменении содержимого
+            e === null || e === void 0 ? void 0 : e.preventDefault();
+            e === null || e === void 0 ? void 0 : e.stopPropagation();
+        } else return e;
+    };
     (0, _react.useEffect)(()=>{
-        if (containerRef.current && contentRef.current) {
-            const height = contentRef.current.scrollHeight;
-            containerRef.current.style.setProperty('--content-height', `${height}px`);
-        }
+        if (!isOpen) setHeight(0);
+        else setHeight();
     }, [
-        children,
-        isOpen
+        isOpen,
+        children
     ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
         ...datasetProp,
         "data-testid": testId,
         className: (0, _classnames.default)(RC, className, {
-            [`${RC}--is-open`]: isOpen,
-            [`${RC}--disabled`]: disabled
+            [`${RC}_is-open`]: isOpen,
+            [`${RC}_disabled`]: disabled
         }),
         children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsxs)("button", {
-                type: "button",
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                 className: `${RC}__head`,
                 onClick: handleClick,
-                "aria-expanded": isOpen,
-                disabled: disabled,
                 children: [
                     /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                        className: `${RC}__title-container`,
+                        ref: titleRef,
+                        className: `${RC}__tile-container`,
                         children: titleJSX
                     }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                         className: `${RC}__icon-container`,
-                        "aria-hidden": "true",
                         children: icon
                     })
                 ]
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                 ref: containerRef,
-                className: `${RC}__container`,
+                style: {
+                    maxHeight
+                },
+                className: (0, _classnames.default)(`${RC}__container`),
                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                    ref: contentRef,
                     className: `${RC}__content-wrapper`,
                     children: children
                 })

package/dist/Atomic/UI/MonoAccordion/MonoAccordion.scss

@@ -2,215 +2,68 @@
 @use "../../../scss/mixins";
 
 .mono-accordion {
-  // Layout & Spacing
-  --accordion-padding-x: 15px;
-  --accordion-padding-y: 10px;
-  --accordion-padding: var(--accordion-padding-y, 10px)
-    var(--accordion-padding-x, 15px);
-  --accordion-nested-margin: 10px;
-  --accordion-icon-margin: 12px;
-  --accordion-border-radius: 0px;
-  --accordion-max-width: 100%;
-  --accordion-min-width: auto;
-
-  // Typography
-  --accordion-font-size: 13px;
-  --accordion-font-weight: 400;
-  --accordion-line-height: 1.4;
-  --accordion-title-font-size: var(--accordion-font-size, 13px);
-  --accordion-title-font-weight: 500;
-  --accordion-content-font-size: var(--accordion-font-size, 13px);
-
-  // Colors
-  --accordion-bg: transparent;
-  --accordion-hover-bg: var(--color-gray-gentle, #{vars.$color--gray-gentel});
-  --accordion-active-bg: var(--accordion-hover-bg);
-  --accordion-text-color: inherit;
-  --accordion-title-color: var(--accordion-text-color, inherit);
-  --accordion-content-color: var(--accordion-text-color, inherit);
-  --accordion-icon-color: currentColor;
-  --accordion-disabled-opacity: 0.5;
-
-  // Borders
-  --accordion-border-width: 0px;
-  --accordion-border-style: solid;
-  --accordion-border-color: transparent;
-  --accordion-focus-ring-color: #4a90e2;
-  --accordion-focus-ring-width: 2px;
-  --accordion-focus-ring-offset: -2px;
-
-  // Animation
-  --accordion-transition-duration: 350ms;
-  --accordion-transition-timing: cubic-bezier(0.34, 1.56, 0.64, 1);
-  --accordion-icon-rotation: 180deg;
-  --accordion-scale-factor: 0.98;
-  --accordion-content-origin: top;
-
-  // Icons
-  --accordion-icon-size: 1em;
-  --accordion-icon-rotation-initial: 0deg;
-
-  // Z-index
-  --accordion-head-z-index: 1;
-  --accordion-content-z-index: 0;
-  width: var(--accordion-max-width, 100%);
-  min-width: var(--accordion-min-width, auto);
   height: fit-content;
 
-  font-size: var(--accordion-font-size, 13px);
-  line-height: var(--accordion-line-height, 1.4);
-
-  color: var(--accordion-text-color, inherit);
-  border: var(--accordion-border-width, 0px)
-    var(--accordion-border-style, solid)
-    var(--accordion-border-color, transparent);
-  border-radius: var(--accordion-border-radius, 0px);
-  background: var(--accordion-bg, transparent);
-
-  // Стили для вложенных аккордеонов
-  .mono-accordion {
-    margin: var(--accordion-nested-margin, 10px) 0;
-
-    .mono-accordion__container {
-      max-height: 0;
-    }
-
-    &--is-open {
-      .mono-accordion__container {
-        max-height: var(--content-height, 1000px);
-      }
-
-      .mono-accordion__content-wrapper {
-        opacity: 1;
-
-        transform: scale(1);
-      }
-    }
-  }
-
   &__head {
-    z-index: var(--accordion-head-z-index, 1);
-
     display: flex;
     justify-content: space-between;
     align-items: center;
 
-    width: 100%;
-    padding: var(--accordion-padding, 10px 15px);
+    height: fit-content;
+    padding: 10px 15px;
 
-    font-size: var(--accordion-title-font-size, 13px);
-    font-weight: var(--accordion-title-font-weight, 500);
     cursor: pointer;
-    text-align: left;
-
-    color: var(--accordion-title-color, inherit);
-    border: none;
-    background: none;
-
-    transition: background-color var(--accordion-transition-duration, 350ms)
-      ease;
-    transform: translateZ(0);
 
     &:hover {
-      background-color: var(--accordion-hover-bg, #{vars.$color--gray-gentel});
-    }
-
-    &:active {
-      background-color: var(--accordion-active-bg, #{vars.$color--gray-gentel});
-    }
-
-    &:focus-visible {
-      outline: var(--accordion-focus-ring-width, 2px) solid
-        var(--accordion-focus-ring-color, #4a90e2);
-      outline-offset: var(--accordion-focus-ring-offset, -2px);
+      background-color: vars.$color--gray-gentel;
     }
   }
 
   &__icon-container {
     display: flex;
-    flex-shrink: 0;
+    flex-flow: row nowrap;
     justify-content: center;
     align-items: center;
 
-    margin-left: var(--accordion-icon-margin, 12px);
-
-    font-size: var(--accordion-icon-size, 1em);
-
-    color: var(--accordion-icon-color, currentColor);
-
-    transition: transform var(--accordion-transition-duration, 350ms)
-      var(--accordion-transition-timing, cubic-bezier(0.34, 1.56, 0.64, 1));
-    transform: rotate(var(--accordion-icon-rotation-initial, 0deg));
+    width: fit-content;
+    height: 100%;
   }
 
-  &__title-container {
+  &__tile-container {
     flex-grow: 1;
   }
 
   &__container {
-    z-index: var(--accordion-content-z-index, 0);
-
+    display: flex;
     overflow: hidden;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
 
-    max-height: 0;
+    font-size: 13px;
 
-    transition: max-height var(--accordion-transition-duration, 350ms)
-      var(--accordion-transition-timing, cubic-bezier(0.34, 1.56, 0.64, 1));
+    transition: all 0.25s ease-out;
+
+    @include mixins.custom-scroll;
   }
 
   &__content-wrapper {
-    padding: 0 var(--accordion-padding-x, 15px);
-
-    font-size: var(--accordion-content-font-size, 13px);
-
-    opacity: 0;
-    color: var(--accordion-content-color, inherit);
-
-    transition:
-      opacity var(--accordion-transition-duration, 350ms)
-        var(--accordion-transition-timing, cubic-bezier(0.34, 1.56, 0.64, 1)),
-      transform var(--accordion-transition-duration, 350ms)
-        var(--accordion-transition-timing, cubic-bezier(0.34, 1.56, 0.64, 1));
-    transform: scale(var(--accordion-scale-factor, 0.98));
-    transform-origin: var(--accordion-content-origin, top);
-    will-change: transform, opacity;
+    padding: 0 15px;
   }
 
-  &--is-open {
-    > .mono-accordion__container {
-      max-height: var(--content-height, 1000px);
-    }
-
-    > .mono-accordion__container .mono-accordion__content-wrapper {
-      opacity: 1;
+  &_open {
+    .mono-accordion__container {
+      padding: 10px 15px;
 
-      transform: scale(1);
+      transition: all 0.25s ease-out;
     }
 
-    > .mono-accordion__head .mono-accordion__icon-container {
-      transform: rotate(var(--accordion-icon-rotation, 180deg));
+    .mono-accordion__content-wrapper {
+      pointer-events: initial;
     }
   }
 
-  &--disabled {
+  &_disabled {
     pointer-events: none;
-
-    opacity: var(--accordion-disabled-opacity, 0.5);
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    --accordion-transition-duration: 0ms;
-
-    &__content-wrapper {
-      transform: none;
-    }
-  }
-
-  @media (max-width: 768px) {
-    --accordion-padding-x: 12px;
-    --accordion-padding-y: 8px;
-    --accordion-nested-margin: 8px;
-    --accordion-icon-margin: 8px;
-    --accordion-font-size: 14px;
   }
 }

package/dist/Atomic/UI/MonoAccordion/MonoAccordion.stories.js

@@ -1,4 +1,3 @@
-// @ts-expect-error
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -99,7 +98,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const _default = {
-    title: 'UI/Accordion',
+    title: 'UI/MonoAccordion',
     component: _MonoAccordion.default,
     parameters: {
         docs: {

package/dist/Atomic/UI/PieChart/PieChart.js

@@ -9,8 +9,8 @@ Object.defineProperty(exports, "default", {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
 const _chart = require("chart.js");
-const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
 const _reactchartjs2 = require("react-chartjs-2");
 require("./PieChart.scss");
 function _interop_require_default(obj) {
@@ -18,74 +18,28 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-_chart.Chart.register(_chart.ArcElement, _chart.Tooltip, _chart.Legend);
-const CN = 'pie-chart-box';
-const PieChart = ({ data, cutout = '80%', resultLabel, resultValue = 0, withLegend = false, chartTitle = 'Pie Chart', chartDescription = 'Statistical data visualization', className, testId = CN, styles, ...chartOptions })=>{
+_chart.Chart.register(_chart.ArcElement, _chart.Tooltip);
+const PieChart = ({ data, cutout = "80%", resultLabel, resultValue = 0, withLegend = false })=>{
     const options = {
         cutout,
         plugins: {
             legend: {
-                display: withLegend,
-                position: 'left',
-                align: 'center',
-                labels: {
-                    usePointStyle: true,
-                    padding: 20,
-                    font: {
-                        size: 12
-                    }
-                }
-            },
-            // Добавляем aria-label для графика
-            tooltip: {
-                enabled: true,
-                callbacks: {
-                    label: (context)=>{
-                        return `${context.label}: ${context.formattedValue}%`;
-                    }
-                }
+                display: withLegend
             }
-        },
-        // поддержка клавиатурной навигации
-        events: [
-            'mousemove',
-            'mouseout',
-            'click',
-            'touchstart',
-            'touchmove',
-            'keydown'
-        ],
-        ...chartOptions
+        }
     };
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-        "data-testid": testId,
-        className: (0, _classnames.default)(CN, {
-            [`${CN}--with-legend`]: withLegend
-        }, className),
+        className: "pie-chart-box",
         style: {
-            ...styles
+            maxWidth: `320px`
         },
-        role: "figure",
-        "aria-label": chartTitle,
         children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)("h2", {
-                className: "visually-hidden",
-                children: chartTitle
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                className: "visually-hidden",
-                children: chartDescription
-            }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactchartjs2.Pie, {
                 data: data,
-                options: options,
-                "aria-label": chartTitle,
-                role: "img"
+                options: options
             }),
             Boolean(resultLabel) && /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                 className: "pie-chart__result",
-                role: "complementary",
-                "aria-label": `${resultLabel}: ${resultValue}%`,
                 children: [
                     /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                         className: "pie-chart__result-value",
@@ -95,7 +49,7 @@ const PieChart = ({ data, cutout = '80%', resultLabel, resultValue = 0, withLege
                                 className: "pie-chart__result-percent",
                                 children: "%"
                             }),
-                            ' '
+                            " "
                         ]
                     }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {

package/dist/Atomic/UI/PieChart/PieChart.scss

@@ -1,83 +1,8 @@
 .pie-chart-box {
-  // Colors
-  --pie-chart-percent-color: #7a8599;
-  --pie-chart-label-color: #9aa0b9;
-
-  // Sizes
-  --pie-chart-box-width: 180px;
-  --pie-chart-box-width-with-legend: 350px;
-  --pie-chart-legend-padding: 20px;
-
-  // Typography
-  --pie-chart-value-font-size: 24px;
-  --pie-chart-value-line-height: 34px;
-
-  --pie-chart-percent-font-size: 18px;
-  --pie-chart-percent-line-height: 25px;
-  --pie-chart-percent-margin-right: -14px;
-  --pie-chart-percent-transform-y: -5px;
-  --pie-chart-percent-transform-x: 2px;
-
-  --pie-chart-label-font-size: 12px;
-  --pie-chart-label-line-height: 24px;
-
-  // Legend
-  --pie-chart-legend-font-size: 12px;
-  --pie-chart-legend-line-height: 16px;
-  --pie-chart-legend-item-margin: 8px;
-  --pie-chart-legend-dot-size: 8px;
-
   position: relative;
 
-  width: var(--pie-chart-box-width, 180px);
+  width: 180px;
   max-width: 100%;
-
-  &--with-legend {
-    width: var(--pie-chart-box-width-with-legend, 350px);
-
-    // Стили для легенды Chart.js
-    .chartjs-legend {
-      margin-left: var(--pie-chart-legend-padding, 20px);
-    }
-
-    .chartjs-legend ul {
-      margin: 0;
-      padding: 0;
-
-      list-style: none;
-    }
-
-    .chartjs-legend li {
-      display: flex;
-      align-items: center;
-
-      margin-bottom: var(--pie-chart-legend-item-margin, 8px);
-
-      font-size: var(--pie-chart-legend-font-size, 12px);
-      line-height: var(--pie-chart-legend-line-height, 16px);
-    }
-
-    .chartjs-legend li span {
-      display: flex;
-      align-items: center;
-    }
-
-    .chartjs-legend li span::before {
-      display: inline-block;
-
-      width: var(--pie-chart-legend-dot-size, 8px);
-      height: var(--pie-chart-legend-dot-size, 8px);
-      margin-right: var(--pie-chart-legend-item-margin, 8px);
-
-      content: "";
-
-      border-radius: 50%;
-    }
-
-    .pie-chart__result {
-      transform: translateX(-15%) translateY(-50%);
-    }
-  }
 }
 
 .pie-chart__result {
@@ -92,37 +17,36 @@
 
 .pie-chart__result-value {
   font-family: inherit;
-  font-size: var(--pie-chart-value-font-size, 24px);
+  font-size: 24px;
   font-weight: 500;
-  line-height: var(--pie-chart-value-line-height, 34px);
+  line-height: 34px;
   letter-spacing: 0;
 }
 
 .pie-chart__result-percent {
   display: inline-block;
 
-  margin-right: var(--pie-chart-percent-margin-right, -14px);
+  margin-right: -14px;
 
   font-family: inherit;
-  font-size: var(--pie-chart-percent-font-size, 18px);
+  font-size: 18px;
   font-weight: 400;
-  line-height: var(--pie-chart-percent-line-height, 25px);
+  line-height: 25px;
   letter-spacing: 0;
 
-  color: var(--pie-chart-percent-color, #7a8599);
+  color: #7a8599;
 
-  transform: translateY(var(--pie-chart-percent-transform-y, -5px))
-    translateX(var(--pie-chart-percent-transform-x, 2px));
+  transform: translateY(-5px) translateX(2px);
 }
 
 .pie-chart__result-label {
   font-family: inherit;
-  font-size: var(--pie-chart-label-font-size, 12px);
+  font-size: 12px;
   font-weight: 400;
-  line-height: var(--pie-chart-label-line-height, 24px);
+  line-height: 24px;
   white-space: nowrap;
   letter-spacing: 0;
   text-transform: uppercase;
 
-  color: var(--pie-chart-label-color, #9aa0b9);
+  color: #9aa0b9;
 }