intelicoreact 0.0.5 → 0.0.6

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

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CalendarTemplate = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Calendar = _interopRequireDefault(require("./Calendar"));
+
+global.lng = 'en';
+var _default = {
+  title: 'UI/Calendar',
+  component: _Calendar.default
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: '320px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Calendar.default, args));
+};
+
+var CalendarTemplate = Template.bind({});
+exports.CalendarTemplate = CalendarTemplate;
+CalendarTemplate.args = {
+  date: '12/03/2021',
+  params: {},
+  setDate: function setDate() {
+    return null;
+  }
+};

package/dist/Functions/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.logout = exports.useOutsideToggle = exports.handleObjectChange = void 0;
+exports.getStyles = exports.logout = exports.useOutsideToggle = exports.handleObjectChange = void 0;
 
 var _react = require("react");
 
@@ -55,4 +55,12 @@ var logout = function logout() {
   window.location.reload();
 };
 
-exports.logout = logout;
+exports.logout = logout;
+
+var getStyles = function getStyles(el, prop) {
+  if (!el) return null;
+  if (!prop) return window.getComputedStyle(el);
+  return window.getComputedStyle(el).getPropertyValue(prop);
+};
+
+exports.getStyles = getStyles;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "intelicoreact",
-  "version": "0.0.5",
-  "description": "",
+  "version": "0.0.6",
+  "description": "Add date range selector",
   "main": "dist/index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -10,15 +10,17 @@
   "author": "Andrey Isakov",
   "license": "ISC",
   "dependencies": {
+    "moment": "^2.29.1",
+    "moment-timezone": "^0.5.34",
+    "react": "^17.0.2",
     "react-feather": "^2.0.9",
-    "react-input-mask": "^2.0.4",
-    "moment": "^2.29.1"
+    "react-input-mask": "^2.0.4"
   },
   "devDependencies": {
     "@babel/cli": "^7.15.7",
     "@babel/core": "^7.15.5",
-    "@babel/preset-env": "^7.15.6",
     "@babel/polyfill": "^7.12.1",
+    "@babel/preset-env": "^7.15.6",
     "classnames": "^2.3.1"
   }
 }

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

@@ -4,7 +4,7 @@ import DateTime from './DateTime';
 global.lng = 'en';
 
 export default {
-  title: 'DateTime',
+  title: 'Form Elements/DateTime',
   component: DateTime
 };
 

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

@@ -23,6 +23,7 @@ const Input = ({
   mask,
   error,
   icon,
+  symbolsLimit,
 }) => {
   // STATES
   const [isFocused, setIsFocused] = useState(false);
@@ -37,23 +38,23 @@ const Input = ({
         if (min && +min > inputValue) {
           inputValue = min;
         } else if (max && +max < inputValue) inputValue = max;
-      }
+      } else if (symbolsLimit && inputValue.length > +symbolsLimit) inputValue = inputValue.substring(0, +symbolsLimit);
       onChange(inputValue.toString());
     },
     toggleEdit: () => {
       setEditing(!isEditing);
       onChange('');
     },
