nucleus-core-ts 0.8.6 → 0.8.8

package/dist/fe/components/AuthorizationPage/components/ClaimList.js

@@ -0,0 +1,100 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../utils/cn";
+import { authorizationPageTheme } from "../theme";
+export function ClaimList({ claims, isLoading }) {
+    const theme = authorizationPageTheme;
+    const getClaimEntity = (action)=>{
+        const parts = action.split(".");
+        if (parts[1] === "bulk") {
+            return parts[2] || "bulk";
+        }
+        return parts[1] || "other";
+    };
+    const groupedClaims = claims.reduce((acc, claim)=>{
+        const entity = getClaimEntity(claim.action);
+        if (!acc[entity]) {
+            acc[entity] = [];
+        }
+        acc[entity].push(claim);
+        return acc;
+    }, {});
+    const getMethodBadgeClass = (method)=>{
+        const methodLower = method.toLowerCase();
+        if (methodLower === "get") return theme.claimList.methodBadge.get;
+        if (methodLower === "post") return theme.claimList.methodBadge.post;
+        if (methodLower === "put") return theme.claimList.methodBadge.put;
+        if (methodLower === "patch") return theme.claimList.methodBadge.patch;
+        if (methodLower === "delete") return theme.claimList.methodBadge.delete;
+        return theme.claimList.methodBadge.get;
+    };
+    return /*#__PURE__*/ _jsxs("div", {
+        className: theme.card.wrapper,
+        children: [
+            /*#__PURE__*/ _jsx("h2", {
+                className: theme.card.header,
+                children: "All Claims"
+            }),
+            isLoading ? /*#__PURE__*/ _jsx("div", {
+                className: theme.loading.wrapper,
+                children: /*#__PURE__*/ _jsx("span", {
+                    className: theme.loading.text,
+                    children: "Loading claims..."
+                })
+            }) : Object.keys(groupedClaims).length === 0 ? /*#__PURE__*/ _jsx("div", {
+                className: theme.empty.wrapper,
+                children: /*#__PURE__*/ _jsx("span", {
+                    className: theme.empty.text,
+                    children: "No claims match the filters."
+                })
+            }) : /*#__PURE__*/ _jsx("div", {
+                className: theme.claimList.wrapper,
+                children: Object.entries(groupedClaims).map(([entity, entityClaims])=>/*#__PURE__*/ _jsxs("div", {
+                        className: theme.claimList.group,
+                        children: [
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: theme.claimList.groupHeader,
+                                children: [
+                                    entity,
+                                    " (",
+                                    entityClaims.length,
+                                    ")"
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                className: "divide-y divide-zinc-200 dark:divide-zinc-700",
+                                children: entityClaims.map((claim)=>/*#__PURE__*/ _jsx("div", {
+                                        className: theme.claimList.item,
+                                        children: /*#__PURE__*/ _jsxs("div", {
+                                            className: "flex items-center justify-between",
+                                            children: [
+                                                /*#__PURE__*/ _jsxs("div", {
+                                                    className: "flex-1 min-w-0",
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx("div", {
+                                                            className: theme.claimList.itemAction,
+                                                            children: claim.action
+                                                        }),
+                                                        /*#__PURE__*/ _jsx("div", {
+                                                            className: theme.claimList.itemDescription,
+                                                            children: claim.description
+                                                        })
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ _jsx("div", {
+                                                    className: "flex items-center gap-2",
+                                                    children: /*#__PURE__*/ _jsx("span", {
+                                                        className: cn("px-2 py-0.5 text-xs rounded-full", getMethodBadgeClass(claim.method)),
+                                                        children: claim.method
+                                                    })
+                                                })
+                                            ]
+                                        })
+                                    }, claim.id))
+                            })
+                        ]
+                    }, entity))
+            })
+        ]
+    });
+}

package/dist/fe/components/AuthorizationPage/components/RoleClaimEditor.js

@@ -0,0 +1,232 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../utils/cn";
+import { authorizationPageTheme } from "../theme";
+export function RoleClaimEditor({ selectedRole, claims, roleClaims, isLoading, isToggling, onToggleClaim, onUpdateScope, editingScope, onEditScope, scopeValue, onScopeValueChange }) {
+    const theme = authorizationPageTheme;
+    const getClaimEntity = (action)=>{
+        const parts = action.split(".");
+        if (parts[1] === "bulk") {
+            return parts[2] || "bulk";
+        }
+        return parts[1] || "other";
+    };
+    const groupedClaims = claims.reduce((acc, claim)=>{
+        const entity = getClaimEntity(claim.action);
+        if (!acc[entity]) {
+            acc[entity] = [];
+        }
+        acc[entity].push(claim);
+        return acc;
+    }, {});
+    const isClaimAssigned = (claimId)=>roleClaims.some((rc)=>rc.claimId === claimId);
+    const getRoleClaimForClaim = (claimId)=>roleClaims.find((rc)=>rc.claimId === claimId);
+    const handleScopeSubmit = (roleClaimId)=>{
+        if (onUpdateScope && scopeValue !== undefined) {
+            onUpdateScope(roleClaimId, scopeValue);
+            onEditScope?.(null);
+        }
+    };
+    const handleScopeCancel = ()=>{
+        onEditScope?.(null);
+    };
+    const startEditingScope = (claimId, currentScope)=>{
+        onScopeValueChange?.(currentScope || "");
+        onEditScope?.(claimId);
+    };
+    if (!selectedRole) {
+        return /*#__PURE__*/ _jsxs("div", {
+            className: theme.card.wrapper,
+            children: [
+                /*#__PURE__*/ _jsx("h2", {
+                    className: theme.card.header,
+                    children: "Select a role"
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    className: theme.empty.wrapper,
+                    children: /*#__PURE__*/ _jsx("span", {
+                        className: theme.empty.text,
+                        children: "Select a role from the list to manage its claims"
+                    })
+                })
+            ]
+        });
+    }
+    if (selectedRole.name === "godmin") {
+        return /*#__PURE__*/ _jsxs("div", {
+            className: theme.card.wrapper,
+            children: [
+                /*#__PURE__*/ _jsxs("h2", {
+                    className: theme.card.header,
+                    children: [
+                        'Claims for "',
+                        selectedRole.name,
+                        '"'
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: theme.empty.wrapper,
+                    children: [
+                        /*#__PURE__*/ _jsx("svg", {
+                            className: theme.empty.icon,
+                            fill: "none",
+                            stroke: "currentColor",
+                            viewBox: "0 0 24 24",
+                            "aria-hidden": "true",
+                            children: /*#__PURE__*/ _jsx("path", {
+                                strokeLinecap: "round",
+                                strokeLinejoin: "round",
+                                strokeWidth: 2,
+                                d: "M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
+                            })
+                        }),
+                        /*#__PURE__*/ _jsxs("p", {
+                            className: theme.empty.text,
+                            children: [
+                                "Godmin role has full access to all resources.",
+                                /*#__PURE__*/ _jsx("br", {}),
+                                "Claims cannot be modified."
+                            ]
+                        })
+                    ]
+                })
+            ]
+        });
+    }
+    return /*#__PURE__*/ _jsxs("div", {
+        className: theme.card.wrapper,
+        children: [
+            /*#__PURE__*/ _jsxs("h2", {
+                className: theme.card.header,
+                children: [
+                    'Claims for "',
+                    selectedRole.name,
+                    '"'
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: theme.stats.text,
+                children: [
+                    roleClaims.length,
+                    " claims assigned"
+                ]
+            }),
+            isLoading ? /*#__PURE__*/ _jsx("div", {
+                className: theme.loading.wrapper,
+                children: /*#__PURE__*/ _jsx("span", {
+                    className: theme.loading.text,
+                    children: "Loading claims..."
+                })
+            }) : Object.keys(groupedClaims).length === 0 ? /*#__PURE__*/ _jsx("div", {
+                className: theme.empty.wrapper,
+                children: /*#__PURE__*/ _jsx("span", {
+                    className: theme.empty.text,
+                    children: "No claims match the filters."
+                })
+            }) : /*#__PURE__*/ _jsx("div", {
+                className: "max-h-[500px] overflow-y-auto space-y-4",
+                children: Object.entries(groupedClaims).map(([entity, entityClaims])=>/*#__PURE__*/ _jsxs("div", {
+                        className: theme.claimList.group,
+                        children: [
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: theme.claimList.groupHeader,
+                                children: [
+                                    entity,
+                                    " (",
+                                    entityClaims.length,
+                                    ")"
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                className: "divide-y divide-zinc-200 dark:divide-zinc-700",
+                                children: entityClaims.map((claim)=>{
+                                    const assigned = isClaimAssigned(claim.id);
+                                    const roleClaim = getRoleClaimForClaim(claim.id);
+                                    const isEditingThisClaim = editingScope === claim.id;
+                                    const currentScope = roleClaim?.scope || "";
+                                    return /*#__PURE__*/ _jsx("div", {
+                                        className: cn("py-3 px-2 hover:bg-zinc-50 dark:hover:bg-zinc-800/50 transition-colors", assigned && "bg-emerald-50/50 dark:bg-emerald-900/10"),
+                                        children: /*#__PURE__*/ _jsxs("div", {
+                                            className: "flex items-start gap-3",
+                                            children: [
+                                                /*#__PURE__*/ _jsx("input", {
+                                                    type: "checkbox",
+                                                    checked: assigned,
+                                                    onChange: ()=>onToggleClaim(claim, assigned),
+                                                    disabled: isToggling || claim.id.startsWith("temp-"),
+                                                    className: cn(theme.checkbox.input, "mt-1 shrink-0")
+                                                }),
+                                                /*#__PURE__*/ _jsxs("div", {
+                                                    className: "flex-1 min-w-0",
+                                                    children: [
+                                                        /*#__PURE__*/ _jsxs("div", {
+                                                            className: "flex items-center gap-2 flex-wrap",
+                                                            children: [
+                                                                /*#__PURE__*/ _jsx("span", {
+                                                                    className: "text-sm font-mono text-zinc-900 dark:text-zinc-100 truncate",
+                                                                    children: claim.action
+                                                                }),
+                                                                /*#__PURE__*/ _jsx("span", {
+                                                                    className: cn("px-1.5 py-0.5 text-xs font-medium rounded", claim.method === "GET" && "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400", claim.method === "POST" && "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400", claim.method === "PUT" && "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400", claim.method === "PATCH" && "bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400", claim.method === "DELETE" && "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400"),
+                                                                    children: claim.method
+                                                                })
+                                                            ]
+                                                        }),
+                                                        /*#__PURE__*/ _jsx("p", {
+                                                            className: "text-xs text-zinc-500 dark:text-zinc-400 mt-0.5",
+                                                            children: claim.description
+                                                        }),
+                                                        assigned && roleClaim && !roleClaim.id.startsWith("temp-") && /*#__PURE__*/ _jsx("div", {
+                                                            className: "mt-2",
+                                                            children: isEditingThisClaim ? /*#__PURE__*/ _jsxs("div", {
+                                                                className: "flex items-center gap-2",
+                                                                children: [
+                                                                    /*#__PURE__*/ _jsx("input", {
+                                                                        type: "text",
+                                                                        value: scopeValue || "",
+                                                                        onChange: (e)=>onScopeValueChange?.(e.target.value),
+                                                                        placeholder: "e.g. user_id=123&tenant_id=456",
+                                                                        className: "flex-1 px-2 py-1 text-xs border border-zinc-300 dark:border-zinc-600 rounded bg-white dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400"
+                                                                    }),
+                                                                    /*#__PURE__*/ _jsx("button", {
+                                                                        type: "button",
+                                                                        onClick: ()=>handleScopeSubmit(roleClaim.id),
+                                                                        className: "px-2 py-1 text-xs font-medium text-white bg-emerald-600 hover:bg-emerald-700 rounded transition-colors",
+                                                                        children: "Save"
+                                                                    }),
+                                                                    /*#__PURE__*/ _jsx("button", {
+                                                                        type: "button",
+                                                                        onClick: handleScopeCancel,
+                                                                        className: "px-2 py-1 text-xs font-medium text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors",
+                                                                        children: "Cancel"
+                                                                    })
+                                                                ]
+                                                            }) : /*#__PURE__*/ _jsx("button", {
+                                                                type: "button",
+                                                                onClick: ()=>startEditingScope(claim.id, currentScope),
+                                                                className: "text-xs text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200 transition-colors",
+                                                                children: currentScope ? /*#__PURE__*/ _jsxs("span", {
+                                                                    className: "font-mono bg-zinc-100 dark:bg-zinc-800 px-1.5 py-0.5 rounded",
+                                                                    children: [
+                                                                        "Scope: ",
+                                                                        currentScope
+                                                                    ]
+                                                                }) : /*#__PURE__*/ _jsx("span", {
+                                                                    className: "italic",
+                                                                    children: "+ Add scope filter"
+                                                                })
+                                                            })
+                                                        })
+                                                    ]
+                                                })
+                                            ]
+                                        })
+                                    }, claim.id);
+                                })
+                            })
+                        ]
+                    }, entity))
+            })
+        ]
+    });
+}

package/dist/fe/components/AuthorizationPage/components/RoleList.js

@@ -0,0 +1,115 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../utils/cn";
+import { authorizationPageTheme } from "../theme";
+export function RoleList({ roles, selectedRole, isLoading, isCreating, isDeleting, newRoleName, newRoleDescription, onNewRoleNameChange, onNewRoleDescriptionChange, onSelectRole, onDeleteRole, onCreateRole }) {
+    const theme = authorizationPageTheme;
+    const handleDelete = (e, roleId)=>{
+        e.stopPropagation();
+        if (confirm("Are you sure you want to delete this role?")) {
+            onDeleteRole(roleId);
+        }
+    };
+    const isTempId = (id)=>id.startsWith("temp-");
+    return /*#__PURE__*/ _jsxs("div", {
+        className: theme.card.wrapper,
+        children: [
+            /*#__PURE__*/ _jsx("h2", {
+                className: theme.card.header,
+                children: "Roles"
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: theme.form.wrapper,
+                children: [
+                    /*#__PURE__*/ _jsx("h3", {
+                        className: theme.form.title,
+                        children: "Create New Role"
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "space-y-3",
+                        children: [
+                            /*#__PURE__*/ _jsx("input", {
+                                type: "text",
+                                placeholder: "Role name",
+                                value: newRoleName,
+                                onChange: (e)=>onNewRoleNameChange(e.target.value),
+                                className: theme.form.input
+                            }),
+                            /*#__PURE__*/ _jsx("input", {
+                                type: "text",
+                                placeholder: "Description (optional)",
+                                value: newRoleDescription,
+                                onChange: (e)=>onNewRoleDescriptionChange(e.target.value),
+                                className: theme.form.input
+                            }),
+                            /*#__PURE__*/ _jsx("button", {
+                                type: "button",
+                                onClick: onCreateRole,
+                                disabled: !newRoleName.trim() || isCreating,
+                                className: cn(theme.form.button, (!newRoleName.trim() || isCreating) && theme.form.buttonDisabled),
+                                children: isCreating ? "Creating..." : "Create Role"
+                            })
+                        ]
+                    })
+                ]
+            }),
+            isLoading ? /*#__PURE__*/ _jsx("div", {
+                className: theme.loading.wrapper,
+                children: /*#__PURE__*/ _jsx("span", {
+                    className: theme.loading.text,
+                    children: "Loading roles..."
+                })
+            }) : /*#__PURE__*/ _jsx("div", {
+                className: theme.roleList.wrapper,
+                children: roles.map((role)=>/*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        onClick: ()=>onSelectRole(role),
+                        disabled: isTempId(role.id),
+                        className: cn(theme.roleList.item, selectedRole?.id === role.id ? theme.roleList.itemSelected : theme.roleList.itemHover, isTempId(role.id) && "opacity-50 cursor-wait"),
+                        children: /*#__PURE__*/ _jsxs("div", {
+                            className: "flex items-center justify-between",
+                            children: [
+                                /*#__PURE__*/ _jsxs("div", {
+                                    children: [
+                                        /*#__PURE__*/ _jsxs("h4", {
+                                            className: theme.roleList.name,
+                                            children: [
+                                                role.name,
+                                                role.name === "godmin" && /*#__PURE__*/ _jsx("span", {
+                                                    className: theme.roleList.badge,
+                                                    children: "Super Admin"
+                                                })
+                                            ]
+                                        }),
+                                        role.description && /*#__PURE__*/ _jsx("p", {
+                                            className: theme.roleList.description,
+                                            children: role.description
+                                        })
+                                    ]
+                                }),
+                                role.name !== "godmin" && !isTempId(role.id) && /*#__PURE__*/ _jsx("button", {
+                                    type: "button",
+                                    onClick: (e)=>handleDelete(e, role.id),
+                                    disabled: isDeleting,
+                                    className: cn(theme.roleList.deleteButton, isDeleting && "opacity-50 cursor-not-allowed"),
+                                    children: /*#__PURE__*/ _jsx("svg", {
+                                        className: "w-5 h-5",
+                                        fill: "none",
+                                        stroke: "currentColor",
+                                        viewBox: "0 0 24 24",
+                                        "aria-hidden": "true",
+                                        children: /*#__PURE__*/ _jsx("path", {
+                                            strokeLinecap: "round",
+                                            strokeLinejoin: "round",
+                                            strokeWidth: 2,
+                                            d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                                        })
+                                    })
+                                })
+                            ]
+                        })
+                    }, role.id))
+            })
+        ]
+    });
+}

