intelicoreact 1.8.8 → 1.8.10

package/dist/Atomic/UI/ExampleChartIntegration/ExampleChartIntegration.jsx

@@ -1 +1,223 @@
-function t(t,n){(null==n||n>t.length)&&(n=t.length);for(var r=0,e=Array(n);r<n;r++)e[r]=t[r];return e}function n(t){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{},e=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(e=e.concat(Object.getOwnPropertySymbols(r).filter(function(t){return Object.getOwnPropertyDescriptor(r,t).enumerable}))),e.forEach(function(n){var e;e=r[n],n in t?Object.defineProperty(t,n,{value:e,enumerable:!0,configurable:!0,writable:!0}):t[n]=e})}return t}function r(t,n){return n=null!=n?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):(function(t,n){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var e=Object.getOwnPropertySymbols(t);r.push.apply(r,e)}return r})(Object(n)).forEach(function(r){Object.defineProperty(t,r,Object.getOwnPropertyDescriptor(n,r))}),t}function e(n,r){return function(t){if(Array.isArray(t))return t}(n)||function(t,n){var r,e,a=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=a){var o=[],i=!0,l=!1;try{for(a=a.call(t);!(i=(r=a.next()).done)&&(o.push(r.value),!n||o.length!==n);i=!0);}catch(t){l=!0,e=t}finally{try{i||null==a.return||a.return()}finally{if(l)throw e}}return o}}(n,r)||function(n,r){if(n){if("string"==typeof n)return t(n,r);var e=Object.prototype.toString.call(n).slice(8,-1);if("Object"===e&&n.constructor&&(e=n.constructor.name),"Map"===e||"Set"===e)return Array.from(e);if("Arguments"===e||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(e))return t(n,r)}}(n,r)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}import{jsx as a,jsxs as o}from"react/jsx-runtime";import{createElement as i}from"react";import l from"classnames";import{useLayoutEffect as u,useMemo as c,useState as s}from"react";import{formatToPriceWithUSD as b}from"../../../Functions/fieldValueFormatters";import{clone as f}from"../../../Functions/utils";import p from"../../FormElements/InputDateRange/InputDateRange";import d from"../Chart/Chart";import{getLabels as m,getMockValue as y,getSafelyDateRange as h,getTab as g}from"./partial/utils";import"./partial/AnyOuterClass.scss";export default function(t){var v=t||{},O=v.inputDateRangeProps,j=v.chartProps,w=O||{},C=w.value,P=w.onChange,k=(j||{}).initialChartType,L=c(function(){return h(C)},[C]),S=e(s(k||"Bar"),2),T=S[0],B=S[1],M=e(s("tab1"),2),D=M[0],x=M[1],A=e(s("Bar"===T?"finturfLoadingModeBar":"finturfLoadingModeLine"),2),N=A[0],E=A[1],F=e(s(null),2),I=F[0],_=F[1],R=e(s(null),2),V=R[0],J=R[1],U=e(s(null),2),$=U[0],q=U[1],z=e(s(null),2),G=z[0],H=z[1],K=e(s(null),2),Q=K[0],W=K[1],X=function(){var t=m(L);return{labels:t,datasets:[{data:t.map(function(t){return y()})}]}},Y=function(t){switch(t){case"tab1":return I?f(I):null;case"tab2":return V?f(V):null;case"tab3":return $?f($):null;case"tab4":return G?f(G):null;default:return null}},Z=c(function(){return Y(D)?["finturfChartBar","finturfChartLine"]:["finturfLoadingModeBar","finturfLoadingModeLine"]},[!!Y(D)]),tt=function(t,n){switch(n){case"tab1":_(t);break;case"tab2":J(t);break;case"tab3":q(t);break;case"tab4":H(t)}return t};return u(function(){_(null),J(null),q(null),H(null),Promise.all([g("tab1",L,tt),g("tab2",L,tt),g("tab3",L,tt),g("tab4",L,tt)])},[L]),u(function(){E(Y(D)?"Bar"===T?"finturfChartBar":"finturfChartLine":"Bar"===T?"finturfLoadingModeBar":"finturfLoadingModeLine"),W(Y(D)?Y(D):X())},[!!Y(D),D,T]),o("div",{className:"example-wrapper",children:[a(p,r(n({},O),{value:C,onChange:P})),o("div",{className:"buttons-block",children:[a("button",{className:l("tab-button",{"tab-button_active":"tab1"===D}),onClick:function(){return x("tab1")},children:"Tab 1"}),a("button",{className:l("tab-button",{"tab-button_active":"tab2"===D}),onClick:function(){return x("tab2")},children:"Tab 2"}),a("button",{className:l("tab-button",{"tab-button_active":"tab3"===D}),onClick:function(){return x("tab3")},children:"Tab 3"}),a("button",{className:l("tab-button",{"tab-button_active":"tab4"===D}),onClick:function(){return x("tab4")},children:"Tab 4"})]}),i(d,r(n({},j),{key:JSON.stringify(Q),data:Q,setModelExternalValue:function(t){B(t.includes("Line")?"Line":"Bar"),E(t)},initialModel:N,modelsForSwitch:Z,description:{label:function(t){switch(t){case"tab1":return"Tab 1";case"tab2":return"Tab 2";case"tab3":return"Tab 3";case"tab4":return"Tab 4";default:return null}}(D)},addToDatasets:{id:D},modifyOptions:function(t){var e,a,o,i,l,u;return r(n({},t),{options:r(n({},null==t?void 0:t.options),{plugins:r(n({},null==t||null==(e=t.options)?void 0:e.plugins),{tooltip:r(n({},null==t||null==(o=t.options)||null==(a=o.plugins)?void 0:a.tooltip),{callbacks:r(n({},null==t||null==(u=t.options)||null==(l=u.plugins)||null==(i=l.tooltip)?void 0:i.callbacks),{label:function(t){return"tab3"===t.dataset.id||"tab4"===t.dataset.id?b(t.raw||"0"):t.raw||"0"}})})})})})}}))]})}
+import cn from 'classnames';
+
+import { useLayoutEffect, useMemo, useState } from 'react';
+
+import { formatToPriceWithUSD } from '../../../Functions/fieldValueFormatters';
+import { clone } from '../../../Functions/utils';
+import InputDateRange from '../../FormElements/InputDateRange/InputDateRange';
+import Chart from '../Chart/Chart';
+
+import {
+  getLabels,
+  getMockValue,
+  getSafelyDateRange,
+  getTab,
+} from './partial/utils';
+
+import './partial/AnyOuterClass.scss';
+
+function ExampleChartIntegration(props) {
+  const { inputDateRangeProps, chartProps } = props || {};
+  const { value: outerDateRange, onChange: changeDateRange }
+    = inputDateRangeProps || {};
+  const { initialChartType } = chartProps || {};
+  const dateRange = useMemo(
+    () => getSafelyDateRange(outerDateRange),
+    [outerDateRange],
+  );
+
+  const [chartType, setChartType] = useState(initialChartType || 'Bar');
+  const [tab, setTab] = useState('tab1');
+  const [initialModel, setInitialModel] = useState(
+    chartType === 'Bar' ? 'finturfLoadingModeBar' : 'finturfLoadingModeLine',
+  );
+
+  const [tab1, setTab1] = useState(null);
+  const [tab2, setTab2] = useState(null);
+  const [tab3, setTab3] = useState(null);
+  const [tab4, setTab4] = useState(null);
+
+  const [dataForRender, setDataForRender] = useState(null);
+
+  const getMockData = () => {
+    const labels = getLabels(dateRange);
+    const mock = () => labels.map(label => getMockValue());
+    return {
+      labels,
+      datasets: [
+        {
+          data: mock(),
+        },
+      ],
+    };
+  };
+
+  const getTabData = (tabId) => {
+    switch (tabId) {
+      case 'tab1':
+        return !tab1 ? null : clone(tab1);
+      case 'tab2':
+        return !tab2 ? null : clone(tab2);
+      case 'tab3':
+        return !tab3 ? null : clone(tab3);
+      case 'tab4':
+        return !tab4 ? null : clone(tab4);
+      default:
+        return null;
+    }
+  };
+
+  const getDescription = (tabId) => {
+    switch (tabId) {
+      case 'tab1':
+        return 'Tab 1';
+      case 'tab2':
+        return 'Tab 2';
+      case 'tab3':
+        return 'Tab 3';
+      case 'tab4':
+        return 'Tab 4';
+      default:
+        return null;
+    }
+  };
+
+  const selectData = () => (getTabData(tab) ? getTabData(tab) : getMockData());
+
+  const modelsForSwitch = useMemo(
+    () =>
+      getTabData(tab)
+        ? ['finturfChartBar', 'finturfChartLine']
+        : ['finturfLoadingModeBar', 'finturfLoadingModeLine'],
+    [Boolean(getTabData(tab))],
+  );
+
+  const handleChangeChartType = (model) => {
+    setChartType(model.includes('Line') ? 'Line' : 'Bar');
+    setInitialModel(model);
+  };
+
+  const getModel = () => {
+    if (!getTabData(tab)) {
+      return chartType === 'Bar'
+        ? 'finturfLoadingModeBar'
+        : 'finturfLoadingModeLine';
+    }
+    else {
+      return chartType === 'Bar' ? 'finturfChartBar' : 'finturfChartLine';
+    }
+  };
+
+  const processResponse = (res, tabId) => {
+    switch (tabId) {
+      case 'tab1':
+        setTab1(res);
+        break;
+      case 'tab2':
+        setTab2(res);
+        break;
+      case 'tab3':
+        setTab3(res);
+        break;
+      case 'tab4':
+        setTab4(res);
+        break;
+      default:
+        break;
+    }
+    return res;
+  };
+
+  useLayoutEffect(() => {
+    setTab1(null);
+    setTab2(null);
+    setTab3(null);
+    setTab4(null);
+
+    // эмуляция запросов
+    // вся логика происходит в самих входящих промисах
+    // Promise.all добавлен для расширения на случай надобности описания эффектов по завершении всех запросов
+    Promise.all([
+      getTab('tab1', dateRange, processResponse),
+      getTab('tab2', dateRange, processResponse),
+      getTab('tab3', dateRange, processResponse),
+      getTab('tab4', dateRange, processResponse),
+    ]);
+  }, [dateRange]);
+
+  useLayoutEffect(() => {
+    setInitialModel(getModel());
+    setDataForRender(selectData());
+  }, [Boolean(getTabData(tab)), tab, chartType]);
+
+  return (
+    <div className="example-wrapper">
+      <InputDateRange
+        {...inputDateRangeProps}
+        value={outerDateRange}
+        onChange={changeDateRange}
+      />
+
+      <div className="buttons-block">
+        <button
+          className={cn('tab-button', { 'tab-button_active': tab === 'tab1' })}
+          onClick={() => setTab('tab1')}
+        >
+          Tab 1
+        </button>
+        <button
+          className={cn('tab-button', { 'tab-button_active': tab === 'tab2' })}
+          onClick={() => setTab('tab2')}
+        >
+          Tab 2
+        </button>
+        <button
+          className={cn('tab-button', { 'tab-button_active': tab === 'tab3' })}
+          onClick={() => setTab('tab3')}
+        >
+          Tab 3
+        </button>
+        <button
+          className={cn('tab-button', { 'tab-button_active': tab === 'tab4' })}
+          onClick={() => setTab('tab4')}
+        >
+          Tab 4
+        </button>
+      </div>
+
+      <Chart
+        {...chartProps}
+        key={JSON.stringify(dataForRender)}
+        data={dataForRender}
+        setModelExternalValue={handleChangeChartType}
+        initialModel={initialModel}
+        modelsForSwitch={modelsForSwitch}
+        description={{ label: getDescription(tab) }}
+        addToDatasets={{ id: tab }}
+        modifyOptions={options => ({
+          ...options,
+          options: {
+            ...options?.options,
+            plugins: {
+              ...options?.options?.plugins,
+              tooltip: {
+                ...options?.options?.plugins?.tooltip,
+                callbacks: {
+                  ...options?.options?.plugins?.tooltip?.callbacks,
+                  label: (context) => {
+                    return context.dataset.id === 'tab3'
+                      || context.dataset.id === 'tab4'
+                      ? formatToPriceWithUSD(context.raw || '0')
+                      : context.raw || '0';
+                  },
+                },
+              },
+            },
+          },
+        })}
+      />
+    </div>
+  );
+}
+
+export default ExampleChartIntegration;

