zaman-backoffice 1.0.1 → 1.0.2

package/src/components/FloatingElement/FloatingElement.tsx

@@ -0,0 +1,83 @@
+import React, { useEffect, useRef } from 'react'
+import { createPortal } from 'react-dom'
+import debounce from 'lodash.debounce'
+import type { FloatingElementProps } from './FloatingElement.types'
+import type { Positions } from '../../types'
+import { Wrapper } from './FloatingElement.styled'
+
+const FloatingElement: React.FC<FloatingElementProps> = (props) => {
+  const { children, destinationRef, position } = props
+  const floatWrapperRef = useRef<HTMLDivElement>(null)
+
+  const calcPlacement = () => {
+    const gap = 4
+    let top = 0
+
+    if (destinationRef != null && floatWrapperRef !== null) {
+      const floatWrapper = floatWrapperRef.current
+      if (floatWrapper === null) {
+        return
+      }
+      const {
+        top: destTop,
+        bottom: destBottom,
+        right: destRight,
+        left: destLeft,
+        width: destWidth
+      } = destinationRef?.current?.getBoundingClientRect() as DOMRect
+      const { height: itemsHeight, width: floatWidth } =
+        floatWrapper?.getBoundingClientRect()
+      const isThereSpaceBelowDest =
+        window.innerHeight - destBottom > itemsHeight
+
+      if (isThereSpaceBelowDest) {
+        top = destBottom + window.scrollY
+      } else {
+        top = destTop + window.scrollY - itemsHeight - gap * 2
+      }
+      floatWrapper.style.top = `${top + gap}px`
+
+      const positionsCalc: Record<Positions, () => void> = {
+        right: () => {
+          floatWrapper.style.right = `${
+            Math.abs(document.body.clientWidth - destRight) + 16
+          }px`
+        },
+        left: () => {
+          floatWrapper.style.left = `${destLeft}px`
+        },
+        center: () => {
+          const isDestBiggerThanFloatElement = floatWidth > destWidth
+          const remainWidth = isDestBiggerThanFloatElement
+            ? 0
+            : Math.abs(floatWidth - destWidth) / 2 + 16
+          floatWrapper.style.right = `${
+            Math.abs(document.body.clientWidth - destRight) + remainWidth
+          }px`
+        }
+      }
+
+      positionsCalc[position]()
+    }
+  }
+
+  useEffect(() => {
+    calcPlacement()
+    window.addEventListener('resize', debounce(calcPlacement, 500))
+
+    return () => {
+      window.removeEventListener('resize', calcPlacement)
+    }
+  }, [destinationRef])
+
+  return (
+    <>
+      {createPortal(
+        <Wrapper ref={floatWrapperRef}>{children}</Wrapper>,
+        document.body
+      )}
+    </>
+  )
+}
+
+export default FloatingElement

package/src/components/FloatingElement/FloatingElement.types.ts

@@ -0,0 +1,8 @@
+import type React from 'react'
+import type { Positions } from '../../types'
+
+export interface FloatingElementProps {
+  children: React.ReactNode
+  destinationRef: React.RefObject<HTMLInputElement>
+  position: Positions
+}

package/src/components/FloatingElement/index.tsx

@@ -0,0 +1 @@
+export { default } from './FloatingElement'

package/src/components/Header/Header.styled.tsx

@@ -0,0 +1,40 @@
+import styled from '@emotion/styled'
+import { radius } from '../../style/radius'
+
+export const Wrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 56px;
+  padding-right: 8px;
+  padding-left: 8px;
+  background-color: ${(props) => props.theme.colors.primary[95]};
+  border-bottom: 2px solid ${(props) => props.theme.colors.primary[85]};
+`
+export const HeaderTitle = styled.button`
+  will-change: auto;
+  min-width: 100px;
+  outline: none;
+  border: 0;
+  font-family: inherit;
+  background-color: transparent;
+  cursor: pointer;
+  color: ${(props) => props.theme.colors.primary[50]};
+  padding: 8px 16px;
+  font-weight: 500;
+  transition: background-color 0.2s ease-in;
+  border-radius: ${(props) => radius[props.theme.round].calendarItem}px;
+
+  &:hover,
+  &:focus {
+    background-color: ${(props) => props.theme.colors.primary[90]};
+  }
+`
+export const DayName = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+  width: 40px;
+  color: #8c8c8c;
+`

package/src/components/Header/Header.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import IconButton from '../IconButton'
+import ChevronRight from '../Icons/ChevronRight'
+import ChevronLeft from '../Icons/ChevronLeft'
+import { Wrapper, HeaderTitle } from './Header.styled'
+import type { HeaderProps } from './Header.types'
+import {
+  HeaderClass,
+  IconNextButton,
+  IconPrevButton,
+  MonthYearButton
+} from '../../style/classNames'
+
+export const Header = (props: HeaderProps) => {
+  return (
+    <Wrapper className={HeaderClass}>
+      <IconButton
+        aria-label="Previous month"
+        onClick={props.onPrevClick}
+        className={IconPrevButton}
+        tabIndex={0}
+      >
+        <ChevronRight />
+      </IconButton>
+      <HeaderTitle
+        className={MonthYearButton}
+        role="presentation"
+        onClick={props.onClickOnTitle}
+        aria-label="calendar view is open, switch to year and month view"
+        tabIndex={0}
+      >
+        {props.monthName}
+      </HeaderTitle>
+      <IconButton
+        aria-label="Next month"
+        onClick={props.onNextClick}
+        className={IconNextButton}
+        tabIndex={0}
+      >
+        <ChevronLeft />
+      </IconButton>
+    </Wrapper>
+  )
+}
+
+export default Header

