intelicoreact 0.0.2 → 0.0.6

package/src/Atomic/FormElements/InputDateRange/index.js

@@ -0,0 +1,157 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import moment from 'moment-timezone';
+
+import InputDateRange from './components/InputDateRange';
+
+export const useClickOutside = (hideComponent, additionalComponent) => {
+    const ref = useRef(null);
+
+    const checkCondition = target =>
+        (additionalComponent
+            ? !ref.current?.contains(target) && !additionalComponent?.contains(target)
+            : !ref.current?.contains(target));
+
+    const handleClickOutside = useCallback(
+        ({ target }) => {
+            if (checkCondition(target)) hideComponent();
+        },
+        [hideComponent],
+    );
+
+    useEffect(() => {
+        document.addEventListener('mousedown', handleClickOutside, true);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside, true);
+        };
+    }, []);
+
+    return ref;
+};
+
+export const useToggle = initialState => {
+    const [isToggled, setToggle] = useState(!!initialState);
+    const toggle = useCallback(() => setToggle(isOn => !isOn), []);
+    const toggleOn = useCallback(() => setToggle(true), []);
+    const toggleOff = useCallback(() => setToggle(false), []);
+
+    return {
+        isToggled,
+        toggle,
+        toggleOn,
+        toggleOff,
+    };
+};
+
+export const INTERVALS = {
+    today: {
+        label: 'today',
+        start: () => moment().startOf('day'),
+        end: () => moment().add(1, 'day').startOf('day'),
+    },
+    yesterday: {
+        label: 'yesterday',
+        start: () => moment().subtract(1, 'day').startOf('day'),
+        end: () => moment().startOf('day'),
+    },
+    thisWeek: {
+        label: 'This Week',
+        start: () => moment().startOf('week'),
+        end: () => moment().add(1, 'day').startOf('day'),
+    },
+    lastWeek: {
+        label: 'Last Week',
+        start: () => moment().subtract(1, 'week').startOf('week'),
+        end: () => moment().startOf('week'),
+    },
+    last3Days: {
+        label: 'Last 3 Days',
+        start: () => moment().subtract(2, 'day').startOf('day'),
+        end: () => moment().add(1, 'day').startOf('day'),
+    },
+    last7Days: {
+        label: 'Last 7 Days',
+        start: () => moment().subtract(6, 'day').startOf('day'),
+        end: () => moment().add(1, 'day').startOf('day'),
+    },
+    last14Days: {
+        label: 'Last 14 Days',
+        start: () => moment().subtract(13, 'day').startOf('day'),
+        end: () => moment().add(1, 'day').startOf('day'),
+    },
+    thisMonth: {
+        label: 'This Month',
+        start: () => moment().startOf('month'),
+        end: () => moment().add(1, 'day').startOf('day'),
+    },
+    lastMonth: {
+        label: 'Last Month',
+        start: () => moment().subtract(1, 'month').startOf('month'),
+        end: () => moment().startOf('month'),
+    },
+    last6Months: {
+        label: 'Last 6 Months',
+        start: () => moment().subtract(6, 'month').startOf('month'),
+        end: () => moment().startOf('month'),
+    },
+    thisYear: {
+        label: 'This Year',
+        start: () => moment().startOf('year'),
+        end: () => moment().add(1, 'day').startOf('day'),
+    },
+    lastYear: {
+        label: 'Last Year',
+        start: () => moment().subtract(1, 'year').startOf('year'),
+        end: () => moment().startOf('year'),
+    },
+    allTime: {
+        label: 'All Time',
+        start: () => null,
+        end: () => null,
+    }
+};
+export const ALL_TIME_KEY = 'allTime';
+export const CUSTOM_INTERVAL_KEY = 'customDate';
+export const CUSTOM_INTERVAL_KEY_TEXT = 'Custom Date';
+
+export const getActualDateRange = inputDateRange => {
+    const actualIntervalKey = (() => {
+        if (inputDateRange.intervalKey && inputDateRange.intervalKey !== CUSTOM_INTERVAL_KEY) {
+            return inputDateRange.intervalKey;
+        }
+        if (inputDateRange.start && inputDateRange.end) {
+            for (const [key, interval] of Object.entries(INTERVALS)) {
+                if (
+                    moment(inputDateRange.start).isSame(interval.start()) &&
+                    moment(inputDateRange.end).isSame(interval.end())
+                ) {
+                    return key;
+                }
+            }
+        }
+        return null;
+    })();
+    const actualValues = {
+        // intervalKey: inputDateRange.intervalKey || customIntervalKey,
+        intervalKey: actualIntervalKey || CUSTOM_INTERVAL_KEY,
+        start:
+            inputDateRange.intervalKey === CUSTOM_INTERVAL_KEY
+                ? inputDateRange?.start
+                : INTERVALS[inputDateRange.intervalKey]?.start()?.toDate(),
+        end:
+            inputDateRange.intervalKey === CUSTOM_INTERVAL_KEY
+                ? inputDateRange?.end
+                : INTERVALS[inputDateRange.intervalKey]?.end()?.toDate(),
+        compare: inputDateRange.compare,
+    };
+
+    if (actualValues.compare) {
+        const intervalHoursCount = moment(actualValues.end).diff(actualValues.start, 'hours');
+        actualValues.startPrevDate = moment(actualValues.start).subtract(intervalHoursCount, 'hours').toDate();
+        actualValues.endPrevDate = actualValues.start;
+    }
+    return actualValues;
+};
+
+const component = props => <InputDateRange {...props} />;
+export default component;
+