package/dist/Atomic/UI/MonoAccordion/MonoAccordion._test.jsx

@@ -1 +1,75 @@
-function e(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},o=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),o.forEach(function(t){var o;o=n[t],t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o})}return e}function t(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):(function(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);n.push.apply(n,o)}return n})(Object(t)).forEach(function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}),e}import{jsx as n}from"react/jsx-runtime";import{fireEvent as o,render as r,screen as c}from"@testing-library/react";import i from"./MonoAccordion";describe("monoAccordion",function(){var d={titleJSX:n("div",{children:"Accordion Title"}),icon:n("span",{children:"▼"}),isOpen:!1,onClick:jest.fn(),testId:"test-accordion"};it("renders correctly with default props",function(){r(n(i,t(e({},d),{children:n("div",{children:"Accordion Content"})}))),expect(c.getByTestId("test-accordion")).toBeInTheDocument(),expect(c.getByText("Accordion Title")).toBeInTheDocument()}),it("handles click events correctly",function(){r(n(i,t(e({},d),{children:n("div",{children:"Accordion Content"})}))),o.click(c.getByRole("button")),expect(d.onClick).toHaveBeenCalled()}),it("applies correct classes when open",function(){r(n(i,t(e({},d),{isOpen:!0,children:n("div",{children:"Accordion Content"})}))),expect(c.getByTestId("test-accordion")).toHaveClass("mono-accordion--is-open")}),it("applies disabled state correctly",function(){r(n(i,t(e({},d),{disabled:!0,children:n("div",{children:"Accordion Content"})}))),expect(c.getByRole("button")).toBeDisabled(),expect(c.getByTestId("test-accordion")).toHaveClass("mono-accordion--disabled")}),it("handles aria attributes correctly",function(){var o=r(n(i,t(e({},d),{children:n("div",{children:"Accordion Content"})}))).rerender;expect(c.getByRole("button")).toHaveAttribute("aria-expanded","false"),o(n(i,t(e({},d),{isOpen:!0,children:n("div",{children:"Accordion Content"})}))),expect(c.getByRole("button")).toHaveAttribute("aria-expanded","true")})});
+import { fireEvent, render, screen } from '@testing-library/react';
+
+import MonoAccordion from './MonoAccordion';
+
+describe('monoAccordion', () => {
+  const defaultProps = {
+    titleJSX: <div>Accordion Title</div>,
+    icon: <span>▼</span>,
+    isOpen: false,
+    onClick: jest.fn(),
+    testId: 'test-accordion',
+  };
+
+  it('renders correctly with default props', () => {
+    render(
+      <MonoAccordion {...defaultProps}>
+        <div>Accordion Content</div>
+      </MonoAccordion>,
+    );
+
+    expect(screen.getByTestId('test-accordion')).toBeInTheDocument();
+    expect(screen.getByText('Accordion Title')).toBeInTheDocument();
+  });
+
+  it('handles click events correctly', () => {
+    render(
+      <MonoAccordion {...defaultProps}>
+        <div>Accordion Content</div>
+      </MonoAccordion>,
+    );
+
+    fireEvent.click(screen.getByRole('button'));
+    expect(defaultProps.onClick).toHaveBeenCalled();
+  });
+
+  it('applies correct classes when open', () => {
+    render(
+      <MonoAccordion {...defaultProps} isOpen={true}>
+        <div>Accordion Content</div>
+      </MonoAccordion>,
+    );
+
+    expect(screen.getByTestId('test-accordion')).toHaveClass('mono-accordion--is-open');
+  });
+
+  it('applies disabled state correctly', () => {
+    render(
+      <MonoAccordion {...defaultProps} disabled={true}>
+        <div>Accordion Content</div>
+      </MonoAccordion>,
+    );
+
+    const button = screen.getByRole('button');
+    expect(button).toBeDisabled();
+    expect(screen.getByTestId('test-accordion')).toHaveClass('mono-accordion--disabled');
+  });
+
+  it('handles aria attributes correctly', () => {
+    const { rerender } = render(
+      <MonoAccordion {...defaultProps}>
+        <div>Accordion Content</div>
+      </MonoAccordion>,
+    );
+
+    expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'false');
+
+    rerender(
+      <MonoAccordion {...defaultProps} isOpen={true}>
+        <div>Accordion Content</div>
+      </MonoAccordion>,
+    );
+
+    expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'true');
+  });
+});

