intelicoreact 0.0.96 → 0.0.97

package/src/Atomic/FormElements/Table/Partials/TdTitle.js

@@ -1,38 +0,0 @@
-import React, { useState } from 'react';
-
-import Langs from '../../../../../Langs';
-import Tag from '../../Tag/Tag';
-import Modal from '../../Modal/Modal';
-import '../Table.scss';
-
-const TdTitle = ({ locations, title }) => {
-  const txt = Langs[global.lng];
-  const [isOpen, setIsOpen] = useState(false);
-
-  return (
-    <div className="cards-table__title-box">
-      <div className="cards-table__title-box--left">
-        <div className="cards-table__title-box--title">{txt.titles[title] || title}</div>
-        <div className="cards-table__title-box--tags">
-          <span className="mr5">{txt.labels.locations.toUpperCase()}:</span>
-          {locations?.map((tag, index) => (
-            <Tag key={index} label={tag.label} />
-          ))}
-        </div>
-      </div>
-
-      <div className="cards-table__title-box--right">
-        <span onClick={() => setIsOpen(true)} className="cards-table__title-edit-btn mr5">
-          {txt.buttons.edit}
-        </span>
-
-        <Modal mode="edit" closeModal={() => setIsOpen(false)} isOpen={isOpen} title={txt.titles.pingTree} size="420">
-          test
-        </Modal>
-        <span className="cards-table__title-delete-btn">{txt.buttons.deletePingTree}</span>
-      </div>
-    </div>
-  );
-};
-
-export default TdTitle;

package/src/Atomic/FormElements/Table/Table.js

@@ -1,50 +0,0 @@
-import React from 'react';
-import cn from 'classnames';
-
-import TdHeader from './Partials/TdHeader';
-import TdRow from './Partials/TdRow';
-
-import './Table.scss';
-
-const Table = ({ rows, onChange, className, header, onActionClick }) => {
-  const handleArrayChange = (value, index) => {
-    rows[index] = value;
-    onChange({ header: [...header], rows: [...rows] });
-  };
-
-  return (
-    <div className={cn('simple-table', { [`simple-table--${className}`]: className })}>
-      <table>
-        <thead>
-          <tr>
-            {header?.map(item => (
-              <TdHeader item={item} key={item.key} />
-            ))}
-          </tr>
-        </thead>
-        <tbody>
-          {rows && rows?.length ? (
-            rows?.map((row, index) => (
-              <TdRow
-                onActionClick={onActionClick}
-                rowIndex={index}
-                key={typeof row.id === 'object' ? row.id.value : row.id}
-                item={row}
-                header={header}
-                onChange={value => handleArrayChange(value, index)}
-              />
-            ))
-          ) : (
-            <tr>
-              <td className="row--not-found" colSpan={header?.length}>
-                Not set
-              </td>
-            </tr>
-          )}
-        </tbody>
-      </table>
-    </div>
-  );
-};
-
-export default Table;

package/src/Atomic/FormElements/Table/Table.scss

@@ -1,78 +0,0 @@
-@import '~anme/scss/anme-vars';
-
-.table-header {
-    &--weight-actions {
-        width: 3%;
-    }
-}
-
-.table--icon {
-    min-width: 16px;
-    min-height: 16px;
-    color: #9aa0b9;
-    cursor: pointer;
-    padding: 5px;
-    border-radius: 5px;
-
-    &:hover {
-        background-color: #f3f3f3;
-    }
-}
-
-.simple-table {
-    width: 100%;
-    overflow-x: auto;
-    color: #1e1e2d;
-
-    table {
-        border-spacing: 0px;
-        border-collapse: collapse;
-        //table-layout: fixed;
-        width: 100%;
-
-        thead {
-            font-size: 10px;
-            text-transform: uppercase;
-            color: #9aa0b9;
-            background-color: #ebeff2;
-            white-space: nowrap;
-
-            th {
-                padding: 10px 15px;
-                font-weight: 400;
-
-                &:last-child {
-                    text-align: right;
-                }
-            }
-        }
-
-        tbody {
-            font-size: 13px;
-
-            tr {
-                border-bottom: 1px solid #f1f1f1;
-            }
-            td {
-                padding: 7.5px 15px;
-                background-color: #ffff;
-            }
-        }
-    }
-}
-
-.accordion--table {
-    overflow: visible;
-
-    tr {
-        border: none !important;
-    }
-
-    td {
-        border: none !important;
-        background-color: #f7fafc !important;
-        font-size: 10px;
-        padding: 3px 15px !important;
-    }
-}
-

package/src/Atomic/FormElements/Table/Table.stories.js