package/src/Atomic/FormElements/InputsRow/InputsRow.js

@@ -1,13 +1,36 @@
 import React, { useState } from 'react';
 import { v4 as uuid } from 'uuid';
-import { FiTrash2 } from 'react-icons/fi';
+import { Trash2 } from 'react-feather';
 
-import { handleObjectChange } from '../../../Functions/utils';
 import Input from '../Input/Input';
 import Button from '../../UI/Button/Button';
 
 import './InputsRow.scss';
 
+const getRandomInRange = (min, max) => {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+};
+
+const handleObjectChange =
+  (updateObject, updateFunction) =>
+  (data, prop = '', isNumber) => {
+    let value;
+    if (data?.target) {
+      value = data.target.type === 'checkbox' ? data.target.checked : data.target.value;
+    } else value = data;
+
+    value = isNumber ? +value : value;
+
+    const props = prop.split('.');
+    const currentObject = props.reduce((res, chapter, index) => {
+      if (props.length !== index + 1) res = res[chapter];
+      return res;
+    }, updateObject);
+
+    currentObject[props.pop()] = value;
+    updateFunction();
+  };
+
 const InputsRow = ({ items, title, paramPlaceholder = '', valuePlaceholder = '', descriptionPlaceholder = '' }) => {
   const initialRows = [
     {
@@ -34,7 +57,7 @@ const InputsRow = ({ items, title, paramPlaceholder = '', valuePlaceholder = '',
         param: '',
         value: '',
         description: '',
-        rowId: uuid()
+        rowId: getRandomInRange(1, 1000)
       }
     ];
     setRows(newRow);
@@ -75,13 +98,13 @@ const InputsRow = ({ items, title, paramPlaceholder = '', valuePlaceholder = '',
 
           {rows.length > 1 && (
             <div onClick={() => onDelete(index)} className="inputs-row--trash">
-              <FiTrash2 />
+              <Trash2 />
             </div>
           )}
         </div>
       ))}
 
-      {rows.length < 10 && <Button onClick={handleAddRow} text="Add row" className="inputs-row--add-btn" />}
+      {rows.length < 10 && <Button onClick={handleAddRow} label="Add row" className="inputs-row--add-btn" />}
     </div>
   );
 };

package/src/Atomic/FormElements/InputsRow/InputsRow.scss

