zaman-backoffice 1.0.2 → 1.0.4

package/src/hooks/__tests__/useClickOutside.test.tsx

@@ -1,32 +0,0 @@
-import React, { useRef } from 'react'
-import useClickOutside from '../useClickOutside'
-import { fireEvent, render, screen } from '@testing-library/react'
-
-interface MockComponentProps {
-  handler: () => void
-}
-const MockComponent = (props: MockComponentProps) => {
-  const insideRef = useRef(null)
-  useClickOutside(insideRef, props.handler)
-  return (
-    <div>
-      <div>click outside</div>
-      <div ref={insideRef}>Click inside</div>
-    </div>
-  )
-}
-test('test click on inside', () => {
-  const mockCallback = jest.fn(() => {})
-  render(<MockComponent handler={mockCallback} />)
-  fireEvent.mouseDown(screen.getByText(/click inside/i))
-
-  expect(mockCallback.mock.calls.length).toBe(0)
-})
-
-test('test click on outside', () => {
-  const mockCallback = jest.fn(() => {})
-  render(<MockComponent handler={mockCallback} />)
-  fireEvent.mouseDown(screen.getByText(/click outside/i))
-
-  expect(mockCallback.mock.calls.length).toBe(1)
-})

package/src/hooks/useCalendarHandlers.tsx

@@ -1,113 +0,0 @@
-import { type SyntheticEvent, useState } from 'react'
-import dayjs from 'dayjs'
-import type { DatePickerValue } from '../types'
-import type {
-  CalendarDefaultProps,
-  CalendarRangeProps
-} from 'src/packages/Calendar/Calendar.types'
-
-type Event = SyntheticEvent<HTMLButtonElement>
-
-interface BaseUseCalendarHandlersType {
-  from?: DatePickerValue
-  to?: DatePickerValue
-}
-
-type useCalendarHandlersType = BaseUseCalendarHandlersType &
-  (CalendarRangeProps | CalendarDefaultProps)
-
-export const guardRange = (
-  value: useCalendarHandlersType
-): value is CalendarRangeProps => {
-  return value.range === true
-}
-
-export const useCalendarHandlers = (props: useCalendarHandlersType) => {
-  const [selectingRange, setSelectingRange] = useState(false)
-  const [from, setFrom] = useState<Date | undefined>(
-    props.from !== undefined ? new Date(props.from) : undefined
-  )
-  const [to, setTo] = useState<Date | undefined | null>(
-    props.to !== undefined ? new Date(props.to) : undefined
-  )
-
-  const onClickCalendar = (e: Event) => {
-    const { value, disabled } = e.currentTarget.dataset
-    if (value === undefined) {
-      return
-    }
-    if (disabled === 'true') {
-      return
-    }
-
-    if (!guardRange(props) && typeof props.onChange === 'function') {
-      props.onChange({ value: new Date(value) })
-    }
-
-    return value
-  }
-  const onClickRange = (e: Event) => {
-    const { value } = e.currentTarget.dataset
-    // start selecting range
-    if (!selectingRange) {
-      if (value !== undefined) {
-        setFrom(new Date(value))
-        setTo(null)
-      }
-      setSelectingRange(true)
-    }
-    // submit select date in mobile
-    if (selectingRange && to === null) {
-      if (value !== undefined) {
-        setTo(new Date(value))
-        handleRangeOnChange(from, new Date(value))
-      }
-      setSelectingRange(false)
-    }
-    // finish selecting range in desktop
-    if (selectingRange && to !== undefined) {
-      handleRangeOnChange(from, to)
-      setSelectingRange(false)
-    }
-  }
-  const onMouseMove = (e: Event) => {
-    const { value } = e.currentTarget.dataset
-    if (!selectingRange) {
-      return
-    }
-    if (value !== undefined) {
-      if (dayjs(value).isAfter(dayjs(from))) {
-        setTo(new Date(value))
-      }
-    }
-  }
-  const handleClickEvent = (e: Event) => {
-    if (props.range === true) {
-      return onClickRange(e)
-    }
-    return onClickCalendar(e)
-  }
-  const handleRangeOnChange = (
-    from: Date | undefined,
-    to: Date | undefined | null
-  ) => {
-    if (typeof props.onChange === 'function' && guardRange(props)) {
-      if (from != null && to != null) {
-        props.onChange({
-          from,
-          to
-        })
-      }
-    }
-  }
-  return {
-    handlers: {
-      onClick: handleClickEvent,
-      ...(props.range === true && { onMouseMove })
-    },
-    from,
-    to
-  }
-}
-
-export default useCalendarHandlers

package/src/hooks/useClickOutside.tsx