@@ -1,102 +0,0 @@
-import React, { useState } from 'react';
-
-import Table from './Table';
-
-global.lng = 'en';
-
-export default {
-  title: 'Table',
-  component: Table
-};
-
-const Template = ({ data }) => {
-  const [state, setState] = useState(data);
-
-  const rowsWithActions = state?.rows?.map(row => ({
-    ...row,
-    actions: row.isDeleted ? [{ type: 'undo' }] : [{ type: 'download' }, { type: 'edit' }, { type: 'delete' }]
-  }));
-
-  return <Table header={state.header} rows={rowsWithActions} onChange={setState} />;
-};
-
-export const TableTemplate = Template.bind({});
-
-TableTemplate.args = {
-  data: {
-    header: [
-      { id: 1, label: 'state' },
-      { id: 2, label: 'Tags' },
-      { id: 3, label: 'status' },
-      { id: 4, label: 'loanAmountApproved' },
-      { id: 5, label: 'loanAmountRejected' },
-      { id: 6, label: 'approveRate' },
-      { id: 7, label: 'actions', type: 'actions' }
-    ],
-    rows: [
-      {
-        id: 1,
-        link: { label: 'CA', link: '#s' },
-        tags: [{ label: 'Label 1' }],
-        status: { value: '90', status: 'active' },
-        loanAmountApproved: { value: '$70,000' },
-        loanAmountRejected: { value: '$30,000' },
-        approveRate: { value: '70%' }
-      },
-      {
-        id: 2,
-        link: { label: 'NY', link: '#s' },
-        advancedTags: [
-          {
-            labelLeft: 'home',
-            labelRight: 'hoods',
-            active: 3,
-            pause: 1,
-            merchants: 5
-          },
-          {
-            labelRight: 'jewelry',
-            active: 3,
-            pause: 1,
-            merchants: 5
-          },
-          {
-            labelLeft: 'home',
-            labelRight: 'improvement',
-            active: 0,
-            pause: 0,
-            warnLeft: true,
-            warnLeftMsg: 'landerNotIncluded',
-            warnRightMsg: 'noMerchants'
-          },
-          {
-            labelLeft: 'home',
-            labelRight: 'hoods',
-            active: 3,
-            pause: 1,
-            merchants: 5
-          },
-          {
-            labelRight: 'jewelry',
-            active: 3,
-            pause: 1,
-            merchants: 5
-          }
-        ],
-        status: { label: 'Active', className: 'color--green-haze' },
-        loanAmountApproved: { value: '$3,000' },
-        loanAmountRejected: { value: '$7,000' },
-        approveRate: { value: '30%' }
-      },
-      {
-        id: 3,
-        link: { label: 'NH', link: '#s' },
-        tags: [{ label: 'Label 1' }, { label: 'Label 2' }, { label: 'Label 3' }],
-        status: { status: 'error' },
-        loanAmountApproved: { value: '$70,000' },
-        loanAmountRejected: { value: '$30,000' },
-        approveRate: { value: '70%' }
-      }
-    ]
-  }
-};

package/src/Atomic/FormElements/Table/TdTypes/TdActions.js

@@ -1,59 +0,0 @@
-import React, { useState } from 'react';
-import * as Icons from 'react-feather';
-
-import Switcher from '../../Switcher/Switcher';
-
-import './TdTypes.scss';
-
-export const TdActions = ({ actions, onChange, onActionClick, rowItem }) => {
-  if (!actions) return false;
-
-  const [state, setState] = useState(actions);
-
-  const handleArrayChange = (value, index, prop) => {
-    state[index][prop] = value;
-    setState([...state]);
-    onChange(state);
-  };
-
-  return (
-    <div className="j6">
-      {actions?.map((action, index) => {
-        switch (action.type) {
-          case 'download':
-            return (
-              <div key={index} className="td-actions--item td-actions--download" onClick={() => {}}>
-                <Icons.Download />
-              </div>
-            );
-          case 'edit':
-            return (
-              <div key={index} className="td-actions--item td-actions--edit" onClick={() => {}}>
-                <Icons.Edit3 />
-              </div>
-            );
-          case 'delete':
-            return (
-              <div key={index} className="td-actions--item td-actions--delete" onClick={() => onActionClick('delete', rowItem)}>
-                <Icons.Trash2 />
-              </div>
-            );
-          case 'undo':
-            return (
-              <div key={index} className="td-actions--item td-actions--undo" onClick={() => onActionClick('undo', rowItem)}>
-                <Icons.RotateCcw />
-              </div>
-            );
-          case 'switcher':
-            return (
-              <div key={index} className="df">
-                <Switcher label={action.label || null} isActive={action?.value} onChange={e => handleArrayChange(e, index, 'value')} />
-              </div>
-            );
-          default:
-            return null;
-        }
-      })}
-    </div>
-  );
-};

package/src/Atomic/FormElements/Table/TdTypes/TdPriority.js

