intelicoreact 0.0.3 → 0.0.7

package/src/Atomic/FormElements/Input/Input.scss

@@ -1,8 +1,14 @@
-@import "../../../scss/vars";
-
-.input-classic {
+.input {
   position: relative;
   word-break: break-all;
+  border: none;
+  background: none;
+  padding: 0 10px;
+  width: 100%;
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+  }
 
   &__wrap {
     display: flex;
@@ -12,8 +18,9 @@
     background-color: #fff;
     height: 28px;
     border-radius: 4px;
+
     &_focus {
-      border-color: $color--primary;
+      border-color: #6b81dd;
       filter: drop-shadow(0px 0px 4px rgba(93, 120, 255, 0.5));
     }
 
@@ -25,7 +32,7 @@
     }
 
     &_error {
-      border-color: $color--secondary;
+      border-color: #f06d8d;
     }
   }
 
@@ -37,7 +44,7 @@
   }
 
   &_error {
-    border-color: $color--secondary;
+    border-color: #f06d8d;
   }
 
   svg {
@@ -50,21 +57,12 @@
     box-sizing: border-box;
     font-size: 13px;
     font-weight: 400;
-    color: $color--dark;
+    color: #1e1e2d;
     border: none;
     padding: 0 5px;
     border-radius: 4px;
   }
 
-  &__error {
-    margin-top: 2px;
-    margin-left: 1px;
-    position: absolute;
-    display: block;
-    font-size: 10px;
-    color: $color--secondary;
-  }
-
   &__close {
     position: relative;
     opacity: 0.6;
@@ -73,7 +71,8 @@
     background: none;
     cursor: pointer;
     margin-right: 4px;
-
+    visibility: hidden;
+    pointer-events: none;
     &:hover {
       opacity: 1;
     }
@@ -88,7 +87,7 @@
       margin: auto;
       height: 14px;
       width: 2px;
-      background-color: $color--gray--dark;
+      background-color: #9aa0b9;
     }
 
     &:before {
@@ -117,7 +116,9 @@
     background: none;
     font-size: 20px;
     user-select: none;
-
+    &.disabled {
+      opacity: 0.3;
+    }
     svg {
       margin-right: 0;
     }
@@ -127,3 +128,9 @@
     margin-bottom: 5px;
   }
 }
+
+.input__wrap:hover .input__close {
+  visibility: visible;
+  pointer-events: all;
+}
+

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

@@ -1,54 +1,52 @@
 import React, { useState } from 'react';
+import {User} from 'react-feather';
 import Input from './Input';
 
-import '../../../../scss/main.scss';
-
 global.lng = 'en';
+
 export default {
-  title: 'Input',
+  title: 'Form Elements/Input',
   component: Input,
   argTypes: {
-    hintSide: {
-      description: 'string: ["right", "bottom", "top", "left"]',
-      control: {
-        type: 'select',
-        options: ['right', 'bottom', 'top', 'left']
-      }
-    },
-    hint: {
-      description: 'string'
-    },
     disabled: {
-      description: 'boolean'
+      description: 'boolean',
     },
     error: {
-      description: 'text'
+      description: 'text - coloring input if is errored'
     },
     withDelete: {
-      description: 'boolean'
+      description: 'boolean - add clear-cross by hover'
     },
     isNumeric: {
-      description: 'boolean'
+      description: 'boolean - add plus/minus buttons, force input to numeric type'
+    },
+    numStep: {
+      description: 'number/text - plus/minus buttons factor (default: 1)'
     },
     min: {
-      description: 'number'
+      description: 'number/text - minimal number for numeric input'
     },
     max: {
-      description: 'number'
+      description: 'number/text - maximal number for numeric input'
     },
     placeholder: {
       description: 'text'
     },
-    label: {
-      description: 'text'
-    },
     type: {
-      description: 'string: any input type',
+      description: "'text', 'number', 'password', 'color', 'date', 'datetime-local', 'month', 'time', 'email', 'range'",
       control: {
         type: 'select',
-        options: ['text', 'number']
+        options: ['text', 'number', 'password', 'color', 'date', 'datetime-local', 'month', 'time', 'email', 'range']
       }
-    }
+    },
+    icon: { description: 'JSX' },
+    value: { description: '(* - required prop)' },
+    className: { description: 'string' },
+    mask: { description: 'string: force input to masked https://www.npmjs.com/package/react-input-mask' },
+    symbolsLimit: { description: 'Set limit of symbols in input, overhead will be ignored' },
+    onBlur: { description: 'custom callback on blur' },
+    onFocus: { description: 'custom callback on focus' },
+    onKeyUp: { description: 'custom callback on keyup, returns event keyCode' }
   }
 };
 
