@xjur-ui/react 1.0.6 → 2.1.0

package/src/components/form/select.tsx

@@ -0,0 +1,274 @@
+import { tv, twJoin, twMerge } from '@xjur-ui/util'
+import { useMemo, type ComponentProps } from 'react'
+import * as RadixPopover from '@radix-ui/react-popover'
+import { Icon, type IconType } from '../icon'
+import { Typography } from '../typography'
+import {
+  ListHeaderTitle,
+  ListHeader,
+  ListContent,
+  ListItem,
+  ListRoot
+} from '../list'
+import {
+  FieldContext,
+  useFieldContext,
+  type FieldContextValue
+} from './context/field.context'
+import { FloatingLabel } from './floating-label'
+
+export const select = tv({
+  slots: {
+    wrapper: 'group flex w-full flex-col gap-small-2x',
+    trigger: [
+      'h-large-4x w-full cursor-pointer relative',
+      'flex items-center gap-small rounded-small-1x justify-between',
+      'py-small_1x-alt px-small',
+      'bg-layer-2-idle border border-border-layer-2',
+      'group-has-[div[data-slot=input-action-slot]]:rounded-r-none',
+      'transition-all duration-200'
+    ],
+    content: [
+      'group z-10 max-h-[var(--radix-popover-content-available-height)] max-w-[var(--radix-popover-content-available-width)] min-w-[var(--radix-popover-trigger-width)]'
+    ],
+    icon: 'size-large text-icon-neutral-3 flex items-center justify-center',
+    slotText:
+      'size-large flex items-center justify-center !text-size-label-md text-neutral-placeholder',
+    caption: '!text-size-body-sm font-normal'
+  },
+  variants: {
+    state: {
+      normal: {
+        trigger:
+          'hover:border-border-layer-3 data-[state=open]:border-primary-idle data-[state=open]:hover:border-primary-idle'
+      },
+      error: {
+        trigger:
+          'border-danger-idle hover:border-danger-idle data-[state=open]:border-danger-idle data-[state=open]:hover:border-danger-idle',
+        caption: 'text-danger-label-idle'
+      },
+      disabled: {
+        trigger: 'pointer-events-none border-transparent bg-layer-2-idle'
+      }
+    }
+  }
+})
+
+const { wrapper, trigger, icon, caption, slotText, content } = select()
+
+export function SelectRoot({
+  className,
+  state = 'normal',
+  defaultOpen,
+  variant = 'normal',
+  modal,
+  open,
+  onOpenChange: handleOpenChange,
+  ...props
+}: ComponentProps<'div'> &
+  FieldContextValue &
+  ComponentProps<typeof RadixPopover.Root>) {
+  return (
+    <RadixPopover.Root
+      defaultOpen={defaultOpen}
+      modal={modal}
+      open={open}
+      onOpenChange={handleOpenChange}
+    >
+      <FieldContext.Provider value={{ state, variant }}>
+        <div className={wrapper({ className, state })} {...props} />
+      </FieldContext.Provider>
+    </RadixPopover.Root>
+  )
+}
+
+export function SelectTrigger({
+  className,
+  ...props
+}: ComponentProps<typeof RadixPopover.Trigger>) {
+  const { state, variant } = useFieldContext()
+
+  const filterTrigger = tv({
+    base: ['group bg-layer-2-idle'],
+    variants: {
+      state: {
+        normal: [
+          'border-border-layer-2 hover:border-border-layer-3 has-[input:not(:placeholder-shown)]:border-primary-idle'
+        ],
+        error: ['border-danger-idle hover:border-danger-idle'],
+        disabled: ['border border-border-layer-2 opacity-60']
+      }
+    }
+  })
+
+  const mergedClassName = twMerge(
+    trigger({ state, className }),
+    variant === 'filter' && filterTrigger({ state, className })
+  )
+
+  return (
+    <RadixPopover.Trigger
+      className={mergedClassName}
+      disabled={state === 'disabled'}
+      {...props}
+    />
+  )
+}
+
+export function SelectIcon({
+  className,
+  name,
+  ...props
+}: ComponentProps<'div'> & {
+  name: IconType
+}) {
+  const { state } = useFieldContext()
+
+  return (
+    <div className={icon({ className, state })} {...props}>
+      <Icon name={name} />
+    </div>
+  )
+}
+
+export function SelectLabel(props: ComponentProps<typeof FloatingLabel>) {
+  return <FloatingLabel {...props} />
+}
+
+export function SelectValue({
+  className,
+  displayValue = '',
+  value,
+  placeholder,
+  ...props
+}: ComponentProps<'input'> & { displayValue?: string }) {
+  const { variant } = useFieldContext()
+
+  const valueOrPlaceholder = useMemo(() => {
+    if (variant === 'filter') return displayValue
+    return displayValue || placeholder
+  }, [displayValue, placeholder, variant])
+
+  return (
+    <div className="flex w-full">
+      <Typography className="text-neutral-dark group-has-[div[data-slot=date-picker-left-slot]]:pl-large-1x">
+        {valueOrPlaceholder}
+      </Typography>
+
+      <input
+        {...props}
+        aria-readonly={true}
+        className={twJoin('pointer-events-none', className)}
+        hidden={true}
+        placeholder={' '}
+        readOnly={true}
+        value={value ?? ''}
+      />
+    </div>
+  )
+}
+
+export function SelectMultiValue({
+  className,
+  value,
+  placeholder,
+  children,
+  ...props
+}: ComponentProps<'input'>) {
+  const { variant } = useFieldContext()
+
+  const shouldShowPlaceholder = useMemo(() => {
+    if (variant === 'filter') return false
+    return Array.isArray(value) && value.length === 0 && placeholder
+  }, [value, placeholder, variant])
+
+  return (
+    <div
+      className={twMerge(
+        className,
+        'gap-small-1x scrollbar-hide flex w-full overflow-x-hidden',
+        'group-disabled:!pl-0'
+      )}
+    >
+      {shouldShowPlaceholder && (
+        <Typography className="text-neutral-dark group-has-[div[data-slot=date-picker-left-slot]]:pl-large-1x">
+          {placeholder}
+        </Typography>
+      )}
+
+      {children}
+
+      <input
+        {...props}
+        aria-readonly={true}
+        className={twMerge(className, 'pointer-events-none')}
+        hidden={true}
+        placeholder={' '}
+        readOnly={true}
+        value={value}
+      />
+    </div>
+  )
+}
+
+export function SelectContent({
+  className,
+  sideOffset = 5,
+  side = 'bottom',
+  align = 'start',
+  children,
+  ...props
+}: ComponentProps<typeof RadixPopover.Content>) {
+  const { state } = useFieldContext()
+
+  return (
+    <RadixPopover.Portal>
+      <RadixPopover.Content
+        align={align}
+        className={content({ className, state })}
+        side={side}
+        sideOffset={sideOffset}
+        {...props}
+      >
+        <ListRoot>{children}</ListRoot>
+      </RadixPopover.Content>
+    </RadixPopover.Portal>
+  )
+}
+
+export function SelectCaption({ className, ...props }: ComponentProps<'p'>) {
+  const { state } = useFieldContext()
+  return <p className={caption({ className, state })} {...props} />
+}
+
+export function SelectSlot({ className, ...props }: ComponentProps<'span'>) {
+  const { state } = useFieldContext()
+  return <span className={slotText({ className, state })} {...props} />
+}
+
+export function SelectOptions(props: ComponentProps<typeof ListContent>) {
+  return <ListContent {...props} />
+}
+
+export function SelectOption({
+  className,
+  ...props
+}: ComponentProps<typeof ListItem>) {
+  return (
+    <ListItem className={twMerge(className, 'cursor-pointer')} {...props} />
+  )
+}
+
+export function SelectOptionText(props: ComponentProps<typeof Typography>) {
+  return <Typography {...props} />
+}
+
+export function SelectHeader(props: ComponentProps<typeof ListHeader>) {
+  return <ListHeader {...props} />
+}
+
+export function SelectHeaderTitle(
+  props: ComponentProps<typeof ListHeaderTitle>
+) {
+  return <ListHeaderTitle {...props} />
+}

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

