@open-mercato/ui 0.6.7-develop.6785.1.1dd7cfac55 → 0.6.7-develop.6795.1.8a3f27921c

package/src/backend/icons/__tests__/lucideRegistryGenerator.test.ts

@@ -0,0 +1,177 @@
+import { execFileSync } from 'node:child_process'
+import { readFileSync } from 'node:fs'
+import { join } from 'node:path'
+import { Project, ScriptKind, SyntaxKind, type ObjectLiteralExpression, type SourceFile } from 'ts-morph'
+import { buildLucideRegistrySource } from '../../../../scripts/lucideRegistrySource.cjs'
+
+const packageDir = join(__dirname, '..', '..', '..', '..')
+const iconsDir = join(packageDir, 'src', 'backend', 'icons')
+
+type ResolvedIcon = { kebab: string; exportName: string }
+
+const populatedFixture: ResolvedIcon[] = [
+  { kebab: 'bell', exportName: 'Bell' },
+  { kebab: 'alert-circle', exportName: 'AlertCircle' },
+  { kebab: 'bar-chart-2', exportName: 'BarChart2' },
+]
+
+const duplicateExportFixture: ResolvedIcon[] = [
+  { kebab: 'trash', exportName: 'Trash' },
+  { kebab: 'trash-can', exportName: 'Trash' },
+]
+
+function parse(source: string): SourceFile {
+  const project = new Project({ useInMemoryFileSystem: true })
+  return project.createSourceFile('lucideRegistry.generated.tsx', source, {
+    overwrite: true,
+    scriptKind: ScriptKind.TSX,
+  })
+}
+
+function syntacticDiagnostics(source: string): string[] {
+  const sourceFile = parse(source)
+  return sourceFile
+    .getProject()
+    .getProgram()
+    .getSyntacticDiagnostics(sourceFile)
+    .map((diagnostic) => `${diagnostic.getLineNumber() ?? 0}: ${diagnostic.getMessageText()}`)
+}
+
+function registryObject(source: string): ObjectLiteralExpression {
+  const declaration = parse(source).getVariableDeclarationOrThrow('LUCIDE_ICON_REGISTRY')
+  return declaration.getInitializerIfKindOrThrow(SyntaxKind.ObjectLiteralExpression)
+}
+
+function registryEntries(source: string): Record<string, string> {
+  const entries: Record<string, string> = {}
+  for (const property of registryObject(source).getProperties()) {
+    const assignment = property.asKindOrThrow(SyntaxKind.PropertyAssignment)
+    entries[assignment.getSymbolOrThrow().getName()] = assignment.getInitializerOrThrow().getText()
+  }
+  return entries
+}
+
+function valueImportNames(source: string, moduleSpecifier: string): string[] {
+  return parse(source)
+    .getImportDeclarations()
+    .filter((declaration) => declaration.getModuleSpecifierValue() === moduleSpecifier)
+    .filter((declaration) => !declaration.isTypeOnly())
+    .flatMap((declaration) => declaration.getNamedImports().map((named) => named.getName()))
+}
+
+describe('buildLucideRegistrySource', () => {
+  it('maps every discovered kebab name to its lucide export', () => {
+    expect(registryEntries(buildLucideRegistrySource(populatedFixture))).toEqual({
+      'alert-circle': 'AlertCircle',
+      'bar-chart-2': 'BarChart2',
+      bell: 'Bell',
+    })
+  })
+
+  it('emits the registry keys sorted by kebab name', () => {
+    const keys = registryObject(buildLucideRegistrySource(populatedFixture))
+      .getProperties()
+      .map((property) => property.asKindOrThrow(SyntaxKind.PropertyAssignment).getSymbolOrThrow().getName())
+    expect(keys).toEqual(['alert-circle', 'bar-chart-2', 'bell'])
+  })
+
+  it('imports each lucide export exactly once', () => {
+    expect(valueImportNames(buildLucideRegistrySource(populatedFixture), 'lucide-react')).toEqual([
+      'AlertCircle',
+      'BarChart2',
+      'Bell',
+    ])
+  })
+
+  it('quotes keys that are not valid identifiers', () => {
+    const property = registryObject(buildLucideRegistrySource(populatedFixture))
+      .getPropertyOrThrow("'bar-chart-2'")
+      .asKindOrThrow(SyntaxKind.PropertyAssignment)
+    expect(property.getNameNode().getKind()).toBe(SyntaxKind.StringLiteral)
+  })
+
+  it('de-duplicates the value import when two names share one export', () => {
+    const source = buildLucideRegistrySource(duplicateExportFixture)
+    expect(valueImportNames(source, 'lucide-react')).toEqual(['Trash'])
+    expect(registryEntries(source)).toEqual({ trash: 'Trash', 'trash-can': 'Trash' })
+  })
+
+  it('emits a valid module with an empty registry when no icons are discovered', () => {
+    const source = buildLucideRegistrySource([])
+    expect(registryObject(source).getProperties()).toHaveLength(0)
+    expect(valueImportNames(source, 'lucide-react')).toEqual([])
+    expect(source).not.toContain("import {} from 'lucide-react'")
+  })
+
+  it('keeps the registry a plain mutable object literal', () => {
+    const source = buildLucideRegistrySource(populatedFixture)
+    const declaration = parse(source).getVariableDeclarationOrThrow('LUCIDE_ICON_REGISTRY')
+    expect(declaration.getTypeNodeOrThrow().getText()).toBe('Record<string, LucideIcon>')
+    expect(declaration.getVariableStatementOrThrow().isExported()).toBe(true)
+    expect(source).not.toContain('as const')
+    expect(source).not.toContain('Object.freeze')
+  })
+
+  it('keeps the LucideIcon import type-only', () => {
+    const typeOnly = parse(buildLucideRegistrySource(populatedFixture))
+      .getImportDeclarations()
+      .filter((declaration) => declaration.isTypeOnly())
+      .flatMap((declaration) => declaration.getNamedImports().map((named) => named.getName()))
+    expect(typeOnly).toEqual(['LucideIcon'])
+  })
+
+  it.each([
+    ['populated', populatedFixture],
+    ['empty', [] as ResolvedIcon[]],
+    ['duplicate exports', duplicateExportFixture],
+  ])('emits %s output with zero syntactic diagnostics', (_label, fixture) => {
+    expect(syntacticDiagnostics(buildLucideRegistrySource(fixture))).toEqual([])
+  })
+
+  it('fails loudly when an export name would produce an unparseable module', () => {
+    expect(() => buildLucideRegistrySource([{ kebab: 'broken', exportName: 'not a valid export' }])).toThrow(
+      /not syntactically valid/
+    )
+  })
+})
+
+describe('lucideRegistry barrel', () => {
+  it('keeps its public export list unchanged', () => {
+    const project = new Project({ useInMemoryFileSystem: true })
+    const barrel = project.createSourceFile(
+      'lucideRegistry.ts',
+      readFileSync(join(iconsDir, 'lucideRegistry.ts'), 'utf-8'),
+      { overwrite: true }
+    )
+    expect([...barrel.getExportedDeclarations().keys()].sort()).toEqual([
+      'LUCIDE_ICON_REGISTRY',
+      'registerAdditionalIcons',
+      'resolveRegisteredLucideIcon',
+      'resolveRegisteredLucideIconNode',
+    ])
+  })
+})
+
+describe('lucideRegistry.generated importers', () => {
+  it('is imported only from within src/backend/icons', () => {
+    const repoRoot = join(packageDir, '..', '..')
+    let matches: string[] = []
+    try {
+      matches = execFileSync(
+        'git',
+        ['grep', '-l', 'lucideRegistry.generated', '--', '*.ts', '*.tsx'],
+        { cwd: repoRoot, encoding: 'utf-8' }
+      )
+        .split('\n')
+        .filter(Boolean)
+    } catch (error) {
+      const status = (error as { status?: number }).status
+      if (status !== 1) throw error
+    }
+
+    const outsideIconsFolder = matches.filter(
+      (path) => !path.startsWith('packages/ui/src/backend/icons/')
+    )
+    expect(outsideIconsFolder).toEqual([])
+  })
+})

