@xjur-ui/react 2.0.0 → 2.1.1

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

@@ -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>
+  )
+}

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

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

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

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

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

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

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

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

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

package/src/components/horizontal-scroll.tsx

@@ -0,0 +1,159 @@
+import type { ComponentProps, ReactNode } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { cx } from '@xjur-ui/util'
+import { Button } from './controls/button'
+import { Icon } from './icon'
+
+export interface HorizontalScrollProps extends ComponentProps<'div'> {
+  children: ReactNode
+  gap?: 'small' | 'medium' | 'large'
+  scrollAmount?: number
+}
+
+export function HorizontalScroll({
+  children,
+  className,
+  gap = 'small',
+  scrollAmount = 200,
+  ...props
+}: HorizontalScrollProps) {
+  const scrollContainerRef = useRef<HTMLDivElement>(null)
+  const [canScrollLeft, setCanScrollLeft] = useState(false)
+  const [canScrollRight, setCanScrollRight] = useState(false)
+  const [isScrolling, setIsScrolling] = useState(false)
+
+  const checkScrollable = useCallback(() => {
+    const container = scrollContainerRef.current
+    if (!container) return
+
+    const { scrollLeft, scrollWidth, clientWidth } = container
+    setCanScrollLeft(scrollLeft > 0)
+    setCanScrollRight(scrollLeft < scrollWidth - clientWidth - 1)
+  }, [])
+
+  const handleScrollLeft = useCallback(() => {
+    const container = scrollContainerRef.current
+    if (!container) return
+
+    setIsScrolling(true)
+    container.scrollTo({
+      left: container.scrollLeft - scrollAmount,
+      behavior: 'smooth'
+    })
+
+    setTimeout(() => setIsScrolling(false), 300)
+  }, [scrollAmount])
+
+  const handleScrollRight = useCallback(() => {
+    const container = scrollContainerRef.current
+    if (!container) return
+
+    setIsScrolling(true)
+    container.scrollTo({
+      left: container.scrollLeft + scrollAmount,
+      behavior: 'smooth'
+    })
+
+    setTimeout(() => setIsScrolling(false), 300)
+  }, [scrollAmount])
+
+  useEffect(() => {
+    const container = scrollContainerRef.current
+    if (!container) return
+
+    const handleScroll = () => {
+      checkScrollable()
+    }
+
+    const handleResize = () => {
+      checkScrollable()
+    }
+
+    checkScrollable()
+    container.addEventListener('scroll', handleScroll, { passive: true })
+    window.addEventListener('resize', handleResize)
+
+    let resizeObserver: ResizeObserver | null = null
+    if (typeof ResizeObserver !== 'undefined') {
+      resizeObserver = new ResizeObserver(() => {
+        checkScrollable()
+      })
+      resizeObserver.observe(container)
+    }
+
+    return () => {
+      container.removeEventListener('scroll', handleScroll)
+      window.removeEventListener('resize', handleResize)
+      if (resizeObserver) {
+        resizeObserver.disconnect()
+      }
+    }
+  }, [checkScrollable])
+
+  const gapClass = {
+    small: 'gap-small',
+    medium: 'gap-medium',
+    large: 'gap-large'
+  }[gap]
+
+  return (
+    <div className={cx('relative isolate', className)} {...props}>
+      {/* Left Arrow */}
+      {canScrollLeft && (
+        <div
+          className="absolute top-1/2 left-0 z-[3] flex h-full w-[80px] -translate-y-1/2 items-center"
+          style={{
+            background: `linear-gradient(to right, white 40%, transparent)`
+          }}
+        >
+          <Button
+            appearance="ghost"
+            aria-label="Scroll left"
+            className="ml-0"
+            disabled={isScrolling}
+            size="icon_md"
+            variant="secondary"
+            onClick={handleScrollLeft}
+          >
+            <Icon name="chevron_left" />
+          </Button>
+        </div>
+      )}
+
+      {/* Right Arrow */}
+      {canScrollRight && (
+        <div
+          className="absolute top-1/2 right-0 z-[2] flex h-full w-[80px] -translate-y-1/2 items-center justify-end"
+          style={{
+            background: `linear-gradient(to left, white 40%, transparent)`
+          }}
+        >
+          <Button
+            appearance="ghost"
+            aria-label="Scroll right"
+            className="mr-0"
+            disabled={isScrolling}
+            size="icon_md"
+            variant="secondary"
+            onClick={handleScrollRight}
+          >
+            <Icon name="chevron_right" />
+          </Button>
+        </div>
+      )}
+
+      {/* Scrollable Content */}
+      <div
+        className={cx(
+          'scrollbar-hide relative z-1 flex overflow-x-auto overflow-y-visible',
+          'min-w-0 [&>*]:flex-none [&>*]:whitespace-nowrap',
+          gapClass,
+          className
+        )}
+        ref={scrollContainerRef}
+      >
+        {children}
+      </div>
+    </div>
+  )
+}

package/src/components/list.tsx

@@ -17,7 +17,7 @@ export function ListRoot({
       {...props}
       className={cx(
         className,
-        'rounded-small scrollbar-hide bg-layer-2-idle border-border-layer-2 shadow-elevation-3 z-10 max-h-[400px] list-none overflow-y-auto border'
+        'rounded-small scrollbar-hide bg-layer-2-idle border-border-layer-2 shadow-elevation-3 z-1000 max-h-[400px] list-none overflow-y-auto border'
       )}
     />
   )