@pilotiq/pilotiq 0.2.0 → 0.3.0

package/dist/react/SchemaRenderer.js

@@ -7,6 +7,7 @@ import { Input } from './ui/input.js';
 import { Popover, PopoverTrigger, PopoverContent } from './ui/popover.js';
 import { FieldShell } from './fields/FieldShell.js';
 import { TextLikeInput } from './fields/TextLikeInput.js';
+import { useTextInputControls } from './fields/textInputControls.js';
 import { SelectFieldInput } from './fields/SelectFieldInput.js';
 import { ToggleFieldInput } from './fields/ToggleFieldInput.js';
 import { DateFieldInput } from './fields/DateFieldInput.js';
@@ -30,7 +31,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '
 import { Table as DataTable, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from './ui/table.js';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from './ui/dropdown-menu.js';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from './ui/tooltip.js';
-import { FilterIcon, CircleIcon, InboxIcon, GripVerticalIcon, ChevronDownIcon, CopyIcon, CheckIcon, XIcon, } from 'lucide-react';
+import { FilterIcon, CircleIcon, InboxIcon, GripVerticalIcon, ChevronDownIcon, CopyIcon, CheckIcon, XIcon, InfoIcon, TriangleAlertIcon, CircleCheckIcon, CircleAlertIcon, } from 'lucide-react';
 import { useNavigate } from './navigate.js';
 import { parseDateRangeValue, encodeDateRangeValue, } from '../filters/DateRangeFilter.js';
 import { parseMultiSelectValue, encodeMultiSelectValue, } from '../filters/MultiSelectFilter.js';
@@ -106,9 +107,39 @@ function renderField(el, index) {
     if (Custom) {
         return (_jsx(FieldShell, { el: el, name: name, label: label, required: required, children: _jsx(Custom, { el: el, name: name, defaultValue: defaultValue, required: required, disabled: disabled, placeholder: placeholder }) }, index));
     }
+    // TextField (and slug) rich affordances live in a dedicated shell so
+    // `useTextInputControls` can hold reveal-toggle / mask state via React
+    // hooks (renderField itself is a plain function, hooks would violate
+    // rules-of-hooks here).
+    if (fieldType === 'text' || fieldType === 'slug') {
+        return (_jsx(TextFieldShell, { el: el, name: name, label: label, required: required, common: common }, index));
+    }
     const input = renderFieldInput(fieldType, el, name, defaultValue, defaultStr, common, disabled, required, placeholder);
     return (_jsx(FieldShell, { el: el, name: name, label: label, required: required, children: input }, index));
 }
+/**
+ * Component-shape TextField renderer — wraps the input shell so we can
+ * use `useTextInputControls()` (which holds the eye-toggle / mask state).
+ * Keeps `renderField` itself hook-free.
+ */
+function TextFieldShell({ el, name, label, required, common, }) {
+    const controls = useTextInputControls(el, name, (m) => renderElement(m, 0));
+    // Build the input with all the new HTML attrs (inputMode /
+    // autocapitalize / list / maxLength + the password/text type from
+    // the controls hook).
+    const textExtra = {};
+    if (el['maxLength'] !== undefined)
+        textExtra['maxLength'] = Number(el['maxLength']);
+    if (el['inputMode'] !== undefined)
+        textExtra['inputMode'] = String(el['inputMode']);
+    if (el['autocapitalize'] !== undefined)
+        textExtra['autoCapitalize'] = String(el['autocapitalize']);
+    if (Array.isArray(el['datalist']))
+        textExtra['list'] = `${name}__datalist`;
+    const datalist = Array.isArray(el['datalist']) ? el['datalist'] : undefined;
+    const input = (_jsxs(_Fragment, { children: [_jsx(TextLikeInput, { el: el, name: name, common: common, type: controls.type, extraProps: textExtra, multiline: false, applyMask: controls.applyMask }), datalist && (_jsx("datalist", { id: `${name}__datalist`, children: datalist.map((v, i) => _jsx("option", { value: v }, i)) }))] }));
+    return (_jsx(FieldShell, { el: el, name: name, label: label, required: required, before: controls.before, after: controls.after, children: input }));
+}
 function renderFieldInput(fieldType, el, name, defaultValue, defaultStr, common, disabled, required, placeholder) {
     switch (fieldType) {
         case 'textarea': {
@@ -178,7 +209,13 @@ function renderFieldInput(fieldType, el, name, defaultValue, defaultStr, common,
             return (_jsx(TagsInput, { name: name, defaultValue: defaultValue, disabled: disabled, placeholder: placeholder, suggestions: suggestions, separator: separator, splitKeys: splitKeys, maxTags: maxTags, reorderable: reorderable }));
         }
         case 'fileUpload': {
-            return (_jsx(FileUploadInput, { name: name, defaultValue: defaultValue, disabled: disabled, accept: el['accept'], maxSize: typeof el['maxSize'] === 'number' ? el['maxSize'] : undefined, multiple: Boolean(el['multiple']), preview: el['preview'] !== false, directory: typeof el['directory'] === 'string' ? el['directory'] : undefined, uploadUrl: typeof el['uploadUrl'] === 'string' ? el['uploadUrl'] : undefined }));
+            return (_jsx(FileUploadInput, { name: name, defaultValue: defaultValue, disabled: disabled, accept: el['accept'], maxSize: typeof el['maxSize'] === 'number' ? el['maxSize'] : undefined, multiple: Boolean(el['multiple']), preview: el['preview'] !== false, directory: typeof el['directory'] === 'string' ? el['directory'] : undefined, uploadUrl: typeof el['uploadUrl'] === 'string' ? el['uploadUrl'] : undefined, downloadable: Boolean(el['downloadable']), openable: Boolean(el['openable']), reorderable: Boolean(el['reorderable']), appendFiles: Boolean(el['appendFiles']), panelLayout: el['panelLayout'] === 'grid' ? 'grid'
+                    : el['panelLayout'] === 'integrated' ? 'integrated'
+                        : 'list', ...(el['automaticallyResize'] && typeof el['automaticallyResize'] === 'object'
+                    ? { automaticallyResize: el['automaticallyResize'] }
+                    : {}), imageEditor: Boolean(el['imageEditor']), circleCropper: Boolean(el['circleCropper']), automaticallyCropImagesToAspectRatio: Boolean(el['automaticallyCropImagesToAspectRatio']), ...(Array.isArray(el['imageEditorAspectRatioOptions'])
+                    ? { imageEditorAspectRatioOptions: el['imageEditorAspectRatioOptions'] }
+                    : {}) }));
         }
         case 'markdown': {
             const toolbarButtons = el['toolbarButtons'] ?? [];
@@ -403,6 +440,9 @@ function ActionModalDialog({ trigger, meta, ids, initialValues = {}, open: contr
     const dispatchUrl = meta['dispatchUrl'];
     const fields = (meta.children ?? []);
     const hasForm = fields.length > 0;
+    // Filament v5 — auxiliary Elements stamped by the resolver between
+    // the body and the footer (Alert / Text / Heading / Action / …).
+    const contentFooter = (meta['modalContentFooter'] ?? []);
     const heading = modal?.heading ?? confirm?.title ?? (hasForm ? String(meta['label'] ?? 'Submit') : 'Are you sure?');
     const description = modal?.description ?? confirm?.message;
     const submitLabel = modal?.submitLabel ?? (destructive ? 'Delete' : (hasForm ? 'Submit' : 'Confirm'));
@@ -534,7 +574,7 @@ function ActionModalDialog({ trigger, meta, ids, initialValues = {}, open: contr
                     if (!o)
                         reset();
                     setOpen(o);
-                }, children: _jsxs(DialogContent, { className: popupClass, children: [showCloseButton && (_jsx("button", { type: "button", "aria-label": "Close", onClick: () => setOpen(false), className: "absolute top-3 right-3 z-20 inline-flex items-center justify-center rounded-md h-8 w-8 text-muted-foreground hover:bg-accent hover:text-accent-foreground", children: _jsx(XIcon, { className: "size-4" }) })), _jsxs("form", { ref: formRef, onSubmit: onSubmit, className: formCls, children: [_jsxs(DialogHeader, { className: headerCls, children: [_jsxs(DialogTitle, { className: modal?.icon ? 'flex items-center gap-2' : undefined, children: [HeaderIcon && (_jsx(HeaderIcon, { "aria-hidden": true, className: `size-5 shrink-0 ${iconColorClass ?? ''}`.trim() })), _jsx("span", { children: heading })] }), description && _jsx(DialogDescription, { children: description })] }), hasForm && (_jsx("div", { className: `flex flex-col gap-3 py-2 ${bodyCls}`.trim(), children: fields.map((f, i) => renderFormChild(f, i, initialValues, errors)) })), !hasForm && stickyMode && _jsx("div", { className: bodyCls }), serverError && (_jsx("p", { className: `py-2 text-sm text-destructive ${stickyMode ? 'px-6' : ''}`.trim(), children: serverError })), _jsxs(DialogFooter, { className: footerCls, children: [_jsx("button", { type: "button", onClick: () => setOpen(false), className: cancelClass, children: cancelLabel }), _jsx("button", { type: "submit", disabled: submitting, autoFocus: submitAutofocus, className: confirmClass, children: submitting ? 'Working…' : submitLabel })] })] })] }) })] }));
+                }, children: _jsxs(DialogContent, { className: popupClass, children: [showCloseButton && (_jsx("button", { type: "button", "aria-label": "Close", onClick: () => setOpen(false), className: "absolute top-3 right-3 z-20 inline-flex items-center justify-center rounded-md h-8 w-8 text-muted-foreground hover:bg-accent hover:text-accent-foreground", children: _jsx(XIcon, { className: "size-4" }) })), _jsxs("form", { ref: formRef, onSubmit: onSubmit, className: formCls, children: [_jsxs(DialogHeader, { className: headerCls, children: [_jsxs(DialogTitle, { className: modal?.icon ? 'flex items-center gap-2' : undefined, children: [HeaderIcon && (_jsx(HeaderIcon, { "aria-hidden": true, className: `size-5 shrink-0 ${iconColorClass ?? ''}`.trim() })), _jsx("span", { children: heading })] }), description && _jsx(DialogDescription, { children: description })] }), (hasForm || contentFooter.length > 0) && (_jsxs("div", { className: `flex flex-col gap-3 py-2 ${bodyCls}`.trim(), children: [fields.map((f, i) => renderFormChild(f, i, initialValues, errors)), contentFooter.map((c, i) => renderElement(c, fields.length + i))] })), !hasForm && contentFooter.length === 0 && stickyMode && _jsx("div", { className: bodyCls }), serverError && (_jsx("p", { className: `py-2 text-sm text-destructive ${stickyMode ? 'px-6' : ''}`.trim(), children: serverError })), _jsxs(DialogFooter, { className: footerCls, children: [_jsx("button", { type: "button", onClick: () => setOpen(false), className: cancelClass, children: cancelLabel }), _jsx("button", { type: "submit", disabled: submitting, autoFocus: submitAutofocus, className: confirmClass, children: submitting ? 'Working…' : submitLabel })] })] })] }) })] }));
 }
 /**
  * Confirm-style dialog wrapping an action's button. The trigger button is
@@ -1460,6 +1500,70 @@ function EntryCopyButton({ text, label }) {
     };
     return (_jsx("button", { type: "button", onClick: handleClick, "aria-label": label, title: label, className: "inline-flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-muted", children: copied ? _jsx(CheckIcon, { className: "size-3.5" }) : _jsx(CopyIcon, { className: "size-3.5" }) }));
 }
+// ─── Alert renderer ─────────────────────────────────────────
+//
+// Owns dismissal state (per-mount + optional localStorage persistence)
+// + icon dispatch + footer-actions alignment. Lifted out of the inline
+// `case 'alert'` branch when Alert gained `dismissible() / iconColor() /
+// footerActionsAlignment()` setters — those need component-local state
+// (the dismiss button, the persisted-dismissal hydration on mount), and
+// inlining the hooks under a switch arm is fragile.
+const ALERT_TYPE_ICONS = {
+    info: InfoIcon,
+    warning: TriangleAlertIcon,
+    success: CircleCheckIcon,
+    danger: CircleAlertIcon,
+};
+const ALERT_TYPE_DEFAULT_ICON_COLOR = {
+    info: 'info',
+    warning: 'warning',
+    success: 'success',
+    danger: 'destructive',
+};
+const ALERT_ACTIONS_ALIGNMENT = {
+    start: 'justify-start',
+    center: 'justify-center',
+    end: 'justify-end',
+};
+function alertPersistKey(persistKey) {
+    return `pilotiq.alert.${persistKey}`;
+}
+function AlertRenderer(props) {
+    const { alertType, content, title, dismissible, persistDismissal, iconColor, actionsAlignment, footer, } = props;
+    const [dismissed, setDismissed] = useState(false);
+    // Hydrate persisted-dismissal on first paint. `useState(false)` keeps
+    // SSR + first client paint identical (Hydration safe); the effect
+    // flips to dismissed if localStorage has the flag set.
+    useEffect(() => {
+        if (!persistDismissal)
+            return;
+        if (typeof window === 'undefined')
+            return;
+        try {
+            if (window.localStorage.getItem(alertPersistKey(persistDismissal)) === '1') {
+                setDismissed(true);
+            }
+        }
+        catch { /* localStorage blocked (Safari ITP / SSR) — render visible */ }
+    }, [persistDismissal]);
+    if (dismissed)
+        return null;
+    const styles = alertStyles[alertType] ?? alertStyles['info'];
+    const Icon = ALERT_TYPE_ICONS[alertType] ?? InfoIcon;
+    const iconColorKey = iconColor ?? ALERT_TYPE_DEFAULT_ICON_COLOR[alertType] ?? 'info';
+    const iconColorCls = TEXT_COLOR_CLASSES[iconColorKey] ?? '';
+    const alignCls = ALERT_ACTIONS_ALIGNMENT[actionsAlignment ?? 'start'] ?? 'justify-start';
+    const handleDismiss = () => {
+        setDismissed(true);
+        if (persistDismissal && typeof window !== 'undefined') {
+            try {
+                window.localStorage.setItem(alertPersistKey(persistDismissal), '1');
+            }
+            catch { /* localStorage blocked — dismiss is per-mount only */ }
+        }
+    };
+    return (_jsxs("div", { className: `relative rounded-lg border p-4 ${styles} ${dismissible ? 'pr-9' : ''}`, children: [_jsxs("div", { className: "flex gap-3", children: [_jsx(Icon, { className: `size-5 shrink-0 mt-0.5 ${iconColorCls}`, "aria-hidden": "true" }), _jsxs("div", { className: "flex-1 min-w-0", children: [title !== undefined && _jsx("p", { className: "font-medium mb-1", children: title }), _jsx("p", { className: "text-sm", children: content }), footer.length > 0 && (_jsx("div", { className: `flex items-center gap-2 mt-3 ${alignCls}`, children: footer }))] })] }), dismissible && (_jsx("button", { type: "button", onClick: handleDismiss, "aria-label": "Dismiss", title: "Dismiss", className: "absolute top-3 right-3 inline-flex h-6 w-6 items-center justify-center rounded opacity-70 hover:opacity-100 transition-opacity", children: _jsx(XIcon, { className: "size-4", "aria-hidden": "true" }) }))] }));
+}
 function renderElement(el, index) {
     switch (el.type) {
         case 'text':
@@ -1508,11 +1612,8 @@ function renderElement(el, index) {
             return (_jsxs("div", { className: "flex items-start justify-between gap-4", children: [titleBlock, _jsx("div", { className: "flex items-center gap-2 shrink-0", children: headerActions.map((a, i) => renderActionLike(a, i)) })] }, index));
         }
         case 'alert': {
-            const alertType = String(el['alertType'] ?? 'info');
-            const styles = alertStyles[alertType] ?? alertStyles['info'];
-            const title = el['title'] ? String(el['title']) : undefined;
             const footer = (el.children ?? []).filter(c => c.type === 'action' || c.type === 'actionGroup');
-            return (_jsxs("div", { className: `rounded-lg border p-4 ${styles}`, children: [title && _jsx("p", { className: "font-medium mb-1", children: title }), _jsx("p", { className: "text-sm", children: String(el['content'] ?? '') }), footer.length > 0 && (_jsx("div", { className: "flex items-center gap-2 mt-3", children: footer.map((a, i) => renderActionLike(a, i)) }))] }, index));
+            return (_jsx(AlertRenderer, { alertType: String(el['alertType'] ?? 'info'), content: String(el['content'] ?? ''), ...(el['title'] !== undefined ? { title: String(el['title']) } : {}), ...(el['dismissible'] ? { dismissible: Boolean(el['dismissible']) } : {}), ...(el['persistDismissal'] !== undefined ? { persistDismissal: String(el['persistDismissal']) } : {}), ...(el['iconColor'] !== undefined ? { iconColor: String(el['iconColor']) } : {}), ...(el['actionsAlignment'] !== undefined ? { actionsAlignment: String(el['actionsAlignment']) } : {}), footer: footer.map((a, i) => renderActionLike(a, i)) }, index));
         }
         case 'emptyState': {
             const heading = String(el['heading'] ?? '');