intelicoreact 1.5.41 → 1.6.0

package/dist/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/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/Atomic/UI/PieChart/PieChar.interface.js

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

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

@@ -1,47 +1,110 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _chart = require("chart.js");
-var _reactChartjs = require("react-chartjs-2");
-require("./PieChart.scss");
-_chart.Chart.register(_chart.ArcElement, _chart.Tooltip);
-const PieChart = _ref => {
-  let {
-    data,
-    cutout = "80%",
-    resultLabel,
-    resultValue = 0,
-    withLegend = false
-  } = _ref;
-  const options = {
-    cutout,
-    plugins: {
-      legend: {
-        display: withLegend
-      }
-    }
-  };
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "pie-chart-box",
-    style: {
-      maxWidth: `320px`
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactChartjs.Pie, {
-    data: data,
-    options: options
-  }), Boolean(resultLabel) && /*#__PURE__*/_react.default.createElement("div", {
-    className: "pie-chart__result"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "pie-chart__result-value"
-  }, resultValue, /*#__PURE__*/_react.default.createElement("span", {
-    className: "pie-chart__result-percent"
-  }, "%"), " "), /*#__PURE__*/_react.default.createElement("div", {
-    className: "pie-chart__result-label"
-  }, resultLabel)));
+});
+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
+                    })
+                ]
+            })
+        ]
+    });
 };
-var _default = exports.default = PieChart;
+const _default = PieChart;

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

@@ -1,8 +1,83 @@
 .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: 180px;
+  width: var(--pie-chart-box-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 {
@@ -17,36 +92,37 @@
 
 .pie-chart__result-value {
   font-family: inherit;
-  font-size: 24px;
+  font-size: var(--pie-chart-value-font-size, 24px);
   font-weight: 500;
-  line-height: 34px;
+  line-height: var(--pie-chart-value-line-height, 34px);
   letter-spacing: 0;
 }
 
 .pie-chart__result-percent {
   display: inline-block;
 
-  margin-right: -14px;
+  margin-right: var(--pie-chart-percent-margin-right, -14px);
 
   font-family: inherit;
-  font-size: 18px;
+  font-size: var(--pie-chart-percent-font-size, 18px);
   font-weight: 400;
-  line-height: 25px;
+  line-height: var(--pie-chart-percent-line-height, 25px);
   letter-spacing: 0;
 
-  color: #7a8599;
+  color: var(--pie-chart-percent-color, #7a8599);
 
-  transform: translateY(-5px) translateX(2px);
+  transform: translateY(var(--pie-chart-percent-transform-y, -5px))
+    translateX(var(--pie-chart-percent-transform-x, 2px));
 }
 
 .pie-chart__result-label {
   font-family: inherit;
-  font-size: 12px;
+  font-size: var(--pie-chart-label-font-size, 12px);
   font-weight: 400;
-  line-height: 24px;
+  line-height: var(--pie-chart-label-line-height, 24px);
   white-space: nowrap;
   letter-spacing: 0;
   text-transform: uppercase;
 
-  color: #9aa0b9;
+  color: var(--pie-chart-label-color, #9aa0b9);
 }

package/dist/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({});