@alfakit/react 0.0.0-stage → 0.1.0

package/src/components/ui/sonner.tsx

@@ -0,0 +1,43 @@
+import {
+  CircleCheckIcon,
+  CircleXIcon,
+  InfoIcon,
+  Loader2Icon,
+  TriangleAlertIcon,
+} from 'lucide-react'
+import { Toaster as Sonner, type ToasterProps } from 'sonner'
+import { useT } from '../../context'
+
+function Toaster({ toastOptions, ...props }: ToasterProps) {
+  const t = useT()
+
+  return (
+    <Sonner
+      theme="system"
+      className="toaster group"
+      // sonner appends the hotkey: "Notifications alt+T".
+      containerAriaLabel={t('notifications', {}, 'Notifications')}
+      toastOptions={{
+        closeButtonAriaLabel: t('close_notification', {}, 'Close notification'),
+        ...toastOptions,
+      }}
+      icons={{
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <CircleXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+      }}
+      style={
+        {
+          '--normal-bg': 'var(--popover)',
+          '--normal-text': 'var(--popover-foreground)',
+          '--normal-border': 'var(--border)',
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

package/src/components/ui/spinner.tsx

@@ -0,0 +1,31 @@
+import { Loader2Icon } from 'lucide-react'
+import type { ComponentProps } from 'react'
+import { useT } from '../../context'
+import { Icon } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+
+/**
+ * The loading indicator. Its glyph is the `alfakit::support.loading-indicator` icon alias,
+ * so an app replaces it everywhere with `Icons::register()` (or a `panel:icon` component).
+ */
+function Spinner({ className, ...props }: Omit<ComponentProps<'svg'>, 'ref'>) {
+  const t = useT()
+  return (
+    <span
+      role="status"
+      aria-label={t('loading', {}, 'Loading')}
+      data-slot="spinner"
+      className="inline-flex shrink-0"
+    >
+      <Icon
+        name="alfakit::support.loading-indicator"
+        fallback={Loader2Icon}
+        aria-hidden="true"
+        className={cn('size-4 animate-spin', className)}
+        {...props}
+      />
+    </span>
+  )
+}
+
+export { Spinner }

package/src/components/ui/switch.tsx

@@ -0,0 +1,25 @@
+import { Switch as SwitchPrimitive } from 'radix-ui'
+import type { ComponentProps } from 'react'
+import { cn } from '../../lib/utils'
+
+function Switch({ className, ...props }: ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        'data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 peer inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          'bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 rtl:data-[state=checked]:-translate-x-[calc(100%-2px)]',
+        )}
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }

package/src/components/ui/table.tsx

@@ -0,0 +1,89 @@
+import type { ComponentProps } from 'react'
+import { cn } from '../../lib/utils'
+
+function Table({ className, ...props }: ComponentProps<'table'>) {
+  return (
+    <div data-slot="table-container" className="relative w-full overflow-x-auto">
+      <table
+        data-slot="table"
+        className={cn('w-full caption-bottom text-sm', className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: ComponentProps<'thead'>) {
+  return <thead data-slot="table-header" className={cn('[&_tr]:border-b', className)} {...props} />
+}
+
+function TableBody({ className, ...props }: ComponentProps<'tbody'>) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn('[&_tr:last-child]:border-0', className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: ComponentProps<'tfoot'>) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', className)}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: ComponentProps<'tr'>) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: ComponentProps<'th'>) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        'text-foreground h-10 px-2 text-start align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pe-0 [&>[role=checkbox]]:translate-y-[2px]',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: ComponentProps<'td'>) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pe-0 [&>[role=checkbox]]:translate-y-[2px]',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({ className, ...props }: ComponentProps<'caption'>) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn('text-muted-foreground mt-4 text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow }

package/src/components/ui/tabs.tsx

@@ -0,0 +1,51 @@
+import { Tabs as TabsPrimitive } from 'radix-ui'
+import type { ComponentProps } from 'react'
+import { cn } from '../../lib/utils'
+
+function Tabs({ className, ...props }: ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn('flex gap-2 data-[orientation=horizontal]:flex-col', className)}
+      {...props}
+    />
+  )
+}
+
+function TabsList({ className, ...props }: ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px] data-[orientation=vertical]:h-auto data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({ className, ...props }: ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({ className, ...props }: ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn('flex-1 outline-none', className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsContent, TabsList, TabsTrigger }

package/src/components/ui/textarea.tsx

@@ -0,0 +1,17 @@
+import type { ComponentProps } from 'react'
+import { cn } from '../../lib/utils'
+
+function Textarea({ className, ...props }: ComponentProps<'textarea'>) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,50 @@
+import { Tooltip as TooltipPrimitive } from 'radix-ui'
+import type { ComponentProps } from 'react'
+import { cn } from '../../lib/utils'
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({ ...props }: ComponentProps<typeof TooltipPrimitive.Root>) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({ ...props }: ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 4,
+  children,
+  ...props
+}: ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }

package/src/components/versions/record-versions.tsx

@@ -0,0 +1,162 @@
+import type { RecordVersionChangeSchema, RecordVersionsSchema } from '@alfakit/core'
+import { ArrowRightIcon } from 'lucide-react'
+import { useActionRunner, useFormatter, usePageSchema, useT } from '../../context'
+import { useHydrated } from '../../hooks/use-hydrated'
+import { Icon } from '../../lib/icons'
+import { Badge } from '../ui/badge'
+import { Button } from '../ui/button'
+
+/**
+ * The History slide-over's version list (`HistoryAction`): each version with its event,
+ * author and time, the changed fields (old → new, long and rich text as a word diff) and
+ * "Restore this version", which runs the nested restore action.
+ */
+export function RecordVersionsComponent({ component }: { component: RecordVersionsSchema }) {
+  const t = useT()
+  const runner = useActionRunner()
+  const page = usePageSchema()
+  const formatter = useFormatter()
+  // Times follow the panel's timezone; formatted after hydration so server and client agree.
+  const hydrated = useHydrated()
+  const restore = component.restoreAction
+
+  if (component.versions.length === 0) {
+    return (
+      <p data-slot="record-versions" className="text-muted-foreground text-sm">
+        {component.emptyLabel}
+      </p>
+    )
+  }
+
+  return (
+    <ol
+      data-slot="record-versions"
+      aria-label={t('versions.list', {}, 'Versions')}
+      className="flex flex-col gap-3"
+    >
+      {component.versions.map((version) => {
+        const time = version.createdAt && hydrated ? formatter.dateTime(version.createdAt) : ''
+
+        return (
+          <li
+            key={version.id}
+            data-slot="record-version"
+            data-event={version.event}
+            className="bg-card rounded-lg border p-3"
+          >
+            <div className="flex items-start justify-between gap-3">
+              <div className="flex min-w-0 flex-col gap-0.5">
+                <span className="flex flex-wrap items-center gap-2 text-sm font-medium">
+                  {version.eventLabel}
+                  {version.current && (
+                    <Badge variant="secondary">{t('versions.current', {}, 'Current')}</Badge>
+                  )}
+                </span>
+                <span className="text-muted-foreground text-xs">
+                  {version.author
+                    ? t(
+                        'versions.by',
+                        { author: version.author, time },
+                        `${version.author} · ${time}`,
+                      )
+                    : time}
+                </span>
+              </div>
+              {restore && !version.current && (
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  className="shrink-0"
+                  aria-label={t(
+                    'versions.restore_label',
+                    { time },
+                    `Restore the version of ${time}`,
+                  )}
+                  onClick={() =>
+                    void runner.trigger(restore, {
+                      token: page?.token ?? '',
+                      component: component.actionComponent ?? 'page',
+                      parents: component.actionPath ?? [],
+                      arguments: { version: version.id },
+                    })
+                  }
+                >
+                  {restore.icon && <Icon name={restore.icon} className="size-3.5" />}
+                  {restore.label}
+                </Button>
+              )}
+            </div>
+            {version.changes.length > 0 ? (
+              <dl className="mt-3 flex flex-col gap-2 text-sm">
+                {version.changes.map((change) => (
+                  <div
+                    key={change.attribute}
+                    data-slot="record-version-change"
+                    data-attribute={change.attribute}
+                  >
+                    <dt className="text-muted-foreground text-xs font-medium">{change.label}</dt>
+                    <dd className="mt-0.5 break-words">
+                      <VersionChange change={change} />
+                    </dd>
+                  </div>
+                ))}
+              </dl>
+            ) : (
+              <p className="text-muted-foreground mt-2 text-xs">
+                {t('versions.no_changes', {}, 'No tracked fields changed.')}
+              </p>
+            )}
+          </li>
+        )
+      })}
+    </ol>
+  )
+}
+
+function VersionChange({ change }: { change: RecordVersionChangeSchema }) {
+  const t = useT()
+  const empty = t('versions.empty_value', {}, 'Empty')
+
+  if (change.diff) {
+    return (
+      <p data-slot="record-version-diff" className="whitespace-pre-wrap">
+        {change.diff.map((part, index) =>
+          part.type === 'insert' ? (
+            <ins
+              key={index}
+              className="rounded-sm bg-emerald-500/15 text-emerald-700 no-underline dark:text-emerald-300"
+            >
+              <span className="sr-only">{t('versions.added', {}, 'Added:')} </span>
+              {part.text}
+            </ins>
+          ) : part.type === 'delete' ? (
+            <del key={index} className="bg-destructive/10 text-destructive rounded-sm">
+              <span className="sr-only">{t('versions.removed', {}, 'Removed:')} </span>
+              {part.text}
+            </del>
+          ) : (
+            <span key={index}>{part.text}</span>
+          ),
+        )}
+      </p>
+    )
+  }
+
+  return (
+    <p className="flex flex-wrap items-center gap-1.5">
+      <del className="text-muted-foreground">
+        <span className="sr-only">{t('versions.old_value', {}, 'Before:')} </span>
+        {change.old ?? empty}
+      </del>
+      <ArrowRightIcon
+        className="text-muted-foreground size-3.5 shrink-0 rtl:rotate-180"
+        aria-hidden="true"
+      />
+      <ins className="no-underline">
+        <span className="sr-only">{t('versions.new_value', {}, 'After:')} </span>
+        {change.new ?? empty}
+      </ins>
+    </p>
+  )
+}

package/src/components/widgets/calendar-lazy.tsx

@@ -0,0 +1,31 @@
+import type { CalendarWidgetSchema } from '@alfakit/core'
+import { useT } from '../../context'
+import { lazyComponent } from '../../lib/lazy'
+import { Card, CardContent } from '../ui/card'
+import { Skeleton } from '../ui/skeleton'
+
+/** The server render and the first paint: the calendar's outline, without FullCalendar. */
+export function CalendarSkeleton({ widget }: { widget: CalendarWidgetSchema }) {
+  const t = useT()
+
+  return (
+    <Card className="gap-4 py-4" aria-busy="true" data-slot="calendar-widget">
+      <CardContent className="flex flex-col gap-4 px-5">
+        <span className="sr-only">{t('calendar.loading', {}, 'Loading calendar')}</span>
+        {widget.heading && <Skeleton className="h-5 w-1/3" aria-hidden="true" />}
+        <div className="flex items-center justify-between gap-3" aria-hidden="true">
+          <Skeleton className="h-8 w-28" />
+          <Skeleton className="h-6 w-40" />
+          <Skeleton className="h-8 w-40" />
+        </div>
+        <Skeleton className="h-[28rem]" aria-hidden="true" />
+      </CardContent>
+    </Card>
+  )
+}
+
+/** The calendar widget; FullCalendar loads the first time a calendar is shown. */
+export const CalendarWidget = lazyComponent<{ widget: CalendarWidgetSchema }>(
+  () => import('./calendar').then((module) => module.CalendarWidget),
+  (props) => <CalendarSkeleton {...props} />,
+)

package/src/components/widgets/calendar.tsx

@@ -0,0 +1,124 @@
+import type { CalendarWidgetSchema } from '@alfakit/core'
+import { calendarIdentity, calendarOptions, clientErrorNotification } from '@alfakit/core'
+import { Calendar, type CalendarOptions } from '@fullcalendar/core'
+import dayGridPlugin from '@fullcalendar/daygrid'
+import interactionPlugin from '@fullcalendar/interaction'
+import listPlugin from '@fullcalendar/list'
+import timeGridPlugin from '@fullcalendar/timegrid'
+import { router } from '@inertiajs/react'
+import { useEffect, useRef } from 'react'
+import { useActionRunner, useDirection, useLocalization, useT } from '../../context'
+import { usePageActionContext } from '../actions/action-context'
+import { ActionList } from '../actions/action-list'
+import { showToast } from '../notifications/flash-toasts'
+import { Card, CardContent, CardHeader, CardTitle } from '../ui/card'
+
+const plugins = [dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin]
+
+/**
+ * The calendar widget (alfasix/alfakit-calendar, registry key `widget:calendar`). Events
+ * are fetched for the visible range through the widget's actions; FullCalendar loads with
+ * this component's own chunk.
+ */
+export function CalendarWidget({ widget }: { widget: CalendarWidgetSchema }) {
+  const element = useRef<HTMLDivElement>(null)
+  const calendar = useRef<Calendar | null>(null)
+  const runner = useActionRunner()
+  const page = usePageActionContext()
+  const t = useT()
+  const direction = useDirection()
+  const localization = useLocalization()
+
+  const env = {
+    runner,
+    token: page.token,
+    t,
+    locale: localization?.tag ?? 'en',
+    direction,
+    firstDayOfWeek: localization?.firstDayOfWeek ?? 0,
+    visit: (url: string, newTab: boolean) =>
+      newTab ? window.open(url, '_blank', 'noopener') : router.visit(url),
+    notify: (notifications: Parameters<typeof showToast>[0][]) =>
+      notifications.forEach((notification) => showToast(notification)),
+    error: (message: string) =>
+      showToast(clientErrorNotification(`calendar-${widget.id}`, message)),
+  }
+  // The callbacks always see the latest schema and context without recreating the calendar.
+  const latest = useRef({ widget, env })
+
+  useEffect(() => {
+    latest.current = { widget, env }
+  })
+
+  const identity = calendarIdentity(widget, env)
+
+  useEffect(() => {
+    if (!element.current) {
+      return
+    }
+
+    const options = calendarOptions(latest.current.widget, {
+      ...latest.current.env,
+      runner: {
+        trigger: (...args) => latest.current.env.runner.trigger(...args),
+        executeJson: (...args) => latest.current.env.runner.executeJson(...args),
+      },
+    })
+    const instance = new Calendar(element.current, {
+      ...(options as CalendarOptions),
+      plugins,
+      height: 'auto',
+    })
+
+    instance.render()
+    calendar.current = instance
+
+    return () => {
+      instance.destroy()
+      calendar.current = null
+    }
+  }, [identity])
+
+  // A new schema (after an action ran, or a poll) brings fresh events.
+  const first = useRef(true)
+
+  useEffect(() => {
+    if (first.current) {
+      first.current = false
+
+      return
+    }
+
+    calendar.current?.refetchEvents()
+  }, [widget])
+
+  return (
+    <Card className="gap-4 py-4" data-slot="calendar-widget">
+      {(widget.heading || widget.headerActions?.length) && (
+        <CardHeader className="px-5">
+          <div className="flex flex-wrap items-center justify-between gap-3">
+            {widget.heading && <CardTitle className="text-base">{widget.heading}</CardTitle>}
+            {widget.headerActions && (
+              <ActionList
+                actions={widget.headerActions}
+                context={{ token: page.token, component: `widget:${widget.id}` }}
+                size="sm"
+                align="end"
+                className="ms-auto"
+              />
+            )}
+          </div>
+        </CardHeader>
+      )}
+      <CardContent className="px-5">
+        <div
+          ref={element}
+          data-slot="calendar"
+          dir={direction}
+          aria-label={widget.heading ?? t('calendar.label', {}, 'Calendar')}
+          role="region"
+        />
+      </CardContent>
+    </Card>
+  )
+}