intelicoreact 1.5.32 → 1.5.34

package/dist/src/Atomic/UI/PageTitle/PageTitle.test.js

@@ -0,0 +1,181 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("@testing-library/react");
+require("@testing-library/jest-dom");
+const _PageTitle = /*#__PURE__*/ _interop_require_default(require("./PageTitle"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+describe('pageTitle Component', ()=>{
+    const mockPages = [
+        {
+            name: 'Page 1',
+            path: '/page1'
+        },
+        {
+            name: 'Page 2',
+            path: '/page2'
+        },
+        {
+            name: 'Current Page',
+            path: '/current'
+        }
+    ];
+    const defaultProps = {
+        title: 'Test Title',
+        pages: mockPages,
+        testId: 'page-title-test'
+    };
+    it('renders with basic props', ()=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_PageTitle.default, {
+            ...defaultProps
+        }));
+        expect(_react.screen.getByTestId('page-title-test')).toBeInTheDocument();
+        expect(_react.screen.getByRole('heading', {
+            level: 1
+        })).toHaveTextContent('Test Title');
+    });
+    it('renders home icon with correct link', ()=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_PageTitle.default, {
+            ...defaultProps
+        }));
+        const homeLink = _react.screen.getByLabelText('Home page');
+        expect(homeLink).toBeInTheDocument();
+        expect(homeLink).toHaveAttribute('href', '/');
+    });
+    it('renders breadcrumb navigation correctly', ()=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_PageTitle.default, {
+            ...defaultProps
+        }));
+        const nav = _react.screen.getByRole('navigation', {
+            name: 'Breadcrumb'
+        });
+        expect(nav).toBeInTheDocument();
+        mockPages.forEach((page)=>{
+            expect(_react.screen.getByText(page.name)).toBeInTheDocument();
+        });
+    });
+    it('renders last page as non-clickable text', ()=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_PageTitle.default, {
+            ...defaultProps
+        }));
+        const lastPage = _react.screen.getByText('Current Page');
+        expect(lastPage).toHaveClass('page-title__link_last');
+        expect(lastPage.tagName).toBe('SPAN');
+        expect(lastPage).toHaveAttribute('aria-current', 'page');
+    });
+    it('renders intermediate pages as links', ()=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_PageTitle.default, {
+            ...defaultProps
+        }));
+        const firstPageLink = _react.screen.getByText('Page 1');
+        expect(firstPageLink.tagName).toBe('A');
+        expect(firstPageLink).toHaveAttribute('href', '/page1');
+    });
+    it('renders children when provided', ()=>{
+        const childText = 'Child Content';
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_PageTitle.default, {
+            ...defaultProps,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                "data-testid": "child-content",
+                children: childText
+            })
+        }));
+        expect(_react.screen.getByTestId('child-content')).toBeInTheDocument();
+        expect(_react.screen.getByText(childText)).toBeInTheDocument();
+    });
+    it('renders with empty pages array', ()=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_PageTitle.default, {
+            title: "Test Title",
+            pages: [],
+            testId: "page-title-test"
+        }));
+        expect(_react.screen.getByTestId('page-title-test')).toBeInTheDocument();
+        expect(_react.screen.queryByRole('navigation')).not.toBeInTheDocument();
+    });
+    it('uses default testId when not provided', ()=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_PageTitle.default, {
+            title: "Test Title",
+            pages: []
+        }));
+        expect(_react.screen.getByTestId('page-title')).toBeInTheDocument();
+    });
+    it('renders correct number of delimiters', ()=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_PageTitle.default, {
+            ...defaultProps
+        }));
+        const delimiters = _react.screen.getAllByText('/');
+        // Количество разделителей должно быть равно количеству страниц
+        expect(delimiters).toHaveLength(mockPages.length);
+    });
+    // Тест на проверку доступности
+    it('meets accessibility requirements', ()=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_PageTitle.default, {
+            ...defaultProps
+        }));
+        // Получаем компонент по testId
+        const pageTitle = _react.screen.getByTestId(defaultProps.testId);
+        // Проверяем атрибуты на самом компоненте
+        expect(pageTitle).toHaveAttribute('role', 'region');
+        expect(pageTitle).toHaveAttribute('aria-label', defaultProps.title);
+        // Проверяем навигацию
+        const navigation = _react.screen.getByRole('navigation');
+        expect(navigation).toHaveAttribute('aria-label', 'Breadcrumb');
+        // Проверяем заголовок
+        expect(_react.screen.getByRole('heading', {
+            level: 1
+        })).toHaveTextContent(defaultProps.title);
+        // Проверяем, что последняя страница помечена как текущая
+        const currentPage = _react.screen.getByText(mockPages[mockPages.length - 1].name);
+        expect(currentPage).toHaveAttribute('aria-current', 'page');
+        // Проверяем, что иконка дома правильно скрыта от скринридеров
+        const homeLink = _react.screen.getByLabelText('Home page');
+        const homeIcon = homeLink.querySelector('svg');
+        expect(homeIcon).toHaveAttribute('aria-hidden', 'true');
+    });
+    describe('accessibility', ()=>{
+        it('has correct heading structure', ()=>{
+            (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_PageTitle.default, {
+                ...defaultProps
+            }));
+            const heading = _react.screen.getByRole('heading', {
+                level: 1
+            });
+            expect(heading).toBeInTheDocument();
+            expect(heading).toHaveTextContent(defaultProps.title);
+        });
+        it('has correct breadcrumb structure', ()=>{
+            (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_PageTitle.default, {
+                ...defaultProps
+            }));
+            const listItems = _react.screen.getAllByRole('listitem');
+            // Проверяем, что количество элементов списка правильное (home + все страницы)
+            expect(listItems).toHaveLength(mockPages.length + 1);
+        });
+        it('has proper focus management', ()=>{
+            (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_PageTitle.default, {
+                ...defaultProps
+            }));
+            // Проверяем все интерактивные элементы на возможность фокуса
+            const links = _react.screen.getAllByRole('link');
+            links.forEach((link)=>{
+                expect(link).toBeVisible();
+                expect(link).not.toHaveAttribute('tabindex', '-1');
+            });
+        });
+        it('preserves correct reading order', ()=>{
+            (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_PageTitle.default, {
+                ...defaultProps
+            }));
+            const nav = _react.screen.getByRole('navigation');
+            const homeLink = _react.screen.getByLabelText('Home page');
+            // Проверяем, что домашняя ссылка идет первой в навигации
+            expect(nav.firstElementChild).toContainElement(homeLink);
+        });
+    });
+});

