zaman-backoffice 1.0.2 → 1.0.4

package/src/components/CalendarItem/CalendarItem.styled.tsx

@@ -1,96 +0,0 @@
-import styled from '@emotion/styled'
-import type { CalendarItemProps } from './CalendarItem.types'
-import { radius } from '../../style/radius'
-
-export const CalendarText = styled.div`
-  color: inherit;
-`
-
-export const CalendarItem = styled.button<CalendarItemProps>`
-  position: relative;
-  outline: none;
-  background-color: transparent;
-  display: flex;
-  font-family: inherit;
-  align-items: center;
-  justify-content: center;
-  width: ${(props) => props.width}px;
-  height: ${(props) => props.height}px;
-  border: 1px solid transparent;
-  user-select: none;
-  color: ${(props) => props.theme.colors.gray[600]};
-  border-radius: ${(props) => radius[props.theme.round].calendarItem}px;
-
-  // pseudos
-  &:hover,
-  &:focus {
-    border-color: ${(props) => props.theme.colors.gray[50]};
-  }
-  &:active {
-    background-color: ${(props) => props.theme.colors.primary[40]};
-    border-color: transparent;
-    color: ${(props) => props.theme.colors.gray[0]};
-  }
-  // days picker
-  &[data-selected='true'] {
-    background-color: ${(props) => props.theme.colors.primary[50]};
-    border-color: transparent;
-    color: ${(props) => props.theme.colors.gray[0]};
-  }
-  &[data-disabled='true'] {
-    border-color: transparent;
-  }
-  &[data-disabled='true'] .cl-text {
-    opacity: 0.5;
-  }
-  &:not([data-range='true']) {
-    transition: all 0.1s linear;
-    border-radius: ${(props) => radius[props.theme.round].calendarItem}px;
-  }
-  &:not([data-selected='true'])&[data-weekend='true'] {
-    color: #ff4d4d;
-  }
-  &:not([data-disabled='true']) {
-    cursor: pointer;
-  }
-  // range picker
-  &[data-in-range='true'] {
-    background-color: ${(props) => props.theme.colors.primary[90]};
-    border-color: transparent;
-  }
-  &[data-start-range='true'] {
-    background-color: ${(props) => props.theme.colors.primary[40]};
-    color: ${(props) => props.theme.colors.gray[0]};
-    border-radius: ${(props) => radius[props.theme.round].calendarItem}px;
-    border-color: transparent;
-  }
-  &[data-end-range='true'] {
-    background-color: ${(props) => props.theme.colors.primary[40]};
-    color: ${(props) => props.theme.colors.gray[0]};
-    border-radius: ${(props) => radius[props.theme.round].calendarItem}px;
-    border-color: transparent;
-  }
-  &[data-in-range='true']:before,
-  &[data-end-range='true']:before {
-    content: ' ';
-    display: block;
-    position: absolute;
-    width: 40px;
-    height: 40px;
-    top: -1px;
-    left: ${(props) => (props.theme.direction === 'rtl' ? '20px' : 'unset')};
-    right: ${(props) => (props.theme.direction === 'rtl' ? 'unset' : '20px')};
-    background-color: ${(props) => props.theme.colors.primary[90]};
-    z-index: -1;
-  }
-  &[data-in-range='true']:nth-of-type(1):before,
-  &[data-start-range='true']:before {
-    display: none;
-  }
-`
-
-CalendarItem.defaultProps = {
-  width: 40,
-  height: 40
-}
-export default CalendarItem

package/src/components/CalendarItem/CalendarItem.types.ts

@@ -1,7 +0,0 @@
-export interface CalendarItemProps {
-  selected?: boolean
-  range?: boolean
-  disabled?: boolean
-  width?: number
-  height?: number
-}

package/src/components/CalendarItem/index.ts

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

package/src/components/CalendarWrapper/CalendarWrapper.styled.tsx

@@ -1,19 +0,0 @@
-import styled from '@emotion/styled'
-import { CALENDAR_HEIGHT, CALENDAR_WIDTH } from '../../constants'
-import { radius } from '../../style/radius'
-
-export const CalendarWrapper = styled.div`
-  overflow: hidden;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: ${CALENDAR_WIDTH}px;
-  min-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 default CalendarWrapper

package/src/components/CalendarWrapper/index.ts

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

package/src/components/FloatingElement/FloatingElement.styled.tsx

@@ -1,8 +0,0 @@
-import styled from '@emotion/styled'
-import { ANIMATE_FUNC } from '../../constants'
-import { slideDown } from '../../style/animation'
-
-export const Wrapper = styled.div`
-  position: absolute;
-  animation: ${slideDown} 0.3s ${ANIMATE_FUNC} alternate;
-`

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'