@mohou/ui 1.0.20

package/src/products/full-calendar/hooks/use-time-range-create.ts

@@ -0,0 +1,152 @@
+import { set as setTime } from 'date-fns'
+import { useCallback, useRef, useState, type PointerEvent as ReactPointerEvent } from 'react'
+
+import { HOUR_HEIGHT_PX } from '../helpers'
+
+export type TimeRangeDraft = {
+  start: Date
+  end: Date
+}
+
+type Selection = {
+  day: Date
+  startMin: number
+  endMin: number
+}
+
+function clamp(n: number, min: number, max: number) {
+  return Math.min(max, Math.max(min, n))
+}
+
+function snapMinutes(raw: number, step = 15) {
+  return Math.round(raw / step) * step
+}
+
+function minutesToDate(day: Date, minutes: number) {
+  const h = Math.floor(minutes / 60)
+  const m = minutes % 60
+  return setTime(day, { hours: h, minutes: m, seconds: 0, milliseconds: 0 })
+}
+
+/** Drag on a day column to select a time range (Google Calendar style). */
+export function useTimeRangeCreate() {
+  const [selection, setSelection] = useState<Selection | null>(null)
+  const [draft, setDraft] = useState<TimeRangeDraft | null>(null)
+  const selectionRef = useRef<Selection | null>(null)
+  const dragRef = useRef<{
+    day: Date
+    originMin: number
+    moved: boolean
+    pointerId: number
+  } | null>(null)
+  /**
+   * Column geometry, captured at pointerdown. While dragging, the column stays
+   * connected we re-read its rect (so an ancestor scroll is followed); if the
+   * node was replaced by a re-render we keep the last good top. A detached
+   * element reports an all-zero DOMRect, and `clientY - 0` counts minutes from
+   * the top of the viewport — which drags a few pixels into a multi-hour range.
+   */
+  const geomRef = useRef<{ el: HTMLElement; top: number } | null>(null)
+
+  const updateSelection = useCallback((next: Selection | null) => {
+    selectionRef.current = next
+    setSelection(next)
+  }, [])
+
+  const yToMinutes = useCallback((clientY: number) => {
+    const geom = geomRef.current
+    if (!geom) return 0
+    // getBoundingClientRect tracks scroll of ancestors; do not add scrollTop again.
+    if (geom.el.isConnected) geom.top = geom.el.getBoundingClientRect().top
+    return clamp(snapMinutes(((clientY - geom.top) / HOUR_HEIGHT_PX) * 60), 0, 24 * 60)
+  }, [])
+
+  const onPointerDown = useCallback(
+    (e: ReactPointerEvent<HTMLElement>, day: Date, columnEl: HTMLElement) => {
+      // Only primary button; ignore when starting on an existing event.
+      if (e.button !== 0) return
+      const target = e.target as HTMLElement | null
+      if (target?.closest('[data-calendar-event],button,a,input,textarea')) return
+
+      e.preventDefault()
+      columnEl.setPointerCapture?.(e.pointerId)
+      geomRef.current = { el: columnEl, top: columnEl.getBoundingClientRect().top }
+      const originMin = yToMinutes(e.clientY)
+      dragRef.current = { day, originMin, moved: false, pointerId: e.pointerId }
+      updateSelection({ day, startMin: originMin, endMin: originMin + 30 })
+    },
+    [updateSelection, yToMinutes],
+  )
+
+  const onPointerMove = useCallback(
+    (e: ReactPointerEvent<HTMLElement>) => {
+      const drag = dragRef.current
+      if (!drag || !geomRef.current) return
+      const mins = yToMinutes(e.clientY)
+      if (Math.abs(mins - drag.originMin) >= 15) drag.moved = true
+      const startMin = Math.min(drag.originMin, mins)
+      const endMin = Math.max(drag.originMin, mins)
+      updateSelection({
+        day: drag.day,
+        startMin,
+        endMin: endMin === startMin ? startMin + 30 : endMin,
+      })
+    },
+    [updateSelection, yToMinutes],
+  )
+
+  const finish = useCallback(() => {
+    const drag = dragRef.current
+    const sel = selectionRef.current
+    dragRef.current = null
+    geomRef.current = null
+    updateSelection(null)
+    if (!drag || !sel) return
+
+    const startMin = Math.min(sel.startMin, sel.endMin)
+    let endMin = Math.max(sel.startMin, sel.endMin)
+    // Click without drag → default 30 minutes.
+    if (!drag.moved || endMin - startMin < 15) endMin = startMin + 30
+    if (endMin > 24 * 60) endMin = 24 * 60
+
+    setDraft({
+      start: minutesToDate(sel.day, startMin),
+      end: minutesToDate(sel.day, endMin),
+    })
+  }, [updateSelection])
+
+  const onPointerUp = useCallback(
+    (e: ReactPointerEvent<HTMLElement>) => {
+      if (!dragRef.current) return
+      try {
+        ;(e.currentTarget as HTMLElement).releasePointerCapture?.(e.pointerId)
+      } catch {
+        /* ignore */
+      }
+      finish()
+    },
+    [finish],
+  )
+
+  const clearDraft = useCallback(() => setDraft(null), [])
+
+  const overlayStyle =
+    selection == null
+      ? null
+      : {
+        top: (Math.min(selection.startMin, selection.endMin) / 60) * HOUR_HEIGHT_PX,
+        height:
+            (Math.abs(selection.endMin - selection.startMin) / 60) * HOUR_HEIGHT_PX ||
+            HOUR_HEIGHT_PX / 2,
+      }
+
+  return {
+    selection,
+    draft,
+    clearDraft,
+    overlayStyle,
+    onPointerDown,
+    onPointerMove,
+    onPointerUp,
+  }
+}

