intelicoreact 1.8.3 → 1.8.5

package/dist/Atomic/UI/DateTime/DateTime.jsx

@@ -0,0 +1,57 @@
+import cn from 'classnames';
+
+import moment from 'moment-timezone';
+import { useMemo } from 'react';
+
+import './DateTime.scss';
+
+const RC = 'date-time';
+
+const DEFAULT_DATE_FORMAT = 'DD.MM.YYYY';
+const DEFAULT_TIME_FORMAT = 'HH:mm:ss';
+
+function DateTime({
+  className,
+  value,
+  valueFormat,
+  dateFormat: inputDateFormat,
+  timeFormat: inputTimeFormat,
+  isNoDate,
+  isNoTime,
+  testId = 'date-time',
+}) {
+  const dateFormat = inputDateFormat || DEFAULT_DATE_FORMAT;
+  const timeFormat = inputTimeFormat || DEFAULT_TIME_FORMAT;
+
+  const date = useMemo(
+    () =>
+      (valueFormat ? moment(value, valueFormat) : moment(value)).format(
+        dateFormat,
+      ),
+    [value, valueFormat, dateFormat],
+  );
+  const time = useMemo(
+    () =>
+      (valueFormat ? moment(value, valueFormat) : moment(value)).format(
+        timeFormat,
+      ),
+    [value, valueFormat, timeFormat],
+  );
+
+  return (
+    <div data-testid={testId} className={cn(RC, className)}>
+      {!isNoDate && (
+        <span data-testid={`${testId}-date`} className={cn(`${RC}__date`)}>
+          {date}
+        </span>
+      )}
+      {!isNoTime && (
+        <span data-testid={`${testId}-time`} className={cn(`${RC}__time`, { [`${RC}_color--pause`]: !isNoDate })}>
+          {time}
+        </span>
+      )}
+    </div>
+  );
+}
+
+export default DateTime;

package/dist/Atomic/UI/DebugContainer/DebugContainer.jsx

@@ -0,0 +1,44 @@
+import { useState } from 'react';
+
+import { ChevronDown, ChevronUp } from 'react-feather';
+
+import './DebugContainer.scss';
+
+function DebugContainer({ data, children }) {
+  const [isVisible, setIsVisible] = useState(true);
+  const renderData = () => {
+    return (
+      <pre>
+        {'{\n'}
+        {Object.keys(data)?.map((key) => {
+          return `  ${key}: ${data?.[key]},\n`;
+        })}
+        {'}'}
+      </pre>
+    );
+  };
+
+  return (
+    <div className="debug-container">
+      {isVisible && (
+        <div className="debug-container__body">
+          <h5>Debug:</h5>
+          {data && Boolean(Object?.keys(data)?.length) && (
+            <div className="debug-container__body-row">{renderData()}</div>
+          )}
+          {children && (
+            <div className="debug-container__body-row">{children}</div>
+          )}
+        </div>
+      )}
+      <div
+        className="debug-container__toggler"
+        onClick={() => setIsVisible(v => !v)}
+      >
+        {isVisible ? <ChevronUp /> : <ChevronDown />}
+      </div>
+    </div>
+  );
+}
+
+export default DebugContainer;

package/dist/Atomic/UI/DebugContainer/useDebugContainer.jsx

@@ -0,0 +1,15 @@
+import { useState } from 'react';
+
+import DebugContainer from './DebugContainer';
+
+function useDebugContainer() {
+  const [data, setData] = useState({});
+
+  return {
+    debugData: data,
+    setDebugData: setData,
+    renderDebugContainer: <DebugContainer data={data} />,
+  };
+}
+
+export default useDebugContainer;

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

@@ -0,0 +1,223 @@
+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

@@ -0,0 +1,75 @@
+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

@@ -0,0 +1,86 @@
+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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,87 @@
+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

@@ -0,0 +1,36 @@
+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;