@xjur-ui/react 2.1.1 → 2.2.0

package/src/components/full-calendar/calendar-cell.tsx

@@ -1,120 +0,0 @@
-import { Fragment, useMemo } from 'react'
-import { useDroppable } from '@dnd-kit/core'
-import { cx, tv } from '@xjur-ui/util'
-import { isPast } from 'date-fns'
-import { Typography } from '../typography'
-import { Button } from '../controls/button'
-import { Icon } from '../icon'
-import { isToday } from './helpers/calendar'
-import { useFullCalendar } from './calendar-root'
-import type { ICalendarCell } from './types/calendar-cell'
-import type { ICalendarEvent } from './types/calendar-event'
-import { CalendarMoreEventsDropdown } from './calendar-more-events-dropdown'
-
-interface CalendarCellProps {
-  events: ICalendarEvent[]
-  cell: ICalendarCell
-}
-
-const calendarCellVariants = tv({
-  base: 'group/calendar-cell p-small flex flex-col gap-small-1x w-full bg-layer-2-idle ',
-  variants: {
-    type: {
-      month: 'h-[212px]',
-      week: 'min-h-[64px] max-h-[212px]',
-      day: 'min-h-[64px] max-h-[212px]'
-    }
-  }
-})
-
-export function CalendarCell({ cell, events }: CalendarCellProps) {
-  const { date, type } = cell
-
-  const { renderEvent, activeEventId, onAddEvent, disableEventCreationInPast } =
-    useFullCalendar()
-  const eventsToShow = useMemo(() => events.slice(0, 2), [events])
-  const hasMore = events.length >= 3
-
-  const { isOver, setNodeRef } = useDroppable({
-    id: `calendar-cell-${type}-${date.toISOString()}`,
-    data: {
-      date,
-      type
-    }
-  })
-
-  const isDraggingInCell = useMemo(() => {
-    const cellEvent = events.find(event => event.id === activeEventId)
-
-    if (!cellEvent) return false
-
-    const formatDate = (date: Date) => {
-      return date.toLocaleDateString('pt-BR', {
-        year: 'numeric',
-        month: '2-digit',
-        day: '2-digit'
-      })
-    }
-
-    const cellDate = formatDate(date)
-    const cellEventDate = formatDate(cellEvent.eventDate)
-
-    return cellDate === cellEventDate
-  }, [activeEventId, date, events])
-
-  const calendarCellClassNames = calendarCellVariants({ type })
-
-  const disableEventCreation = useMemo(
-    () => disableEventCreationInPast && isPast(date) && !isToday(date),
-    [disableEventCreationInPast, date]
-  )
-
-  return (
-    <div
-      className={calendarCellClassNames}
-      data-slot="calendar-cell"
-      ref={setNodeRef}
-    >
-      {type === 'month' && (
-        <div className="flex items-center justify-center">
-          <div
-            className={cx(
-              'size-large-2x rounded-circle bg-layer-2-idle flex items-center justify-center',
-              isToday(date) && 'bg-primary-idle text-neutral-label'
-            )}
-          >
-            <Typography size="sm" variant="label" weight="medium">
-              {cell.date.getDate()}
-            </Typography>
-          </div>
-        </div>
-      )}
-
-      <div className="gap-small-1x flex flex-col">
-        {eventsToShow.map(event => (
-          <Fragment key={event.id}>{renderEvent(event)}</Fragment>
-        ))}
-
-        {isOver && eventsToShow.length < 2 && !isDraggingInCell && (
-          <div className="border-border-layer-4 rounded-small-2x h-[68px] w-full border border-dashed" />
-        )}
-      </div>
-
-      <div className="mt-auto flex items-center justify-between">
-        {hasMore && <CalendarMoreEventsDropdown events={events.slice(2)} />}
-
-        {onAddEvent && !disableEventCreation && (
-          <div className="invisible ml-auto transition-opacity duration-100 ease-in-out group-hover/calendar-cell:visible">
-            <Button
-              size="icon_sm"
-              variant="outlined"
-              onClick={() => onAddEvent(date)}
-            >
-              <Icon className="text-icon-neutral-3" name="add" />
-            </Button>
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}

package/src/components/full-calendar/calendar-day-view.tsx

@@ -1,76 +0,0 @@
-import { useCallback } from 'react'
-import { cx } from '@xjur-ui/util'
-import { setHours } from 'date-fns'
-import { Typography } from '../typography'
-import { WEEK_HOURS, getEventsForDayAndHour } from './helpers/calendar'
-import { useFullCalendar } from './calendar-root'
-import { CalendarWeekDay } from './calendar-week-day'
-import { CalendarCell } from './calendar-cell'
-import type { ICalendarCell } from './types/calendar-cell'
-
-export function CalendarDayView() {
-  const { selectedDate, events } = useFullCalendar()
-
-  const getEventsForDayAndHourCallback = useCallback(
-    (date: Date, hour: number) => {
-      return getEventsForDayAndHour(events, date, hour)
-    },
-    [events]
-  )
-
-  const cellsWithHour = useCallback((cell: ICalendarCell, hour: number) => {
-    return {
-      ...cell,
-      date: setHours(cell.date, hour)
-    }
-  }, [])
-
-  return (
-    <div className="bg-layer-2-hover rounded-small-1x border-border-layer-2 scrollbar-hide h-full w-full border">
-      <div className="flex flex-1 flex-col">
-        <div
-          className="bg-layer-2-hover sticky top-0 z-10 flex w-full"
-          data-slot="week-header"
-        >
-          <div className="w-[64px]" />
-          <CalendarWeekDay
-            className="border-border-layer-2 items-start border-l"
-            date={selectedDate}
-          />
-        </div>
-
-        <div className="overflow-hidden">
-          {WEEK_HOURS.map(({ hour, label }) => (
-            <div className="flex items-start" key={hour}>
-              <div className="px-small flex h-full w-[64px] items-start justify-end">
-                <Typography size="sm-1x" variant="label" weight="medium">
-                  {label}
-                </Typography>
-              </div>
-
-              <div
-                className={cx(
-                  'flex flex-1',
-                  '[&>*]:border-border-layer-2',
-                  '[&>*]:border-t',
-                  '[&>*]:border-l'
-                )}
-              >
-                <CalendarCell
-                  cell={cellsWithHour(
-                    {
-                      date: selectedDate,
-                      type: 'day'
-                    },
-                    hour
-                  )}
-                  events={getEventsForDayAndHourCallback(selectedDate, hour)}
-                />
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/components/full-calendar/calendar-event.tsx

@@ -1,178 +0,0 @@
-import { cx, tv } from '@xjur-ui/util'
-import type { ComponentProps } from 'react'
-import { useDraggable } from '@dnd-kit/core'
-import { Typography } from '../typography'
-import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip'
-import type {
-  ICalendarEvent,
-  ICalendarEventStatus
-} from './types/calendar-event'
-import { useFullCalendar } from './calendar-root'
-
-const eventVariants = tv({
-  base: 'py-small_1x-alt pr-small pl-medium rounded-small-2x transition-colors duration-100 ease-out',
-  variants: {
-    status: {
-      pending:
-        'bg-layer-2-hover border-l-2 border-border-layer-4 hover:bg-layer-2-pressed active:bg-layer-2-active',
-      completed:
-        'bg-success-alt-idle border-l-2 border-success-idle hover:bg-success-alt-hover active:bg-success-alt-pressed',
-      cancelled:
-        'bg-danger-alt-idle border-l-2 border-danger-idle hover:bg-danger-alt-hover active:bg-danger-alt-pressed'
-    }
-  },
-  defaultVariants: {
-    status: 'pending'
-  }
-})
-
-interface CalendarEventProps extends ComponentProps<'div'> {
-  event: ICalendarEvent
-  disabled?: boolean
-  status?: ICalendarEventStatus
-}
-
-export function CalendarEvent({
-  event,
-  disabled = false,
-  status = 'pending',
-  className,
-  children,
-  ...props
-}: CalendarEventProps) {
-  const { onEventMove } = useFullCalendar()
-  const isDraggingDisabled = disabled || !onEventMove
-
-  const { attributes, listeners, setNodeRef, transform, isDragging } =
-    useDraggable({
-      id: event.id,
-      disabled: isDraggingDisabled,
-      data: {
-        event,
-        type: 'calendar-event'
-      }
-    })
-
-  const style = transform
-    ? {
-        transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`
-      }
-    : undefined
-
-  return (
-    <div
-      className={cx(
-        disabled && 'pointer-events-none',
-        'cursor-pointer active:cursor-grabbing',
-        isDragging && 'z-1000 -rotate-2',
-        eventVariants({ status }),
-        className
-      )}
-      data-draggable-event-id={event.id}
-      data-slot="calendar-event"
-      ref={setNodeRef}
-      style={style}
-      {...listeners}
-      {...attributes}
-      {...props}
-    >
-      {children}
-    </div>
-  )
-}
-
-export function CalendarEventTitle({
-  size = 'sm',
-  variant = 'label',
-  weight = 'medium',
-  className,
-  ...props
-}: ComponentProps<typeof Typography>) {
-  const { activeEventId } = useFullCalendar()
-
-  if (activeEventId !== null) {
-    return (
-      <Typography
-        className={cx(className, 'text-title-neutral truncate')}
-        size={size}
-        variant={variant}
-        weight={weight}
-        {...props}
-      />
-    )
-  }
-
-  return (
-    <Tooltip delayDuration={500}>
-      <TooltipTrigger asChild={true}>
-        <Typography
-          className={cx(className, 'text-title-neutral truncate')}
-          size={size}
-          variant={variant}
-          weight={weight}
-          {...props}
-        />
-      </TooltipTrigger>
-      <TooltipContent className="max-w-[320px]">
-        {props.children}
-      </TooltipContent>
-    </Tooltip>
-  )
-}
-
-export function CalendarEventDescription({
-  size = 'sm-1x',
-  variant = 'body',
-  weight = 'normal',
-  className,
-  ...props
-}: ComponentProps<typeof Typography>) {
-  const { activeEventId } = useFullCalendar()
-
-  if (activeEventId !== null) {
-    return (
-      <Typography
-        className={cx(className, 'truncate')}
-        size={size}
-        variant={variant}
-        weight={weight}
-        {...props}
-      />
-    )
-  }
-
-  return (
-    <Tooltip delayDuration={500}>
-      <TooltipTrigger asChild={true}>
-        <Typography
-          className={cx(className, 'truncate')}
-          size={size}
-          variant={variant}
-          weight={weight}
-          {...props}
-        />
-      </TooltipTrigger>
-      <TooltipContent className="max-w-[320px]">
-        {props.children}
-      </TooltipContent>
-    </Tooltip>
-  )
-}
-
-export function CalendarEventStatus({
-  variant = 'body',
-  size = 'sm-1x',
-  weight = 'normal',
-  className,
-  ...props
-}: ComponentProps<typeof Typography>) {
-  return (
-    <Typography
-      className={cx(className, 'truncate')}
-      size={size}
-      variant={variant}
-      weight={weight}
-      {...props}
-    />
-  )
-}

package/src/components/full-calendar/calendar-header.tsx

@@ -1,14 +0,0 @@
-import { cx } from '@xjur-ui/util'
-import type { ComponentProps } from 'react'
-
-export function CalendarHeader({ className, ...props }: ComponentProps<'div'>) {
-  return (
-    <div
-      {...props}
-      className={cx(
-        className,
-        'gap-medium h-large-4x flex w-full items-center'
-      )}
-    />
-  )
-}

package/src/components/full-calendar/calendar-month-view.tsx

@@ -1,69 +0,0 @@
-import { useCallback, useMemo } from 'react'
-import { cx } from '@xjur-ui/util'
-import { Typography } from '../typography'
-import { getDaysInMonth, getEventsForDay, WEEKDAYS } from './helpers/calendar'
-import { useFullCalendar } from './calendar-root'
-import { CalendarCell } from './calendar-cell'
-import type { ICalendarCell } from './types/calendar-cell'
-
-export function CalendarMonthView() {
-  const { selectedDate, events } = useFullCalendar()
-
-  const monthDaysCells = useMemo(
-    () => getDaysInMonth(selectedDate),
-    [selectedDate]
-  )
-
-  const getEventsForDayCell = useCallback(
-    (cell: ICalendarCell) => {
-      return getEventsForDay(events, cell.date)
-    },
-    [events]
-  )
-
-  return (
-    <div className="rounded-small-1x scrollbar-hide border-border-layer-2 h-full w-full border">
-      <div
-        className="bg-layer-2-hover h-large-4x rounded-t-small-1x sticky top-0 grid grid-cols-7"
-        data-slot="month-header"
-      >
-        {WEEKDAYS.map(weekday => (
-          <div
-            className={cx(
-              'p-small b border-border-layer-2 flex items-center justify-center border-r last:border-r-0'
-            )}
-            data-slot="month-header-weekday"
-            key={weekday}
-          >
-            <Typography size="sm" variant="label" weight="medium">
-              {weekday}
-            </Typography>
-          </div>
-        ))}
-      </div>
-
-      <div
-        className="grid h-full grid-cols-7 overflow-hidden"
-        data-slot="month-day-cells"
-      >
-        {monthDaysCells.map((cell, index) => {
-          const isLastColumn = (index + 1) % 7 === 0
-          const isFirstColumn = (index + 1) % 7 === 1
-
-          return (
-            <div
-              className={cx(
-                'border-border-layer-2 border-t border-r',
-                isLastColumn && 'pr-small-2x border-r-0',
-                isFirstColumn && 'pl-small-2x'
-              )}
-              key={`${cell.date.toISOString()}-${index}`}
-            >
-              <CalendarCell cell={cell} events={getEventsForDayCell(cell)} />
-            </div>
-          )
-        })}
-      </div>
-    </div>
-  )
-}

package/src/components/full-calendar/calendar-more-events-dropdown.tsx

@@ -1,39 +0,0 @@
-import { Fragment } from 'react/jsx-runtime'
-import { Button } from '../controls/button'
-import {
-  DropdownMenuRoot,
-  DropdownMenuList,
-  DropdownMenuTrigger,
-  DropdownMenuContent
-} from '../dropdown-menu'
-import { useFullCalendar } from './calendar-root'
-import type { ICalendarEvent } from './types/calendar-event'
-
-interface CalendarMoreEventsDropdownProps {
-  events: ICalendarEvent[]
-}
-
-export function CalendarMoreEventsDropdown({
-  events
-}: CalendarMoreEventsDropdownProps) {
-  const { renderEvent } = useFullCalendar()
-  return (
-    <DropdownMenuRoot>
-      <DropdownMenuTrigger asChild={true}>
-        <Button size="sm" variant="outlined">
-          Mais {events.length}
-        </Button>
-      </DropdownMenuTrigger>
-
-      <DropdownMenuContent className="w-[240px]">
-        <DropdownMenuList>
-          {events.map(event => (
-            <Fragment key={event.eventDate.toISOString()}>
-              {renderEvent?.(event)}
-            </Fragment>
-          ))}
-        </DropdownMenuList>
-      </DropdownMenuContent>
-    </DropdownMenuRoot>
-  )
-}

package/src/components/full-calendar/calendar-navigator.tsx

@@ -1,86 +0,0 @@
-import { useCallback, useMemo } from 'react'
-import {
-  addDays,
-  addMonths,
-  addWeeks,
-  format,
-  startOfWeek,
-  subDays,
-  subMonths,
-  subWeeks
-} from 'date-fns'
-import { ptBR } from 'date-fns/locale'
-import { capitalize } from '@xjur-ui/util'
-import { Typography } from '../typography'
-import { Button } from '../controls/button'
-import { Icon } from '../icon'
-import { useFullCalendar } from './calendar-root'
-import { getStartAndEndDateOfWeek } from './helpers/calendar'
-
-export function CalendarNavigator() {
-  const { selectedDate, calendarView, setSelectedDate } = useFullCalendar()
-
-  const viewLabel = useMemo(() => {
-    if (calendarView === 'month') {
-      return capitalize(
-        format(selectedDate, "MMMM 'de' yyyy", { locale: ptBR })
-      )
-    }
-
-    if (calendarView === 'week') {
-      const { start, end } = getStartAndEndDateOfWeek(selectedDate)
-      const month = format(end, 'MMMM', { locale: ptBR })
-      const year = format(end, 'yyyy', { locale: ptBR })
-      return `${start.getDate()} - ${end.getDate()} de ${month} de ${year}`
-    }
-
-    return format(selectedDate, "dd 'de' MMMM 'de' yyyy", { locale: ptBR })
-  }, [selectedDate, calendarView])
-
-  const handleNextDate = useCallback(() => {
-    if (calendarView === 'month') {
-      setSelectedDate(addMonths(selectedDate, 1))
-      return
-    }
-
-    if (calendarView === 'week') {
-      const nextWeek = startOfWeek(addWeeks(selectedDate, 1))
-      setSelectedDate(nextWeek)
-      return
-    }
-
-    const nextDay = addDays(selectedDate, 1)
-    setSelectedDate(nextDay)
-  }, [selectedDate, setSelectedDate, calendarView])
-
-  const handlePreviousDate = useCallback(() => {
-    if (calendarView === 'month') {
-      setSelectedDate(subMonths(selectedDate, 1))
-      return
-    }
-
-    if (calendarView === 'week') {
-      setSelectedDate(subWeeks(selectedDate, 1))
-    }
-
-    setSelectedDate(subDays(selectedDate, 1))
-  }, [selectedDate, setSelectedDate, calendarView])
-
-  return (
-    <div className="gap-large flex items-center">
-      <Typography className="text-title-neutral" size="lg" variant="title">
-        {viewLabel}
-      </Typography>
-
-      <div className="gap-small flex items-center">
-        <Button size="icon_md" variant="tertiary" onClick={handlePreviousDate}>
-          <Icon className="text-icon-neutral-3" name="chevron_left" />
-        </Button>
-
-        <Button size="icon_md" variant="tertiary" onClick={handleNextDate}>
-          <Icon className="text-icon-neutral-3" name="chevron_right" />
-        </Button>
-      </div>
-    </div>
-  )
-}