@dnax/ui 0.0.75 → 0.0.76

package/index.ts

@@ -209,6 +209,20 @@ export type { TextareaMetrics, TextareaSizing, TextareaComputedStyle } from "./l
 export { useTextareaAutosize } from "./lib/useTextareaAutosize"
 export type { TextareaAutosize, UseTextareaAutosizeOptions } from "./lib/useTextareaAutosize"
 export { iconsRegistered, registerIconSet, registerIcons } from "./lib/registerIcons"
+export { pageInfo } from "./lib/pagination"
+export type { PageInfo, PageInfoOptions } from "./lib/pagination"
+export { CELL_SIZE_MAX, CELL_SIZE_MIN, CELL_SIZE_PX, cellFontFor, cellSizePx, cellWidthFor } from "./lib/cellSize"
+export type { CellSizePreset } from "./lib/cellSize"
+export { acceptsFile, attachmentsOf, fileIconKind, formatFileSize, isAttachment, selectFiles } from "./lib/fileList"
+export type {
+  AttachmentLike,
+  FileDescriptor,
+  FileIconKind,
+  FileRejection,
+  FileRejectionReason,
+  FileSelection,
+  FileSelectionOptions,
+} from "./lib/fileList"
 export { lucideIconSet } from "./lib/iconSet"
 export { icons } from "./lib/icons"
 export type { IconSetJson } from "./lib/icons"

package/lib/cellSize.test.ts

@@ -0,0 +1,52 @@
+// Taille de cellule : presets, bornes, dérivés (largeur, police).
+// Le point sensible est la **non-régression** : `md` doit reproduire exactement les valeurs
+// historiques (32 px de haut, 160 px de large, 13 px de police).
+import { describe, expect, it } from "bun:test"
+import { CELL_SIZE_MAX, CELL_SIZE_MIN, CELL_SIZE_PX, cellFontFor, cellSizePx, cellWidthFor } from "./cellSize"
+
+describe("cellSizePx", () => {
+  it("md est le défaut historique (32 px)", () => {
+    expect(cellSizePx()).toBe(32)
+    expect(cellSizePx(null)).toBe(32)
+    expect(cellSizePx("md")).toBe(32)
+    expect(CELL_SIZE_PX.md).toBe(32)
+  })
+
+  it("résout les presets", () => {
+    expect(cellSizePx("sm")).toBe(28)
+    expect(cellSizePx("lg")).toBe(40)
+  })
+
+  it("accepte une valeur en px, arrondie et bornée", () => {
+    expect(cellSizePx(48)).toBe(48)
+    expect(cellSizePx(66)).toBe(66)
+    expect(cellSizePx(47.6)).toBe(48)
+    expect(cellSizePx(2)).toBe(CELL_SIZE_MIN)
+    expect(cellSizePx(999)).toBe(CELL_SIZE_MAX)
+    expect(cellSizePx(Number.NaN)).toBe(32)
+  })
+})
+
+describe("cellWidthFor", () => {
+  it("garde le ratio historique 5:1", () => {
+    expect(cellWidthFor(32)).toBe(160)
+    expect(cellWidthFor(28)).toBe(140)
+    expect(cellWidthFor(40)).toBe(200)
+    expect(cellWidthFor(48)).toBe(240)
+    expect(cellWidthFor(66)).toBe(330)
+  })
+})
+
+describe("cellFontFor", () => {
+  it("md garde la police historique (13 px)", () => {
+    expect(cellFontFor(32)).toBe(13)
+  })
+
+  it("grandit avec la cellule puis plafonne", () => {
+    expect(cellFontFor(28)).toBe(11)
+    expect(cellFontFor(40)).toBe(16)
+    expect(cellFontFor(48)).toBe(19)
+    expect(cellFontFor(66)).toBe(20)
+    expect(cellFontFor(120)).toBe(20)
+  })
+})

package/lib/cellSize.ts

