@gram-ai/elements 1.26.1 → 1.27.0

package/src/components/ui/calendar.tsx

@@ -0,0 +1,262 @@
+import * as React from 'react'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+export interface CalendarProps {
+  /** Selected date range */
+  selected?: { start: Date | null; end: Date | null }
+  /** Called when a date or range is selected */
+  onSelect?: (range: { start: Date; end: Date | null }) => void
+  /** Whether range selection is enabled */
+  mode?: 'single' | 'range'
+  /** Disable dates before this */
+  minDate?: Date
+  /** Disable dates after this */
+  maxDate?: Date
+  /** Additional className */
+  className?: string
+}
+
+interface CalendarDay {
+  date: Date
+  isCurrentMonth: boolean
+  isToday: boolean
+  isSelected: boolean
+  isInRange: boolean
+  isRangeStart: boolean
+  isRangeEnd: boolean
+  isDisabled: boolean
+}
+
+const WEEKDAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+const MONTHS = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+]
+
+function isSameDay(a: Date, b: Date): boolean {
+  return (
+    a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate()
+  )
+}
+
+function isInRange(date: Date, start: Date | null, end: Date | null): boolean {
+  if (!start || !end) return false
+  const time = date.getTime()
+  return time >= start.getTime() && time <= end.getTime()
+}
+
+function getCalendarDays(
+  year: number,
+  month: number,
+  selected: { start: Date | null; end: Date | null },
+  minDate?: Date,
+  maxDate?: Date
+): CalendarDay[] {
+  const today = new Date()
+  const firstDay = new Date(year, month, 1)
+  const lastDay = new Date(year, month + 1, 0)
+  const startPadding = firstDay.getDay()
+  const days: CalendarDay[] = []
+
+  // Add days from previous month
+  const prevMonthLastDay = new Date(year, month, 0)
+  for (let i = startPadding - 1; i >= 0; i--) {
+    const date = new Date(year, month - 1, prevMonthLastDay.getDate() - i)
+    days.push(createDay(date, false, today, selected, minDate, maxDate))
+  }
+
+  // Add days from current month
+  for (let d = 1; d <= lastDay.getDate(); d++) {
+    const date = new Date(year, month, d)
+    days.push(createDay(date, true, today, selected, minDate, maxDate))
+  }
+
+  // Add days from next month to fill the grid
+  const remaining = 42 - days.length // 6 rows of 7 days
+  for (let d = 1; d <= remaining; d++) {
+    const date = new Date(year, month + 1, d)
+    days.push(createDay(date, false, today, selected, minDate, maxDate))
+  }
+
+  return days
+}
+
+function createDay(
+  date: Date,
+  isCurrentMonth: boolean,
+  today: Date,
+  selected: { start: Date | null; end: Date | null },
+  minDate?: Date,
+  maxDate?: Date
+): CalendarDay {
+  const isStart = selected.start ? isSameDay(date, selected.start) : false
+  const isEnd = selected.end ? isSameDay(date, selected.end) : false
+  const inRange = isInRange(date, selected.start, selected.end)
+
+  let isDisabled = false
+  if (minDate && date < minDate) isDisabled = true
+  if (maxDate && date > maxDate) isDisabled = true
+
+  return {
+    date,
+    isCurrentMonth,
+    isToday: isSameDay(date, today),
+    isSelected: isStart || isEnd,
+    isInRange: inRange && !isStart && !isEnd,
+    isRangeStart: isStart,
+    isRangeEnd: isEnd,
+    isDisabled,
+  }
+}
+
+function Calendar({
+  selected = { start: null, end: null },
+  onSelect,
+  mode = 'range',
+  minDate,
+  maxDate,
+  className,
+}: CalendarProps) {
+  const [viewDate, setViewDate] = React.useState(() => {
+    if (selected.start) return new Date(selected.start)
+    return new Date()
+  })
+
+  const [rangeSelection, setRangeSelection] = React.useState<{
+    start: Date | null
+    end: Date | null
+  }>(selected)
+
+  React.useEffect(() => {
+    setRangeSelection(selected)
+  }, [selected])
+
+  const year = viewDate.getFullYear()
+  const month = viewDate.getMonth()
+  const days = getCalendarDays(year, month, rangeSelection, minDate, maxDate)
+
+  const goToPreviousMonth = () => {
+    setViewDate(new Date(year, month - 1, 1))
+  }
+
+  const goToNextMonth = () => {
+    setViewDate(new Date(year, month + 1, 1))
+  }
+
+  const handleDayClick = (day: CalendarDay) => {
+    if (day.isDisabled) return
+
+    if (mode === 'single') {
+      const newSelection = { start: day.date, end: day.date }
+      setRangeSelection(newSelection)
+      onSelect?.(newSelection)
+      return
+    }
+
+    // Range mode
+    if (!rangeSelection.start || (rangeSelection.start && rangeSelection.end)) {
+      // Start new range
+      const newSelection = { start: day.date, end: null }
+      setRangeSelection(newSelection)
+      onSelect?.(newSelection as { start: Date; end: Date | null })
+    } else {
+      // Complete range
+      let start = rangeSelection.start
+      let end = day.date
+
+      // Ensure start is before end
+      if (end < start) {
+        ;[start, end] = [end, start]
+      }
+
+      const newSelection = { start, end }
+      setRangeSelection(newSelection)
+      onSelect?.(newSelection)
+    }
+  }
+
+  return (
+    <div data-slot="calendar" className={cn('w-[280px] p-3', className)}>
+      {/* Header */}
+      <div className="mb-2 flex items-center justify-between">
+        <button
+          type="button"
+          onClick={goToPreviousMonth}
+          className="hover:bg-accent inline-flex h-7 w-7 items-center justify-center rounded-md transition-colors"
+          aria-label="Previous month"
+        >
+          <ChevronLeft className="h-4 w-4" />
+        </button>
+        <span className="text-sm font-medium">
+          {MONTHS[month]} {year}
+        </span>
+        <button
+          type="button"
+          onClick={goToNextMonth}
+          className="hover:bg-accent inline-flex h-7 w-7 items-center justify-center rounded-md transition-colors"
+          aria-label="Next month"
+        >
+          <ChevronRight className="h-4 w-4" />
+        </button>
+      </div>
+
+      {/* Weekday headers */}
+      <div className="mb-1 grid grid-cols-7 gap-1">
+        {WEEKDAYS.map((day) => (
+          <div
+            key={day}
+            className="text-muted-foreground flex h-8 w-8 items-center justify-center text-center text-xs font-medium"
+          >
+            {day}
+          </div>
+        ))}
+      </div>
+
+      {/* Days grid */}
+      <div className="grid grid-cols-7 gap-1">
+        {days.map((day, i) => (
+          <button
+            key={i}
+            type="button"
+            disabled={day.isDisabled}
+            onClick={() => handleDayClick(day)}
+            className={cn(
+              'inline-flex h-8 w-8 items-center justify-center rounded-md text-sm transition-colors',
+              // Base states
+              !day.isCurrentMonth && 'text-muted-foreground/50',
+              day.isDisabled && 'cursor-not-allowed opacity-30',
+              !day.isDisabled && !day.isSelected && 'hover:bg-accent',
+              // Today
+              day.isToday && !day.isSelected && 'border-primary border',
+              // Selected states
+              day.isSelected && 'bg-primary text-primary-foreground',
+              day.isRangeStart && 'rounded-r-none',
+              day.isRangeEnd && 'rounded-l-none',
+              // In range
+              day.isInRange && 'bg-primary/20 rounded-none'
+            )}
+          >
+            {day.date.getDate()}
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}
+Calendar.displayName = 'Calendar'
+
+export { Calendar }

package/src/components/ui/time-range-picker.stories.tsx

@@ -0,0 +1,249 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+import {
+  TimeRangePicker,
+  type TimeRange,
+  type DateRangePreset,
+} from './time-range-picker'
+
+const meta: Meta<typeof TimeRangePicker> = {
+  title: 'UI/TimeRangePicker',
+  component: TimeRangePicker,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  decorators: [
+    (Story) => (
+      <div className="gram-elements bg-background text-foreground min-w-[400px] p-8">
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    showLive: {
+      control: 'boolean',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+    timezone: {
+      control: 'text',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof TimeRangePicker>
+
+/**
+ * Default time range picker with preset badges and calendar.
+ * Supports natural language input with AI parsing.
+ */
+export const Default: Story = {
+  render: () => {
+    const [preset, setPreset] = useState<DateRangePreset | null>('7d')
+    const [customRange, setCustomRange] = useState<TimeRange | null>(null)
+
+    return (
+      <TimeRangePicker
+        preset={customRange ? null : preset}
+        customRange={customRange}
+        onPresetChange={(p) => {
+          setPreset(p)
+          setCustomRange(null)
+        }}
+        onCustomRangeChange={(from, to, label) => {
+          setCustomRange({ from, to })
+          setPreset(null)
+          console.log('Custom range:', { from, to, label })
+        }}
+        onClearCustomRange={() => {
+          setCustomRange(null)
+          setPreset('7d')
+        }}
+      />
+    )
+  },
+}
+
+/**
+ * Time range picker with timezone indicator.
+ */
+export const WithTimezone: Story = {
+  render: () => {
+    const [preset, setPreset] = useState<DateRangePreset | null>('30d')
+    const [customRange, setCustomRange] = useState<TimeRange | null>(null)
+
+    return (
+      <TimeRangePicker
+        preset={customRange ? null : preset}
+        customRange={customRange}
+        onPresetChange={(p) => {
+          setPreset(p)
+          setCustomRange(null)
+        }}
+        onCustomRangeChange={(from, to) => {
+          setCustomRange({ from, to })
+          setPreset(null)
+        }}
+        onClearCustomRange={() => {
+          setCustomRange(null)
+          setPreset('30d')
+        }}
+        timezone="UTC-08:00"
+      />
+    )
+  },
+}
+
+/**
+ * With LIVE mode toggle enabled.
+ */
+export const WithLiveMode: Story = {
+  render: () => {
+    const [preset, setPreset] = useState<DateRangePreset | null>('15m')
+    const [customRange, setCustomRange] = useState<TimeRange | null>(null)
+    const [isLive, setIsLive] = useState(true)
+
+    return (
+      <TimeRangePicker
+        preset={customRange ? null : preset}
+        customRange={customRange}
+        onPresetChange={(p) => {
+          setPreset(p)
+          setCustomRange(null)
+        }}
+        onCustomRangeChange={(from, to) => {
+          setCustomRange({ from, to })
+          setPreset(null)
+        }}
+        onClearCustomRange={() => {
+          setCustomRange(null)
+          setPreset('15m')
+        }}
+        showLive
+        isLive={isLive}
+        onLiveChange={setIsLive}
+      />
+    )
+  },
+}
+
+/**
+ * Disabled state.
+ */
+export const Disabled: Story = {
+  args: {
+    preset: '7d',
+    disabled: true,
+  },
+}
+
+/**
+ * Full Datadog-style configuration with all features.
+ * Type natural language like "3 days ago", "last Wednesday", "past 2 weeks".
+ */
+export const DatadogStyle: Story = {
+  render: () => {
+    const [preset, setPreset] = useState<DateRangePreset | null>('7d')
+    const [customRange, setCustomRange] = useState<TimeRange | null>(null)
+    const [customLabel, setCustomLabel] = useState<string | null>(null)
+    const [isLive, setIsLive] = useState(false)
+
+    return (
+      <div className="space-y-4">
+        <TimeRangePicker
+          preset={customRange ? null : preset}
+          customRange={customRange}
+          customRangeLabel={customLabel}
+          onPresetChange={(p) => {
+            setPreset(p)
+            setCustomRange(null)
+            setCustomLabel(null)
+          }}
+          onCustomRangeChange={(from, to, label) => {
+            setCustomRange({ from, to })
+            setPreset(null)
+            setCustomLabel(label || null)
+          }}
+          onClearCustomRange={() => {
+            setCustomRange(null)
+            setPreset('7d')
+            setCustomLabel(null)
+          }}
+          showLive
+          isLive={isLive}
+          onLiveChange={setIsLive}
+          timezone="UTC-08:00"
+        />
+        <div className="text-muted-foreground bg-muted rounded-md p-3 text-xs">
+          <strong>Current state:</strong>
+          <pre className="mt-1 overflow-auto">
+            {JSON.stringify(
+              {
+                preset,
+                customRange: customRange
+                  ? {
+                      from: customRange.from.toISOString(),
+                      to: customRange.to.toISOString(),
+                    }
+                  : null,
+                customLabel,
+                isLive,
+              },
+              null,
+              2
+            )}
+          </pre>
+        </div>
+      </div>
+    )
+  },
+}
+
+/**
+ * Natural language parsing demo.
+ * Type things like:
+ * - "yesterday"
+ * - "3 days ago"
+ * - "last Wednesday"
+ * - "past 2 weeks"
+ * - "January 2024"
+ */
+export const NaturalLanguageParsing: Story = {
+  render: () => {
+    const [preset, setPreset] = useState<DateRangePreset | null>('30d')
+    const [customRange, setCustomRange] = useState<TimeRange | null>(null)
+    const [customLabel, setCustomLabel] = useState<string | null>(null)
+
+    return (
+      <div className="space-y-4">
+        <p className="text-muted-foreground text-sm">
+          Try typing: "yesterday", "3 days ago", "last Wednesday", "January"
+        </p>
+        <TimeRangePicker
+          preset={customRange ? null : preset}
+          customRange={customRange}
+          customRangeLabel={customLabel}
+          onPresetChange={(p) => {
+            setPreset(p)
+            setCustomRange(null)
+            setCustomLabel(null)
+          }}
+          onCustomRangeChange={(from, to, label) => {
+            setCustomRange({ from, to })
+            setPreset(null)
+            setCustomLabel(label || null)
+            console.log('AI parsed:', { from, to, label })
+          }}
+          onClearCustomRange={() => {
+            setCustomRange(null)
+            setPreset('30d')
+            setCustomLabel(null)
+          }}
+        />
+      </div>
+    )
+  },
+}