package/src/backend/icons/lucideRegistry.generated.tsx

@@ -2,8 +2,7 @@
 // AUTO-GENERATED by @open-mercato/ui build. Do not edit by hand.
 // Generated from discovered icon string usages across the repo.
 
-import type * as React from 'react'
-import type { LucideIcon } from 'lucide-react'
+import type { LucideIcon } from 'lucide-react';
 import {
   Activity,
   AlertCircle,
@@ -150,7 +149,7 @@ import {
   Wrench,
   X,
   XCircle,
-} from 'lucide-react'
+} from 'lucide-react';
 
 export const LUCIDE_ICON_REGISTRY: Record<string, LucideIcon> = {
   'activity': Activity,
@@ -298,37 +297,4 @@ export const LUCIDE_ICON_REGISTRY: Record<string, LucideIcon> = {
   'wrench': Wrench,
   'x': X,
   'x-circle': XCircle,
-}
-
-function normalizeKebabIconName(input: string): string {
-  const trimmed = input.trim()
-  if (!trimmed) return ''
-  const withoutPrefix = trimmed.startsWith('lucide:') ? trimmed.slice('lucide:'.length) : trimmed
-  if (!withoutPrefix) return ''
-  if (!withoutPrefix.includes('-') && !withoutPrefix.includes('_') && !withoutPrefix.includes(' ') && /[A-Z]/.test(withoutPrefix)) {
-    return withoutPrefix
-      .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
-      .replace(/([A-Z])([A-Z][a-z])/g, '$1-$2')
-      .toLowerCase()
-  }
-  return withoutPrefix
-    .replace(/[_\s]+/g, '-')
-    .replace(/-+/g, '-')
-    .toLowerCase()
-}
-
-export function resolveRegisteredLucideIcon(name: string | undefined): LucideIcon | null {
-  if (!name) return null
-  const normalized = normalizeKebabIconName(name)
-  if (!normalized) return null
-  return (LUCIDE_ICON_REGISTRY as Record<string, LucideIcon | undefined>)[normalized] ?? null
-}
-
-export function resolveRegisteredLucideIconNode(
-  name: string | undefined,
-  className: string
-): React.ReactNode | null {
-  const Icon = resolveRegisteredLucideIcon(name)
-  if (!Icon) return null
-  return <Icon className={className} />
-}
+};

