@alfakit/react 0.0.0-stage → 0.1.0

package/dist/components/widgets/calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.js","names":[],"sources":["../../../src/components/widgets/calendar.tsx"],"sourcesContent":["import type { CalendarWidgetSchema } from '@alfakit/core'\nimport { calendarIdentity, calendarOptions, clientErrorNotification } from '@alfakit/core'\nimport { Calendar, type CalendarOptions } from '@fullcalendar/core'\nimport dayGridPlugin from '@fullcalendar/daygrid'\nimport interactionPlugin from '@fullcalendar/interaction'\nimport listPlugin from '@fullcalendar/list'\nimport timeGridPlugin from '@fullcalendar/timegrid'\nimport { router } from '@inertiajs/react'\nimport { useEffect, useRef } from 'react'\nimport { useActionRunner, useDirection, useLocalization, useT } from '../../context'\nimport { usePageActionContext } from '../actions/action-context'\nimport { ActionList } from '../actions/action-list'\nimport { showToast } from '../notifications/flash-toasts'\nimport { Card, CardContent, CardHeader, CardTitle } from '../ui/card'\n\nconst plugins = [dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin]\n\n/**\n * The calendar widget (alfasix/alfakit-calendar, registry key `widget:calendar`). Events\n * are fetched for the visible range through the widget's actions; FullCalendar loads with\n * this component's own chunk.\n */\nexport function CalendarWidget({ widget }: { widget: CalendarWidgetSchema }) {\n  const element = useRef<HTMLDivElement>(null)\n  const calendar = useRef<Calendar | null>(null)\n  const runner = useActionRunner()\n  const page = usePageActionContext()\n  const t = useT()\n  const direction = useDirection()\n  const localization = useLocalization()\n\n  const env = {\n    runner,\n    token: page.token,\n    t,\n    locale: localization?.tag ?? 'en',\n    direction,\n    firstDayOfWeek: localization?.firstDayOfWeek ?? 0,\n    visit: (url: string, newTab: boolean) =>\n      newTab ? window.open(url, '_blank', 'noopener') : router.visit(url),\n    notify: (notifications: Parameters<typeof showToast>[0][]) =>\n      notifications.forEach((notification) => showToast(notification)),\n    error: (message: string) =>\n      showToast(clientErrorNotification(`calendar-${widget.id}`, message)),\n  }\n  // The callbacks always see the latest schema and context without recreating the calendar.\n  const latest = useRef({ widget, env })\n\n  useEffect(() => {\n    latest.current = { widget, env }\n  })\n\n  const identity = calendarIdentity(widget, env)\n\n  useEffect(() => {\n    if (!element.current) {\n      return\n    }\n\n    const options = calendarOptions(latest.current.widget, {\n      ...latest.current.env,\n      runner: {\n        trigger: (...args) => latest.current.env.runner.trigger(...args),\n        executeJson: (...args) => latest.current.env.runner.executeJson(...args),\n      },\n    })\n    const instance = new Calendar(element.current, {\n      ...(options as CalendarOptions),\n      plugins,\n      height: 'auto',\n    })\n\n    instance.render()\n    calendar.current = instance\n\n    return () => {\n      instance.destroy()\n      calendar.current = null\n    }\n  }, [identity])\n\n  // A new schema (after an action ran, or a poll) brings fresh events.\n  const first = useRef(true)\n\n  useEffect(() => {\n    if (first.current) {\n      first.current = false\n\n      return\n    }\n\n    calendar.current?.refetchEvents()\n  }, [widget])\n\n  return (\n    <Card className=\"gap-4 py-4\" data-slot=\"calendar-widget\">\n      {(widget.heading || widget.headerActions?.length) && (\n        <CardHeader className=\"px-5\">\n          <div className=\"flex flex-wrap items-center justify-between gap-3\">\n            {widget.heading && <CardTitle className=\"text-base\">{widget.heading}</CardTitle>}\n            {widget.headerActions && (\n              <ActionList\n                actions={widget.headerActions}\n                context={{ token: page.token, component: `widget:${widget.id}` }}\n                size=\"sm\"\n                align=\"end\"\n                className=\"ms-auto\"\n              />\n            )}\n          </div>\n        </CardHeader>\n      )}\n      <CardContent className=\"px-5\">\n        <div\n          ref={element}\n          data-slot=\"calendar\"\n          dir={direction}\n          aria-label={widget.heading ?? t('calendar.label', {}, 'Calendar')}\n          role=\"region\"\n        />\n      </CardContent>\n    </Card>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAeA,MAAM,UAAU;CAAC;CAAe;CAAgB;CAAY;AAAiB;;;;;;AAO7E,SAAgB,eAAe,EAAE,UAA4C;CAC3E,MAAM,UAAU,OAAuB,IAAI;CAC3C,MAAM,WAAW,OAAwB,IAAI;CAC7C,MAAM,SAAS,gBAAgB;CAC/B,MAAM,OAAO,qBAAqB;CAClC,MAAM,IAAI,KAAK;CACf,MAAM,YAAY,aAAa;CAC/B,MAAM,eAAe,gBAAgB;CAErC,MAAM,MAAM;EACV;EACA,OAAO,KAAK;EACZ;EACA,QAAQ,cAAc,OAAO;EAC7B;EACA,gBAAgB,cAAc,kBAAkB;EAChD,QAAQ,KAAa,WACnB,SAAS,OAAO,KAAK,KAAK,UAAU,UAAU,IAAI,OAAO,MAAM,GAAG;EACpE,SAAS,kBACP,cAAc,SAAS,iBAAiB,UAAU,YAAY,CAAC;EACjE,QAAQ,YACN,UAAU,wBAAwB,YAAY,OAAO,MAAM,OAAO,CAAC;CACvE;CAEA,MAAM,SAAS,OAAO;EAAE;EAAQ;CAAI,CAAC;CAErC,gBAAgB;EACd,OAAO,UAAU;GAAE;GAAQ;EAAI;CACjC,CAAC;CAED,MAAM,WAAW,iBAAiB,QAAQ,GAAG;CAE7C,gBAAgB;EACd,IAAI,CAAC,QAAQ,SACX;EAGF,MAAM,UAAU,gBAAgB,OAAO,QAAQ,QAAQ;GACrD,GAAG,OAAO,QAAQ;GAClB,QAAQ;IACN,UAAU,GAAG,SAAS,OAAO,QAAQ,IAAI,OAAO,QAAQ,GAAG,IAAI;IAC/D,cAAc,GAAG,SAAS,OAAO,QAAQ,IAAI,OAAO,YAAY,GAAG,IAAI;GACzE;EACF,CAAC;EACD,MAAM,WAAW,IAAI,SAAS,QAAQ,SAAS;GAC7C,GAAI;GACJ;GACA,QAAQ;EACV,CAAC;EAED,SAAS,OAAO;EAChB,SAAS,UAAU;EAEnB,aAAa;GACX,SAAS,QAAQ;GACjB,SAAS,UAAU;EACrB;CACF,GAAG,CAAC,QAAQ,CAAC;CAGb,MAAM,QAAQ,OAAO,IAAI;CAEzB,gBAAgB;EACd,IAAI,MAAM,SAAS;GACjB,MAAM,UAAU;GAEhB;EACF;EAEA,SAAS,SAAS,cAAc;CAClC,GAAG,CAAC,MAAM,CAAC;CAEX,OACE,qBAAC,MAAD;EAAM,WAAU;EAAa,aAAU;EAAvC,UAAA,EACI,OAAO,WAAW,OAAO,eAAe,WACxC,oBAAC,YAAD;GAAY,WAAU;GACpB,UAAA,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,OAAO,WAAW,oBAAC,WAAD;KAAW,WAAU;KAAa,UAAA,OAAO;IAAmB,CAAA,GAC9E,OAAO,iBACN,oBAAC,YAAD;KACE,SAAS,OAAO;KAChB,SAAS;MAAE,OAAO,KAAK;MAAO,WAAW,UAAU,OAAO;KAAK;KAC/D,MAAK;KACL,OAAM;KACN,WAAU;IACX,CAAA,CAEA;;EACK,CAAA,GAEd,oBAAC,aAAD;GAAa,WAAU;GACrB,UAAA,oBAAC,OAAD;IACE,KAAK;IACL,aAAU;IACV,KAAK;IACL,cAAY,OAAO,WAAW,EAAE,kBAAkB,CAAC,GAAG,UAAU;IAChE,MAAK;GACN,CAAA;EACU,CAAA,CACT;;AAEV"}

package/dist/components/widgets/chart-filters.js

@@ -0,0 +1,101 @@
+import { useT } from "../../context.js";
+import { Icon } from "../../lib/icons.js";
+import { Button } from "../ui/button.js";
+import { useStore } from "../../hooks/use-store.js";
+import { FormProvider } from "../form/form-context.js";
+import { SchemaRenderer } from "../schema/schema-renderer.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover.js";
+import { TableTriggerButton } from "../table/trigger-button.js";
+import { FormStore, chartFiltersUrl, resolvePartialProps, triggerButtonView } from "@alfakit/core";
+import { router } from "@inertiajs/react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FilterIcon } from "lucide-react";
+//#region src/components/widgets/chart-filters.tsx
+/**
+* The `filtersSchema()` form of a chart widget, in a popover. Values live in the query
+* string; the chart reloads on every change, or on "Apply" with deferred filters.
+*/
+function ChartFilters({ form, widgetId }) {
+	const t = useT();
+	const [open, setOpen] = useState(false);
+	const store = useMemo(() => new FormStore(form, {
+		token: "",
+		component: `chartFilters:${widgetId}`
+	}), [form, widgetId]);
+	const state = useStore(store.store);
+	const applied = useRef(JSON.stringify(form.state));
+	useEffect(() => () => store.destroy(), [store]);
+	const apply = (values) => {
+		if (typeof window === "undefined") return;
+		applied.current = JSON.stringify(values ?? {});
+		router.visit(chartFiltersUrl(window.location.href, form.queryKey, widgetId, values), {
+			only: resolvePartialProps(["page"]),
+			preserveScroll: true,
+			preserveState: true,
+			replace: true
+		});
+	};
+	useEffect(() => {
+		if (form.deferred) return;
+		if (JSON.stringify(state.values) !== applied.current) apply(state.values);
+	}, [state.values, form.deferred]);
+	const resetView = triggerButtonView(form, "filtersReset", {
+		label: t("table.reset_filters", {}, "Reset"),
+		variant: "ghost"
+	});
+	const applyView = triggerButtonView(form, "filtersApply", {
+		label: t("table_filters.apply", {}, "Apply"),
+		variant: "default"
+	});
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "ghost",
+				size: "icon-sm",
+				"aria-label": t("table.filters", {}, "Filters"),
+				"data-slot": "chart-filters-trigger",
+				children: /* @__PURE__ */ jsx(Icon, {
+					name: "alfakit::widgets.chart.filter",
+					fallback: FilterIcon
+				})
+			})
+		}), /* @__PURE__ */ jsxs(PopoverContent, {
+			align: "end",
+			className: "flex w-80 flex-col gap-4",
+			"data-slot": "chart-filters",
+			children: [/* @__PURE__ */ jsx(FormProvider, {
+				store,
+				children: /* @__PURE__ */ jsx(SchemaRenderer, {
+					components: state.components,
+					columns: state.columns
+				})
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between gap-2",
+				children: [resetView ? /* @__PURE__ */ jsx(TableTriggerButton, {
+					view: resetView,
+					"data-slot": "chart-filters-reset",
+					onClick: () => {
+						apply(null);
+						setOpen(false);
+					}
+				}) : /* @__PURE__ */ jsx("span", {}), form.deferred && applyView && /* @__PURE__ */ jsx(TableTriggerButton, {
+					view: applyView,
+					"data-slot": "chart-filters-apply",
+					onClick: () => {
+						apply(state.values);
+						setOpen(false);
+					}
+				})]
+			})]
+		})]
+	});
+}
+//#endregion
+export { ChartFilters };
+
+//# sourceMappingURL=chart-filters.js.map

