intelicoreact 0.0.63 → 0.0.71

package/src/Atomic/FormElements/InputDateRange/InputDateRange.scss

@@ -1,23 +1,24 @@
 :root {
-  --input-height: 26px;
+  --input-height: 28px;
   --label-line-height: 16px;
   // --border-color: rgba(0, 0, 0, 0.3);
-  --border-color: #e2e5ec;
+  --border-color: #E2E5EC;
   --calendar-range-point-color: #6b81dd;
-  --font-size: 12px;
+  --font-family: 'Roboto';
+  --font-size: 13px;
   --line-height: 20px;
-  --border-radius: 4px;
+  --border-radius: 3px;
 }
 
 .date-range-input {
-  position: relative;
-  width: 430px;
-  height: calc(var(--input-height) + var(--label-line-height));
+  /*position: relative;
+  width: 335px;
+  //height: calc(var(--input-height) + var(--label-line-height));
 
   display: flex;
   flex-flow: column nowrap;
   justify-content: flex-end;
-  align-items: flex-start;
+  align-items: flex-start;*/
 
   input::-webkit-outer-spin-button,
   input::-webkit-inner-spin-button {
@@ -26,6 +27,7 @@
 
   &__label {
     margin-bottom: 2px;
+    font-family: var(--font-family);
     font-size: var(--font-size);
     line-height: var(--label-line-height);
   }
@@ -48,11 +50,11 @@
     flex-flow: column nowrap;
     justify-content: flex-start;
     align-items: flex-start;
-  
+
     background: transparent;
     z-index: 1;
 
-    
+
     &_right-position {
       left: auto;
       right: 0;
@@ -70,7 +72,7 @@
     flex-flow: row nowrap;
     justify-content: flex-end;
     align-items: flex-start;
-  
+
     background: #FFFFFF;
     border: 1px solid var(--border-color);
   }
@@ -86,7 +88,7 @@
     width: 100%;
     height: 100%;
     padding: 0 10px;
-    
+
     display: flex;
     flex-direction: row;
     flex-flow: row nowrap;
@@ -95,10 +97,10 @@
 
     cursor: pointer;
   }
-  
+
   &__interval-key {
     display: inline-block;
-    margin-right: 10px;
+    margin-right: 5px;
     text-transform: capitalize;
     white-space: nowrap;
     text-align: left;
@@ -224,17 +226,21 @@
 
     text-transform: capitalize;
     white-space: nowrap;
+    font-style: normal;
+    font-weight: 300;
+    font-family: var(--font-family);
     font-size: var(--font-size);
     line-height: var(--line-height);
     cursor: pointer;
-   
+
     display: flex;
     flex-flow: row nowrap;
     justify-content: flex-start;
     align-items: center;
 
     &:hover {
-      background-color: rgba(128, 128, 128, 0.1);
+      // background-color: rgba(128, 128, 128, 0.1);
+      background-color: #F2F2F8;
     }
 
     &-icon-active {
@@ -265,8 +271,9 @@
     box-sizing: border-box;
     width: 100%;
     height: fit-content;
-    padding: 5px;
+    padding: 7.5px 15px;
     border: none;
+    background-color: #F7FAFC;
 
     display: flex;
     flex-flow: column nowrap;
@@ -285,6 +292,7 @@
     line-height: var(--line-height);
 
     &>div:not(.date-picker__inputs-separator) {
+      width: 110px;
       height: 100%;
       margin-right: 9px;
 
@@ -307,6 +315,11 @@
       }
     }
 
+    &>div.dropdown {
+      width: 80px;
+      border-radius: var(--border-radius);
+    }
+
     .date-picker__inputs-separator {
       margin-right: 9px;
     }
@@ -317,12 +330,13 @@
     width: fit-content;
     height: fit-content;
     padding: 3px 10px;
+    border-radius: var(--border-radius);
 
-    font-family: inherit;
-    font-style: inherit;
-    font-weight: inherit;
-    font-size: inherit;
-    line-height: inherit;
+    font-family: var(--font-family);
+    font-style: normal;
+    font-weight: 300;
+    font-size: var(--font-size);
+    line-height: var(--input-height);
     letter-spacing: inherit;
     color: inherit;
   }
@@ -331,7 +345,7 @@
     width: 70px;
     height: fit-content;
     border-radius: var(--border-radius);
-    
+
     &>.dropdown__trigger {
       width: 100%;
       height: 100%;
@@ -399,45 +413,49 @@
       box-sizing: border-box;
       width: fit-content;
       height: fit-content;
-    
+
       &-header {
         height: fit-content;
         margin-bottom: 12px;
 
         font-size: calc(var(--font-size) + 2px);
         line-height: calc(var(--line-height) + 4px);
-    
+
+        font-style: normal;
+        font-weight: 500;
+
         display: flex;
         justify-content: space-between;
         align-items: center;
-      
+
         &__title {
           text-align: center;
         }
-      
+
         &__next, &__prev {
+          background-color: transparent;
           cursor: pointer;
         }
       }
-    
+
       &__week {
         display: flex;
-    
+
         &-title {
           margin-bottom: 5px;
         }
       }
-    
+
       &__day {
         position: relative;
         box-sizing: border-box;
-        width: 36px;
-        height: 24px;
+        width: 29px;
+        height: 22px;
         margin: 1px 0;
         flex-grow: 1;
         flex-basis: 0;
         user-select: none;
-    
+
         display: flex;
         justify-content: center;
         align-items: center;
@@ -445,80 +463,80 @@
         font-size: var(--font-size);
         line-height: var(--line-height);
         text-align: center;
-    
+
         &--clickable {
           cursor: pointer;
-    
+
           &:hover {
             background: #E2E6F8;
           }
         }
-    
+
         &--disabled {
           cursor: default;
           opacity: 0.2;
           pointer-events: none;
-    
-          &:hover {
-            background: inherit;
-          }
-        }
-    
-        &--range-end {
-          background: #EAF2FF;
-          border: 1px solid #EAF2FF;
-          border-radius: 0 24px 24px 0;
-          color: var(--calendar-range-point-color);
-
-          &::before {
-            content: '';
-            display: block;
-            width: 100%;
-            height: 100%;
-            box-sizing: border-box;
-            position: absolute;
-            border: 1px solid var(--calendar-range-point-color);
-            border-radius: 24px;
-            pointer-events: none;
-          }
 
           &:hover {
-            color: #F8FBFF;
-            background-color: var(--calendar-range-point-color);
-            border-radius: 24px;
+            background: inherit;
           }
         }
 
-        &--range-start {
+        // &--range-end {
+        //   background: #EAF2FF;
+        //   border: 1px solid #EAF2FF;
+        //   border-radius: 0 24px 24px 0;
+        //   color: var(--calendar-range-point-color);
+
+        //   &::before {
+        //     content: '';
+        //     display: block;
+        //     width: 100%;
+        //     height: 100%;
+        //     box-sizing: border-box;
+        //     position: absolute;
+        //     border: 1px solid var(--calendar-range-point-color);
+        //     border-radius: 24px;
+        //     pointer-events: none;
+        //   }
+
+        //   &:hover {
+        //     color: #F8FBFF;
+        //     background-color: var(--calendar-range-point-color);
+        //     border-radius: 24px;
+        //   }
+        // }
+
+        &--range-start, &--range-end {
           background: var(--calendar-range-point-color);
           border: 1px solid var(--calendar-range-point-color);
           box-sizing: border-box;
-          border-radius: 24px;
+          border-radius: var(--border-radius);
           color: #F8FBFF;
-    
+
           &:hover {
             background: var(--calendar-range-point-color);
             color: #F8FBFF;
           }
         }
-    
+
         &--range-inside {
           background: #EAF2FF;
         }
-    
+
         &--prev-range-end {
           background: #E2E5EC;
           border-radius: var(--border-radius);
         }
-    
+
         &--prev-range-inside {
           background: #F7F8FA;
         }
-    
+
         &--title {
-          font-size: calc(var(--font-size) + 2px);
-          line-height: calc(var(--line-height) + 4px);
-    
+          font-size: var(--font-size);
+          line-height: var(--line-height);
+
           &:hover {
             background: inherit;
           }
@@ -533,6 +551,7 @@
     padding: 8px 16px;
     border-radius: 0 0 var(--border-radius) 0;
     border: none;
+    background-color: #F7FAFC;
 
     display: flex;
     flex-flow: row nowrap;
@@ -552,12 +571,18 @@
 
   &__button {
     text-transform: capitalize;
-    
+
     &:first-child {
+      width: 80px;
       margin-right: 16px;
+      background-color: #FFFFFF;
+      border: 1px solid #A6ACB1;
+      border-radius: var(--border-radius);
     }
 
     &:last-child {
+      width: 110px;
+      border-radius: var(--border-radius);
     }
   }
 

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

@@ -1,5 +1,6 @@
-import React, { useState } from 'react';
+import React, { /* useEffect, */ useState } from 'react';
 import InputDateRange from './InputDateRange';
+import Table from '../Table/Table';
 
 global.lng = 'en';
 
@@ -19,6 +20,7 @@ export default {
 const Template = args => {
   const { dateRange, ...restOfProps } = args;
   const [value, setValue] = useState(dateRange);
+  // useEffect(() => console.log(value), [value]);
 
   // return <InputDateRange {...restOfProps} value={value} onChange={setValue} />;
   return (
@@ -33,26 +35,27 @@ const Template = args => {
 export const InputDateRangeTemplate = Template.bind({});
 
 InputDateRangeTemplate.args = {
-    txt: {},
-    buttonsTypes: {
-      // apply: 'ellipse-apply',
-      cancel: 'bark-outline'
-    },
-    label: 'Date Range',
-    dateRange: { intervalKey: 'today'},
-    id: 'anyToggleButtonId',
-    className: 'anyExternalContainerClassName',
-    error: false,
-    disabled: false,
-    isHoverable: false,
-    // short: true,
-    isCompact: false,
-    // isFocused: true,
-    isIntervalsHidden: false,
-    isCompareHidden: true,
-    hideArrows: false,
-    isOptionsRight: false,
-    // limitRange,
-    // isUseAbs,
-    // absTooltip
+  txt: {},
+  buttonsTypes: {
+    // apply: 'ellipse-apply',
+    cancel: 'bark-outline'
+  },
+  label: 'Date Range',
+  dateRange: { intervalKey: 'today' },
+  id: 'anyToggleButtonId',
+  className: 'anyExternalContainerClassName',
+  error: false,
+  disabled: false,
+  isHoverable: false,
+  // short: true,
+  isCompact: false,
+  // isFocused: true,
+  isIntervalsHidden: false,
+  isCompareHidden: true,
+  hideArrows: false,
+  isOptionsRight: false,
+  isShortWeekNames: false
+  // limitRange,
+  // isUseAbs,
+  // absTooltip
 };

package/src/Atomic/FormElements/InputDateRange/components/Datepicker.js

@@ -40,7 +40,8 @@ const Datepicker = props => {
         isCompareHidden,
         limitRange,
         handleItemClick,
-        setActiveInterval
+        setActiveInterval,
+        isShortWeekNames
     } = props;
     const { start = null, end = null, compare = false } = values;
     const startDateInputRef = useRef(null);
@@ -306,7 +307,7 @@ const Datepicker = props => {
                         onFocus={handleStartDateFocus}
                         onBlur={handleStartDateBlur}
                         onKeyUp={(code, e) => handleKeyPressed(code, e, 'start')}
-                        ref={startDateInputRef}
+                        //ref={startDateInputRef}
                         // mask={moment(startDate).format('L').replace(/[0-9]/g, '9')}
                     />
                     <SelectInput
@@ -328,7 +329,7 @@ const Datepicker = props => {
                         onFocus={handleEndDateFocus}
                         onBlur={handleEndDateBlur}
                         onKeyUp={(code, e) => handleKeyPressed(code, e, 'end')}
-                        ref={endDateInputRef}
+                        //ref={endDateInputRef}
                     />
                     <SelectInput
                         dataTest="datepicker_end-hour-select-input"
@@ -362,6 +363,7 @@ const Datepicker = props => {
                         onClick={handleClick}
                         onHover={handleHover}
                         limitRange={limitRange}
+                        isShortWeekNames={isShortWeekNames}
                     />
                     <Calendar
                         className="date-picker__calendar"
@@ -374,6 +376,7 @@ const Datepicker = props => {
                         endPrevDate={endPrevDate}
                         onClick={handleClick}
                         onHover={handleHover}
+                        isShortWeekNames={isShortWeekNames}
                     />
                 </div>
             </div>

package/src/Atomic/FormElements/InputDateRange/components/OpenedPart.js

@@ -2,7 +2,7 @@ import React, {useEffect, useState} from 'react';
 import moment from 'moment-timezone';
 import cn from 'classnames';
 
-import {INTERVALS as intervals, CUSTOM_INTERVAL_KEY as customKey } from '../dependencies';
+import {INTERVALS as intervals, CUSTOM_INTERVAL_KEY as customKey, CUSTOM_INTERVAL_KEY_TEXT } from '../dependencies';
 
 import SelectItem from './SelectItem';
 import Datepicker from './Datepicker';
@@ -25,6 +25,7 @@ const OpenedPart = React.forwardRef((props, ref) => {
         isCompare,
         setIsCompare,
         toggleOff,
+        isShortWeekNames
     } = props;
   
     const items = isCompact ? [...Object.keys(intervals)] : [...Object.keys(intervals), customKey];
@@ -76,7 +77,7 @@ const OpenedPart = React.forwardRef((props, ref) => {
                             <SelectItem
                                 key={index}
                                 item={item}
-                                label={(txt?.labels && txt?.labels[item]) || intervals[item]?.label || item}
+                                label={(txt?.labels && txt?.labels[item]) || intervals[item]?.label || (item === customKey ? CUSTOM_INTERVAL_KEY_TEXT : item )}
                                 isActive={activeInterval === item}
                                 onItemClick={() => handleItemClick(item.value || item)}
                                 disabled={item === customKey}
@@ -103,6 +104,7 @@ const OpenedPart = React.forwardRef((props, ref) => {
                         isCompareHidden={isCompareHidden}
                         limitRange={limitRange}
                         setActiveInterval={setActiveInterval}
+                        isShortWeekNames={isShortWeekNames}
                     />
                 )}
             </div>

package/src/Atomic/FormElements/InputDateRange/components/SelectItem.js

@@ -15,7 +15,7 @@ const SelectItem = ({ item, label, isActive, onItemClick, onMouseEnter, disabled
     >
         {isActive && (
             <svg className={cn('opened-part__intervals-item-icon-active')} width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M13.3333 4L5.99999 11.3333L2.66666 8" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M13.3333 4L5.99999 11.3333L2.66666 8" stroke="black" strokeWidth="1.33333" strokeLinecap="round" strokeLinejoin="round"/>
             </svg>
         )}
         {label}

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

@@ -115,10 +115,9 @@ export const CUSTOM_INTERVAL_KEY_TEXT = 'Custom Date';
 
 export const getActualDateRange = inputDateRange => {
     const actualIntervalKey = (() => {
-        if (inputDateRange.intervalKey && inputDateRange.intervalKey !== CUSTOM_INTERVAL_KEY) {
+        if (inputDateRange.intervalKey && Object.keys(INTERVALS).includes(inputDateRange.intervalKey)) {
             return inputDateRange.intervalKey;
-        }
-        if (inputDateRange.start && inputDateRange.end) {
+        } else if (inputDateRange.start && inputDateRange.end) {
             for (const [key, interval] of Object.entries(INTERVALS)) {
                 if (
                     moment(inputDateRange.start).isSame(interval.start()) &&
@@ -127,20 +126,29 @@ export const getActualDateRange = inputDateRange => {
                     return key;
                 }
             }
+            return CUSTOM_INTERVAL_KEY;
         }
-        return null;
+        return ALL_TIME_KEY;
     })();
+    if (actualIntervalKey === ALL_TIME_KEY) return {
+        intervalKey: ALL_TIME_KEY,
+        start: null,
+        end: null,
+        compare: inputDateRange.compare,
+        startPrevDate: null,
+        endPrevDate: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(),
+                : INTERVALS[inputDateRange.intervalKey]?.start()?.format('YYYY-MM-DDTHH:mm'),
         end:
             inputDateRange.intervalKey === CUSTOM_INTERVAL_KEY
                 ? inputDateRange?.end
-                : INTERVALS[inputDateRange.intervalKey]?.end()?.toDate(),
+                : INTERVALS[inputDateRange.intervalKey]?.end()?.format('YYYY-MM-DDTHH:mm'),
         compare: inputDateRange.compare,
     };
 

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

@@ -19,7 +19,8 @@ const RangeCalendar = props => {
         onHover = () => {},
         startPrevDate,
         endPrevDate,
-        limitRange
+        limitRange,
+        isShortWeekNames
     } = props;
 
     const [days, setDays] = useState({});
@@ -100,6 +101,8 @@ const RangeCalendar = props => {
         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">
@@ -126,7 +129,7 @@ const RangeCalendar = props => {
                 {[...Array(7).keys()].map(dayOfWeek => {
                     return (
                         <div key={`day-of-week_${dayOfWeek}`} className="range-calendar__day range-calendar__day--title">
-                            {moment().weekday(dayOfWeek).format('dd').charAt(0)}
+                            {getFormatedWeekName(moment().weekday(dayOfWeek).format('dd'))}
                         </div>
                     );
                 })}

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/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/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;

package/src/Atomic/UI/Accordion/Accordion.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';
 
 .accordion {
     &--item {

package/src/Atomic/UI/Arrow/Arrow.js

@@ -12,25 +12,25 @@ const Arrow = ({type, className, onClick, disabled}) => {
 
   useEffect(() => {
     if (ref.current) {
-      setColor(getStyles(ref.current, 'color'));
+      //setColor(getStyles(ref.current, 'color'));
     };
   }, [ref.current]);
 
   return (
-    <div 
+    <div
       ref={ref}
       className={cn('arrow', `arrow_${type}`, className, {
         'arrow_disabled': disabled
       })}
       onClick={onClick} >
-      {type !== 'right' 
+      {type !== 'right'
         ? (
           <svg 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} stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M15 18L9 12L15 6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
           </svg>
         ) : (
           <svg 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={color} stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M9 18L15 12L9 6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
           </svg>
         )
       }

package/src/Atomic/UI/Calendar/Calendar.js

@@ -5,7 +5,7 @@ import { ChevronLeft, ChevronRight } from 'react-feather';
 import './Calendar.scss';
 
 export default function (props) {
-  const { date, setDate, allowPrev = true, allowNext = true, params } = props;
+  const { date, setDate, allowPrev = true, allowNext = true, params, className } = props;
   const { minDate, maxDate } = params;
   const [days, setDays] = useState({});
   const [showDate, setShowDate] = useState(date);
@@ -70,7 +70,7 @@ export default function (props) {
   };
 
   return (
-    <div className="calendar">
+    <div className={`calendar ${className}`}>
       <div className="calendar-header">
         <div className="calendar-header__prev">
           {allowPrev && (