zaman-backoffice 1.0.2 → 1.0.4

package/src/packages/CalendarProvider/CalendarProvider.tsx

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

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

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

@@ -1,54 +0,0 @@
-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')
-  })
-})

package/src/packages/DatePicker/DatePicker.tsx

@@ -1,127 +0,0 @@
-import React, {useEffect, useMemo, useRef, useState} from 'react'
-import RenderCalendar from '../../components/RenderCalendar'
-import Calendar from '../Calendar'
-import useClickOutside from '../../hooks/useClickOutside'
-import formatDate from '../../utils/format'
-import locales from '../../utils/locales'
-import type { DatePickerProps } from './DatePicker.types'
-import CalendarProvider from '../CalendarProvider/CalendarProvider'
-import localeCache from '../../utils/locale'
-import type { OnChangePayload } from '../Calendar/Calendar.types'
-
-export const DatePicker = (props: DatePickerProps) => {
-  const {
-    defaultValue,
-    locale = 'fa',
-    weekends = [],
-    direction = 'rtl',
-    accentColor,
-      controlledValue
-  } = props
-  useMemo(() => localeCache.setLocale(locale), [locale])
-  // refs
-  const inputRef = useRef<HTMLInputElement>(null)
-  const containerRef = useRef<HTMLDivElement>(null)
-  // states
-  const [value, setValue] = useState<Date | undefined>(
-    defaultValue !== undefined ? new Date(defaultValue) : undefined
-  )
-  const [from, setFrom] = useState<Date | undefined>(
-    props.range === true && props.from !== undefined
-      ? new Date(props.from)
-      : undefined
-  )
-  const [to, setTo] = useState<Date | undefined>(
-    props.range === true && props.to !== undefined
-      ? new Date(props.to)
-      : undefined
-  )
-  const [showCalendar, setShowCalendar] = useState<boolean>(false)
-  // hooks
-  useEffect(() => {
-    if(!controlledValue || controlledValue === value) return;
-    setValue(controlledValue as Date)
-  }, [controlledValue]);
-
-  useClickOutside(containerRef, () => setShowCalendar(false))
-  // handlers
-  const toggleShowCalendar = () => {
-    setShowCalendar(!showCalendar)
-  }
-
-  const handleChangeDay = (e: OnChangePayload) => {
-    if (props.range === true && typeof props.onChange === 'function') {
-      const from = 'from' in e ? e.from : new Date()
-      const to = 'to' in e ? e.to : new Date()
-      setFrom(from)
-      setTo(to)
-
-      props.onChange({
-        from,
-        to
-      })
-    } else if (
-      (props.range === false || props.range === undefined) &&
-      typeof props.onChange === 'function'
-    ) {
-      const value = 'value' in e ? e.value : new Date()
-      setValue(value)
-
-      props.onChange({
-        value
-      })
-    }
-  }
-
-  const getInputValue = useMemo(() => {
-    const format = props?.customShowDateFormat ?? locales[locale].format
-    if (props.range === undefined && value !== undefined) {
-      return formatDate(value, format)
-    }
-    console.log('from >>', from)
-    if (from !== undefined && to !== undefined) {
-      return `
-        ${formatDate(from, format)}
-        -
-        ${formatDate(to, format)}
-      `
-    }
-    return ''
-  }, [value, from, to])
-  return (
-    <CalendarProvider
-      accentColor={accentColor}
-      round={props.round}
-      direction={direction}
-    >
-      <input
-        ref={inputRef}
-        {...props?.inputAttributes}
-        onClick={toggleShowCalendar}
-        type="text"
-        value={getInputValue}
-        className={props.inputClass !== null ? props.inputClass : ''}
-        readOnly
-      />
-      <RenderCalendar
-        toggleOpen={toggleShowCalendar}
-        showCalendar={showCalendar}
-        destinationRef={inputRef}
-        position={props.position}
-      >
-        <Calendar
-          defaultValue={value}
-          ref={containerRef}
-          className={props.className}
-          weekends={weekends}
-          onChange={handleChangeDay}
-          range={props.range}
-          from={props.range === true ? props.from : undefined}
-          to={props.range === true ? props.to : undefined}
-        />
-      </RenderCalendar>
-    </CalendarProvider>
-  )
-}
-
-export default DatePicker

package/src/packages/DatePicker/DatePicker.types.ts