package/src/products/full-calendar/hooks.ts

@@ -0,0 +1,70 @@
+import { useEffect, useState } from 'react';
+
+export function useDisclosure({
+  defaultIsOpen = false,
+}: {
+  defaultIsOpen?: boolean
+} = {}) {
+  const [isOpen, setIsOpen] = useState(defaultIsOpen)
+
+	const onOpen = () => setIsOpen(true)
+	const onClose = () => setIsOpen(false)
+	const onToggle = () => setIsOpen(currentValue => !currentValue)
+
+	return { onOpen, onClose, isOpen, onToggle }
+}
+
+export const useLocalStorage = <T>(
+  key: string,
+  initialValue: T,
+): [T, (value: T | ((prev: T) => T)) => void] => {
+  const readValue = (): T => {
+    if (typeof window === 'undefined') {
+      return initialValue
+		}
+
+    try {
+      const item = window.localStorage.getItem(key)
+			return item ? (JSON.parse(item) as T) : initialValue
+		} catch (error) {
+      console.warn(`Error reading localStorage key "${key}":`, error)
+			return initialValue
+		}
+  };
+
+  const [storedValue, setStoredValue] = useState<T>(readValue)
+
+	const setValue = (value: T | ((prev: T) => T)) => {
+    try {
+      const valueToStore =
+        value instanceof Function ? value(storedValue) : value
+			setStoredValue(valueToStore)
+			if (typeof window !== 'undefined') {
+        window.localStorage.setItem(key, JSON.stringify(valueToStore))
+			}
+    } catch (error) {
+      console.warn(`Error setting localStorage key "${key}":`, error)
+		}
+  };
+
+  return [storedValue, setValue]
+};
+
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(false)
+
+	useEffect(() => {
+    if (typeof window.matchMedia !== 'function') return
+		const media = window.matchMedia(query)
+		if (media.matches !== matches) {
+      setMatches(media.matches)
+		}
+
+    const listener = () => setMatches(media.matches)
+		media.addEventListener('change', listener)
+
+		return () => media.removeEventListener('change', listener)
+	}, [matches, query])
+
+	return matches
+}

package/src/products/full-calendar/interfaces.ts

@@ -0,0 +1,23 @@
+import type { TEventColor } from './types';
+
+export interface IUser {
+  id: string
+  name: string
+  picturePath: string | null
+}
+
+export interface IEvent {
+  id: number
+  startDate: string
+  endDate: string
+  title: string
+  color: TEventColor
+  description: string
+  user: IUser
+}
+
+export interface ICalendarCell {
+  day: number
+  currentMonth: boolean
+  date: Date
+}

package/src/products/full-calendar/settings/settings.tsx