@@ -1,20 +0,0 @@
-import React from 'react';
-import cn from 'classnames';
-
-import { ArrowDown, ArrowUp } from 'react-feather';
-
-import '../Table.scss';
-
-const TdPriority = ({ onClick, rowIndex, cardLength }) => {
-  return (
-    <div className="cards-table__priority">
-      <span className="mr5">{rowIndex + 1}</span>
-      <div className="df">
-        <ArrowDown onClick={() => onClick(rowIndex)} className={cn('table--icon', { disabled: rowIndex + 1 === cardLength })} />
-        <ArrowUp onClick={() => onClick(rowIndex, true)} className={cn('table--icon', { disabled: rowIndex === 0 })} />
-      </div>
-    </div>
-  );
-};
-
-export default TdPriority;

package/src/Atomic/FormElements/Table/TdTypes/TdRange.js

@@ -1,15 +0,0 @@
-import React from 'react';
-
-const TdRange = ({ item }) => {
-  if (!item) return false;
-
-  return (
-    <div>
-      <span>{item.from}</span>
-      <span> - </span>
-      <span>{item.to}</span>
-    </div>
-  );
-};
-
-export default TdRange;

package/src/Atomic/FormElements/Table/TdTypes/TdTypes.scss

@@ -1,35 +0,0 @@
-.td-actions {
-    &--item {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin-left: 5px;
-        font-size: 16px;
-        cursor: pointer;
-        user-select: none;
-        border-radius: 5px;
-        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05), 0px 0px 2px rgba(0, 0, 0, 0.15);
-        min-width: 28px;
-        min-height: 28px;
-    }
-
-    &--delete {
-        color: #F06D8DFF !important;
-    }
-
-    &--undo {
-        color: #F06D8DFF !important;
-    }
-
-    &--edit {
-        color: #6B81DDFF !important;
-    }
-
-    &--download {
-        color: #6B81DDFF;
-    }
-}
-
-.td-weight {
-  cursor: pointer;
-}

package/src/Atomic/FormElements/Table/TdTypes/TdWeight.js

@@ -1,43 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import cn from 'classnames';
-
-import { KEY_CODE } from '../../../../../../JS/Constants/index.constants';
-import useToggle from '../../../../../../JS/Functions/useToggle';
-import Input from '../../Input/Input';
-
-import '../Table.scss';
-
-const TdWeight = ({ value, percent, onChange, className }) => {
-  const [state, setState] = useState(value);
-  const { isToggled: isEdited, toggleOff: unsetIsEdited, toggleOn: setIsEdited } = useToggle(false);
-
-  useEffect(() => {
-    setState(value);
-  }, [value, isEdited]);
-
-  const handleKeyUp = ({ keyCode, target }) => {
-    if (keyCode === KEY_CODE.ENTER) {
-      const newValue = +target.value || 1;
-      onChange(newValue);
-      unsetIsEdited();
-    }
-  };
-
-  return (
-    <>
-      {isEdited ? (
-        <Input value={state} onChange={e => setState(e)} onBlur={unsetIsEdited} onKeyUp={handleKeyUp} autoFocus />
-      ) : (
-        <div className={cn('td-weight', className)} onClick={setIsEdited}>
-          <span>{value}</span>
-          <span className="ml2 color--grey-gull">
-            ({percent}
-            %)
-          </span>
-        </div>
-      )}
-    </>
-  );
-};
-
-export default TdWeight;

package/src/Atomic/FormElements/Tag/Tag.js

@@ -1,24 +0,0 @@
-import React from 'react';
-import cn from 'classnames';
-import { IoWarningOutline } from 'react-icons/io5';
-import { X } from 'react-feather';
-
-import './Tag.scss';
-
-const Tag = ({ className, label, warning, removeItem, name }) => {
-  return (
-    <div className={cn('tag', className, { 'tag-warn': warning })}>
-      {warning && <IoWarningOutline className="advanced-tags--warning-icon mr5" />}
-
-      <span className="tag__label">{label || name}</span>
-
-      {removeItem && (
-        <button onClick={() => removeItem()} className="tag__button">
-          <X className="color--text" />
-        </button>
-      )}
-    </div>
-  );
-};
-
-export default Tag;

package/src/Atomic/FormElements/Tag/Tag.scss

@@ -1,38 +0,0 @@
-@import "../../../scss/vars";
-
-.tag {
-  display: inline-flex;
-  background-color: $color--gray--light;
-  height: 22px;
-  align-items: center;
-  border-radius: 3px;
-  padding: 0 6px;
-  margin-right: 4px;
-  white-space: nowrap;
-  vertical-align: middle;
-
-  &__label {
-    color: $color--dark;
-    font-size: 11px;
-  }
-
-  &__button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    margin-left: 8px;
-    width: 16px;
-    height: 16px;
-    color: #1e1e2d;
-    opacity: 0.3;
-  }
-
-  &-warn {
-    background-color: $color--error;
-
-    .tag__label {
-      color: #b9002c;
-    }
-  }
-}

