intelicoreact 0.0.52 → 0.0.63

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,
@@ -27,18 +46,15 @@ export default {
         type: 'select',
         options: ['default', '290', '420', '870', '770', '950']
       }
-    }
-  },
-  type: {
-    control: {
-      type: 'select',
-      options: ['default', 'primary']
-    }
-  },
-  size: {
-    control: {
-      type: 'select',
-      options: ['default', '290', '420', '770', '870', '950']
+    },
+    type: {
+      control: {
+        type: 'select',
+        options: ['default', 'primary']
+      }
+    },
+    withConfirmation: {
+      description: confirmationDescrip
     }
   }
 };
@@ -49,8 +65,16 @@ const Template = args => {
 
   return (
     <>
-      <Button onClick={() => setIsOpen(true)} label="Show modal" />
-      <Modal closeModal={closeModal} isOpen={isOpen} {...args}>
+      <Button onClick={() => setIsOpen(true)} text="Show modal" />
+      <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/RangeCalendar/RangeCalendar.js

@@ -0,0 +1,143 @@
+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
+    } = 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());
+    };
+
+    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">
+                            {moment().weekday(dayOfWeek).format('dd').charAt(0)}
+                        </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/UI/Arrow/Arrow.js

@@ -0,0 +1,41 @@
+import React, { useEffect, useRef, useState } from 'react';
+import cn from 'classnames';
+
+import { getStyles } from '../../../Functions/utils';
+
+import './Arrow.scss';
+
+const Arrow = ({type, className, onClick, disabled}) => {
+  if (!type || (type !== 'left' && type !== 'right')) return null;
+  const ref = useRef();
+  const [color, setColor] = useState('black');
+
+  useEffect(() => {
+    if (ref.current) {
+      setColor(getStyles(ref.current, 'color'));
+    };
+  }, [ref.current]);
+
+  return (
+    <div 
+      ref={ref}
+      className={cn('arrow', `arrow_${type}`, className, {
+        'arrow_disabled': disabled
+      })}
+      onClick={onClick} >
+      {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"/>
+          </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"/>
+          </svg>
+        )
+      }
+    </div>
+  );
+};
+
+export default Arrow;

package/src/Atomic/UI/Arrow/Arrow.scss