@@ -0,0 +1,43 @@
+// Taille de cellule du tableur — calculs **purs** (aucun DOM).
+//
+// Une seule échelle pilote la hauteur de ligne, la largeur de colonne par défaut **et** la
+// taille de police des cellules, pour qu'une grille « large » reste proportionnée (une
+// cellule de 66px avec une police de 13px paraît vide).
+
+/** Presets de hauteur de cellule, en px. */
+export type CellSizePreset = "sm" | "md" | "lg"
+
+export const CELL_SIZE_PX: Record<CellSizePreset, number> = {
+  sm: 28,
+  md: 32,
+  lg: 40,
+}
+
+/** Bornes d'une hauteur passée en nombre (px). */
+export const CELL_SIZE_MIN = 20
+export const CELL_SIZE_MAX = 120
+
+/**
+ * Hauteur de cellule en px : preset (`sm` 28, `md` 32, `lg` 40), nombre borné
+ * `[20, 120]`, ou `md` par défaut / pour une valeur invalide.
+ */
+export const cellSizePx = (size?: CellSizePreset | number | null): number => {
+  if (typeof size === "number" && Number.isFinite(size)) {
+    return Math.min(CELL_SIZE_MAX, Math.max(CELL_SIZE_MIN, Math.round(size)))
+  }
+  if (size === "sm" || size === "md" || size === "lg") return CELL_SIZE_PX[size]
+  return CELL_SIZE_PX.md
+}
+
+/**
+ * Largeur de colonne par défaut dérivée de la hauteur — ratio **5:1**, cohérent avec le
+ * couple historique 32 px / 160 px. Une cellule haute est aussi plus large.
+ */
+export const cellWidthFor = (heightPx: number): number => Math.round(heightPx * 5)
+
+/**
+ * Taille de police des cellules : suit la hauteur (~40 %), bornée pour rester lisible.
+ * `32 px → 13` (la valeur historique), `40 → 16`, `48 → 20`, `66 → 20` (plafond).
+ */
+export const cellFontFor = (heightPx: number): number =>
+  Math.min(20, Math.max(11, Math.round(heightPx * 0.406)))

package/lib/fileList.test.ts

