intelicoreact 0.0.31 → 0.0.41

package/dist/Atomic/UI/Price/Price.stories.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PriceTemplate = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Price = _interopRequireDefault(require("./Price"));
+
+global.lng = 'en';
+var _default = {
+  title: 'UI/Price',
+  component: _Price.default,
+  argTypes: {
+    value: {
+      description: 'string'
+    },
+    unit: {
+      description: 'string'
+    },
+    unitAfter: {
+      description: 'boolean'
+    }
+  }
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_Price.default, args);
+};
+
+var PriceTemplate = Template.bind({});
+exports.PriceTemplate = PriceTemplate;
+PriceTemplate.args = {
+  value: '15000',
+  unit: '$',
+  unitAfter: false
+};

package/dist/Atomic/UI/Status/Status.stories.js

@@ -13,7 +13,7 @@ var _Status = _interopRequireDefault(require("./Status"));
 
 global.lng = 'en';
 var _default = {
-  title: 'Status',
+  title: 'UI/Status',
   component: _Status.default,
   argTypes: {
     status: {

package/dist/Functions/useClickOutside.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useClickOutside = void 0;
+
+var _react = require("react");
+
+var useClickOutside = function useClickOutside(ref, setOut, open) {
+  function handleClickOutside(event) {
+    if (ref.current && !ref.current.contains(event.target)) {
+      setOut(open);
+    }
+  }
+
+  (0, _react.useEffect)(function () {
+    document.addEventListener('mousedown', handleClickOutside);
+    return function () {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [ref]);
+};
+
+exports.useClickOutside = useClickOutside;

package/dist/scss/main.scss

@@ -35,6 +35,6 @@ button {
 
 .main {
     &__wrap {
-        display: flex;  
+        display: flex;
     }
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intelicoreact",
-  "version": "0.0.31",
+  "version": "0.0.41",
   "description": "",
   "main": "dist/index.js",
   "scripts": {
@@ -10,13 +10,15 @@
   "author": "Andrey Isakov",
   "license": "ISC",
   "dependencies": {
-    "@babel/polyfill": "^7.12.1",
-    "classnames": "^2.3.1",
-    "react-feather": "^2.0.9"
+    "react-feather": "^2.0.9",
+    "react-input-mask": "^2.0.4",
+    "moment": "^2.29.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.15.7",
     "@babel/core": "^7.15.5",
-    "@babel/preset-env": "^7.15.6"
+    "@babel/preset-env": "^7.15.6",
+    "@babel/polyfill": "^7.12.1",
+    "classnames": "^2.3.1"
   }
 }

package/src/Atomic/FormElements/Calendar/Calendar.js

@@ -0,0 +1,106 @@
+import cn from 'classnames';
+import React, { useEffect, useMemo, useState } from 'react';
+import moment from 'moment';
+import { ChevronLeft, ChevronRight } from 'react-feather';
+import './Calendar.scss';
+
+export default function (props) {
+  const { date, setDate, allowPrev = true, allowNext = true } = props;
+
+  const [days, setDays] = useState({});
+
+  const selectedDay = moment(date);
+  const isError = 'Invalid date';
+
+  const title = useMemo(
+    () => (selectedDay.format('MMM') === isError ? isError : `${selectedDay.format('MMM')} ${moment(date).format('YYYY')}`),
+    [date]
+  );
+  useEffect(() => {
+    const result = {};
+    const day = selectedDay.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];
+    if (!day) return <div className="calendar__day" />;
+    const isFutureDay = day && moment(day.date).isAfter(moment(), 'day');
+
+    const classNames = cn(
+      'calendar__day',
+      { 'calendar__day--clickable': day },
+      { 'calendar__day--disabled': isFutureDay },
+      { 'calendar__day--selected': selectedDay.format() === moment(day.date).format() }
+    );
+
+    return (
+      <div
+        key={`${week}_${dayOfWeek}`}
+        className={classNames}
+        onClick={day && !isFutureDay ? () => setDate(moment(day.date).format('L')) : null}
+        // onMouseOver={day && !isFutureDay ? () => onHover(day.date) : null}
+        // onMouseLeave={() => onHover(null)}
+      >
+        {day && day.date.getDate()}
+      </div>
+    );
+  };
+
+  const handlePrev = () => {
+    setDate(moment(date).subtract(1, 'month').format('L'));
+  };
+
+  const handleNext = () => {
+    setDate(moment(date).add(1, 'month').format('L'));
+  };
+
+  return (
+    <div className="calendar">
+      <div className="calendar-header">
+        <div className="calendar-header__prev">
+          {allowPrev && (
+            <div onClick={handlePrev}>
+              <ChevronLeft />
+            </div>
+          )}
+        </div>
+        <div className="calendar-header__title">{title}</div>
+        <div className="calendar-header__next">
+          {allowNext && (
+            <div onClick={handleNext}>
+              <ChevronRight />
+            </div>
+          )}
+        </div>
+      </div>
+      <div className="calendar__week">
+        {[...Array(7).keys()].map((dayOfWeek) => {
+          return (
+            <div key={`day-of-week_${dayOfWeek}`} className="calendar__day calendar__day--title">
+              {moment().weekday(dayOfWeek).format('dd').charAt(0)}
+            </div>
+          );
+        })}
+      </div>
+      {Object.keys(days).map((week, index) => (
+        <div key={`week_${index}`} className="calendar__week">
+          {[...Array(7).keys()].map((dayOfWeek) => (
+            <React.Fragment key={`calendar-day--${dayOfWeek}`}>{renderDay(week, dayOfWeek)}</React.Fragment>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}