package/dist/components/widgets/chart-filters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-filters.js","names":[],"sources":["../../../src/components/widgets/chart-filters.tsx"],"sourcesContent":["import type { ChartFiltersFormSchema } from '@alfakit/core'\nimport { FormStore, chartFiltersUrl, resolvePartialProps, triggerButtonView } from '@alfakit/core'\nimport { router } from '@inertiajs/react'\nimport { FilterIcon } from 'lucide-react'\nimport { useEffect, useMemo, useRef, useState } from 'react'\nimport { useT } from '../../context'\nimport { useStore } from '../../hooks/use-store'\nimport { Icon } from '../../lib/icons'\nimport { FormProvider } from '../form/form-context'\nimport { SchemaRenderer } from '../schema/schema-renderer'\nimport { TableTriggerButton } from '../table/trigger-button'\nimport { Button } from '../ui/button'\nimport { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'\n\n/**\n * The `filtersSchema()` form of a chart widget, in a popover. Values live in the query\n * string; the chart reloads on every change, or on \"Apply\" with deferred filters.\n */\nexport function ChartFilters({\n  form,\n  widgetId,\n}: {\n  form: ChartFiltersFormSchema\n  widgetId: string\n}) {\n  const t = useT()\n  const [open, setOpen] = useState(false)\n  // A fresh store per server state: the filters the chart was drawn with.\n  const store = useMemo(\n    () => new FormStore(form, { token: '', component: `chartFilters:${widgetId}` }),\n    [form, widgetId],\n  )\n  const state = useStore(store.store)\n  const applied = useRef(JSON.stringify(form.state))\n\n  useEffect(() => () => store.destroy(), [store])\n\n  const apply = (values: Record<string, unknown> | null) => {\n    if (typeof window === 'undefined') return\n\n    applied.current = JSON.stringify(values ?? {})\n    router.visit(chartFiltersUrl(window.location.href, form.queryKey, widgetId, values), {\n      only: resolvePartialProps(['page']),\n      preserveScroll: true,\n      preserveState: true,\n      replace: true,\n    })\n  }\n\n  // Live filters apply as the user changes them.\n  useEffect(() => {\n    if (form.deferred) return\n\n    const values = JSON.stringify(state.values)\n\n    if (values !== applied.current) apply(state.values)\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [state.values, form.deferred])\n\n  // `filtersResetAction()` / `filtersApplyAction()` restyle the buttons.\n  const resetView = triggerButtonView(form, 'filtersReset', {\n    label: t('table.reset_filters', {}, 'Reset'),\n    variant: 'ghost',\n  })\n  const applyView = triggerButtonView(form, 'filtersApply', {\n    label: t('table_filters.apply', {}, 'Apply'),\n    variant: 'default',\n  })\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          aria-label={t('table.filters', {}, 'Filters')}\n          data-slot=\"chart-filters-trigger\"\n        >\n          <Icon name=\"alfakit::widgets.chart.filter\" fallback={FilterIcon} />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent align=\"end\" className=\"flex w-80 flex-col gap-4\" data-slot=\"chart-filters\">\n        <FormProvider store={store}>\n          <SchemaRenderer components={state.components} columns={state.columns} />\n        </FormProvider>\n        <div className=\"flex items-center justify-between gap-2\">\n          {resetView ? (\n            <TableTriggerButton\n              view={resetView}\n              data-slot=\"chart-filters-reset\"\n              onClick={() => {\n                apply(null)\n                setOpen(false)\n              }}\n            />\n          ) : (\n            <span />\n          )}\n          {form.deferred && applyView && (\n            <TableTriggerButton\n              view={applyView}\n              data-slot=\"chart-filters-apply\"\n              onClick={() => {\n                apply(state.values)\n                setOpen(false)\n              }}\n            />\n          )}\n        </div>\n      </PopoverContent>\n    </Popover>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAkBA,SAAgB,aAAa,EAC3B,MACA,YAIC;CACD,MAAM,IAAI,KAAK;CACf,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CAEtC,MAAM,QAAQ,cACN,IAAI,UAAU,MAAM;EAAE,OAAO;EAAI,WAAW,gBAAgB;CAAW,CAAC,GAC9E,CAAC,MAAM,QAAQ,CACjB;CACA,MAAM,QAAQ,SAAS,MAAM,KAAK;CAClC,MAAM,UAAU,OAAO,KAAK,UAAU,KAAK,KAAK,CAAC;CAEjD,sBAAsB,MAAM,QAAQ,GAAG,CAAC,KAAK,CAAC;CAE9C,MAAM,SAAS,WAA2C;EACxD,IAAI,OAAO,WAAW,aAAa;EAEnC,QAAQ,UAAU,KAAK,UAAU,UAAU,CAAC,CAAC;EAC7C,OAAO,MAAM,gBAAgB,OAAO,SAAS,MAAM,KAAK,UAAU,UAAU,MAAM,GAAG;GACnF,MAAM,oBAAoB,CAAC,MAAM,CAAC;GAClC,gBAAgB;GAChB,eAAe;GACf,SAAS;EACX,CAAC;CACH;CAGA,gBAAgB;EACd,IAAI,KAAK,UAAU;EAInB,IAFe,KAAK,UAAU,MAAM,MAE3B,MAAM,QAAQ,SAAS,MAAM,MAAM,MAAM;CAEpD,GAAG,CAAC,MAAM,QAAQ,KAAK,QAAQ,CAAC;CAGhC,MAAM,YAAY,kBAAkB,MAAM,gBAAgB;EACxD,OAAO,EAAE,uBAAuB,CAAC,GAAG,OAAO;EAC3C,SAAS;CACX,CAAC;CACD,MAAM,YAAY,kBAAkB,MAAM,gBAAgB;EACxD,OAAO,EAAE,uBAAuB,CAAC,GAAG,OAAO;EAC3C,SAAS;CACX,CAAC;CAED,OACE,qBAAC,SAAD;EAAe;EAAM,cAAc;EAAnC,UAAA,CACE,oBAAC,gBAAD;GAAgB,SAAA;GACd,UAAA,oBAAC,QAAD;IACE,MAAK;IACL,SAAQ;IACR,MAAK;IACL,cAAY,EAAE,iBAAiB,CAAC,GAAG,SAAS;IAC5C,aAAU;IAEV,UAAA,oBAAC,MAAD;KAAM,MAAK;KAAgC,UAAU;IAAa,CAAA;GAC5D,CAAA;EACM,CAAA,GAChB,qBAAC,gBAAD;GAAgB,OAAM;GAAM,WAAU;GAA2B,aAAU;GAA3E,UAAA,CACE,oBAAC,cAAD;IAAqB;IACnB,UAAA,oBAAC,gBAAD;KAAgB,YAAY,MAAM;KAAY,SAAS,MAAM;IAAU,CAAA;GAC3D,CAAA,GACd,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,YACC,oBAAC,oBAAD;KACE,MAAM;KACN,aAAU;KACV,eAAe;MACb,MAAM,IAAI;MACV,QAAQ,KAAK;KACf;IACD,CAAA,IAED,oBAAC,QAAD,CAAO,CAAA,GAER,KAAK,YAAY,aAChB,oBAAC,oBAAD;KACE,MAAM;KACN,aAAU;KACV,eAAe;MACb,MAAM,MAAM,MAAM;MAClB,QAAQ,KAAK;KACf;IACD,CAAA,CAEA;GACS,CAAA,CAAA;EACT,CAAA,CAAA;;AAEb"}

package/dist/components/widgets/chart-lazy.d.ts

@@ -0,0 +1,9 @@
+import { LazyComponent } from "../../lib/lazy.js";
+import { ChartWidgetSchema } from "@alfakit/core";
+//#region src/components/widgets/chart-lazy.d.ts
+/** The chart widget; Chart.js loads the first time a chart is shown. */
+export declare const ChartWidget: LazyComponent<{
+  widget: ChartWidgetSchema;
+}>;
+//#endregion
+//# sourceMappingURL=chart-lazy.d.ts.map

package/dist/components/widgets/chart-lazy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-lazy.d.ts","names":["_$______lib_lazy0.LazyComponent"],"sources":["../../../src/components/widgets/chart-lazy.tsx"],"mappings":";;;;qBAiBa,aAAsCA;EAAA,QAAA"}

package/dist/components/widgets/chart-lazy.js

@@ -0,0 +1,27 @@
+import { lazyComponent } from "../../lib/lazy.js";
+import { Card, CardContent } from "../ui/card.js";
+import { Skeleton } from "../ui/skeleton.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/widgets/chart-lazy.tsx
+function ChartSkeleton({ widget }) {
+	return /* @__PURE__ */ jsx(Card, {
+		className: "gap-4 py-4",
+		"aria-busy": "true",
+		children: /* @__PURE__ */ jsxs(CardContent, {
+			className: "flex flex-col gap-4 px-5",
+			children: [widget.heading && /* @__PURE__ */ jsx(Skeleton, {
+				className: "h-5 w-1/3",
+				"aria-hidden": "true"
+			}), /* @__PURE__ */ jsx(Skeleton, {
+				style: { height: widget.maxHeight ?? "18rem" },
+				"aria-hidden": "true"
+			})]
+		})
+	});
+}
+/** The chart widget; Chart.js loads the first time a chart is shown. */
+const ChartWidget = lazyComponent(() => import("./chart.js").then((module) => module.ChartWidget), (props) => /* @__PURE__ */ jsx(ChartSkeleton, { ...props }));
+//#endregion
+export { ChartWidget };
+
+//# sourceMappingURL=chart-lazy.js.map

package/dist/components/widgets/chart-lazy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-lazy.js","names":[],"sources":["../../../src/components/widgets/chart-lazy.tsx"],"sourcesContent":["import type { ChartWidgetSchema } from '@alfakit/core'\nimport { lazyComponent } from '../../lib/lazy'\nimport { Card, CardContent } from '../ui/card'\nimport { Skeleton } from '../ui/skeleton'\n\nfunction ChartSkeleton({ widget }: { widget: ChartWidgetSchema }) {\n  return (\n    <Card className=\"gap-4 py-4\" aria-busy=\"true\">\n      <CardContent className=\"flex flex-col gap-4 px-5\">\n        {widget.heading && <Skeleton className=\"h-5 w-1/3\" aria-hidden=\"true\" />}\n        <Skeleton style={{ height: widget.maxHeight ?? '18rem' }} aria-hidden=\"true\" />\n      </CardContent>\n    </Card>\n  )\n}\n\n/** The chart widget; Chart.js loads the first time a chart is shown. */\nexport const ChartWidget = lazyComponent<{ widget: ChartWidgetSchema }>(\n  () => import('./chart').then((module) => module.ChartWidget),\n  (props) => <ChartSkeleton {...props} />,\n)\n"],"mappings":";;;;;AAKA,SAAS,cAAc,EAAE,UAAyC;CAChE,OACE,oBAAC,MAAD;EAAM,WAAU;EAAa,aAAU;EACrC,UAAA,qBAAC,aAAD;GAAa,WAAU;GAAvB,UAAA,CACG,OAAO,WAAW,oBAAC,UAAD;IAAU,WAAU;IAAY,eAAY;GAAQ,CAAA,GACvE,oBAAC,UAAD;IAAU,OAAO,EAAE,QAAQ,OAAO,aAAa,QAAQ;IAAG,eAAY;GAAQ,CAAA,CACnE;;CACT,CAAA;AAEV;;AAGA,MAAa,cAAc,oBACnB,OAAO,aAAU,CAAC,MAAM,WAAW,OAAO,WAAW,IAC1D,UAAU,oBAAC,eAAD,EAAe,GAAI,MAAQ,CAAA,CACxC"}

package/dist/components/widgets/chart.js

@@ -0,0 +1,216 @@
+import { useDirection, useLocalization, usePollComponent, useRegistry, useT } from "../../context.js";
+import { usePageActionContext } from "../actions/action-context.js";
+import { cn } from "../../lib/utils.js";
+import { cssColor } from "../../lib/colors.js";
+import { Icon } from "../../lib/icons.js";
+import { Button } from "../ui/button.js";
+import { ActionList } from "../actions/action-list.js";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card.js";
+import { useLiveUpdates } from "../realtime/live-records-pill.js";
+import { ChartFilters } from "./chart-filters.js";
+import { buildChartConfig, getChartPlugins, observeThemeChanges, resolvePartialProps, widgetPollTarget } from "@alfakit/core";
+import { router } from "@inertiajs/react";
+import { createElement, useEffect, useId, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChartColumnIcon, ChevronDownIcon } from "lucide-react";
+import { Chart, registerables } from "chart.js";
+//#region src/components/widgets/chart.tsx
+Chart.register(...registerables);
+function ChartWidget({ widget }) {
+	const t = useT();
+	const canvas = useRef(null);
+	const chart = useRef(null);
+	const chartType = useRef(null);
+	const rtl = useDirection() === "rtl";
+	const locale = useLocalization()?.tag ?? "en";
+	const [themeVersion, setThemeVersion] = useState(0);
+	useEffect(() => observeThemeChanges(() => setThemeVersion((version) => version + 1)), []);
+	const config = useMemo(() => {
+		return buildChartConfig({
+			type: widget.chartType,
+			data: widget.data,
+			options: widget.options,
+			rtl,
+			locale,
+			color: widget.color
+		});
+	}, [
+		widget.chartType,
+		widget.data,
+		widget.options,
+		widget.color,
+		rtl,
+		locale,
+		themeVersion
+	]);
+	const [collapsed, setCollapsed] = useState(false);
+	const bodyId = useId();
+	const showChart = !widget.empty && !collapsed;
+	useEffect(() => {
+		if (!canvas.current) {
+			chart.current?.destroy();
+			chart.current = null;
+			return;
+		}
+		const instance = chart.current;
+		if (instance && chartType.current === config.type) {
+			instance.data = config.data;
+			instance.options = config.options ?? {};
+			instance.update();
+			return;
+		}
+		instance?.destroy();
+		const plugins = getChartPlugins();
+		if (plugins.length > 0) Chart.register(...plugins);
+		chart.current = new Chart(canvas.current, config);
+		chartType.current = config.type;
+	}, [config, showChart]);
+	useEffect(() => () => {
+		chart.current?.destroy();
+		chart.current = null;
+	}, []);
+	const pollTarget = widgetPollTarget(widget);
+	const pollComponent = usePollComponent();
+	useEffect(() => pollComponent(pollTarget, widget.pollingInterval), [
+		pollComponent,
+		pollTarget,
+		widget.pollingInterval
+	]);
+	useLiveUpdates(widget.live, pollTarget, { polling: Boolean(widget.pollingInterval) });
+	const setFilter = (value) => {
+		const url = new URL(window.location.href);
+		url.searchParams.set(`widgetFilters[${widget.id}]`, value);
+		router.visit(url.toString(), {
+			only: resolvePartialProps(["page"]),
+			preserveScroll: true,
+			preserveState: true,
+			replace: true
+		});
+	};
+	const hasHeader = widget.heading || widget.description || widget.filters || widget.filtersForm || widget.collapsible;
+	return /* @__PURE__ */ jsxs(Card, {
+		className: "gap-4 py-4",
+		"data-chart-type": widget.chartType,
+		children: [hasHeader && /* @__PURE__ */ jsx(CardHeader, {
+			className: "px-5",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex items-start justify-between gap-3",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "min-w-0",
+					children: [widget.heading && /* @__PURE__ */ jsx(CardTitle, {
+						className: "text-base",
+						children: widget.heading
+					}), widget.description && /* @__PURE__ */ jsx(CardDescription, { children: widget.description })]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex shrink-0 items-center gap-1",
+					children: [
+						widget.filters && /* @__PURE__ */ jsx("select", {
+							value: widget.filter ?? "",
+							onChange: (event) => setFilter(event.target.value),
+							"aria-label": t("chart_filter", {}, "Chart filter"),
+							className: "border-input h-8 rounded-md border bg-transparent px-2 text-sm",
+							children: widget.filters.map((filter) => /* @__PURE__ */ jsx("option", {
+								value: filter.value,
+								children: filter.label
+							}, filter.value))
+						}),
+						widget.filtersForm && /* @__PURE__ */ jsx(ChartFilters, {
+							form: widget.filtersForm,
+							widgetId: widget.id
+						}),
+						widget.collapsible && /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "ghost",
+							size: "icon-sm",
+							"aria-expanded": !collapsed,
+							"aria-controls": bodyId,
+							"aria-label": t("toggle_section", {}, "Toggle section"),
+							onClick: () => setCollapsed((value) => !value),
+							children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: cn("transition-transform", collapsed && "-rotate-90 rtl:rotate-90") })
+						})
+					]
+				})]
+			})
+		}), !collapsed && /* @__PURE__ */ jsx(CardContent, {
+			id: bodyId,
+			className: "px-5",
+			children: widget.empty ? /* @__PURE__ */ jsx(ChartEmptyState, { widget }) : /* @__PURE__ */ jsxs("div", {
+				"data-slot": "chart-canvas",
+				style: {
+					height: widget.maxHeight ?? "18rem",
+					color: cssColor("gray")
+				},
+				children: [/* @__PURE__ */ jsx("canvas", {
+					ref: canvas,
+					role: "img",
+					"aria-label": widget.heading ?? t("chart", {}, "Chart"),
+					"aria-describedby": widget.assistiveContent ? `${bodyId}-assistive` : void 0
+				}), widget.assistiveContent && /* @__PURE__ */ jsx("div", {
+					id: `${bodyId}-assistive`,
+					className: "sr-only",
+					"data-slot": "chart-assistive-content",
+					dangerouslySetInnerHTML: { __html: widget.assistiveContent }
+				})]
+			})
+		})]
+	});
+}
+/**
+* Shown when `getData()` returns nothing: a registered `$emptyStateView` component, or the
+* icon, texts and `getEmptyStateActions()` (run through the widget, `widget:<id>`).
+*/
+function ChartEmptyState({ widget }) {
+	const t = useT();
+	const registry = useRegistry();
+	const page = usePageActionContext();
+	const state = widget.emptyState;
+	const View = state?.view ? registry.resolve(state.view) : void 0;
+	const minHeight = widget.maxHeight ?? "18rem";
+	if (View) return /* @__PURE__ */ jsx("div", {
+		"data-slot": "chart-empty-state",
+		style: { minHeight },
+		children: createElement(View, {
+			...state?.viewData ?? {},
+			widget
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "chart-empty-state",
+		className: "flex flex-col items-center justify-center gap-2 py-10 text-center",
+		style: { minHeight },
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "bg-muted text-muted-foreground flex size-10 items-center justify-center rounded-full",
+				children: state?.icon ? /* @__PURE__ */ jsx(Icon, {
+					name: state.icon,
+					className: "size-5"
+				}) : /* @__PURE__ */ jsx(Icon, {
+					name: "alfakit::widgets.chart.empty-state",
+					fallback: ChartColumnIcon,
+					className: "size-5"
+				})
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "text-sm font-medium",
+				children: state?.heading ?? t("chart_empty", {}, "No data to show")
+			}),
+			state?.description && /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground text-sm",
+				children: state.description
+			}),
+			state?.actions && state.actions.length > 0 && /* @__PURE__ */ jsx(ActionList, {
+				actions: state.actions,
+				context: {
+					token: page.token,
+					component: `widget:${widget.id}`
+				},
+				size: "sm",
+				className: "mt-2 justify-center"
+			})
+		]
+	});
+}
+//#endregion
+export { ChartWidget };
+
+//# sourceMappingURL=chart.js.map

