intelicoreact 0.0.3 → 0.0.7

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

@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
+import { BrowserRouter } from 'react-router-dom';
+
 import NavLine from './NavLine';
 import Alert from '../../UI/Alert/Alert';
 import Status from '../../UI/Status/Status';
 
-import '../../../../scss/main.scss';
-
 global.lng = 'en';
 
 export default {
@@ -28,9 +28,11 @@ const Template = args => {
   const [activeTab, setActiveTab] = useState(initialTab);
 
   return (
-    <NavLine {...args} activeTab={activeTab} onChange={setActiveTab}>
-      {navLineContent[activeTab]}
-    </NavLine>
+    <BrowserRouter>
+      <NavLine {...args} activeTab={activeTab} onChange={setActiveTab}>
+        {navLineContent[activeTab]}
+      </NavLine>
+    </BrowserRouter>
   );
 };
 
@@ -43,24 +45,30 @@ NavLineSimpleTemplate.args = {
   isLocal: false,
   items: [
     {
-      tabId: 'general'
+      tabId: 'general',
+      label: 'Tab1'
     },
     {
-      tabId: 'payments'
+      tabId: 'payments',
+      label: 'Tab2'
     },
     {
-      tabId: 'filters'
+      tabId: 'filters',
+      label: 'Tab3'
     },
     {
       tabId: 'offers',
+      label: 'Tab4',
       count: 2
     },
     {
       tabId: 'merchants',
+      label: 'Tab5',
       count: 15
     },
     {
-      tabId: 'integration'
+      tabId: 'integration',
+      label: 'Tab6'
     },
     {
       tabId: 'tab',
@@ -76,23 +84,25 @@ NavLineTemplate.args = {
   items: [
     {
       tabId: 'customDetails',
-      icon: 'FiGift'
+      label: 'Tab1',
+      icon: 'Gift'
     },
     {
       tabId: 'postsLog',
-      icon: 'FiGift',
+      label: 'Tab2',
+      icon: 'Gift',
       count: 43
     },
     {
       tabId: 'tab1',
       label: 'disabled tab',
-      icon: 'FiGift',
+      icon: 'Gift',
       status: 'disabled'
     },
     {
       tabId: 'tab2',
       label: 'tab 2',
-      icon: 'FiGift'
+      icon: 'Gift'
     }
   ]
 };

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

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

package/src/Atomic/FormElements/RangeCalendar/RangeCalendar.js

@@ -0,0 +1,146 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import cn from 'classnames';
+import moment from 'moment-timezone';
+
+import Arrow from '../../UI/Arrow/Arrow'
+
+import './RangeCalendar.scss'
+
+const RangeCalendar = props => {
+    const {
+        className,
+        date,
+        setDate,
+        startDate,
+        endDate,
+        allowPrev = true,
+        allowNext = true,
+        onClick = () => {},
+        onHover = () => {},
+        startPrevDate,
+        endPrevDate,
+        limitRange,
+        isShortWeekNames
+    } = props;
+
+    const [days, setDays] = useState({});
+
+    const title = useMemo(() => `${moment(date).format('MMM')} ${moment(date).format('YYYY')}`, [date]);
+
+    useEffect(() => {
+        const result = {};
+        const day = moment(date).startOf('month');
+        const daysInMonth = day.daysInMonth();
+        for (let d = 0; d < daysInMonth; d += 1) {
+            let week = day.week();
+            if (day.month() === 11 && week === 1) week = 53;
+            if (day.month() === 0 && week === 53) week = 0;
+            if (!Object.prototype.hasOwnProperty.call(result, week)) {
+                result[week] = {};
+            }
+            result[week][day.weekday()] = { date: day.toDate() };
+            day.add(1, 'd');
+        }
+        setDays(result);
+    }, [date]);
+
+    const renderDay = (week, dayOfWeek) => {
+        const day = days[week][dayOfWeek];
+        const isFutureDay = day && moment(day.date).isAfter(moment(), 'day');
+        const isPastDay = limitRange
+            ? day && moment(day.date).isBefore(moment().subtract(limitRange, 'days'), 'day')
+            : null;
+        const isRangeStart = day && moment(day.date).isSame(startDate, 'day');
+        const isRangeEnd = day && moment(day.date).isSame(moment(endDate).subtract(1, 'hour'), 'day');
+        const isRangeInside =
+            day &&
+            startDate &&
+            endDate &&
+            moment(day.date).isAfter(startDate, 'day') &&
+            moment(day.date).isBefore(moment(endDate).subtract(1, 'hour'), 'day');
+        const isPrevRangeEnd =
+            day &&
+            (moment(day.date).isSame(startPrevDate, 'day') ||
+                moment(day.date).isSame(moment(endPrevDate).subtract(1, 'day'), 'day'));
+        const isPrevRangeInside =
+            day &&
+            startPrevDate &&
+            endPrevDate &&
+            moment(day.date).isAfter(startPrevDate, 'day') &&
+            moment(day.date).isBefore(moment(endPrevDate).subtract(1, 'day'), 'day');
+        const classNames = cn(
+            'range-calendar__day',
+            { 'range-calendar__day--clickable': day },
+            { 'range-calendar__day--disabled': isFutureDay },
+            { 'range-calendar__day--disabled': isPastDay },
+            { 'range-calendar__day--range-start': isRangeStart },
+            { 'range-calendar__day--range-end': isRangeEnd },
+            { 'range-calendar__day--range-inside': isRangeInside },
+            { 'range-calendar__day--prev-range-end': isPrevRangeEnd },
+            { 'range-calendar__day--prev-range-inside': isPrevRangeInside }
+        );
+
+        return (
+            <div
+                key={`${week}_${dayOfWeek}`}
+                className={classNames}
+                onClick={day && !isFutureDay ? e => onClick(day.date, e) : null}
+                onMouseOver={day && !isFutureDay ? () => onHover(day.date) : null}
+                onMouseLeave={() => onHover(null)}
+            >
+                {day && day.date.getDate()}
+            </div>
+        );
+    };
+
+    const handlePrev = () => {
+        setDate(moment(date).subtract(1, 'month').toDate());
+    };
+
+    const handleNext = () => {
+        setDate(moment(date).add(1, 'month').toDate());
+    };
+
+    const getFormatedWeekName = input => isShortWeekNames ? input.charAt(0) : input;
+
+    return (
+        <div className={cn('range-calendar', className)}>
+            <div className="range-calendar-header">
+                <Arrow type="left" disabled={!allowPrev} onClick={handlePrev} className="range-calendar-header__prev" />
+                {/* <div className="range-calendar-header__prev">
+                    {allowPrev && (
+                        <div onClick={handlePrev}>
+                            <Arrow type="left" disabled={!allowPrev} />
+                        </div>
+                    )}
+                </div> */}
+                <div className="range-calendar-header__title">{title}</div>
+                <Arrow type="right" disabled={!allowNext} onClick={handleNext} className="range-calendar-header__next" />
+
+                {/* <div className="range-calendar-header__next">
+                    {allowNext && (
+                        <div onClick={handleNext}>
+                            <Arrow type="right" disabled={!allowNext} />
+                        </div>
+                    )}
+                </div> */}
+            </div>
+            <div className="range-calendar__week range-calendar__week-title">
+                {[...Array(7).keys()].map(dayOfWeek => {
+                    return (
+                        <div key={`day-of-week_${dayOfWeek}`} className="range-calendar__day range-calendar__day--title">
+                            {getFormatedWeekName(moment().weekday(dayOfWeek).format('dd'))}
+                        </div>
+                    );
+                })}
+            </div>
+            {Object.keys(days).map((week, index) => (
+                <div key={`week_${index}`} className="range-calendar__week">
+                    {[...Array(7).keys()].map(dayOfWeek => renderDay(week, dayOfWeek))}
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export default RangeCalendar;

package/src/Atomic/FormElements/RangeCalendar/RangeCalendar.scss

@@ -0,0 +1,101 @@
+.range-calendar {
+  width: 195px;
+  min-height: 195px;
+  display: flex;
+  flex-direction: column;
+  user-select: none;
+
+  &-header {
+    height: 24px;
+    margin-bottom: 12px;
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  
+    &__title {
+      line-height: 20px;
+      font-weight: 500;
+      text-align: center;
+      flex-grow: 1;
+      color: #000000;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &__next, &__prev {
+      width: 16px;
+      height: 16px;
+      background-color: #E2E6F8;
+      border-radius: 5px;
+      color: #171D33;
+    }
+  }
+
+  &__week {
+    display: flex;
+  }
+
+  &__day {
+    font-size: 13px;
+    line-height: 20px;
+    margin: 1px 0;
+    flex-grow: 1;
+    flex-basis: 0;
+    text-align: center;
+    padding: 1px 6px;
+    user-select: none;
+
+    &--clickable {
+      cursor: pointer;
+
+      &:hover {
+        background: #E2E6F8;
+      }
+    }
+
+    &--disabled {
+      cursor: default;
+      color: #9aa0b9;
+      pointer-events: none;
+
+      &:hover {
+        background: inherit;
+      }
+    }
+
+    &--range-start, &--range-end {
+      background: #6B81DD;
+      color: white;
+      border-radius: 4px;
+
+      &:hover {
+        background: #6B81DD;
+      }
+    }
+
+    &--range-inside {
+      background: #E2E6F8;
+    }
+
+    &--prev-range-end {
+      background: #E2E5EC;
+      border-radius: 4px;
+    }
+
+    &--prev-range-inside {
+      background: #F7F8FA;
+    }
+
+    &--title {
+      font-size: 10px;
+      color: #9AA0B9;
+      font-weight: normal;
+
+      &:hover {
+        background: inherit;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,54 @@
+import React, {useState, useMemo, useRef, useEffect} from 'react';
+import moment from 'moment-timezone';
+
+import RangeCalendar from './RangeCalendar';
+
+global.lng = 'en';
+
+export default {
+  title: 'RangeCalendar',
+  component: RangeCalendar,
+};
+
+const Template = args => {
+  const [dateOfRenderedMonth, setDateOfRenderedMonth] = useState(moment().subtract(1, 'month').toDate());
+
+  const [startDate, setStartDate] = useState(dateOfRenderedMonth);
+  const [endDate, setEndDate] = useState(dateOfRenderedMonth);
+  const isFirstClickRef = useRef(false);
+
+  const handleClick = date => {
+    if (
+        !startDate ||
+        (startDate && endDate && !(moment(startDate).add(1, 'd').isSame(endDate, 'day')))
+    ) {
+        setStartDate(moment(date).startOf('day').toDate());
+        setEndDate(moment(date).add(1, 'd').startOf('day').toDate());
+    } else if (moment(date).isBefore(moment(startDate), 'day')) {
+        setEndDate(moment(startDate).add(1, 'd').startOf('day').toDate());
+        setStartDate(moment(date).set('hour', parseInt(0, 10)).toDate());
+    } else if (moment(date).isAfter(moment(startDate), 'day')) {
+        setEndDate(moment(date).add(1, 'd').startOf('day').toDate());
+    }
+  };
+
+  return <RangeCalendar 
+    {...args} 
+    date={dateOfRenderedMonth}
+    setDate={setDateOfRenderedMonth}
+    // allowNext={true}
+    // allowPrev={true}
+    startDate={startDate}
+    endDate={endDate}
+    // startPrevDate={startPrevDate}
+    // endPrevDate={endPrevDate}
+    onClick={handleClick}
+    // onHover={handleHover}
+  />
+};
+
+export const RangeCalendarTemplate = Template.bind({});
+
+RangeCalendarTemplate.args = {
+  limitRange: 60
+};

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import RangeInputs from './RangeInputs';
 
-import '../../../../scss/main.scss';
 import './RangeInputs.scss';
 
 global.lng = 'en';

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

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

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

@@ -1,9 +1,9 @@
 import React from 'react';
 import cn from 'classnames';
 
-import Langs from '../../../../../Langs';
 
 import '../Table.scss';
+import Langs from '../../../../../../Langs';
 
 const TdHeader = ({ item }) => {
   const txt = Langs[global.lng];

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

@@ -1,4 +1,4 @@
-@import '../../../scss/anme/anme-vars';
+@import '~anme/scss/anme-vars';
 
 .table-header {
     &--weight-actions {

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

@@ -23,25 +23,25 @@ export const TdActions = ({ actions, onChange, onActionClick, rowItem }) => {
           case 'download':
             return (
               <div key={index} className="td-actions--item td-actions--download" onClick={() => {}}>
-                <Icons.FiDownload />
+                <Icons.Download />
               </div>
             );
           case 'edit':
             return (
               <div key={index} className="td-actions--item td-actions--edit" onClick={() => {}}>
-                <Icons.FiEdit3 />
+                <Icons.Edit3 />
               </div>
             );
           case 'delete':
             return (
               <div key={index} className="td-actions--item td-actions--delete" onClick={() => onActionClick('delete', rowItem)}>
-                <Icons.FiTrash2 />
+                <Icons.Trash2 />
               </div>
             );
           case 'undo':
             return (
               <div key={index} className="td-actions--item td-actions--undo" onClick={() => onActionClick('undo', rowItem)}>
-                <Icons.FiRotateCcw />
+                <Icons.RotateCcw />
               </div>
             );
           case 'switcher':

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 
-import { FiArrowDown, FiArrowUp } from 'react-feather';
+import { ArrowDown, ArrowUp } from 'react-feather';
 
 import '../Table.scss';
 
@@ -10,8 +10,8 @@ const TdPriority = ({ onClick, rowIndex, cardLength }) => {
     <div className="cards-table__priority">
       <span className="mr5">{rowIndex + 1}</span>
       <div className="df">
-        <FiArrowDown onClick={() => onClick(rowIndex)} className={cn('table--icon', { disabled: rowIndex + 1 === cardLength })} />
-        <FiArrowUp onClick={() => onClick(rowIndex, true)} className={cn('table--icon', { disabled: rowIndex === 0 })} />
+        <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>
   );

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

@@ -1,5 +1,3 @@
-@import '../../../scss/anme/anme-vars';
-
 .td-actions {
     &--item {
         display: flex;
@@ -16,19 +14,19 @@
     }
 
     &--delete {
-        color: $color--froly !important;
+        color: #F06D8DFF !important;
     }
 
     &--undo {
-        color: $color--froly !important;
+        color: #F06D8DFF !important;
     }
 
     &--edit {
-        color: $color--primary !important;
+        color: #6B81DDFF !important;
     }
 
     &--download {
-        color: $color--primary;
+        color: #6B81DDFF;
     }
 }
 

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

@@ -1,8 +1,8 @@
 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 { KEY_CODE } from '../../../../../../JS/Constants/index.constants';
+import useToggle from '../../../../../../JS/Functions/useToggle';
 import Input from '../../Input/Input';
 
 import '../Table.scss';

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 import { IoWarningOutline } from 'react-icons/io5';
-import { FiX } from 'react-feather';
+import { X } from 'react-feather';
 
 import './Tag.scss';
 
@@ -14,7 +14,7 @@ const Tag = ({ className, label, warning, removeItem, name }) => {
 
       {removeItem && (
         <button onClick={() => removeItem()} className="tag__button">
-          <FiX className="color--text" />
+          <X className="color--text" />
         </button>
       )}
     </div>

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

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

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import cn from 'classnames';
-import { FiChevronDown, FiCheck } from 'react-feather';
+import { ChevronDown, Check } from 'react-feather';
 
 import Tag from '../Tag/Tag';
 import Label from '../Label/Label';
@@ -56,7 +56,7 @@ const TagsDropdown = ({ options, chosenOptions, onChange, className, tagClassnam
         )}
       >
         <span className={cn(`${RC}__active-icon`, { [`${RC}__active-icon_active`]: chosenOptions.some(el => el.value === item.value) })}>
-          <FiCheck className="color--text" />
+          <Check className="color--text" />
         </span>
         {item.title}
       </button>
@@ -83,7 +83,7 @@ const TagsDropdown = ({ options, chosenOptions, onChange, className, tagClassnam
             onKeyDown={e => onKeyPress(e, searchValue)}
           />
           <span className={cn(`${RC}__arrow`, { [`${RC}__arrow_active`]: isOpen })}>
-            <FiChevronDown className="color--text" />
+            <ChevronDown className="color--text" />
           </span>
         </button>
       </div>

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

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

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

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

package/src/Atomic/FormElements/Textarea/Textarea.scss

@@ -1,5 +1,5 @@
 @import "../../../scss/vars";
-@import "../../../scss/anme/anme-mixins";
+@import "~anme/scss/anme-mixins";
 
 .textarea {
   border: 1px solid #e2e5ec;

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

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

package/src/Atomic/FormElements/TimeRange/TimeRange.js

@@ -2,7 +2,7 @@ import React, { useState, useMemo } from 'react';
 import cn from 'classnames';
 import moment from 'moment';
 
-import useToggle from '../../../../JS/Functions/useToggle';
+import useToggle from '../../../Functions/useToggle';
 import Label from '../Label/Label';
 import Input from '../Input/Input';
 

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

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

package/src/Atomic/MainMenu/MainMenu.js

@@ -51,9 +51,9 @@ const MainMenu = props => {
   };
 
   const changeMenuIcon = () => {
-    if (isOpen && !isMenuIconHovered) return <Icons.FiMenu />;
-    if (isOpen && isMenuIconHovered) return <Icons.FiChevronLeft />;
-    if (!isOpen && isMenuHovered) return <Icons.FiChevronRight />;
+    if (isOpen && !isMenuIconHovered) return <Icons.Menu />;
+    if (isOpen && isMenuIconHovered) return <Icons.ChevronLeft />;
+    if (!isOpen && isMenuHovered) return <Icons.ChevronRight />;
     if (!isOpen) return <div className="main-menu--logo-close" />;
     return null;
   };

package/src/Atomic/MainMenu/MainMenu.scss

@@ -1,5 +1,5 @@
-@import "../../scss/anme/anme-vars";
-@import "../../scss/anme/anme-mixins";
+@import "~anme/scss/anme-vars";
+@import "~anme/scss/anme-mixins";
 
 .main-menu {
   display: flex;