zaman-backoffice 1.0.0 → 1.0.2

package/src/hooks/useClickOutside.tsx

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,95 @@
+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

@@ -0,0 +1,95 @@
+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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,42 @@
+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

@@ -0,0 +1,159 @@
+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

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,69 @@
+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

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

package/src/packages/CalendarProvider/CalendarProvider.tsx

@@ -0,0 +1,30 @@
+import React, { useMemo } from 'react'
+import { ThemeProvider } from '@emotion/react'
+import { makeColorPallet } from '../../style/colorPallete'
+import { ACCENT_COLOR } from '../../constants'
+import localeCache from '../../utils/locale'
+import { gray } from '../../style/colors'
+import type { CalendarProviderProps } from './CalendarProvider.types'
+
+export const CalendarProvider = (props: CalendarProviderProps) => {
+  const {
+    accentColor = ACCENT_COLOR,
+    locale,
+    round = 'thin',
+    direction = 'rtl'
+  } = props
+  useMemo(() => localeCache.setLocale(locale), [locale])
+  const primaryColors = useMemo(() => makeColorPallet(accentColor), [])
+
+  const theme = {
+    colors: {
+      primary: primaryColors,
+      gray
+    },
+    round,
+    direction
+  }
+  return <ThemeProvider theme={theme}>{props.children}</ThemeProvider>
+}
+
+export default CalendarProvider

package/src/packages/CalendarProvider/CalendarProvider.types.ts

@@ -0,0 +1,6 @@
+import type React from 'react'
+import type { BaseProps } from '../../types'
+
+export interface CalendarProviderProps extends BaseProps {
+  children: React.ReactNode
+}

package/src/packages/CalendarProvider/index.ts

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

package/src/packages/DatePicker/DatePicker.cy.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import DatePicker from './DatePicker'
+import { HeaderClass } from '../../style/classNames'
+
+describe('<DatePicker />', () => {
+  const initialDate = '2023 04 25'
+  it('renders', () => {
+    const onChangeSpy = cy.spy().as('onChangeSpy')
+    cy.mount(<DatePicker defaultValue={initialDate} onChange={onChangeSpy} />)
+      .get('input')
+      .click()
+
+    // change the year
+    cy.get(`.${HeaderClass}`).click()
+    // click on the current month
+    cy.findByText('۱۴۰۲').click()
+    // click on the mordad month
+    cy.findByText('مرداد').click()
+    // click on the mordad month
+    cy.findByText('۱۸').click()
+    cy.get('@onChangeSpy').should('have.callCount', 1)
+    cy.get('@onChangeSpy').should('be.calledWith', { value: new Date('Tue, 08 Aug 2023 20:30:00 GMT') })
+    // now input's value should be changed
+    cy.get('input').should('have.value', '۱۴۰۲/۰۵/۱۸')
+  })
+  it('check range renders', () => {
+    const onChangeSpy = cy.spy().as('onChangeSpy')
+    cy.mount(<DatePicker defaultValue={initialDate} onChange={onChangeSpy} range />)
+      .get('input')
+      .click()
+
+    // change the year
+    cy.get(`.${HeaderClass}`).click()
+    // click on the current month
+    cy.findByText('۱۴۰۲').click()
+    // click on the mordad month
+    cy.findByText('مرداد').click()
+    // click on the mordad month
+    cy.findByText('۱۸').click()
+    // click on the mordad month
+    cy.findByText('۱۹').click()
+    cy.get('@onChangeSpy').should('have.callCount', 1)
+    cy.get('@onChangeSpy').should('be.calledWith', { from: new Date('Tue, 08 Aug 2023 20:30:00 GMT'), to: new Date('Tue, 09 Aug 2023 20:30:00 GMT') })
+  })
+  it('close the DatePicker ', () => {
+    const onChangeSpy = cy.spy().as('onChangeSpy')
+    cy.mount(<DatePicker defaultValue={initialDate} onChange={onChangeSpy} />)
+      .get('input')
+      .click()
+
+    cy.get('body').click()
+    cy.get(`.${HeaderClass}`).should('not.exist')
+  })
+})