nucleus-core-ts 0.9.781 → 0.9.783

package/dist/fe/components/IntegrationsPage/components/CredentialSlotRow.js

@@ -0,0 +1,63 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../../utils/cn';
+import { integrationsPageTheme } from '../theme';
+import { slotHint, slotLabel } from './credentialSlots';
+import { describedBy } from './formSupport';
+import { Badge, Field } from './Primitives';
+/**
+ * One secret: a box to type a new value into, the masked preview of whatever is
+ * already stored, and the only way to remove it.
+ *
+ * Clearing is its own button rather than "save an empty box", because an empty
+ * box is what an operator leaves behind when they came to change something else.
+ * Making that mean "delete the credential" would break a working connection by
+ * accident, roughly once.
+ */ const theme = integrationsPageTheme;
+export function CredentialSlotRow({ slot, source, value, maskedHint, disabled, onChange, onClear }) {
+    const id = `credential-${slot}`;
+    const label = slotLabel(slot, source);
+    const stored = maskedHint !== null && maskedHint.length > 0;
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "flex flex-col gap-2",
+        children: [
+            /*#__PURE__*/ _jsx(Field, {
+                hint: slotHint(slot, source),
+                htmlFor: id,
+                label: label,
+                children: /*#__PURE__*/ _jsx("input", {
+                    "aria-describedby": describedBy(id, true, false),
+                    autoComplete: "new-password",
+                    className: theme.field.input,
+                    disabled: disabled,
+                    id: id,
+                    onChange: (event)=>onChange(event.target.value),
+                    placeholder: stored ? 'Leave empty to keep the stored value' : 'Nothing stored yet',
+                    type: "password",
+                    value: value
+                })
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex flex-wrap items-center gap-2",
+                children: [
+                    /*#__PURE__*/ _jsx(Badge, {
+                        tone: stored ? 'success' : 'neutral',
+                        children: stored ? 'Stored' : 'Not set'
+                    }),
+                    stored ? /*#__PURE__*/ _jsx("span", {
+                        className: cn(theme.field.hint, 'truncate font-mono'),
+                        children: maskedHint
+                    }) : null,
+                    /*#__PURE__*/ _jsx("button", {
+                        "aria-label": `Clear the stored ${label.toLowerCase()}`,
+                        className: cn(theme.button.ghost, 'ml-auto'),
+                        disabled: disabled || !stored,
+                        onClick: onClear,
+                        type: "button",
+                        children: "Clear"
+                    })
+                ]
+            })
+        ]
+    });
+}

package/dist/fe/components/IntegrationsPage/components/EndpointForm.d.ts

@@ -0,0 +1,11 @@
+import type { IntegrationEndpoint, IntegrationsActions } from '../types';
+export type EndpointFormProps = {
+    sourceId: string;
+    /** Null builds a new endpoint. */
+    endpoint: IntegrationEndpoint | null;
+    actions: IntegrationsActions;
+    onSaved: (endpoint: IntegrationEndpoint) => void;
+    onDeleted: () => void;
+    onCancel: () => void;
+};
+export declare function EndpointForm({ sourceId, endpoint, actions, onSaved, onDeleted, onCancel, }: EndpointFormProps): import("react/jsx-runtime").JSX.Element;

package/dist/fe/components/IntegrationsPage/components/EndpointForm.js

