@byline/ui 0.9.3

package/dist/admin/components/admin-roles/create.js

@@ -0,0 +1,177 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { revalidateLogic, useForm } from "@tanstack/react-form-start";
+import { Alert, Button, Input, LoaderEllipsis, TextArea } from "@infonomic/uikit/react";
+import classnames from "classnames";
+import { z } from "zod";
+import { useBylineAdminServices } from "../../../services/admin-services-context.js";
+import create_module from "./create.module.js";
+const createAdminRoleFormSchema = z.object({
+    name: z.string().min(1, 'Name is required').max(128, 'Name must not exceed 128 characters'),
+    machine_name: z.string().min(1, 'Machine name is required').max(128, 'Machine name must not exceed 128 characters').regex(/^[a-z0-9][a-z0-9_-]*$/, {
+        message: 'Lowercase letters, numbers, hyphens, and underscores only'
+    }),
+    description: z.string().max(2000, "Description must not exceed 2000 characters")
+});
+const initialValues = {
+    name: '',
+    machine_name: '',
+    description: ''
+};
+function normaliseText(value) {
+    return value.trim().length > 0 ? value : null;
+}
+function CreateAdminRole({ onClose, onSuccess }) {
+    const { createAdminRole } = useBylineAdminServices();
+    const [formError, setFormError] = useState(null);
+    const form = useForm({
+        defaultValues: initialValues,
+        validationLogic: revalidateLogic({
+            mode: 'blur',
+            modeAfterSubmission: 'change'
+        }),
+        validators: {
+            onDynamic: createAdminRoleFormSchema
+        },
+        onSubmit: async ({ value })=>{
+            setFormError(null);
+            try {
+                const created = await createAdminRole({
+                    data: {
+                        name: value.name.trim(),
+                        machine_name: value.machine_name.trim(),
+                        description: normaliseText(value.description)
+                    }
+                });
+                form.reset(initialValues);
+                onSuccess?.(created);
+            } catch (err) {
+                const code = getErrorCode(err);
+                if ('admin.roles.machineNameInUse' === code) return void form.setFieldMeta('machine_name', (meta)=>({
+                        ...meta,
+                        errorMap: {
+                            ...meta.errorMap,
+                            onServer: 'This machine name is already in use.'
+                        },
+                        errors: [
+                            'This machine name is already in use.'
+                        ]
+                    }));
+                setFormError('Could not create this admin role. Please try again.');
+            }
+        }
+    });
+    return /*#__PURE__*/ jsx("div", {
+        className: classnames('byline-role-create-wrap', create_module.wrap),
+        children: /*#__PURE__*/ jsxs("form", {
+            noValidate: true,
+            onSubmit: (event)=>{
+                event.preventDefault();
+                event.stopPropagation();
+                form.handleSubmit();
+            },
+            className: classnames('byline-role-create-form', create_module.form),
+            children: [
+                formError ? /*#__PURE__*/ jsx(Alert, {
+                    intent: "danger",
+                    children: formError
+                }) : null,
+                /*#__PURE__*/ jsx(form.Field, {
+                    name: "name",
+                    children: (field)=>/*#__PURE__*/ jsx(Input, {
+                            label: "Name",
+                            id: "new-role-name",
+                            name: field.name,
+                            value: field.state.value,
+                            onBlur: field.handleBlur,
+                            onChange: (e)=>field.handleChange(e.currentTarget.value),
+                            error: field.state.meta.errors.length > 0,
+                            errorText: firstError(field.state.meta.errors),
+                            helpText: "Human-readable label, e.g. 'Editor'.",
+                            required: true
+                        })
+                }),
+                /*#__PURE__*/ jsx(form.Field, {
+                    name: "machine_name",
+                    children: (field)=>/*#__PURE__*/ jsx(Input, {
+                            label: "Machine name",
+                            id: "new-role-machine-name",
+                            name: field.name,
+                            value: field.state.value,
+                            onBlur: field.handleBlur,
+                            onChange: (e)=>field.handleChange(e.currentTarget.value),
+                            error: field.state.meta.errors.length > 0,
+                            errorText: firstError(field.state.meta.errors),
+                            helpText: "Stable code-side handle, e.g. 'editor'. Cannot be changed later.",
+                            required: true
+                        })
+                }),
+                /*#__PURE__*/ jsx(form.Field, {
+                    name: "description",
+                    children: (field)=>/*#__PURE__*/ jsx(TextArea, {
+                            label: "Description",
+                            id: "new-role-description",
+                            name: field.name,
+                            value: field.state.value,
+                            onBlur: field.handleBlur,
+                            onChange: (e)=>field.handleChange(e.currentTarget.value),
+                            error: field.state.meta.errors.length > 0,
+                            errorText: firstError(field.state.meta.errors),
+                            rows: 3
+                        })
+                }),
+                /*#__PURE__*/ jsxs("div", {
+                    className: classnames('byline-role-create-actions', create_module.actions),
+                    children: [
+                        /*#__PURE__*/ jsx(Button, {
+                            type: "button",
+                            intent: "secondary",
+                            size: "sm",
+                            onClick: onClose,
+                            className: classnames('byline-role-create-action', create_module.action),
+                            children: "Cancel"
+                        }),
+                        /*#__PURE__*/ jsx(form.Subscribe, {
+                            selector: (state)=>({
+                                    canSubmit: state.canSubmit,
+                                    isSubmitting: state.isSubmitting
+                                }),
+                            children: ({ canSubmit, isSubmitting })=>/*#__PURE__*/ jsx(Button, {
+                                    size: "sm",
+                                    intent: "primary",
+                                    type: "submit",
+                                    disabled: !canSubmit || isSubmitting,
+                                    className: classnames('byline-role-create-action', create_module.action),
+                                    children: true === isSubmitting ? /*#__PURE__*/ jsx(LoaderEllipsis, {
+                                        size: 42
+                                    }) : 'Save'
+                                })
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+function firstError(errors) {
+    for (const err of errors){
+        if ('string' == typeof err) return err;
+        if (err && 'object' == typeof err && 'message' in err) {
+            const msg = err.message;
+            if ('string' == typeof msg) return msg;
+        }
+    }
+}
+function getErrorCode(err) {
+    if (err && 'object' == typeof err) {
+        const e = err;
+        if ('string' == typeof e.code) return e.code;
+        if (e.cause && 'object' == typeof e.cause && 'code' in e.cause) {
+            const cause = e.cause;
+            if ('string' == typeof cause.code) return cause.code;
+        }
+    }
+    return null;
+}
+export { CreateAdminRole };

package/dist/admin/components/admin-roles/create.module.js

@@ -0,0 +1,8 @@
+import "./create_module.css";
+const create_module = {
+    wrap: "wrap-FIx6P_",
+    form: "form-q7XTA4",
+    actions: "actions-mAbN0h",
+    action: "action-yxjk6G"
+};
+export default create_module;

package/dist/admin/components/admin-roles/create_module.css

@@ -0,0 +1,27 @@
+:is(.wrap-FIx6P_, .byline-role-create-wrap) {
+  gap: var(--spacing-8);
+  padding: var(--spacing-4);
+  margin-top: var(--spacing-4);
+  flex-direction: column;
+  display: flex;
+}
+
+:is(.form-q7XTA4, .byline-role-create-form) {
+  gap: var(--spacing-16);
+  padding-top: var(--spacing-8);
+  flex-direction: column;
+  display: flex;
+}
+
+:is(.actions-mAbN0h, .byline-role-create-actions) {
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--spacing-8);
+  margin-top: var(--spacing-16);
+  display: flex;
+}
+
+:is(.action-yxjk6G, .byline-role-create-action) {
+  min-width: 4rem;
+}
+

package/dist/admin/components/admin-roles/permissions.d.ts

@@ -0,0 +1,11 @@
+import type { ListRegisteredAbilitiesResponse, SetRoleAbilitiesResponse } from '@byline/admin/admin-permissions';
+import type { AdminRoleResponse } from '@byline/admin/admin-roles';
+interface RolePermissionsProps {
+    role: AdminRoleResponse;
+    registered: ListRegisteredAbilitiesResponse;
+    initialAbilities: string[];
+    onSaved?: (response: SetRoleAbilitiesResponse) => void;
+}
+export declare function RolePermissions({ role, registered, initialAbilities, onSaved, }: RolePermissionsProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=permissions.d.ts.map

package/dist/admin/components/admin-roles/permissions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"permissions.d.ts","sourceRoot":"","sources":["../../../../src/admin/components/admin-roles/permissions.tsx"],"names":[],"mappings":"AAiCA,OAAO,KAAK,EAGV,+BAA+B,EAC/B,wBAAwB,EACzB,MAAM,iCAAiC,CAAA;AACxC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AASlE,UAAU,oBAAoB;IAC5B,IAAI,EAAE,iBAAiB,CAAA;IACvB,UAAU,EAAE,+BAA+B,CAAA;IAC3C,gBAAgB,EAAE,MAAM,EAAE,CAAA;IAC1B,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,wBAAwB,KAAK,IAAI,CAAA;CACvD;AAqHD,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,UAAU,EACV,gBAAgB,EAChB,OAAO,GACR,EAAE,oBAAoB,+BAwJtB"}

package/dist/admin/components/admin-roles/permissions.js

@@ -0,0 +1,303 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Alert, Button, Checkbox, LoaderEllipsis } from "@infonomic/uikit/react";
+import classnames from "classnames";
+import { useBylineAdminServices } from "../../../services/admin-services-context.js";
+import permissions_module from "./permissions.module.js";
+function setsEqual(a, b) {
+    if (a.size !== b.size) return false;
+    for (const item of a)if (!b.has(item)) return false;
+    return true;
+}
+function GroupSection({ group, selected, mode, saving, onToggle, onSelectAll, onClearAll }) {
+    const groupKeys = useMemo(()=>group.abilities.map((a)=>a.key), [
+        group.abilities
+    ]);
+    const selectedInGroup = groupKeys.filter((key)=>selected.has(key)).length;
+    const isEdit = 'edit' === mode;
+    return /*#__PURE__*/ jsxs("div", {
+        className: classnames('byline-role-permissions-group', permissions_module.group),
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: classnames('byline-role-permissions-group-head', permissions_module["group-head"]),
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                className: classnames('byline-role-permissions-group-name', permissions_module["group-name"]),
+                                children: group.group
+                            }),
+                            /*#__PURE__*/ jsxs("span", {
+                                className: classnames('muted', 'byline-role-permissions-group-count', permissions_module["group-count"]),
+                                children: [
+                                    selectedInGroup,
+                                    " of ",
+                                    group.abilities.length,
+                                    " ",
+                                    isEdit ? 'selected' : 'granted'
+                                ]
+                            })
+                        ]
+                    }),
+                    isEdit ? /*#__PURE__*/ jsxs("div", {
+                        className: classnames('byline-role-permissions-group-buttons', permissions_module["group-buttons"]),
+                        children: [
+                            /*#__PURE__*/ jsx(Button, {
+                                size: "xs",
+                                intent: "secondary",
+                                type: "button",
+                                disabled: saving || selectedInGroup === group.abilities.length,
+                                onClick: ()=>onSelectAll(groupKeys),
+                                children: "Select all"
+                            }),
+                            /*#__PURE__*/ jsx(Button, {
+                                size: "xs",
+                                intent: "secondary",
+                                type: "button",
+                                disabled: saving || 0 === selectedInGroup,
+                                onClick: ()=>onClearAll(groupKeys),
+                                children: "Clear"
+                            })
+                        ]
+                    }) : null
+                ]
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: classnames('byline-role-permissions-grid', permissions_module.grid),
+                children: group.abilities.map((ability)=>/*#__PURE__*/ jsxs("div", {
+                        className: classnames('byline-role-permissions-row', permissions_module.row),
+                        children: [
+                            /*#__PURE__*/ jsx(Checkbox, {
+                                id: `ability-${ability.key}`,
+                                name: `ability-${ability.key}`,
+                                checked: selected.has(ability.key),
+                                disabled: !isEdit || saving,
+                                onCheckedChange: (checked)=>onToggle(ability.key, true === checked),
+                                containerClasses: classnames('byline-role-permissions-checkbox-auto', permissions_module["checkbox-auto"]),
+                                componentClasses: classnames('byline-role-permissions-checkbox-auto', permissions_module["checkbox-auto"])
+                            }),
+                            /*#__PURE__*/ jsxs("label", {
+                                htmlFor: `ability-${ability.key}`,
+                                className: classnames('byline-role-permissions-label', permissions_module.label, isEdit && [
+                                    'byline-role-permissions-label-edit',
+                                    permissions_module["label-edit"]
+                                ]),
+                                children: [
+                                    /*#__PURE__*/ jsxs("div", {
+                                        className: classnames('byline-role-permissions-label-head', permissions_module["label-head"]),
+                                        children: [
+                                            /*#__PURE__*/ jsx("span", {
+                                                className: classnames('byline-role-permissions-label-name', permissions_module["label-name"]),
+                                                children: ability.label
+                                            }),
+                                            /*#__PURE__*/ jsx("code", {
+                                                className: classnames('byline-role-permissions-key', permissions_module.key),
+                                                children: ability.key
+                                            })
+                                        ]
+                                    }),
+                                    ability.description ? /*#__PURE__*/ jsx("p", {
+                                        className: classnames('muted', "byline-role-permissions-description", permissions_module.description),
+                                        children: ability.description
+                                    }) : null
+                                ]
+                            })
+                        ]
+                    }, ability.key))
+            })
+        ]
+    });
+}
+function RolePermissions({ role, registered, initialAbilities, onSaved }) {
+    const { setRoleAbilities } = useBylineAdminServices();
+    const [mode, setMode] = useState('view');
+    const [initialSet, setInitialSet] = useState(()=>new Set(initialAbilities));
+    const [selected, setSelected] = useState(()=>new Set(initialAbilities));
+    const [saving, setSaving] = useState(false);
+    const [error, setError] = useState(null);
+    const isDirty = !setsEqual(selected, initialSet);
+    const totalSelected = selected.size;
+    function handleToggle(key, checked) {
+        if ('edit' !== mode) return;
+        setSelected((current)=>{
+            const next = new Set(current);
+            if (checked) next.add(key);
+            else next.delete(key);
+            return next;
+        });
+    }
+    function handleSelectAll(groupKeys) {
+        setSelected((current)=>{
+            const next = new Set(current);
+            for (const key of groupKeys)next.add(key);
+            return next;
+        });
+    }
+    function handleClearAll(groupKeys) {
+        setSelected((current)=>{
+            const next = new Set(current);
+            for (const key of groupKeys)next.delete(key);
+            return next;
+        });
+    }
+    function handleCancel() {
+        setSelected(new Set(initialSet));
+        setError(null);
+        setMode('view');
+    }
+    function handleEnterEdit() {
+        setError(null);
+        setMode('edit');
+    }
+    function handleEnterView() {
+        if (isDirty) return;
+        setError(null);
+        setMode('view');
+    }
+    async function handleSave() {
+        if (saving) return;
+        setSaving(true);
+        setError(null);
+        try {
+            const response = await setRoleAbilities({
+                data: {
+                    id: role.id,
+                    abilities: Array.from(selected)
+                }
+            });
+            const storedSet = new Set(response.abilities);
+            setInitialSet(storedSet);
+            setSelected(new Set(storedSet));
+            onSaved?.(response);
+        } catch (err) {
+            const code = getErrorCode(err);
+            if ('admin.permissions.roleNotFound' === code) setError('This role no longer exists.');
+            else 'admin.permissions.abilityUnregistered' === code ? setError('One or more selected abilities are no longer registered. Reload the page and try again.') : setError('Could not save permissions. Please try again.');
+        } finally{
+            setSaving(false);
+        }
+    }
+    const isEdit = 'edit' === mode;
+    return /*#__PURE__*/ jsxs("div", {
+        className: classnames('byline-role-permissions-wrap', permissions_module.wrap),
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: classnames('byline-role-permissions-toolbar', permissions_module.toolbar),
+                children: [
+                    /*#__PURE__*/ jsx(ModeToggle, {
+                        mode: mode,
+                        dirty: isDirty,
+                        saving: saving,
+                        onView: handleEnterView,
+                        onEdit: handleEnterEdit
+                    }),
+                    /*#__PURE__*/ jsxs("p", {
+                        className: classnames('muted', 'byline-role-permissions-counter', permissions_module.counter),
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                className: classnames('byline-role-permissions-counter-num', permissions_module["counter-num"]),
+                                children: totalSelected
+                            }),
+                            ' ',
+                            "of",
+                            ' ',
+                            /*#__PURE__*/ jsx("span", {
+                                className: classnames('byline-role-permissions-counter-num', permissions_module["counter-num"]),
+                                children: registered.total
+                            }),
+                            ' ',
+                            isEdit ? 'selected' : 'granted',
+                            " for ",
+                            role.name
+                        ]
+                    }),
+                    isEdit && isDirty ? /*#__PURE__*/ jsxs("div", {
+                        className: classnames('byline-role-permissions-actions', permissions_module.actions),
+                        children: [
+                            /*#__PURE__*/ jsx(Button, {
+                                type: "button",
+                                intent: "secondary",
+                                size: "xs",
+                                onClick: handleCancel,
+                                disabled: saving,
+                                className: classnames('byline-role-permissions-action', permissions_module.action),
+                                children: "Cancel"
+                            }),
+                            /*#__PURE__*/ jsx(Button, {
+                                type: "button",
+                                intent: "primary",
+                                size: "xs",
+                                onClick: ()=>void handleSave(),
+                                disabled: saving,
+                                className: classnames('byline-role-permissions-action', permissions_module.action),
+                                children: saving ? /*#__PURE__*/ jsx(LoaderEllipsis, {
+                                    size: 30
+                                }) : 'Save'
+                            })
+                        ]
+                    }) : null
+                ]
+            }),
+            error ? /*#__PURE__*/ jsx(Alert, {
+                intent: "danger",
+                children: error
+            }) : null,
+            /*#__PURE__*/ jsx("div", {
+                className: classnames('byline-role-permissions-groups', permissions_module.groups),
+                children: registered.groups.map((group)=>/*#__PURE__*/ jsx(GroupSection, {
+                        group: group,
+                        selected: selected,
+                        mode: mode,
+                        saving: saving,
+                        onToggle: handleToggle,
+                        onSelectAll: handleSelectAll,
+                        onClearAll: handleClearAll
+                    }, group.group))
+            })
+        ]
+    });
+}
+function ModeToggle({ mode, dirty, saving, onView, onEdit }) {
+    const isView = 'view' === mode;
+    const isEdit = 'edit' === mode;
+    const viewDisabled = dirty || saving;
+    const editDisabled = saving;
+    return /*#__PURE__*/ jsxs("div", {
+        role: "group",
+        "aria-label": "Permissions mode",
+        className: classnames('byline-role-permissions-mode-toggle', permissions_module["mode-toggle"]),
+        children: [
+            /*#__PURE__*/ jsx("button", {
+                type: "button",
+                onClick: onView,
+                disabled: viewDisabled,
+                className: classnames('byline-role-permissions-mode-button', permissions_module["mode-button"], isView && [
+                    'byline-role-permissions-mode-button-active',
+                    permissions_module["mode-button-active"]
+                ], viewDisabled && !isView && [
+                    'byline-role-permissions-mode-button-disabled',
+                    permissions_module["mode-button-disabled"]
+                ]),
+                children: "View"
+            }),
+            /*#__PURE__*/ jsx("button", {
+                type: "button",
+                onClick: onEdit,
+                disabled: editDisabled,
+                className: classnames('byline-role-permissions-mode-button', 'byline-role-permissions-mode-button-divider', permissions_module["mode-button"], permissions_module["mode-button-divider"], isEdit && [
+                    'byline-role-permissions-mode-button-active',
+                    permissions_module["mode-button-active"]
+                ], editDisabled && !isEdit && [
+                    'byline-role-permissions-mode-button-disabled',
+                    permissions_module["mode-button-disabled"]
+                ]),
+                children: "Edit"
+            })
+        ]
+    });
+}
+function getErrorCode(err) {
+    return 'string' == typeof err?.code ? err.code : null;
+}
+export { RolePermissions };