package/dist/Atomic/UI/MonoAccordion/MonoAccordion.jsx

@@ -1 +1,86 @@
-function t(t,r){(null==r||r>t.length)&&(r=t.length);for(var e=0,n=Array(r);e<r;e++)n[e]=t[e];return n}function r(t,r,e){return r in t?Object.defineProperty(t,r,{value:e,enumerable:!0,configurable:!0,writable:!0}):t[r]=e,t}import{jsx as e,jsxs as n}from"react/jsx-runtime";import o from"classnames";import{useEffect as c,useRef as i,useState as a}from"react";import"./MonoAccordion.scss";var l="mono-accordion";export default function(u){var s,f,d,p,m=u.titleJSX,y=u.icon,b=u.children,v=u.isOpen,h=u.onClick,O=u.className,g=u.disabled,j=u.testId,P=u.datasetProp,w=(s=a(),function(t){if(Array.isArray(t))return t}(s)||function(t,r){var e,n,o=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=o){var c=[],i=!0,a=!1;try{for(o=o.call(t);!(i=(e=o.next()).done)&&(c.push(e.value),c.length!==r);i=!0);}catch(t){a=!0,n=t}finally{try{i||null==o.return||o.return()}finally{if(a)throw n}}return c}}(s,2)||function(r,e){if(r){if("string"==typeof r)return t(r,2);var n=Object.prototype.toString.call(r).slice(8,-1);if("Object"===n&&r.constructor&&(n=r.constructor.name),"Map"===n||"Set"===n)return Array.from(n);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return t(r,e)}}(s,2)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),_=w[0],S=w[1],A=i(),N=i(),x=function(t){void 0!==t?S(function(r){return"".concat(t,"px")}):S(function(t){var r,e,n;return"".concat(null==(e=Array.from(null==(n=N.current)?void 0:n.childNodes))||null==(r=e.reduce)?void 0:r.call(e,function(t,r){return t+r.offsetHeight},0),"px")})};return c(function(){v?x():x(0)},[v,b]),n("div",(f=function(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{},o=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(n).filter(function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable}))),o.forEach(function(e){r(t,e,n[e])})}return t}({},void 0===P?{}:P),d=d={"data-testid":void 0===j?"mono-accordion":j,className:o(l,O,(r(p={},"".concat(l,"_is-open"),v),r(p,"".concat(l,"_disabled"),g),p)),children:[n("div",{className:"".concat(l,"__head"),onClick:function(t){if(Array.from(A.current.childNodes).some(function(r){return r.contains(t.target)}))return t;h(t),null==t||t.preventDefault(),null==t||t.stopPropagation()},children:[e("div",{ref:A,className:"".concat(l,"__tile-container"),children:m}),e("span",{className:"".concat(l,"__icon-container"),children:y})]}),e("div",{ref:N,style:{maxHeight:_},className:o("".concat(l,"__container")),children:e("div",{className:"".concat(l,"__content-wrapper"),children:b})})]},Object.getOwnPropertyDescriptors?Object.defineProperties(f,Object.getOwnPropertyDescriptors(d)):(function(t,r){var e=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e.push.apply(e,n)}return e})(Object(d)).forEach(function(t){Object.defineProperty(f,t,Object.getOwnPropertyDescriptor(d,t))}),f))}
+import cn from 'classnames';
+
+import { useEffect, useRef, useState } from 'react';
+
+import './MonoAccordion.scss';
+
+const RC = 'mono-accordion';
+
+function MonoAccordion({
+  titleJSX,
+  icon,
+  children,
+  isOpen,
+  onClick,
+  className,
+  disabled,
+  testId = 'mono-accordion',
+  datasetProp = {},
+}) {
+  const [maxHeight, setMaxHeight] = useState();
+  const titleRef = useRef();
+  const containerRef = useRef();
+
+  const setHeight = (value) => {
+    if (value !== undefined) {
+      setMaxHeight(state => `${value}px`);
+    }
+    else {
+      setMaxHeight(
+        state =>
+          `${Array.from(containerRef.current?.childNodes)?.reduce?.((acc, el) => acc + el.offsetHeight, 0)}px`,
+      );
+    }
+  };
+
+  const handleClick = (e) => {
+    if (
+      !Array.from(titleRef.current.childNodes).some(el =>
+        el.contains(e.target),
+      )
+    ) {
+      onClick(e);
+      e?.preventDefault();
+      e?.stopPropagation();
+    }
+    else {
+      return e;
+    }
+  };
+
+  useEffect(() => {
+    if (!isOpen) setHeight(0);
+    else setHeight();
+  }, [isOpen, children]);
+
+  return (
+    <div
+      {...datasetProp}
+      data-testid={testId}
+      className={cn(RC, className, {
+        [`${RC}_is-open`]: isOpen,
+        [`${RC}_disabled`]: disabled,
+      })}
+    >
+      <div
+        className={`${RC}__head`}
+        onClick={handleClick}
+      >
+        <div ref={titleRef} className={`${RC}__tile-container`}>
+          {titleJSX}
+        </div>
+        <span className={`${RC}__icon-container`}>{icon}</span>
+      </div>
+
+      <div
+        ref={containerRef}
+        style={{ maxHeight }}
+        className={cn(`${RC}__container`)}
+      >
+        <div className={`${RC}__content-wrapper`}>{children}</div>
+      </div>
+    </div>
+  );
+}
+
+export default MonoAccordion;