@@ -65,10 +63,17 @@ InputTemplate.args = {
   error: '',
   withDelete: true,
   isNumeric: false,
+  numStep: 1,
   min: '0',
-  max: 5,
+  max: '5',
   placeholder: 'Placeholder',
-  label: 'label',
-  hint: 'hint',
-  hintSide: 'bottom'
+  // mask: 'nnnnn0129',
+  // maskChar: '_',
+  // formatChars: {
+  //   'n': '[0-9]',
+  //   's': '[A-Za-z]',
+  //   '*': '[A-Za-z0-9]'
+  // },
+  icon: <User />,
+  symbolsLimit: 225
 };

package/src/Atomic/FormElements/InputCalendar/InputCalendar.js

@@ -0,0 +1,43 @@
+import React, { useState, useRef } from 'react';
+import moment from 'moment';
+import InputMask from 'react-input-mask';
+import Calendar from '../../UI/Calendar/Calendar';
+import { useClickOutside } from '../../../Functions/useClickOutside';
+
+const InputCalendar = ({ data, params }) => {
+  const [date, setDate] = useState(data);
+  const [inputValue, setInputValue] = useState(date);
+  const [isOpened, setIsOpened] = useState(false);
+  const calendarRef = useRef(null);
+
+  useClickOutside(calendarRef, () => setIsOpened(false));
+
+  const changeInputValue = value => {
+    if (!value.includes('_') && value) {
+      setDate(moment(value).format('L'));
+      setInputValue(moment(value).format('L'));
+    } else {
+      setInputValue(value);
+    }
+  };
+
+  const changeCalendarDay = value => {
+    setDate(value);
+    setInputValue(value);
+  };
+
+  return (
+    <div className="calendar-container" ref={calendarRef}>
+      <InputMask
+        mask="99/99/9999"
+        value={inputValue}
+        onChange={e => changeInputValue(e.target.value)}
+        className="calendar-dropdown"
+        onFocus={() => setIsOpened(!isOpened)}
+      />
+      {isOpened ? <Calendar date={date} setDate={(newDate) => changeCalendarDay(newDate)} params={params} /> : null}
+    </div>
+  );
+};
+
+export default InputCalendar;

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

@@ -0,0 +1,27 @@
+import React, { useRef, useState } from 'react';
+import { ref } from 'yup';
+import InputCalendar from './InputCalendar';
+
+global.lng = 'en';
+
+export default {
+  title: 'Form Elements/InputCalendar',
+  component: InputCalendar,
+};
+
+const Template = (args) => {
+  const params = {
+    minDate: args?.minDate,
+    maxDate: args?.maxDate,
+  };
+
+  return <InputCalendar data={args.date} params={params} />;
+};
+
+export const Calendar = Template.bind({});
+
+Calendar.args = {
+  date: '10/14/2021',
+  minDate: '10/11/2021',
+  maxDate: '10/25/2021',
+};

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