package/dist/admin/components/admin-roles/permissions.module.js

@@ -0,0 +1,44 @@
+import "./permissions_module.css";
+const permissions_module = {
+    wrap: "wrap-PZMu6Q",
+    toolbar: "toolbar-YuC8Pa",
+    counter: "counter-o7x3wE",
+    "counter-num": "counter-num-aRlp6L",
+    counterNum: "counter-num-aRlp6L",
+    actions: "actions-URmqw4",
+    action: "action-dZR89y",
+    "checkbox-auto": "checkbox-auto-RZCTjr",
+    checkboxAuto: "checkbox-auto-RZCTjr",
+    groups: "groups-Pgfk7i",
+    group: "group-DiWZhB",
+    "group-head": "group-head-kGzuxl",
+    groupHead: "group-head-kGzuxl",
+    "group-name": "group-name-f7Ehe2",
+    groupName: "group-name-f7Ehe2",
+    "group-count": "group-count-UQe6jT",
+    groupCount: "group-count-UQe6jT",
+    "group-buttons": "group-buttons-Ea04wO",
+    groupButtons: "group-buttons-Ea04wO",
+    grid: "grid-dUNuYY",
+    row: "row-dWk2LK",
+    label: "label-vQbd4k",
+    "label-edit": "label-edit-bcM5x6",
+    labelEdit: "label-edit-bcM5x6",
+    "label-head": "label-head-l8D5ui",
+    labelHead: "label-head-l8D5ui",
+    "label-name": "label-name-jlhCoA",
+    labelName: "label-name-jlhCoA",
+    key: "key-FIvnnZ",
+    description: "description-f9syLV",
+    "mode-toggle": "mode-toggle-MIdB3e",
+    modeToggle: "mode-toggle-MIdB3e",
+    "mode-button": "mode-button-QVtaDD",
+    modeButton: "mode-button-QVtaDD",
+    "mode-button-active": "mode-button-active-MvfUNO",
+    modeButtonActive: "mode-button-active-MvfUNO",
+    "mode-button-divider": "mode-button-divider-_j0tbc",
+    modeButtonDivider: "mode-button-divider-_j0tbc",
+    "mode-button-disabled": "mode-button-disabled-Rf9fQ5",
+    modeButtonDisabled: "mode-button-disabled-Rf9fQ5"
+};
+export default permissions_module;