forstok-ui-lib 5.2.31 → 5.2.38

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "forstok-ui-lib",
-  "version": "5.2.31",
+  "version": "5.2.38",
   "description": "Forstok UI Components Library",
   "path": "dist",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "scripts": {
+    "preinstall": "npm install --package-lock-only --ignore-scripts && npx npm-force-resolutions",
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "rollup -c --bundleConfigAsCjs"
   },
@@ -36,10 +37,14 @@
     "@svgr/rollup": "^8.1.0",
     "@types/html-to-text": "^9.0.4",
     "@types/react": "^19.0.2",
+    "@types/react-daterange-picker": "^2.0.8",
     "@types/react-dom": "^19.0.2",
     "html-to-text": "^9.0.5",
+    "moment-range": "^4.0.2",
+    "npm-force-resolutions": "^0.0.10",
     "react": "^19.0.0",
     "react-content-loader": "^7.0.2",
+    "react-daterange-picker": "^2.0.1",
     "react-dom": "^19.0.0",
     "react-router-dom": "^7.1.1",
     "react-select": "^5.10.0",
@@ -52,5 +57,12 @@
     "typescript": "^5.7.2",
     "typescript-plugin-styled-components": "^3.0.0",
     "use-state-with-callback": "^3.0.2"
+  },
+  "overrides": {
+    "react-daterange-picker": {
+      "moment-range": "^4.0.2",
+      "react": "^19.0.0",
+      "react-dom": "^19.0.0"
+    }
   }
 }

package/src/assets/index.ts

@@ -1,4 +1,5 @@
 export * from './stylesheets/bases.styles';
 export * from './stylesheets/shares.styles';
 
-export * from './javascripts/function';
+export * from './javascripts/function';
+export * from './javascripts/helper';

package/src/assets/javascripts/helper.ts

@@ -0,0 +1,11 @@
+import { TObject } from '../../typeds';
+
+export const dateRangeStatus = (value: string) => {
+  const statusObj: TObject = { 'today': 'Today', 'lastweek': 'Last 7 days', 'lastsecondweek': 'Last 14 days', 'lastmonth': 'Last 30 days', 'lastquart': 'Last 90 days', 'custom': 'Date' }
+  return statusObj[value]
+}
+
+export const dateRangeDays = (value: string) => {
+  const dayObj: TObject = { 'today': 0, 'lastweek': 6, 'lastsecondweek': 13 ,'lastmonth': 29, 'lastquart': 89, 'custom': 0 }
+  return dayObj[value]
+}

package/src/components/date/daterange.tsx

