forstok-ui-lib 7.1.0 → 7.2.1

package/src/components/select/asyncPaginate.tsx

@@ -0,0 +1,273 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { AsyncPaginate } from 'react-select-async-paginate'
+import type { LoadOptions } from 'react-select-async-paginate'
+import { ActionMeta, ControlProps, CSSObjectWithLabel, GroupBase, OnChangeValue, OptionProps, StylesConfig } from 'react-select'
+
+import type { CSSObject } from '@emotion/serialize'
+import type { TState } from '../../typeds/base.typed'
+import type { TLoadOption, TOption } from './typed'
+
+type TSelect = {
+  type?: string
+  mode?: string
+  isError?: boolean
+  customOption?: (arg0: OptionProps) => void
+  MenuList?: any
+  reset?: boolean
+  setReset?: TState<boolean>
+  evChange?: (newValue: OnChangeValue<TOption, boolean>, actionMeta?: ActionMeta<TOption>) => void
+  defaultValue?: OnChangeValue<TOption, boolean>
+  loadOptions: LoadOptions<unknown, GroupBase<unknown>, unknown> | TLoadOption
+  loadOptionsOnMenuOpen?: boolean
+  noOptionsMessage?: ((obj: {
+      inputValue: string
+  }) => React.ReactNode)
+  isSearchable?: boolean
+  isClearable?: boolean
+  placeholder?: string
+  isMenuOpen?: boolean
+  setMenuIsOpen?: TState<boolean | undefined>
+  isForceUpdate?: boolean
+  setForceUpdate?: TState<boolean>
+  isMulti?: boolean
+  iconLeft?: boolean | string
+  loadedOptions?: TOption[]
+  'data-qa-id'?: string
+  evChangeOnMenuClose?: (value: OnChangeValue<TOption, boolean> | undefined) => void
+  id?: string
+  isDisabled?: boolean
+}
+
+const SelectAsyncPaginateComponent = ({ loadOptions, ...props }: TSelect) => {
+  const {
+    isError=false,
+    mode,
+    type,
+    customOption,
+    MenuList,
+    defaultValue,
+    reset,
+    setReset,
+    evChange,
+    isForceUpdate,
+    setForceUpdate,
+    loadOptionsOnMenuOpen,
+    noOptionsMessage,
+    iconLeft,
+    isSearchable,
+    placeholder,
+    isMulti,
+    loadedOptions,
+    isMenuOpen,
+    setMenuIsOpen,
+    id,
+    evChangeOnMenuClose,
+    ...rest 
+  } = props
+
+  const [valueSelect, setValueSelect] = useState<typeof defaultValue>(defaultValue || null)
+  const [inputValue, setInputValue] = useState<string>("")
+  const [_time, setTime] = useState<Date>(new Date())
+
+  const selectRef = useRef<HTMLElement | null>(null)
+
+  useEffect(() => {
+    if (isForceUpdate) {
+      setValueSelect(defaultValue || null) 
+      setForceUpdate && setForceUpdate(false)
+    }
+  }, [defaultValue, isForceUpdate, setForceUpdate, setValueSelect])
+
+  const handleChange = (value: OnChangeValue<TOption, boolean>, actionMeta?: ActionMeta<TOption>) => {
+    const newValue = value as OnChangeValue<TOption, false>
+    if (actionMeta) {
+      const { action, option } = actionMeta
+      if (action === "select-option" && option?.value === '*') {
+        const newValueSelect = valueSelect as OnChangeValue<TOption, true>
+        if(newValueSelect?.length) {
+          let _newValue = loadedOptions ? [...newValueSelect, ...loadedOptions] : [...newValueSelect]
+          _newValue = _newValue.filter((_value, idx, self) => idx === self.findIndex((t) => (t.sku === _value.sku)))
+          setValueSelect(_newValue)
+          evChange && evChange(_newValue, actionMeta)
+        } else if (loadedOptions) {
+          setValueSelect(loadedOptions)
+          evChange && evChange(loadedOptions, actionMeta)
+        }
+        selectRef.current?.blur()
+        return false
+      }
+    }
+    setValueSelect(newValue)
+    evChange && evChange(newValue, actionMeta)
+  }
+
+  const customStyles: StylesConfig<TOption, boolean> = {
+    container: (provided: CSSObject) => ({
+      ...provided,
+      display: 'inline-block',
+      width: '100%',
+      minHeight: '1px',
+      textAlign: 'left',
+      border: 'none',
+    } as CSSObjectWithLabel),
+    control: (provided: CSSObject, state: ControlProps<TOption, boolean>) => ({
+      ...provided,
+      width: '100%',
+      borderRadius: '.5rem',
+      minHeight: '1px',
+      height: isMulti ? 'auto' : mode === 'small' ? '30px' : '32px',
+      cursor: 'pointer',
+      borderWidth: isError ? '1px' : '0',
+      boxShadow: (state.isFocused) ? '-.0625rem 0rem .0625rem 0rem rgba(26, 26, 26, .122) inset, .0625rem 0rem .0625rem 0rem rgba(26, 26, 26, .122) inset, 0rem .125rem .0625rem 0rem rgba(26, 26, 26, .2) inset' : '0rem -.0625rem 0rem 0rem #b5b5b5 inset,0rem 0rem 0rem .0625rem rgba(0, 0, 0, .1) inset,0rem .03125rem 0rem .09375rem #FFF inset',
+      borderColor: ((state.isFocused && mode !== 'filter') && !isError) ? 'var(--pri-clr-ln__fc)' :  (isError ? 'var(--err-clr-ln)' : (mode ==='filter' ? '#ffffff' : ' var(--ck-clr-ln)' )),
+      background: state.isFocused ? 'rgba(247, 247, 247, 1)' : '#ffffff',
+      overflow: mode === 'picklist' ? 'hidden': 'initial',
+      '&:hover': {
+        borderColor: ((state.isFocused && mode !== 'filter') && !isError) ? 'var(--pri-clr-ln__fc)' :  (isError ? 'var(--err-clr-ln)' : (mode ==='filter' ? '#ffffff' : ' var(--ck-clr-ln)' )),
+        background: 'rgba(250, 250, 250, 1)',
+        color: 'rgba(48, 48, 48, 1)'
+      }
+    } as CSSObjectWithLabel),
+    placeholder: (provided: CSSObject) => ({
+      ...provided,
+      fontStyle: 'italic'
+    } as CSSObjectWithLabel),
+    input: (provided: CSSObject) => ({
+      ...provided,
+      minHeight: '1px',
+      margin: '0 2px',
+      padding: '0',
+      'input': {
+        boxShadow: 'none !important'
+      }
+    } as CSSObjectWithLabel),
+    singleValue: (provided: CSSObject) => ({
+      ...provided,
+      minHeight: '1px',
+      paddingBottom: '2px',
+      color: 'initial',
+    } as CSSObjectWithLabel),
+    dropdownIndicator: (provided: CSSObject) => ({
+      ...provided,
+      minHeight: '1px',
+      paddingTop: '0',
+      paddingBottom: '0',
+      paddingLeft: '2px',
+      paddingRight: '2px',
+      color: '#757575',
+    } as CSSObjectWithLabel),
+    indicatorSeparator: (provided: CSSObject) => ({
+      ...provided,
+      minHeight: '1px',
+      height: '24px',
+      display: (type=== 'tag') ? 'block' : 'none'
+    } as CSSObjectWithLabel),
+    clearIndicator: (provided: CSSObject) => ({
+      ...provided,
+      minHeight: '1px',
+      marginRight: '-6px',
+      padding: '0'
+    } as CSSObjectWithLabel),
+    valueContainer: (provided: CSSObject) => ({
+      ...provided,
+      minHeight: '1px',
+      height: mode === 'multi-select' ? '70px' : mode === 'small' ? '30px' : '32px',
+      paddingTop: isMulti ? '4px' : '0',
+      paddingBottom: isMulti ? '4px' : '0',
+      paddingLeft: iconLeft ? '28px' : '8px',
+      paddingRight: '2px',
+      maxHeight: isMulti ? '60px' : 'unset',
+      overflow: isMulti ? 'auto' : 'initial',
+      alignContent: isMulti ? 'flex-start' : 'initial'
+    } as CSSObjectWithLabel),
+    option: (provided: CSSObject, state: OptionProps<TOption, boolean>) => ({
+      ...provided,
+      color: state.isSelected ? '#ffffff' : '#000000',
+      backgroundColor: state.isSelected || state.isFocused ? '#fc5c64' : 'transparent',
+      cursor: 'pointer',
+      '&:hover': {
+        backgroundColor: '#ec5b62',
+        color: '#ffffff'
+      }
+    } as CSSObjectWithLabel), 
+    menu: (provided: CSSObject) => ({
+      ...provided,
+      borderRadius: '.75rem',
+      boxShadow: '0rem .5rem 1.5rem -.5rem rgba(0, 0, 0, .05), 0rem .5rem 1rem -.25rem rgba(0, 0, 0, .05), 0rem .1875rem .375rem 0rem rgba(0, 0, 0, .05), 0rem .125rem .25rem 0rem rgba(0, 0, 0, .05), 0rem .0625rem .125rem 0rem rgba(0, 0, 0, .05), 0rem 0rem 0rem .0625rem rgba(0, 0, 0, .06)',
+      border: 'none'
+    } as CSSObjectWithLabel),
+    menuPortal: (provided: CSSObject) => ({ 
+      ...provided, 
+      zIndex: 9999,
+      letterSpacing: 'normal',
+      lineHeight: 'normal',
+    } as CSSObjectWithLabel)
+  }
+
+  const onMenuOpen = useCallback(() => {
+    setMenuIsOpen && setMenuIsOpen(true)
+  }, [setMenuIsOpen])
+
+  const onMenuClose = useCallback(() => {
+    setMenuIsOpen && setMenuIsOpen(false)
+  }, [setMenuIsOpen])
+
+  const evToogleSelect = () => {
+    const containerRef = document.getElementsByClassName('_refSelectContainer is-shown') as HTMLCollectionOf<HTMLElement>;
+    if (containerRef.length) {
+      for (let i = 0; i < containerRef.length; i++) {
+        containerRef[i].classList.remove('is-shown');
+      }
+    } 
+  }
+
+  const evReToogleSelect = () => {
+    setTime(new Date())
+    evToogleSelect()
+  }
+
+  return  <div className='_refContainer'>
+            <AsyncPaginate
+              isSearchable={isSearchable}
+              placeholder={placeholder}
+              debounceTimeout={500}
+              styles={customStyles} 
+              loadOptions={loadOptions}
+              menuPortalTarget={document.body}
+              menuPosition='fixed'
+              menuPlacement='auto'
+              value={valueSelect}
+              onChange={handleChange}
+              loadOptionsOnMenuOpen={loadOptionsOnMenuOpen}
+              noOptionsMessage={noOptionsMessage}
+              menuIsOpen={isMenuOpen}
+              {...id && {id: id}}
+              {...mode === 'multi-select' && { 
+                closeMenuOnSelect: false, 
+                inputValue: inputValue, 
+                onInputChange: (value, action) => {
+                  if (action.action === "input-change") {
+                    setInputValue(value)
+                    setTime(new Date())
+                  } 
+                }, 
+                onMenuClose: () => {
+                  setInputValue('');
+                  evChangeOnMenuClose?.(valueSelect);
+                },
+                onMenuOpen: () => evReToogleSelect(),
+                cacheUniqs: [_time],
+                selectRef: selectRef
+              }}
+              {...mode !== 'multi-select' && { 
+                onMenuOpen: onMenuOpen,
+                onMenuClose: onMenuClose
+              }}
+              {...customOption && { components: { Option: customOption } }}
+              {...MenuList && { components: { MenuList } }}
+              {...isMulti && { isMulti: true }}
+              {...rest} />
+          </div>
+}
+
+export default SelectAsyncPaginateComponent

