@alfakit/react 0.0.0-stage → 0.1.1

package/src/components/ai/stream.tsx

@@ -0,0 +1,100 @@
+import { AiStreamController, type AiStreamSchema, type AiStreamState } from '@alfakit/core'
+import { Loader2Icon, SquareIcon } from 'lucide-react'
+import { useEffect, useMemo, useSyncExternalStore } from 'react'
+import { useT } from '../../context'
+import { useFormStore } from '../form/form-context'
+import { Button } from '../ui/button'
+
+/**
+ * `ai:stream` (alfasix/alfakit-ai `streaming()`): streams an answer into a modal form. The
+ * text shows as it is written (plain text) with a "Stop" button; a polite live region
+ * announces it in batches. When it is done the finished answer (cleaned up by the server)
+ * goes into the target field and the form refreshes, so the server renders it.
+ */
+export function AiStream({ component }: { component: AiStreamSchema }) {
+  const t = useT()
+  const form = useFormStore()
+  const token = useSyncExternalStore(
+    (listener) => form.subscribe(listener),
+    () => form.getValue<string | null>(component.statePath, null),
+    () => form.getValue<string | null>(component.statePath, null),
+  )
+
+  const controller = useMemo(() => {
+    const settle = (values: Record<string, unknown>) => {
+      form.setValue(component.statePath, null, { silent: true })
+
+      for (const [path, value] of Object.entries(values)) {
+        form.setValue(path, value, { silent: true })
+      }
+
+      void form.refresh(component.target)
+    }
+
+    return new AiStreamController({
+      endpoint: component.endpoint,
+      onDone: (text) => settle({ [component.target]: text, [component.errorPath]: null }),
+      onError: (message) =>
+        settle({
+          [component.errorPath]:
+            message || t('ai.stream.failed', {}, 'The answer could not be written. Try again.'),
+        }),
+      onCancel: () => settle({ [component.errorPath]: t('ai.stream.stopped', {}, 'Stopped.') }),
+    })
+    // One controller per field; the endpoint and paths don't change while it is mounted.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [form, component.statePath])
+
+  const state = useSyncExternalStore<AiStreamState>(
+    (listener) => controller.store.subscribe(listener),
+    () => controller.state,
+    () => controller.state,
+  )
+
+  useEffect(() => {
+    if (typeof token === 'string' && token !== '') void controller.start(token)
+  }, [controller, token])
+
+  useEffect(() => () => controller.dispose(), [controller])
+
+  const streaming = state.status === 'streaming'
+
+  if (!streaming && !token) return null
+
+  return (
+    <div
+      data-slot="ai-stream"
+      className="bg-muted/40 flex flex-col gap-3 rounded-md border p-3"
+      aria-busy={streaming}
+    >
+      <div className="flex items-center justify-between gap-3">
+        <span className="text-muted-foreground flex items-center gap-2 text-sm">
+          <Loader2Icon className="size-4 animate-spin" aria-hidden="true" />
+          {t('ai.stream.writing', {}, 'Writing…')}
+        </span>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          data-slot="ai-stream-stop"
+          aria-label={t('ai.stream.stop_label', {}, 'Stop writing the answer')}
+          onClick={() => controller.cancel()}
+        >
+          <SquareIcon aria-hidden="true" className="size-3.5" />
+          {t('ai.stream.stop', {}, 'Stop')}
+        </Button>
+      </div>
+      {state.text !== '' && (
+        <div
+          data-slot="ai-stream-text"
+          className="text-start text-sm leading-relaxed break-words whitespace-pre-wrap"
+        >
+          {state.text}
+        </div>
+      )}
+      <div className="sr-only" aria-live="polite" aria-atomic="true">
+        {state.announcement}
+      </div>
+    </div>
+  )
+}

package/src/components/analytics/alfakit-analytics.tsx

@@ -0,0 +1,27 @@
+import type { AnalyticsTrackerOptions } from '@alfakit/core'
+import { startAnalytics } from '@alfakit/core'
+import { router } from '@inertiajs/react'
+import { useEffect } from 'react'
+
+/**
+ * Privacy-first page views for the public pages of an Inertia app (alfasix/alfakit-analytics):
+ * no cookies, no storage, honours Do Not Track and Global Privacy Control. Renders nothing;
+ * mount it once in your public layout. Record custom events with `trackAnalyticsEvent()`.
+ *
+ * ```tsx
+ * <AlfakitAnalytics siteKey="k3y" />
+ * ```
+ */
+export function AlfakitAnalytics({ siteKey, endpoint, trackLocalhost }: AnalyticsTrackerOptions) {
+  useEffect(() => {
+    const { tracker, stop } = startAnalytics({ siteKey, endpoint, trackLocalhost })
+    const off = router.on('navigate', () => tracker.pageview())
+
+    return () => {
+      off()
+      stop()
+    }
+  }, [siteKey, endpoint, trackLocalhost])
+
+  return null
+}

package/src/components/analytics/breakdown.tsx

@@ -0,0 +1,150 @@
+import type { AnalyticsBreakdownRowSchema, AnalyticsBreakdownWidgetSchema } from '@alfakit/core'
+import { analyticsChangeColor, analyticsInitialTab } from '@alfakit/core'
+import { Link } from '@inertiajs/react'
+import { useState } from 'react'
+import { useDirection, useT } from '../../context'
+import { textColorClasses } from '../../lib/colors'
+import { Icon } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+import { Card } from '../ui/card'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs'
+
+/**
+ * An analytics top list (`analytics:breakdown`): a tab per dimension, each row a bar that
+ * links to the dashboard filtered by it. Every number arrives formatted by the server.
+ */
+export function AnalyticsBreakdown({ widget }: { widget: AnalyticsBreakdownWidgetSchema }) {
+  const t = useT()
+  const direction = useDirection()
+  const [active, setActive] = useState(() => analyticsInitialTab(widget))
+  const current = widget.tabs.some((tab) => tab.key === active)
+    ? active
+    : analyticsInitialTab(widget)
+
+  return (
+    <Card data-slot="analytics-breakdown" className="gap-0 overflow-hidden py-0">
+      <Tabs value={current} onValueChange={setActive} dir={direction} className="gap-0">
+        <div className="flex flex-wrap items-center justify-between gap-3 px-5 pt-4 pb-3">
+          <h3 className="text-base font-semibold">{widget.heading}</h3>
+          {widget.tabs.length > 1 && (
+            <TabsList
+              aria-label={t('analytics.views', { panel: widget.heading }, ':panel views')}
+              className="max-w-full overflow-x-auto"
+            >
+              {widget.tabs.map((tab) => (
+                <TabsTrigger
+                  key={tab.key}
+                  value={tab.key}
+                  className="flex-none"
+                  data-filtered={tab.filtered ? 'true' : undefined}
+                >
+                  {tab.label}
+                </TabsTrigger>
+              ))}
+            </TabsList>
+          )}
+        </div>
+        {widget.tabs.map((tab) => (
+          <TabsContent key={tab.key} value={tab.key} className="px-3 pb-4">
+            <div
+              className="text-muted-foreground flex items-center gap-3 px-2 pb-1.5 text-xs font-medium tracking-wide uppercase"
+              aria-hidden="true"
+            >
+              <span className="min-w-0 flex-1 truncate">{tab.columns[0]}</span>
+              <span className="w-16 text-end">{tab.columns[1]}</span>
+              <span className="hidden w-20 text-end sm:block">{tab.columns[2]}</span>
+            </div>
+            {tab.rows.length === 0 ? (
+              <p className="text-muted-foreground px-2 py-6 text-center text-sm">
+                {widget.emptyLabel ?? t('analytics.empty', {}, 'No data for this period')}
+              </p>
+            ) : (
+              <ul className="flex flex-col gap-0.5" aria-label={tab.label}>
+                {tab.rows.map((row) => (
+                  <li key={row.key}>
+                    <BreakdownRow row={row} columns={tab.columns} />
+                  </li>
+                ))}
+              </ul>
+            )}
+          </TabsContent>
+        ))}
+      </Tabs>
+    </Card>
+  )
+}
+
+function BreakdownRow({ row, columns }: { row: AnalyticsBreakdownRowSchema; columns: string[] }) {
+  const t = useT()
+  const changeColor = analyticsChangeColor(row.change)
+  // Links announce what they do; the visible label is then hidden from screen readers.
+  const linkLabel = row.url
+    ? row.active
+      ? t('analytics.remove_filter', { label: row.label }, 'Remove filter :label')
+      : t('analytics.filter_by', { label: row.label }, 'Filter by :label')
+    : null
+
+  const content = (
+    <>
+      <span
+        aria-hidden="true"
+        className={cn(
+          'pointer-events-none absolute inset-y-0 start-0 rounded-md transition-colors',
+          row.active ? 'bg-primary/20' : 'bg-primary/10 group-hover:bg-primary/15',
+        )}
+        style={{ width: `${Math.max(0, Math.min(1, row.bar)) * 100}%` }}
+      />
+      <span className="relative flex min-w-0 flex-1 items-center gap-2">
+        {row.flag && <span aria-hidden="true">{row.flag}</span>}
+        {linkLabel && <span className="sr-only">{linkLabel}</span>}
+        <span className="truncate" title={row.label} aria-hidden={linkLabel ? 'true' : undefined}>
+          {row.label}
+        </span>
+        {row.active && <Icon name="x" className="text-muted-foreground size-3.5 shrink-0" />}
+      </span>
+      <span className="relative flex w-16 flex-col items-end tabular-nums">
+        <span className="sr-only">{columns[1]}: </span>
+        <span className="font-medium">{row.display[0]}</span>
+        {row.changeDisplay && (
+          <span
+            className={cn(
+              'text-[11px] leading-none',
+              changeColor ? textColorClasses[changeColor] : 'text-muted-foreground',
+            )}
+          >
+            {row.changeDisplay}
+          </span>
+        )}
+      </span>
+      <span className="text-muted-foreground relative hidden w-20 text-end tabular-nums sm:block">
+        <span className="sr-only">{columns[2]}: </span>
+        {row.display[1]}
+      </span>
+    </>
+  )
+
+  const className = cn(
+    'group relative flex min-h-9 items-center gap-3 rounded-md px-2 py-1.5 text-sm',
+    row.active && 'font-medium',
+  )
+
+  if (!row.url) {
+    return (
+      <div className={className} data-slot="analytics-row">
+        {content}
+      </div>
+    )
+  }
+
+  return (
+    <Link
+      href={row.url}
+      preserveScroll
+      data-slot="analytics-row"
+      aria-current={row.active ? 'true' : undefined}
+      className={cn(className, 'focus-visible:ring-ring/50 outline-none focus-visible:ring-[3px]')}
+    >
+      {content}
+    </Link>
+  )
+}

package/src/components/analytics/index.ts

@@ -0,0 +1,2 @@
+export { AlfakitAnalytics } from './alfakit-analytics'
+export { AnalyticsBreakdown } from './breakdown'

package/src/components/cms/admin-bar.tsx

@@ -0,0 +1,66 @@
+import type { CmsAdminBarSchema } from '@alfakit/core'
+import { ChevronDownIcon, EyeIcon, LayoutDashboardIcon, PencilIcon } from 'lucide-react'
+import { useState } from 'react'
+import { Button } from '../ui/button'
+import { useCms } from './context'
+
+/**
+ * The floating admin bar of public pages (`CmsPlugin::adminBar()`), for signed-in users
+ * who can edit the page: Edit, View draft and Back to dashboard. It can be collapsed.
+ */
+export function CmsAdminBar({ admin }: { admin: CmsAdminBarSchema }) {
+  const { t } = useCms()
+  const [collapsed, setCollapsed] = useState(false)
+
+  return (
+    <aside
+      aria-label={t('cms.admin_bar', {}, 'Site editing')}
+      data-slot="cms-admin-bar"
+      className="bg-popover text-popover-foreground fixed end-4 bottom-4 z-50 flex max-w-[calc(100vw-2rem)] flex-wrap items-center gap-1 rounded-xl border p-1.5 shadow-lg"
+    >
+      {!collapsed && (
+        <>
+          <Button asChild size="sm">
+            <a href={admin.editUrl}>
+              <PencilIcon aria-hidden="true" />
+              {t('cms.edit_page', {}, 'Edit this page')}
+            </a>
+          </Button>
+          {admin.draftUrl && (
+            <Button asChild size="sm" variant="ghost">
+              <a href={admin.draftUrl}>
+                <EyeIcon aria-hidden="true" />
+                {t('cms.view_draft', {}, 'View draft')}
+              </a>
+            </Button>
+          )}
+          <Button asChild size="sm" variant="ghost">
+            <a href={admin.dashboardUrl}>
+              <LayoutDashboardIcon className="rtl:-scale-x-100" aria-hidden="true" />
+              {t('cms.dashboard', {}, 'Back to dashboard')}
+            </a>
+          </Button>
+          {admin.hasChanges && (
+            <span className="text-muted-foreground px-2 text-xs">
+              {t('cms.changes_pending', {}, "This page has changes that aren't published yet.")}
+            </span>
+          )}
+        </>
+      )}
+      <Button
+        type="button"
+        size="icon-sm"
+        variant="ghost"
+        aria-expanded={!collapsed}
+        onClick={() => setCollapsed(!collapsed)}
+      >
+        {collapsed ? <PencilIcon aria-hidden="true" /> : <ChevronDownIcon aria-hidden="true" />}
+        <span className="sr-only">
+          {collapsed
+            ? t('cms.show_admin_bar', {}, 'Show editing bar')
+            : t('cms.hide_admin_bar', {}, 'Hide editing bar')}
+        </span>
+      </Button>
+    </aside>
+  )
+}