@xjur-ui/react 2.1.0 → 2.2.0

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 '../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

@@ -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 '../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

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

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

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

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

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

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