@@ -0,0 +1,119 @@
+// Fichiers joints : règles d'`accept`, quota, icônes — testées sans navigateur ni DOM.
+// Ces helpers sont la seule source de vérité (QFilePicker et QSpreadsheet `attachment`).
+import { describe, expect, it } from "bun:test"
+import {
+  acceptsFile,
+  attachmentsOf,
+  fileIconKind,
+  formatFileSize,
+  selectFiles,
+  type FileDescriptor,
+} from "./fileList"
+
+const file = (name: string, type = "", size = 1000): File =>
+  new File([new Uint8Array(size)], name, { type })
+
+const desc = (name: string, type = ""): FileDescriptor => ({ name, type, size: 0 })
+
+describe("formatFileSize", () => {
+  it("choisit l'unité lisible", () => {
+    expect(formatFileSize(0)).toBe("0 o")
+    expect(formatFileSize(512)).toBe("512 o")
+    expect(formatFileSize(2048)).toBe("2 Ko")
+    expect(formatFileSize(5 * 1024 * 1024)).toBe("5 Mo")
+    expect(formatFileSize(3 * 1024 * 1024 * 1024)).toBe("3.0 Go")
+  })
+
+  it("neutralise les valeurs invalides", () => {
+    expect(formatFileSize(Number.NaN)).toBe("0 o")
+    expect(formatFileSize(-12)).toBe("0 o")
+  })
+})
+
+describe("acceptsFile", () => {
+  it("accepte tout sans motif", () => {
+    expect(acceptsFile(desc("a.bin"), "")).toBe(true)
+    expect(acceptsFile(desc("a.bin"), undefined)).toBe(true)
+    expect(acceptsFile(desc("a.bin"), "  ,  ")).toBe(true)
+  })
+
+  it("gère les jokers de type MIME", () => {
+    expect(acceptsFile(desc("photo.png", "image/png"), "image/*")).toBe(true)
+    expect(acceptsFile(desc("doc.pdf", "application/pdf"), "image/*")).toBe(false)
+    expect(acceptsFile(desc("clip.mp4", "video/mp4"), "image/*, video/*")).toBe(true)
+  })
+
+  it("gère les extensions et les types complets", () => {
+    expect(acceptsFile(desc("rapport.PDF"), ".pdf")).toBe(true)
+    expect(acceptsFile(desc("rapport.txt"), ".pdf")).toBe(false)
+    expect(acceptsFile(desc("a.bin", "Application/PDF"), "application/pdf")).toBe(true)
+  })
+
+  it("ignore un motif invalide (ni MIME, ni extension)", () => {
+    expect(acceptsFile(desc("a.png", "image/png"), "image")).toBe(false)
+  })
+})
+
+describe("fileIconKind", () => {
+  it("classe par type MIME puis par extension", () => {
+    expect(fileIconKind(desc("a.png", "image/png"))).toBe("image")
+    expect(fileIconKind(desc("a.mp4", "video/mp4"))).toBe("video")
+    expect(fileIconKind(desc("a.mp3", "audio/mpeg"))).toBe("audio")
+    expect(fileIconKind(desc("a.zip", "application/zip"))).toBe("archive")
+    expect(fileIconKind(desc("a.xlsx"))).toBe("spreadsheet")
+    expect(fileIconKind(desc("a.ts"))).toBe("code")
+    expect(fileIconKind(desc("a.bin"))).toBe("file")
+  })
+})
+
+describe("selectFiles", () => {
+  it("rejette par type, taille puis quota (dans cet ordre)", () => {
+    const result = selectFiles(
+      [file("a.png", "image/png"), file("b.pdf", "application/pdf"), file("c.png", "image/png", 5000)],
+      { accept: "image/*", maxSize: 2000, maxFiles: 1 },
+    )
+    expect(result.accepted.map((f) => f.name)).toEqual(["a.png"])
+    expect(result.rejected.map((r) => r.reason)).toEqual(["type", "size"])
+  })
+
+  it("tient compte des fichiers déjà présents dans le quota", () => {
+    const result = selectFiles([file("a.png"), file("b.png")], { maxFiles: 3, current: 2 })
+    expect(result.accepted.map((f) => f.name)).toEqual(["a.png"])
+    expect(result.rejected.map((r) => r.reason)).toEqual(["count"])
+  })
+
+  it("sans quota, tout passe (ordre conservé)", () => {
+    const result = selectFiles([file("a.png"), file("b.png")])
+    expect(result.accepted.map((f) => f.name)).toEqual(["a.png", "b.png"])
+    expect(result.rejected).toEqual([])
+  })
+
+  it("quota déjà atteint → tout est rejeté en `count`", () => {
+    const result = selectFiles([file("a.png")], { maxFiles: 2, current: 2 })
+    expect(result.accepted).toEqual([])
+    expect(result.rejected.map((r) => r.reason)).toEqual(["count"])
+  })
+})
+
+describe("attachmentsOf", () => {
+  it("normalise un tableau et ignore les entrées invalides", () => {
+    const list = attachmentsOf([
+      { id: "a", name: "a.png", size: 1, type: "image/png" },
+      { body: "pas un fichier" },
+      null,
+      { name: "b.pdf" },
+    ])
+    expect(list.map((att) => att.name)).toEqual(["a.png", "b.pdf"])
+  })
+
+  it("accepte un fichier seul (donnée posée à la main)", () => {
+    expect(attachmentsOf({ name: "seul.pdf" }).map((att) => att.name)).toEqual(["seul.pdf"])
+  })
+
+  it("renvoie un tableau vide pour le vide ou une chaîne", () => {
+    expect(attachmentsOf(null)).toEqual([])
+    expect(attachmentsOf("")).toEqual([])
+    expect(attachmentsOf([])).toEqual([])
+    expect(attachmentsOf("a.png")).toEqual([])
+  })
+})

package/lib/fileList.ts

