intelicoreact 0.0.4 → 0.0.8

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

@@ -0,0 +1,94 @@
+import React, { useState } from 'react';
+import { User } from 'react-feather';
+import NumericInput from './NumericInput';
+
+global.lng = 'en';
+
+export default {
+  title: 'Form Elements/NumericInput',
+  component: NumericInput,
+  argTypes: {
+    disabled: {
+      description: 'boolean'
+    },
+    isInitialFocus: {
+      description: 'boolean - if true, the input will be focused on mount'
+    },
+    error: {
+      description: 'text - coloring input if is errored'
+    },
+    isPriceInput: {
+      description: 'boolean - if true, the input will be styled as PriceInput'
+    },
+    withDelete: {
+      description: 'boolean - add clear-cross by hover'
+    },
+    numStep: {
+      description: 'number/text - plus/minus buttons factor (default: 1)'
+    },
+    min: {
+      description: 'number/text - minimal number for numeric input'
+    },
+    max: {
+      description: 'number/text - maximal number for numeric input'
+    },
+    placeholder: {
+      description: 'text'
+    },
+    type: {
+      description:
+        "'text', 'number', 'password', 'color', 'date', 'datetime-local', 'month', 'time', 'email', 'range'",
+      control: {
+        type: 'select',
+        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' }
+  }
+};
+
+const Template = (args) => {
+  const [value, setValue] = useState('');
+  return <NumericInput {...args} value={value} onChange={setValue} />;
+};
+
+export const NumericInputTemplate = Template.bind({});
+
+NumericInputTemplate.args = {
+  type: 'text',
+  disabled: false,
+  error: '',
+  isPriceInput: false,
+  mask: '',
+  withDelete: true,
+  isNumeric: false,
+  numStep: 100,
+  min: '0',
+  max: '15000',
+  symbolsLimit: 2,
+  placeholder: 'Placeholder',
+  icon: <User />
+};

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

@@ -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} 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} strokeWidth="2" strokeLinecap="round" strokeLinejoin="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/>,
+  
 };