package/dist/components/widgets/chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart.js","names":[],"sources":["../../../src/components/widgets/chart.tsx"],"sourcesContent":["import type { ChartWidgetSchema } from '@alfakit/core'\nimport {\n  buildChartConfig,\n  getChartPlugins,\n  observeThemeChanges,\n  resolvePartialProps,\n  widgetPollTarget,\n} from '@alfakit/core'\nimport { router } from '@inertiajs/react'\nimport { Chart, registerables, type ChartConfiguration, type Plugin } from 'chart.js'\nimport { ChartColumnIcon, ChevronDownIcon } from 'lucide-react'\nimport { createElement, useEffect, useId, useMemo, useRef, useState } from 'react'\nimport { useDirection, useLocalization, usePollComponent, useRegistry, useT } from '../../context'\nimport { cssColor } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { usePageActionContext } from '../actions/action-context'\nimport { ActionList } from '../actions/action-list'\nimport { useLiveUpdates } from '../realtime/live-records-pill'\nimport { Button } from '../ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card'\nimport { ChartFilters } from './chart-filters'\n\nChart.register(...registerables)\n\nexport function ChartWidget({ widget }: { widget: ChartWidgetSchema }) {\n  const t = useT()\n  const canvas = useRef<HTMLCanvasElement>(null)\n  const chart = useRef<Chart | null>(null)\n  const chartType = useRef<string | null>(null)\n  const rtl = useDirection() === 'rtl'\n  const locale = useLocalization()?.tag ?? 'en'\n  // Bumped when the theme or dark mode changes so colours are re-read from CSS.\n  const [themeVersion, setThemeVersion] = useState(0)\n\n  useEffect(() => observeThemeChanges(() => setThemeVersion((version) => version + 1)), [])\n\n  const config = useMemo(() => {\n    void themeVersion\n\n    return buildChartConfig({\n      type: widget.chartType,\n      data: widget.data,\n      options: widget.options,\n      rtl,\n      locale,\n      color: widget.color,\n    }) as unknown as ChartConfiguration\n  }, [widget.chartType, widget.data, widget.options, widget.color, rtl, locale, themeVersion])\n  const [collapsed, setCollapsed] = useState(false)\n  const bodyId = useId()\n  // The canvas only exists while the chart is shown (not empty, not collapsed).\n  const showChart = !widget.empty && !collapsed\n\n  // Polling, theme, direction and locale changes update the chart in place; it is only\n  // re-created when its type changes.\n  useEffect(() => {\n    if (!canvas.current) {\n      chart.current?.destroy()\n      chart.current = null\n\n      return\n    }\n\n    const instance = chart.current\n\n    if (instance && chartType.current === config.type) {\n      instance.data = config.data\n      instance.options = config.options ?? {}\n      instance.update()\n\n      return\n    }\n\n    instance?.destroy()\n    // `createAlfakit({ chartPlugins })`, registered before the chart is drawn.\n    const plugins = getChartPlugins() as Plugin[]\n\n    if (plugins.length > 0) Chart.register(...plugins)\n\n    chart.current = new Chart(canvas.current, config)\n    chartType.current = config.type\n  }, [config, showChart])\n\n  useEffect(\n    () => () => {\n      chart.current?.destroy()\n      chart.current = null\n    },\n    [],\n  )\n\n  // Polls refresh only this widget, share one request with other components on the same\n  // interval and pause while the tab is hidden.\n  const pollTarget = widgetPollTarget(widget)\n  const pollComponent = usePollComponent()\n\n  useEffect(\n    () => pollComponent(pollTarget, widget.pollingInterval),\n    [pollComponent, pollTarget, widget.pollingInterval],\n  )\n\n  // `live()`: refresh when the followed records change (broadcast), else poll as a fallback.\n  useLiveUpdates(widget.live, pollTarget, { polling: Boolean(widget.pollingInterval) })\n\n  const setFilter = (value: string) => {\n    const url = new URL(window.location.href)\n    url.searchParams.set(`widgetFilters[${widget.id}]`, value)\n    router.visit(url.toString(), {\n      only: resolvePartialProps(['page']),\n      preserveScroll: true,\n      preserveState: true,\n      replace: true,\n    })\n  }\n\n  const hasHeader =\n    widget.heading ||\n    widget.description ||\n    widget.filters ||\n    widget.filtersForm ||\n    widget.collapsible\n\n  return (\n    <Card className=\"gap-4 py-4\" data-chart-type={widget.chartType}>\n      {hasHeader && (\n        <CardHeader className=\"px-5\">\n          <div className=\"flex items-start justify-between gap-3\">\n            <div className=\"min-w-0\">\n              {widget.heading && <CardTitle className=\"text-base\">{widget.heading}</CardTitle>}\n              {widget.description && <CardDescription>{widget.description}</CardDescription>}\n            </div>\n            <div className=\"flex shrink-0 items-center gap-1\">\n              {widget.filters && (\n                <select\n                  value={widget.filter ?? ''}\n                  onChange={(event) => setFilter(event.target.value)}\n                  aria-label={t('chart_filter', {}, 'Chart filter')}\n                  className=\"border-input h-8 rounded-md border bg-transparent px-2 text-sm\"\n                >\n                  {widget.filters.map((filter) => (\n                    <option key={filter.value} value={filter.value}>\n                      {filter.label}\n                    </option>\n                  ))}\n                </select>\n              )}\n              {widget.filtersForm && (\n                <ChartFilters form={widget.filtersForm} widgetId={widget.id} />\n              )}\n              {widget.collapsible && (\n                <Button\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  aria-expanded={!collapsed}\n                  aria-controls={bodyId}\n                  aria-label={t('toggle_section', {}, 'Toggle section')}\n                  onClick={() => setCollapsed((value) => !value)}\n                >\n                  <ChevronDownIcon\n                    className={cn('transition-transform', collapsed && '-rotate-90 rtl:rotate-90')}\n                  />\n                </Button>\n              )}\n            </div>\n          </div>\n        </CardHeader>\n      )}\n      {!collapsed && (\n        <CardContent id={bodyId} className=\"px-5\">\n          {widget.empty ? (\n            <ChartEmptyState widget={widget} />\n          ) : (\n            <div\n              data-slot=\"chart-canvas\"\n              style={{ height: widget.maxHeight ?? '18rem', color: cssColor('gray') }}\n            >\n              <canvas\n                ref={canvas}\n                role=\"img\"\n                aria-label={widget.heading ?? t('chart', {}, 'Chart')}\n                aria-describedby={widget.assistiveContent ? `${bodyId}-assistive` : undefined}\n              />\n              {widget.assistiveContent && (\n                <div\n                  id={`${bodyId}-assistive`}\n                  className=\"sr-only\"\n                  data-slot=\"chart-assistive-content\"\n                  dangerouslySetInnerHTML={{ __html: widget.assistiveContent }}\n                />\n              )}\n            </div>\n          )}\n        </CardContent>\n      )}\n    </Card>\n  )\n}\n\n/**\n * Shown when `getData()` returns nothing: a registered `$emptyStateView` component, or the\n * icon, texts and `getEmptyStateActions()` (run through the widget, `widget:<id>`).\n */\nfunction ChartEmptyState({ widget }: { widget: ChartWidgetSchema }) {\n  const t = useT()\n  const registry = useRegistry()\n  const page = usePageActionContext()\n  const state = widget.emptyState\n  const View = state?.view ? registry.resolve(state.view) : undefined\n  const minHeight = widget.maxHeight ?? '18rem'\n\n  if (View) {\n    return (\n      <div data-slot=\"chart-empty-state\" style={{ minHeight }}>\n        {createElement(View, { ...(state?.viewData ?? {}), widget })}\n      </div>\n    )\n  }\n\n  return (\n    <div\n      data-slot=\"chart-empty-state\"\n      className=\"flex flex-col items-center justify-center gap-2 py-10 text-center\"\n      style={{ minHeight }}\n    >\n      <div className=\"bg-muted text-muted-foreground flex size-10 items-center justify-center rounded-full\">\n        {state?.icon ? (\n          <Icon name={state.icon} className=\"size-5\" />\n        ) : (\n          <Icon\n            name=\"alfakit::widgets.chart.empty-state\"\n            fallback={ChartColumnIcon}\n            className=\"size-5\"\n          />\n        )}\n      </div>\n      <p className=\"text-sm font-medium\">\n        {state?.heading ?? t('chart_empty', {}, 'No data to show')}\n      </p>\n      {state?.description && <p className=\"text-muted-foreground text-sm\">{state.description}</p>}\n      {state?.actions && state.actions.length > 0 && (\n        <ActionList\n          actions={state.actions}\n          context={{ token: page.token, component: `widget:${widget.id}` }}\n          size=\"sm\"\n          className=\"mt-2 justify-center\"\n        />\n      )}\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/components/widgets/dashboard-customizer.d.ts

@@ -0,0 +1,15 @@
+import { DashboardCustomizeSchema, WidgetSchema, WidgetsBlock } from "@alfakit/core";
+import { ReactNode } from "react";
+//#region src/components/widgets/dashboard-customizer.d.ts
+/**
+ * A customizable dashboard (`Dashboard::customizable()`): the widget grid plus an "Edit
+ * dashboard" mode where widgets are dragged (pointer) or moved with the arrow keys on their
+ * handle, resized, hidden and added from the library. The layout is saved on the server.
+ */
+export declare function CustomizableWidgetGrid({ block, customize, renderWidget }: {
+  block: WidgetsBlock;
+  customize: DashboardCustomizeSchema;
+  renderWidget: (widget: WidgetSchema) => ReactNode;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=dashboard-customizer.d.ts.map

package/dist/components/widgets/dashboard-customizer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard-customizer.d.ts","names":["WidgetsBlockSchema"],"sources":["../../../src/components/widgets/dashboard-customizer.tsx"],"mappings":";;;;;;;;wBAkCgB,yBACd,OACA,WACA;EAEA,OAAOA;EACP,WAAW;EACX,eAAe,QAAQ,iBAAiB;oBACzC,IAAA"}