package/src/backend/icons/lucideRegistry.ts

@@ -1,8 +1,8 @@
 export {
   resolveRegisteredLucideIcon,
   resolveRegisteredLucideIconNode,
-  LUCIDE_ICON_REGISTRY,
-} from './lucideRegistry.generated'
+} from './lucideRegistryRuntime'
+export { LUCIDE_ICON_REGISTRY } from './lucideRegistry.generated'
 
 import type { LucideIcon } from 'lucide-react'
 import { LUCIDE_ICON_REGISTRY } from './lucideRegistry.generated'

package/src/backend/icons/lucideRegistryRuntime.tsx

@@ -0,0 +1,36 @@
+import type * as React from 'react'
+import type { LucideIcon } from 'lucide-react'
+import { LUCIDE_ICON_REGISTRY } from './lucideRegistry.generated'
+
+function normalizeKebabIconName(input: string): string {
+  const trimmed = input.trim()
+  if (!trimmed) return ''
+  const withoutPrefix = trimmed.startsWith('lucide:') ? trimmed.slice('lucide:'.length) : trimmed
+  if (!withoutPrefix) return ''
+  if (!withoutPrefix.includes('-') && !withoutPrefix.includes('_') && !withoutPrefix.includes(' ') && /[A-Z]/.test(withoutPrefix)) {
+    return withoutPrefix
+      .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+      .replace(/([A-Z])([A-Z][a-z])/g, '$1-$2')
+      .toLowerCase()
+  }
+  return withoutPrefix
+    .replace(/[_\s]+/g, '-')
+    .replace(/-+/g, '-')
+    .toLowerCase()
+}
+
+export function resolveRegisteredLucideIcon(name: string | undefined): LucideIcon | null {
+  if (!name) return null
+  const normalized = normalizeKebabIconName(name)
+  if (!normalized) return null
+  return (LUCIDE_ICON_REGISTRY as Record<string, LucideIcon | undefined>)[normalized] ?? null
+}
+
+export function resolveRegisteredLucideIconNode(
+  name: string | undefined,
+  className: string
+): React.ReactNode | null {
+  const Icon = resolveRegisteredLucideIcon(name)
+  if (!Icon) return null
+  return <Icon className={className} />
+}

