@xjur-ui/react 2.0.0 → 2.1.1

package/src/components/dialog.tsx

@@ -0,0 +1,242 @@
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { cva, cx, type ClassVariantProps } from '@xjur-ui/util'
+import { forwardRef, type ComponentProps } from 'react'
+import { Button } from './controls/button'
+import { Typography } from './typography'
+import { Icon } from './icon'
+
+const dialogOverlayVariants = cva([
+  'fixed inset-0 z-50 bg-black/50 backdrop-blur-sm',
+  'data-[state=open]:animate-in data-[state=closed]:animate-out',
+  'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0'
+])
+
+const dialogContentVariants = cva(
+  [
+    'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-layer-1-idle p-6 shadow-lg duration-200',
+    'data-[state=open]:animate-in data-[state=closed]:animate-out',
+    'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+    'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+    'data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]',
+    'data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
+    'sm:rounded-lg'
+  ],
+  {
+    variants: {
+      size: {
+        sm: 'max-w-sm',
+        md: 'max-w-lg',
+        lg: 'max-w-2xl',
+        xl: 'max-w-4xl'
+      }
+    },
+    defaultVariants: {
+      size: 'md'
+    }
+  }
+)
+
+const dialogHeaderVariants = cva([
+  'flex flex-col space-y-1.5 text-center sm:text-left'
+])
+
+const dialogFooterVariants = cva([
+  'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2'
+])
+
+const dialogTitleVariants = cva([
+  'text-lg font-semibold leading-none tracking-tight'
+])
+
+const dialogDescriptionVariants = cva(['text-sm text-neutral-dark'])
+
+export const Dialog = DialogPrimitive.Root
+
+export const DialogTrigger = DialogPrimitive.Trigger
+
+export const DialogPortal = DialogPrimitive.Portal
+
+export const DialogClose = DialogPrimitive.Close
+
+export interface DialogOverlayProps
+  extends ComponentProps<typeof DialogPrimitive.Overlay>,
+    ClassVariantProps<typeof dialogOverlayVariants> {}
+
+export const DialogOverlay = forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  DialogOverlayProps
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    className={cx(dialogOverlayVariants(), className)}
+    ref={ref}
+    {...props}
+  />
+))
+
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+export interface DialogContentProps
+  extends ComponentProps<typeof DialogPrimitive.Content>,
+    ClassVariantProps<typeof dialogContentVariants> {}
+
+export const DialogContent = forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  DialogContentProps
+>(({ className, children, size, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      className={cx(dialogContentVariants({ size }), className)}
+      ref={ref}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none">
+        <Icon className="h-4 w-4" name="close" />
+        <span className="sr-only">Fechar</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+export interface DialogHeaderProps
+  extends ComponentProps<'div'>,
+    ClassVariantProps<typeof dialogHeaderVariants> {}
+
+export const DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      className={cx(dialogHeaderVariants(), className)}
+      ref={ref}
+      {...props}
+    />
+  )
+)
+
+DialogHeader.displayName = 'DialogHeader'
+
+export interface DialogFooterProps
+  extends ComponentProps<'div'>,
+    ClassVariantProps<typeof dialogFooterVariants> {}
+
+export const DialogFooter = forwardRef<HTMLDivElement, DialogFooterProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      className={cx(dialogFooterVariants(), className)}
+      ref={ref}
+      {...props}
+    />
+  )
+)
+
+DialogFooter.displayName = 'DialogFooter'
+
+export interface DialogTitleProps
+  extends ComponentProps<typeof DialogPrimitive.Title>,
+    ClassVariantProps<typeof dialogTitleVariants> {}
+
+export const DialogTitle = forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  DialogTitleProps
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    className={cx(dialogTitleVariants(), className)}
+    ref={ref}
+    {...props}
+  />
+))
+
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+export interface DialogDescriptionProps
+  extends ComponentProps<typeof DialogPrimitive.Description>,
+    ClassVariantProps<typeof dialogDescriptionVariants> {}
+
+export const DialogDescription = forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  DialogDescriptionProps
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    className={cx(dialogDescriptionVariants(), className)}
+    ref={ref}
+    {...props}
+  />
+))
+
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export interface DeleteDialogProps {
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  title?: string
+  description?: string
+  onConfirm?: () => void
+  onCancel?: () => void
+  confirmText?: string
+  cancelText?: string
+  isLoading?: boolean
+}
+
+export function DeleteDialog({
+  open,
+  onOpenChange,
+  title = 'Excluir documento',
+  description = 'Você tem certeza que deseja excluir este documento permanentemente?',
+  onConfirm,
+  onCancel,
+  confirmText = 'Excluir permanentemente',
+  cancelText = 'Cancelar',
+  isLoading = false
+}: DeleteDialogProps) {
+  const handleCancel = () => {
+    onCancel?.()
+    onOpenChange?.(false)
+  }
+
+  const handleConfirm = () => {
+    onConfirm?.()
+  }
+
+  const handleOpenChange = (newOpen: boolean) => {
+    onOpenChange?.(newOpen)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent size="sm">
+        <DialogHeader>
+          <DialogTitle>
+            <Typography size="md" variant="title" weight="semibold">
+              {title}
+            </Typography>
+          </DialogTitle>
+          <DialogDescription>
+            <Typography size="md" variant="body">
+              {description}
+            </Typography>
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button
+            appearance="ghost"
+            disabled={isLoading}
+            variant="tertiary"
+            onClick={handleCancel}
+          >
+            {cancelText}
+          </Button>
+          <Button
+            appearance="solid"
+            disabled={isLoading}
+            variant="destructive"
+            onClick={handleConfirm}
+          >
+            {isLoading ? 'Excluindo...' : confirmText}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/components/drag-and-drop/drag-handle.tsx

@@ -0,0 +1,46 @@
+import { createContext, use, type ComponentProps } from 'react'
+import type { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities'
+import { Slot } from '@radix-ui/react-slot'
+import { cx } from '@xjur-ui/util'
+import { useDndContext } from '@dnd-kit/core'
+
+interface DragHandleContextType {
+  listeners?: SyntheticListenerMap
+  setActivatorNodeRef: (el: HTMLElement | null) => void
+}
+
+export const DragHandlerContext = createContext<DragHandleContextType>(
+  {} as DragHandleContextType
+)
+
+export function DragHandle({
+  className,
+  asChild,
+  ...props
+}: ComponentProps<'button'> & {
+  asChild?: boolean
+}) {
+  const { active } = useDndContext()
+  const context = use(DragHandlerContext)
+
+  if (!context) {
+    throw new Error('DragHandle must be used within a DragHandlerContext')
+  }
+
+  const { listeners, setActivatorNodeRef } = context
+
+  const Comp = asChild ? Slot : 'button'
+
+  return (
+    <Comp
+      className={cx(
+        className,
+        'cursor-grab',
+        active !== null && 'cursor-grabbing'
+      )}
+      {...props}
+      {...listeners}
+      ref={setActivatorNodeRef}
+    />
+  )
+}

package/src/components/drag-and-drop/drag-list-item.tsx

@@ -0,0 +1,91 @@
+import type { UniqueIdentifier } from '@dnd-kit/core'
+import { useSortable } from '@dnd-kit/sortable'
+import { cx } from '@xjur-ui/util'
+import { type ComponentProps, type CSSProperties } from 'react'
+import { CSS } from '@dnd-kit/utilities'
+import type { DragItem } from './types/drag-item'
+import { DragHandlerContext } from './drag-handle'
+
+export function DragListItem({
+  id,
+  className,
+  draggableClassName = '',
+  data,
+  useCustomDragHandle = false,
+  hasOverlay = true,
+  ...props
+}: Omit<ComponentProps<'li'>, 'id'> & {
+  id: UniqueIdentifier
+  draggableClassName?: string
+  data: DragItem
+  useCustomDragHandle?: boolean
+  hasOverlay?: boolean
+}) {
+  const {
+    setNodeRef,
+    setActivatorNodeRef,
+    attributes,
+    listeners,
+    transition,
+    transform,
+    isDragging
+  } = useSortable({
+    id,
+    data
+  })
+
+  const style: CSSProperties = {
+    transition,
+    transform: CSS.Transform.toString(transform),
+    ...(isDragging && {
+      boxShadow: 'none'
+    })
+  }
+
+  const listClassNames = cx(
+    'list-none',
+    useCustomDragHandle ? 'cursor-default' : 'cursor-grab',
+    className
+  )
+
+  if (isDragging) {
+    return (
+      <li
+        className={cx(
+          'data-[overlay=true]:border-border-layer-2 data-[overlay=true]:border-2 data-[overlay=true]:border-dashed data-[overlay=true]:bg-transparent data-[overlay=true]:opacity-60',
+          draggableClassName,
+          className
+        )}
+        data-overlay={hasOverlay}
+        ref={setNodeRef}
+        style={style}
+        {...props}
+      />
+    )
+  }
+
+  if (useCustomDragHandle) {
+    return (
+      <DragHandlerContext.Provider value={{ listeners, setActivatorNodeRef }}>
+        <li
+          className={listClassNames}
+          ref={setNodeRef}
+          style={style}
+          {...attributes}
+          {...props}
+        />
+      </DragHandlerContext.Provider>
+    )
+  }
+
+  return (
+    <li
+      className={listClassNames}
+      ref={setNodeRef}
+      style={style}
+      {...attributes}
+      {...listeners}
+      {...props}
+    />
+  )
+}

package/src/components/drag-and-drop/drag-list.tsx

@@ -0,0 +1,47 @@
+import { useDroppable, type UniqueIdentifier } from '@dnd-kit/core'
+import {
+  type SortableContextProps,
+  verticalListSortingStrategy,
+  horizontalListSortingStrategy,
+  SortableContext
+} from '@dnd-kit/sortable'
+import { cx } from '@xjur-ui/util'
+import type { DragItem } from './types/drag-item'
+
+export function DragList({
+  items,
+  orientation = 'vertical',
+  children,
+  className,
+  id,
+  data,
+  ...props
+}: Omit<SortableContextProps, 'items' | 'id'> & {
+  items: DragItem[]
+  orientation?: 'vertical' | 'horizontal'
+  className?: string
+  id: UniqueIdentifier
+  data?: DragItem
+}) {
+  const strategy =
+    orientation === 'vertical'
+      ? verticalListSortingStrategy
+      : horizontalListSortingStrategy
+
+  const { setNodeRef } = useDroppable({
+    id,
+    data
+  })
+
+  return (
+    <SortableContext
+      items={items.map(item => item)}
+      strategy={strategy}
+      {...props}
+    >
+      <ul className={cx(className)} ref={setNodeRef}>
+        {children}
+      </ul>
+    </SortableContext>
+  )
+}

package/src/components/drag-and-drop/drag-root.tsx

@@ -0,0 +1,30 @@
+import {
+  closestCenter,
+  useSensors,
+  useSensor,
+  PointerSensor,
+  KeyboardSensor,
+  DndContext,
+  type DndContextProps
+} from '@dnd-kit/core'
+import { sortableKeyboardCoordinates } from '@dnd-kit/sortable'
+
+export function DragRoot({
+  collisionDetection = closestCenter,
+  ...props
+}: DndContextProps) {
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates
+    })
+  )
+
+  return (
+    <DndContext
+      collisionDetection={collisionDetection}
+      sensors={props.sensors ?? sensors}
+      {...props}
+    />
+  )
+}