-    focus: () => {
+    focus: e => {
       setIsFocused(true);
-      if (onFocus) onFocus();
+      if (onFocus) onFocus(e);
     },
-    blur: () => {
+    blur: e => {
       setIsFocused(false);
       setEditing(false);
-      if (onBlur) onBlur();
+      if (onBlur) onBlur(e);
     },
-    keyUp: e => (onKeyUp ? onKeyUp(e.keyCode) : null)
+    keyUp: e => (onKeyUp ? onKeyUp(e.keyCode, event) : null)
   };
 
   useEffect(() => {
@@ -70,7 +71,7 @@ const Input = ({
     onBlur: handle.blur,
     onKeyUp: handle.keyUp,
     min,
-    max
+    max,
   };
 
   function renderInput() {

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

@@ -43,6 +43,7 @@ export default {
     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' }
@@ -67,5 +68,6 @@ InputTemplate.args = {
   max: '5',
   placeholder: 'Placeholder',
   mask: '',
-  icon: <User />
+  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.stories.js

@@ -0,0 +1,142 @@
+import React, { useState } from 'react';
+import InputDateRange from '.';
+import Table from '../Table/Table';
+
+global.lng = 'en';
+
+export default {
+  title: 'Form Elements/InputDateRange',
+  component: InputDateRange,
+  argTypes: {
+    // status: {
+    //   control: {
+    //     type: 'select',
+    //     options: ['admin', 'user']
+    //   }
+    // }
+  }
+};
+
+const tableData = {
+  header: [
+    { id: 1, label: 'state' },
+    { id: 2, label: 'Tags' },
+    { id: 3, label: 'status' },
+    { id: 4, label: 'loanAmountApproved' },
+    { id: 5, label: 'loanAmountRejected' },
+    { id: 6, label: 'approveRate' },
+    { id: 7, label: 'actions', type: 'actions' }
+  ],
+  rows: [
+    {
+      id: 1,
+      link: { label: 'CA', link: '#s' },
+      tags: [{ label: 'Label 1' }],
+      status: { value: '90', status: 'active' },
+      loanAmountApproved: { value: '$70,000' },
+      loanAmountRejected: { value: '$30,000' },
+      approveRate: { value: '70%' }
+    },
+    {
+      id: 2,
+      link: { label: 'NY', link: '#s' },
+      advancedTags: [
+        {
+          labelLeft: 'home',
+          labelRight: 'hoods',
+          active: 3,
+          pause: 1,
+          merchants: 5
+        },
+        {
+          labelRight: 'jewelry',
+          active: 3,
+          pause: 1,
+          merchants: 5
+        },
+        {
+          labelLeft: 'home',
+          labelRight: 'improvement',
+          active: 0,
+          pause: 0,
+          warnLeft: true,
+          warnLeftMsg: 'landerNotIncluded',
+          warnRightMsg: 'noMerchants'
+        },
+        {
+          labelLeft: 'home',
+          labelRight: 'hoods',
+          active: 3,
+          pause: 1,
+          merchants: 5
+        },
+        {
+          labelRight: 'jewelry',
+          active: 3,
+          pause: 1,
+          merchants: 5
+        }
+      ],
+      status: { label: 'Active', className: 'color--green-haze' },
+      loanAmountApproved: { value: '$3,000' },
+      loanAmountRejected: { value: '$7,000' },
+      approveRate: { value: '30%' }
+    },
+    {
+      id: 3,
+      link: { label: 'NH', link: '#s' },
+      tags: [{ label: 'Label 1' }, { label: 'Label 2' }, { label: 'Label 3' }],
+      status: { status: 'error' },
+      loanAmountApproved: { value: '$70,000' },
+      loanAmountRejected: { value: '$30,000' },
+      approveRate: { value: '70%' }
+    }
+  ]
+};
+
+const Template = args => {
+    const { dateRange, ...restOfProps } = args;
+    const [value, setValue] = useState(dateRange);
+
+    const [state, setState] = useState(tableData);
+
+    const rowsWithActions = state?.rows?.map(row => ({
+      ...row,
+      actions: row.isDeleted ? [{ type: 'undo' }] : [{ type: 'download' }, { type: 'edit' }, { type: 'delete' }]
+    }));
+
+    // return <InputDateRange {...restOfProps} value={value} onChange={setValue} />;
+    return (
+      <div>
+        <div className="mb20">
+          <InputDateRange {...restOfProps} value={value} onChange={setValue} />
+        </div>
+        <div>
+          <Table header={state.header} rows={rowsWithActions} onChange={setState} />
+        </div>
+      </div>
+    );
+};
+
+export const InputDateRangeTemplate = Template.bind({});
+
+InputDateRangeTemplate.args = {
+    txt: {},
+    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
+};