@girardmedia/bootspring 1.2.0 → 2.0.3

package/skills/patterns/utils/dates.md

@@ -1,435 +0,0 @@
-# Date Handling Patterns
-
-Patterns for working with dates, times, and timezones.
-
-## date-fns Setup
-
-```typescript
-// lib/dates.ts
-import {
-  format,
-  formatDistanceToNow,
-  parseISO,
-  isValid,
-  startOfDay,
-  endOfDay,
-  addDays,
-  subDays,
-  differenceInDays,
-  isBefore,
-  isAfter,
-  isSameDay
-} from 'date-fns'
-import { formatInTimeZone, toZonedTime } from 'date-fns-tz'
-
-// Format date for display
-export function formatDate(date: Date | string, pattern = 'MMM d, yyyy'): string {
-  const d = typeof date === 'string' ? parseISO(date) : date
-  return isValid(d) ? format(d, pattern) : 'Invalid date'
-}
-
-// Format datetime
-export function formatDateTime(date: Date | string): string {
-  return formatDate(date, 'MMM d, yyyy h:mm a')
-}
-
-// Relative time (e.g., "2 hours ago")
-export function timeAgo(date: Date | string): string {
-  const d = typeof date === 'string' ? parseISO(date) : date
-  return formatDistanceToNow(d, { addSuffix: true })
-}
-
-// Format with timezone
-export function formatWithTimezone(
-  date: Date | string,
-  timezone: string,
-  pattern = 'MMM d, yyyy h:mm a zzz'
-): string {
-  const d = typeof date === 'string' ? parseISO(date) : date
-  return formatInTimeZone(d, timezone, pattern)
-}
-
-// Parse user input
-export function parseDate(input: string): Date | null {
-  const parsed = parseISO(input)
-  return isValid(parsed) ? parsed : null
-}
-
-// Date range helpers
-export function getDateRange(
-  range: 'today' | 'yesterday' | 'last7days' | 'last30days' | 'thisMonth'
-): { start: Date; end: Date } {
-  const now = new Date()
-  const end = endOfDay(now)
-
-  switch (range) {
-    case 'today':
-      return { start: startOfDay(now), end }
-    case 'yesterday':
-      return {
-        start: startOfDay(subDays(now, 1)),
-        end: endOfDay(subDays(now, 1))
-      }
-    case 'last7days':
-      return { start: startOfDay(subDays(now, 6)), end }
-    case 'last30days':
-      return { start: startOfDay(subDays(now, 29)), end }
-    case 'thisMonth':
-      return {
-        start: startOfDay(new Date(now.getFullYear(), now.getMonth(), 1)),
-        end
-      }
-  }
-}
-```
-
-## Date Input Component
-
-```tsx
-// components/DateInput.tsx
-'use client'
-
-import { useState } from 'react'
-import { format, parse, isValid } from 'date-fns'
-
-interface DateInputProps {
-  value?: Date
-  onChange: (date: Date | null) => void
-  min?: Date
-  max?: Date
-  disabled?: boolean
-}
-
-export function DateInput({
-  value,
-  onChange,
-  min,
-  max,
-  disabled
-}: DateInputProps) {
-  const [inputValue, setInputValue] = useState(
-    value ? format(value, 'yyyy-MM-dd') : ''
-  )
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newValue = e.target.value
-    setInputValue(newValue)
-
-    if (newValue === '') {
-      onChange(null)
-      return
-    }
-
-    const parsed = parse(newValue, 'yyyy-MM-dd', new Date())
-    if (isValid(parsed)) {
-      if (min && parsed < min) return
-      if (max && parsed > max) return
-      onChange(parsed)
-    }
-  }
-
-  return (
-    <input
-      type="date"
-      value={inputValue}
-      onChange={handleChange}
-      min={min ? format(min, 'yyyy-MM-dd') : undefined}
-      max={max ? format(max, 'yyyy-MM-dd') : undefined}
-      disabled={disabled}
-      className="rounded-md border px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
-    />
-  )
-}
-```
-
-## Date Range Picker
-
-```tsx
-// components/DateRangePicker.tsx
-'use client'
-
-import { useState } from 'react'
-import { format } from 'date-fns'
-import { Calendar as CalendarIcon } from 'lucide-react'
-import { DayPicker, DateRange } from 'react-day-picker'
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger
-} from '@/components/ui/Popover'
-import { cn } from '@/lib/utils'
-
-interface DateRangePickerProps {
-  value?: DateRange
-  onChange: (range: DateRange | undefined) => void
-  placeholder?: string
-}
-
-export function DateRangePicker({
-  value,
-  onChange,
-  placeholder = 'Select date range'
-}: DateRangePickerProps) {
-  const [open, setOpen] = useState(false)
-
-  const formatRange = (range?: DateRange) => {
-    if (!range?.from) return placeholder
-    if (!range.to) return format(range.from, 'MMM d, yyyy')
-    return `${format(range.from, 'MMM d')} - ${format(range.to, 'MMM d, yyyy')}`
-  }
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <button
-          className={cn(
-            'flex items-center gap-2 rounded-md border px-3 py-2 text-sm',
-            'focus:outline-none focus:ring-2 focus:ring-blue-500',
-            !value?.from && 'text-gray-500'
-          )}
-        >
-          <CalendarIcon className="h-4 w-4" />
-          {formatRange(value)}
-        </button>
-      </PopoverTrigger>
-      <PopoverContent className="w-auto p-0" align="start">
-        <DayPicker
-          mode="range"
-          selected={value}
-          onSelect={onChange}
-          numberOfMonths={2}
-        />
-      </PopoverContent>
-    </Popover>
-  )
-}
-```
-
-## Timezone Handling
-
-```typescript
-// lib/timezone.ts
-import { toZonedTime, fromZonedTime, formatInTimeZone } from 'date-fns-tz'
-
-// Get user's timezone
-export function getUserTimezone(): string {
-  return Intl.DateTimeFormat().resolvedOptions().timeZone
-}
-
-// Convert UTC to user's timezone
-export function toUserTime(utcDate: Date, timezone?: string): Date {
-  const tz = timezone ?? getUserTimezone()
-  return toZonedTime(utcDate, tz)
-}
-
-// Convert user's local time to UTC
-export function toUTC(localDate: Date, timezone?: string): Date {
-  const tz = timezone ?? getUserTimezone()
-  return fromZonedTime(localDate, tz)
-}
-
-// Format in specific timezone
-export function formatInTz(
-  date: Date,
-  timezone: string,
-  pattern = 'yyyy-MM-dd HH:mm:ss zzz'
-): string {
-  return formatInTimeZone(date, timezone, pattern)
-}
-
-// Timezone select options
-export const timezones = Intl.supportedValuesOf('timeZone').map(tz => ({
-  value: tz,
-  label: tz.replace(/_/g, ' ')
-}))
-```
-
-## Relative Time Component
-
-```tsx
-// components/RelativeTime.tsx
-'use client'
-
-import { useEffect, useState } from 'react'
-import { formatDistanceToNow } from 'date-fns'
-import { SimpleTooltip } from '@/components/ui/Tooltip'
-import { formatDateTime } from '@/lib/dates'
-
-interface RelativeTimeProps {
-  date: Date | string
-  updateInterval?: number // ms
-}
-
-export function RelativeTime({
-  date,
-  updateInterval = 60000
-}: RelativeTimeProps) {
-  const dateObj = typeof date === 'string' ? new Date(date) : date
-  const [relative, setRelative] = useState(
-    formatDistanceToNow(dateObj, { addSuffix: true })
-  )
-
-  useEffect(() => {
-    const timer = setInterval(() => {
-      setRelative(formatDistanceToNow(dateObj, { addSuffix: true }))
-    }, updateInterval)
-
-    return () => clearInterval(timer)
-  }, [dateObj, updateInterval])
-
-  return (
-    <SimpleTooltip content={formatDateTime(dateObj)}>
-      <time dateTime={dateObj.toISOString()}>{relative}</time>
-    </SimpleTooltip>
-  )
-}
-```
-
-## Calendar Component
-
-```tsx
-// components/Calendar.tsx
-'use client'
-
-import { useState } from 'react'
-import {
-  format,
-  startOfMonth,
-  endOfMonth,
-  eachDayOfInterval,
-  isSameMonth,
-  isSameDay,
-  addMonths,
-  subMonths,
-  startOfWeek,
-  endOfWeek
-} from 'date-fns'
-import { ChevronLeft, ChevronRight } from 'lucide-react'
-import { cn } from '@/lib/utils'
-
-interface CalendarProps {
-  selected?: Date
-  onSelect: (date: Date) => void
-  events?: { date: Date; label: string }[]
-}
-
-export function Calendar({ selected, onSelect, events = [] }: CalendarProps) {
-  const [currentMonth, setCurrentMonth] = useState(selected ?? new Date())
-
-  const monthStart = startOfMonth(currentMonth)
-  const monthEnd = endOfMonth(currentMonth)
-  const calendarStart = startOfWeek(monthStart)
-  const calendarEnd = endOfWeek(monthEnd)
-
-  const days = eachDayOfInterval({ start: calendarStart, end: calendarEnd })
-
-  const hasEvent = (date: Date) =>
-    events.some(e => isSameDay(e.date, date))
-
-  return (
-    <div className="w-full max-w-sm rounded-lg border p-4">
-      {/* Header */}
-      <div className="mb-4 flex items-center justify-between">
-        <button
-          onClick={() => setCurrentMonth(subMonths(currentMonth, 1))}
-          className="rounded p-1 hover:bg-gray-100"
-        >
-          <ChevronLeft className="h-5 w-5" />
-        </button>
-        <h2 className="font-semibold">
-          {format(currentMonth, 'MMMM yyyy')}
-        </h2>
-        <button
-          onClick={() => setCurrentMonth(addMonths(currentMonth, 1))}
-          className="rounded p-1 hover:bg-gray-100"
-        >
-          <ChevronRight className="h-5 w-5" />
-        </button>
-      </div>
-
-      {/* Weekday headers */}
-      <div className="mb-2 grid grid-cols-7 gap-1 text-center text-xs font-medium text-gray-500">
-        {['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].map(day => (
-          <div key={day}>{day}</div>
-        ))}
-      </div>
-
-      {/* Days grid */}
-      <div className="grid grid-cols-7 gap-1">
-        {days.map(day => (
-          <button
-            key={day.toISOString()}
-            onClick={() => onSelect(day)}
-            className={cn(
-              'relative aspect-square rounded-full p-2 text-sm',
-              'hover:bg-gray-100 focus:outline-none focus:ring-2',
-              !isSameMonth(day, currentMonth) && 'text-gray-300',
-              selected && isSameDay(day, selected) && 'bg-blue-600 text-white hover:bg-blue-700',
-              isSameDay(day, new Date()) && !selected?.valueOf() && 'bg-gray-100'
-            )}
-          >
-            {format(day, 'd')}
-            {hasEvent(day) && (
-              <span className="absolute bottom-1 left-1/2 h-1 w-1 -translate-x-1/2 rounded-full bg-blue-500" />
-            )}
-          </button>
-        ))}
-      </div>
-    </div>
-  )
-}
-```
-
-## Date Validation
-
-```typescript
-// lib/validation/dates.ts
-import { z } from 'zod'
-import { parseISO, isValid, isFuture, isPast, isAfter, isBefore } from 'date-fns'
-
-// Zod date string schema
-export const dateStringSchema = z.string().refine(
-  val => isValid(parseISO(val)),
-  { message: 'Invalid date format' }
-)
-
-// Future date schema
-export const futureDateSchema = dateStringSchema.refine(
-  val => isFuture(parseISO(val)),
-  { message: 'Date must be in the future' }
-)
-
-// Past date schema
-export const pastDateSchema = dateStringSchema.refine(
-  val => isPast(parseISO(val)),
-  { message: 'Date must be in the past' }
-)
-
-// Date range schema
-export const dateRangeSchema = z.object({
-  from: dateStringSchema,
-  to: dateStringSchema
-}).refine(
-  ({ from, to }) => isAfter(parseISO(to), parseISO(from)),
-  { message: 'End date must be after start date' }
-)
-
-// Age validation
-export function validateAge(birthDate: Date, minAge: number): boolean {
-  const today = new Date()
-  const age = today.getFullYear() - birthDate.getFullYear()
-  const monthDiff = today.getMonth() - birthDate.getMonth()
-
-  if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
-    return age - 1 >= minAge
-  }
-  return age >= minAge
-}
-```
-
-## When to Use
-
-- Date display formatting
-- Calendar components
-- Date range selection
-- Timezone conversions