package/src/Atomic/FormElements/Tag/Tag.stories.js

@@ -1,30 +0,0 @@
-import React, { useState } from 'react';
-import Tag from './Tag';
-
-global.lng = 'en';
-export default {
-  title: 'Tag',
-  component: Tag
-};
-
-const Template = args => {
-  const { options } = args;
-  const [tags, setTags] = useState(options);
-
-  const removeTagHandler = value => {
-    const newArray = tags.filter(item => item.value !== value);
-    setTags(newArray);
-  };
-
-  return tags.map(({ value, label }) => <Tag label={label} removeItem={() => removeTagHandler(value)} />);
-};
-
-export const TagTemplate = Template.bind({});
-
-TagTemplate.args = {
-  options: [
-    { id: 1, label: 'Label test 1', value: 'check1' },
-    { id: 2, label: 'Label test 2', value: 'check2' },
-    { id: 3, label: 'Label test 3', value: 'check3' }
-  ]
-};

package/src/Atomic/FormElements/TagsDropdown/TagsDropdown.js

@@ -1,108 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import cn from 'classnames';
-import { ChevronDown, Check } from 'react-feather';
-
-import Tag from '../Tag/Tag';
-import Label from '../Label/Label';
-
-import './TagsDropdown.scss';
-
-const RC = 'tags-dropdown';
-
-const TagsDropdown = ({ options, chosenOptions, onChange, className, tagClassname, onKeyPress, label, isLabelBold, hint, hintSide }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [searchValue, setSearchValue] = useState('');
-  const dropdownRef = useRef(null);
-
-  const handleClickOutside = event => {
-    if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-      setIsOpen(false);
-      setSearchValue('');
-    }
-  };
-
-  const deleteChosen = value => {
-    onChange(
-      chosenOptions.filter(item => item.value !== value),
-      'chosenOptions'
-    );
-  };
-
-  const onChangeHandler = item => {
-    setIsOpen(false);
-    setSearchValue('');
-
-    if (chosenOptions.some(el => el.value === item.value)) {
-      deleteChosen(item.value);
-      return;
-    }
-
-    onChange([...chosenOptions, item], 'chosenOptions');
-  };
-
-  const onSearchHandler = name => {
-    setSearchValue(name);
-  };
-
-  const getMarkupForElement = item =>
-    item.title.toLowerCase().includes(searchValue?.toLowerCase() || '') ? (
-      <button
-        key={item.id}
-        onClick={() => onChangeHandler(item)}
-        className={cn(
-          `${RC}__list-item`,
-          { [`${RC}__list-item_active`]: chosenOptions.some(el => el.value === item.value) },
-          { [`${RC}__list-item_disabled`]: item.disabled }
-        )}
-      >
-        <span className={cn(`${RC}__active-icon`, { [`${RC}__active-icon_active`]: chosenOptions.some(el => el.value === item.value) })}>
-          <Check className="color--text" />
-        </span>
-        {item.title}
-      </button>
-    ) : null;
-
-  useEffect(() => {
-    document.addEventListener('click', handleClickOutside, true);
-    return () => document.removeEventListener('click', handleClickOutside, true);
-  });
-
-  return (
-    <div className={cn(RC, className)} ref={dropdownRef}>
-      {label && <Label className={`${RC}-label`} isBold={isLabelBold} label={label} hint={hint} hintSide={hintSide} />}
-      <div className={`${RC}__trigger`}>
-        {chosenOptions?.map(({ title, value, id }) => (
-          <Tag key={id} className={tagClassname} label={title} removeItem={() => deleteChosen(value)} />
-        ))}
-        <button className={`${RC}__btn`} onClick={() => setIsOpen(true)}>
-          <input
-            className={`${RC}__input`}
-            value={searchValue}
-            onChange={e => onSearchHandler(e.target.value)}
-            placeholder="Type or select tags from list"
-            onKeyDown={e => onKeyPress(e, searchValue)}
-          />
-          <span className={cn(`${RC}__arrow`, { [`${RC}__arrow_active`]: isOpen })}>
-            <ChevronDown className="color--text" />
-          </span>
-        </button>
-      </div>
-      {isOpen && (
-        <div className={`${RC}__list`}>
-          {options.map(option =>
-            option.groupName ? (
-              <div key={option.id} className={`${RC}-group`}>
-                <span className={`${RC}-group__name`}>{option.groupName}</span>
-                {option.list?.map(item => getMarkupForElement(item))}
-              </div>
-            ) : (
-              getMarkupForElement(option)
-            )
-          )}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default TagsDropdown;