@@ -0,0 +1,166 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useEffectEvent, useState } from 'react';
+import { useIntegrationsStore } from '../store';
+import { integrationsPageTheme } from '../theme';
+import { EndpointFormFields } from './EndpointFormFields';
+import { PaginationFields } from './PaginationFields';
+import { ParamBindingRows } from './ParamBindingRows';
+import { pathParamNames } from './pathParams';
+/**
+ * One call against a connection: what to ask for, and where the records sit in
+ * the answer.
+ *
+ * The draft is seeded once. The parent remounts this form when the selection
+ * changes, so a half-typed path is never pulled out from under the operator by
+ * a list page arriving in the background.
+ */ const theme = integrationsPageTheme;
+export function EndpointForm({ sourceId, endpoint, actions, onSaved, onDeleted, onCancel }) {
+    const store = useIntegrationsStore();
+    const [saving, setSaving] = useState(false);
+    const [deleting, setDeleting] = useState(false);
+    const [draft, setDraft] = useState({
+        tag: endpoint?.tag ?? '',
+        name: endpoint?.name ?? '',
+        method: endpoint?.method ?? 'GET',
+        path: endpoint?.path ?? '',
+        description: endpoint?.description ?? '',
+        responseRootPath: endpoint?.responseRootPath ?? '',
+        enabled: endpoint?.enabled ?? true,
+        pagination: endpoint?.pagination ?? {
+            kind: 'none'
+        },
+        paramBindings: endpoint?.paramBindings ?? []
+    });
+    // Which tables a binding may read a column from. Loaded once; the list is
+    // small and an operator picking a parameter source should not wait for it.
+    const [targets, setTargets] = useState([]);
+    const loadTargets = useEffectEvent(()=>{
+        actions.listTargets().then(setTargets).catch(()=>{
+            // A binding can still be made against another endpoint or a fixed value,
+            // so this is a reduced menu rather than a broken screen.
+            setTargets([]);
+        });
+    });
+    useEffect(()=>{
+        loadTargets();
+    }, []);
+    const set = (patch)=>{
+        setDraft((previous)=>({
+                ...previous,
+                ...patch
+            }));
+    };
+    const fail = (fallback)=>(error)=>{
+            setSaving(false);
+            setDeleting(false);
+            store.setError(error instanceof Error ? error.message : fallback);
+        };
+    const tag = draft.tag.trim();
+    const path = draft.path.trim();
+    const busy = saving || deleting;
+    const canSave = tag.length > 0 && path.length > 0;
+    const handleSubmit = (event)=>{
+        event.preventDefault();
+        if (!canSave || busy) return;
+        save();
+    };
+    const save = ()=>{
+        setSaving(true);
+        store.setError(null);
+        actions.saveEndpoint({
+            id: endpoint?.id,
+            sourceId,
+            tag,
+            name: draft.name.trim() || null,
+            method: draft.method,
+            path,
+            description: draft.description.trim() || null,
+            responseRootPath: draft.responseRootPath.trim() || null,
+            pagination: draft.pagination,
+            paramBindings: draft.paramBindings,
+            enabled: draft.enabled
+        }).then((saved)=>{
+            setSaving(false);
+            if (saved) onSaved(saved);
+            else store.setError('The server did not return the saved endpoint.');
+        }).catch(fail('Saving the endpoint failed.'));
+    };
+    const remove = ()=>{
+        if (!endpoint) return;
+        setDeleting(true);
+        store.setError(null);
+        actions.deleteEndpoint(endpoint.id).then((ok)=>{
+            setDeleting(false);
+            if (ok) onDeleted();
+            else store.setError('The endpoint was not deleted.');
+        }).catch(fail('Deleting the endpoint failed.'));
+    };
+    return /*#__PURE__*/ _jsxs("form", {
+        className: theme.card.wrapper,
+        noValidate: true,
+        onSubmit: handleSubmit,
+        children: [
+            /*#__PURE__*/ _jsx("header", {
+                className: theme.card.header,
+                children: /*#__PURE__*/ _jsx("h3", {
+                    className: theme.card.title,
+                    children: endpoint ? 'Edit endpoint' : 'New endpoint'
+                })
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: theme.card.body,
+                children: [
+                    /*#__PURE__*/ _jsx(EndpointFormFields, {
+                        disabled: busy,
+                        draft: draft,
+                        onChange: set
+                    }),
+                    /*#__PURE__*/ _jsx(PaginationFields, {
+                        disabled: busy,
+                        idPrefix: "endpoint-pagination",
+                        onChange: (pagination)=>set({
+                                pagination
+                            }),
+                        value: draft.pagination
+                    }),
+                    /*#__PURE__*/ _jsx(ParamBindingRows, {
+                        disabled: busy,
+                        entities: targets,
+                        onChange: (paramBindings)=>set({
+                                paramBindings
+                            }),
+                        required: pathParamNames(path),
+                        siblings: store.endpoints.filter((candidate)=>candidate.id !== endpoint?.id),
+                        value: draft.paramBindings
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("footer", {
+                className: theme.card.footer,
+                children: [
+                    endpoint ? /*#__PURE__*/ _jsx("button", {
+                        className: theme.button.danger,
+                        disabled: busy,
+                        onClick: remove,
+                        type: "button",
+                        children: deleting ? 'Deleting…' : 'Delete'
+                    }) : null,
+                    /*#__PURE__*/ _jsx("button", {
+                        className: theme.button.secondary,
+                        disabled: busy,
+                        onClick: onCancel,
+                        type: "button",
+                        children: "Cancel"
+                    }),
+                    /*#__PURE__*/ _jsx("button", {
+                        className: theme.button.primary,
+                        disabled: busy || !canSave,
+                        type: "submit",
+                        children: saving ? 'Saving…' : 'Save endpoint'
+                    })
+                ]
+            })
+        ]
+    });
+}

package/dist/fe/components/IntegrationsPage/components/EndpointFormFields.d.ts

@@ -0,0 +1,19 @@
+import type { IntegrationEndpoint, PaginationProfileValue, ParamBindingValue } from '../types';
+export type EndpointDraft = {
+    tag: string;
+    name: string;
+    method: IntegrationEndpoint['method'];
+    path: string;
+    description: string;
+    responseRootPath: string;
+    enabled: boolean;
+    pagination: PaginationProfileValue;
+    /** Where each path/query parameter of this endpoint gets its value. */
+    paramBindings: ParamBindingValue[];
+};
+export type EndpointFormFieldsProps = {
+    draft: EndpointDraft;
+    disabled?: boolean;
+    onChange: (patch: Partial<EndpointDraft>) => void;
+};
+export declare function EndpointFormFields({ draft, disabled, onChange }: EndpointFormFieldsProps): import("react/jsx-runtime").JSX.Element;

package/dist/fe/components/IntegrationsPage/components/EndpointFormFields.js

@@ -0,0 +1,162 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from '../../../utils/cn';
+import { integrationsPageTheme } from '../theme';
+import { Field } from './Primitives';
+/**
+ * The plain fields of an endpoint.
+ *
+ * Split out of the form because the form's job is saving and deleting, and this
+ * one's is asking. The draft type lives here, next to the controls that fill it.
+ */ const theme = integrationsPageTheme;
+const METHODS = [
+    'GET',
+    'POST',
+    'PUT',
+    'PATCH',
+    'DELETE'
+];
+export function EndpointFormFields({ draft, disabled, onChange }) {
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "grid grid-cols-1 gap-3 sm:grid-cols-2",
+                children: [
+                    /*#__PURE__*/ _jsx(Field, {
+                        hint: "Groups the endpoints of one API.",
+                        htmlFor: "endpoint-tag",
+                        label: "Tag",
+                        children: /*#__PURE__*/ _jsx("input", {
+                            "aria-describedby": "endpoint-tag-hint",
+                            className: theme.field.input,
+                            disabled: disabled,
+                            id: "endpoint-tag",
+                            onChange: (event)=>onChange({
+                                    tag: event.target.value
+                                }),
+                            placeholder: "directory",
+                            type: "text",
+                            value: draft.tag
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Field, {
+                        htmlFor: "endpoint-name",
+                        label: "Name",
+                        children: /*#__PURE__*/ _jsx("input", {
+                            className: theme.field.input,
+                            disabled: disabled,
+                            id: "endpoint-name",
+                            onChange: (event)=>onChange({
+                                    name: event.target.value
+                                }),
+                            placeholder: "List people",
+                            type: "text",
+                            value: draft.name
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex flex-col gap-3 sm:flex-row",
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "sm:w-32",
+                        children: /*#__PURE__*/ _jsx(Field, {
+                            htmlFor: "endpoint-method",
+                            label: "Method",
+                            children: /*#__PURE__*/ _jsx("select", {
+                                className: theme.field.input,
+                                disabled: disabled,
+                                id: "endpoint-method",
+                                onChange: (event)=>{
+                                    for (const method of METHODS){
+                                        if (method === event.target.value) onChange({
+                                            method
+                                        });
+                                    }
+                                },
+                                value: draft.method,
+                                children: METHODS.map((method)=>/*#__PURE__*/ _jsx("option", {
+                                        value: method,
+                                        children: method
+                                    }, method))
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "min-w-0 flex-1",
+                        children: /*#__PURE__*/ _jsx(Field, {
+                            hint: "{brace} and :colon path parameters are supported — parameter bindings supply their values.",
+                            htmlFor: "endpoint-path",
+                            label: "Path",
+                            children: /*#__PURE__*/ _jsx("input", {
+                                "aria-describedby": "endpoint-path-hint",
+                                className: theme.field.input,
+                                disabled: disabled,
+                                id: "endpoint-path",
+                                onChange: (event)=>onChange({
+                                        path: event.target.value
+                                    }),
+                                placeholder: "/v1/people/{id}",
+                                type: "text",
+                                value: draft.path
+                            })
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(Field, {
+                hint: "Dotted path to the array of records. Leave it empty when the array is the response root.",
+                htmlFor: "endpoint-root",
+                label: "Response root path",
+                children: /*#__PURE__*/ _jsx("input", {
+                    "aria-describedby": "endpoint-root-hint",
+                    className: theme.field.input,
+                    disabled: disabled,
+                    id: "endpoint-root",
+                    onChange: (event)=>onChange({
+                            responseRootPath: event.target.value
+                        }),
+                    placeholder: "data.items",
+                    type: "text",
+                    value: draft.responseRootPath
+                })
+            }),
+            /*#__PURE__*/ _jsx(Field, {
+                htmlFor: "endpoint-description",
+                label: "Description",
+                children: /*#__PURE__*/ _jsx("textarea", {
+                    className: cn(theme.field.input, 'h-auto min-h-20 py-2'),
+                    disabled: disabled,
+                    id: "endpoint-description",
+                    onChange: (event)=>onChange({
+                            description: event.target.value
+                        }),
+                    placeholder: "What this call returns, in one line",
+                    rows: 3,
+                    value: draft.description
+                })
+            }),
+            /*#__PURE__*/ _jsxs("label", {
+                className: "flex items-center gap-2",
+                htmlFor: "endpoint-enabled",
+                children: [
+                    /*#__PURE__*/ _jsx("input", {
+                        checked: draft.enabled,
+                        className: "size-4 shrink-0 accent-sky-600 dark:accent-sky-500",
+                        disabled: disabled,
+                        id: "endpoint-enabled",
+                        onChange: (event)=>onChange({
+                                enabled: event.target.checked
+                            }),
+                        type: "checkbox"
+                    }),
+                    /*#__PURE__*/ _jsx("span", {
+                        className: theme.field.label,
+                        children: "Enabled — a disabled endpoint is never called"
+                    })
+                ]
+            })
+        ]
+    });
+}

package/dist/fe/components/IntegrationsPage/components/EndpointList.d.ts

@@ -0,0 +1,12 @@
+import type { IntegrationEndpoint, IntegrationsActions } from '../types';
+export type EndpointListProps = {
+    sourceId: string;
+    actions: IntegrationsActions;
+    /** Asked for a blank form. The selection is cleared before this runs. */
+    onNewEndpoint?: () => void;
+    /** Handed the whole record so the form beside it needs no second fetch. */
+    onSelect?: (endpoint: IntegrationEndpoint) => void;
+    /** Bump after a save or a delete to pull the list again. */
+    reloadToken?: number;
+};
+export declare function EndpointList({ sourceId, actions, onNewEndpoint, onSelect, reloadToken, }: EndpointListProps): import("react/jsx-runtime").JSX.Element;

package/dist/fe/components/IntegrationsPage/components/EndpointList.js

@@ -0,0 +1,205 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useEffectEvent, useState } from 'react';
+import { cn } from '../../../utils/cn';
+import { useIntegrationsStore } from '../store';
+import { integrationsPageTheme } from '../theme';
+import { Badge, Field, Notice } from './Primitives';
+import { ListSkeleton } from './Skeletons';
+import { useInfiniteList } from './useInfiniteList';
+/**
+ * The calls one connection knows how to make.
+ *
+ * The server owns the list: the search term goes back out on the next request
+ * and the next page arrives when the sentinel scrolls into view. Nothing here
+ * narrows rows already fetched, so a connection with six endpoints and one with
+ * six hundred behave identically.
+ */ const theme = integrationsPageTheme;
+const PAGE_SIZE = 20;
+const SEARCH_DEBOUNCE_MS = 300;
+const METHOD_TONE = {
+    GET: 'info',
+    POST: 'success',
+    PUT: 'warning',
+    PATCH: 'warning',
+    DELETE: 'danger'
+};
+export function EndpointList({ sourceId, actions, onNewEndpoint, onSelect, reloadToken = 0 }) {
+    const store = useIntegrationsStore();
+    const search = store.endpointsSearch;
+    const selectedId = store.selectedEndpointId;
+    const [term, setTerm] = useState(search);
+    // Typed characters become a request only once the typing stops; a fetch per
+    // keystroke would put page-1 answers in a race with each other.
+    const commitSearch = useEffectEvent(()=>{
+        store.setEndpointsSearch(term);
+    });
+    useEffect(()=>{
+        const timer = setTimeout(commitSearch, SEARCH_DEBOUNCE_MS);
+        return ()=>clearTimeout(timer);
+    }, [
+        term
+    ]);
+    const list = useInfiniteList({
+        load: (page)=>actions.listEndpoints(sourceId, {
+                page,
+                limit: PAGE_SIZE,
+                search: search.length > 0 ? search : undefined,
+                sort: [
+                    {
+                        field: 'tag',
+                        direction: 'asc'
+                    }
+                ]
+            }).then((result)=>({
+                    items: result.items,
+                    total: result.meta?.totalItems ?? result.items.length
+                })),
+        deps: [
+            sourceId,
+            search,
+            reloadToken
+        ],
+        pageSize: PAGE_SIZE
+    });
+    // Mirrored so the mapping screens can name an endpoint without fetching it a
+    // second time. The rows themselves still come from, and only from, the server.
+    const publishItems = useEffectEvent(()=>{
+        store.setEndpoints(list.items, list.total);
+    });
+    const publishLoading = useEffectEvent(()=>{
+        store.setEndpointsLoading(list.loading);
+    });
+    useEffect(()=>{
+        publishItems();
+    }, [
+        list.items,
+        list.total
+    ]);
+    useEffect(()=>{
+        publishLoading();
+    }, [
+        list.loading
+    ]);
+    const handleNew = ()=>{
+        store.selectEndpoint(null);
+        onNewEndpoint?.();
+    };
+    const handleSelect = (endpoint)=>{
+        store.selectEndpoint(endpoint.id);
+        onSelect?.(endpoint);
+    };
+    const firstLoad = list.loading && list.items.length === 0;
+    return /*#__PURE__*/ _jsxs("section", {
+        "aria-label": "Endpoints",
+        className: theme.layout.aside,
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: theme.header.wrapper,
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        children: [
+                            /*#__PURE__*/ _jsx("h2", {
+                                className: theme.header.title,
+                                children: "Endpoints"
+                            }),
+                            /*#__PURE__*/ _jsx("p", {
+                                className: theme.header.subtitle,
+                                children: list.total === 1 ? '1 endpoint' : `${list.total} endpoints`
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: theme.header.actions,
+                        children: /*#__PURE__*/ _jsx("button", {
+                            className: theme.button.primary,
+                            onClick: handleNew,
+                            type: "button",
+                            children: "New endpoint"
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(Field, {
+                htmlFor: "endpoint-search",
+                label: "Search",
+                children: /*#__PURE__*/ _jsx("input", {
+                    className: theme.field.input,
+                    id: "endpoint-search",
+                    onChange: (event)=>setTerm(event.target.value),
+                    placeholder: "Tag, name or path",
+                    type: "search",
+                    value: term
+                })
+            }),
+            firstLoad ? /*#__PURE__*/ _jsx(ListSkeleton, {
+                rows: 6
+            }) : null,
+            list.error ? /*#__PURE__*/ _jsxs(Notice, {
+                title: "This list could not be loaded",
+                tone: "danger",
+                children: [
+                    list.error,
+                    ' ',
+                    /*#__PURE__*/ _jsx("button", {
+                        className: theme.button.ghost,
+                        onClick: list.reload,
+                        type: "button",
+                        children: "Try again"
+                    })
+                ]
+            }) : null,
+            !firstLoad && list.items.length === 0 && !list.error ? /*#__PURE__*/ _jsx("p", {
+                className: theme.list.empty,
+                children: search.length > 0 ? `No endpoint matches “${search}”. Clear the search to see them all.` : 'No endpoints yet. An endpoint is one call this connection can make — a method, a path, and where the records sit in the answer. Start with New endpoint.'
+            }) : null,
+            list.items.length > 0 ? /*#__PURE__*/ _jsx("ul", {
+                className: theme.list.wrapper,
+                children: list.items.map((endpoint)=>/*#__PURE__*/ _jsx("li", {
+                        children: /*#__PURE__*/ _jsxs("button", {
+                            "aria-current": endpoint.id === selectedId ? 'true' : undefined,
+                            className: cn(theme.list.item, endpoint.id === selectedId && theme.list.itemSelected),
+                            onClick: ()=>handleSelect(endpoint),
+                            type: "button",
+                            children: [
+                                /*#__PURE__*/ _jsxs("span", {
+                                    className: "flex w-full flex-wrap items-center gap-1.5",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Badge, {
+                                            tone: METHOD_TONE[endpoint.method],
+                                            children: endpoint.method
+                                        }),
+                                        /*#__PURE__*/ _jsx(Badge, {
+                                            tone: "neutral",
+                                            children: endpoint.tag
+                                        }),
+                                        endpoint.enabled === false ? /*#__PURE__*/ _jsx(Badge, {
+                                            tone: "neutral",
+                                            children: "Off"
+                                        }) : null
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsx("span", {
+                                    className: theme.list.itemTitle,
+                                    children: endpoint.name ?? endpoint.path
+                                }),
+                                /*#__PURE__*/ _jsx("span", {
+                                    className: theme.list.itemMeta,
+                                    children: endpoint.path
+                                })
+                            ]
+                        })
+                    }, endpoint.id))
+            }) : null,
+            /*#__PURE__*/ _jsx("div", {
+                "aria-hidden": "true",
+                className: theme.list.sentinel,
+                ref: list.sentinelRef
+            }),
+            list.loading && list.items.length > 0 ? /*#__PURE__*/ _jsx("p", {
+                className: theme.field.hint,
+                children: "Loading more…"
+            }) : null
+        ]
+    });
+}

package/dist/fe/components/IntegrationsPage/components/EndpointSample.d.ts

@@ -0,0 +1,6 @@
+import type { IntegrationEndpoint, IntegrationsActions } from '../types';
+export type EndpointSampleProps = {
+    endpoint: IntegrationEndpoint;
+    actions: IntegrationsActions;
+};
+export declare function EndpointSample({ endpoint, actions }: EndpointSampleProps): import("react/jsx-runtime").JSX.Element;