@@ -0,0 +1,283 @@
+import { useEffect, useState, useRef } from 'react';
+import DateRangePicker from 'react-daterange-picker';
+import * as moment from 'moment';
+import { extendMoment } from 'moment-range';
+import { configDateRange } from '../../maps/common';
+import IconComponent from '../icon';
+import ButtonComponent from '../button';
+import CheckboxComponent from '../checkbox';
+import ReactPortalComponent from '../portal';
+import TextComponent from '../text';
+import { dateRangeDays, dateRangeStatus } from '../../assets/javascripts/helper';
+import 'react-daterange-picker/dist/css/react-calendar.css';
+import './styles.css';
+import { DateRangeContainer, DateRangeControl, DateRangeLabelContainer, DateRangeLabel, DateRangeIndicatorsContainer, DateRangeIndicatorsArrowIconSvg, DateRangeMenuContainer, DateRangeMenu, DateRangeSelection, SelectionDate, DateRangeAside, DateRangePortalContainer, DateRangeIconContainer } from './styles';
+import type { TMouseEvent, TState } from '../../typeds';
+import type { TModerateDateFunction } from './typed';
+
+type TDateRange = {
+  mode: string
+  placeholder?: string
+  startDate?: string | null
+  endDate?: string | null
+  rangeDate?: string
+  minDate?: string
+  evModDate: TModerateDateFunction
+  portalId?: string
+  isForceUpdate?: boolean
+  setForceUpdate?: TState<boolean>
+  isCheckType?: boolean
+  size?: string
+}
+
+const DateRangeComponent = ({ mode='default', placeholder, startDate, endDate, rangeDate, minDate, evModDate, portalId, isForceUpdate, setForceUpdate, isCheckType, size }: TDateRange) => {
+  const _placeholder = placeholder || configDateRange.placeholder;
+  const _rangeDate = rangeDate || configDateRange.rangeDate;
+  const _startDate = startDate || configDateRange.startDate;
+  const _endDate = endDate || configDateRange.endDate;
+  const _minDate = minDate || configDateRange.minDate;
+
+  const [isOpen, setOpen] = useState<boolean>(false) ;
+  const [offsetLeft, setOffsetLeft] = useState<number>(0);
+  const [isLoadOffsetLeft, setLoadOffsetLeft] = useState<boolean>(false);
+  const [startDateSelected, setStartDateSelected] = useState<string>(_startDate);
+  const [endDateSelected, setEndDateSelected] = useState<string>(_endDate);
+  const [rangeDateSelected, setRangeDateSelected] = useState<string>(_rangeDate);
+
+  const daterangeContainerRef = useRef<HTMLElement | null>(null);
+  const buttonRef = useRef<HTMLDivElement | null>(null);
+  const newMoment = extendMoment(moment);
+
+  const callback = () => {
+    setOpen(false);
+  }
+
+  useEffect(() => {
+    if (offsetLeft && mode === 'filter' && isLoadOffsetLeft) {
+      const _offsetLeft = daterangeContainerRef.current && daterangeContainerRef.current ? daterangeContainerRef.current.getBoundingClientRect().x : 0;
+      setOffsetLeft(_offsetLeft);
+      setLoadOffsetLeft(true);
+    }
+    if (isForceUpdate) {
+      _startDate && setStartDateSelected(_startDate);
+      _endDate && setEndDateSelected(_endDate);
+      _rangeDate && setRangeDateSelected(_rangeDate);
+      setForceUpdate && setForceUpdate(false);
+    }
+  },[offsetLeft, isLoadOffsetLeft, mode, isForceUpdate, setForceUpdate, _startDate, _endDate, _rangeDate])
+
+  const evResetFilter = () => {
+    setStartDateSelected(_startDate || '');
+    setEndDateSelected(_endDate || '');
+    setRangeDateSelected(_rangeDate || '');
+  }
+
+  const evToogleDateRangePicker: TMouseEvent = e => {
+    const refEl = (buttonRef && buttonRef.current) ? buttonRef.current : null;
+    const buttonEl = refEl && (e.target as HTMLDivElement).closest(`.${refEl.classList[0]}`) as HTMLDivElement;
+    if (!buttonEl) {
+      return;
+    }
+    const containerEl = buttonEl.closest('._refContainer')  as HTMLElement;
+    const isCurOpen = containerEl.classList.contains('is-shown');
+    const offsetPos = containerEl.getBoundingClientRect();
+    if (!isCurOpen) {
+      const containerRef = document.getElementsByClassName('_refContainer is-shown') as HTMLCollectionOf<HTMLElement>;
+      if (containerRef.length) {
+        for (var i = 0; i < containerRef.length; i++) {
+          containerRef[i].classList.remove('is-shown');
+        }
+      }  
+      setTimeout(() => {
+        if (portalId) {
+          const portalContainerRef = document.getElementsByClassName('._refDateRangePickerPortal is-shown') as HTMLCollectionOf<HTMLElement>;
+          if (portalContainerRef.length) {
+            for (var i = 0; i < portalContainerRef.length; i++) {
+              portalContainerRef[i].classList.remove('is-shown');
+              portalContainerRef[i].style.left = '0';
+              portalContainerRef[i].style.top = '0';
+            }
+          } 
+        }
+      },10)
+    }
+    setOpen(!isCurOpen);
+    if (!isCurOpen) {
+      evResetFilter();
+      containerEl && containerEl.classList.add('is-shown');
+      setTimeout(() => {
+        if (portalId) {
+          const portalContainerRef = document.querySelector('._refDateRangePickerPortal') as HTMLDivElement;
+          if (portalContainerRef) {
+            if (offsetPos) {
+              portalContainerRef.style.left = offsetPos.left + 'px';
+              portalContainerRef.style.top = (offsetPos.top + offsetPos.height) + 'px';
+            }
+            portalContainerRef.classList.add('is-shown');
+          }
+        }
+      }, 10)
+    } else {
+      containerEl && containerEl.classList.remove('is-shown');
+      setTimeout(() => {
+        if (portalId) {
+          const portalContainerRef = document.querySelector('._refDateRangePickerPortal') as HTMLDivElement;
+          if (portalContainerRef) {
+            portalContainerRef.classList.remove('is-shown');
+            portalContainerRef.style.left = '0';
+            portalContainerRef.style.top = '0';
+          }
+        }
+      }, 10)
+    }
+  }
+
+  const handleSelect = (value: any) => {
+    const startDate: string = value.start.format('YYYY-MM-DD');
+    const endDate: string = value.end.format('YYYY-MM-DD');
+    setStartDateSelected(startDate);
+    setEndDateSelected(endDate);
+    setRangeDateSelected('custom');
+  }
+
+  const evApplyDateRange = () => {
+    let _start_date = '';
+    let _end_date = '';
+    if (startDateSelected && endDateSelected) {
+      _start_date = startDateSelected;
+      _end_date = endDateSelected;
+    } else if (_rangeDate) {
+      _start_date = newMoment().clone().subtract(dateRangeDays(_rangeDate), 'days').format('YYYY-MM-DD');
+      _end_date = newMoment().clone().format('YYYY-MM-DD');
+    } else if (_startDate && _endDate ) {
+      _start_date = _startDate;
+      _end_date = _endDate;
+    }
+    evModDate(_start_date, _end_date, 'custom', callback);
+  }
+
+  const evCancelDateRange = () => {
+    setOpen(false);
+  }
+
+  const setRange: TMouseEvent = e => {
+    const type = (e.target as HTMLDivElement).dataset.type || '';
+    let startDate: string = '';
+    let endDate: string = newMoment().clone().format('YYYY-MM-DD');
+    switch (type) {
+      case 'today': 
+        startDate= newMoment().clone().format('YYYY-MM-DD');
+        break;
+      case 'lastweek':
+        startDate= newMoment().clone().subtract(6, 'days').format('YYYY-MM-DD');
+        break;
+      case 'lastsecondweek':
+        startDate= newMoment().clone().subtract(13, 'days').format('YYYY-MM-DD');
+        break;
+      case 'lastmonth':
+        startDate= newMoment().clone().subtract(29, 'days').format('YYYY-MM-DD');
+        break;
+      case 'lastquart':
+        startDate= newMoment().clone().subtract(89, 'days').format('YYYY-MM-DD');
+        break;
+      case 'custom': 
+        startDate = '';
+        endDate= '';
+        break
+      default: 
+        startDate = '';
+        endDate= '';
+        break
+    }
+    setStartDateSelected(startDate);
+    setEndDateSelected(endDate);
+    setRangeDateSelected(type);
+    evModDate(startDate, endDate, type, callback);
+  }
+
+  const startDateMoment: moment.Moment = newMoment(_startDate, 'YYYY-MM-DD');
+  const endDateMoment: moment.Moment = newMoment(_endDate, 'YYYY-MM-DD');
+  const _minDateMoment: string = newMoment(_minDate, 'YYYY-MM-DD').format('YYYY-MM-DD'); 
+  const startDateSelectedMoment: moment.Moment = newMoment(startDateSelected, 'YYYY-MM-DD').startOf('day'); 
+  const endDateSelectedMoment: moment.Moment = newMoment(endDateSelected, 'YYYY-MM-DD').endOf('day');
+  const minDateMoment: Date | null = _minDate ? new Date(_minDateMoment) : null;
+  const openClass = isOpen ? 'is-shown' : ''
+
+  let value;
+  if (startDateSelected && endDateSelected) {
+    value = newMoment.range(startDateSelectedMoment, endDateSelectedMoment);
+  } else if (_startDate && _endDate) {
+    value =  newMoment.range(newMoment(_startDate, 'YYYY-MM-DD').startOf('day'), newMoment(_endDate, 'YYYY-MM-DD').endOf('day'));
+  } else if (_rangeDate) {
+    value = newMoment.range(newMoment().clone().subtract(dateRangeDays(_rangeDate), 'days').startOf('day'), newMoment().clone().endOf('day'));
+  }
+
+  const dateRangeEl = (
+    <DateRangeMenuContainer $mode={mode} style={{ 'left': '-'+offsetLeft+'px' }}>
+      <DateRangeMenu>
+        <DateRangeSelection>
+          <SelectionDate data-type='today' $activated={rangeDateSelected === 'today'} onClick={setRange} data-qa-id='daterange-picker-today'>Today</SelectionDate>
+          <SelectionDate data-type='lastweek' $activated={rangeDateSelected === 'lastweek'} onClick={setRange} data-qa-id='daterange-picker-7d'>Last 7 days</SelectionDate>
+          <SelectionDate data-type='lastsecondweek' $activated={rangeDateSelected === 'lastsecondweek'} onClick={setRange} data-qa-id='daterange-picker-14d'>Last 14 days</SelectionDate>
+          <SelectionDate data-type='lastmonth' $activated={rangeDateSelected === 'lastmonth'} onClick={setRange} data-qa-id='daterange-picker-30d'>Last 30 days</SelectionDate>
+          <SelectionDate data-type='lastquart' $activated={rangeDateSelected === 'lastquart'} onClick={setRange} data-qa-id='daterange-picker-90d'>Last 90 days</SelectionDate>
+          <SelectionDate data-type='custom' $activated={rangeDateSelected === 'custom'} data-qa-id='daterange-picker-custom'>Custom Range</SelectionDate>
+        </DateRangeSelection>
+        <DateRangePicker
+          numberOfCalendars={2}
+          onSelect={handleSelect}
+          selectionType='range'
+          maximumDate={new Date()}
+          value={value} 
+          initialMonth={newMoment().add(-1, 'month').month()}
+          initialYear={newMoment().add(0, 'year').year()}
+          singleDateRange={true}
+          {...minDateMoment && { minimumDate: minDateMoment }}
+        />
+      </DateRangeMenu>
+      <DateRangeAside>
+        <TextComponent>{startDateSelected && endDateSelected ? startDateSelectedMoment.format('LL') +' - '+ endDateSelectedMoment.format('LL') : ' '}</TextComponent>
+        <div>
+          <ButtonComponent $mode='white' $size='small' onClick={evCancelDateRange} data-qa-id='daterange-picker-cancel'>Cancel</ButtonComponent>
+          <ButtonComponent $mode='red' $size='small' onClick={evApplyDateRange} data-qa-id='daterange-picker-apply'>Apply</ButtonComponent>
+        </div>
+      </DateRangeAside>
+    </DateRangeMenuContainer>
+  )
+
+  return (
+    <DateRangeContainer className={'_refContainer '+ openClass} $mode={mode} ref={daterangeContainerRef} data-qa-id='daterange-picker'>
+      <DateRangeControl ref={buttonRef} onClick={evToogleDateRangePicker} $mode={mode} $size={size}>
+        {
+          mode === 'filterorder' || mode === 'filterordertofulfill' || mode === 'filterdashboard' ? (
+            <ButtonComponent $iconLeft='calendar' $mode='nude' $isIndicatorArrow={true} isIndicatorArrowColor='#494949'>{ (_startDate && _endDate && _rangeDate === 'custom') ? (startDateMoment.format('MMM D, YYYY') + ' - ' +endDateMoment.format('MMM D, YYYY')) : (_rangeDate ? dateRangeStatus(_rangeDate) :  _placeholder) }</ButtonComponent>
+          ) : (
+            <>
+              { mode === 'filter' ? <CheckboxComponent name='checkbox-date' id='checkbox-date' className='_refCheckboxContainer'  defaultChecked={isCheckType} disabled={true} /> : null }
+              {
+                mode === 'popuppayment' ? (
+                  <DateRangeIconContainer>
+                    <IconComponent $name='calendar' $width='14px' />
+                  </DateRangeIconContainer>
+                ) : null
+              }
+              <DateRangeLabelContainer>
+                <DateRangeLabel $size={size}>
+                  { (_startDate && _endDate && _rangeDate === 'custom') ? (startDateMoment.format('LL') + ' - ' +endDateMoment.format('LL')) :  (_rangeDate ? dateRangeStatus(_rangeDate) :  _placeholder) }
+                </DateRangeLabel>
+              </DateRangeLabelContainer>
+              <DateRangeIndicatorsContainer>
+                <DateRangeIndicatorsArrowIconSvg height='20' width='20' viewBox='0 0 20 20' aria-hidden='true' focusable='false'>
+                  <path d='M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z'></path>
+                </DateRangeIndicatorsArrowIconSvg>
+              </DateRangeIndicatorsContainer>
+            </>
+          )
+        }
+      </DateRangeControl>
+      { isOpen && ( portalId ? <ReactPortalComponent><DateRangePortalContainer className='_refDateRangePickerPortal'>{dateRangeEl}</DateRangePortalContainer></ReactPortalComponent> : dateRangeEl ) }
+    </DateRangeContainer>
+  )
+}
+
+export default DateRangeComponent

package/src/components/date/styles.css

@@ -0,0 +1,3 @@
+#popup-portal .react-datepicker-popper {
+  z-index: 1000;
+}