@@ -1,26 +0,0 @@
-import type { InputHTMLAttributes } from 'react'
-import type {
-  BaseProps,
-  DatePickerValue,
-  DaysRange,
-  Positions
-} from '../../types'
-import type {
-  CalendarDefaultProps,
-  CalendarRangeProps
-} from '../Calendar/Calendar.types'
-
-export interface DatePickerBaseProps extends BaseProps {
-  defaultValue?: DatePickerValue
-  weekends?: DaysRange[]
-  show?: boolean
-  inputClass?: string
-  className?: string
-  inputAttributes?: InputHTMLAttributes<HTMLInputElement>
-  position?: Positions
-  customShowDateFormat?: string
-  controlledValue? : DatePickerValue
-}
-
-export type DatePickerProps = DatePickerBaseProps &
-  (CalendarRangeProps | CalendarDefaultProps)

package/src/packages/DatePicker/index.ts

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

package/src/packages/TimePicker/TimePicker.styled.tsx

@@ -1,77 +0,0 @@
-import styled from '@emotion/styled'
-import { radius } from '../../style/radius'
-
-export const Clock = styled.div`
-  width: 260px;
-  height: 260px;
-  position: relative;
-  z-index: 1;
-  border-radius: 50%;
-  background-color: ${(props) => props.theme.colors.primary[95]};
-`
-
-export interface IStyledHandProps {
-  hour: number
-  minute: number
-  value: number
-  isInsideHour: boolean
-  isSelectingHour: boolean
-}
-
-export const Hand = styled('div')<IStyledHandProps>`
-  left: 50%;
-  width: 1.5px;
-  bottom: 50%;
-  height: ${(props) => (props.isInsideHour ? '26%' : '40%')};
-  position: absolute;
-  background-color: ${(props) => props.theme.colors.primary[85]};
-  transform-origin: center bottom 0;
-  transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  pointer-events: none;
-  ${(props) =>
-    props.isSelectingHour
-      ? `transform: ${`rotateZ(${(props.value / 12) * 360}deg)`}; `
-      : `transform: ${`rotateZ(${(props.value / 60) * 360}deg)`}; `}
-`
-
-export const HandCircle = styled('div')<{ isSelectingHour: boolean }>`
-  top: -22px;
-  right: -16px;
-  border: 16px solid ${(props) => props.theme.colors.primary[85]};
-  position: absolute;
-  box-sizing: content-box;
-  border-radius: 100%;
-  background-color: ${(props) => props.theme.colors.primary[85]};
-  pointer-events: none;
-`
-
-export const TimeWrapper = styled.div`
-  position: absolute;
-  top: 16px;
-  left: 16px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-`
-
-export const Time = styled.div`
-  padding: 4px 8px;
-  border-radius: ${(props) => radius[props.theme.round].calendarItem}px;
-  background-color: ${(props) => props.theme.colors.gray[20]};
-`
-
-export const ClockTimeWrapper = styled.div`
-  display: flex;
-  gap: 4px;
-`
-
-export const ClockTime = styled.div`
-  cursor: pointer;
-  font-size: 12px;
-  padding: 4px;
-  border-radius: 4px;
-
-  &.cl_selected {
-    background-color: ${(props) => props.theme.colors.gray[20]};
-  }
-`

package/src/packages/TimePicker/TimePicker.tsx