package/dist/fe/components/AuthorizationPage/index.js

@@ -0,0 +1,6 @@
+export { AuthorizationPage } from "./components/AuthorizationPage";
+export { ClaimList } from "./components/ClaimList";
+export { RoleClaimEditor } from "./components/RoleClaimEditor";
+export { RoleList } from "./components/RoleList";
+export { useAuthorizationStore } from "./store";
+export { authorizationPageTheme, extendAuthorizationPageTheme } from "./theme";

package/dist/fe/components/AuthorizationPage/store/index.js

@@ -0,0 +1,117 @@
+"use client";
+import { batch, createStore } from "h-state";
+const initialState = {
+    roles: [],
+    claims: [],
+    roleClaims: [],
+    selectedRole: null,
+    newRoleName: "",
+    newRoleDescription: "",
+    searchClaim: "",
+    entityFilter: "all",
+    methodFilter: "all",
+    showAssignedOnly: false,
+    activeTab: "roles",
+    editingScopeClaimId: null,
+    scopeInputValue: "",
+    editingRoleId: null,
+    editRoleDescription: ""
+};
+export const { useStore: useAuthorizationStore } = createStore(initialState, {
+    setRoles: (store)=>(roles)=>{
+            store.roles = roles;
+        },
+    setClaims: (store)=>(claims)=>{
+            store.claims = claims;
+        },
+    setRoleClaims: (store)=>(roleClaims)=>{
+            store.roleClaims = roleClaims;
+        },
+    setSelectedRole: (store)=>(role)=>{
+            store.selectedRole = role;
+        },
+    setNewRoleName: (store)=>(name)=>{
+            store.newRoleName = name;
+        },
+    setNewRoleDescription: (store)=>(description)=>{
+            store.newRoleDescription = description;
+        },
+    setSearchClaim: (store)=>(query)=>{
+            store.searchClaim = query;
+        },
+    setEntityFilter: (store)=>(entity)=>{
+            store.entityFilter = entity;
+        },
+    setMethodFilter: (store)=>(method)=>{
+            store.methodFilter = method;
+        },
+    setShowAssignedOnly: (store)=>(show)=>{
+            store.showAssignedOnly = show;
+        },
+    setActiveTab: (store)=>(tab)=>{
+            store.activeTab = tab;
+        },
+    addRole: (store)=>(role)=>{
+            store.roles = [
+                ...store.roles,
+                role
+            ];
+        },
+    removeRole: (store)=>(roleId)=>{
+            store.roles = store.roles.filter((r)=>r.id !== roleId);
+            if (store.selectedRole?.id === roleId) {
+                store.selectedRole = null;
+            }
+        },
+    addRoleClaim: (store)=>(roleClaim)=>{
+            store.roleClaims = [
+                ...store.roleClaims,
+                roleClaim
+            ];
+        },
+    removeRoleClaim: (store)=>(roleClaimId)=>{
+            store.roleClaims = store.roleClaims.filter((rc)=>rc.id !== roleClaimId);
+        },
+    updateRoleClaimScope: (store)=>(roleClaimId, scope)=>{
+            store.roleClaims = store.roleClaims.map((rc)=>rc.id === roleClaimId ? {
+                    ...rc,
+                    scope
+                } : rc);
+        },
+    setEditingScopeClaimId: (store)=>(claimId)=>{
+            store.editingScopeClaimId = claimId;
+            if (claimId === null) {
+                store.scopeInputValue = "";
+            }
+        },
+    setScopeInputValue: (store)=>(value)=>{
+            store.scopeInputValue = value;
+        },
+    setEditingRoleId: (store)=>(roleId)=>{
+            store.editingRoleId = roleId;
+            if (roleId === null) {
+                store.editRoleDescription = "";
+            }
+        },
+    setEditRoleDescription: (store)=>(description)=>{
+            store.editRoleDescription = description;
+        },
+    updateRole: (store)=>(roleId, updates)=>{
+            store.roles = store.roles.map((r)=>r.id === roleId ? {
+                    ...r,
+                    ...updates
+                } : r);
+            if (store.selectedRole?.id === roleId) {
+                store.selectedRole = {
+                    ...store.selectedRole,
+                    ...updates
+                };
+            }
+        },
+    resetForm: (store)=>()=>{
+            batch(()=>{
+                store.newRoleName = "";
+                store.newRoleDescription = "";
+            });
+        }
+});