package/src/components/Header/Header.types.ts

@@ -0,0 +1,6 @@
+export interface HeaderProps {
+  monthName: string
+  onNextClick: () => void
+  onPrevClick: () => void
+  onClickOnTitle: () => void
+}

package/src/components/Header/index.ts

@@ -0,0 +1 @@
+export { default } from './Header'

package/src/components/IconButton/IconButton.styled.tsx

@@ -0,0 +1,22 @@
+import styled from '@emotion/styled'
+import { radius } from '../../style/radius'
+
+export const IconButton = styled.button`
+  cursor: pointer;
+  outline: none;
+  border: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  transition: background-color 0.2s ease-in;
+  color: ${(props) => props.theme.colors.primary[50]};
+  background-color: transparent;
+  border-radius: ${(props) => radius[props.theme.round].calendarItem}px;
+
+  &:hover,
+  &:focus {
+    background-color: ${(props) => props.theme.colors.primary[90]};
+  }
+`

package/src/components/IconButton/IconButton.tsx

@@ -0,0 +1,3 @@
+import { IconButton } from './IconButton.styled'
+
+export default IconButton

package/src/components/IconButton/index.tsx

@@ -0,0 +1 @@
+export { default } from './IconButton'

package/src/components/Icons/ChevronLeft/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { isRtl } from '../../../utils'
+
+export const ChevronLeft = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="feather feather-chevron-left"
+    style={{ transform: isRtl() ? 'unset' : 'rotate(180deg)' }}
+  >
+    <polyline points="15 18 9 12 15 6"></polyline>
+  </svg>
+)
+
+export default ChevronLeft

package/src/components/Icons/ChevronRight/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { isRtl } from '../../../utils'
+
+export const ChevronRight = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="feather feather-chevron-right"
+    style={{ transform: isRtl() ? 'unset' : 'rotate(180deg)' }}
+  >
+    <polyline points="9 18 15 12 9 6"></polyline>
+  </svg>
+)
+
+export default ChevronRight

package/src/components/Modal/Modal.styled.tsx

@@ -0,0 +1,23 @@
+import styled from '@emotion/styled'
+
+export const ModalDiv = styled.div`
+  position: fixed;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  top: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+
+  .rdp__overlay {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -10;
+    background-color: rgba(86, 86, 86, 0.4);
+  }
+`

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import type { IModalProps } from './types'
+import { ModalDiv } from './Modal.styled'
+import { createPortal } from 'react-dom'
+
+export const Modal = (props: IModalProps) => {
+  const { open, toggleOpen, children } = props
+
+  if (open === false) {
+    return null
+  }
+  return (
+    <>
+      {createPortal(
+        <ModalDiv className="rdp__modal">
+          {children}
+          <div
+            data-testid="overlay"
+            className="rdp__overlay"
+            onClick={toggleOpen}
+          />
+        </ModalDiv>,
+        document.body
+      )}
+    </>
+  )
+}
+
+export default Modal

package/src/components/Modal/index.tsx

@@ -0,0 +1 @@
+export { default } from './Modal'

package/src/components/Modal/types.ts

@@ -0,0 +1,7 @@
+import type * as React from 'react'
+
+export interface IModalProps {
+  open?: boolean
+  children: React.ReactNode
+  toggleOpen: () => void
+}

package/src/components/MonthPicker/Month.styled.tsx

