zaman-backoffice 1.0.2 → 1.0.3

package/src/components/FloatingElement/FloatingElement.tsx

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

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

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

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

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

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

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

package/src/components/Header/index.ts

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

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

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

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

package/src/components/IconButton/index.tsx

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

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

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

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

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

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

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

package/src/components/Modal/types.ts

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

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

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

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

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

package/src/components/MonthPicker/index.ts

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

package/src/components/RenderCalendar/RenderCalendar.tsx

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

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

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

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

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

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

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

package/src/components/YearPicker/index.ts

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

package/src/constants.ts

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

@@ -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