@@ -1,5 +1,3 @@
-@import "../../../../scss/vars";
-
 .inputs-row {
   &--input {
     width: 200px;
@@ -20,7 +18,7 @@
     border-radius: 5px;
 
     svg {
-      color: $color--secondary;
+      color: #f06d8d;
     }
   }
 

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

@@ -1,8 +1,6 @@
 import React from 'react';
 import InputsRow from './InputsRow';
 
-import '../../../../scss/main.scss';
-
 global.lng = 'en';
 
 export default {

package/src/Atomic/FormElements/Label/Label.js

@@ -1,17 +1,12 @@
 import React from 'react';
-import cn from 'classnames';
-
-import Hint from '../Hint/Hint';
-
+import Hint from '../../UI/Hint/Hint';
 import './Label.scss';
 
-const RC = 'label';
-
-const Label = ({ label, isBold, hint, hintSide, className, isRequired }) => (
-  <span className={cn(`${RC}`, { [`${RC}_bold`]: isBold }, className)}>
+const Label = ({ label, hint, isRequired }) => (
+  <span className="label">
     {label}
     {isRequired && <span className="label_isRequired">*</span>}
-    {hint && <Hint hint={hint} side={hintSide} className={`${RC}-hint`} />}
+    {hint && <Hint hint={hint.text} side={hint.hintSide} className="label-hint" />}
   </span>
 );
 

package/src/Atomic/FormElements/Label/Label.scss

@@ -1,9 +1,9 @@
-@import '../../../../scss/vars';
-
 .label {
     display: flex;
-    color: $color--dark;
+    color: #1e1e2d;
     font-size: 13px;
+    margin-bottom: 5px;
+    align-items: center;
 
     &_bold {
         font-weight: 500;

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

@@ -1,11 +1,10 @@
 import React from 'react';
 import Label from './Label';
 
-import '../../../../scss/main.scss';
-
 global.lng = 'en';
+
 export default {
-  title: 'Label',
+  title: 'Form Elements/Label',
   component: Label
 };
 
@@ -17,7 +16,8 @@ export const LabelTemplate = Template.bind({});
 
 LabelTemplate.args = {
   label: 'Label text',
-  hint: 'Hint text',
-  hintSide: 'bottom',
-  isBold: true
+  hint: {
+    text: 'Hint text',
+    hintSide: 'bottom'
+  }
 };

package/src/Atomic/FormElements/Modal/Modal.js

@@ -1,10 +1,9 @@
 import React from 'react';
 import cn from 'classnames';
-import { IoClose } from 'react-icons/io5';
+import { X } from 'react-feather';
 
 import Button from '../../UI/Button/Button';
 
-import '../../../../scss/main.scss';
 import './Modal.scss';
 
 const Modal = ({
@@ -41,23 +40,21 @@ const Modal = ({
 
       <div className={cn(className, { [`modal-${size}`]: size }, `${isOpen ? 'modal' : 'hidden'}`)}>
         <div className={cn('modal__header', { [`modal__header-${variant}`]: variant })}>
-          <span className={cn('modal__header-title', { [`modal__header-${variant}-title`]: variant })}>
-            <span>{renderModalTitle()}</span>
-          </span>
+          <span className={cn('modal__header-title', { [`modal__header-${variant}-title`]: variant })}>{renderModalTitle()}</span>
 
           <div onClick={closeModal} className={cn('modal-close-icon-box', { 'modal-close-icon-box-primary': variant === 'primary' })}>
-            <IoClose className="modal-close-icon" />
+            <X className="modal-close-icon" />
           </div>
         </div>
 
         <div className="modal__body">{children}</div>
         {!noFooter && (
           <div className="modal__footer">
-            <Button variant="dark-outline" onClick={closeModal} text={closeBtnText || 'Cancel'} />
+            <Button variant="dark-outline" onClick={closeModal} label={closeBtnText || 'Cancel'} />
             {!noConfirmBtn && (
               <Button
                 onClick={() => handleConfirm()}
-                text={confirmBtnLabel || mode?.[0].toUpperCase() + mode?.slice(1) || 'Apply'}
+                label={confirmBtnLabel || mode?.[0].toUpperCase() + mode?.slice(1) || 'Apply'}
                 className="ml5"
                 variant={confirmBtnVariant}
               />

package/src/Atomic/FormElements/Modal/Modal.scss

@@ -1,6 +1,3 @@
-@import "../../../scss/anme/anme-vars";
-@import "../../../scss/anme/anme-mixins";
-
 .modal-overlay {
   position: fixed;
   top: 0;
@@ -36,7 +33,7 @@
     border-top-right-radius: 4px;
 
     &-primary {
-      background-color: $color--primary;
+      background-color: #6b81dd;
 
       &-title {
         color: #ffff !important;
@@ -47,7 +44,7 @@
     &-title {
       font-size: 16px;
       font-weight: 400;
-      color: $color--primary;
+      color: #6b81dd;
     }
   }
 
@@ -59,7 +56,59 @@
     border-bottom-left-radius: 4px;
     border-bottom-right-radius: 4px;
 
-    @include custom-scroll2;
+    scrollbar-color: rgb(186, 194, 201) rgba(0, 0, 0, 0) !important;
+    scrollbar-width: thin !important;
+
+    scrollbar {
+      -moz-appearance: none !important;
+    }
+    scrollbarbutton {
+      -moz-appearance: none !important;
+    }
+    thumb {
+      -moz-appearance: none !important;
+    }
+    scrollcorner {
+      -moz-appearance: none !important;
+      resize: both;
+    }
+    // overflow-y: overlay;
+
+    &::-webkit-scrollbar {
+      width: 4px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      -webkit-border-radius: 3px;
+      border-radius: 3px;
+      background: #bac2c9;
+
+      &:hover {
+        background: #9aa0b9;
+      }
+    }
+
+    &::-webkit-scrollbar:horizontal {
+      height: 8px;
+    }
+
+    &::-webkit-scrollbar-track:horizontal {
+      background: inherit;
+    }
+
+    &::-webkit-scrollbar-thumb:horizontal {
+      -webkit-border-radius: 6px;
+      border-radius: 6px;
+      background: #bac2c9;
+      background-clip: padding-box;
+      border: 2px solid rgba(0, 0, 0, 0);
+
+      &:hover {
+        background: #9aa0b9;
+        border: 1px solid rgba(0, 0, 0, 0);
+        background-clip: padding-box;
+      }
+    }
   }
 
   &__footer {
@@ -87,6 +136,11 @@
     left: calc(50% - 210px);
   }
 
+  &-770 {
+    width: 770px;
+    left: calc(50% - 385px);
+  }
+
   &-870 {
     width: 870px;
     left: calc(50% - 435px);
@@ -163,7 +217,7 @@
 }
 
 .included-selector-modal {
-  .simple-table {
+  .table {
     min-height: 400px;
     max-height: 500px;
   }

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

@@ -6,6 +6,25 @@ import Alert from '../../UI/Alert/Alert';
 
 global.lng = 'en';
 
+const examples = [
+  JSON.stringify({ withConfirmation: { cancel: true } }),
+  JSON.stringify({ withConfirmation: { confirm: true } }),
+  JSON.stringify({ withConfirmation: { confirm: true, cancel: true } }),
+  JSON.stringify({
+    withConfirmation: {
+      title: 'some value',
+      children: 'some value',
+      confirmBtnLabel: 'some value'
+    }
+  })
+];
+const confirmationDescrip =
+  'If you pass the "withConfirmation" property, you will be able to request confirmation of the user\'s action.\n\n' +
+  `For example, if you want to request confirmation to close a modal window, pass the property like this: ${examples[0]}\n\n` +
+  `To confirm submit, pass the property like this: with Confirmation: ${examples[1]}\n\n` +
+  `If you want confirmation for each action, pass the property like this: with Confirmation: ${examples[2]}\n\n` +
+  `If you want to control the contents of the confirmation window, pass an object with values instead of boolean values, like this:\n\n${examples[3]}\n\n`;
+
 export default {
   title: 'Modal',
   component: Modal,
@@ -25,20 +44,17 @@ export default {
     size: {
       control: {
         type: 'select',
-        options: ['default', '290', '420', '870', '950']
+        options: ['default', '290', '420', '870', '770', '950']
       }
-    }
-  },
-  type: {
-    control: {
-      type: 'select',
-      options: ['default', 'primary']
-    }
-  },
-  size: {
-    control: {
-      type: 'select',
-      options: ['default', '290', '420', '870', '950']
+    },
+    type: {
+      control: {
+        type: 'select',
+        options: ['default', 'primary']
+      }
+    },
+    withConfirmation: {
+      description: confirmationDescrip
     }
   }
 };
@@ -50,7 +66,15 @@ const Template = args => {
   return (
     <>
       <Button onClick={() => setIsOpen(true)} text="Show modal" />
-      <Modal closeModal={closeModal} isOpen={isOpen} {...args}>
+      <Modal
+        {...args}
+        closeModal={closeModal}
+        submitHandler={() => {
+          args.submitHandler();
+          closeModal();
+        }}
+        isOpen={isOpen}
+      >
         <Alert message="Alert message" variant="error" className="mb5" />
         <Alert message="Alert message" variant="warning" className="mb5" />
         <Alert message="Alert message" variant="success" className="mb5" />
@@ -61,11 +85,32 @@ const Template = args => {
 };
 
 export const ModalTemplate = Template.bind({});
+export const ModalWithConfirmation = Template.bind({});
 
-ModalTemplate.args = {
+const mainProps = {
   title: 'Modal',
   variant: 'primary',
   mode: 'edit',
   size: '',
+  confirmBtnLabel: '',
+  submitHandler: () => {
+    console.log('Hi');
+  }
+};
+
+const confirmationProps = {
+  title: '',
+  children: '',
   confirmBtnLabel: ''
 };
+
+const confirmationVariants = {
+  // confirm: { ...confirmationProps },
+  cancel: { ...confirmationProps }
+};
+
+ModalTemplate.args = { ...mainProps };
+ModalWithConfirmation.args = {
+  ...mainProps,
+  withConfirmation: { ...confirmationVariants }
+};

package/src/Atomic/FormElements/MultiSelect/MultiSelect.js

@@ -5,8 +5,6 @@ import CheckboxInput from '../CheckboxInput/CheckboxInput';
 
 import './MultiSelect.scss';
 
-const RC = 'multiselect';
-
 const MultiSelect = ({ options, chosenOptions, onChange }) => {
   const [searchValue, setSearchValue] = useState('');
 
@@ -21,16 +19,16 @@ const MultiSelect = ({ options, chosenOptions, onChange }) => {
   const filteredOptions = options.filter(({ label }) => label.toLowerCase().includes(searchValue.toLowerCase()));
 
   return (
-    <div className={RC}>
+    <div className="multiselect">
       <Input value={searchValue} onChange={value => setSearchValue(value)} placeholder="Search" />
-      <div className={`${RC}__list`}>
+      <div className="multiselect__list">
         {filteredOptions.map(({ label, value, id }) => (
           <CheckboxInput
             key={id}
             value={chosenOptions.includes(value)}
             label={label}
             onChange={state => checkHandler(state, value)}
-            className={`${RC}__item`}
+            className="multiselect__item"
           />
         ))}
       </div>

package/src/Atomic/FormElements/MultiSelect/MultiSelect.scss

@@ -1,10 +1,8 @@
-@import "../../../../scss/vars";
-
 .multiselect {
   display: inline-flex;
   flex-direction: column;
   background-color: #fff;
-  border: 1px solid $color--gray--light;
+  border: 1px solid #e2e5ec;
   border-radius: 4px;
   padding: 8px 10px;
 

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

@@ -1,9 +1,8 @@
 import React, { useState } from 'react';
 import MultiSelect from './MultiSelect';
 
-import '../../../../scss/main.scss';
-
 global.lng = 'en';
+
 export default {
   title: 'MultiSelect',
   component: MultiSelect

package/src/Atomic/FormElements/NavLine/NavLine.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
 import cn from 'classnames';
-import * as Icons from 'react-icons/fi';
+import * as Icons from 'react-feather';
 
 import './NavLine.scss';
 
@@ -34,7 +34,7 @@ const NavLine = ({ root, activeTab, variant, onChange, className, items, childre
               </div>
             </span>
           ) : (
-            <Link
+            <NavLink
               to={`${root}${item.tabId}/`}
               key={`tab__${item.tabId}`}
               className={cn(
@@ -54,7 +54,7 @@ const NavLine = ({ root, activeTab, variant, onChange, className, items, childre
                 <span className={cn({ 'nav-line__item--label': variant !== 'simple' })}>{item.label}</span>
                 {item.count !== undefined ? <span className="nav-line--count ml5">({item.count || 0})</span> : null}
               </div>
-            </Link>
+            </NavLink>
           );
         })}
       </div>

package/src/Atomic/FormElements/NavLine/NavLine.scss

@@ -1,5 +1,3 @@
-@import "../../../scss/anme/anme-vars";
-
 .nav-line {
   &__inner {
     display: flex;
@@ -41,8 +39,8 @@
       font-weight: 500;
       border-top: 2px solid #6b81dd;
       cursor: default;
-      border-left: 1px solid $color--border;
-      border-right: 1px solid $color--border;
+      border-left: 1px solid #cfcfcf;
+      border-right: 1px solid #cfcfcf;
       text-decoration: none;
     }
   }
@@ -52,7 +50,7 @@
     flex-wrap: wrap;
     padding: 24px 32px;
     font-size: 13px;
-    border-top: 1px solid $color--border;
+    border-top: 1px solid #cfcfcf;
     margin-left: -32px;
     margin-right: -32px;
     background-color: #f7fafc;
@@ -76,7 +74,7 @@
     cursor: pointer;
     font-size: 13px;
     color: #1e1e2d;
-    border-bottom: 1px solid $color--border;
+    border-bottom: 1px solid #cfcfcf;
     user-select: none;
     margin-bottom: -1px;
     border-bottom: 2px solid transparent;