package/dist/Atomic/UI/PieChart/PieChart.jsx

@@ -1 +1,41 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{ArcElement as a,Chart as r,Tooltip as s}from"chart.js";import{Pie as i}from"react-chartjs-2";import"./PieChart.scss";r.register(a,s);export default function(a){var r=a.data,s=a.cutout,l=a.resultLabel,c=a.resultValue,d=a.withLegend;return t("div",{className:"pie-chart-box",style:{maxWidth:"320px"},children:[e(i,{data:r,options:{cutout:void 0===s?"80%":s,plugins:{legend:{display:void 0!==d&&d}}}}),!!l&&t("div",{className:"pie-chart__result",children:[t("div",{className:"pie-chart__result-value",children:[void 0===c?0:c,e("span",{className:"pie-chart__result-percent",children:"%"})," "]}),e("div",{className:"pie-chart__result-label",children:l})]})]})}
+import { ArcElement, Chart as ChartJS, Tooltip } from 'chart.js';
+import { Pie } from 'react-chartjs-2';
+
+import './PieChart.scss';
+
+ChartJS.register(ArcElement, Tooltip);
+
+function PieChart({
+  data,
+  cutout = '80%',
+  resultLabel,
+  resultValue = 0,
+  withLegend = false,
+}) {
+  const options = {
+    cutout,
+    plugins: {
+      legend: {
+        display: withLegend,
+      },
+    },
+  };
+
+  return (
+    <div className="pie-chart-box" style={{ maxWidth: `320px` }}>
+      <Pie data={data} options={options} />
+      {Boolean(resultLabel) && (
+        <div className="pie-chart__result">
+          <div className="pie-chart__result-value">
+            {resultValue}
+            <span className="pie-chart__result-percent">%</span>
+            {' '}
+          </div>
+          <div className="pie-chart__result-label">{resultLabel}</div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default PieChart;

package/dist/Atomic/UI/Table/Partials/TdCell.jsx

@@ -1 +1,87 @@
-function e(e,r){(null==r||r>e.length)&&(r=e.length);for(var t=0,n=Array(r);t<r;t++)n[t]=e[t];return n}import{jsx as r}from"react/jsx-runtime";import{useState as t}from"react";import n from"../../Accordion/AccordionItem";import o from"../../AdvancedTag/AdvancedTags";import a from"../../Status/Status";import i from"../../Tag/Tag";import c from"../Table";import{TdActions as l}from"../TdTypes/TdActions";import s from"../TdTypes/TdPriority";import u from"../TdTypes/TdWeight";import"../Table.scss";export default function(f){var m,p=f.type,y=f.item,b=f.rowIndex,d=f.onChange,g=f.cardLength,h=f.changePriority,O=f.getAdviceWeight,v=f.onActionClick,w=f.rowItem,j=f.isDeleted,T=(m=t(y.isOpen),function(e){if(Array.isArray(e))return e}(m)||function(e,r){var t,n,o=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=o){var a=[],i=!0,c=!1;try{for(o=o.call(e);!(i=(t=o.next()).done)&&(a.push(t.value),a.length!==r);i=!0);}catch(e){c=!0,n=e}finally{try{i||null==o.return||o.return()}finally{if(c)throw n}}return a}}(m,2)||function(r,t){if(r){if("string"==typeof r)return e(r,2);var n=Object.prototype.toString.call(r).slice(8,-1);if("Object"===n&&r.constructor&&(n=r.constructor.name),"Map"===n||"Set"===n)return Array.from(n);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return e(r,t)}}(m,2)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),A=T[0],P=T[1],S="weight"===y.type&&O(j?0:y.value);switch(p){case"accordion":return r(n,{className:y.itemClassName,item:y,isOpen:A,onClick:function(e){return P(e)},children:r(c,{rows:y.rows,className:"accordion--table"})});case"actions":return r(l,{rowItem:w,actions:y,onChange:d,onActionClick:v});case"advancedTags":return r(o,{items:y});case"link":return r("a",{href:y.link,children:y.label});case"priority":return r(s,{rowIndex:b,cardLength:g,onClick:h});case"status":return r(a,{className:y.className,label:y.label,status:y.status});case"tags":return y.map(function(e,t){return r(i,{label:e.label},t)});case"weight":return r(u,{value:y.value,percent:S,onChange:function(e){var r,t;return d((r=function(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.forEach(function(r){var n;n=t[r],r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n})}return e}({},y),t=t={value:e},Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(t)):(function(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t})(Object(t)).forEach(function(e){Object.defineProperty(r,e,Object.getOwnPropertyDescriptor(t,e))}),r))}});default:return r("span",{className:y.className,children:y.value})}}
+import { useState } from 'react';
+
+import AccordionItem from '../../Accordion/AccordionItem';
+import AdvancedTags from '../../AdvancedTag/AdvancedTags';
+import Status from '../../Status/Status';
+import Tag from '../../Tag/Tag';
+import Table from '../Table';
+import { TdActions } from '../TdTypes/TdActions';
+import TdPriority from '../TdTypes/TdPriority';
+import TdWeight from '../TdTypes/TdWeight';
+
+import '../Table.scss';
+
+function TdCell({
+  type,
+  item,
+  rowIndex,
+  onChange,
+  cardLength,
+  changePriority,
+  getAdviceWeight,
+  onActionClick,
+  rowItem,
+  isDeleted,
+}) {
+  const [isAccordionOpen, setIsAccordionOpen] = useState(item.isOpen);
+
+  const percent
+    = item.type === 'weight' && getAdviceWeight(isDeleted ? 0 : item.value);
+
+  switch (type) {
+    case 'accordion':
+      return (
+        <AccordionItem
+          className={item.itemClassName}
+          item={item}
+          isOpen={isAccordionOpen}
+          onClick={e => setIsAccordionOpen(e)}
+        >
+          <Table rows={item.rows} className="accordion--table" />
+        </AccordionItem>
+      );
+    case 'actions':
+      return (
+        <TdActions
+          rowItem={rowItem}
+          actions={item}
+          onChange={onChange}
+          onActionClick={onActionClick}
+        />
+      );
+    case 'advancedTags':
+      return <AdvancedTags items={item} />;
+    case 'link':
+      return <a href={item.link}>{item.label}</a>;
+    case 'priority':
+      return (
+        <TdPriority
+          rowIndex={rowIndex}
+          cardLength={cardLength}
+          onClick={changePriority}
+        />
+      );
+    case 'status':
+      return (
+        <Status
+          className={item.className}
+          label={item.label}
+          status={item.status}
+        />
+      );
+    case 'tags':
+      return item.map((tag, index) => <Tag key={index} label={tag.label} />);
+    case 'weight':
+      return (
+        <TdWeight
+          value={item.value}
+          percent={percent}
+          onChange={value => onChange({ ...item, value })}
+        />
+      );
+    default:
+      return <span className={item.className}>{item.value}</span>;
+  }
+}
+
+export default TdCell;

package/dist/Atomic/UI/Table/Partials/TdHeader.jsx

@@ -1 +1,36 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import a from"classnames";import s from"../../../../Langs";import"../Table.scss";export default function(l){var i=l.item,d=l.testId,r=void 0===d?"td-header":d,c=s[globalThis.lng];return"double"===i.type?e("th",{"data-testid":r,children:t("div",{className:"j46",children:[e("div",{className:"",children:c.labels[i.left]||i.left}),e("div",{className:"",children:c.labels[i.right]||i.right})]})}):e("th",{"data-testid":r,className:a(i.className),children:t("div",{className:a({df:i.button}),children:[e("div",{className:"mr5",children:c.labels[i.label]||i.label}),i.button&&e("div",{className:"cards-table__btn",children:c.buttons[i.button]||i.button})]})})}
+import cn from 'classnames';
+
+import Langs from '../../../../Langs';
+
+import '../Table.scss';
+
+function TdHeader({ item, testId = 'td-header' }) {
+  const txt = Langs[globalThis.lng];
+
+  switch (item.type) {
+    case 'double':
+      return (
+        <th data-testid={testId}>
+          <div className="j46">
+            <div className="">{txt.labels[item.left] || item.left}</div>
+            <div className="">{txt.labels[item.right] || item.right}</div>
+          </div>
+        </th>
+      );
+    default:
+      return (
+        <th data-testid={testId} className={cn(item.className)}>
+          <div className={cn({ df: item.button })}>
+            <div className="mr5">{txt.labels[item.label] || item.label}</div>
+            {item.button && (
+              <div className="cards-table__btn">
+                {txt.buttons[item.button] || item.button}
+              </div>
+            )}
+          </div>
+        </th>
+      );
+  }
+}
+
+export default TdHeader;