@cashub/ui-elv 1.0.0

package/datetimePicker/index.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DatePicker", {
+  enumerable: true,
+  get: function () {
+    return _DatePicker.default;
+  }
+});
+Object.defineProperty(exports, "DatePickerV2", {
+  enumerable: true,
+  get: function () {
+    return _DatePickerV.default;
+  }
+});
+Object.defineProperty(exports, "DatetimePicker", {
+  enumerable: true,
+  get: function () {
+    return _DatetimePicker.default;
+  }
+});
+Object.defineProperty(exports, "DatetimePickerV2", {
+  enumerable: true,
+  get: function () {
+    return _DatetimePickerV.default;
+  }
+});
+Object.defineProperty(exports, "DatetimePickerV3", {
+  enumerable: true,
+  get: function () {
+    return _DatetimePickerV2.default;
+  }
+});
+Object.defineProperty(exports, "TimeInput", {
+  enumerable: true,
+  get: function () {
+    return _TimeInput.default;
+  }
+});
+Object.defineProperty(exports, "TimePicker", {
+  enumerable: true,
+  get: function () {
+    return _TimePicker.default;
+  }
+});
+Object.defineProperty(exports, "TimePickerStyle", {
+  enumerable: true,
+  get: function () {
+    return _TimePickerStyle.default;
+  }
+});
+Object.defineProperty(exports, "TimePickerV2", {
+  enumerable: true,
+  get: function () {
+    return _TimePickerV.default;
+  }
+});
+var _DatePicker = _interopRequireDefault(require("./DatePicker"));
+var _DatePickerV = _interopRequireDefault(require("./DatePickerV2"));
+var _DatetimePicker = _interopRequireDefault(require("./DatetimePicker"));
+var _DatetimePickerV = _interopRequireDefault(require("./DatetimePickerV2"));
+var _DatetimePickerV2 = _interopRequireDefault(require("./DatetimePickerV3"));
+var _TimeInput = _interopRequireDefault(require("./TimeInput"));
+var _TimePicker = _interopRequireDefault(require("./TimePicker"));
+var _TimePickerV = _interopRequireDefault(require("./TimePickerV2"));
+var _TimePickerStyle = _interopRequireDefault(require("./TimePickerStyle"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/datetimePicker/provider/constant.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MONTH = void 0;
+const MONTH = exports.MONTH = [{
+  number: '01',
+  text: 'Jan'
+}, {
+  number: '02',
+  text: 'Feb'
+}, {
+  number: '03',
+  text: 'Mar'
+}, {
+  number: '04',
+  text: 'Apr'
+}, {
+  number: '05',
+  text: 'May'
+}, {
+  number: '06',
+  text: 'Jun'
+}, {
+  number: '07',
+  text: 'Jul'
+}, {
+  number: '08',
+  text: 'Aug'
+}, {
+  number: '09',
+  text: 'Sep'
+}, {
+  number: '10',
+  text: 'Oct'
+}, {
+  number: '11',
+  text: 'Nov'
+}, {
+  number: '12',
+  text: 'Dec'
+}];

package/datetimePicker/subComponent/Accordion.js

@@ -0,0 +1,373 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _md = require("react-icons/md");
+var _io = require("react-icons/io");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _utils = require("@cashub/utils");
+var _scrollbar = _interopRequireDefault(require("../../styles/mixin/scrollbar"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const monthArr = [{
+  number: '01',
+  name: 'Jan'
+}, {
+  number: '02',
+  name: 'Feb'
+}, {
+  number: '03',
+  name: 'Mar'
+}, {
+  number: '04',
+  name: 'Apr'
+}, {
+  number: '05',
+  name: 'May'
+}, {
+  number: '06',
+  name: 'Jun'
+}, {
+  number: '07',
+  name: 'Jul'
+}, {
+  number: '08',
+  name: 'Aug'
+}, {
+  number: '09',
+  name: 'Sep'
+}, {
+  number: '10',
+  name: 'Oct'
+}, {
+  number: '11',
+  name: 'Nov'
+}, {
+  number: '12',
+  name: 'Dec'
+}];
+const Accordion = _ref => {
+  let {
+    type,
+    handleDisplayAccordionContent,
+    handleChangeTitle,
+    setCurrentDisplayType,
+    currentDisplayType,
+    selectedYear,
+    setSelectedYear,
+    selectedMonth,
+    setSelectedMonth,
+    fixedYear,
+    minDate,
+    maxDate,
+    selectedDay
+  } = _ref;
+  const bodyRef = (0, _react.useRef)(null);
+  const selectedYearRef = (0, _react.useRef)(null);
+  const [display, setDisplay] = (0, _react.useState)(false);
+  const [yearArr, setYearArr] = (0, _react.useState)([]);
+  const minYear = minDate ? new Date(minDate).getFullYear() : 1;
+  const minMonth = minDate ? new Date(minDate).getMonth() : null;
+  const maxYear = maxDate ? new Date(maxDate).getFullYear() : null;
+  const maxMonth = maxDate ? new Date(maxDate).getMonth() : null;
+  const accordionTitle = () => {
+    if (type === 'year') {
+      return selectedYear ? selectedYear : new Date().getFullYear();
+    } else if (type === 'month') {
+      return monthArr[selectedMonth ? selectedMonth : new Date().getMonth()]?.name;
+    }
+  };
+  const handleChangeMonth = (0, _react.useCallback)(month => {
+    setSelectedMonth(month);
+    setCurrentDisplayType(null);
+  }, [setCurrentDisplayType, setSelectedMonth]);
+  const handleChangeYear = (0, _react.useCallback)(year => {
+    setSelectedYear(year);
+    setCurrentDisplayType(null);
+  }, [setCurrentDisplayType, setSelectedYear]);
+  const handleYearItemDisable = (0, _react.useCallback)(year => {
+    if (minDate !== undefined && maxDate !== undefined) {
+      return !(minYear <= year && year <= maxYear);
+    }
+    if (minDate) {
+      return minYear > year;
+    } else if (maxDate) {
+      return maxYear < year;
+    }
+    return false;
+  }, [minYear, maxYear, maxDate, minDate]);
+  const handleMonthItemDisable = (0, _react.useCallback)(month => {
+    const date = (0, _utils.formatDate)(new Date(selectedYear, month, selectedDay));
+    if (minDate !== undefined && maxDate !== undefined) {
+      return !(minDate <= date && date <= maxDate);
+    } else if (minDate) {
+      return !(minDate <= date);
+    } else if (maxDate) {
+      return !(date <= maxDate);
+    }
+    return false;
+  }, [maxDate, minDate, selectedYear, selectedDay]);
+  const handleDisableArrow = (0, _react.useCallback)(arrowType => {
+    if (type === 'year') {
+      if (arrowType === 'previous') {
+        return minYear > selectedYear - 1;
+      } else if (arrowType === 'next') {
+        if (maxYear) {
+          return maxYear < selectedYear + 1;
+        }
+        return false;
+      }
+    } else if (type === 'month') {
+      const date = arrowType === 'previous' ? (0, _utils.formatDate)(new Date(selectedYear, selectedMonth - 1 < 0 ? 11 : selectedMonth - 1, 1)) : (0, _utils.formatDate)(new Date(selectedYear, selectedMonth + 1 > 11 ? 0 : selectedMonth + 1, 1));
+      if (fixedYear) {
+        if (fixedYear && !minDate && !maxDate) {
+          return false;
+        }
+      } else if (!minDate && !maxDate) {
+        return false;
+      } else {
+        const minDate1st = (0, _utils.formatDate)(new Date(minYear, minMonth, 1));
+        const maxDate1st = (0, _utils.formatDate)(new Date(maxYear, maxMonth, 1));
+        if (minDate && !maxDate) {
+          return !(minDate1st <= date);
+        } else if (maxDate && !minDate) {
+          return !(maxDate1st >= date);
+        } else if (minDate && maxDate) {
+          return !(minDate1st <= date && maxDate1st >= date);
+        }
+      }
+    }
+  }, [minDate, selectedYear, selectedMonth, minYear, type, fixedYear, maxDate, maxYear, maxMonth, minMonth]);
+  const MonthContent = (0, _react.useMemo)(() => {
+    return monthArr.map((month, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Item, {
+      selected: selectedMonth === index,
+      onClick: () => {
+        handleChangeMonth(index);
+      },
+      disabled: handleMonthItemDisable(index),
+      children: month.name
+    }, month.number));
+  }, [handleChangeMonth, selectedMonth, handleMonthItemDisable]);
+  const YearContent = (0, _react.useMemo)(() => {
+    return yearArr.map((year, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Item, {
+      ref: selectedYear === year ? selectedYearRef : null,
+      selected: selectedYear === year,
+      onClick: () => {
+        handleChangeYear(year);
+      },
+      disabled: handleYearItemDisable(year),
+      children: year
+    }, index));
+  }, [selectedYear, yearArr, handleChangeYear, handleYearItemDisable]);
+  (0, _react.useEffect)(() => {
+    if (!fixedYear) {
+      const start = selectedYear - 16 ? selectedYear - 16 : 1;
+      const end = selectedYear + 16;
+      const yearRange = (0, _utils.generateRange)(start, end);
+      setYearArr(yearRange);
+    }
+  }, [fixedYear, selectedYear]);
+  const scroll = (0, _react.useCallback)(() => {
+    if (bodyRef?.current && selectedYearRef?.current) {
+      const body = bodyRef.current;
+      if (body.scrollTop < 200) {
+        body.removeEventListener('scroll', scroll);
+        setTimeout(() => {
+          body.scrollTo({
+            top: body.scrollTop + 200
+          });
+        }, 400);
+        setTimeout(() => {
+          setYearArr(previousParams => {
+            body.addEventListener('scroll', scroll);
+            const addYearRange = (0, _utils.generateRange)(previousParams[0] - 15, previousParams[0] - 1);
+            return [...addYearRange, ...previousParams];
+          });
+        }, 400);
+      } else if (body.scrollTop + body.clientHeight >= body.scrollHeight) {
+        body.removeEventListener('scroll', scroll);
+        setTimeout(() => {
+          setYearArr(previousParams => {
+            body.addEventListener('scroll', scroll);
+            const addYearRange = (0, _utils.generateRange)(previousParams[previousParams.length - 1] + 1, previousParams[previousParams.length - 1] + 15);
+            return [...previousParams, ...addYearRange];
+          });
+        }, 400);
+      }
+    }
+  }, []);
+  (0, _react.useEffect)(() => {
+    bodyRef.current.addEventListener('scroll', scroll);
+  }, [scroll]);
+  (0, _react.useEffect)(() => {
+    setDisplay(currentDisplayType === type);
+  }, [currentDisplayType, type]);
+  (0, _react.useEffect)(() => {
+    if (display && bodyRef?.current && currentDisplayType === 'year' && selectedYearRef?.current) {
+      bodyRef.current.scrollTo({
+        top: selectedYearRef.current.offsetTop - bodyRef.current.offsetTop
+      });
+    }
+  }, [currentDisplayType, display]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Header, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, {
+        onClick: () => {
+          handleChangeTitle('previous');
+        },
+        disabled: handleDisableArrow('previous'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_md.MdArrowBackIosNew, {})
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: accordionTitle()
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, {
+        onClick: () => {
+          handleChangeTitle('next');
+        },
+        disabled: handleDisableArrow('next'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_md.MdArrowForwardIos, {})
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, {
+        $display: display,
+        right: true,
+        onClick: handleDisplayAccordionContent,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_io.IoMdArrowDropup, {})
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Body, {
+      fixedYear: !fixedYear,
+      ref: bodyRef,
+      type: type,
+      $display: display,
+      children: [type === 'month' && MonthContent, type === 'year' && YearContent]
+    })]
+  });
+};
+const IconButton = _styledComponents.default.button`
+  width: 36px;
+  height: 36px;
+  background: var(--color-background1);
+  border: none;
+  color: var(--font-on-background);
+  padding: 0;
+  transition: 0.3s;
+
+  &:hover {
+    color: var(--color-primary);
+  }
+
+  ${_ref2 => {
+  let {
+    disabled
+  } = _ref2;
+  return disabled && (0, _styledComponents.css)`
+      opacity: 0.5;
+
+      &:hover {
+        color: var(--font-on-background);
+      }
+    `;
+}}
+
+  ${_ref3 => {
+  let {
+    right,
+    $display
+  } = _ref3;
+  return right && `
+    position: absolute;
+    right: 0;
+    ${$display && (0, _styledComponents.css)`
+        transform: rotate(180deg);
+      `}
+  `;
+}}
+`;
+const Header = _styledComponents.default.div`
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  position: relative;
+
+  > div {
+    width: 72px;
+    line-height: 36px;
+    text-align: center;
+  }
+
+  &::before {
+    content: '';
+    border-bottom: var(--border-width) solid var(--border-color);
+    position: absolute;
+    width: 300px;
+    bottom: 0;
+    z-index: 1;
+    right: -16px;
+  }
+`;
+const Body = _styledComponents.default.div`
+  flex-wrap: wrap;
+  height: 0;
+  width: 100%;
+  display: ${_ref4 => {
+  let {
+    $display
+  } = _ref4;
+  return $display ? 'flex' : 'none';
+}};
+  ${_ref5 => {
+  let {
+    type,
+    fixedYear
+  } = _ref5;
+  return type && (0, _styledComponents.css)`
+      min-height: ${type === 'year' ? '197' : fixedYear ? '144' : '192'}px};
+      transition: .3s;
+      
+      ${type === 'year' && (0, _styledComponents.css)`
+          overflow-y: scroll;
+          gap: 12px 0;
+          ${_scrollbar.default}
+        `};
+  `;
+}}
+
+  transition: 0.3s;
+`;
+const Item = _styledComponents.default.button`
+  width: 84px;
+  height: 36px;
+  line-height: 36px;
+  text-align: center;
+  border-radius: var(--border-radius-s);
+  padding: 0;
+  border: none;
+  color: var(--font-on-background);
+  background: var(--color-background1);
+
+  &:hover {
+    ${_ref6 => {
+  let {
+    disabled
+  } = _ref6;
+  return !disabled && 'background: var(--color-primary)';
+}}
+  }
+
+  ${_ref7 => {
+  let {
+    disabled
+  } = _ref7;
+  return disabled && 'color: var(--font-on-mute)';
+}}
+
+  ${_ref8 => {
+  let {
+    selected
+  } = _ref8;
+  return selected && 'background: var(--color-hover)';
+}}
+`;
+var _default = exports.default = Accordion;

package/datetimePicker/subComponent/CustomTimeInput.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+const CustomTimeInput = _ref => {
+  let {
+    date,
+    onCustomChange
+  } = _ref;
+  const [time, setTime] = (0, _react.useState)('');
+  const changeDate = () => {
+    let hh = '';
+    let mm = '';
+    let ss = '';
+    if (time.indexOf(':') !== -1) {
+      [hh, mm, ss] = time.split(':');
+    } else {
+      hh = time.substring(0, 2);
+      mm = time.substring(2, 4);
+      ss = time.substring(4, 6);
+    }
+    const targetDate = date instanceof Date && !isNaN(date) ? date : new Date();
+    targetDate.setHours(Number(hh) || 0, Number(mm) || 0, Number(ss) || 0);
+    onCustomChange(targetDate);
+  };
+  (0, _react.useEffect)(() => {
+    const defaultTime = date instanceof Date && !isNaN(date) ?
+    // Getting time from Date beacuse `value` comes here without seconds
+    date.toLocaleTimeString('it-IT') : '';
+    setTime(defaultTime);
+  }, [date]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+    value: time,
+    onBlur: changeDate,
+    onKeyUp: event => {
+      if (event.key === 'Enter') {
+        changeDate();
+      }
+    },
+    onChange: event => setTime(event.target.value)
+  });
+};
+var _default = exports.default = CustomTimeInput;

package/datetimePicker/subComponent/DateTimePickerContext.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+const DateTimePicker = /*#__PURE__*/(0, _react.createContext)(null);
+var _default = exports.default = DateTimePicker;

package/datetimePicker/utils/GMTDate.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _utils = require("@cashub/utils");
+const GMTDate = date => {
+  if (!date) return;
+  let newDate = new Date((0, _utils.datetimeTFormat)(date));
+  newDate.setTime(newDate.getTime() + newDate.getTimezoneOffset() * 60 * 1000);
+  newDate = (0, _utils.formatDate)(newDate);
+  return newDate;
+};
+var _default = exports.default = GMTDate;

package/datetimePicker/utils/pad.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const pad = (value, length, padString) => {
+  if (!length || !padString) {
+    return value;
+  }
+  return String(value).padStart(length, padString);
+};
+var _default = exports.default = pad;

package/datetimePicker/utils/toUTC0.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const toUTC0 = date => {
+  if (!date) return;
+  const newDate = new Date(date);
+  newDate.setTime(newDate.getTime() + newDate.getTimezoneOffset() * 60 * 1000);
+  return newDate;
+};
+var _default = exports.default = toUTC0;

package/descriptionList/DescriptionDetail.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const DescriptionDetail = _styledComponents.default.dd`
+  font-size: var(--font-h3);
+  line-height: 1.25;
+  font-weight: bold;
+  color: var(--font-on-background);
+  word-break: break-all;
+  white-space: pre-line;
+
+  > a {
+    color: var(--color-primary);
+  }
+
+  ${_ref => {
+  let {
+    fontNormal
+  } = _ref;
+  return fontNormal && 'font-weight: normal;';
+}}
+`;
+var _default = exports.default = DescriptionDetail;

package/descriptionList/DescriptionList.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const DescriptionList = _styledComponents.default.dl`
+  flex: 1;
+
+  &:not(:last-child) {
+    border-right: var(--border-width) solid var(--border-color);
+    margin-right: var(--spacing);
+    padding-right: var(--spacing);
+  }
+
+  ${_ref => {
+  let {
+    invisible
+  } = _ref;
+  return invisible && 'visibility: hidden';
+}}
+`;
+var _default = exports.default = DescriptionList;

package/descriptionList/DescriptionTerm.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const DescriptionTerm = _styledComponents.default.dt`
+  font-size: var(--font-h3);
+  color: var(--font-on-mute);
+  padding-bottom: var(--spacing-xs);
+`;
+var _default = exports.default = DescriptionTerm;

package/descriptionList/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DescriptionDetail", {
+  enumerable: true,
+  get: function () {
+    return _DescriptionDetail.default;
+  }
+});
+Object.defineProperty(exports, "DescriptionList", {
+  enumerable: true,
+  get: function () {
+    return _DescriptionList.default;
+  }
+});
+Object.defineProperty(exports, "DescriptionTerm", {
+  enumerable: true,
+  get: function () {
+    return _DescriptionTerm.default;
+  }
+});
+var _DescriptionDetail = _interopRequireDefault(require("./DescriptionDetail"));
+var _DescriptionList = _interopRequireDefault(require("./DescriptionList"));
+var _DescriptionTerm = _interopRequireDefault(require("./DescriptionTerm"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }