@open-mercato/core 0.7.1-develop.7202.1.a52dc6707c → 0.8.0

package/src/modules/design_system/gallery/entries/dates.tsx

@@ -1,7 +1,11 @@
 import * as React from 'react'
+import { TimePickerDurationExamples, TimePickerSlotExamples, TimePickerStatusExamples } from '../demos/time-picker'
+import { timePickerDurationCode, timePickerSlotCode, timePickerStatusCode } from '../demos/time-picker-code.generated'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { Clock } from 'lucide-react'
-import { Calendar } from '@open-mercato/ui/primitives/calendar'
+import { Calendar, CalendarMonthSelector } from '@open-mercato/ui/primitives/calendar'
 import { DatePicker } from '@open-mercato/ui/primitives/date-picker'
+import { defaultDateRangePresets } from '@open-mercato/ui/primitives/date-picker-helpers'
 import { DateRangePicker } from '@open-mercato/ui/primitives/date-range-picker'
 import {
   TimePicker,
@@ -50,8 +54,59 @@ function DemoCalendarRange() {
   )
 }
 
+function CalendarMarkedDemo() {
+  const t = useT()
+  const [selected, setSelected] = React.useState<Date | undefined>(new Date(2026, 5, 12))
+  const marked = [new Date(2026, 5, 8), new Date(2026, 5, 12), new Date(2026, 5, 20)]
+  return <Calendar mode="single" daySize={40} defaultMonth={new Date(2026, 5, 1)} today={new Date(2026, 5, 12)} selected={selected} onSelect={setSelected}
+    disabled={[new Date(2026, 5, 20)]} modifiers={{ marked }}
+    modifiersClassNames={{ marked: "after:absolute after:bottom-1.5 after:left-1/2 after:size-0.75 after:-translate-x-1/2 after:rounded-full after:bg-current after:content-['']" }}
+    labels={{ labelDayButton: (day, modifiers) => modifiers.marked
+      ? t('design_system.gallery.examples.controls.markedDate', { date: new Intl.DateTimeFormat(undefined, { dateStyle: 'full' }).format(day) })
+      : new Intl.DateTimeFormat(undefined, { dateStyle: 'full' }).format(day) }} />
+}
+
+function CalendarBoundaryDemo() {
+  const [range, setRange] = React.useState<{ from: Date | undefined; to?: Date }>({ from: new Date(2026, 5, 8), to: new Date(2026, 5, 19) })
+  return <Calendar mode="range" daySize={40} defaultMonth={new Date(2026, 5, 1)} today={new Date(2026, 5, 12)}
+    startMonth={new Date(2026, 5, 1)} endMonth={new Date(2026, 5, 30)}
+    selected={range} onSelect={(value) => setRange(value ?? { from: undefined })}
+    disabled={[{ before: new Date(2026, 5, 5) }, { after: new Date(2026, 5, 25) }]} excludeDisabled />
+}
+
+function CalendarSelectorDemo({ previous, next }: { previous: boolean; next: boolean }) {
+  const [month, setMonth] = React.useState(new Date(2026, 5, 1))
+  const [selected, setSelected] = React.useState<Date | undefined>()
+  const move = (offset: number) => setMonth(current => new Date(current.getFullYear(), current.getMonth() + offset, 1))
+  return <div className="w-fit">
+    <CalendarMonthSelector month={month} onPreviousMonth={previous ? () => move(-1) : undefined} onNextMonth={next ? () => move(1) : undefined} />
+    <Calendar mode="single" daySize={40} month={month} onMonthChange={setMonth} selected={selected} onSelect={setSelected} today={new Date(2026, 5, 12)} components={{ MonthCaption: () => <></> }} />
+  </div>
+}
+
+function DatePickerBoundaryDemo() {
+  const t = useT()
+  const [value, setValue] = React.useState<Date | null>(new Date(2026, 5, 12))
+  return <div className="flex w-full max-w-sm flex-col gap-3">
+    <DatePicker value={value} onChange={setValue} minDate={new Date(2026, 5, 5)} maxDate={new Date(2026, 5, 25)} aria-label={t('design_system.gallery.examples.controls.date')} />
+    <DatePicker value={value} onChange={setValue} readOnly aria-label={t('design_system.gallery.examples.controls.readOnlyDate')} />
+    <output className="text-sm text-muted-foreground">{value?.toLocaleDateString()}</output>
+  </div>
+}
+
+function DateRangePresetDemo() {
+  const t = useT()
+  const [value, setValue] = React.useState<DateRange | null>({ start: new Date(2026, 5, 8), end: new Date(2026, 5, 12) })
+  const presets = React.useMemo(() => defaultDateRangePresets().map(preset => ({ ...preset, range: () => preset.range(new Date(2026, 5, 12)) })), [])
+  return <div className="flex w-full max-w-sm flex-col gap-3">
+    <DateRangePicker value={value} onChange={setValue} presets={presets} aria-label={t('design_system.gallery.examples.controls.period')} />
+    <output className="text-sm text-muted-foreground">{value ? `${value.start.toLocaleDateString()} – ${value.end.toLocaleDateString()}` : t('design_system.gallery.examples.controls.empty')}</output>
+  </div>
+}
+
 const calendarEntry: GalleryEntry = {
   id: 'calendar',
+  figmaNodeId: '437:175',
   title: 'Calendar',
   importPath: '@open-mercato/ui/primitives/calendar',
   variants: [
@@ -83,6 +138,69 @@ const [selected, setSelected] = React.useState<{ from?: Date; to?: Date }>()
 
 <Calendar disabled={{ dayOfWeek: [0, 6] }} />`,
     },
+    {
+      id: 'marked-days',
+      title: 'Marked / selected / disabled days',
+      render: () => <CalendarMarkedDemo />,
+      code: `import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Calendar } from '@open-mercato/ui/primitives/calendar'
+
+function CalendarMarkedDemo() {
+  const t = useT()
+  const [selected, setSelected] = React.useState<Date | undefined>(new Date(2026, 5, 12))
+  const marked = [new Date(2026, 5, 8), new Date(2026, 5, 12), new Date(2026, 5, 20)]
+  return <Calendar mode="single" daySize={40} defaultMonth={new Date(2026, 5, 1)} today={new Date(2026, 5, 12)} selected={selected} onSelect={setSelected}
+    disabled={[new Date(2026, 5, 20)]} modifiers={{ marked }}
+    modifiersClassNames={{ marked: "after:absolute after:bottom-1.5 after:left-1/2 after:size-0.75 after:-translate-x-1/2 after:rounded-full after:bg-current after:content-['']" }}
+    labels={{ labelDayButton: (day, modifiers) => modifiers.marked
+      ? t('design_system.gallery.examples.controls.markedDate', { date: new Intl.DateTimeFormat(undefined, { dateStyle: 'full' }).format(day) })
+      : new Intl.DateTimeFormat(undefined, { dateStyle: 'full' }).format(day) }} />
+}
+
+<CalendarMarkedDemo />`,
+    },
+    {
+      id: 'range-boundaries',
+      title: 'Range boundaries',
+      render: () => <CalendarBoundaryDemo />,
+      code: `import * as React from 'react'
+import { Calendar } from '@open-mercato/ui/primitives/calendar'
+
+function CalendarBoundaryDemo() {
+  const [range, setRange] = React.useState<{ from: Date | undefined; to?: Date }>({ from: new Date(2026, 5, 8), to: new Date(2026, 5, 19) })
+  return <Calendar mode="range" daySize={40} defaultMonth={new Date(2026, 5, 1)} today={new Date(2026, 5, 12)}
+    startMonth={new Date(2026, 5, 1)} endMonth={new Date(2026, 5, 30)}
+    selected={range} onSelect={(value) => setRange(value ?? { from: undefined })}
+    disabled={[{ before: new Date(2026, 5, 5) }, { after: new Date(2026, 5, 25) }]} excludeDisabled />
+}
+
+<CalendarBoundaryDemo />`,
+    },
+    {
+      id: 'month-selectors',
+      title: 'Month selectors · 4 icon combinations',
+      render: () => <div className="flex flex-wrap gap-6"><CalendarSelectorDemo previous={false} next={false} /><CalendarSelectorDemo previous next={false} /><CalendarSelectorDemo previous={false} next /><CalendarSelectorDemo previous next /></div>,
+      code: `import * as React from 'react'
+import { Calendar, CalendarMonthSelector } from '@open-mercato/ui/primitives/calendar'
+
+function CalendarSelectorDemo({ previous, next }: { previous: boolean; next: boolean }) {
+  const [month, setMonth] = React.useState(new Date(2026, 5, 1))
+  const [selected, setSelected] = React.useState<Date | undefined>()
+  const move = (offset: number) => setMonth(current => new Date(current.getFullYear(), current.getMonth() + offset, 1))
+  return <div className="w-fit">
+    <CalendarMonthSelector month={month} onPreviousMonth={previous ? () => move(-1) : undefined} onNextMonth={next ? () => move(1) : undefined} />
+    <Calendar mode="single" daySize={40} month={month} onMonthChange={setMonth} selected={selected} onSelect={setSelected} today={new Date(2026, 5, 12)} components={{ MonthCaption: () => <></> }} />
+  </div>
+}
+
+<div className="flex w-full flex-wrap gap-6">
+  <CalendarSelectorDemo previous={false} next={false} />
+  <CalendarSelectorDemo previous next={false} />
+  <CalendarSelectorDemo previous={false} next />
+  <CalendarSelectorDemo previous next />
+</div>`,
+    },
   ],
 }
 
@@ -103,6 +221,7 @@ function DemoDatePickerTodayClear() {
 
 const datePickerEntry: GalleryEntry = {
   id: 'date-picker',
+  figmaNodeId: '446:7413',
   title: 'DatePicker',
   importPath: '@open-mercato/ui/primitives/date-picker',
   variants: [
@@ -150,6 +269,26 @@ const [value, setValue] = React.useState<Date | null>(null)
 <DatePicker value={value} onChange={setValue} size="sm" />
 <DatePicker value={value} onChange={setValue} disabled />`,
     },
+    {
+      id: 'boundaries-readonly',
+      title: 'Date boundaries and readOnly',
+      render: () => <DatePickerBoundaryDemo />,
+      code: `import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { DatePicker } from '@open-mercato/ui/primitives/date-picker'
+
+function DatePickerBoundaryDemo() {
+  const t = useT()
+  const [value, setValue] = React.useState<Date | null>(new Date(2026, 5, 12))
+  return <div className="flex w-full max-w-sm flex-col gap-3">
+    <DatePicker value={value} onChange={setValue} minDate={new Date(2026, 5, 5)} maxDate={new Date(2026, 5, 25)} aria-label={t('design_system.gallery.examples.controls.date')} />
+    <DatePicker value={value} onChange={setValue} readOnly aria-label={t('design_system.gallery.examples.controls.readOnlyDate')} />
+    <output className="text-sm text-muted-foreground">{value?.toLocaleDateString()}</output>
+  </div>
+}
+
+<DatePickerBoundaryDemo />`,
+    },
   ],
 }
 
@@ -173,6 +312,7 @@ function DemoDateRangePickerCompact() {
 
 const dateRangePickerEntry: GalleryEntry = {
   id: 'date-range-picker',
+  figmaNodeId: '446:7412',
   title: 'DateRangePicker',
   importPath: '@open-mercato/ui/primitives/date-range-picker',
   variants: [
@@ -209,36 +349,64 @@ const [value, setValue] = React.useState<DateRange | null>(null)
 
 <DateRangePicker value={value} onChange={setValue} disabled />`,
     },
+    {
+      id: 'fixed-presets',
+      title: 'Eight reproducible presets and draft/apply',
+      render: () => <DateRangePresetDemo />,
+      code: `import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { DateRangePicker } from '@open-mercato/ui/primitives/date-range-picker'
+import { defaultDateRangePresets } from '@open-mercato/ui/primitives/date-picker-helpers'
+import type { DateRange } from '@open-mercato/ui/backend/date-range'
+
+function DateRangePresetDemo() {
+  const t = useT()
+  const [value, setValue] = React.useState<DateRange | null>({ start: new Date(2026, 5, 8), end: new Date(2026, 5, 12) })
+  const presets = React.useMemo(() => defaultDateRangePresets().map(preset => ({ ...preset, range: () => preset.range(new Date(2026, 5, 12)) })), [])
+  return <div className="flex w-full max-w-sm flex-col gap-3">
+    <DateRangePicker value={value} onChange={setValue} presets={presets} aria-label={t('design_system.gallery.examples.controls.period')} />
+    <output className="text-sm text-muted-foreground">{value ? \`\${value.start.toLocaleDateString()} – \${value.end.toLocaleDateString()}\` : t('design_system.gallery.examples.controls.empty')}</output>
+  </div>
+}
+
+<DateRangePresetDemo />`,
+    },
   ],
 }
 
 const sampleSlots = ['09:00', '09:30', '10:00', '10:30', '11:00', '11:30']
 
 function DemoTimePickerTrigger() {
+  const t = useT()
   return (
     <TimePicker
       defaultValue="10:00"
       slots={sampleSlots}
       maxHeight={200}
-      trigger={<Button variant="outline">Pick a time</Button>}
+      trigger={<Button variant="outline">{t('design_system.gallery.sampleCopy.pickATime')}</Button>}
     />
   )
 }
 
 const timePickerEntry: GalleryEntry = {
   id: 'time-picker',
+  figmaNodeId: '165483:5687',
   title: 'TimePicker',
   importPath: '@open-mercato/ui/primitives/time-picker',
   variants: [
+    { id: 'source-statuses', title: '4 statuses / 4 states', render: () => <TimePickerStatusExamples />, code: timePickerStatusCode },
+    { id: 'source-durations', title: 'Duration / 4 states', render: () => <TimePickerDurationExamples />, code: timePickerDurationCode },
+    { id: 'source-slots', title: 'Selection indicator right / center / 4 states', render: () => <TimePickerSlotExamples />, code: timePickerSlotCode },
     {
       id: 'inline-card',
       title: 'Inline card',
       render: () => (
-        <TimePicker defaultValue="10:00" slots={sampleSlots} maxHeight={160} />
+        <TimePicker defaultValue="10:00" slots={sampleSlots} maxHeight={160} className="max-w-full" />
       ),
       code: `import { TimePicker } from '@open-mercato/ui/primitives/time-picker'
 
 <TimePicker
+  className="max-w-full"
   defaultValue="10:00"
   slots={['09:00', '09:30', '10:00', '10:30', '11:00', '11:30']}
 />`,