@@ -0,0 +1,80 @@
+import { SettingsIcon } from 'lucide-react'
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@mohou/ui/components/dropdown-menu'
+import { Input } from '@mohou/ui/components/input'
+import { Switch } from '@mohou/ui/components/switch'
+import { useLabels } from '@mohou/ui/i18n/context'
+
+import { MAX_SCROLL_HOUR, MIN_SCROLL_HOUR, useCalendar } from '../contexts/calendar-context'
+
+export function Settings() {
+  const {
+    badgeVariant,
+    setBadgeVariant,
+    use24HourFormat,
+    toggleTimeFormat,
+    startOfDayHour,
+    setStartOfDayHour,
+    agendaModeGroupBy,
+    setAgendaModeGroupBy,
+  } = useCalendar()
+  const t = useLabels('eventCalendar')
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        className="inline-flex size-8 items-center justify-center rounded-lg border border-border bg-background"
+        aria-label={t.settingsAria}
+      >
+        <SettingsIcon className="h-4 w-4" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56">
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>{t.settings}</DropdownMenuLabel>
+          <div className="flex items-center justify-between gap-2 px-1.5 py-1.5 text-sm">
+            <span>{t.useDotBadge}</span>
+            <Switch
+              checked={badgeVariant === 'dot'}
+              onCheckedChange={checked => setBadgeVariant(checked ? 'dot' : 'colored')}
+            />
+          </div>
+          <div className="flex items-center justify-between gap-2 px-1.5 py-1.5 text-sm">
+            <span>{t.use24Hour}</span>
+            <Switch checked={use24HourFormat} onCheckedChange={() => toggleTimeFormat()} />
+          </div>
+          <div className="flex items-center justify-between gap-2 px-1.5 py-1.5 text-sm">
+            <span>{t.scrollHour}</span>
+            <Input
+              type="number"
+              className="h-7 w-16"
+              min={MIN_SCROLL_HOUR}
+              max={MAX_SCROLL_HOUR}
+              value={startOfDayHour}
+              onChange={e => setStartOfDayHour(Number(e.target.value))}
+              onClick={e => e.stopPropagation()}
+              onKeyDown={e => e.stopPropagation()}
+            />
+          </div>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuRadioGroup
+          value={agendaModeGroupBy}
+          onValueChange={value => setAgendaModeGroupBy(value as 'date' | 'color')}
+        >
+          <DropdownMenuLabel>{t.agendaGroupBy}</DropdownMenuLabel>
+          <DropdownMenuRadioItem value="date">{t.groupByDate}</DropdownMenuRadioItem>
+          <DropdownMenuRadioItem value="color">{t.groupByColor}</DropdownMenuRadioItem>
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

package/src/products/full-calendar/shims/avatar-group.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+import { cn } from '@mohou/ui/lib/utils'
+
+export function AvatarGroup({
+  children,
+  className,
+  max = 3,
+}: {
+  children: React.ReactNode
+  className?: string
+  max?: number
+}) {
+  const items = React.Children.toArray(children).slice(0, max)
+  return <div className={cn('flex items-center -space-x-2', className)}>{items}</div>
+}

package/src/products/full-calendar/shims/day-picker.tsx

@@ -0,0 +1 @@
+export { Calendar as DayPicker } from '@mohou/ui/components/calendar'

package/src/products/full-calendar/shims/motion.tsx

@@ -0,0 +1,97 @@
+import * as React from 'react'
+
+function strip(props: Record<string, unknown>) {
+  const {
+    initial: _i,
+    animate: _a,
+    exit: _e,
+    variants: _v,
+    transition: _t,
+    whileHover: _h,
+    whileTap: _p,
+    layout: _l,
+    scrollPosition: _s,
+    ...rest
+  } = props
+  return rest
+}
+
+function make(tag: React.ElementType) {
+  const El = React.forwardRef(function MotionEl(props: Record<string, unknown>, ref: React.Ref<unknown>) {
+    return React.createElement(tag, { ...strip(props), ref })
+  })
+  El.displayName = `motion.${typeof tag === 'string' ? tag : 'el'}`
+  return El
+}
+
+/**
+ * One component per tag, cached.
+ *
+ * Without the cache `motion.div` returns a NEW component type on every property
+ * access, so React sees a different `type` each render and tears the subtree down:
+ * DOM refs held across renders (pointer capture, `getBoundingClientRect` during a
+ * drag) then point at detached nodes, and every `motion.*` descendant remounts on
+ * each state change. Keep this memoised.
+ */
+const byTag = new Map<string, React.ElementType>()
+const byComponent = new Map<React.ElementType, React.ElementType>()
+
+function forTag(tag: string): React.ElementType {
+  let el = byTag.get(tag)
+  if (!el) {
+    el = make(tag as React.ElementType)
+    byTag.set(tag, el)
+  }
+  return el
+}
+
+function forComponent(comp: React.ElementType): React.ElementType {
+  let el = byComponent.get(comp)
+  if (!el) {
+    el = make(comp)
+    byComponent.set(comp, el)
+  }
+  return el
+}
+
+/** Props the shim swallows rather than forwarding to the DOM. */
+export type MotionProps = {
+  initial?: unknown
+  animate?: unknown
+  exit?: unknown
+  variants?: unknown
+  transition?: unknown
+  whileHover?: unknown
+  whileTap?: unknown
+  layout?: unknown
+  scrollPosition?: unknown
+}
+
+/**
+ * `motion.div` has to type as a component taking **the real element's props** plus the motion
+ * ones. Typed as a bare `React.ElementType` (or a `Record<string, unknown>` props bag), every
+ * handler at a call site becomes an implicit any — that is how the week view's
+ * `onPointerDown={(e) => …}` lost its `e`.
+ */
+export type MotionComponents = {
+  [K in keyof React.JSX.IntrinsicElements]: React.ComponentType<
+    React.ComponentProps<K> & MotionProps
+  >
+}
+
+export const motion = new Proxy(
+  { create: (comp: React.ElementType) => forComponent(comp) },
+  {
+    get(target, key) {
+      if (key === 'create') return target.create
+      if (typeof key === 'string') return forTag(key)
+      return undefined
+    },
+  },
+) as unknown as { create: (comp: React.ElementType) => React.ElementType } & MotionComponents
+
+export function AnimatePresence({ children }: { children?: React.ReactNode; initial?: boolean; mode?: string }) {
+  return <>{children}</>
+}
+
+export type Variants = Record<string, unknown>

package/src/products/full-calendar/shims/next-themes.ts

@@ -0,0 +1,6 @@
+export function useTheme() {
+  return {
+    theme: typeof document !== 'undefined' && document.documentElement.classList.contains('dark') ? 'dark' : 'light',
+    setTheme(_theme: string) {},
+  }
+}

package/src/products/full-calendar/shims/re-resizable.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react'
+
+export type ResizeCallback = (
+  _event: unknown,
+  direction: string,
+  ref: { style: { height: string } },
+) => void
+
+export function Resizable({
+  children,
+  className,
+}: {
+  children?: ReactNode
+  className?: string
+  minHeight?: number
+  maxHeight?: number
+  enable?: unknown
+  handleStyles?: unknown
+  handleClasses?: unknown
+  onResizeStart?: unknown
+  onResize?: unknown
+  onResizeStop?: unknown
+}) {
+  return <div className={className}>{children}</div>
+}

package/src/products/full-calendar/shims/sonner.ts

@@ -0,0 +1,4 @@
+export const toast = {
+  success(_message?: string) {},
+  error(_message?: string) {},
+}

package/src/products/full-calendar/types.ts

@@ -0,0 +1,8 @@
+export type TCalendarView = 'day' | 'week' | 'month' | 'year' | 'agenda';
+export type TEventColor =
+	| 'blue'
+	| 'green'
+	| 'red'
+	| 'yellow'
+	| 'purple'
+	| 'orange';

package/src/products/full-calendar/views/agenda-view/agenda-events.tsx

@@ -0,0 +1,140 @@
+import { format, parseISO } from 'date-fns';
+import type { FC } from 'react';
+import { Avatar, AvatarFallback, AvatarImage } from '@mohou/ui/components/avatar';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@mohou/ui/components/command';
+import { useDateLocale, useLabels } from '@mohou/ui/i18n/context';
+import { cn } from '@mohou/ui/lib/utils';
+import { useCalendar } from '../../contexts/calendar-context';
+import { EventDetailsDialog } from '../../dialogs/event-details-dialog';
+import {
+  formatTime,
+  getBgColor,
+  getColorClass,
+  getEventsForMonth,
+  getFirstLetters,
+  toCapitalize,
+} from '../../helpers';
+import { EventBullet } from '../month-view/event-bullet';
+
+export const AgendaEvents: FC = () => {
+  const {
+    events,
+    use24HourFormat,
+    badgeVariant,
+    agendaModeGroupBy,
+    selectedDate,
+  } = useCalendar()
+  const t = useLabels('eventCalendar');
+  const dateLocale = useDateLocale()
+
+  const monthEvents = getEventsForMonth(events, selectedDate)
+
+  const agendaEvents: Record<string, typeof monthEvents> = {}
+  for (const event of monthEvents) {
+    const key =
+      agendaModeGroupBy === 'date'
+        ? format(parseISO(event.startDate), 'yyyy-MM-dd')
+        : event.color;
+    (agendaEvents[key] ??= []).push(event)
+  }
+
+  const groupedAndSortedEvents = Object.entries(agendaEvents).sort(
+    (a, b) => new Date(a[0]).getTime() - new Date(b[0]).getTime(),
+  )
+
+  return (
+    <Command className="py-4 h-[80vh] bg-transparent">
+      <div className="mb-4 mx-4">
+        <CommandInput placeholder={t.searchAgenda} />
+      </div>
+      <CommandList className="max-h-max px-3 border-t">
+        {groupedAndSortedEvents.map(([date, groupedEvents]) => (
+          <CommandGroup
+            key={date}
+            heading={
+              agendaModeGroupBy === 'date'
+                ? format(parseISO(date), 'EEEE, MMMM d, yyyy', { locale: dateLocale })
+                : toCapitalize(groupedEvents?.[0]?.color ?? '')
+            }
+          >
+            {groupedEvents!.map(event => (
+              <CommandItem
+                key={event.id}
+                className={cn(
+                  'mb-2 p-4 border rounded-md data-[selected=true]:bg-bg transition-all data-[selected=true]:text-none hover:cursor-pointer',
+                  {
+                    [getColorClass(event.color)]: badgeVariant === 'colored',
+                    'hover:bg-zinc-200 dark:hover:bg-gray-900':
+                      badgeVariant === 'dot',
+                    'hover:opacity-60': badgeVariant === 'colored',
+                  },
+                )}
+              >
+                <EventDetailsDialog event={event}>
+                  <div className="w-full flex items-center justify-between gap-4">
+                    <div className="flex items-center gap-2">
+                      {badgeVariant === 'dot' ? (
+                        <EventBullet color={event.color} />
+                      ) : (
+                        <Avatar>
+                          <AvatarImage src="" alt="@shadcn" />
+                          <AvatarFallback className={getBgColor(event.color)}>
+                            {getFirstLetters(event.title)}
+                          </AvatarFallback>
+                        </Avatar>
+                      )}
+                      <div className="flex flex-col">
+                        <p
+                          className={cn({
+                            'font-medium': badgeVariant === 'dot',
+                            'text-foreground': badgeVariant === 'dot',
+                          })}
+                        >
+                          {event.title}
+                        </p>
+                        <p className="text-muted-foreground text-sm line-clamp-1 text-ellipsis md:text-clip w-1/3">
+                          {event.description}
+                        </p>
+                      </div>
+                    </div>
+                    <div className="w-40 flex justify-center items-center gap-1">
+                      {agendaModeGroupBy === 'date' ? (
+                        <>
+                          <p className="text-sm">
+                            {formatTime(event.startDate, use24HourFormat)}
+                          </p>
+                          <span className="text-muted-foreground">-</span>
+                          <p className="text-sm">
+                            {formatTime(event.endDate, use24HourFormat)}
+                          </p>
+                        </>
+                      ) : (
+                        <>
+                          <p className="text-sm">
+                            {format(event.startDate, 'MM/dd/yyyy')}
+                          </p>
+                          <span className="text-sm">at</span>
+                          <p className="text-sm">
+                            {formatTime(event.startDate, use24HourFormat)}
+                          </p>
+                        </>
+                      )}
+                    </div>
+                  </div>
+                </EventDetailsDialog>
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        ))}
+        <CommandEmpty>{t.noEvents}</CommandEmpty>
+      </CommandList>
+    </Command>
+  )
+};