@@ -0,0 +1,11 @@
+import styled from '@emotion/styled'
+import { CALENDAR_WIDTH } from '../../constants'
+
+export const Wrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px;
+  height: ${CALENDAR_WIDTH}px;
+`

package/src/components/MonthPicker/MonthPicker.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import localeCache from '../../utils/locale'
+import locales from '../../utils/locales'
+import CalendarItem from '../CalendarItem'
+import { Wrapper } from './Month.styled'
+import formatDate from '../../utils/format'
+import type { MonthPickerProps } from './MonthPicker.types'
+import { MonthPickerButton } from '../../style/classNames'
+
+export const MonthPicker = (props: MonthPickerProps) => {
+  const { locale } = localeCache
+  const currentMonth = formatDate(props.value, 'MM', 'latn')
+
+  return (
+    <Wrapper>
+      {locales[locale].months.map((month) => (
+        <CalendarItem
+          key={month.key}
+          className={MonthPickerButton}
+          width={90}
+          height={48}
+          data-selected={month.key === parseInt(currentMonth, 10)}
+          onClick={() => props.onMonthSelect(month.key)}
+          aria-current="date"
+          type="button"
+          tabIndex={0}
+        >
+          {month.name}
+        </CalendarItem>
+      ))}
+    </Wrapper>
+  )
+}
+
+export default MonthPicker

package/src/components/MonthPicker/MonthPicker.types.ts

@@ -0,0 +1,4 @@
+export interface MonthPickerProps {
+  value: Date
+  onMonthSelect: (month: number) => void
+}

package/src/components/MonthPicker/index.ts

@@ -0,0 +1 @@
+export { default } from './MonthPicker'

package/src/components/RenderCalendar/RenderCalendar.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { type RenderCalendarProps } from './RenderCalendar.types'
+import FloatingElement from '../FloatingElement'
+import Modal from '../Modal'
+
+export const RenderCalendar = (props: RenderCalendarProps) => {
+  const { position = 'right' } = props
+  if (!props.showCalendar) {
+    return null
+  }
+  const { matches: isDesktop } = window.matchMedia('(min-width: 640px)')
+
+  if (isDesktop) {
+    return (
+      <FloatingElement
+        destinationRef={props.destinationRef}
+        position={position}
+      >
+        {props.children}
+      </FloatingElement>
+    )
+  }
+
+  return (
+    <Modal toggleOpen={props.toggleOpen} open={props.showCalendar}>
+      {props.children}
+    </Modal>
+  )
+}
+
+export default RenderCalendar

package/src/components/RenderCalendar/RenderCalendar.types.ts

@@ -0,0 +1,10 @@
+import type React from 'react'
+import type { Positions } from '../../types'
+
+export interface RenderCalendarProps {
+  showCalendar: boolean
+  toggleOpen: () => void
+  children: React.ReactNode
+  destinationRef: React.RefObject<HTMLInputElement>
+  position?: Positions
+}

package/src/components/RenderCalendar/index.ts

@@ -0,0 +1 @@
+export { default } from './RenderCalendar'

package/src/components/YearPicker/YearPicker.styled.tsx

@@ -0,0 +1,14 @@
+import styled from '@emotion/styled'
+import { CALENDAR_WIDTH } from '../../constants'
+
+export const Wrapper = styled.div`
+  display: grid;
+  grid-template-columns: repeat(3, 92px);
+  grid-template-rows: auto;
+  justify-content: center;
+  gap: 4px;
+  max-height: ${CALENDAR_WIDTH}px;
+  overflow: auto;
+  padding-top: 8px;
+  padding-bottom: 8px;
+`

package/src/components/YearPicker/YearPicker.tsx

@@ -0,0 +1,49 @@
+import React, { useMemo } from 'react'
+import CalendarItem from '../CalendarItem'
+import { Wrapper } from './YearPicker.styled'
+import { getYears } from '../../utils/dateHelper/dateHelper'
+import formatDate from '../../utils/format'
+import type { YearPickerProps } from './YearPicker.types'
+import { localizeNumber } from '../../utils'
+import { YearPickerButton } from '../../style/classNames'
+
+export const YearPicker = (props: YearPickerProps) => {
+  const currentYear = parseInt(formatDate(props.value, 'YYYY', 'latn'), 10)
+  const years: number[] = useMemo(() => getYears(props.value), [])
+
+  const wrapperRef = React.useCallback((wrapper: HTMLDivElement) => {
+    if (wrapper === null) {
+      return
+    }
+    const qu = wrapper.querySelector('button[data-selected=true]')
+    if (qu != null) {
+      const { height: wrapperHeight, top: wrapperTop } =
+        wrapper.getBoundingClientRect()
+      const { top } = qu.getBoundingClientRect()
+      wrapper.scrollTop = Math.abs(wrapperTop - top) - wrapperHeight / 2
+    }
+  }, [])
+
+  return (
+    <Wrapper ref={wrapperRef}>
+      {years.map((year) => (
+        <CalendarItem
+          className={YearPickerButton}
+          key={year}
+          width={90}
+          height={48}
+          data-selected={currentYear === year}
+          aria-selected={currentYear === year}
+          aria-current="date"
+          type="button"
+          tabIndex={0}
+          onClick={() => props.onYearSelect(year)}
+        >
+          {localizeNumber(year)}
+        </CalendarItem>
+      ))}
+    </Wrapper>
+  )
+}
+
+export default YearPicker

package/src/components/YearPicker/YearPicker.types.ts

@@ -0,0 +1,4 @@
+export interface YearPickerProps {
+  value: Date
+  onYearSelect: (year: number) => void
+}

package/src/components/YearPicker/index.ts

@@ -0,0 +1 @@
+export { default } from './YearPicker'

package/src/constants.ts

@@ -0,0 +1,6 @@
+export const TIME = 250
+export const CALENDAR_WIDTH = 320
+export const CALENDAR_HEIGHT = 372
+export const ANIMATE_FUNC = 'cubic-bezier(0.4, 0, 0.2, 1)'
+
+export const ACCENT_COLOR = '#0D59F2'

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

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

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