@djangocfg/ui-tools 2.1.404 → 2.1.408

package/src/tools/CronScheduler/utils/cron-humanize.ts

@@ -28,6 +28,10 @@ export function humanizeCron(cron: string): string {
   const hour = parseInt(hourPart, 10);
   const timeStr = formatTime(hour, minute);
 
+  // A month restriction (e.g. "0 9 1 6 *") is not representable by the
+  // daily/weekly/monthly phrasings below — describe it generically.
+  const monthSuffix = monthPart === '*' ? '' : ` in ${describeMonths(monthPart)}`;
+
   // Every minute
   if (minutePart === '*' && hourPart === '*' && dayOfMonthPart === '*' && monthPart === '*' && dayOfWeekPart === '*') {
     return 'Every minute';
@@ -36,15 +40,21 @@ export function humanizeCron(cron: string): string {
   // Every N minutes
   if (minutePart.startsWith('*/')) {
     const interval = parseInt(minutePart.slice(2), 10);
-    if (hourPart === '*') {
-      return `Every ${interval} minute${interval > 1 ? 's' : ''}`;
-    }
-    return `Every ${interval} minute${interval > 1 ? 's' : ''} at hour ${hour}`;
+    if (!Number.isFinite(interval) || interval < 1) return 'Custom schedule';
+    const unit = `${interval} minute${interval > 1 ? 's' : ''}`;
+    if (hourPart === '*') return `Every ${unit}`;
+    if (/^\d+$/.test(hourPart)) return `Every ${unit}, hour ${hour}`;
+    return `Every ${unit}, hours ${hourPart}`;
+  }
+
+  // Hourly: concrete minute, wildcard hour
+  if (/^\d+$/.test(minutePart) && hourPart === '*' && dayOfMonthPart === '*' && monthPart === '*' && dayOfWeekPart === '*') {
+    return minute === 0 ? 'Every hour' : `Every hour at minute ${minute}`;
   }
 
-  // Hourly
-  if (!isNaN(minute) && hourPart === '*' && dayOfMonthPart === '*' && monthPart === '*' && dayOfWeekPart === '*') {
-    return `Every hour at minute ${minute}`;
+  // Anything from here on needs a concrete minute and hour to read cleanly.
+  if (!/^\d+$/.test(minutePart) || !/^\d+$/.test(hourPart)) {
+    return 'Custom schedule';
   }
 
   // Daily
@@ -53,45 +63,80 @@ export function humanizeCron(cron: string): string {
   }
 
   // Weekly
-  if (dayOfMonthPart === '*' && monthPart === '*' && dayOfWeekPart !== '*') {
+  if (dayOfMonthPart === '*' && dayOfWeekPart !== '*') {
     const days = parseWeekDays(dayOfWeekPart);
 
+    if (days.length === 0) return 'Custom schedule';
+
     if (days.length === 7) {
-      return `Every day at ${timeStr}`;
+      return `Every day at ${timeStr}${monthSuffix}`;
     }
 
     if (days.length === 5 && isWeekdays(days)) {
-      return `Weekdays at ${timeStr}`;
+      return `Weekdays at ${timeStr}${monthSuffix}`;
     }
 
     if (days.length === 2 && isWeekend(days)) {
-      return `Weekends at ${timeStr}`;
+      return `Weekends at ${timeStr}${monthSuffix}`;
     }
 
     const dayNames = days.map(d => WEEKDAY_SHORT[d]).join(', ');
-    return `${dayNames} at ${timeStr}`;
+    return `${dayNames} at ${timeStr}${monthSuffix}`;
   }
 
   // Monthly
-  if (dayOfMonthPart !== '*' && monthPart === '*' && dayOfWeekPart === '*') {
+  if (dayOfMonthPart !== '*' && dayOfWeekPart === '*') {
     const days = parseMonthDays(dayOfMonthPart);
 
+    if (days.length === 0) return 'Custom schedule';
+
+    const monthWord = monthPart === '*' ? 'every month' : describeMonths(monthPart);
+
     if (days.length === 1) {
-      return `${ordinal(days[0])} of every month at ${timeStr}`;
+      return `${ordinal(days[0])} of ${monthWord} at ${timeStr}`;
     }
 
     if (days.length <= 3) {
       const dayStr = days.map(d => ordinal(d)).join(', ');
-      return `${dayStr} of every month at ${timeStr}`;
+      return `${dayStr} of ${monthWord} at ${timeStr}`;
     }
 
-    return `${days.length} days per month at ${timeStr}`;
+    return `${days.length} days of ${monthWord} at ${timeStr}`;
   }
 
   // Complex expression - show as-is
   return `Custom schedule`;
 }
 
+const MONTH_SHORT = [
+  'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
+];
+
+/**
+ * Describes a month field (1-12) in a readable way.
+ * Handles single values, lists and ranges; falls back to the raw field.
+ */
+function describeMonths(part: string): string {
+  const nums: number[] = [];
+  for (const segment of part.split(',')) {
+    if (segment.includes('-')) {
+      const [start, end] = segment.split('-').map(s => parseInt(s, 10));
+      if (!isNaN(start) && !isNaN(end)) {
+        for (let i = start; i <= end && i <= 12; i++) {
+          if (i >= 1) nums.push(i);
+        }
+      }
+    } else {
+      const n = parseInt(segment.trim(), 10);
+      if (!isNaN(n) && n >= 1 && n <= 12) nums.push(n);
+    }
+  }
+  if (nums.length === 0) return part;
+  const names = nums.map(n => MONTH_SHORT[n - 1]);
+  return names.length === 1 ? names[0] : names.join(', ');
+}
+
 /**
  * Formats time as HH:MM
  */

package/src/tools/CronScheduler/utils/cron-parser.ts

@@ -93,7 +93,14 @@ function detectScheduleType(
     return { type: 'custom', weekDays, monthDays };
   }
 
-  // Daily: M H * * * (simple minute and hour, rest are *)
+  // The daily/weekly/monthly UI presets require a concrete minute AND hour.
+  // A wildcard hour or minute (e.g. "0 * * * *" hourly, "* 9 * * *") cannot be
+  // represented by the time picker, so it must stay 'custom'.
+  if (minutePart === '*' || hourPart === '*') {
+    return { type: 'custom', weekDays, monthDays };
+  }
+
+  // Daily: M H * * * (concrete minute and hour, rest are *)
   if (dayOfMonthPart === '*' && monthPart === '*' && dayOfWeekPart === '*') {
     type = 'daily';
   }
@@ -119,10 +126,12 @@ function detectScheduleType(
 function isValidCronField(part: string, min: number, max: number): boolean {
   if (part === '*') return true;
 
-  // Step pattern: */N or range/N
+  // Step pattern: */N or range/N (exactly one slash, step >= 1)
   if (part.includes('/')) {
-    const [base, step] = part.split('/');
-    if (!step || !/^\d+$/.test(step)) return false;
+    const slashParts = part.split('/');
+    if (slashParts.length !== 2) return false;
+    const [base, step] = slashParts;
+    if (!step || !/^\d+$/.test(step) || parseInt(step, 10) < 1) return false;
     if (base === '*') return true;
     // Validate base part (range or number)
     return isValidCronField(base, min, max);

package/src/tools/FileIcon/FileIcon.tsx

@@ -1,10 +1,8 @@
 'use client';
 
-import { useEffect, useState } from 'react';
-import { File as FileFallback } from 'lucide-react';
 import { cn } from '@djangocfg/ui-core/lib';
 
-import { getMaterialIconsSync, loadMaterialIcons } from './loader';
+import { getFileIcon } from './get-file-icon';
 import { resolveFolderIcon, type FolderIconOverrides } from './specialFolders';
 
 export type FileIconSize = 12 | 14 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 64;
@@ -23,18 +21,24 @@ export interface FileIconProps {
    * matched case-insensitively. Only used when `isFolder` is true.
    */
   folderOverrides?: FolderIconOverrides;
+  /**
+   * Accessible label. When omitted the icon is decorative (`aria-hidden`) —
+   * correct when it sits next to a visible file name. Pass a string to
+   * expose the icon to assistive technology.
+   */
+  label?: string;
   className?: string;
 }
 
 /**
  * VSCode-style file icon.
  *
- * - Folders render Lucide `Folder` / `FolderOpen` (amber tint).
- * - Files use `material-file-icons` if it's installed in the consumer; otherwise
- *   fall back to a neutral Lucide `File` icon.
+ * - Folders render Lucide `Folder` / `FolderOpen` (warning-token tint).
+ * - Files render rich, colourful SVGs vendored from `material-file-icons`
+ *   (MIT). Resolution is synchronous — no runtime dependency, no async load.
  *
- * The optional dependency is loaded lazily on first render — there is zero
- * bundle cost for consumers who never mount this component.
+ * The icon SVG data is a static module, so it bundles into the `FileIcon`
+ * chunk and is only fetched by consumers that actually mount this component.
  */
 export function FileIcon({
   name,
@@ -42,28 +46,15 @@ export function FileIcon({
   isExpanded = false,
   size = 16,
   folderOverrides,
+  label,
   className,
 }: FileIconProps) {
-  const [svg, setSvg] = useState<string | null>(() => {
-    if (isFolder) return null;
-    const fn = getMaterialIconsSync();
-    return fn ? (fn(name)?.svg ?? null) : null;
-  });
-
-  useEffect(() => {
-    if (isFolder) {
-      setSvg(null);
-      return;
-    }
-    let cancelled = false;
-    void loadMaterialIcons().then((fn) => {
-      if (cancelled) return;
-      setSvg(fn ? (fn(name)?.svg ?? null) : null);
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [isFolder, name]);
+  // Either a labelled image, or fully hidden from assistive tech (the default,
+  // since the icon usually sits beside a visible file name).
+  const a11y =
+    label === undefined
+      ? ({ 'aria-hidden': true } as const)
+      : ({ role: 'img', 'aria-label': label } as const);
 
   if (isFolder) {
     const Icon = resolveFolderIcon({
@@ -73,25 +64,19 @@ export function FileIcon({
     });
     return (
       <Icon
-        className={cn('shrink-0 text-amber-500', className)}
+        {...a11y}
+        className={cn('shrink-0 text-warning', className)}
         style={{ width: size, height: size }}
       />
     );
   }
 
-  if (!svg) {
-    return (
-      <FileFallback
-        className={cn('shrink-0 text-muted-foreground/80', className)}
-        style={{ width: size, height: size }}
-      />
-    );
-  }
+  // Vendored static data — `getFileIcon` always returns a definition.
+  const svg = getFileIcon(name).svg;
 
   return (
     <span
-      role="img"
-      aria-hidden
+      {...a11y}
       className={cn('inline-block shrink-0', className)}
       style={{ width: size, height: size }}
       dangerouslySetInnerHTML={{ __html: svg }}

package/src/tools/FileIcon/get-file-icon.ts

@@ -0,0 +1,73 @@
+'use client';
+
+/**
+ * Resolver for VSCode-style file icons. Replaces the former optional
+ * `material-file-icons` runtime dependency — the icon SVGs are now vendored
+ * as a static data module (`./icons/icon-data`), so the bundler resolves them
+ * deterministically with no dynamic `import()` and no `@vite-ignore`.
+ *
+ * Lookup matches the original `material-file-icons` algorithm:
+ *   1. exact full-name match (`files[]`, lowercased)
+ *   2. longest matching extension (`name.endsWith('.' + ext)`)
+ *   3. fall back to the default file icon
+ *
+ * The `files` / `extensions` lookup maps are built lazily on first call.
+ */
+
+import {
+  DEFAULT_FILE_ICON,
+  FILE_ICONS,
+  type FileIconDef,
+} from './icons/icon-data';
+
+export type { FileIconDef };
+export { DEFAULT_FILE_ICON };
+
+/** Full-name → icon (e.g. `dockerfile`, `.gitignore`). */
+let fileMap: Map<string, FileIconDef> | null = null;
+/** Extension → icon. When several icons share an extension, last wins. */
+let extMap: Map<string, FileIconDef> | null = null;
+
+function buildIndex(): void {
+  fileMap = new Map();
+  extMap = new Map();
+  for (const icon of FILE_ICONS) {
+    if (icon.files) {
+      for (const f of icon.files) fileMap.set(f, icon);
+    }
+    if (icon.extensions) {
+      for (const ext of icon.extensions) extMap.set(ext, icon);
+    }
+  }
+}
+
+/**
+ * Resolve the icon definition for a file name. Always returns a definition —
+ * unknown types yield {@link DEFAULT_FILE_ICON}.
+ */
+export function getFileIcon(filename: string): FileIconDef {
+  if (typeof filename !== 'string' || filename.length === 0) {
+    return DEFAULT_FILE_ICON;
+  }
+  if (fileMap === null || extMap === null) buildIndex();
+
+  const lc = filename.toLowerCase();
+
+  // 1. Exact full-name match.
+  const byName = fileMap!.get(lc);
+  if (byName) return byName;
+
+  // 2. Longest matching extension.
+  let match: FileIconDef | null = null;
+  let matchLength = 0;
+  for (const [ext, icon] of extMap!) {
+    if (ext.length > matchLength && lc.endsWith(`.${ext}`)) {
+      match = icon;
+      matchLength = ext.length;
+    }
+  }
+  if (match) return match;
+
+  // 3. Fallback.
+  return DEFAULT_FILE_ICON;
+}