@mohou/ui 1.0.20

package/src/products/diff-viewer.tsx

@@ -0,0 +1,224 @@
+
+import { useEffect, useState } from 'react'
+import { diffLines } from 'diff'
+
+import { useHtmlDark } from '@mohou/ui/hooks/use-html-dark'
+import { cn } from '@mohou/ui/lib/utils'
+
+type Row = {
+  type: 'equal' | 'add' | 'del'
+  text: string
+  left?: number | undefined
+  right?: number | undefined
+}
+
+type Token = { content: string; color?: string | undefined }
+
+function toRows(original: string, modified: string): Row[] {
+  const parts = diffLines(original, modified)
+  const rows: Row[] = []
+  let left = 1
+  let right = 1
+  for (const part of parts) {
+    const lines = part.value.replace(/\n$/, '').split('\n')
+    for (const text of lines) {
+      if (part.added) {
+        rows.push({ type: 'add', text, right: right++ })
+      } else if (part.removed) {
+        rows.push({ type: 'del', text, left: left++ })
+      } else {
+        rows.push({ type: 'equal', text, left: left++, right: right++ })
+      }
+    }
+  }
+  return rows
+}
+
+function stats(rows: Row[]) {
+  return {
+    added: rows.filter(row => row.type === 'add').length,
+    removed: rows.filter(row => row.type === 'del').length,
+  }
+}
+
+function escapeHtml(s: string): string {
+  return s
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+}
+
+function lineToHtml(tokens: Token[]): string {
+  return tokens
+    .map(t =>
+      t.color
+        ? `<span style="color:${escapeHtml(t.color)}">${escapeHtml(t.content)}</span>`
+        : escapeHtml(t.content),
+    )
+    .join('')
+}
+
+function langFromFile(name?: string): string {
+  const ext = name?.split('.').pop()?.toLowerCase()
+  const map: Record<string, string> = {
+    ts: 'ts',
+    tsx: 'tsx',
+    js: 'js',
+    jsx: 'jsx',
+    json: 'json',
+    html: 'html',
+    md: 'md',
+    css: 'css',
+  }
+  return (ext && map[ext]) || 'ts'
+}
+
+function Gutter({ n }: { n?: number | undefined }) {
+  return (
+    <span className="w-8 shrink-0 pr-2 text-right text-[11px] text-muted-foreground/70 select-none">
+      {n ?? ''}
+    </span>
+  )
+}
+
+function Line({
+  row,
+  side,
+  html,
+}: {
+  row: Row
+  side?: 'left' | 'right' | undefined
+  html?: string | undefined
+}) {
+  const hidden =
+    (side === 'left' && row.type === 'add') ||
+    (side === 'right' && row.type === 'del')
+  const mark = row.type === 'add' ? '+' : row.type === 'del' ? '-' : ' '
+  return (
+    <div
+      className={cn(
+        'flex px-2',
+        hidden && 'bg-muted/40',
+        !hidden && row.type === 'add' && 'bg-emerald-500/15',
+        !hidden && row.type === 'del' && 'bg-destructive/10',
+        !html && !hidden && row.type === 'add' && 'text-emerald-800 dark:text-emerald-300',
+        !html && !hidden && row.type === 'del' && 'text-destructive',
+      )}
+    >
+      {side !== 'right' ? <Gutter n={hidden ? undefined : row.left} /> : null}
+      {side !== 'left' ? <Gutter n={hidden ? undefined : row.right} /> : null}
+      <span className="w-4 shrink-0 select-none">{hidden ? ' ' : mark}</span>
+      {hidden ? (
+        <span className="min-w-0 flex-1" />
+      ) : html ? (
+        <span
+          className="min-w-0 flex-1 whitespace-pre-wrap break-all"
+          dangerouslySetInnerHTML={{ __html: html }}
+        />
+      ) : (
+        <span className="min-w-0 flex-1 whitespace-pre-wrap break-all">{row.text}</span>
+      )}
+    </div>
+  )
+}
+
+/**
+ * Unified or split diff view.
+ * @when Comparing two versions of text. Pass `original` + `modified` strings.
+ * @example
+ * <DiffViewer original={a} modified={b} language="ts" mode="split" />
+ * @family Discovery & inspect
+ */
+export function DiffViewer({
+  original,
+  modified,
+  mode = 'unified',
+  fileName,
+  language,
+}: {
+  original: string
+  modified: string
+  mode?: 'unified' | 'split' | undefined
+  fileName?: string | undefined
+  language?: string | undefined
+}) {
+  const rows = toRows(original, modified)
+  const { added, removed } = stats(rows)
+  const lang = language ?? langFromFile(fileName)
+  const [hi, setHi] = useState<{ orig: string[]; mod: string[] } | null>(null)
+  const dark = useHtmlDark()
+
+  useEffect(() => {
+    let cancelled = false
+    ;(async () => {
+      try {
+        const shiki = (await import('https://esm.sh/shiki@4.4.3')) as {
+          codeToTokens?: (code: string | undefined, opts: object) => Promise<{ tokens: Token[][] }>
+          default?: { codeToTokens?: (code: string | undefined, opts: object) => Promise<{ tokens: Token[][] }> }
+        }
+        const codeToTokens = shiki.codeToTokens ?? shiki.default?.codeToTokens
+        if (!codeToTokens) throw new Error('shiki.codeToTokens missing')
+        const theme = dark ? 'github-dark' : 'github-light'
+        const [a, b] = await Promise.all([
+          codeToTokens(original, { lang, theme }),
+          codeToTokens(modified, { lang, theme }),
+        ])
+        if (cancelled) return
+        setHi({
+          orig: a.tokens.map(lineToHtml),
+          mod: b.tokens.map(lineToHtml),
+        })
+      } catch (err) {
+        console.warn('[DiffViewer] shiki CDN failed', err)
+      }
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [original, modified, lang, dark])
+
+  function htmlFor(row: Row): string | undefined {
+    if (!hi) return undefined
+    if (row.type === 'del') return hi.orig[(row.left ?? 1) - 1]
+    if (row.type === 'add') return hi.mod[(row.right ?? 1) - 1]
+    return hi.orig[(row.left ?? 1) - 1] ?? hi.mod[(row.right ?? 1) - 1]
+  }
+
+  return (
+    <div
+      data-testid="diff-viewer"
+      data-mode={mode}
+      className="overflow-hidden rounded-xl border bg-card font-mono text-xs leading-6"
+    >
+      <div className="flex flex-wrap items-center justify-between gap-2 border-b bg-muted/40 px-3 py-1.5">
+        <span className="truncate text-muted-foreground">{fileName ?? 'diff'}</span>
+        <span className="tabular-nums">
+          <span className="text-emerald-700 dark:text-emerald-400">+{added}</span>
+          {' '}
+          <span className="text-destructive">-{removed}</span>
+        </span>
+      </div>
+      {mode === 'split' ? (
+        <div className="grid max-h-[28rem] grid-cols-2 overflow-auto">
+          <div className="border-r">
+            {rows.map((row, index) => (
+              <Line key={`l${index}`} row={row} side="left" html={htmlFor(row)} />
+            ))}
+          </div>
+          <div>
+            {rows.map((row, index) => (
+              <Line key={`r${index}`} row={row} side="right" html={htmlFor(row)} />
+            ))}
+          </div>
+        </div>
+      ) : (
+        <div className="max-h-[28rem] overflow-auto">
+          {rows.map((row, index) => (
+            <Line key={index} row={row} html={htmlFor(row)} />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/products/event-calendar.tsx

@@ -0,0 +1,49 @@
+
+import { cn } from '@mohou/ui/lib/utils'
+
+import { CalendarBody } from './full-calendar/calendar-body'
+import { CalendarProvider } from './full-calendar/contexts/calendar-context'
+import { DndProvider } from './full-calendar/contexts/dnd-context'
+import { CalendarHeader } from './full-calendar/header/calendar-header'
+import type { IEvent, IUser } from './full-calendar/interfaces'
+import type { TCalendarView, TEventColor } from './full-calendar/types'
+
+export type CalendarView = TCalendarView
+export type CalendarEvent = IEvent
+export type CalendarUser = IUser
+export type CalendarEventColor = TEventColor
+
+/**
+ * Full calendar (day / week / month / year / agenda). Event shape matches
+ * yassir-jeraidi/full-calendar: { id, title, startDate, endDate, color, description, user }.
+ * @when Scheduling, on-call, release windows
+ * @example
+ * <EventCalendar events={events} onEventsChange={setEvents} view="week" />
+ * @family Calendar & date
+ */
+export function EventCalendar({
+  events,
+  users = [],
+  view = 'month',
+  date,
+  onEventsChange,
+  className,
+}: {
+  events: IEvent[]
+  users?: IUser[] | undefined
+  view?: TCalendarView | undefined
+  date?: Date | undefined
+  onEventsChange?: (events: IEvent[]) => void
+  className?: string | undefined
+}) {
+  return (
+    <div data-testid="event-calendar" className={cn('w-full overflow-hidden rounded-xl border bg-card', className)}>
+      <CalendarProvider events={events} users={users} view={view} date={date} onEventsChange={onEventsChange}>
+        <DndProvider>
+          <CalendarHeader />
+          <CalendarBody />
+        </DndProvider>
+      </CalendarProvider>
+    </div>
+  )
+}

package/src/products/export-csv.ts

@@ -0,0 +1,26 @@
+export function exportCsv<T extends Record<string, unknown>>(
+  rows: T[],
+  filename = 'export.csv'
+) {
+  const first = rows[0]
+  if (first === undefined) return
+  const keys = Object.keys(first)
+  const csv = [
+    keys.join(','),
+    ...rows.map(row =>
+      keys
+        .map((key) => {
+          const raw = String(row[key] ?? '')
+          return `"${raw.replaceAll('"', '""')}"`
+        })
+        .join(',')
+    ),
+  ].join('\n')
+  const blob = new Blob([csv], { type: 'text/csv;charset=utf-8' })
+  const url = URL.createObjectURL(blob)
+  const link = document.createElement('a')
+  link.href = url
+  link.download = filename
+  link.click()
+  URL.revokeObjectURL(url)
+}

package/src/products/file-dropzone.tsx

@@ -0,0 +1,47 @@
+
+import { useDropzone } from 'react-dropzone'
+
+import { cn } from '@mohou/ui/lib/utils'
+import { useLabels } from '@mohou/ui/i18n/context'
+import { Attachment, AttachmentContent, AttachmentTitle } from '@mohou/ui/components/attachment'
+
+/**
+ * Drag-drop + click file picker.
+ * @when Getting a local File into the app (then upload via `ctx.http` in the api layer).
+ * @example
+ * <FileDropzone onFiles={(fs) => set(fs)} />
+ * @family Form
+ */
+export function FileDropzone({
+  files,
+  onFiles,
+}: {
+  files?: File[]
+  onFiles?: (files: File[]) => void
+}) {
+  const t = useLabels('fileDropzone')
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop: accepted => onFiles?.(accepted),
+  })
+  return (
+    <div className="flex flex-col gap-2" data-testid="file-dropzone">
+      <div
+        {...getRootProps()}
+        className={cn(
+          'flex cursor-pointer flex-col items-center justify-center rounded-xl border border-dashed px-4 py-8 text-sm text-muted-foreground',
+          isDragActive && 'border-primary bg-muted/40'
+        )}
+      >
+        <input {...getInputProps()} />
+        {t.drop}
+      </div>
+      {files?.map(file => (
+        <Attachment key={file.name}>
+          <AttachmentContent>
+            <AttachmentTitle>{file.name}</AttachmentTitle>
+          </AttachmentContent>
+        </Attachment>
+      ))}
+    </div>
+  )
+}

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

@@ -0,0 +1,38 @@
+import type { Variants } from './shims/motion';
+
+export const fadeIn: Variants = {
+  initial: { opacity: 0 },
+  animate: { opacity: 1 },
+  exit: { opacity: 0 },
+}
+
+export const slideFromLeft: Variants = {
+  initial: { x: -20, opacity: 0 },
+  animate: { x: 0, opacity: 1 },
+  exit: { x: 20, opacity: 0 },
+}
+
+export const slideFromRight: Variants = {
+  initial: { x: 20, opacity: 0 },
+  animate: { x: 0, opacity: 1 },
+  exit: { x: -20, opacity: 0 },
+}
+
+export const transition = {
+  type: 'spring',
+  stiffness: 200,
+  damping: 20,
+} as const
+
+export const staggerContainer: Variants = {
+  animate: {
+    transition: {
+      staggerChildren: 0.1,
+    },
+  },
+}
+
+export const buttonHover: Variants = {
+  hover: { scale: 1.05 },
+  tap: { scale: 0.95 },
+}

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

@@ -0,0 +1,76 @@
+
+import { isSameDay, parseISO } from 'date-fns';
+import { motion } from './shims/motion';
+import { fadeIn, transition } from './animations';
+import { useCalendar } from './contexts/calendar-context';
+import { AgendaEvents } from './views/agenda-view/agenda-events';
+import { CalendarMonthView } from './views/month-view/calendar-month-view';
+import { CalendarDayView } from './views/week-and-day-view/calendar-day-view';
+import { CalendarWeekView } from './views/week-and-day-view/calendar-week-view';
+import { CalendarYearView } from './views/year-view/calendar-year-view';
+
+export function CalendarBody() {
+  const { view, events } = useCalendar()
+
+  const singleDayEvents = events.filter((event) => {
+    const startDate = parseISO(event.startDate)
+    const endDate = parseISO(event.endDate)
+    return isSameDay(startDate, endDate)
+  });
+
+  const multiDayEvents = events.filter((event) => {
+    const startDate = parseISO(event.startDate)
+    const endDate = parseISO(event.endDate)
+    return !isSameDay(startDate, endDate)
+  });
+
+  return (
+    <div className="w-full h-full overflow-scroll relative">
+      <motion.div
+        key={view}
+        initial="initial"
+        animate="animate"
+        exit="exit"
+        variants={fadeIn}
+        transition={transition}
+      >
+        {view === 'month' && (
+          <CalendarMonthView
+            singleDayEvents={singleDayEvents}
+            multiDayEvents={multiDayEvents}
+          />
+        )}
+        {view === 'week' && (
+          <CalendarWeekView
+            singleDayEvents={singleDayEvents}
+            multiDayEvents={multiDayEvents}
+          />
+        )}
+        {view === 'day' && (
+          <CalendarDayView
+            singleDayEvents={singleDayEvents}
+            multiDayEvents={multiDayEvents}
+          />
+        )}
+        {view === 'year' && (
+          <CalendarYearView
+            singleDayEvents={singleDayEvents}
+            multiDayEvents={multiDayEvents}
+          />
+        )}
+        {view === 'agenda' && (
+          <motion.div
+            key="agenda"
+            initial="initial"
+            animate="animate"
+            exit="exit"
+            variants={fadeIn}
+            transition={transition}
+          >
+            <AgendaEvents />
+          </motion.div>
+        )}
+      </motion.div>
+    </div>
+  )
+}

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

@@ -0,0 +1,10 @@
+import type { TEventColor } from './types';
+
+export const COLORS: TEventColor[] = [
+  "blue",
+  "green",
+  "red",
+  "yellow",
+  "purple",
+  "orange",
+]