package/src/backend/schedule/ScheduleToolbar.tsx

@@ -1,8 +1,19 @@
 "use client"
 
 import * as React from 'react'
-import { Button } from '../../primitives/button'
-import { Input } from '../../primitives/input'
+import { DateRangePicker } from '../../primitives/date-range-picker'
+import { IconButton } from '../../primitives/icon-button'
+import {
+  SegmentedControl,
+  SegmentedControlItem,
+} from '../../primitives/segmented-control'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../primitives/select'
 import type { ScheduleRange, ScheduleViewMode } from './types'
 import { cn } from '@open-mercato/shared/lib/utils'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
@@ -27,17 +38,19 @@ const VIEW_OPTIONS: Array<{ id: ScheduleViewMode; labelKey: string; fallback: st
   { id: 'agenda', labelKey: 'schedule.view.agenda', fallback: 'Agenda' },
 ]
 
-function formatDateInputValue(value: Date): string {
-  const year = value.getFullYear()
-  const month = String(value.getMonth() + 1).padStart(2, '0')
-  const day = String(value.getDate()).padStart(2, '0')
-  return `${year}-${month}-${day}`
-}
-
-function parseDateInputValue(value: string, fallback: Date): Date {
-  if (!value) return fallback
-  const next = new Date(`${value}T00:00:00`)
-  return Number.isNaN(next.getTime()) ? fallback : next
+function getTimezoneOptions(current?: string): string[] {
+  const options = new Set<string>()
+  if (current) options.add(current)
+  options.add('UTC')
+  const resolved = Intl.DateTimeFormat().resolvedOptions().timeZone
+  if (resolved) options.add(resolved)
+  const intlWithSupportedValues = Intl as typeof Intl & { supportedValuesOf?: (input: 'timeZone') => string[] }
+  if (typeof intlWithSupportedValues.supportedValuesOf === 'function') {
+    intlWithSupportedValues.supportedValuesOf('timeZone').forEach((timezone) => {
+      if (timezone) options.add(timezone)
+    })
+  }
+  return Array.from(options).sort((a, b) => a.localeCompare(b))
 }
 
 export type ScheduleToolbarProps = {
@@ -120,68 +133,76 @@ export function ScheduleToolbar({
     onRangeChange({ start: nextStart, end: endOfDay(addDays(nextStart, rangeLength - 1)) })
   }, [onRangeChange, range.start, rangeLength, view])
 
+  const timezoneOptions = React.useMemo(() => getTimezoneOptions(timezone), [timezone])
+
   return (
-    <div className={cn('flex flex-col gap-3 rounded-xl border bg-card p-4 md:flex-row md:items-center md:justify-between', className)}>
-      <div className="flex flex-wrap items-center gap-2">
+    <div className={cn('flex flex-wrap items-center gap-x-4 gap-y-2 rounded-xl border bg-card p-3', className)}>
+      <SegmentedControl
+        value={view}
+        onValueChange={(value) => {
+          const nextView = value as ScheduleViewMode
+          if (nextView === view) return
+          onViewChange(nextView)
+          onRangeChange(deriveRangeForView(new Date(), nextView))
+        }}
+        aria-label={t('schedule.view.label', 'Schedule view')}
+        className="shrink-0"
+      >
         {VIEW_OPTIONS.map((option) => (
-          <Button
-            key={option.id}
-            variant={view === option.id ? 'default' : 'outline'}
-            size="sm"
-            onClick={() => {
-              if (option.id === view) return
-              onViewChange(option.id)
-              onRangeChange(deriveRangeForView(new Date(), option.id))
-            }}
-          >
+          <SegmentedControlItem key={option.id} value={option.id}>
             {t(option.labelKey, option.fallback)}
-          </Button>
+          </SegmentedControlItem>
         ))}
-      </div>
-      <div className="flex flex-wrap items-center gap-2">
-        <Button type="button" variant="outline" size="sm" onClick={() => shiftRange('prev')} aria-label={t('schedule.range.prev', 'Previous')}>
+      </SegmentedControl>
+      <div className="flex shrink-0 items-center gap-1">
+        <IconButton
+          type="button"
+          variant="outline"
+          onClick={() => shiftRange('prev')}
+          aria-label={t('schedule.range.prev', 'Previous')}
+        >
           <ChevronLeft className="size-4" aria-hidden />
-        </Button>
-        <div className="text-sm font-medium text-foreground">{rangeLabel}</div>
-        <Button type="button" variant="outline" size="sm" onClick={() => shiftRange('next')} aria-label={t('schedule.range.next', 'Next')}>
+        </IconButton>
+        <div className="min-w-0 whitespace-nowrap px-1 text-sm font-medium text-foreground">{rangeLabel}</div>
+        <IconButton
+          type="button"
+          variant="outline"
+          onClick={() => shiftRange('next')}
+          aria-label={t('schedule.range.next', 'Next')}
+        >
           <ChevronRight className="size-4" aria-hidden />
-        </Button>
+        </IconButton>
       </div>
-      <div className="flex flex-wrap items-center gap-3">
-        <label className="flex items-center gap-2 text-xs text-muted-foreground">
-          <span>{t('schedule.range.start', 'Start')}</span>
-          <Input
-            type="date"
-            value={formatDateInputValue(range.start)}
-            onChange={(event) => {
-              const nextStart = parseDateInputValue(event.target.value, range.start)
-              onRangeChange({ start: nextStart, end: range.end })
-            }}
-            className="h-8 w-full sm:w-[140px]"
-          />
-        </label>
-        <label className="flex items-center gap-2 text-xs text-muted-foreground">
-          <span>{t('schedule.range.end', 'End')}</span>
-          <Input
-            type="date"
-            value={formatDateInputValue(range.end)}
-            onChange={(event) => {
-              const nextEnd = parseDateInputValue(event.target.value, range.end)
-              onRangeChange({ start: range.start, end: nextEnd })
-            }}
-            className="h-8 w-full sm:w-[140px]"
-          />
-        </label>
-        <label className="flex items-center gap-2 text-xs text-muted-foreground">
-          <span>{t('schedule.range.timezone', 'Timezone')}</span>
-          <Input
-            type="text"
-            value={timezone ?? ''}
-            onChange={(event) => onTimezoneChange?.(event.target.value)}
-            className="h-8 w-full sm:w-[180px]"
-            placeholder={t('schedule.range.timezone.placeholder', 'UTC')}
-          />
-        </label>
+      <div className="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-2 md:ml-auto">
+        <DateRangePicker
+          value={range}
+          onChange={(next) => {
+            if (!next) return
+            onRangeChange({ start: startOfDay(next.start), end: endOfDay(next.end) })
+          }}
+          size="sm"
+          showPresets={false}
+          numberOfMonths={2}
+          aria-label={t('schedule.range.label', 'Date range')}
+        />
+        {onTimezoneChange ? (
+          <Select value={timezone ?? undefined} onValueChange={onTimezoneChange}>
+            <SelectTrigger
+              size="sm"
+              className="w-auto min-w-[10rem]"
+              aria-label={t('schedule.range.timezone', 'Timezone')}
+            >
+              <SelectValue placeholder={t('schedule.range.timezone.placeholder', 'UTC')} />
+            </SelectTrigger>
+            <SelectContent>
+              {timezoneOptions.map((option) => (
+                <SelectItem key={option} value={option}>
+                  {option}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        ) : null}
       </div>
     </div>
   )