intelicoreact 1.8.10 → 1.8.12

package/dist/Atomic/UI/AccordionTable/AccordionTable.jsx

@@ -1,250 +0,0 @@
-import cn from 'classnames';
-
-import { useEffect, useState } from 'react';
-import { ArrowDown, ArrowUp, ChevronDown, Tag } from 'react-feather';
-
-import MonoAccordion from '../MonoAccordion/MonoAccordion';
-
-import './AccordionTable.scss';
-
-function AccordionTable({
-  className,
-  header,
-  items,
-  onChange,
-  testId,
-  onSort = () => {},
-  sortParams,
-}) {
-  const [accordions, setAccordions] = useState(items);
-
-  const sortedColClassName = item =>
-    cn(
-      'accordion-table__header-item',
-      item.className,
-      {
-        'accordion-table--sorted-col':
-          sortParams && sortParams.key === item.key,
-      },
-      { 'accordion-table__header-item-sortable': !item.noSort },
-    );
-
-  const handle = {
-    accordionChange: (key, e) => {
-      const newArr = accordions?.map((item) => {
-        if (item.key === key) {
-          return {
-            ...item,
-            isOpen: !item.isOpen,
-          };
-        }
-        return item;
-      });
-      const isArrowSvg = e?.target?.tagName === 'svg';
-      const isAccordionElement
-        = e.target.className?.includes?.('accordion-table');
-      if (isAccordionElement || isArrowSvg) {
-        onChange(newArr);
-        setAccordions(newArr);
-      }
-    },
-
-    setSort: (key) => {
-      let newSorting;
-      if (key !== sortParams.key) {
-        newSorting = { key, direction: 'DESC' };
-      }
-      else {
-        newSorting = {
-          key,
-          direction: sortParams.direction === 'ASC' ? 'DESC' : 'ASC',
-        };
-      }
-      onSort(newSorting);
-    },
-  };
-
-  const getHeaderItem = (key) => {
-    return header?.find(item => item.key === key);
-  };
-
-  const renderTd = (tr) => {
-    return Object.entries(tr)?.map(([key, value]) => {
-      return key === 'promoDetails' || key === 'disclosure'
-        ? null
-        : (
-            <div
-              key={key}
-              style={{ flexBasis: `${getHeaderItem(key)?.width}%` }}
-              className={cn(
-                'accordion-table__td',
-                `accordion-table__td--${key}`,
-                getHeaderItem(key)?.className,
-              )}
-            >
-              <p
-                className="accordion-table__statistics-td-value"
-                title={typeof value !== 'object' ? value : value.value}
-              >
-                {typeof value !== 'object' ? value : value.value}
-              </p>
-            </div>
-          );
-    });
-  };
-
-  const renderTr = (rows) => {
-    return rows?.map((row, index) => {
-      return (
-        <div
-          key={index}
-          className={cn(
-            'accordion-table__tr',
-            {
-              'accordion-table__tr-with-promo':
-                row.promoDetails || row.cols?.promoDetails,
-            },
-            row.className,
-          )}
-        >
-          <div className="df w100">{renderTd(row.cols || row)}</div>
-          {row.promoDetails || row.cols?.promoDetails
-            ? (
-                <div className="accordion-table__tr-promo-wrapper">
-                  <div className="accordion-table__tr-promo">
-                    <Tag className="tr-promo-icon" width={16} height={16} />
-                    <span className="tr-promo-label">PROMOTION</span>
-                    {row.promoDetails || row.cols?.promoDetails}
-                  </div>
-                </div>
-              )
-            : null}
-
-          {row.disclosure || row.cols?.disclosure
-            ? (
-                <div className="accordion-table__tr-promo-wrapper">
-                  <div className="accordion-table__tr-promo accordion-table__tr-promo-disclosure">
-                    {row.disclosure || row.cols?.disclosure}
-                  </div>
-                </div>
-              )
-            : null}
-        </div>
-      );
-    });
-  };
-
-  const defineAccordionTitle = (row) => {
-    return (
-      <div
-        onClick={e => handle.accordionChange(row.key, e)}
-        className="accordion-table__accordion-label-box"
-      >
-        <div className="accordion-table__accordion-label-wrapper j4">
-          <ChevronDown
-            width={8}
-            height={4}
-            className={cn('accordion-label-box__icon', {
-              'accordion-label-box__icon--open': row.isOpen,
-            })}
-          />
-          <span className="accordion-label-box__label">{row.label}</span>
-          {row.statistics && (
-            <div className={cn('accordion-table__tr', row.className)}>
-              {Object.entries(row.statistics).map(([key, value]) => {
-                return (
-                  <div
-                    key={key}
-                    style={{ width: `${getHeaderItem(key)?.width}%` }}
-                    className={cn(
-                      'accordion-table__statistics-td',
-                      getHeaderItem(key)?.className,
-                    )}
-                  >
-                    <div className="accordion-table__statistics-td-value-wrapper">
-                      {key === 'status'
-                        ? (
-                            <div className="accordion-table__statistics-td-value">
-                              {value}
-                            </div>
-                          )
-                        : (
-                            <p
-                              className="accordion-table__statistics-td-value"
-                              title={value}
-                            >
-                              {value}
-                            </p>
-                          )}
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-          )}
-        </div>
-
-        {row.titleContent}
-      </div>
-    );
-  };
-
-  useEffect(() => {
-    setAccordions(items);
-  }, [items]);
-
-  return (
-    <div className={cn('accordion-table', className)}>
-      <div className="accordion-table__header">
-        {header?.map((item) => {
-          return (
-            <div
-              style={{ flexBasis: `${item.width}%` }}
-              key={item.key}
-              className={sortedColClassName(item)}
-              onClick={() => !item.noSort && handle.setSort(item.key)}
-            >
-              {sortParams
-                && item.key === sortParams.key
-                && sortParams.key !== 'actions'
-                && (sortParams.direction === 'DESC'
-                  ? (
-                      <ArrowDown size={16} />
-                    )
-                  : (
-                      <ArrowUp size={16} />
-                    ))}
-
-              {item.label}
-            </div>
-          );
-        })}
-      </div>
-
-      <div className="accordion-table__body">
-        {accordions?.map((accordion) => {
-          return (
-            <MonoAccordion
-              testId={testId}
-              key={accordion.key}
-              onClick={e => handle.accordionChange(accordion.key, e)}
-              isOpen={accordion.isOpen}
-              className={cn(
-                'accordion-table__body-accordion',
-                {
-                  'accordion-table__body-accordion--closed': !accordion.isOpen,
-                },
-                accordion.className,
-              )}
-              titleJSX={defineAccordionTitle(accordion)}
-            >
-              {accordion.children ?? renderTr(accordion.rows)}
-            </MonoAccordion>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
-export default AccordionTable;

package/dist/Atomic/UI/AccordionText/AccordionText.jsx

@@ -1,68 +0,0 @@
-import cn from 'classnames';
-import { useEffect, useRef, useState } from 'react';
-import { ChevronDown, ChevronUp } from 'react-feather';
-import './AccordionText.scss';
-
-const defaultText = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.`;
-
-function AccordionText({
-  isDefaultOpen = false,
-  isOuterOpen = false,
-  className,
-  text = defaultText,
-  shortText = null,
-}) {
-  const bodyRef = useRef(null);
-  const [isOpen, setIsOpen] = useState(isDefaultOpen);
-  const [isNeedTrimText, setIsNeedTrimText] = useState(false);
-
-  useEffect(() => {
-    setIsOpen(isOuterOpen);
-  }, [isOuterOpen]);
-
-  useEffect(() => {
-    const checkEllipsis = () => {
-      if (bodyRef.current) {
-        setIsNeedTrimText(bodyRef.current.scrollWidth > bodyRef.current.clientWidth);
-      }
-    };
-
-    const resizeObserver = new ResizeObserver(() => {
-      checkEllipsis();
-    });
-
-    if (bodyRef.current) {
-      resizeObserver.observe(bodyRef.current);
-      checkEllipsis();
-    }
-
-    return () => {
-      if (bodyRef.current) {
-        resizeObserver.unobserve(bodyRef.current);
-      }
-    };
-  }, [text]);
-
-  return (
-    <div
-      className={cn('accordion-text', className, {
-        'accordion-text--open': isOpen,
-      })}
-      onClick={() => setIsOpen(prevIsOpen => !prevIsOpen)}
-    >
-      <div
-        className={cn('accordion-text__body', {
-          'accordion-text__body--trim-text': isNeedTrimText && !isOpen,
-        })}
-        ref={bodyRef}
-      >
-        {shortText ? (isOpen ? text : shortText) : text}
-      </div>
-      <div className="accordion-text__toggle">
-        {isOpen ? <ChevronUp /> : <ChevronDown />}
-      </div>
-    </div>
-  );
-}
-
-export default AccordionText;

package/dist/Atomic/UI/Arrow/Arrow.jsx

@@ -1,134 +0,0 @@
-import cn from 'classnames';
-
-import { useEffect, useRef, useState } from 'react';
-
-import { getStyles } from '../../../Functions/utils';
-
-import './Arrow.scss';
-
-function Arrow({ type, className, onClick, disabled, testId, isAlt }) {
-  if (!type || (type !== 'left' && type !== 'right')) return null;
-  const ref = useRef();
-  const [color, setColor] = useState('currentColor');
-
-  useEffect(() => {
-    if (ref.current) {
-      setColor(getStyles(ref.current, 'color'));
-    }
-  }, [ref.current]);
-
-  function renderSVG() {
-    if (type === 'left') {
-      if (isAlt) {
-        return (
-          <svg
-            data-testid={testId}
-            version="1.1"
-            id="Layer_1"
-            xmlns="http://www.w3.org/2000/svg"
-            width="16"
-            height="16"
-            viewBox="0 0 16 16"
-          >
-            <path
-              d="M12.7,8H3.3"
-              stroke={color}
-              fill="none"
-              strokeWidth={1.3333}
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-            <path
-              d="M8,3.3L3.3,8L8,12.7"
-              stroke={color}
-              fill="none"
-              strokeWidth={1.3333}
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          </svg>
-        );
-      }
-      return (
-        <svg
-          data-testid={testId}
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M15 18L9 12L15 6"
-            stroke={color}
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-        </svg>
-      );
-    }
-    if (isAlt) {
-      return (
-        <svg
-          data-testid={testId}
-          id="Layer_1"
-          xmlns="http://www.w3.org/2000/svg"
-          width="16"
-          height="16"
-          viewBox="0 0 16 16"
-        >
-          <path
-            d="M3.3,8h9.3"
-            stroke={color}
-            fill="none"
-            strokeWidth={1.3333}
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-          <path
-            d="M8,3.3L12.7,8L8,12.7"
-            stroke={color}
-            fill="none"
-            strokeWidth={1.3333}
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-        </svg>
-      );
-    }
-    return (
-      <svg
-        data-testid={testId}
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M9 18L15 12L9 6"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </svg>
-    );
-  }
-
-  return (
-    <div
-      data-testid={`arrow--key-${testId}--type-${type}`}
-      ref={ref}
-      className={cn('arrow', `arrow_${type}`, className, {
-        arrow_disabled: disabled,
-      })}
-      onClick={onClick}
-    >
-      {renderSVG()}
-    </div>
-  );
-}
-
-export default Arrow;

package/dist/Atomic/UI/Box/Box.jsx

@@ -1,53 +0,0 @@
-import cn from 'classnames';
-
-// global
-
-// styles
-import './Box.scss';
-
-const directionVariants = {
-  column: 'column',
-  row: 'row',
-};
-
-const sizes = {
-  none: 'none',
-  xs: 'xs',
-  s: 's',
-  m: 'm',
-  l: 'l',
-  xl: 'xl',
-};
-
-function Box({
-  children,
-  paddingVariant = sizes.m,
-  radiiVariant = sizes.s,
-  direction = directionVariants.column,
-  className,
-  ...restProps
-}) {
-  const styles = {
-    flexDirection: direction,
-  };
-  return (
-    <div
-      style={styles}
-      className={cn(
-        'box',
-        `box--padding-${paddingVariant}`,
-        `box--radii-${radiiVariant}`,
-        className,
-        {
-          'df': direction === directionVariants.row,
-          'dfc-jc': direction === directionVariants.column,
-        },
-      )}
-      {...restProps}
-    >
-      {children}
-    </div>
-  );
-}
-
-export default Box;

package/dist/Atomic/UI/Chart/Chart.jsx

@@ -1,178 +0,0 @@
-import {
-  BarElement,
-  CategoryScale,
-  Chart as ChartJS,
-  Filler,
-  LinearScale,
-  LineElement,
-  PointElement,
-  Tooltip,
-} from 'chart.js';
-
-import cn from 'classnames';
-import {
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import * as ChartComponents from 'react-chartjs-2';
-
-import { clone } from '../../../Functions/utils';
-
-import {
-  COMPONENT_OPTIONS,
-  DEFAULT_CHART_MODEL,
-  ICON_MODELS,
-} from './partial/Chart.constants';
-import ChartTypeSwitcherIcon from './partial/ChartTypeSwitcherIcon/ChartTypeSwitcherIcon';
-import {
-  correctModelKey,
-  getChartTypeKey,
-  getNotLibraryOptionsOptions,
-  getOptions,
-  prepareData,
-} from './partial/utils';
-
-import './Chart.scss';
-
-const RC = 'chart';
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  PointElement,
-  LineElement,
-  Filler,
-  Tooltip,
-);
-
-function Chart({
-  className,
-  initialModel,
-  modelsForSwitch,
-  setModelExternalValue,
-  description,
-  customOptions,
-  data,
-  addToDatasets,
-  modifyOptions,
-}) {
-  if (!data) return null;
-
-  const { label, value } = description || {};
-
-  const [model, setModel] = useState(DEFAULT_CHART_MODEL);
-  const [localData, setLocalData] = useState(data);
-  const chartRef = useRef(null);
-  const charContainertRef = useRef(null);
-
-  const options = useMemo(
-    () =>
-      customOptions
-      || (modifyOptions ? modifyOptions(getOptions(model)) : getOptions(model)),
-    [customOptions, model, modifyOptions?.toString?.(), data],
-  );
-
-  const notLibraryOptionsOptions = useMemo(
-    () =>
-      customOptions
-        ? customOptions?.notLibraryOptions
-        : getNotLibraryOptionsOptions(model),
-    [customOptions, model, data],
-  );
-
-  const ChartComponent = useCallback(
-    (props) => {
-      const Component = ChartComponents[getChartTypeKey(model)];
-      return <Component ref={chartRef} {...props} />;
-    },
-    [model],
-  );
-
-  const isExcludeDescription
-    = COMPONENT_OPTIONS.disableDescriptionsFor.includes(model);
-  const isExcludeChartTypeSwitcher
-    = COMPONENT_OPTIONS.disableChartTypeSwitcherFor.includes(model);
-
-  useLayoutEffect(() => {
-    if (setModelExternalValue && model !== 'emptyLayout')
-      setModelExternalValue(model);
-  }, [model]);
-
-  useLayoutEffect(() => {
-    const { setCanvasDimensions } = notLibraryOptionsOptions || {};
-    if (charContainertRef.current) {
-      charContainertRef.current.style.width = setCanvasDimensions?.width ?? '';
-      charContainertRef.current.style.height
-        = setCanvasDimensions?.height ?? '';
-    }
-  }, [notLibraryOptionsOptions]);
-
-  useEffect(() => {
-    setModel(correctModelKey(initialModel));
-  }, [initialModel]);
-
-  useEffect(() => {
-    setLocalData(
-      prepareData(model, clone(data), chartRef.current, addToDatasets),
-    );
-  }, [model, data]);
-
-  return (
-    <div
-      className={cn(
-        RC,
-        { [`${RC}_icon-mode`]: ICON_MODELS.includes(model) },
-        className,
-      )}
-    >
-      <div
-        className={cn(`${RC}__header`, {
-          [`${RC}__header_only-switcher`]: !description,
-        })}
-      >
-        {description && !isExcludeDescription
-          ? (
-              <div className={cn(`${RC}__description`)}>
-                {label
-                  ? (
-                      <span className={cn(`${RC}__description-title`)}>{label}</span>
-                    )
-                  : null}
-                {value
-                  ? (
-                      <div className={cn(`${RC}__description-value`)}>{value}</div>
-                    )
-                  : null}
-              </div>
-            )
-          : null}
-        {!isExcludeChartTypeSwitcher
-          ? (
-              <div className={cn(`${RC}__type-switcher`)}>
-                <ChartTypeSwitcherIcon
-                  iconType="Bar"
-                  isActive={getChartTypeKey(model) === 'Bar'}
-                  onClick={() => setModel(modelsForSwitch?.[0] || 'barLayout')}
-                />
-                <ChartTypeSwitcherIcon
-                  iconType="Line"
-                  isActive={getChartTypeKey(model) === 'Line'}
-                  onClick={() => setModel(modelsForSwitch?.[1] || 'lineLayout')}
-                />
-              </div>
-            )
-          : null}
-      </div>
-      <div ref={charContainertRef} className={cn(`${RC}__chart-wrapper`)}>
-        <ChartComponent {...options} data={localData} />
-      </div>
-    </div>
-  );
-}
-
-export default Chart;