@@ -0,0 +1,19 @@
+.arrow {
+  width: 24px;
+  height: 24px;
+
+  &_disabled {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+}
+
+.arrow>svg {
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+
+
+

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import {Check} from 'react-feather';
+import Arrow from './Arrow';
+
+global.lng = 'en';
+
+export default {
+  title: 'UI/Arrow',
+  component: Arrow,
+  argTypes: {
+    type: {
+      description: 'string: ["left", "right"]',
+      control: {
+        type: 'select',
+        options: ['left', 'right']
+      }
+    }
+  }
+};
+
+const Template = args => {
+  const { className, onClick } = args;
+  return <Arrow {...args} />;
+};
+
+export const ArrowTemplate = Template.bind({});
+
+ArrowTemplate.args = {
+  type: 'left',
+  className: 'externall-class-name',
+  onClick: ev => console.log(ev.target.className)
+};

package/src/Atomic/UI/Button/Button.js

@@ -3,11 +3,11 @@ import cn from 'classnames';
 
 import './Button.scss';
 
-const Button = ({ label, variant = 'primary', onClick, disabled, icon, className, children, style }) => {
-
+const Button = ({ label, variant = 'primary', onClick, disabled, icon, className, children, style, noIcon }) => {
+  const noRenderIcon = noIcon || variant === "ellipse-apply" || variant === "ellipse-cancel";
   return (
     <button style={style} className={cn(className, 'button', { [`button_${variant}`]: variant })} onClick={onClick} disabled={disabled}>
-      {icon}
+      {!noRenderIcon && icon}
       {label && <div className="button__text">{label}</div>}
       {!label && children ? children : null}
     </button>

package/src/Atomic/UI/Button/Button.scss

@@ -1,5 +1,6 @@
 .button {
   display: inline-flex;
+  justify-content: center;
   align-items: center;
   font-size: 13px;
   line-height: 20px;
@@ -45,6 +46,31 @@
         }
     }
 
+    &_ellipse-apply{
+      padding: 8px 16px;
+      border-radius: 40px;
+      background: #1F7499;
+      font-family: 'Sarabun';
+      font-style: normal;
+      font-weight: 500;
+      font-size: 16px;
+      line-height: 24px;
+      letter-spacing: 0.1px;
+      color: #FFFFFF;
+    }
+
+    &_ellipse-cancel{
+      padding: 8px 18px;
+      border-radius: 32px;
+      font-family: Sarabun;
+      font-style: normal;
+      font-weight: normal;
+      font-size: 14px;
+      line-height: 20px;
+      letter-spacing: 0.2px;
+      color: #1F7499;
+    }
+
   &_link {
     color: #6b81dd;
     box-shadow: none;

package/src/Atomic/UI/Button/Button.stories.js

@@ -9,10 +9,10 @@ export default {
   component: Button,
   argTypes: {
     variant: {
-      description: 'string: ["primary", "secondary", "dark-outline"]',
+      description: 'string: ["primary", "secondary", "dark-outline", "ellipse-apply", "ellipse-cancel"]',
       control: {
         type: 'select',
-        options: ['primary', 'secondary', 'dark-outline', 'link']
+        options: ['primary', 'secondary', 'dark-outline', 'link', 'ellipse-apply', 'ellipse-cancel']
       }
     },
     label: {
@@ -44,5 +44,6 @@ ButtonTemplate.args = {
   disabled: false,
   onClick: () => null,
   label: 'Button',
-  icon: <Check/>
+  icon: <Check/>,
+  
 };

package/src/Atomic/{FormElements → UI}/Calendar/Calendar.js

@@ -8,13 +8,14 @@ export default function (props) {
   const { date, setDate, allowPrev = true, allowNext = true, params } = props;
   const { minDate, maxDate } = params;
   const [days, setDays] = useState({});
+  const [showDate, setShowDate] = useState(date);
 
-  const selectedDay = moment(date);
+  const selectedDay = moment(showDate);
   const isError = 'Invalid date';
 
   const title = useMemo(
-    () => (selectedDay.format('MMM') === isError ? isError : `${selectedDay.format('MMM')} ${moment(date).format('YYYY')}`),
-    [date]
+    () => (selectedDay.format('MMM') === isError ? isError : `${selectedDay.format('MMM')} ${moment(showDate).format('YYYY')}`),
+    [date, showDate]
   );
   useEffect(() => {
     const result = {};
@@ -31,7 +32,7 @@ export default function (props) {
       day.add(1, 'd');
     }
     setDays(result);
-  }, [date]);
+  }, [showDate]);
 
   const renderDay = (week, dayOfWeek) => {
     const day = days[week][dayOfWeek];
@@ -44,11 +45,9 @@ export default function (props) {
       { 'calendar__day--clickable': day },
       { 'calendar__day--disabled': isFutureDay },
       { 'calendar__day--disabled': isBeforeDay },
-      { 'calendar__day--selected': selectedDay.format() === moment(day.date).format() }
+      { 'calendar__day--selected': moment(date).format() === moment(day.date).format() }
     );
 
-    // console.log(isMaxDate, isMinDate);
-
     return (
       <div
         key={`${week}_${dayOfWeek}`}
@@ -63,11 +62,11 @@ export default function (props) {
   };
 
   const handlePrev = () => {
-    setDate(moment(date).subtract(1, 'month').format('L'));
+    setShowDate(moment(showDate).subtract(1, 'month').format('L'));
   };
 
   const handleNext = () => {
-    setDate(moment(date).add(1, 'month').format('L'));
+    setShowDate(moment(showDate).add(1, 'month').format('L'));
   };
 
   return (