@@ -1,23 +0,0 @@
-import type React from 'react'
-import { useEffect } from 'react'
-
-function useClickOutside(
-  ref: React.RefObject<HTMLElement>,
-  handler: () => void
-) {
-  useEffect(() => {
-    function handleClickOutside({ target }: MouseEvent) {
-      if (ref.current != null && !ref.current.contains(target as Node)) {
-        handler()
-      }
-    }
-    // Bind the event listener
-    document.addEventListener('mousedown', handleClickOutside)
-    return () => {
-      // Unbind the event listener on clean up
-      document.removeEventListener('mousedown', handleClickOutside)
-    }
-  }, [ref, handler])
-}
-
-export default useClickOutside

package/src/hooks/useSlideCalendar.tsx

@@ -1,95 +0,0 @@
-import dayjs from 'dayjs'
-import { useRef } from 'react'
-import type { Dispatch, RefObject, SetStateAction } from 'react'
-import { isRtl } from '../utils'
-import { CALENDAR_WIDTH, TIME, ANIMATE_FUNC } from '../constants'
-import getDays from '../utils/month'
-import type { DaysInMonth } from '../utils/month/month.types'
-
-const toRight = () => {
-  if (isRtl()) {
-    return CALENDAR_WIDTH
-  }
-  return CALENDAR_WIDTH * -1
-}
-
-interface UseSliderTypes {
-  daysElementRefs: RefObject<HTMLDivElement[]>
-  days: DaysInMonth[]
-  setDays: Dispatch<SetStateAction<DaysInMonth[]>>
-}
-export const useSlideCalendar = ({
-  daysElementRefs,
-  days,
-  setDays
-}: UseSliderTypes) => {
-  const isAnimating = useRef(false)
-  const currentMonth = days[0].middleOfMonth
-
-  const slideToTheNextMonth = () => {
-    if (isAnimating.current) {
-      return
-    }
-    const nextMonth = dayjs(currentMonth).add(1, 'month')
-    const newValue = getDays(nextMonth.toDate())
-
-    setDays([...days, newValue])
-
-    requestAnimationFrame(() => {
-      isAnimating.current = true
-      // @ts-expect-error I will check this out later
-      const [firstItemRef, lastItemRef] = daysElementRefs.current
-      firstItemRef.style.transition = `transform ${TIME}ms ${ANIMATE_FUNC}`
-      firstItemRef.style.transform = `translateX(${toRight()}px)`
-
-      lastItemRef.style.transition = `transform ${TIME}ms ${ANIMATE_FUNC}`
-      lastItemRef.style.transform = `translateX(${toRight()}px)`
-
-      setTimeout(() => {
-        setDays((oldItems) => {
-          return oldItems.filter((items) => items.id === newValue.id)
-        })
-        lastItemRef.style.transition = null
-        lastItemRef.style.transform = null
-        isAnimating.current = false
-      }, TIME + 50)
-    })
-  }
-  const slideToPrevMonth = () => {
-    if (isAnimating.current) {
-      return
-    }
-    const prevMonth = dayjs(currentMonth).subtract(1, 'month')
-    const newValue = getDays(prevMonth.toDate())
-
-    setDays([newValue, ...days])
-
-    requestAnimationFrame(() => {
-      isAnimating.current = true
-      const [firstItemRef, lastItemRef] = daysElementRefs.current
-      firstItemRef.style.transform = `translateX(${toRight()}px)`
-      lastItemRef.style.transform = `translateX(${toRight()}px)`
-
-      requestAnimationFrame(() => {
-        lastItemRef.style.transition = `transform ${TIME}ms ${ANIMATE_FUNC}`
-        lastItemRef.style.transform = `translateX(${0}px)`
-
-        firstItemRef.style.transition = `transform ${TIME}ms ${ANIMATE_FUNC}`
-        firstItemRef.style.transform = `translateX(${0}px)`
-
-        setTimeout(() => {
-          setDays((oldItems) => {
-            return oldItems.filter((items) => items.id === newValue.id)
-          })
-          firstItemRef.style.transition = null
-          firstItemRef.style.transform = null
-          isAnimating.current = false
-        }, TIME + 50)
-      })
-    })
-  }
-  return {
-    slideToTheNextMonth,
-    slideToPrevMonth
-  }
-}

package/src/hooks/useTimePicker.tsx