@@ -0,0 +1,15 @@
+import { Button } from '../form/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 '../form/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>
+  )
+}

package/src/components/full-calendar/calendar-day-view.tsx

@@ -0,0 +1,76 @@
+import { useCallback } from 'react'
+import { cx } from '@xjur-ui/util'
+import { setHours } from 'date-fns'
+import { Typography } from '../typography'
+import { WEEK_HOURS, 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 CalendarDayView() {
+  const { selectedDate, events } = useFullCalendar()
+
+  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="bg-layer-2-hover sticky top-0 z-10 flex w-full"
+          data-slot="week-header"
+        >
+          <div className="w-[64px]" />
+          <CalendarWeekDay
+            className="border-border-layer-2 items-start border-l"
+            date={selectedDate}
+          />
+        </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(
+                  'flex flex-1',
+                  '[&>*]:border-border-layer-2',
+                  '[&>*]:border-t',
+                  '[&>*]:border-l'
+                )}
+              >
+                <CalendarCell
+                  cell={cellsWithHour(
+                    {
+                      date: selectedDate,
+                      type: 'day'
+                    },
+                    hour
+                  )}
+                  events={getEventsForDayAndHourCallback(selectedDate, hour)}
+                />
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,178 @@
+import { cx, tv } from '@xjur-ui/util'
+import type { ComponentProps } from 'react'
+import { useDraggable } from '@dnd-kit/core'
+import { Typography } from '../typography'
+import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip'
+import type {
+  ICalendarEvent,
+  ICalendarEventStatus
+} from './types/calendar-event'
+import { useFullCalendar } from './calendar-root'
+
+const eventVariants = tv({
+  base: 'py-small_1x-alt pr-small pl-medium rounded-small-2x transition-colors duration-100 ease-out',
+  variants: {
+    status: {
+      pending:
+        'bg-layer-2-hover border-l-2 border-border-layer-4 hover:bg-layer-2-pressed active:bg-layer-2-active',
+      completed:
+        'bg-success-alt-idle border-l-2 border-success-idle hover:bg-success-alt-hover active:bg-success-alt-pressed',
+      cancelled:
+        'bg-danger-alt-idle border-l-2 border-danger-idle hover:bg-danger-alt-hover active:bg-danger-alt-pressed'
+    }
+  },
+  defaultVariants: {
+    status: 'pending'
+  }
+})
+
+interface CalendarEventProps extends ComponentProps<'div'> {
+  event: ICalendarEvent
+  disabled?: boolean
+  status?: ICalendarEventStatus
+}
+
+export function CalendarEvent({
+  event,
+  disabled = false,
+  status = 'pending',
+  className,
+  children,
+  ...props
+}: CalendarEventProps) {
+  const { onEventMove } = useFullCalendar()
+  const isDraggingDisabled = disabled || !onEventMove
+
+  const { attributes, listeners, setNodeRef, transform, isDragging } =
+    useDraggable({
+      id: event.id,
+      disabled: isDraggingDisabled,
+      data: {
+        event,
+        type: 'calendar-event'
+      }
+    })
+
+  const style = transform
+    ? {
+        transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`
+      }
+    : undefined
+
+  return (
+    <div
+      className={cx(
+        disabled && 'pointer-events-none',
+        'cursor-pointer active:cursor-grabbing',
+        isDragging && 'z-1000 -rotate-2',
+        eventVariants({ status }),
+        className
+      )}
+      data-draggable-event-id={event.id}
+      data-slot="calendar-event"
+      ref={setNodeRef}
+      style={style}
+      {...listeners}
+      {...attributes}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+export function CalendarEventTitle({
+  size = 'sm',
+  variant = 'label',
+  weight = 'medium',
+  className,
+  ...props
+}: ComponentProps<typeof Typography>) {
+  const { activeEventId } = useFullCalendar()
+
+  if (activeEventId !== null) {
+    return (
+      <Typography
+        className={cx(className, 'text-title-neutral truncate')}
+        size={size}
+        variant={variant}
+        weight={weight}
+        {...props}
+      />
+    )
+  }
+
+  return (
+    <Tooltip delayDuration={500}>
+      <TooltipTrigger asChild={true}>
+        <Typography
+          className={cx(className, 'text-title-neutral truncate')}
+          size={size}
+          variant={variant}
+          weight={weight}
+          {...props}
+        />
+      </TooltipTrigger>
+      <TooltipContent className="max-w-[320px]">
+        {props.children}
+      </TooltipContent>
+    </Tooltip>
+  )
+}
+
+export function CalendarEventDescription({
+  size = 'sm-1x',
+  variant = 'body',
+  weight = 'normal',
+  className,
+  ...props
+}: ComponentProps<typeof Typography>) {
+  const { activeEventId } = useFullCalendar()
+
+  if (activeEventId !== null) {
+    return (
+      <Typography
+        className={cx(className, 'truncate')}
+        size={size}
+        variant={variant}
+        weight={weight}
+        {...props}
+      />
+    )
+  }
+
+  return (
+    <Tooltip delayDuration={500}>
+      <TooltipTrigger asChild={true}>
+        <Typography
+          className={cx(className, 'truncate')}
+          size={size}
+          variant={variant}
+          weight={weight}
+          {...props}
+        />
+      </TooltipTrigger>
+      <TooltipContent className="max-w-[320px]">
+        {props.children}
+      </TooltipContent>
+    </Tooltip>
+  )
+}
+
+export function CalendarEventStatus({
+  variant = 'body',
+  size = 'sm-1x',
+  weight = 'normal',
+  className,
+  ...props
+}: ComponentProps<typeof Typography>) {
+  return (
+    <Typography
+      className={cx(className, 'truncate')}
+      size={size}
+      variant={variant}
+      weight={weight}
+      {...props}
+    />
+  )
+}

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

@@ -0,0 +1,14 @@
+import { cx } from '@xjur-ui/util'
+import type { ComponentProps } from 'react'
+
+export function CalendarHeader({ className, ...props }: ComponentProps<'div'>) {
+  return (
+    <div
+      {...props}
+      className={cx(
+        className,
+        'gap-medium h-large-4x flex w-full items-center'
+      )}
+    />
+  )
+}