@xjur-ui/react 2.0.0 → 2.1.0

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 './form/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/selection-bar.tsx

@@ -0,0 +1,273 @@
+import type { ComponentProps, ReactNode } from 'react'
+import { createContext, useContext, useState, useCallback } from 'react'
+import { cva, cx, type ClassVariantProps } from '@xjur-ui/util'
+import { Icon, type IconType } from './icon'
+import { Button } from './form/button'
+
+const selectionBarVariants = cva(
+  [
+    'flex items-center gap-4 rounded-lg px-4 py-3 shadow-lg transition-colors duration-200 ease-in-out',
+    'fixed bottom-6 left-1/2 -translate-x-1/2 transform z-50',
+    'backdrop-blur-sm bg-white/95 border border-border-layer-2'
+  ],
+  {
+    variants: {
+      size: {
+        sm: 'px-3 py-2 text-sm',
+        md: 'px-4 py-3 text-base',
+        lg: 'px-6 py-4 text-lg'
+      },
+      variant: {
+        primary:
+          'bg-primary-idle text-neutral-label hover:bg-primary-hover rounded-circle active:bg-primary-pressed',
+        secondary:
+          'bg-secondary-idle text-white border-secondary-idle hover:bg-secondary-hover rounded-circle',
+        success:
+          'bg-success-idle text-white border-success-idle hover:bg-success-hover rounded-circle',
+        warning:
+          'bg-warning-idle text-white border-warning-idle hover:bg-warning-hover rounded-circle',
+        destructive:
+          'bg-destructive-idle text-white border-destructive-idle hover:bg-destructive-hover rounded-circle',
+        neutral:
+          'bg-neutral-dark text-white border-neutral-dark hover:bg-neutral-hover rounded-circle',
+        outline:
+          'bg-white text-neutral-dark border-border-layer-2 hover:bg-layer-2-hover rounded-circle'
+      },
+      position: {
+        fixed: 'fixed bottom-6 left-1/2 -translate-x-1/2 transform',
+        absolute: 'absolute bottom-6 left-1/2 -translate-x-1/2 transform',
+        relative: 'relative',
+        sticky: 'sticky bottom-6'
+      }
+    },
+    defaultVariants: {
+      size: 'md',
+      variant: 'primary',
+      position: 'fixed'
+    }
+  }
+)
+
+export interface SelectionAction {
+  id: string
+  label?: string
+  icon: IconType
+  onClick: () => void
+  variant?: 'primary' | 'secondary' | 'destructive' | 'tertiary' | 'outlined'
+  disabled?: boolean
+}
+
+interface SelectionBarProps
+  extends Omit<ComponentProps<'div'>, 'onClose'>,
+    ClassVariantProps<typeof selectionBarVariants> {
+  selectedCount: number
+  onClose: () => void
+  actions?: SelectionAction[]
+  showCloseButton?: boolean
+  closeButtonText?: string
+  selectedText?: string
+  className?: string
+}
+
+function SelectionBar({
+  selectedCount,
+  onClose,
+  actions = [],
+  showCloseButton = true,
+  selectedText,
+  size = 'md',
+  variant = 'primary',
+  position = 'fixed',
+  className,
+  ...props
+}: SelectionBarProps) {
+  if (selectedCount === 0) return null
+
+  const getSelectedText = () => {
+    if (selectedText) return selectedText
+    return selectedCount === 1
+      ? '1 item selecionado'
+      : `${selectedCount} itens selecionados`
+  }
+
+  const getIconSize = () => {
+    switch (size) {
+      case 'sm':
+        return 'text-sm'
+      case 'md':
+        return 'text-base'
+      case 'lg':
+        return 'text-lg'
+      default:
+        return 'text-base'
+    }
+  }
+
+  return (
+    <div
+      className={cx(
+        selectionBarVariants({ size, variant, position }),
+        className
+      )}
+      {...props}
+    >
+      {showCloseButton && (
+        <Button
+          appearance="ghost"
+          className="rounded-full text-current"
+          size={size === 'lg' ? 'md' : 'sm'}
+          variant="secondary"
+          onClick={() => onClose()}
+        >
+          <Icon className={getIconSize()} name="close" />
+        </Button>
+      )}
+
+      <span className="font-medium whitespace-nowrap">{getSelectedText()}</span>
+
+      {actions.map(action => (
+        <Button
+          appearance="ghost"
+          className="rounded-full text-current"
+          disabled={action.disabled}
+          key={action.id}
+          size={size === 'lg' ? 'md' : 'sm'}
+          variant={action.variant || 'secondary'}
+          onClick={() => action.onClick()}
+        >
+          <Icon className={getIconSize()} name={action.icon} />
+          {action.label && <span className="ml-2">{action.label}</span>}
+        </Button>
+      ))}
+    </div>
+  )
+}
+
+interface SelectionBarContextType {
+  selectedItems: Set<string>
+  toggleSelection: (id: string) => void
+  clearSelection: () => void
+  selectAll: (ids: string[]) => void
+  isSelected: (id: string) => boolean
+  selectedCount: number
+}
+
+const SelectionBarContext = createContext<SelectionBarContextType | null>(null)
+
+interface SelectionBarProviderProps {
+  children: ReactNode
+  onSelectionChange?: (selectedIds: string[]) => void
+}
+
+function SelectionBarProvider({
+  children,
+  onSelectionChange
+}: SelectionBarProviderProps) {
+  const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set())
+
+  const toggleSelection = useCallback(
+    (id: string) => {
+      setSelectedItems(prev => {
+        const newSet = new Set(prev)
+        if (newSet.has(id)) {
+          newSet.delete(id)
+        } else {
+          newSet.add(id)
+        }
+        onSelectionChange?.(Array.from(newSet))
+        return newSet
+      })
+    },
+    [onSelectionChange]
+  )
+
+  const clearSelection = useCallback(() => {
+    setSelectedItems(new Set())
+    onSelectionChange?.([])
+  }, [onSelectionChange])
+
+  const selectAll = useCallback(
+    (ids: string[]) => {
+      setSelectedItems(new Set(ids))
+      onSelectionChange?.(ids)
+    },
+    [onSelectionChange]
+  )
+
+  const isSelected = useCallback(
+    (id: string) => {
+      return selectedItems.has(id)
+    },
+    [selectedItems]
+  )
+
+  const value: SelectionBarContextType = {
+    selectedItems,
+    toggleSelection,
+    clearSelection,
+    selectAll,
+    isSelected,
+    selectedCount: selectedItems.size
+  }
+
+  return (
+    <SelectionBarContext.Provider value={value}>
+      {children}
+    </SelectionBarContext.Provider>
+  )
+}
+
+function useSelectionBar() {
+  const context = useContext(SelectionBarContext)
+  if (!context) {
+    throw new Error(
+      'useSelectionBar must be used within a SelectionBarProvider'
+    )
+  }
+  return context
+}
+
+interface SelectionBarContainerProps
+  extends Omit<SelectionBarProps, 'selectedCount' | 'onClose'> {
+  showCloseButton?: boolean
+  closeButtonText?: string
+  selectedText?: string
+}
+
+function SelectionBarContainer({
+  actions = [],
+  showCloseButton = true,
+  selectedText,
+  ...props
+}: SelectionBarContainerProps) {
+  const { selectedCount, clearSelection } = useSelectionBar()
+
+  return (
+    <SelectionBar
+      actions={actions}
+      selectedCount={selectedCount}
+      selectedText={selectedText}
+      showCloseButton={showCloseButton}
+      onClose={() => clearSelection()}
+      {...props}
+    />
+  )
+}
+
+export const SelectionBarComponents = {
+  Root: SelectionBar,
+  Provider: SelectionBarProvider,
+  Container: SelectionBarContainer,
+  useSelectionBar
+}
+
+export { SelectionBar }
+export { SelectionBarProvider }
+export { SelectionBarContainer }
+export { useSelectionBar }
+export { selectionBarVariants }
+export type {
+  SelectionBarProps,
+  SelectionBarProviderProps,
+  SelectionBarContainerProps
+}

package/src/components/sheet.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import * as SheetPrimitive from '@radix-ui/react-dialog'
 import { cx } from '@xjur-ui/util'
-import { Button } from './button'
+import { Button } from './form/button'
 import { Icon } from './icon'
 
 export function SheetRoot({
@@ -44,7 +44,7 @@ export function SheetOverlay({
   return (
     <SheetPrimitive.Overlay
       className={cx(
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50',
         className
       )}
       data-slot="sheet-overlay"