@@ -0,0 +1,159 @@
+// Fichiers joints — helpers **purs** partagés par `QFilePicker` et `QSpreadsheet`
+// (type de cellule `attachment`). Aucun DOM : les règles `accept` sont exactement celles
+// de l'attribut HTML (`image/*`, `application/pdf`, `.pdf`…) pour que le filtre du
+// sélecteur et la validation programmatique disent la même chose.
+
+/** Raison d'un rejet de sélection. */
+export type FileRejectionReason = "type" | "size" | "count"
+
+export interface FileRejection {
+  file: File
+  reason: FileRejectionReason
+}
+
+/** Ce dont les helpers ont besoin — un vrai `File` y satisfait. */
+export interface FileDescriptor {
+  name: string
+  type: string
+  size: number
+}
+
+const ARCHIVE_EXT = /\.(zip|rar|7z|tar|gz|bz2|xz|tgz)$/
+const SPREADSHEET_EXT = /\.(xlsx|xls|csv|ods|tsv)$/
+const CODE_EXT =
+  /\.(json|js|mjs|cjs|ts|jsx|tsx|html?|xml|css|scss|sass|less|vue|py|java|c|cpp|h|hpp|sh|bash|yml|yaml|toml|ini|go|rs|php|rb|swift|kt)$/
+
+/** Famille d'icône d'un fichier (le composant la mappe sur `icons.*`). */
+export type FileIconKind =
+  | "image"
+  | "video"
+  | "audio"
+  | "archive"
+  | "spreadsheet"
+  | "code"
+  | "file"
+
+export const fileIconKind = (file: Pick<FileDescriptor, "name" | "type">): FileIconKind => {
+  const type = (file.type ?? "").toLowerCase()
+  const name = (file.name ?? "").toLowerCase()
+  if (type.startsWith("video/")) return "video"
+  if (type.startsWith("audio/")) return "audio"
+  if (ARCHIVE_EXT.test(name) || /zip|compressed/.test(type)) return "archive"
+  if (SPREADSHEET_EXT.test(name) || type.includes("spreadsheet") || type.includes("excel")) {
+    return "spreadsheet"
+  }
+  if (CODE_EXT.test(name)) return "code"
+  if (type.startsWith("image/")) return "image"
+  return "file"
+}
+
+/** Taille lisible : `o` / `Ko` / `Mo` / `Go`. */
+export const formatFileSize = (bytes: number): string => {
+  if (!Number.isFinite(bytes) || bytes < 0) return "0 o"
+  if (bytes >= 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} Go`
+  if (bytes >= 1024 * 1024) return `${Math.round(bytes / (1024 * 1024))} Mo`
+  if (bytes >= 1024) return `${Math.round(bytes / 1024)} Ko`
+  return `${bytes} o`
+}
+
+/**
+ * Le fichier correspond-il à `accept` ? Mêmes règles que l'attribut HTML : liste
+ * séparée par des virgules, `type/*`, type MIME complet ou extension (`.pdf`).
+ * `accept` vide/absent → tout passe.
+ */
+export const acceptsFile = (
+  file: Pick<FileDescriptor, "name" | "type">,
+  accept?: string,
+): boolean => {
+  const patterns = (accept ?? "")
+    .split(",")
+    .map((pattern) => pattern.trim().toLowerCase())
+    .filter(Boolean)
+  if (patterns.length === 0) return true
+
+  const name = (file.name ?? "").toLowerCase()
+  const type = (file.type ?? "").toLowerCase()
+
+  return patterns.some((pattern) => {
+    // `image/*`, `video/*`… (et `application/*` par généralisation)
+    if (pattern.endsWith("/*")) return type.startsWith(pattern.slice(0, -1))
+    if (pattern.startsWith(".")) return name.endsWith(pattern)
+    if (pattern.includes("/")) return type === pattern
+    return false
+  })
+}
+
+export interface FileSelectionOptions {
+  /** Motif `accept` de la colonne (voir `acceptsFile`) */
+  accept?: string
+  /** Taille maximale par fichier, en octets (0/absent = illimité) */
+  maxSize?: number
+  /** Nombre maximum de fichiers au total (0/absent = illimité) */
+  maxFiles?: number
+  /** Fichiers déjà présents (réduit le quota restant) */
+  current?: number
+}
+
+export interface FileSelection {
+  accepted: File[]
+  rejected: FileRejection[]
+}
+
+/**
+ * Filtre une sélection : par type, par taille, puis par quota — dans cet ordre, pour que
+ * le motif de rejet soit le plus précis possible. L'ordre des fichiers acceptés est celui
+ * de `incoming`.
+ */
+export const selectFiles = (
+  incoming: File[],
+  options: FileSelectionOptions = {},
+): FileSelection => {
+  const accepted: File[] = []
+  const rejected: FileRejection[] = []
+
+  const valid: File[] = []
+  for (const file of incoming) {
+    if (options.maxSize && options.maxSize > 0 && file.size > options.maxSize) {
+      rejected.push({ file, reason: "size" })
+      continue
+    }
+    if (!acceptsFile(file, options.accept)) {
+      rejected.push({ file, reason: "type" })
+      continue
+    }
+    valid.push(file)
+  }
+
+  const quota = options.maxFiles && options.maxFiles > 0 ? options.maxFiles : Number.POSITIVE_INFINITY
+  const remaining = Math.max(0, quota - Math.max(0, options.current ?? 0))
+  for (const [index, file] of valid.entries()) {
+    if (index < remaining) accepted.push(file)
+    else rejected.push({ file, reason: "count" })
+  }
+
+  return { accepted, rejected }
+}
+
+// ─── Fichiers stockés dans une cellule (`attachment`) ───
+
+/** Forme minimale d'un fichier stocké (ce qu'une cellule `attachment` contient). */
+export interface AttachmentLike {
+  id?: string
+  name: string
+  size?: number
+  type?: string
+  url?: string
+}
+
+/** L'entrée ressemble-t-elle à un fichier stocké ? (tolérance des données importées) */
+export const isAttachment = (value: unknown): value is AttachmentLike =>
+  !!value && typeof value === "object" && typeof (value as { name?: unknown }).name === "string"
+
+/**
+ * Valeur d'une cellule `attachment` normalisée en tableau : un fichier **seul** est accepté
+ * (donnée posée à la main ou importée), tout le reste est ignoré.
+ */
+export const attachmentsOf = (value: unknown): AttachmentLike[] => {
+  if (Array.isArray(value)) return value.filter(isAttachment)
+  return isAttachment(value) ? [value] : []
+}

package/lib/pagination.test.ts

@@ -0,0 +1,77 @@
+// Pagination distante : bornes, nombre de pages, plage globale des lignes.
+// Les cas qui cassent en pratique : total qui rétrécit (page hors bornes), dernière page
+// partielle, `pageSize` désactivé, total nul.
+import { describe, expect, it } from "bun:test"
+import { pageInfo } from "./pagination"
+
+describe("pageInfo", () => {
+  it("calcule la première page", () => {
+    expect(pageInfo({ page: 1, pageSize: 400, total: 1200 })).toEqual({
+      page: 1,
+      pageCount: 3,
+      offset: 0,
+      from: 1,
+      to: 400,
+    })
+  })
+
+  it("décale la plage sur les pages suivantes", () => {
+    expect(pageInfo({ page: 3, pageSize: 400, total: 1200 })).toEqual({
+      page: 3,
+      pageCount: 3,
+      offset: 800,
+      from: 801,
+      to: 1200,
+    })
+  })
+
+  it("gère une dernière page partielle", () => {
+    expect(pageInfo({ page: 2, pageSize: 400, total: 500 })).toEqual({
+      page: 2,
+      pageCount: 2,
+      offset: 400,
+      from: 401,
+      to: 500,
+    })
+  })
+
+  it("tient compte des lignes réellement chargées", () => {
+    // La page 2 n'a reçu que 80 lignes (chargement partiel) : la plage le reflète
+    expect(pageInfo({ page: 2, pageSize: 400, total: 1200, loaded: 80 })).toMatchObject({
+      from: 401,
+      to: 480,
+    })
+  })
+
+  it("borne une page trop haute ou trop basse", () => {
+    expect(pageInfo({ page: 99, pageSize: 400, total: 1200 }).page).toBe(3)
+    expect(pageInfo({ page: 0, pageSize: 400, total: 1200 }).page).toBe(1)
+    expect(pageInfo({ page: -5, pageSize: 400, total: 1200 }).page).toBe(1)
+    expect(pageInfo({ page: Number.NaN, pageSize: 400, total: 1200 }).page).toBe(1)
+  })
+
+  it("sans pagination : une seule page, tout est affiché", () => {
+    expect(pageInfo({ page: 1, pageSize: 0, total: 250 })).toEqual({
+      page: 1,
+      pageCount: 1,
+      offset: 0,
+      from: 1,
+      to: 250,
+    })
+  })
+
+  it("total nul : from/to à 0", () => {
+    expect(pageInfo({ page: 1, pageSize: 400, total: 0 })).toEqual({
+      page: 1,
+      pageCount: 1,
+      offset: 0,
+      from: 0,
+      to: 0,
+    })
+  })
+
+  it("ne dépasse jamais le total", () => {
+    // `loaded` plus grand que le quota (données incohérentes) → plage bornée au total
+    expect(pageInfo({ page: 1, pageSize: 400, total: 10, loaded: 400 }).to).toBe(10)
+  })
+})

package/lib/pagination.ts

@@ -0,0 +1,50 @@
+// Pagination « distante » d'une grille — calculs **purs** (aucun DOM, aucun état).
+//
+// Le tableau ne découpe rien lui-même : `rows` contient **la page courante**, chargée par
+// l'app. Ce module borne la page, calcule le nombre de pages et la plage globale des lignes
+// affichées (numérotation des en-têtes de ligne, « lignes 401–800 sur 12 000 »).
+
+export interface PageInfo {
+  /** Page courante, bornée à `[1, pageCount]` */
+  page: number
+  /** Nombre de pages (toujours ≥ 1) */
+  pageCount: number
+  /** Décalage global de la première ligne affichée (0-based) */
+  offset: number
+  /** Numéro global (1-based) de la première ligne affichée — `0` si le total est nul */
+  from: number
+  /** Numéro global (1-based) de la dernière ligne affichée — `0` si le total est nul */
+  to: number
+}
+
+export interface PageInfoOptions {
+  /** Page demandée (1-based) — bornée au résultat */
+  page: number
+  /** Lignes par page (0 = pas de pagination) */
+  pageSize: number
+  /** Total de lignes, toutes pages confondues */
+  total: number
+  /** Lignes réellement fournies pour cette page (défaut : `pageSize`, ou `total` sans pagination) */
+  loaded?: number
+}
+
+/**
+ * Calcule l'état de pagination. Une page hors bornes est **ramenée** dans `[1, pageCount]`
+ * (un total qui rétrécit après un filtre ne laisse pas la vue sur une page vide), et une
+ * dernière page peut être partielle (`loaded` < `pageSize`).
+ */
+export const pageInfo = (options: PageInfoOptions): PageInfo => {
+  const size = Math.max(0, Math.trunc(options.pageSize || 0))
+  const total = Math.max(0, Math.trunc(options.total || 0))
+  const pageCount = size > 0 ? Math.max(1, Math.ceil(total / size)) : 1
+
+  const raw = Number.isFinite(options.page) ? Math.trunc(options.page) : 1
+  const page = Math.min(Math.max(1, raw), pageCount)
+  const offset = size > 0 ? (page - 1) * size : 0
+
+  const loaded = Math.max(0, Math.trunc(options.loaded ?? (size > 0 ? size : total)))
+  const from = total === 0 ? 0 : Math.min(offset + 1, total)
+  const to = total === 0 ? 0 : Math.min(offset + loaded, total)
+
+  return { page, pageCount, offset, from, to }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dnax/ui",
-  "version": "0.0.75",
+  "version": "0.0.76",
   "module": "index.ts",
   "description": "UI design System",
   "type": "module",