@adres/mgda-ui 0.0.0-stage → 0.0.2

package/src/components/calendar.tsx

@@ -0,0 +1,367 @@
+"use client"
+
+import * as React from "react"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+import { cn } from "../lib/cn"
+
+// ─── Types ──────────────────────────────────────────────────────────────────────
+
+export type CalendarMode = "single" | "range"
+
+/** A start/end pair. `to` is undefined while the user is mid-selection. */
+export interface DateRange {
+  from: Date | undefined
+  to: Date | undefined
+}
+
+export type CalendarValue = Date | DateRange | undefined
+
+export interface CalendarProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> {
+  /** Selection mode. `single` picks one date; `range` picks a start→end span. */
+  mode?: CalendarMode
+  /** Controlled selection. `Date | undefined` in single mode, `DateRange` in range mode. */
+  value?: CalendarValue
+  /** Uncontrolled initial selection. */
+  defaultValue?: CalendarValue
+  onValueChange?: (value: CalendarValue) => void
+  /** Controlled displayed month (any day within it). */
+  month?: Date
+  defaultMonth?: Date
+  onMonthChange?: (month: Date) => void
+  /** Selectable bounds (inclusive). */
+  min?: Date
+  max?: Date
+  /** Return true to disable a specific day (evaluated after min/max). */
+  isDateDisabled?: (date: Date) => boolean
+  /** 0 = Sunday … 6 = Saturday. Defaults to the locale's first weekday (Mon fallback). */
+  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6
+  /** BCP-47 locale for month/weekday names + first weekday. Defaults to the runtime locale. */
+  locale?: string
+  /** Render leading/trailing days from adjacent months (muted). Default true. */
+  showOutsideDays?: boolean
+}
+
+// ─── Pure date helpers (local time, no dependency) ───────────────────────────────
+
+const startOfDay = (d: Date) => { const x = new Date(d); x.setHours(0, 0, 0, 0); return x }
+const startOfMonth = (d: Date) => { const x = new Date(d); x.setDate(1); x.setHours(0, 0, 0, 0); return x }
+const addDays = (d: Date, n: number) => { const x = new Date(d); x.setDate(x.getDate() + n); return x }
+const addMonths = (d: Date, n: number) => { const x = startOfMonth(d); x.setMonth(x.getMonth() + n); return x }
+const isSameDay = (a?: Date, b?: Date) =>
+  !!a && !!b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate()
+const isSameMonth = (a: Date, b: Date) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth()
+/** a < b < c, comparing whole days. */
+const isBetween = (d: Date, a: Date, b: Date) => {
+  const t = startOfDay(d).getTime()
+  const lo = Math.min(startOfDay(a).getTime(), startOfDay(b).getTime())
+  const hi = Math.max(startOfDay(a).getTime(), startOfDay(b).getTime())
+  return t > lo && t < hi
+}
+
+/** Locale's first weekday (1=Mon…7=Sun via `weekInfo`) mapped to 0=Sun…6=Sat. Mon fallback. */
+function localeWeekStart(locale: string): number {
+  try {
+    const loc = new Intl.Locale(locale)
+    // `weekInfo` is a getter in newer engines, a property in others.
+    const info = (loc as unknown as { weekInfo?: { firstDay?: number }; getWeekInfo?: () => { firstDay?: number } })
+    const first = info.getWeekInfo?.().firstDay ?? info.weekInfo?.firstDay
+    if (first) return first % 7 // 7 (Sun) → 0
+  } catch { /* Intl.Locale/weekInfo unsupported */ }
+  return 1 // Monday
+}
+
+/** The 6×7 grid of days for `month`, starting on `weekStartsOn`. */
+function monthMatrix(month: Date, weekStartsOn: number): Date[] {
+  const first = startOfMonth(month)
+  const lead = (first.getDay() - weekStartsOn + 7) % 7
+  const start = addDays(first, -lead)
+  return Array.from({ length: 42 }, (_, i) => addDays(start, i))
+}
+
+const isRange = (v: CalendarValue): v is DateRange =>
+  !!v && typeof v === "object" && !(v instanceof Date)
+
+// ─── Component ───────────────────────────────────────────────────────────────────
+
+const CELL = "ax:size-9"      // 36px tap target
+const WEEKDAYS_REF = new Date(2021, 7, 1) // a Sunday, anchor for weekday name generation
+
+export const Calendar = React.forwardRef<HTMLDivElement, CalendarProps>(
+  (
+    {
+      mode = "single",
+      value: valueProp,
+      defaultValue,
+      onValueChange,
+      month: monthProp,
+      defaultMonth,
+      onMonthChange,
+      min,
+      max,
+      isDateDisabled,
+      weekStartsOn,
+      locale,
+      showOutsideDays = true,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const today = React.useMemo(() => startOfDay(new Date()), [])
+    // Resolve the browser locale only AFTER mount. SSR and the first client render
+    // must use a fixed locale ("en"); otherwise Intl weekday names + first weekday
+    // differ between server (Node default) and client (browser) and break hydration.
+    const [clientLocale, setClientLocale] = React.useState<string>()
+    React.useEffect(() => {
+      if (!locale && typeof navigator !== "undefined") setClientLocale(navigator.language)
+    }, [locale])
+    const activeLocale = locale ?? clientLocale ?? "en"
+
+    const derivedWeekStart = React.useMemo(() => localeWeekStart(activeLocale), [activeLocale])
+    const weekStart = weekStartsOn ?? derivedWeekStart
+
+    // Controlled/uncontrolled selection.
+    const [valueState, setValueState] = React.useState<CalendarValue>(defaultValue)
+    const value = valueProp !== undefined ? valueProp : valueState
+    const setValue = (next: CalendarValue) => {
+      if (valueProp === undefined) setValueState(next)
+      onValueChange?.(next)
+    }
+
+    // First selected date, used to seed the displayed month + focus.
+    const anchor = isRange(value) ? value.from : (value as Date | undefined)
+
+    // Controlled/uncontrolled displayed month.
+    const [monthState, setMonthState] = React.useState<Date>(
+      () => startOfMonth(defaultMonth ?? anchor ?? today),
+    )
+    const month = monthProp ? startOfMonth(monthProp) : monthState
+    const setMonth = (next: Date) => {
+      const m = startOfMonth(next)
+      if (!monthProp) setMonthState(m)
+      onMonthChange?.(m)
+    }
+
+    // Roving focus target (a day inside the displayed month).
+    const [focusedDate, setFocusedDate] = React.useState<Date>(
+      () => (anchor && isSameMonth(anchor, month) ? startOfDay(anchor)
+        : isSameMonth(today, month) ? today
+          : startOfMonth(month)),
+    )
+    // Keep the focus target inside the visible month when the month changes.
+    React.useEffect(() => {
+      if (!isSameMonth(focusedDate, month)) {
+        const day = Math.min(focusedDate.getDate(), new Date(month.getFullYear(), month.getMonth() + 1, 0).getDate())
+        setFocusedDate(new Date(month.getFullYear(), month.getMonth(), day))
+      }
+    }, [month]) // eslint-disable-line react-hooks/exhaustive-deps
+
+    // Move DOM focus to the focused cell only after keyboard navigation.
+    const focusBtnRef = React.useRef<HTMLButtonElement>(null)
+    const shouldFocus = React.useRef(false)
+    React.useEffect(() => {
+      if (shouldFocus.current) { focusBtnRef.current?.focus(); shouldFocus.current = false }
+    }, [focusedDate])
+
+    // RTL: read the actual resolved direction so arrow keys stay intuitive.
+    const rootRef = React.useRef<HTMLDivElement>(null)
+    const isRtl = () => rootRef.current ? getComputedStyle(rootRef.current).direction === "rtl" : false
+
+    const dayDisabled = React.useCallback((d: Date) => {
+      if (min && startOfDay(d) < startOfDay(min)) return true
+      if (max && startOfDay(d) > startOfDay(max)) return true
+      return isDateDisabled?.(d) ?? false
+    }, [min, max, isDateDisabled])
+
+    const select = (d: Date) => {
+      if (dayDisabled(d)) return
+      const day = startOfDay(d)
+      if (mode === "range") {
+        const r = isRange(value) ? value : { from: undefined, to: undefined }
+        let next: DateRange
+        if (!r.from || r.to) next = { from: day, to: undefined }           // start fresh
+        else next = day < r.from ? { from: day, to: r.from } : { from: r.from, to: day } // close the span
+        setValue(next)
+      } else {
+        setValue(day)
+      }
+    }
+
+    const captionId = React.useId()
+    const monthLabel = React.useMemo(
+      () => new Intl.DateTimeFormat(activeLocale, { month: "long", year: "numeric" }).format(month),
+      [month, activeLocale],
+    )
+    // Weekday headers, generated for the active locale + first weekday.
+    const weekdays = React.useMemo(() => {
+      const short = new Intl.DateTimeFormat(activeLocale, { weekday: "short" })
+      const long = new Intl.DateTimeFormat(activeLocale, { weekday: "long" })
+      const sundayOffset = WEEKDAYS_REF.getDay() // 0
+      return Array.from({ length: 7 }, (_, i) => {
+        const d = addDays(WEEKDAYS_REF, (weekStart + i - sundayOffset + 7) % 7)
+        return { short: short.format(d), long: long.format(d) }
+      })
+    }, [activeLocale, weekStart])
+    const fullDate = React.useMemo(
+      () => new Intl.DateTimeFormat(activeLocale, { weekday: "long", year: "numeric", month: "long", day: "numeric" }),
+      [activeLocale],
+    )
+
+    const days = React.useMemo(() => monthMatrix(month, weekStart), [month, weekStart])
+
+    const prevDisabled = !!min && startOfMonth(min) > addMonths(month, -1)
+    const nextDisabled = !!max && startOfMonth(max) < addMonths(month, 1)
+
+    const onKeyDown = (e: React.KeyboardEvent) => {
+      const rtl = isRtl()
+      let next: Date | null = null
+      switch (e.key) {
+        case "ArrowLeft":  next = addDays(focusedDate, rtl ? 1 : -1); break
+        case "ArrowRight": next = addDays(focusedDate, rtl ? -1 : 1); break
+        case "ArrowUp":    next = addDays(focusedDate, -7); break
+        case "ArrowDown":  next = addDays(focusedDate, 7); break
+        case "Home":       next = addDays(focusedDate, -((focusedDate.getDay() - weekStart + 7) % 7)); break
+        case "End":        next = addDays(focusedDate, 6 - ((focusedDate.getDay() - weekStart + 7) % 7)); break
+        case "PageUp":     next = addMonths(focusedDate, e.shiftKey ? -12 : -1); break
+        case "PageDown":   next = addMonths(focusedDate, e.shiftKey ? 12 : 1); break
+        case "Enter":
+        case " ":          e.preventDefault(); select(focusedDate); return
+        default: return
+      }
+      e.preventDefault()
+      const clamped = startOfDay(next)
+      shouldFocus.current = true
+      setFocusedDate(clamped)
+      if (!isSameMonth(clamped, month)) setMonth(clamped)
+    }
+
+    return (
+      <div
+        ref={(node) => {
+          rootRef.current = node
+          if (typeof ref === "function") ref(node)
+          else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node
+        }}
+        className={cn("ax:inline-block ax:select-none ax:p-sm", className)}
+        {...props}
+      >
+        {/* Caption + month navigation */}
+        <div className="ax:flex ax:items-center ax:justify-between ax:gap-sm ax:pb-sm">
+          <NavButton label="Previous month" disabled={prevDisabled} onClick={() => setMonth(addMonths(month, -1))}>
+            <ChevronLeft className="ax:size-4 ax:rtl:-scale-x-100" />
+          </NavButton>
+          <div id={captionId} aria-live="polite" className="ax:t-label-md ax:text-foreground-strong">
+            {monthLabel}
+          </div>
+          <NavButton label="Next month" disabled={nextDisabled} onClick={() => setMonth(addMonths(month, 1))}>
+            <ChevronRight className="ax:size-4 ax:rtl:-scale-x-100" />
+          </NavButton>
+        </div>
+
+        {/* Day grid */}
+        <div role="grid" aria-labelledby={captionId} className="ax:w-max">
+          <div role="row" className="ax:flex">
+            {weekdays.map((w) => (
+              <div
+                key={w.long}
+                role="columnheader"
+                aria-label={w.long}
+                className={cn(CELL, "ax:flex ax:items-center ax:justify-center ax:t-label-2xs ax:text-muted-foreground")}
+              >
+                {w.short}
+              </div>
+            ))}
+          </div>
+
+          {/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */}
+          {Array.from({ length: 6 }, (_, w) => (
+            <div role="row" key={w} className="ax:flex">
+              {days.slice(w * 7, w * 7 + 7).map((day) => {
+                const outside = !isSameMonth(day, month)
+                if (outside && !showOutsideDays) return <div key={+day} role="gridcell" className={CELL} />
+
+                const disabled = dayDisabled(day)
+                const isToday = isSameDay(day, today)
+                const range = isRange(value) ? value : undefined
+                const selected =
+                  mode === "range"
+                    ? isSameDay(day, range?.from) || isSameDay(day, range?.to)
+                    : isSameDay(day, value as Date | undefined)
+                const inRange = !!range?.from && !!range?.to && isBetween(day, range.from, range.to)
+                const isRangeStart = mode === "range" && isSameDay(day, range?.from) && !!range?.to
+                const isRangeEnd = mode === "range" && isSameDay(day, range?.to)
+                const isFocusTarget = isSameDay(day, focusedDate)
+
+                return (
+                  <div
+                    key={+day}
+                    role="gridcell"
+                    aria-selected={selected || undefined}
+                    className={cn(
+                      CELL,
+                      "ax:relative ax:flex ax:items-center ax:justify-center",
+                      // Continuous range highlight lives on the cell so it butts up edge-to-edge.
+                      (inRange || isRangeStart || isRangeEnd) && "ax:bg-primary-weakest",
+                      isRangeStart && "ax:rounded-s-xs",
+                      isRangeEnd && "ax:rounded-e-xs",
+                    )}
+                  >
+                    <button
+                      ref={isFocusTarget ? focusBtnRef : undefined}
+                      type="button"
+                      tabIndex={isFocusTarget ? 0 : -1}
+                      disabled={disabled}
+                      aria-label={fullDate.format(day)}
+                      aria-current={isToday ? "date" : undefined}
+                      onClick={() => { setFocusedDate(startOfDay(day)); if (outside) setMonth(day); select(day) }}
+                      onKeyDown={onKeyDown}
+                      className={cn(
+                        "ax:flex ax:size-8 ax:items-center ax:justify-center ax:rounded-xs ax:t-body-sm",
+                        "ax:transition-colors ax:transition-snappy",
+                        "ax:focus-visible:outline-none ax:focus-visible:ring-2 ax:focus-visible:ring-ring ax:focus-visible:ring-offset-1 ax:focus-visible:ring-offset-background",
+                        "ax:disabled:pointer-events-none ax:disabled:opacity-40",
+                        selected
+                          ? "ax:bg-primary-weakest ax:text-primary ax:font-medium ax:hover:bg-primary-weakest"
+                          : cn(
+                              "ax:hover:bg-muted",
+                              outside ? "ax:text-muted-foreground/70" : "ax:text-foreground",
+                              isToday && "ax:font-semibold ax:text-primary",
+                            ),
+                      )}
+                    >
+                      {day.getDate()}
+                    </button>
+                  </div>
+                )
+              })}
+            </div>
+          ))}
+        </div>
+      </div>
+    )
+  },
+)
+Calendar.displayName = "Calendar"
+
+// Icon-only month-nav control - plain button (no Button dep) with the DS focus ring.
+function NavButton({ label, disabled, onClick, children }: {
+  label: string; disabled?: boolean; onClick: () => void; children: React.ReactNode
+}) {
+  return (
+    <button
+      type="button"
+      aria-label={label}
+      disabled={disabled}
+      onClick={onClick}
+      className={cn(
+        "ax:flex ax:size-8 ax:items-center ax:justify-center ax:rounded-md ax:text-muted-foreground",
+        "ax:hover:bg-muted ax:hover:text-foreground ax:transition-colors ax:transition-snappy ax:cursor-pointer",
+        "ax:focus-visible:outline-none ax:focus-visible:ring-2 ax:focus-visible:ring-ring ax:focus-visible:ring-offset-1 ax:focus-visible:ring-offset-background",
+        "ax:disabled:pointer-events-none ax:disabled:opacity-40",
+      )}
+    >
+      {children}
+    </button>
+  )
+}

package/src/components/card.stories.tsx

@@ -0,0 +1,44 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./card"
+import { Button } from "./button"
+
+const meta: Meta<typeof Card> = {
+  title: "Components/Card",
+  component: Card,
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof Card>
+
+export const Default: Story = {
+  render: () => (
+    <Card className="ax:max-w-sm">
+      <CardHeader>
+        <CardTitle>Project overview</CardTitle>
+        <CardDescription>Track progress across your team.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p>12 tasks completed this week.</p>
+      </CardContent>
+      <CardFooter>
+        <Button size="sm">View details</Button>
+      </CardFooter>
+    </Card>
+  ),
+}
+
+export const Sectioned: Story = {
+  render: () => (
+    <Card sectioned className="ax:max-w-sm">
+      <CardHeader size="lg">
+        <CardTitle>Billing</CardTitle>
+        <CardDescription>Manage your subscription.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p>Next invoice on Sep 1.</p>
+      </CardContent>
+    </Card>
+  ),
+}