@@ -1,95 +0,0 @@
-import type React from 'react'
-import { useState } from 'react'
-import dayjs from 'dayjs'
-import { getAngelValues } from '../utils/timePicker'
-import { type DatePickerValue } from '../types'
-import { type onChangePayload } from '../packages/TimePicker/TimePicker.types'
-
-interface useTimePickerType {
-  timeConvention?: 'am' | 'pm'
-  clockTime?: 24 | 12
-  defaultValue?: DatePickerValue
-  onChange?: (payload: onChangePayload) => void
-}
-export const useTimePicker = ({
-  defaultValue,
-  clockTime,
-  timeConvention,
-  onChange
-}: useTimePickerType) => {
-  const time =
-    defaultValue !== undefined ? dayjs(defaultValue) : dayjs().startOf('date')
-  const [selecting, setSelecting] = useState<boolean>(false)
-  const [selectingHour, setSelectingHour] = useState<boolean>(false)
-  const [isInsideHour, setInsideHour] = useState<boolean>(false)
-  const hourFormat = clockTime === 24 ? 'HH' : 'h'
-  const [hour, setHour] = useState<number>(
-    parseInt(time.format(hourFormat), 10)
-  )
-  const [minute, setMinute] = useState<number>(parseInt(time.format('mm'), 10))
-
-  const handleChangeMinute = (e: React.MouseEvent | React.TouchEvent) => {
-    const { value } = getAngelValues(e, 6)
-    setMinute(value)
-  }
-  const handleChangeHour = (e: React.MouseEvent | React.TouchEvent) => {
-    const { value, delta } = getAngelValues(e)
-    if (clockTime === 24) {
-      if (Math.round(delta) < 85) {
-        setHour(value)
-        setInsideHour(true)
-      } else {
-        setHour(value + 12)
-        setInsideHour(false)
-      }
-      return
-    }
-    setHour(value)
-  }
-  const handleMouseMove = (e: React.MouseEvent) => {
-    e.preventDefault()
-    if (!selecting) {
-      return
-    }
-    if (selectingHour) {
-      return handleChangeHour(e)
-    }
-    return handleChangeMinute(e)
-  }
-  const handleSelecting = (e: React.MouseEvent | React.TouchEvent) => {
-    setSelecting(true)
-    if (selectingHour) {
-      return handleChangeHour(e)
-    } else {
-      return handleChangeMinute(e)
-    }
-  }
-
-  const handleMouseUp = () => {
-    if (selectingHour) {
-      if (typeof onChange === 'function') {
-        onChange({
-          hour,
-          minute,
-          ...(clockTime === 12 && { timeConvention })
-        })
-      }
-      setSelecting(false)
-      setSelectingHour(false)
-      setInsideHour(false)
-      return
-    }
-    setSelecting(false)
-    setSelectingHour(true)
-  }
-
-  return {
-    hour,
-    minute,
-    isInsideHour,
-    selectingHour,
-    handleMouseMove,
-    handleMouseUp,
-    handleSelecting
-  }
-}

package/src/index.tsx

@@ -1,4 +0,0 @@
-export { default as DatePicker } from './packages/DatePicker'
-export { default as CalendarProvider } from './packages/CalendarProvider'
-export { default as Calendar } from './packages/Calendar'
-export { default as TimePicker } from './packages/TimePicker'

package/src/packages/Calendar/Calendar.styled.tsx