package/dist/src/Atomic/UI/PageTitle/index.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _PageTitle = /*#__PURE__*/ _interop_require_default(require("./PageTitle"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const _default = _PageTitle.default;

package/dist/src/Atomic/UI/PieChart/PieChar.interface.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

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

@@ -0,0 +1,110 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+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) {
+    return obj && obj.__esModule ? 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 })=>{
+    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}%`;
+                    }
+                }
+            }
+        },
+        // поддержка клавиатурной навигации
+        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),
+        style: {
+            ...styles
+        },
+        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"
+            }),
+            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",
+                        children: [
+                            resultValue,
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                className: "pie-chart__result-percent",
+                                children: "%"
+                            }),
+                            ' '
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: "pie-chart__result-label",
+                        children: resultLabel
+                    })
+                ]
+            })
+        ]
+    });
+};
+const _default = PieChart;

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

@@ -0,0 +1,127 @@
+.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);
+  max-width: 100%;
+
+  &--with-legend {
+    width: var(--pie-chart-box-width-with-legend);
+
+    // Стили для легенды Chart.js
+    .chartjs-legend {
+      margin-left: var(--pie-chart-legend-padding);
+    }
+
+    .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);
+
+      font-size: var(--pie-chart-legend-font-size);
+      line-height: var(--pie-chart-legend-line-height);
+    }
+
+    .chartjs-legend li span {
+      display: flex;
+      align-items: center;
+    }
+
+    .chartjs-legend li span::before {
+      display: inline-block;
+
+      width: var(--pie-chart-legend-dot-size);
+      height: var(--pie-chart-legend-dot-size);
+      margin-right: var(--pie-chart-legend-item-margin);
+
+      content: '';
+
+      border-radius: 50%;
+    }
+
+    .pie-chart__result {
+      transform: translateX(-15%) translateY(-50%);
+    }
+  }
+}
+
+.pie-chart__result {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+
+  text-align: center;
+
+  transform: translateX(-50%) translateY(-50%);
+}
+
+.pie-chart__result-value {
+  font-family: inherit;
+  font-size: var(--pie-chart-value-font-size);
+  font-weight: 500;
+  line-height: var(--pie-chart-value-line-height);
+  letter-spacing: 0;
+}
+
+.pie-chart__result-percent {
+  display: inline-block;
+
+  margin-right: var(--pie-chart-percent-margin-right);
+
+  font-family: inherit;
+  font-size: var(--pie-chart-percent-font-size);
+  font-weight: 400;
+  line-height: var(--pie-chart-percent-line-height);
+  letter-spacing: 0;
+
+  color: var(--pie-chart-percent-color);
+
+  transform: translateY(var(--pie-chart-percent-transform-y)) translateX(var(--pie-chart-percent-transform-x));
+}
+
+.pie-chart__result-label {
+  font-family: inherit;
+  font-size: var(--pie-chart-label-font-size);
+  font-weight: 400;
+  line-height: var(--pie-chart-label-line-height);
+  white-space: nowrap;
+  letter-spacing: 0;
+  text-transform: uppercase;
+
+  color: var(--pie-chart-label-color);
+}

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

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    ChartTemplate: function() {
+        return ChartTemplate;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _PieChart = /*#__PURE__*/ _interop_require_default(require("./PieChart"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const _default = {
+    title: 'UI/PieChart',
+    component: _PieChart.default,
+    argTypes: {},
+    args: {
+        cutout: '85%',
+        withLegend: false,
+        resultLabel: 'Conversion rate',
+        resultValue: 85.12,
+        data: {
+            labels: [
+                'Red',
+                'Blue',
+                'Yellow',
+                'Green',
+                'Purple',
+                'Orange'
+            ],
+            datasets: [
+                {
+                    label: '# of Votes',
+                    data: [
+                        12,
+                        19,
+                        3,
+                        5,
+                        2,
+                        3
+                    ],
+                    backgroundColor: [
+                        'rgba(255, 99, 132, 0.2)',
+                        'rgba(54, 162, 235, 0.2)',
+                        'rgba(255, 206, 86, 0.2)',
+                        'rgba(75, 192, 192, 0.2)',
+                        'rgba(153, 102, 255, 0.2)',
+                        'rgba(255, 159, 64, 0.2)'
+                    ],
+                    borderColor: [
+                        'rgba(255, 99, 132, 1)',
+                        'rgba(54, 162, 235, 1)',
+                        'rgba(255, 206, 86, 1)',
+                        'rgba(75, 192, 192, 1)',
+                        'rgba(153, 102, 255, 1)',
+                        'rgba(255, 159, 64, 1)'
+                    ],
+                    borderWidth: 0
+                }
+            ]
+        }
+    }
+};
+function Template(args) {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_PieChart.default, {
+        ...args
+    });
+}
+const ChartTemplate = Template.bind({});

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

@@ -0,0 +1,142 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("@testing-library/react");
+require("@testing-library/jest-dom");
+const _PieChart = /*#__PURE__*/ _interop_require_default(require("./PieChart"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+// Мокаем react-chartjs-2, так как она использует canvas, который сложно тестировать
+jest.mock('react-chartjs-2', ()=>({
+        Pie: ()=>/*#__PURE__*/ (0, _jsxruntime.jsx)("canvas", {
+                "data-testid": "pie-chart-canvas"
+            })
+    }));
+describe('pieChart Component', ()=>{
+    // Подготавливаем тестовые данные, которые будем использовать в тестах
+    const mockData = {
+        labels: [
+            'Red',
+            'Blue'
+        ],
+        datasets: [
+            {
+                data: [
+                    30,
+                    70
+                ],
+                backgroundColor: [
+                    '#FF6384',
+                    '#36A2EB'
+                ]
+            }
+        ]
+    };
+    // Базовые пропсы для тестов
+    const defaultProps = {
+        data: mockData,
+        testId: 'pie-chart'
+    };
+    // Тест на базовый рендер компонента
+    it('renders without crashing', ()=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_PieChart.default, {
+            ...defaultProps
+        }));
+        expect(_react.screen.getByTestId('pie-chart')).toBeInTheDocument();
+    });
+    // Тест на наличие canvas элемента
+    it('renders chart canvas', ()=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_PieChart.default, {
+            ...defaultProps
+        }));
+        expect(_react.screen.getByTestId('pie-chart-canvas')).toBeInTheDocument();
+    });
+    // Тест на отображение результата
+    it('displays result label and value when provided', ()=>{
+        const resultLabel = 'Total Progress';
+        const resultValue = 75;
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_PieChart.default, {
+            ...defaultProps,
+            resultLabel: resultLabel,
+            resultValue: resultValue
+        }));
+        expect(_react.screen.getByText(resultLabel)).toBeInTheDocument();
+        expect(_react.screen.getByText('75')).toBeInTheDocument();
+        expect(_react.screen.getByText('%')).toBeInTheDocument();
+    });
+    // Тест на отсутствие результата, когда не переданы пропсы
+    it('does not display result when no result props provided', ()=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_PieChart.default, {
+            ...defaultProps
+        }));
+        expect(_react.screen.queryByRole('complementary')).not.toBeInTheDocument();
+    });
+    // Тест на доступность
+    it('renders with correct accessibility attributes', ()=>{
+        const chartTitle = 'Test Chart Title';
+        const chartDescription = 'Test Chart Description';
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_PieChart.default, {
+            ...defaultProps,
+            chartTitle: chartTitle,
+            chartDescription: chartDescription
+        }));
+        const chart = _react.screen.getByRole('figure');
+        expect(chart).toHaveAttribute('aria-label', chartTitle);
+        expect(_react.screen.getByText(chartTitle)).toBeInTheDocument();
+        expect(_react.screen.getByText(chartDescription)).toBeInTheDocument();
+    });
+    // Тест на применение пользовательских стилей
+    it('applies custom styles when provided', ()=>{
+        const customStyles = {
+            backgroundColor: 'red'
+        };
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_PieChart.default, {
+            ...defaultProps,
+            styles: customStyles
+        }));
+        expect(_react.screen.getByTestId('pie-chart')).toHaveStyle({
+            backgroundColor: 'red'
+        });
+    });
+    // Тест на применение дополнительных классов
+    it('applies additional className when provided', ()=>{
+        const additionalClass = 'custom-class';
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_PieChart.default, {
+            ...defaultProps,
+            className: additionalClass
+        }));
+        expect(_react.screen.getByTestId('pie-chart')).toHaveClass('pie-chart-box', additionalClass);
+    });
+    // Тест на корректную обработку пропса cutout
+    it('renders with custom cutout value', ()=>{
+        const customCutout = '60%';
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_PieChart.default, {
+            ...defaultProps,
+            cutout: customCutout
+        }));
+        // Проверяем, что компонент отрендерился
+        expect(_react.screen.getByTestId('pie-chart')).toBeInTheDocument();
+    });
+    // Тест на обработку пустых данных
+    it('handles empty data gracefully', ()=>{
+        const emptyData = {
+            labels: [],
+            datasets: [
+                {
+                    data: [],
+                    backgroundColor: []
+                }
+            ]
+        };
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(_PieChart.default, {
+            ...defaultProps,
+            data: emptyData
+        }));
+        expect(_react.screen.getByTestId('pie-chart')).toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    PieChart: function() {
+        return _PieChart.default;
+    },
+    // дефолт
+    default: function() {
+        return _default;
+    }
+});
+const _PieChart = /*#__PURE__*/ _interop_require_default(require("./PieChart"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const _default = _PieChart.default;