package/src/components/select/function.ts

@@ -0,0 +1,8 @@
+export const evToogleSelect = () => {
+  const containerRef = document.getElementsByClassName('_refContainer is-shown') as HTMLCollectionOf<HTMLElement>
+  if (containerRef.length) {
+    for (let i = 0; i < containerRef.length; i++) {
+      containerRef[i].classList.remove('is-shown')
+    }
+  } 
+}

package/src/components/table/index.tsx

@@ -0,0 +1,120 @@
+import { isValidElement, useEffect } from 'react'
+
+import { TableContainer, TableHeadRow, TableHeadColumn, TableBodyRow, TableBodyColumn, TableFootRow, TableFootColumn, TableFinalRow, TableFinalColumn, TableBoldFootRow, TableBoldFootColumn } from './style'
+
+import type { TTable } from './type'
+
+const nameDefValue = `table_${new Date().getTime()}`
+
+const TableComponent = (props: TTable) => {
+  const {
+    children,
+    $mode,
+    $name=nameDefValue,
+    $template,
+    isForceUpdate,
+    setForceUpdate
+  } = props
+
+  useEffect(() => {
+    if (isForceUpdate) {
+      setForceUpdate && setForceUpdate(false)
+    }
+  }, [isForceUpdate, setForceUpdate])
+
+  const evGenerateEl = (part: string) => {
+    return children.filter(child => {
+      if (isValidElement(child)) {
+        return (child.props as any)['aria-label'] === part
+      } else {
+        return null 
+      }
+    })
+  }
+
+  const evGenerateChildrenArrEl = (childrenFilter: any) => {
+    let childrenArray: any[] = []
+    if (childrenFilter.length) {
+      if (childrenFilter[0].props.children.length > 1) {
+        let newArrayBodyChildren: any[] = []
+        childrenFilter[0].props.children.forEach((body: any) => {
+          let _bodyArray = Array.isArray(body) ? body : [].concat(body)
+          _bodyArray.forEach((_body: any) => {
+            newArrayBodyChildren.push(_body)
+          })
+        })
+        childrenArray = newArrayBodyChildren
+      } else {
+        childrenArray = Array.isArray(childrenFilter[0].props.children) ? childrenFilter[0].props.children : [].concat(childrenFilter[0].props.children)
+      }
+    }
+    return childrenArray
+  }
+  
+  const HeadChildrenFilter = evGenerateEl('head')
+  const TableHeadEl = (HeadChildrenFilter && isValidElement(HeadChildrenFilter[0])) ? (HeadChildrenFilter[0] as any).props.children.filter((head: any) => head !== null).map((head: any, index: number) => 
+    <TableHeadColumn 
+      key={index} 
+      role='columnheader' 
+      {...head.props.style && {style: head.props.style}} 
+      {...head.props.className && {className: head.props.className}} 
+      {...head.props}
+    >{head.props.children}</TableHeadColumn>) : null
+  
+  const BodyChildrenFilter = evGenerateEl('body')
+  const BodyChildrenArray = BodyChildrenFilter.length ? evGenerateChildrenArrEl(BodyChildrenFilter) : null
+  const TableBodyEl = BodyChildrenArray ? BodyChildrenArray.map((body: any, index: number) => 
+    <TableBodyRow 
+      key={index} 
+      role='row' 
+      {...body.props?.id && {id: body.props.id}} 
+      {...body.props?.className && {className: body.props.className}}
+    >
+      {body.props.children.filter((child: any) => child !== null).map((child: any, indexChild: number) => 
+        <TableBodyColumn key={indexChild} {...child.props}>{child.props.children}</TableBodyColumn>
+      )}
+    </TableBodyRow>) : null
+
+  const FootChildrenFilter = evGenerateEl('foot')
+  const FootChildrenArray = FootChildrenFilter.length ? evGenerateChildrenArrEl(FootChildrenFilter) : null
+  const TableFootEl = FootChildrenArray ? FootChildrenArray.map((foot: any, index: number) => 
+    <TableFootRow key={index} role='row'>
+      {foot.props.children.filter((child: any) => child !== null).map((child: any, indexChild: number) => 
+        <TableFootColumn key={indexChild} {...child.props}>{child.props.children}</TableFootColumn>
+      )}
+    </TableFootRow>) : null
+
+  const BoldFootChildrenFilter = evGenerateEl('boldFoot')
+  const BoldFootChildrenArray = BoldFootChildrenFilter.length ? evGenerateChildrenArrEl(BoldFootChildrenFilter) : null
+  const TableBoldFootEl = BoldFootChildrenArray ? BoldFootChildrenArray.map((boldFoot: any, index: number) =>
+    <TableBoldFootRow key={index} role='row'>
+      {boldFoot.props.children.filter((child: any) => child !== null).map((child: any, indexChild: number) => 
+        <TableBoldFootColumn key={indexChild} {...child.props}>{child.props.children}</TableBoldFootColumn>
+      )}
+    </TableBoldFootRow>) : null
+
+  const FinalChildrenFilter = evGenerateEl('final')
+  const FinalChildrenArray = FinalChildrenFilter.length ? evGenerateChildrenArrEl(FinalChildrenFilter) : null
+  const TableFinalEl =  (FinalChildrenArray) ? FinalChildrenArray.map((finalFoot: any, index: number) =>
+    <TableFinalRow key={index} role='row'>
+      {finalFoot.props.children.filter((child: any) => child !== null).map((child: any, indexChild: number) => 
+        <TableFinalColumn key={indexChild} {...child.props}>{child.props.children}</TableFinalColumn>)}
+      </TableFinalRow>) : null
+
+  return (
+    <TableContainer 
+      $mode={$mode} 
+      $name={$name} 
+      $template={$template} 
+      role='table'
+    >
+      <TableHeadRow role='rowheader'>{TableHeadEl}</TableHeadRow>
+      {TableBodyEl}
+      {TableFootEl && TableFootEl}
+      {TableBoldFootEl && TableBoldFootEl}
+      {TableFinalEl && TableFinalEl}
+    </TableContainer>
+  )
+}
+
+export default TableComponent