@@ -1,121 +0,0 @@
-import React, { useMemo, useRef, useState } from 'react'
-import RenderCalendar from '../../components/RenderCalendar'
-import {
-  Clock,
-  ClockTime,
-  ClockTimeWrapper,
-  Hand,
-  HandCircle,
-  Time,
-  TimeWrapper
-} from './TimePicker.styled'
-import CalendarProvider from '../CalendarProvider/CalendarProvider'
-import Numbers from './components/Numbers'
-import type { TimePickerProps } from './TimePicker.types'
-import localeCache from '../../utils/locale'
-import CalendarWrapper from '../../components/CalendarWrapper'
-import { localizeNumber } from '../../utils'
-import locales from '../../utils/locales'
-import useClickOutside from '../../hooks/useClickOutside'
-import { useTimePicker } from '../../hooks/useTimePicker'
-
-export const TimePicker = (props: TimePickerProps) => {
-  const {
-    defaultValue,
-    onChange,
-    round = 'x2',
-    locale = 'fa',
-    clockTime = 24
-  } = props
-  useMemo(() => localeCache.setLocale(locale), [locale])
-
-  const inputRef = useRef<HTMLInputElement>(null)
-  const containerRef = useRef<HTMLDivElement>(null)
-
-  const [showCalendar, setShowCalendar] = useState<boolean>(false)
-  const [timeConvention, setTimeConvention] = useState<'am' | 'pm'>('am')
-
-  useClickOutside(containerRef, () => setShowCalendar(false))
-  const toggleShowCalendar = () => {
-    setShowCalendar(!showCalendar)
-  }
-  const {
-    hour,
-    minute,
-    isInsideHour,
-    selectingHour,
-    handleMouseMove,
-    handleMouseUp,
-    handleSelecting
-  } = useTimePicker({ defaultValue, clockTime, timeConvention, onChange })
-
-  const getInputValue = useMemo(() => {
-    return `${hour}:${minute}`
-  }, [hour, minute])
-  return (
-    <CalendarProvider accentColor={props.accentColor} round={round}>
-      <input
-        ref={inputRef}
-        {...props?.inputAttributes}
-        onClick={toggleShowCalendar}
-        type="text"
-        value={getInputValue}
-        className={props.inputClass !== null ? props.inputClass : ''}
-        readOnly
-      />
-      <RenderCalendar
-        toggleOpen={toggleShowCalendar}
-        showCalendar={showCalendar}
-        destinationRef={inputRef}
-      >
-        <CalendarWrapper ref={containerRef}>
-          <TimeWrapper>
-            {clockTime === 12 ? (
-              <ClockTimeWrapper>
-                <ClockTime
-                  className={timeConvention === 'am' ? 'cl_selected' : ''}
-                  onClick={() => setTimeConvention('am')}
-                >
-                  {locales[locale].am}
-                </ClockTime>
-                <ClockTime
-                  className={timeConvention === 'pm' ? 'cl_selected' : ''}
-                  onClick={() => setTimeConvention('pm')}
-                >
-                  {locales[locale].pm}
-                </ClockTime>
-              </ClockTimeWrapper>
-            ) : null}
-            <Time>
-              {localizeNumber(hour)}:{localizeNumber(minute)}
-            </Time>
-          </TimeWrapper>
-          <Clock
-            onMouseMove={handleMouseMove}
-            onMouseUp={handleMouseUp}
-            onMouseDown={handleSelecting}
-            onTouchMove={handleSelecting}
-            onTouchEnd={handleMouseUp}
-          >
-            <Hand
-              value={selectingHour ? hour : minute}
-              hour={hour}
-              minute={minute}
-              isSelectingHour={selectingHour}
-              isInsideHour={isInsideHour}
-            >
-              <HandCircle isSelectingHour={selectingHour} />
-            </Hand>
-            <Numbers
-              insideHour={isInsideHour}
-              hourSelecting={selectingHour}
-              clockTime={clockTime}
-            />
-          </Clock>
-        </CalendarWrapper>
-      </RenderCalendar>
-    </CalendarProvider>
-  )
-}
-
-export default TimePicker

package/src/packages/TimePicker/TimePicker.types.ts

@@ -1,16 +0,0 @@
-import type { InputHTMLAttributes } from 'react'
-import type { BaseProps, DatePickerValue } from '../../types'
-
-export interface onChangePayload {
-  hour: number
-  minute: number
-  timeConvention?: 'am' | 'pm'
-}
-
-export interface TimePickerProps extends BaseProps {
-  defaultValue?: DatePickerValue
-  clockTime?: 12 | 24
-  onChange?: (payload: onChangePayload) => void
-  inputClass?: string
-  inputAttributes?: InputHTMLAttributes<HTMLInputElement>
-}

package/src/packages/TimePicker/components/Numbers/Numbers.styled.tsx

@@ -1,36 +0,0 @@
-import styled from '@emotion/styled'
-import { numberPositionX, numberPositionY } from '../../../../utils/timePicker'
-import { fade } from '../../../../style/animation'
-import type { NumbersItemProps } from './Numbers.types'
-
-export const MinuteWithAnimation = styled('div')`
-  animation: ${fade} 0.7s linear alternate;
-`
-
-export const NumbersItem = styled.span<NumbersItemProps>`
-  left: calc(50% - 16px);
-  top: ${(props) => props.top};
-  width: 32px;
-  height: 32px;
-  display: inline-flex;
-  position: absolute;
-  align-items: center;
-  border-radius: 32px;
-  justify-content: center;
-  user-select: none;
-  pointer-events: none;
-  color: black;
-  transform: ${(props) =>
-    `translate(${numberPositionX(
-      props.idx,
-      props.clockHalfWidth,
-      props.numbersPadd
-    )}px,
-  ${numberPositionY(props.idx, props.clockHalfWidth, props.numbersPadd)}px)`};
-`
-
-NumbersItem.defaultProps = {
-  clockHalfWidth: 130,
-  numbersPadd: 24,
-  top: '2%'
-}

