@xjur-ui/react 2.0.0 → 2.1.0

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 '../form/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 '../form/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 '../form/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>
+  )
+}

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

@@ -0,0 +1,61 @@
+import { useMemo } from 'react'
+import {
+  SelectContent,
+  SelectOption,
+  SelectRoot,
+  SelectTrigger,
+  SelectValue,
+  SelectOptions,
+  SelectOptionText,
+  SelectIcon
+} from '../form/select'
+import type { CalendarView } from './types/calendar-view'
+import { useFullCalendar } from './calendar-root'
+
+const views: Array<{ name: string; value: CalendarView }> = [
+  { name: 'Mês', value: 'month' },
+  { name: 'Semana', value: 'week' },
+  { name: 'Dia', value: 'day' }
+]
+
+export function CalendarToggleView() {
+  const { calendarView, handleChangeView } = useFullCalendar()
+
+  const displayValue = useMemo(
+    () => views.find(view => view.value === calendarView)?.name,
+    [calendarView]
+  )
+
+  return (
+    <div className="w-[94px]">
+      <SelectRoot>
+        <SelectTrigger>
+          <SelectValue
+            displayValue={displayValue}
+            name="calendar-toggle-view"
+            value={calendarView}
+          />
+          <SelectIcon
+            className="text-icon-neutral-3"
+            name="keyboard_arrow_down"
+          />
+        </SelectTrigger>
+
+        <SelectContent>
+          <SelectOptions>
+            {views.map(view => (
+              <SelectOption
+                isActive={calendarView === view.value}
+                key={view.value}
+                value={view.value}
+                onClick={() => handleChangeView(view.value)}
+              >
+                <SelectOptionText>{view.name}</SelectOptionText>
+              </SelectOption>
+            ))}
+          </SelectOptions>
+        </SelectContent>
+      </SelectRoot>
+    </div>
+  )
+}

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

@@ -0,0 +1,19 @@
+import { useFullCalendar } from './calendar-root'
+import { CalendarMonthView } from './calendar-month-view'
+import { CalendarWeekView } from './calendar-week-view'
+import { CalendarDayView } from './calendar-day-view'
+
+export function CalendarViewRenderer() {
+  const { calendarView } = useFullCalendar()
+
+  switch (calendarView) {
+    case 'month':
+      return <CalendarMonthView />
+    case 'week':
+      return <CalendarWeekView />
+    case 'day':
+      return <CalendarDayView />
+    default:
+      return <CalendarMonthView />
+  }
+}

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

@@ -0,0 +1,49 @@
+import { cx } from '@xjur-ui/util'
+import type { ComponentProps } from 'react'
+import { Typography } from '../typography'
+import { isToday, WEEKDAYS } from './helpers/calendar'
+
+interface CalendarWeekDayProps extends ComponentProps<'div'> {
+  date: Date
+  className?: string
+}
+
+export function CalendarWeekDay({
+  date,
+  className,
+  ...props
+}: CalendarWeekDayProps) {
+  const isCurrentDay = isToday(date)
+  const dayNumber = date.getDate()
+
+  return (
+    <div
+      className={cx(
+        'p-small gap-small-1x flex w-full flex-1 flex-col items-center',
+        className
+      )}
+      data-slot="week-day"
+      key={date.toISOString()}
+      {...props}
+    >
+      <Typography size="sm" variant="label" weight="medium">
+        {WEEKDAYS[date.getDay()]}
+      </Typography>
+      <div
+        className={cx(
+          'size-large-2x rounded-circle flex items-center justify-center',
+          isCurrentDay && 'bg-primary-idle'
+        )}
+      >
+        <Typography
+          className={cx(isCurrentDay && 'text-neutral-label')}
+          size="sm-1x"
+          variant="label"
+          weight="medium"
+        >
+          {dayNumber}
+        </Typography>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,88 @@
+import { useCallback, useMemo } from 'react'
+import { cx } from '@xjur-ui/util'
+import { setHours } from 'date-fns'
+import { Typography } from '../typography'
+import {
+  WEEK_HOURS,
+  getWeekDaysInMonth,
+  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 CalendarWeekView() {
+  const { selectedDate, events } = useFullCalendar()
+
+  const monthWeekDaysCells = useMemo(
+    () => getWeekDaysInMonth(selectedDate),
+    [selectedDate]
+  )
+
+  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={cx(
+            'bg-layer-2-hover sticky top-0 grid [grid-template-columns:64px_repeat(7,1fr)]',
+            '[&>*]:border-border-layer-2',
+            '[&>*]:border-l'
+          )}
+          data-slot="week-header"
+        >
+          {monthWeekDaysCells.map((cell, index) => (
+            <CalendarWeekDay
+              date={cell.date}
+              key={cell.date.getDay()}
+              style={{ gridColumnStart: index + 2 }}
+            />
+          ))}
+        </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(
+                  'grid flex-1 grid-cols-7',
+                  '[&>*]:border-border-layer-2',
+                  '[&>*]:border-t',
+                  '[&>*]:border-l'
+                )}
+              >
+                {monthWeekDaysCells.map(cell => (
+                  <CalendarCell
+                    cell={cellsWithHour(cell, hour)}
+                    events={getEventsForDayAndHourCallback(cell.date, hour)}
+                    key={cell.date.toISOString()}
+                  />
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}