@xjur-ui/react 2.1.1 → 2.2.0

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

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

package/src/components/full-calendar/helpers/calendar.ts

@@ -1,158 +0,0 @@
-import {
-  endOfMonth,
-  startOfMonth,
-  subMonths,
-  isToday as isTodayDateFns,
-  isSameDay,
-  endOfWeek,
-  startOfWeek,
-  eachDayOfInterval
-} from 'date-fns'
-import type { ICalendarEvent } from '../types/calendar-event'
-import type { ICalendarCell } from '../types/calendar-cell'
-import type { ICalendarWeekHour } from '../types/calendar-week-hour'
-
-function arrayFromLength(length: number) {
-  return Array.from({ length }, (_, i) => i)
-}
-
-export const WEEKDAYS = [
-  'Domingo',
-  'Segunda',
-  'Terça',
-  'Quarta',
-  'Quinta',
-  'Sexta',
-  'Sábado'
-]
-
-export const WEEK_HOURS: ICalendarWeekHour[] = Array.from(
-  { length: 16 },
-  (_, i) => {
-    const hour = i + 8
-    return {
-      hour,
-      label: `${hour.toString().padStart(2, '0')}:00`
-    }
-  }
-)
-
-export function getDaysInMonth(date: Date): ICalendarCell[] {
-  const year = date.getFullYear()
-  const month = date.getMonth()
-
-  const firstWeekdayOfMonth = startOfMonth(date).getDay()
-  const daysInPrevMonth = endOfMonth(subMonths(date, 1)).getDate()
-  const daysInMonth = endOfMonth(date).getDate()
-
-  const prevMonthDays = arrayFromLength(firstWeekdayOfMonth).map<ICalendarCell>(
-    dayIndex => {
-      dayIndex += 1
-      const prevMonth = month - 1
-      const dayOfPrevMonth = daysInPrevMonth - firstWeekdayOfMonth
-      const day = dayOfPrevMonth + dayIndex
-      const date = new Date(year, prevMonth, day)
-
-      return {
-        dayOfWeekNumber: date.getDay(),
-        date,
-        type: 'month'
-      }
-    }
-  )
-
-  const currentMonthDays = arrayFromLength(daysInMonth).map<ICalendarCell>(
-    dayIndex => {
-      const day = dayIndex + 1
-      const date = new Date(year, month, day)
-      return {
-        dayOfWeekNumber: date.getDay(),
-        date,
-        type: 'month'
-      }
-    }
-  )
-
-  const totalWeekdays = 7
-  const totalDays = firstWeekdayOfMonth + daysInMonth
-  const remainingDays =
-    totalWeekdays - ((totalDays % totalWeekdays) % totalWeekdays)
-
-  const nextMonthDays = arrayFromLength(remainingDays).map<ICalendarCell>(
-    dayIndex => {
-      const day = dayIndex + 1
-      const date = new Date(year, month + 1, day)
-      return {
-        dayOfWeekNumber: date.getDay(),
-        date,
-        type: 'month'
-      }
-    }
-  )
-
-  return [...prevMonthDays, ...currentMonthDays, ...nextMonthDays]
-}
-
-export function getEventsForDay(events: ICalendarEvent[], date: Date) {
-  return events.filter(event => isSameDay(event.eventDate, date))
-}
-
-export function isToday(date: Date) {
-  return isTodayDateFns(date)
-}
-
-/**
- * Week view helpers
- */
-
-export function getWeekDaysInMonth(date: Date): ICalendarCell[] {
-  const weekStart = startOfWeek(date, { weekStartsOn: 0 }) // Domingo = 0
-  const weekEnd = endOfWeek(date, { weekStartsOn: 0 })
-  const weekDays = eachDayOfInterval({ start: weekStart, end: weekEnd })
-
-  const dayOfWeekNumber = weekStart.getDay()
-  const dayOfWeekName = WEEKDAYS[dayOfWeekNumber]
-
-  return weekDays.map(day => ({
-    date: day,
-    dayOfWeekNumber,
-    dayOfWeekName,
-    fullDate: day,
-    type: 'week'
-  }))
-}
-
-export function getEventsForDayAndHour(
-  events: ICalendarEvent[],
-  date: Date,
-  hour: number
-): ICalendarEvent[] {
-  return events.filter(event => {
-    return (
-      isSameDay(event.eventDate, date) && event.eventDate.getHours() === hour
-    )
-  })
-}
-
-export function isCurrentHour(date: Date, hour: number): boolean {
-  const now = new Date()
-  return isSameDay(now, date) && now.getHours() === hour
-}
-
-export function getStartAndEndDateOfWeek(date: Date): {
-  start: Date
-  end: Date
-} {
-  const start = startOfWeek(date, { weekStartsOn: 0 })
-  const end = endOfWeek(date, { weekStartsOn: 0 })
-  return { start, end }
-}
-
-/**
- * Day view helpers
- */
-
-export function getDaysInDay(date: Date): ICalendarCell[] {
-  const days = eachDayOfInterval({ start: date, end: date })
-  return days.map(day => ({ date: day, type: 'day' }))
-}

package/src/components/full-calendar/index.ts

@@ -1,16 +0,0 @@
-export * from './calendar-month-view'
-export * from './calendar-week-view'
-export * from './calendar-view-renderer'
-export * from './calendar-navigator'
-export * from './calendar-root'
-export * from './calendar-toggle-view'
-export * from './calendar-header'
-export * from './calendar-body'
-export * from './calendar-event'
-export * from './calendar-today-button'
-
-export type {
-  ICalendarEvent,
-  ICalendarEventStatus
-} from './types/calendar-event'
-export type { CalendarView } from './types/calendar-view'

package/src/components/full-calendar/types/calendar-cell.ts

@@ -1,4 +0,0 @@
-export interface ICalendarCell {
-  type: 'month' | 'week' | 'day'
-  date: Date
-}

package/src/components/full-calendar/types/calendar-event.ts

@@ -1,7 +0,0 @@
-export interface ICalendarEvent<T = unknown> {
-  id: string
-  eventDate: Date
-  data: T
-}
-
-export type ICalendarEventStatus = 'pending' | 'completed' | 'cancelled'

package/src/components/full-calendar/types/calendar-view.ts

@@ -1 +0,0 @@
-export type CalendarView = 'month' | 'week' | 'day'

package/src/components/full-calendar/types/calendar-week-hour.ts

@@ -1,4 +0,0 @@
-export interface ICalendarWeekHour {
-  hour: number
-  label: string
-}