@xjur-ui/react 2.0.0 → 2.1.1

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

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

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

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

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

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

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

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

@@ -0,0 +1,165 @@
+import React, {
+  createContext,
+  use,
+  useCallback,
+  useMemo,
+  useState
+} from 'react'
+import {
+  DndContext,
+  closestCenter,
+  useSensor,
+  useSensors,
+  PointerSensor,
+  KeyboardSensor,
+  type DragEndEvent,
+  type DragStartEvent,
+  MouseSensor
+} from '@dnd-kit/core'
+import { sortableKeyboardCoordinates } from '@dnd-kit/sortable'
+import type { ICalendarEvent } from './types/calendar-event'
+import type { CalendarView } from './types/calendar-view'
+
+interface CalendarContextType {
+  events: ICalendarEvent[]
+  selectedDate: Date
+  calendarView?: CalendarView
+  activeEventId: string | null
+  disableEventCreationInPast?: boolean
+  renderEvent: (event: ICalendarEvent) => React.ReactNode
+  handleChangeView: (view: CalendarView) => void
+  setSelectedDate: React.Dispatch<React.SetStateAction<Date>>
+  onEventMove?: (eventId: string, newDate: Date) => void
+  onAddEvent?: (date: Date) => void
+}
+
+const CalendarContext = createContext<CalendarContextType>({
+  events: [],
+  calendarView: 'month',
+  selectedDate: new Date(),
+  activeEventId: null,
+  disableEventCreationInPast: true,
+  renderEvent: () => null,
+  setSelectedDate: () => {},
+  handleChangeView: () => {},
+  onEventMove: () => {},
+  onAddEvent: () => {}
+})
+
+export function CalendarRoot({
+  children,
+  events,
+  calendarView: calendarViewProp = 'month',
+  selectedDate: selectedDateProp = new Date(),
+  disableEventCreationInPast = true,
+  renderEvent,
+  onEventMove,
+  onAddEvent
+}: {
+  children: React.ReactNode
+  events: ICalendarEvent[]
+  selectedDate?: Date
+  calendarView?: CalendarView
+  disableEventCreationInPast?: boolean
+  renderEvent: (event: ICalendarEvent) => React.ReactNode
+  onEventMove?: (eventId: string, newDate: Date) => void
+  onAddEvent?: (date: Date) => void
+}) {
+  const [selectedDate, setSelectedDate] = useState(selectedDateProp)
+  const [calendarView, setCalendarView] = useState(calendarViewProp)
+  const [activeEventId, setActiveEventId] = useState<string | null>(null)
+
+  const handleChangeView = useCallback((view: CalendarView) => {
+    setSelectedDate(new Date())
+    setCalendarView(view)
+  }, [])
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8
+      }
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates
+    }),
+    useSensor(MouseSensor, {
+      activationConstraint: {
+        distance: 5,
+        delay: 250
+      }
+    })
+  )
+
+  const handleDragStart = useCallback((event: DragStartEvent) => {
+    const eventId = event.active.id.toString()
+    setActiveEventId(eventId)
+  }, [])
+
+  const handleDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      const { active, over } = event
+      setActiveEventId(null)
+
+      if (!active || !over || !onEventMove) return
+
+      const eventId = active.id.toString()
+      const cellDate = over.data.current?.date as Date
+
+      console.log(cellDate)
+
+      if (cellDate) {
+        onEventMove(eventId, cellDate)
+      }
+    },
+    [onEventMove]
+  )
+
+  const providerValue = useMemo(
+    () => ({
+      events,
+      renderEvent,
+      activeEventId,
+      disableEventCreationInPast,
+      selectedDate,
+      setSelectedDate,
+
+      calendarView,
+      handleChangeView,
+      onEventMove,
+      onAddEvent
+    }),
+    [
+      events,
+      renderEvent,
+      activeEventId,
+      disableEventCreationInPast,
+      selectedDate,
+      calendarView,
+      handleChangeView,
+      onEventMove,
+      onAddEvent
+    ]
+  )
+
+  return (
+    <CalendarContext.Provider value={providerValue}>
+      <DndContext
+        collisionDetection={closestCenter}
+        sensors={sensors}
+        onDragEnd={handleDragEnd}
+        onDragStart={handleDragStart}
+      >
+        {children}
+      </DndContext>
+    </CalendarContext.Provider>
+  )
+}
+
+export function useFullCalendar() {
+  const context = use(CalendarContext)
+  if (!context) {
+    throw new Error('useFullCalendar must be used within a CalendarRoot')
+  }
+  return context
+}

package/src/components/full-calendar/calendar-today-button.tsx

@@ -0,0 +1,21 @@
+import { useCallback } from 'react'
+import { Button, type ButtonProps } from '../controls/button'
+import { useFullCalendar } from './calendar-root'
+
+export function CalendarTodayButton({
+  children = 'Hoje',
+  variant = 'tertiary',
+  ...props
+}: ButtonProps) {
+  const { setSelectedDate } = useFullCalendar()
+
+  const handleToday = useCallback(() => {
+    setSelectedDate(new Date())
+  }, [setSelectedDate])
+
+  return (
+    <Button variant={variant} onClick={handleToday} {...props}>
+      {children}
+    </Button>
+  )
+}