package/src/packages/TimePicker/components/Numbers/Numbers.tsx

@@ -1,58 +0,0 @@
-import React from 'react'
-import { hours, hours24, minutes } from '../../../../utils/timePicker'
-import { MinuteWithAnimation, NumbersItem } from './Numbers.styled'
-import { localizeNumber } from '../../../../utils'
-import type { NumbersProps } from './Numbers.types'
-
-export const Hours = (props: NumbersProps) => {
-  const { insideHour, hourSelecting, clockTime } = props
-  if (!hourSelecting) {
-    return (
-      <MinuteWithAnimation>
-        {minutes.map((m, i) => (
-          <NumbersItem key={m} idx={i}>
-            {localizeNumber(m)}
-          </NumbersItem>
-        ))}
-      </MinuteWithAnimation>
-    )
-  }
-  if (clockTime === 12) {
-    return (
-      <>
-        {hours.map((h, i) => (
-          <NumbersItem
-            key={h}
-            idx={i}
-            style={{ opacity: !insideHour ? 1 : 0.3 }}
-          >
-            {localizeNumber(h)}
-          </NumbersItem>
-        ))}
-      </>
-    )
-  }
-  return (
-    <>
-      {hours.map((h, i) => (
-        <NumbersItem
-          key={h}
-          idx={i}
-          top="15%"
-          clockHalfWidth={85}
-          numbersPadd={10}
-          style={{ opacity: insideHour ? 1 : 0.3 }}
-        >
-          {localizeNumber(h)}
-        </NumbersItem>
-      ))}
-      {hours24.map((h, i) => (
-        <NumbersItem key={h} idx={i} style={{ opacity: !insideHour ? 1 : 0.3 }}>
-          {localizeNumber(h)}
-        </NumbersItem>
-      ))}
-    </>
-  )
-}
-
-export default Hours

package/src/packages/TimePicker/components/Numbers/Numbers.types.ts

@@ -1,14 +0,0 @@
-export interface NumbersProps {
-  insideHour: boolean
-  hourSelecting: boolean
-  clockTime: 12 | 24
-}
-
-export interface NumbersItemProps {
-  idx: number
-  clockHalfWidth?: number
-  numbersPadd?: number
-  top?: string
-  insideHour?: boolean
-  isSelectedNumber?: boolean
-}

package/src/packages/TimePicker/components/Numbers/index.ts

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

package/src/packages/TimePicker/index.ts

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

package/src/style/animation.ts

@@ -1,23 +0,0 @@
-import { keyframes } from '@emotion/react'
-
-export const slideDown = keyframes`
-  from {
-    visibility: hidden;
-    opacity: 0;
-    transform: translateY(-4px);
-  }
-  to {
-    visibility: visible;
-    opacity: 1;
-    transform: translateY(0px);
-  }
-`
-
-export const fade = keyframes`
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-`

package/src/style/classNames.ts

@@ -1,8 +0,0 @@
-export const MonthYearButton = 'zm-MonthYearButton'
-export const IconNextButton = 'zm-IconNextButton'
-export const IconPrevButton = 'zm-IconPrevButton'
-export const HeaderClass = 'zm-Header'
-export const DaysButton = 'zm-DaysButton'
-
-export const MonthPickerButton = 'zm-MonthPickerButton'
-export const YearPickerButton = 'zm-YearPickerButton'

package/src/style/colorPallete.ts

@@ -1,16 +0,0 @@
-import hexToHSL from './hexToHSL'
-const getHsl = (h: number, s: number, l: number) => {
-  return `hsl(${h}deg ${s}% ${l}%)`
-}
-export const makeColorPallet = (accentColor: string) => {
-  const { h, s, l } = hexToHSL(accentColor)
-  const result: Record<number, string> = {}
-
-  result[40] = getHsl(h, s, l - 10)
-  result[50] = getHsl(h, s, l)
-  result[85] = getHsl(h, s, 85)
-  result[90] = getHsl(h, s, 90)
-  result[95] = getHsl(h, s, 95)
-
-  return result
-}

package/src/style/colors.ts

@@ -1,15 +0,0 @@
-export const gray: Record<number, string> = {
-  0: '#FFFFFF',
-  20: '#F5F5F5',
-  30: '#EBEBEB',
-  40: '#DEDEDE',
-  50: '#BFBFBF',
-  60: '#B0B0B0',
-  70: '#575757',
-  80: '#666666',
-  600: '#2E2E2E'
-}
-
-export default {
-  gray
-}