@@ -1,42 +0,0 @@
-import styled from '@emotion/styled'
-import { CALENDAR_HEIGHT, CALENDAR_WIDTH } from '../../constants'
-import { radius } from '../../style/radius'
-
-export const Wrapper = styled.div`
-  overflow: hidden;
-  position: relative;
-  width: ${CALENDAR_WIDTH}px;
-  height: ${CALENDAR_HEIGHT}px;
-  border: 1px solid ${(props) => props.theme.colors.gray[40]};
-  background-color: #fff;
-  border-radius: ${(props) => radius[props.theme.round].wrapper}px;
-`
-
-export const WrapperDays = styled.div`
-  display: flex;
-  position: absolute;
-  overflow: hidden;
-  right: ${(props) => (props.theme.direction === 'rtl' ? '8px' : 'unset')};
-  left: ${(props) => (props.theme.direction !== 'rtl' ? '8px' : 'unset')};
-`
-
-export const SlideDays = styled.div`
-  will-change: transform;
-  display: flex;
-  flex-direction: column;
-  width: ${CALENDAR_WIDTH}px;
-  gap: 4px;
-`
-export const Days = styled.div`
-  display: flex;
-  gap: 4px;
-`
-export const SubHeader = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-top: 12px;
-  margin-bottom: 8px;
-  height: 24px;
-  gap: 4px;
-`

package/src/packages/Calendar/Calendar.tsx

@@ -1,159 +0,0 @@
-import React, {
-  type ForwardedRef,
-  forwardRef,
-  useMemo,
-  useRef,
-  useState
-} from 'react'
-import {
-  Days,
-  SlideDays,
-  SubHeader,
-  Wrapper,
-  WrapperDays
-} from './Calendar.styled'
-import Header from '../../components/Header'
-import { useSlideCalendar } from '../../hooks/useSlideCalendar'
-import CalendarItem from '../../components/CalendarItem'
-import {
-  isInBetween,
-  sameDay,
-  selectMonth,
-  selectYear
-} from '../../utils/dateHelper/dateHelper'
-import formatDate from '../../utils/format'
-import getDays from '../../utils/month'
-import MonthPicker from '../../components/MonthPicker'
-import YearPicker from '../../components/YearPicker'
-import { DayName } from '../../components/Header/Header.styled'
-import locales from '../../utils/locales'
-import localeCache from '../../utils/locale'
-import type { DaysInMonth } from '../../utils/month/month.types'
-import type { CalendarProps } from './Calendar.types'
-import type { Pickers } from '../../types'
-import useCalendarHandlers from '../../hooks/useCalendarHandlers'
-import { CalendarText } from '../../components/CalendarItem/CalendarItem.styled'
-import { DaysButton } from '../../style/classNames'
-
-const Calendar = (props: CalendarProps, ref: ForwardedRef<HTMLDivElement>) => {
-  const { locale } = localeCache
-  const { defaultValue, weekends, range = false } = props
-  const startDate = defaultValue === undefined ? new Date() : defaultValue
-  // memo
-  const getAllDays = useMemo(() => getDays(defaultValue), [])
-  // states
-  const [days, setDays] = useState<DaysInMonth[]>([getAllDays])
-  const [picker, setPicker] = useState<Pickers>('days')
-  // refs
-  const daysElementRefs = useRef<HTMLDivElement[]>([])
-  // handlers
-  const slideHandlers = useSlideCalendar({
-    daysElementRefs,
-    days,
-    setDays
-  })
-  const { from, to, handlers } = useCalendarHandlers(props)
-
-  const togglePickers = () => {
-    if (picker === 'month' || picker === 'year') {
-      setPicker('days')
-      return
-    }
-    setPicker('year')
-  }
-  const handleNextMonth = () => {
-    if (picker === 'days') {
-      return slideHandlers.slideToTheNextMonth()
-    }
-  }
-  const handlePrevMonth = () => {
-    if (picker === 'days') {
-      return slideHandlers.slideToPrevMonth()
-    }
-  }
-  const handleMonthSelect = (month: number) => {
-    const date = selectMonth(days[0].middleOfMonth, month)
-    setDays([getDays(date)])
-    setPicker('days')
-  }
-  const handleYearSelect = (year: number) => {
-    const date = selectYear(startDate, year)
-    setDays([getDays(date)])
-    setPicker('month')
-  }
-  return (
-    <Wrapper
-      ref={ref}
-      className={props.className !== null ? props.className : ''}
-    >
-      <Header
-        monthName={days[0].monthName}
-        onNextClick={handleNextMonth}
-        onPrevClick={handlePrevMonth}
-        onClickOnTitle={togglePickers}
-      />
-      {picker === 'year' ? (
-        <YearPicker value={startDate} onYearSelect={handleYearSelect} />
-      ) : null}
-      {picker === 'month' ? (
-        <MonthPicker value={startDate} onMonthSelect={handleMonthSelect} />
-      ) : null}
-      {picker === 'days' ? (
-        <>
-          <SubHeader>
-            {locales[locale].shortWeekDays.map((day) => (
-              <DayName key={day.key}>{day.name}</DayName>
-            ))}
-          </SubHeader>
-          <WrapperDays>
-            {days.map((weeks, idx) => (
-              <SlideDays
-                key={weeks.id}
-                className="item"
-                ref={(el: HTMLDivElement) => {
-                  daysElementRefs.current[idx] = el
-                }}
-                role="rowgroup"
-              >
-                {weeks.weeks.map((week, id) => (
-                  <Days key={id} role="row" aria-rowindex={id + 1}>
-                    {week.map((day, idx) => (
-                      <CalendarItem
-                        key={day.date.getTime()}
-                        className={DaysButton}
-                        data-value={day.date}
-                        data-disabled={day.disabled}
-                        data-range={props.range}
-                        data-selected={!range && sameDay(startDate, day.date)}
-                        data-start-range={
-                          from != null && sameDay(from, day.date)
-                        }
-                        data-in-range={isInBetween(day.date, from, to)}
-                        data-end-range={to != null && sameDay(to, day.date)}
-                        data-weekend={weekends?.some((wDay) => wDay === idx)}
-                        type="button"
-                        role="gridcell"
-                        aria-colindex={idx + 1}
-                        tabIndex={0}
-                        aria-selected={!range && sameDay(startDate, day.date)}
-                        {...handlers}
-                      >
-                        <CalendarText className="cl-text">
-                          {formatDate(day.date, 'DD')}
-                        </CalendarText>
-                      </CalendarItem>
-                    ))}
-                  </Days>
-                ))}
-              </SlideDays>
-            ))}
-          </WrapperDays>
-        </>
-      ) : null}
-    </Wrapper>
-  )
-}
-
-Calendar.displayName = 'Calendar'
-
-export default forwardRef(Calendar)

package/src/packages/Calendar/Calendar.types.ts

@@ -1,31 +0,0 @@
-import type {
-  DaysRange,
-  DatePickerValue,
-  onRangeDatePickerChangePayload,
-  onDatePickerChangePayload
-} from '../../types'
-
-export interface CalendarBaseProps {
-  defaultValue?: Date
-  weekends?: DaysRange[]
-  className?: string
-}
-export interface CalendarRangeProps {
-  range: true
-  from?: DatePickerValue
-  to?: DatePickerValue
-  rangeValue?: Date[]
-  onChange?: (args: onRangeDatePickerChangePayload) => void
-}
-
-export interface CalendarDefaultProps {
-  range?: false | undefined
-  onChange?: (args: onDatePickerChangePayload) => void
-}
-
-export type OnChangePayload =
-  | onRangeDatePickerChangePayload
-  | onDatePickerChangePayload
-
-export type CalendarProps = CalendarBaseProps &
-  (CalendarRangeProps | CalendarDefaultProps)

package/src/packages/Calendar/CalendarComponent.cy.tsx

@@ -1,69 +0,0 @@
-import React from 'react'
-import Calendar from './Calendar'
-import { CalendarProvider } from '../../index'
-import {
-  DaysButton,
-  HeaderClass,
-  IconNextButton,
-  IconPrevButton,
-  YearPickerButton
-} from '../../style/classNames'
-
-describe('Calendar Component', () => {
-  it('renders', () => {
-    const initialDate = '1994 08 09'
-    cy.mount(
-      <CalendarProvider locale={'fa'}>
-        <Calendar defaultValue={new Date(initialDate)} onChange={() => {}} />
-      </CalendarProvider>
-    )
-      .get(`.${HeaderClass}`)
-      .findByText('مرداد ۱۳۷۳')
-      .get(`.${DaysButton}[aria-selected=true]`)
-      .should('have.text', '۱۸')
-  })
-  it('renders en locale', () => {
-    const initialDate = '1994 08 09'
-    cy.mount(
-      <CalendarProvider locale={'en'}>
-        <Calendar defaultValue={new Date(initialDate)} onChange={() => {}} />
-      </CalendarProvider>
-    )
-      .get(`.${HeaderClass}`)
-      .findByText('Aug 1994')
-      .get(`.${DaysButton}[aria-selected=true]`)
-      .should('have.text', '9')
-  })
-  it('scenario 1 choose the year and the month', () => {
-    const initialDate = '1994 08 09'
-    // going to Year and Month Picker state
-    cy.mount(
-      <CalendarProvider locale={'fa'}>
-        <Calendar defaultValue={new Date(initialDate)} onChange={() => {}} />
-      </CalendarProvider>
-    )
-      .get(`.${HeaderClass}`)
-      .click()
-      .get(`.${YearPickerButton}[aria-selected=true]`)
-      .should('have.text', '۱۳۷۳')
-    // change the year
-    cy.findByText('۱۴۰۲').click()
-    // click on the current month
-    cy.findByText('مرداد').click()
-    // now year should be changed
-    cy.get(`.${HeaderClass}`).should('have.text', 'مرداد ۱۴۰۲')
-    // go to previous month
-    cy.get(`.${IconPrevButton}`).click()
-    // now month should be changed
-    cy.get(`.${HeaderClass}`).should('have.text', 'تیر ۱۴۰۲')
-    cy.wait(300)
-    // go to previous month
-    cy.get(`.${IconNextButton}`).click()
-    // now month should be changed
-    cy.get(`.${HeaderClass}`).should('have.text', 'مرداد ۱۴۰۲')
-    // go to previous month
-    cy.get(`.${IconNextButton}`).click()
-    // now month should be changed
-    cy.get(`.${HeaderClass}`).should('have.text', 'شهریور ۱۴۰۲')
-  })
-})

package/src/packages/Calendar/index.ts

@@ -1,2 +0,0 @@
-export { default } from './Calendar'
-export type { CalendarProps } from './Calendar.types'