@@ -0,0 +1,241 @@
+import React, { useState, useEffect, useRef, useMemo } from 'react';
+import cn from 'classnames';
+import moment from 'moment-timezone';
+
+import { useClickOutside, useToggle, getActualDateRange, INTERVALS, ALL_TIME_KEY, CUSTOM_INTERVAL_KEY_TEXT } from './dependencies';
+
+import OpenedPart from './components/OpenedPart';
+import Arrow from '../../UI/Arrow/Arrow';
+
+import './InputDateRange.scss'
+
+const InputDateRange = props => {
+    const {
+        txt,
+        id,
+        label,
+        className,
+        buttonsTypes,
+        value,
+        onChange = () => {},
+        error,
+        disabled,
+        isHoverable,
+        short,
+        isCompact = false,
+        // isFocused = false,
+        isIntervalsHidden = false,
+        isCompareHidden = false,
+        hideArrows = false,
+        isOptionsRight,
+        limitRange,
+        isShortWeekNames,
+        isUseAbs,
+        absTooltip,
+    } = props;
+
+    const actualValues = getActualDateRange(value);
+    const { isToggled, toggle, toggleOn, toggleOff } = useToggle(false);
+    const [current, setCurrent] = useState(actualValues?.intervalKey);
+    const [isCompare, setIsCompare] = useState(actualValues?.compare);
+
+    const ref = !isUseAbs ? useClickOutside(toggleOff) : useRef(null);
+    const internalContainerRef = useRef(null);
+    const isEndDateNearFuture = moment(actualValues?.end).isSameOrAfter(moment());
+
+    const handleChange = input => {
+        const newValue = getActualDateRange(input);
+        const formatedValue = {
+            intervalKey: newValue.intervalKey,
+            start: newValue.start ? moment(newValue.start).format('YYYY-MM-DDTHH:mm') : newValue.start,
+            end: newValue.end ? moment(newValue.end).format('YYYY-MM-DDTHH:mm') : newValue.end,
+            ...(newValue.compare ? {compare: newValue.compare} : {}),
+            ...(newValue.startPrevDate ? {startPrevDate: moment(newValue.startPrevDate).format('YYYY-MM-DDTHH:mm')} : {}),
+            ...(newValue.endPrevDate ? {endPrevDate: moment(newValue.endPrevDate).format('YYYY-MM-DDTHH:mm')} : {}),
+        };
+
+        onChange(formatedValue);
+        return formatedValue;
+    };
+
+    const Range = () => {
+        const  SYMBOLS_QUANTITY_IF_TIME_ADDED = 13;
+        const { start, end } = actualValues;
+        if (!start || !end) return null;
+
+        const startTime = moment(start).format('HH:mm');
+        const endTime = moment(end).format('HH:mm');
+
+        const firstPart = `${moment(start).format('ll')} ${startTime !== '00:00' ? `(${startTime})` : ''}`;
+        const secondPart = `${(endTime !== '00:00' ? moment(end) : moment(end).subtract(1, 'days')).format('ll')} ${
+            endTime !== '00:00' ? `(${endTime})` : ''
+        }`;
+
+        const getClasses = base => cn('date-range-input__range-text', {
+            'date-range-input__range-text_little': base.length > SYMBOLS_QUANTITY_IF_TIME_ADDED
+        });
+
+        return (
+            <>
+                <span className={getClasses(firstPart)}>
+                    {firstPart}
+                    {endTime === '00:00' && moment(end).isSame(moment(start).add(1, 'days'), 'day') ? '' : ` - `}
+                </span>
+                {endTime === '00:00' && moment(end).isSame(moment(start).add(1, 'days'), 'day')
+                    ? null
+                    :<span className={getClasses(secondPart)}>{secondPart}</span>
+
+                }
+            </>
+        )
+    }
+
+    const slideInterval = (direction = 'forward') => {
+        const { start, end } = actualValues;
+        const intervalHoursCount = moment(end).diff(start, 'hours');
+        let newEnd, newStart;
+        const endHours = moment(end).hours();
+        const startHours = moment(start).hours();
+        if (direction === 'forward') {
+            newStart = moment(end)
+                .add(endHours === 0 ? 0 : 1, 'day')
+                .hours(startHours)
+                .toDate();
+            newEnd = moment(newStart).add(intervalHoursCount, 'hours');
+        } else {
+            newEnd = moment(start)
+                .subtract(endHours === 0 ? 0 : 1, 'day')
+                .hours(endHours)
+                .toDate();
+            newStart = moment(newEnd).subtract(intervalHoursCount, 'hours');
+        }
+        const startPrevDate = moment(newStart).subtract(intervalHoursCount, 'hours').subtract(1, 'seconds');
+        const endPrevDate = moment(newEnd).subtract(1, 'seconds');
+        handleChange({
+            ...value,
+            intervalKey: getActualDateRange({
+                start: newStart,
+                end: newEnd,
+            })?.intervalKey,
+            start: newStart,
+            end: newEnd,
+            startPrevDate,
+            endPrevDate,
+        });
+    };
+
+    const handleArrowClick = type => {
+        slideInterval(type === 'right' ? 'forward' : 'back');
+        toggleOff();
+    };
+
+    // const absData = useMemo(
+    //     () => ({
+    //         body: OpenedPart,
+    //         props: {
+    //             ...props,
+    //             key: `${actualValues.start}-${actualValues.end}-${actualValues.intervalKey}-${current}-${isCompare}`,
+    //             actualValues,
+    //             current,
+    //             setCurrent,
+    //             isCompare,
+    //             setIsCompare,
+    //             toggleOff,
+    //             onChange,
+    //         },
+    //         clickOutsideCallback: () => toggleOff(),
+    //         top: internalContainerRef.current?.getBoundingClientRect()?.bottom || 0,
+    //         left: internalContainerRef.current?.getBoundingClientRect()?.left || 0,
+    //     }),
+    //     [isToggled, value, actualValues, current, isCompare],
+    // );
+
+    // useEffect(() => {
+    //     if (current && isUseAbs && absTooltip) onChange(current, 'absTooltip/props/current');
+    // }, [current]);
+
+    // useEffect(() => {
+    //     if (isUseAbs) onChange(isToggled ? absData : null, 'absTooltip');
+    // }, [isToggled]);
+
+    return (
+        <div
+            ref={internalContainerRef}
+            className={cn('date-range-input', className, {
+                'date-range-input_compact': isCompact,
+                'date-range-input_hide-arrows': hideArrows,
+                'date-range-input_focused': isToggled,
+                'date-range-input_error': error,
+                'date-range-input_disabled': disabled,
+            })}
+        >
+            <span className="date-range-input__label" >{label}</span>
+            <div
+                className="date-range-input__wraper"
+                ref={ref}
+                onMouseEnter={isHoverable && toggleOn}
+                onMouseLeave={isHoverable && toggleOff}
+            >
+                <div className={cn('date-range-input__absolut-wraper', {
+                    'date-range-input__absolut-wraper_right-position': isOptionsRight,
+                })}>
+                    <div className={cn('date-range-input__static-part')}>
+                        <button
+                            id={id}
+                            className={cn('date-range-input__toggle-button')}
+                            disabled={disabled}
+                            onClick={!disabled && !isHoverable ? toggle : undefined}
+                        >
+                            <div className="date-range-input__interval-key">
+                                <span>
+                                    {(txt?.labels && txt.labels[actualValues?.intervalKey]) ?? (INTERVALS[actualValues?.intervalKey]?.label || CUSTOM_INTERVAL_KEY_TEXT)}
+                                </span>
+                                {current !== ALL_TIME_KEY && <span>:</span>}
+                            </div>
+                            {!isCompact && <div className={cn('date-range-input__range', {})}><Range /></div>}
+                        </button>
+                        {!isCompact && !hideArrows && (
+                            <div className={cn('date-range-input__arrows-block')}>
+                                <Arrow
+                                    type="left"
+                                    className="date-range-input__arrow"
+                                    onClick={() => handleArrowClick("left")}
+                                    disabled={disabled || actualValues?.intervalKey === ALL_TIME_KEY}
+                                />
+                                <Arrow
+                                    type="right"
+                                    className="date-range-input__arrow"
+                                    onClick={() => handleArrowClick("right")}
+                                    disabled={
+                                        disabled ||
+                                        actualValues?.intervalKey === ALL_TIME_KEY ||
+                                        actualValues?.intervalKey === 'today' ||
+                                        moment(actualValues?.end)
+                                            .add(moment(actualValues?.end).diff(actualValues?.start, 'hours'), 'hours')
+                                            .isAfter(moment().add(1, 'day').startOf('day'))
+                                    }
+                                />
+                            </div>
+                        )}
+                    </div>
+                    {isToggled && !isUseAbs && (
+                        <OpenedPart
+                            {...props}
+                            ref={internalContainerRef}
+                            actualValues={actualValues}
+                            current={current}
+                            setCurrent={setCurrent}
+                            isCompare={isCompare}
+                            setIsCompare={setIsCompare}
+                            toggleOff={toggleOff}
+                            onChange={handleChange}
+                        />
+                    )}
+                </div>
+            </div>
+            {error && <span className="date-range-input__error-block">{error}</span>}
+        </div>
+    );
+};
+
+export default React.memo(InputDateRange);