forstok-ui-lib 7.1.0 → 7.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forstok-ui-lib",
-  "version": "7.1.0",
+  "version": "7.2.1",
   "description": "Forstok UI Components Library",
   "path": "dist",
   "main": "dist/index.js",
@@ -46,11 +46,13 @@
     "moment": "^2.30.1",
     "moment-range": "^4.0.2",
     "npm-force-resolutions": "^0.0.10",
+    "rc-picker": "^4.11.3",
     "react": "^19.0.0",
     "react-content-loader": "^7.0.2",
-    "react-datepicker": "^8.0.0",
+    "react-datepicker": "^8.1.0",
     "react-router-dom": "^7.1.1",
     "react-select": "^5.10.0",
+    "react-select-async-paginate": "^0.7.9",
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-import-css": "^3.5.8",
     "rollup-plugin-peer-deps-external": "^2.2.4",

package/rollup.config.js

@@ -74,7 +74,27 @@ export default [
         exclude: 'node_modules/**'
       })
     ],
-    external: ['react', 'react-dom', 'react-router-dom', 'styled-components', '@wojtekmaj/react-daterange-picker', 'approvejs', 'html-to-text', 'moment', 'moment-range', 'react-datepicker', 'react-select', 'use-state-with-callback', 'frimousse'],
+    external: [
+      'react', 
+      'react-dom', 
+      'react-router-dom', 
+      'styled-components', 
+      '@wojtekmaj/react-daterange-picker', 
+      'approvejs', 
+      'html-to-text', 
+      'moment', 
+      'moment-range', 
+      'react-datepicker', 
+      'react-select', 
+      'use-state-with-callback', 
+      'frimousse', 
+      'react-select-async-paginate',
+      'rc-picker',
+      'rc-picker/lib/interface',
+      'rc-picker/lib/locale/en_US',
+      'rc-picker/lib/generate/moment',
+      'moment'
+    ],
   },
   {
     input: 'src/index.ts',

package/src/components/date/range.tsx

@@ -0,0 +1,138 @@
+import { useState, useRef, useEffect } from 'react'
+import moment, { Moment } from 'moment'
+import { RangePicker } from 'rc-picker'
+import { RangePickerRef } from 'rc-picker/lib/interface'
+import enUS from 'rc-picker/lib/locale/en_US'
+import momentGenerateConfig from 'rc-picker/lib/generate/moment'
+
+import IconComponent from '../icon'
+
+import 'rc-picker/assets/index.css'
+import { RangeContainer } from './styles'
+
+import { TMoment, TState } from '../../typeds/base.typed'
+import { TModerateDateAntFunction } from './typed'
+
+import { configDateRangeAnt } from '../../maps/common'
+
+type TDateRange = {
+  $mode?: 'white'
+  startDate?: TMoment
+  endDate?: TMoment
+  minDate?: TMoment
+  maxDate?: TMoment
+  evModDate: TModerateDateAntFunction
+  isForceUpdate?: boolean
+  setForceUpdate?: TState<boolean | undefined>
+}
+
+const DateRangeComponent = (props: TDateRange) => {
+  const {
+    $mode,
+    startDate,
+    endDate,
+    minDate,
+    maxDate,
+    evModDate,
+    isForceUpdate,
+    setForceUpdate 
+  } = props
+
+  const _minDate: Moment = minDate || configDateRangeAnt.minDate
+  let  _startDate: Moment = startDate || configDateRangeAnt.startDate
+  let _endDate: Moment = endDate || configDateRangeAnt.endDate
+  
+  _minDate > _startDate && (_startDate = _minDate);
+  (maxDate && (maxDate < _endDate)) && (_endDate = maxDate);
+
+  const [value, setValue] = useState<[TMoment, TMoment]>([_startDate, _endDate])
+
+  useEffect(() => {
+    if (isForceUpdate) {
+      _startDate && _endDate && setValue([_startDate, _endDate]);
+      setForceUpdate && setForceUpdate(false)
+    }
+  },[isForceUpdate, setForceUpdate, _startDate, _endDate])
+
+  const onChange = (newValue: [TMoment, TMoment] | null, formatStrings?: string[]) => {
+    // console.log('Change:', newValue, formatStrings)
+    if (newValue) {
+      setValue(newValue)
+      evModDate(newValue[0], newValue[1])
+    }
+  }
+
+  // can detect start and end action
+  // const onCalendarChange = (
+  //   newValue: [TMoment, TMoment] | null,
+  //   formatStrings?: string[],
+  // ) => {
+  //   console.log('Calendar Change:', newValue, formatStrings)
+  // }
+
+  const rest = {
+    generateConfig: momentGenerateConfig,
+    value,
+    onChange,
+    // onCalendarChange,
+  }
+
+  const rangePickerRef = useRef<RangePickerRef>(null)
+
+  return (
+    <RangeContainer className='_refRangeContainer' $mode={$mode}>
+      <RangePicker
+        onOpenChange={open => {
+          const parentEl = rangePickerRef.current?.nativeElement?.closest('._refRangeContainer')
+          if (parentEl) {
+            if (open) {
+              parentEl.classList.add('is-actived')
+            } else {
+              parentEl.classList.remove('is-actived')
+            }
+          }
+        }}
+        allowEmpty
+        allowClear={false}
+        locale={enUS}
+        ref={rangePickerRef}
+        separator='-'
+        format="MMM D, YYYY"
+        placeholder={['Start Date', 'End Date']}
+        minDate={_minDate}
+        maxDate={maxDate || moment().clone()}
+        defaultValue={value}
+        suffixIcon={<IconComponent $width='14px' $name='calendar' />}
+        prevIcon={<IconComponent $width='12px' $name='arrow-left' />}
+        nextIcon={<IconComponent $width='12px' $name='arrow-right' />}
+        superPrevIcon={<IconComponent $width='12px' $name='arrow-left-double' />}
+        superNextIcon={<IconComponent $width='12px' $name='arrow-right-double' />}
+        presets={[
+          {
+            label: 'Today',
+            value: [moment().clone(), moment()],
+          },
+          {
+            label: 'Last 7 days',
+            value: [moment().subtract(6, 'days'), moment()],
+          },
+          {
+            label: 'Last 14 days',
+            value: [moment().subtract(13, 'days'), moment()],
+          },
+          {
+            label: 'Last 30 days',
+            value: [moment().subtract(29, 'days'), moment()],
+          },
+          {
+            label: 'Last 90 days',
+            value: [moment().subtract(89, 'days'), moment()],
+          },
+        ]}
+        {...rest}
+      />
+    </RangeContainer>
+  )
+}
+
+export default DateRangeComponent

package/src/components/date/ref.tsx

@@ -0,0 +1,109 @@
+import { forwardRef, useState, useEffect } from 'react'
+import DatePicker from 'react-datepicker'
+import moment from 'moment'
+
+import IconComponent from '../icon'
+
+import 'react-datepicker/dist/react-datepicker.css'
+import { DateContainer, DateIndicatorContainer } from './styles'
+import { TState } from '../../typeds/base.typed'
+
+type TDate = {
+  dateFormat?: string
+  name: string
+  evChange?: (name: string, value: any) => void
+  isField?: boolean
+  evChangeCustom? : (key: string, value: any) => void
+  saveFormat?: string
+  showFormat?: string
+  isForceUpdate?: boolean
+  reset?: boolean
+  setReset?: TState<boolean>
+  value?: Date | null
+  isError?: boolean
+  allowEmpty?: boolean
+  setForceUpdate?: TState<boolean>
+  showTimeInput?: boolean
+  placeholderText?: string
+  portalId?: string
+  isIcon?: boolean
+  'data-qa-id'?: string
+  'data-tip'?: string
+  'data-place'?: string
+  'data-type'?: string
+  disabled?: boolean
+}
+
+const DateRefComponent = forwardRef((props:TDate, ref) => {
+  const {
+    dateFormat='MMM dd, yyyy',
+    name,
+    evChange,
+    isField,
+    saveFormat,
+    showFormat,
+    evChangeCustom,
+    value,
+    reset,
+    setReset,
+    isForceUpdate,
+    setForceUpdate,
+    isError=false,
+    showTimeInput=false,
+    allowEmpty=false,
+    placeholderText,
+    portalId,
+    isIcon,
+    disabled,
+    ...rest 
+  } = props
+
+  const [_date , setDate] = useState<Date | null>(value !== undefined ? value : (allowEmpty ? null : new Date()))
+
+  const handleChange = (value: Date | null) => {
+    setDate(value)
+    evChange && evChange(name, value);
+    (isField && evChangeCustom) && evChangeCustom(name, value ? moment(value).format(saveFormat) : value);
+  }
+
+  useEffect(() => {
+    if(reset) {
+      setDate(null)
+      setReset && setReset(false)
+    }
+    if (isForceUpdate) {
+      const newValue = value ? value : (allowEmpty ? null : new Date())
+      setDate(newValue)
+      setForceUpdate && setForceUpdate(false)
+    }
+  }, [isForceUpdate, setForceUpdate, value, allowEmpty, reset, setReset])
+
+  return (
+    <DateContainer 
+      $isError={isError} 
+      {...rest['data-tip'] && {'data-tip': rest['data-tip'], 'data-place': rest['data-place'], 'data-type': rest['data-type'] }} 
+      {...rest['data-qa-id'] && {'data-qa-id': rest['data-qa-id']}}
+    >
+      { isIcon && <IconComponent $name='calendar' $width='20px' /> }
+      <DatePicker
+        selected={_date}
+        name={name}
+        dateFormat={dateFormat}
+        onChange={handleChange}
+        showTimeInput={showTimeInput}
+        onKeyDown={(e) => e.preventDefault()}
+        placeholderText={placeholderText}
+        ref={ref as any} 
+        {...disabled && { disabled: true }}
+        {...(portalId && { portalId: portalId })} 
+      />
+      {(allowEmpty && _date) ? (
+        <DateIndicatorContainer onClick={() => handleChange(null)} title='clear'>
+          <svg height="20" width="20" viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"></path></svg>
+        </DateIndicatorContainer>
+      ) : null}
+    </DateContainer>
+  )
+})
+
+export default DateRefComponent

package/src/components/date/{styles.tsx → styles.ts}

@@ -1,5 +1,5 @@
 import styled, { css } from 'styled-components';
-import { dropBase } from '../../assets';
+import { dropBase, buttonStyle, buttonActiveStyle } from '../../assets/stylesheets/bases.styles';
 
 const DateRangeWrapperStyles = css`
   align-items: center;
@@ -353,6 +353,15 @@ export const DateContainer = styled.div<{ $isError?: boolean }>`
   .react-datepicker-wrapper {  
     width: 100%; 
   }
+  > i {
+    position: absolute;
+    top: 5px; 
+    left: 10px;
+    z-index: 1;
+    & + div > div > input {
+      padding-left: 35px !important;
+    }
+  }
   ${getDatePickerContainerModifiedStyled}
 `
 export const DateIndicatorContainer = styled.div`
@@ -398,4 +407,59 @@ export const DateRangePortalContainer = styled.div`
 export const DateRangeIconContainer = styled.div`
   display: flex;
   padding: 0 0 0 12px;
+`
+export const RangeContainer = styled.div<{ $mode?: 'white' }>`
+  ${buttonStyle}
+  border: 0;
+  width: 240px;
+  &.is-actived {
+    ${buttonActiveStyle}
+  }
+  .rc-picker-range {
+    width: 100%;
+    gap: 6px;
+    align-content: center;
+    align-items: center;
+    padding: 0 22px 0 10px;
+    .rc-picker-active-bar {
+        background-color: #fc5c64;
+      }
+    }
+    .rc-picker-focused {
+      border: none !important;
+    }
+    .rc-picker-input {
+      width: auto;
+      input:not(:disabled):not([type=submit]):focus, 
+      input:not(:disabled):not([type=submit]):active, 
+      input:not(:disabled):not([type=submit]):active:focus, 
+      textarea:not(:disabled):not([type=submit]):focus, 
+      textarea:not(:disabled):not([type=submit]):active, 
+      textarea:not(:disabled):not([type=submit]):active:focus {
+        border: 0;
+      }
+      input {
+        background: transparent;
+        border: 0;
+        text-align: left;
+        padding-left: 0;
+        padding-right: 0;
+        &::placeholder {
+          font-style: normal;
+        }
+      }
+    }
+    .rc-picker-cell-in-range > .rc-picker-cell-inner {
+      background-color: rgba(#fc5c64, .75);
+    }
+    .rc-picker-input-active > input {
+      background: rgba(#fc5c64, 0.05);
+    }
+  }
+
+  ${({ $mode }) => $mode === 'white' && css`
+    background-color: var(--pri-clr-bg);
+    border: 1px solid var(--ck-clr-ln);
+    border-radius: var(--ter-rd);
+  `}
 `

package/src/components/date/typed.ts

@@ -0,0 +1,3 @@
+import { TMoment } from '../../typeds/base.typed';
+
+export type TModerateDateAntFunction = (startDateObj: TMoment, endDateObj: TMoment, callback?: () => void) => void

package/src/components/index.ts

@@ -14,6 +14,8 @@ export { default as PopupComponent } from './popup';
 export { default as ImageComponent } from './image';
 export { default as ImageChannelComponent } from './image/channel';
 export { default as SelectComponent } from './select';
+export { default as SelectAllComponent } from './select/all';
+export { default as SelectAsyncPaginateComponent } from './select/asyncPaginate';
 export { default as MenuList } from './select/menulist';
 export { default as ErrorComponent } from './error';
 export { default as UploadComponent } from './upload';
@@ -21,6 +23,8 @@ export { default as UploadDragDropComponent } from './upload/drag.drop';
 export { default as TextAreaComponent } from './textarea';
 export { default as TextAreaRefComponent } from './textarea/ref'; 
 export { default as DateComponent } from './date';
+export { default as DateRangeComponent } from './date/range';
+export { default as DateRefComponent } from './date/ref';
 export { default as DateTimeComponent } from './datetime';
 export { default as RadioComponent } from './radio';
 export { default as SwitchComponent } from './switch';
@@ -28,12 +32,14 @@ export { default as ListComponent } from './list';
 export { default as DropDownComponent } from './dropdown';
 export { default as ReactPortalComponent } from './portal';
 export { default as EmojiComponent } from './emoji';
+export { default as TableComponent } from './table';
 
 export * from './message/typed';
 export * from './popup/typed';
 export * from './select/typed';
 export * from './link/typed';
 export * from './dropdown/typed';
+export * from './date/typed';
 
 export * from './select/components';
 export * from './form/styles';

package/src/components/select/all.tsx

@@ -13,7 +13,7 @@ type TSelect = {
   evChange: (newValue: any[], actionMeta: ActionMeta<any>) => void
 }
 
-const SelectAll = (props: TSelect) => {
+const SelectAllComponent = (props: TSelect) => {
   const {
     isError=false,
     value,
@@ -186,4 +186,4 @@ const SelectAll = (props: TSelect) => {
   )
 }
 
-export default SelectAll
+export default SelectAllComponent