@xjur-ui/react 2.1.0 → 2.2.0

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
-}

package/src/components/horizontal-scroll.tsx

@@ -1,159 +0,0 @@
-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/icon.tsx

@@ -1,29 +0,0 @@
-import type { ComponentProps } from 'react'
-import { cx } from '@xjur-ui/util'
-import type { IconType } from '../resources/icons'
-
-export type IconProps = {
-  name: IconType
-  filled?: boolean
-} & ComponentProps<'span'>
-
-export function Icon({ className, filled = false, name, ...props }: IconProps) {
-  return (
-    <span
-      {...props}
-      className={cx(
-        'material-symbols-outlined',
-        'text-size-body-lg select-none',
-        className
-      )}
-      style={{
-        fontVariationSettings: `'FILL' ${filled ? 1 : 0}, 'wght' 600, 'GRAD' 0, 'opsz' 20`,
-        ...props.style
-      }}
-    >
-      {name}
-    </span>
-  )
-}
-
-export { icons, type IconType } from '../resources/icons'

package/src/components/list.tsx

@@ -1,111 +0,0 @@
-import { Slot } from '@radix-ui/react-slot'
-import { cx, cva, type ClassVariantProps } from '@xjur-ui/util'
-import type { ComponentProps } from 'react'
-import { type TypographyProps, Typography } from './typography'
-
-export function ListRoot({
-  className,
-  asChild,
-  ...props
-}: ComponentProps<'div'> & {
-  asChild?: boolean
-}) {
-  const Comp = asChild ? Slot : 'div'
-
-  return (
-    <Comp
-      {...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'
-      )}
-    />
-  )
-}
-
-export function ListHeader({
-  className,
-  asChild,
-  ...props
-}: ComponentProps<'div'> & {
-  asChild?: boolean
-}) {
-  const Comp = asChild ? Slot : 'div'
-  return <Comp {...props} className={cx(className, 'px-small pt-small-1x')} />
-}
-
-export function ListHeaderTitle({
-  variant = 'label',
-  size = 'sm',
-  weight = 'medium',
-  className,
-  ...props
-}: TypographyProps) {
-  return (
-    <Typography
-      className={cx(className, 'text-neutral-placeholder')}
-      size={size}
-      variant={variant}
-      weight={weight}
-      {...props}
-    />
-  )
-}
-
-export function ListContent({
-  className,
-  asChild,
-  ...props
-}: ComponentProps<'ul'> & {
-  asChild?: boolean
-}) {
-  const Comp = asChild ? Slot : 'ul'
-
-  return (
-    <Comp
-      {...props}
-      className={cx('gap-small-1x p-small flex flex-col', className)}
-    />
-  )
-}
-
-const variants = cva(
-  [
-    'py-medium px-small flex items-center gap-small rounded-small-1x',
-    'bg-layer-2-idle text-neutral-dark',
-    'hover:bg-layer-2-hover transition-colors duration-100 ease-out',
-    'active:bg-layer-2-pressed'
-  ],
-  {
-    variants: {
-      size: {
-        md: 'h-large-4x',
-        lg: 'h-large-7x'
-      },
-      isActive: {
-        true: 'bg-primary-alt-active text-primary-label-active hover:bg-primary-alt-hover active:bg-primary-alt-pressed'
-      }
-    },
-    defaultVariants: {
-      size: 'md',
-      isActive: false
-    }
-  }
-)
-
-export function ListItem({
-  className,
-  size,
-  isActive,
-  asChild,
-  ...props
-}: ComponentProps<'li'> &
-  ClassVariantProps<typeof variants> & {
-    asChild?: boolean
-  }) {
-  const Comp = asChild ? Slot : 'li'
-
-  return (
-    <Comp {...props} className={cx(variants({ size, isActive }), className)} />
-  )
-}

package/src/components/logo.tsx

@@ -1,44 +0,0 @@
-import { memo, lazy, Suspense } from 'react'
-
-export interface LogoProps {
-  mode?: 'horizontal' | 'vertical' | 'icon'
-  variant?: 'colorful' | 'orange' | 'purple' | 'white' | 'gray'
-}
-
-// Lazy load logo components to reduce initial bundle size
-const LazyLogos = lazy(() => import('../resources/logo'))
-
-function LogoFallback({ mode }: { mode?: string }) {
-  const dimensions =
-    mode === 'icon' ? { width: 24, height: 24 } : { width: 95, height: 26 }
-  return (
-    <div
-      aria-label="Loading logo"
-      className="animate-pulse rounded bg-gray-200"
-      style={dimensions}
-    />
-  )
-}
-
-export const Logo = memo(
-  ({ mode = 'horizontal', variant = 'colorful' }: LogoProps) => {
-    const colorToHex = {
-      orange: '#D68600',
-      purple: '#66127D',
-      white: '#FFFFFF',
-      gray: '#6B7280'
-    }
-
-    return (
-      <Suspense fallback={<LogoFallback mode={mode} />}>
-        <LazyLogos
-          color={variant !== 'colorful' ? colorToHex[variant] : undefined}
-          mode={mode}
-          variant={variant}
-        />
-      </Suspense>
-    )
-  }
-)
-
-Logo.displayName = 'Logo'