package/src/components/drag-and-drop/index.ts

@@ -0,0 +1,39 @@
+/* Dnd Kit Sortable helpers */
+export { arrayMove, useSortable } from '@dnd-kit/sortable'
+
+/* Dnd Kit Core helpers */
+export {
+  closestCenter,
+  closestCorners,
+  pointerWithin,
+  getFirstCollision,
+  getClientRect,
+  useDroppable,
+  useDndContext,
+  useDraggable,
+  useSensor,
+  useDndMonitor,
+  useSensors
+} from '@dnd-kit/core'
+
+/* Dnd Kit Core Components */
+export { DragOverlay } from '@dnd-kit/core'
+
+/* Dnd Kit Core Types */
+export {
+  type DragEndEvent,
+  type DragStartEvent,
+  type DragOverEvent,
+  type DragAbortEvent,
+  type DragCancelEvent,
+  type DragMoveEvent,
+  type DragPendingEvent,
+  type UniqueIdentifier
+} from '@dnd-kit/core'
+
+/* Drag And Drop Components */
+export { DragRoot } from './drag-root'
+export { DragList } from './drag-list'
+export { DragListItem } from './drag-list-item'
+export { DragHandle } from './drag-handle'
+export type { DragItem } from './types/drag-item'

package/src/components/drag-and-drop/types/drag-item.ts

