intelicoreact 1.8.3 → 1.8.5

package/dist/Atomic/FormElements/WidgetWithSwitchableRows/WidgetWithSwitchableRows.jsx

@@ -0,0 +1,115 @@
+import cn from 'classnames';
+
+import './WidgetWithSwitchableRows.scss';
+
+const RC = 'widget-with-switchable-rows';
+
+function WidgetWithSwitchableRows(props) {
+  const {
+    className,
+    title,
+    rightHeaderContent,
+    nullContentData,
+
+    columns = [],
+    rows,
+    CellComponent,
+    CellComponentProps,
+    onChange,
+    isNoHeader = false,
+  } = props || {};
+
+  const preperedColumns = [
+    { ...columns[0], key: 'isActive', type: 'switcher' },
+    ...columns.slice(1),
+  ];
+
+  return (
+    <div className={cn(RC, className)}>
+      {!isNoHeader && (
+        <div className={cn(`${RC}__header`)}>
+          <div className={cn(`${RC}__title-block`)}>{title}</div>
+          <div className={cn(`${RC}__right-header-content-block`)}>
+            {rightHeaderContent}
+          </div>
+        </div>
+      )}
+      <div
+        className={cn(`${RC}__body`, {
+          [`${RC}__body_no-content`]: !rows?.length,
+        })}
+      >
+        {Boolean(rows?.length) && (
+          <div className={cn(`${RC}__thead`)}>
+            {preperedColumns.map(field => (
+              <div
+                key={`thead-${field.key}`}
+                className={cn(
+                  `${RC}__thead-cell`,
+                  field.theadCellClassName,
+                  field.columnClassName,
+                  {
+                    [`${RC}__thead-cell_reqiured`]: field.isRequired,
+                  },
+                )}
+                data-key={field.key}
+              >
+                {field.label}
+              </div>
+            ))}
+          </div>
+        )}
+
+        <div className={cn(`${RC}__table`)}>
+          {rows?.length
+            ? (
+                rows.map(row => (
+                  <div
+                    key={`row-${row.id}`}
+                    className={cn(`${RC}__row`)}
+                    data-id={row.id}
+                  >
+                    {preperedColumns.map(cell => (
+                      <div
+                        key={`row-${row.id}-cell-${cell.key}`}
+                        className={cn(
+                          `${RC}__cell`,
+                          cell.cellClassName,
+                          cell.columnClassName,
+                        )}
+                      >
+                        <CellComponent
+                          {...CellComponentProps}
+                          field={{
+                            ...cell,
+                            value: row[cell.key],
+                            rowData: row,
+                            ...(cell.key === 'isActive'
+                              ? {
+                                  disabled: cell.disabled,
+                                  label: row.label,
+                                  isActive: row.isActive,
+                                }
+                              : { disabled: !row.isActive, label: cell.label }),
+                          }}
+                          onChange={(key, value, propName, innerFieldKey, additional) => onChange({ value, additional, propName, innerFieldKey, key: cell.key || key, rowId: row.id })}
+                        />
+                      </div>
+                    ))}
+                  </div>
+                ))
+              )
+            : (
+                <div className={cn(`${RC}__row`)} data-id="empty-row">
+                  <span className={cn(`${RC}__no-data-content`)}>
+                    {nullContentData ?? 'No data'}
+                  </span>
+                </div>
+              )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default WidgetWithSwitchableRows;

package/dist/Atomic/Layout/Header/Header.jsx

@@ -0,0 +1,86 @@
+import cn from 'classnames';
+
+import { useRef, useState } from 'react';
+import { Bell, ChevronRight, Power } from 'react-feather';
+
+import Hint from '../../UI/Hint/Hint';
+
+import './Header.scss';
+
+function Header({
+  className,
+  name = 'John',
+  surname = 'Silver',
+  status = 'admin',
+  img = '',
+  hintLabel = 'Help',
+  hintText = 'Hint text',
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const userMenu = useRef(null);
+
+  const handle = {
+    toggleMenu: () => {
+      if (!isOpen) setIsOpen(!isOpen);
+    },
+    closeMenu: () => {
+      setTimeout(() => setIsOpen(false), 50);
+    },
+    logout: () => {
+      handle.toggleMenu();
+    },
+  };
+
+  return (
+    <header className={cn('header', className)}>
+      <div className="df">
+        <Hint
+          side="bottom"
+          hint={hintText}
+          className="header__hint"
+          label={hintLabel}
+          iconOutline
+        />
+      </div>
+
+      <div className="j6 user-menu">
+        <div onClick={() => {}} className="header--bell">
+          <Bell className="header--bell-icon" />
+          <div className="header--bell-notification-icon" />
+        </div>
+
+        <div className="header--user-ava">
+          <img src={img} alt="" />
+        </div>
+
+        <div className="dfc mr10">
+          <span className="header--user-name">
+            {name}
+            {' '}
+            {surname}
+          </span>
+          <span className="header--user-status">{status}</span>
+        </div>
+
+        <ChevronRight
+          onClick={handle.toggleMenu}
+          className={cn('accordion--title-chevron', {
+            'accordion--title-chevron-open': isOpen,
+          })}
+        />
+        {isOpen && (
+          <div className="user-menu__dropdown" ref={userMenu}>
+            <div className="user-menu__item" onClick={handle.logout}>
+              <Power className="mr10" />
+              {' '}
+              Logout
+            </div>
+          </div>
+        )}
+      </div>
+    </header>
+  );
+}
+
+export default Header;

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

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

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

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

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