package/src/components/table/style.ts

@@ -0,0 +1,178 @@
+import styled, { css } from 'styled-components'
+
+import type { TableMode, TTable } from './type'
+
+type TTableStyle = Omit<TTable, 'children'>
+
+const TableBaseStyles = css`
+  display: grid;
+  justify-items: start;
+`
+export const TableHeadRow = styled.section`
+  ${TableBaseStyles}
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.3px;
+  background-color: var(--sec-clr-bg);
+  border: 1px solid var(--sec-clr-ln);
+  border-left: 0;
+  border-right: 0;
+  border-top: 0;
+  align-items: end;
+  color: var(--mt-clr);
+  > div {
+    padding-top: 8px !important;
+    padding-bottom: 8px !important;
+  }
+`
+
+export const TableHeadColumn = styled.div``
+
+export const TableBodyRow = styled.section`
+  ${TableBaseStyles}
+  border-bottom: 1px solid var(--pri-clr-ln);
+`
+
+const TableColumnStyles = css`
+  display: inline-grid;
+  grid-auto-flow: column;
+  align-items: center;
+  grid-gap: 6px;
+  padding: 12px 15px;
+  width: 100%;
+  justify-content: left;
+  b {
+    display: inline;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-transform: capitalize;
+    font-weight: 400;
+  }
+`
+export const TableBodyColumn = styled.div`
+  ${TableColumnStyles}
+`
+
+export const TableFootRow = styled.section`
+  ${TableBaseStyles}
+`
+
+export const TableFootColumn = styled.div`
+  ${TableColumnStyles}
+`
+
+export const TableBoldFootRow = styled.section`
+  ${TableBaseStyles}
+  &, span { 
+    font-weight: 600; 
+  }
+`
+
+export const TableBoldFootColumn = styled.div`
+  ${TableColumnStyles}
+`
+
+export const TableFinalRow = styled.section`
+  ${TableBaseStyles}
+`
+
+export const TableFinalColumn = styled.div`
+  ${TableColumnStyles}
+`
+
+const modeStyles = {
+  widersmall: css`
+    ${TableHeadRow}, 
+    ${TableBodyRow}, 
+    ${TableBoldFootRow}, 
+    ${TableFootRow} { 
+      grid-template-columns: auto max-content; 
+    }
+  `,
+  custom: css`
+    ${TableBodyColumn} {
+      grid-auto-flow: column;
+    }
+    ${TableFootColumn}, 
+    ${TableBoldFootColumn} {
+      span {
+        overflow-wrap: anywhere;
+      }
+    }
+    ${TableFootRow} {
+      &:last-child {
+        & ${TableFootColumn} {
+          padding-bottom: 12px;
+        }
+      }
+    }
+  `
+} as const
+const getTableModifiedStyled = ({ $mode, $template }: TTableStyle) => css`
+  ${$mode && modeStyles[$mode]}
+
+  ${($mode === 'custom' && $template) && css`
+    ${TableHeadRow}, 
+    ${TableBodyRow}, 
+    ${TableFootRow}, 
+    ${TableBoldFootRow}, 
+    ${TableFinalRow} {
+      grid-template-columns: ${$template};
+      justify-content: space-between;
+      grid-gap: 5px;
+      > div {
+        padding: 10px 0;
+        &:first-child {
+          padding-left: 5px;
+        }
+        &:last-child {
+          padding-right: 5px;
+        }
+      }
+      @media only screen and (min-width: 1280px) {
+        grid-gap: 10px;
+        > div {
+          &:first-child {
+            padding-left: 10px;
+          }
+          &:last-child {
+            padding-right: 10px;
+          }
+        }
+      }
+    }
+  `}
+`
+export const TableContainer = styled.section<{ $mode: TableMode, $name: string, $template?: string }>`
+  display: inline-grid;
+  width: 100%;
+  ${TableHeadRow}, 
+  ${TableBodyRow}, 
+  ${TableFootRow}, 
+  ${TableBoldFootRow}, 
+  ${TableFinalRow} {
+    grid-gap: 5px;
+    > div {
+      padding: 10px 0;
+      &:first-child {
+        padding-left: 5px;
+      }
+      &:last-child {
+        padding-right: 5px;
+      }
+    }
+    @media only screen and (min-width: 1280px) {
+      grid-gap: 10px;
+      > div {
+        &:first-child {
+          padding-left: 10px;
+        }
+        &:last-child {
+          padding-right: 10px;
+        }
+      }
+    }
+  }
+  ${getTableModifiedStyled}
+`

package/src/components/table/type.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes, ReactNode } from 'react'
+import { TState } from '../../typeds/base.typed'
+
+export type TableMode = 
+  | 'widersmall' 
+  | 'custom' 
+
+export type TTable = HTMLAttributes<HTMLElement> & {
+  children: ReactNode[]
+  $mode: TableMode
+  $name?: string
+  $template?: string
+  isForceUpdate?: boolean
+  setForceUpdate?: TState<boolean>
+}

package/src/maps/common.ts

@@ -1,4 +1,4 @@
-import moment from 'moment';
+import moment, { Moment } from 'moment';
 
 export const configDateRange = {
   rangeDate: 'lastsecondweek', 
@@ -6,4 +6,10 @@ export const configDateRange = {
   endDate:  moment().clone().format('YYYY-MM-DD') as string, 
   placeholder: 'Last 14 days',
   minDate: moment().clone().subtract(89, 'days').format('YYYY-MM-DD') as string
-}
+}
+
+export const configDateRangeAnt = {
+  startDate: moment().clone().subtract(13, 'days') as Moment, 
+  endDate:  moment().clone() as Moment, 
+  minDate: moment().clone().subtract(89, 'days') as Moment
+};