@@ -0,0 +1,7 @@
+import type { UniqueIdentifier } from '@dnd-kit/core'
+
+export interface DragItem<T = unknown> {
+  id: UniqueIdentifier
+  type: string
+  data: T
+}

package/src/components/dropdown-menu.tsx

@@ -49,7 +49,7 @@ export function DropdownMenuContent({
       <DropdownMenuPrimitive.Content
         align={align}
         className={cx(
-          'group z-10 max-h-[var(--radix-popover-content-available-height)] max-w-[var(--radix-popover-trigger-width)] min-w-[var(--radix-popover-trigger-width)]',
+          'group z-1000 max-h-[var(--radix-popover-content-available-height)] max-w-[var(--radix-popover-trigger-width)] min-w-[var(--radix-popover-trigger-width)]',
           className
         )}
         data-slot="dropdown-menu-content"

package/src/components/full-calendar/calendar-add-event.tsx

@@ -0,0 +1,15 @@
+import { Button } from '../controls/button'
+import { Icon } from '../icon'
+
+interface CalendarAddEventProps {
+  date: Date
+  onAddEvent: (date: Date) => void
+}
+
+export function CalendarAddEvent({ date, onAddEvent }: CalendarAddEventProps) {
+  return (
+    <Button size="icon_sm" variant="outlined" onClick={() => onAddEvent(date)}>
+      <Icon className="text-icon-neutral-3" name="add" />
+    </Button>
+  )
+}

package/src/components/full-calendar/calendar-body.tsx

@@ -0,0 +1,12 @@
+import { cx } from '@xjur-ui/util'
+import type { ComponentProps } from 'react'
+
+export function CalendarBody({ className, ...props }: ComponentProps<'div'>) {
+  return (
+    <div
+      className={cx(className, 'gap-large-2x p-large flex flex-col')}
+      data-slot="calendar-body"
+      {...props}
+    />
+  )
+}

package/src/components/full-calendar/calendar-cell.tsx

@@ -0,0 +1,120 @@
+import { Fragment, useMemo } from 'react'
+import { useDroppable } from '@dnd-kit/core'
+import { cx, tv } from '@xjur-ui/util'
+import { isPast } from 'date-fns'
+import { Typography } from '../typography'
+import { Button } from '../controls/button'
+import { Icon } from '../icon'
+import { isToday } from './helpers/calendar'
+import { useFullCalendar } from './calendar-root'
+import type { ICalendarCell } from './types/calendar-cell'
+import type { ICalendarEvent } from './types/calendar-event'
+import { CalendarMoreEventsDropdown } from './calendar-more-events-dropdown'
+
+interface CalendarCellProps {
+  events: ICalendarEvent[]
+  cell: ICalendarCell
+}
+
+const calendarCellVariants = tv({
+  base: 'group/calendar-cell p-small flex flex-col gap-small-1x w-full bg-layer-2-idle ',
+  variants: {
+    type: {
+      month: 'h-[212px]',
+      week: 'min-h-[64px] max-h-[212px]',
+      day: 'min-h-[64px] max-h-[212px]'
+    }
+  }
+})
+
+export function CalendarCell({ cell, events }: CalendarCellProps) {
+  const { date, type } = cell
+
+  const { renderEvent, activeEventId, onAddEvent, disableEventCreationInPast } =
+    useFullCalendar()
+  const eventsToShow = useMemo(() => events.slice(0, 2), [events])
+  const hasMore = events.length >= 3
+
+  const { isOver, setNodeRef } = useDroppable({
+    id: `calendar-cell-${type}-${date.toISOString()}`,
+    data: {
+      date,
+      type
+    }
+  })
+
+  const isDraggingInCell = useMemo(() => {
+    const cellEvent = events.find(event => event.id === activeEventId)
+
+    if (!cellEvent) return false
+
+    const formatDate = (date: Date) => {
+      return date.toLocaleDateString('pt-BR', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit'
+      })
+    }
+
+    const cellDate = formatDate(date)
+    const cellEventDate = formatDate(cellEvent.eventDate)
+
+    return cellDate === cellEventDate
+  }, [activeEventId, date, events])
+
+  const calendarCellClassNames = calendarCellVariants({ type })
+
+  const disableEventCreation = useMemo(
+    () => disableEventCreationInPast && isPast(date) && !isToday(date),
+    [disableEventCreationInPast, date]
+  )
+
+  return (
+    <div
+      className={calendarCellClassNames}
+      data-slot="calendar-cell"
+      ref={setNodeRef}
+    >
+      {type === 'month' && (
+        <div className="flex items-center justify-center">
+          <div
+            className={cx(
+              'size-large-2x rounded-circle bg-layer-2-idle flex items-center justify-center',
+              isToday(date) && 'bg-primary-idle text-neutral-label'
+            )}
+          >
+            <Typography size="sm" variant="label" weight="medium">
+              {cell.date.getDate()}
+            </Typography>
+          </div>
+        </div>
+      )}
+
+      <div className="gap-small-1x flex flex-col">
+        {eventsToShow.map(event => (
+          <Fragment key={event.id}>{renderEvent(event)}</Fragment>
+        ))}
+
+        {isOver && eventsToShow.length < 2 && !isDraggingInCell && (
+          <div className="border-border-layer-4 rounded-small-2x h-[68px] w-full border border-dashed" />
+        )}
+      </div>
+
+      <div className="mt-auto flex items-center justify-between">
+        {hasMore && <CalendarMoreEventsDropdown events={events.slice(2)} />}
+
+        {onAddEvent && !disableEventCreation && (
+          <div className="invisible ml-auto transition-opacity duration-100 ease-in-out group-hover/calendar-cell:visible">
+            <Button
+              size="icon_sm"
+              variant="outlined"
+              onClick={() => onAddEvent(date)}
+            >
+              <Icon className="text-icon-neutral-3" name="add" />
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}