@abpjs/permission-management 0.7.6

package/LICENSE

@@ -0,0 +1,165 @@
+                   GNU LESSER GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+
+  This version of the GNU Lesser General Public License incorporates
+the terms and conditions of version 3 of the GNU General Public
+License, supplemented by the additional permissions listed below.
+
+  0. Additional Definitions.
+
+  As used herein, "this License" refers to version 3 of the GNU Lesser
+General Public License, and the "GNU GPL" refers to version 3 of the GNU
+General Public License.
+
+  "The Library" refers to a covered work governed by this License,
+other than an Application or a Combined Work as defined below.
+
+  An "Application" is any work that makes use of an interface provided
+by the Library, but which is not otherwise based on the Library.
+Defining a subclass of a class defined by the Library is deemed a mode
+of using an interface provided by the Library.
+
+  A "Combined Work" is a work produced by combining or linking an
+Application with the Library.  The particular version of the Library
+with which the Combined Work was made is also called the "Linked
+Version".
+
+  The "Minimal Corresponding Source" for a Combined Work means the
+Corresponding Source for the Combined Work, excluding any source code
+for portions of the Combined Work that, considered in isolation, are
+based on the Application, and not on the Linked Version.
+
+  The "Corresponding Application Code" for a Combined Work means the
+object code and/or source code for the Application, including any data
+and utility programs needed for reproducing the Combined Work from the
+Application, but excluding the System Libraries of the Combined Work.
+
+  1. Exception to Section 3 of the GNU GPL.
+
+  You may convey a covered work under sections 3 and 4 of this License
+without being bound by section 3 of the GNU GPL.
+
+  2. Conveying Modified Versions.
+
+  If you modify a copy of the Library, and, in your modifications, a
+facility refers to a function or data to be supplied by an Application
+that uses the facility (other than as an argument passed when the
+facility is invoked), then you may convey a copy of the modified
+version:
+
+   a) under this License, provided that you make a good faith effort to
+   ensure that, in the event an Application does not supply the
+   function or data, the facility still operates, and performs
+   whatever part of its purpose remains meaningful, or
+
+   b) under the GNU GPL, with none of the additional permissions of
+   this License applicable to that copy.
+
+  3. Object Code Incorporating Material from Library Header Files.
+
+  The object code form of an Application may incorporate material from
+a header file that is part of the Library.  You may convey such object
+code under terms of your choice, provided that, if the incorporated
+material is not limited to numerical parameters, data structure
+layouts and accessors, or small macros, inline functions and templates
+(ten or fewer lines in length), you do both of the following:
+
+   a) Give prominent notice with each copy of the object code that the
+   Library is used in it and that the Library and its use are
+   covered by this License.
+
+   b) Accompany the object code with a copy of the GNU GPL and this license
+   document.
+
+  4. Combined Works.
+
+  You may convey a Combined Work under terms of your choice that,
+taken together, effectively do not restrict modification of the
+portions of the Library contained in the Combined Work and reverse
+engineering for debugging such modifications, if you also do each of
+the following:
+
+   a) Give prominent notice with each copy of the Combined Work that
+   the Library is used in it and that the Library and its use are
+   covered by this License.
+
+   b) Accompany the Combined Work with a copy of the GNU GPL and this license
+   document.
+
+   c) For a Combined Work that displays copyright notices during
+   execution, include the copyright notice for the Library among
+   these notices, as well as a reference directing the user to the
+   copies of the GNU GPL and this license document.
+
+   d) Do one of the following:
+
+       0) Convey the Minimal Corresponding Source under the terms of this
+       License, and the Corresponding Application Code in a form
+       suitable for, and under terms that permit, the user to
+       recombine or relink the Application with a modified version of
+       the Linked Version to produce a modified Combined Work, in the
+       manner specified by section 6 of the GNU GPL for conveying
+       Corresponding Source.
+
+       1) Use a suitable shared library mechanism for linking with the
+       Library.  A suitable mechanism is one that (a) uses at run time
+       a copy of the Library already present on the user's computer
+       system, and (b) will operate properly with a modified version of
+       the Library that is interface-compatible with the Linked
+       Version.
+
+   e) Provide Installation Information, but only if you would otherwise
+   be required to provide such information under section 6 of the
+   GNU GPL, and only to the extent that such information is
+   necessary to install and execute a modified version of the
+   Combined Work produced by recombining or relinking the
+   Application with a modified version of the Linked Version. (If
+   you use option 4d0, the Installation Information must accompany
+   the Minimal Corresponding Source and Corresponding Application
+   Code. If you use option 4d1, you must provide the Installation
+   Information in the manner specified by section 6 of the GNU GPL
+   for conveying Corresponding Source.)
+
+  5. Combined Libraries.
+
+  You may place library facilities that are a work based on the
+Library side by side in a single library together with other library
+facilities that are not Applications and are not covered by this
+License, and convey such a combined library under terms of your
+choice, if you do both of the following:
+
+   a) Accompany the combined library with a copy of the same work based
+   on the Library, uncombined with any other library facilities,
+   conveyed under the terms of this License.
+
+   b) Give prominent notice with the combined library that part of it
+   is a work based on the Library, and explaining where to find the
+   accompanying uncombined form of the same work.
+
+  6. Revised Versions of the GNU Lesser General Public License.
+
+  The Free Software Foundation may publish revised and/or new versions
+of the GNU Lesser General Public License from time to time. Such new
+versions will be similar in spirit to the present version, but may
+differ in detail to address new problems or concerns.
+
+  Each version is given a distinguishing version number. If the
+Library as you received it specifies that a certain numbered version
+of the GNU Lesser General Public License "or any later version"
+applies to it, you have the option of following the terms and
+conditions either of that published version or of any later version
+published by the Free Software Foundation. If the Library as you
+received it does not specify a version number of the GNU Lesser
+General Public License, you may choose any version of the GNU Lesser
+General Public License ever published by the Free Software Foundation.
+
+  If the Library as you received it specifies that a proxy can decide
+whether future versions of the GNU Lesser General Public License shall
+apply, that proxy's public statement of acceptance of any version is
+permanent authorization for you to choose that version for the
+Library.

package/README.md

@@ -0,0 +1,372 @@
+# @abpjs/permission-management
+
+> Permission management UI components for ABP Framework in React
+
+[![npm version](https://img.shields.io/npm/v/@abpjs/permission-management.svg)](https://www.npmjs.com/package/@abpjs/permission-management)
+[![License: LGPL-3.0](https://img.shields.io/badge/License-LGPL--3.0-blue.svg)](https://www.gnu.org/licenses/lgpl-3.0)
+
+## Overview
+
+`@abpjs/permission-management` provides a complete permission management interface for ABP-based React applications. It allows administrators to view, grant, and revoke permissions for users, roles, and other permission providers through a user-friendly modal interface.
+
+This package is a React translation of the original `@abp/ng.permission-management` Angular package, offering the same powerful permission management capabilities with modern React patterns.
+
+## Features
+
+- **Permission Modal** - Ready-to-use modal dialog for managing permissions
+- **Role Permissions** - Manage permissions for roles
+- **User Permissions** - Manage permissions for individual users
+- **Permission Groups** - Organized permission display by groups
+- **Bulk Operations** - Grant or revoke multiple permissions at once
+- **Real-time Updates** - Instant UI feedback on permission changes
+- **Chakra UI** - Beautiful, accessible components
+- **TypeScript** - Full type safety with comprehensive definitions
+
+## Installation
+
+```bash
+# Using npm
+npm install @abpjs/permission-management
+
+# Using yarn
+yarn add @abpjs/permission-management
+
+# Using pnpm
+pnpm add @abpjs/permission-management
+```
+
+### Required Dependencies
+
+This package requires the following peer dependencies:
+
+```bash
+npm install @abpjs/core @abpjs/theme-shared @chakra-ui/react @emotion/react @emotion/styled framer-motion
+```
+
+## Quick Start
+
+### Basic Usage with Permission Modal
+
+```tsx
+import { useState } from 'react';
+import { PermissionManagementModal } from '@abpjs/permission-management';
+import { Button } from '@chakra-ui/react';
+
+function RoleManagement() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedRole, setSelectedRole] = useState(null);
+
+  const openPermissions = (role) => {
+    setSelectedRole(role);
+    setIsOpen(true);
+  };
+
+  return (
+    <div>
+      <Button onClick={() => openPermissions({ id: 'role-id', name: 'admin' })}>
+        Manage Permissions
+      </Button>
+
+      <PermissionManagementModal
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        providerName="R"  // R for Role
+        providerKey={selectedRole?.id}
+      />
+    </div>
+  );
+}
+```
+
+### Managing User Permissions
+
+```tsx
+import { PermissionManagementModal } from '@abpjs/permission-management';
+
+function UserPermissions({ userId }) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setIsOpen(true)}>
+        Edit User Permissions
+      </Button>
+
+      <PermissionManagementModal
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        providerName="U"  // U for User
+        providerKey={userId}
+      />
+    </>
+  );
+}
+```
+
+## Components
+
+### PermissionManagementModal
+
+The main component for displaying and managing permissions.
+
+```tsx
+import { PermissionManagementModal } from '@abpjs/permission-management';
+
+<PermissionManagementModal
+  isOpen={isOpen}
+  onClose={handleClose}
+  providerName="R"
+  providerKey="admin-role-id"
+  onSave={handleSave}
+/>
+```
+
+**Props:**
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `isOpen` | `boolean` | Controls modal visibility |
+| `onClose` | `() => void` | Callback when modal is closed |
+| `providerName` | `string` | Permission provider type ("R" for Role, "U" for User) |
+| `providerKey` | `string` | The identifier of the role or user |
+| `onSave` | `() => void` | Optional callback after permissions are saved |
+
+## Hooks
+
+### usePermissionManagement
+
+Hook for accessing permission management functionality programmatically.
+
+```tsx
+import { usePermissionManagement } from '@abpjs/permission-management';
+
+function CustomPermissionUI() {
+  const {
+    permissions,
+    isLoading,
+    error,
+    getPermissions,
+    updatePermissions,
+  } = usePermissionManagement();
+
+  useEffect(() => {
+    getPermissions({
+      providerName: 'R',
+      providerKey: 'admin',
+    });
+  }, []);
+
+  const handleToggle = async (permissionName, isGranted) => {
+    await updatePermissions({
+      providerName: 'R',
+      providerKey: 'admin',
+      permissions: {
+        [permissionName]: isGranted,
+      },
+    });
+  };
+
+  if (isLoading) return <Spinner />;
+  if (error) return <ErrorMessage error={error} />;
+
+  return (
+    <div>
+      {permissions.groups.map(group => (
+        <PermissionGroup
+          key={group.name}
+          group={group}
+          onToggle={handleToggle}
+        />
+      ))}
+    </div>
+  );
+}
+```
+
+## Services
+
+### PermissionManagementService
+
+Service class for direct API interaction.
+
+```tsx
+import { PermissionManagementService } from '@abpjs/permission-management';
+
+// Get permissions for a role
+const permissions = await PermissionManagementService.get({
+  providerName: 'R',
+  providerKey: 'admin-role-id',
+});
+
+// Update permissions
+await PermissionManagementService.update({
+  providerName: 'R',
+  providerKey: 'admin-role-id',
+  permissions: [
+    { name: 'MyApp.Users.Create', isGranted: true },
+    { name: 'MyApp.Users.Delete', isGranted: false },
+  ],
+});
+```
+
+## Permission Providers
+
+ABP uses different provider types for different permission subjects:
+
+| Provider | Key | Description |
+|----------|-----|-------------|
+| `R` | Role | Permissions for roles |
+| `U` | User | Permissions for specific users |
+| `C` | Client | Permissions for OAuth clients |
+
+## Data Models
+
+### PermissionGroup
+
+```typescript
+interface PermissionGroup {
+  name: string;
+  displayName: string;
+  permissions: Permission[];
+}
+```
+
+### Permission
+
+```typescript
+interface Permission {
+  name: string;
+  displayName: string;
+  isGranted: boolean;
+  allowedProviders: string[];
+  grantedProviders: GrantedProvider[];
+}
+```
+
+## Integration Example
+
+Complete example integrating with role management:
+
+```tsx
+import { useState } from 'react';
+import { usePermission } from '@abpjs/core';
+import { PermissionManagementModal } from '@abpjs/permission-management';
+import {
+  Table,
+  Button,
+  IconButton,
+  useDisclosure
+} from '@chakra-ui/react';
+import { SettingsIcon } from '@chakra-ui/icons';
+
+function RolesTable({ roles }) {
+  const { hasPermission } = usePermission();
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [selectedRole, setSelectedRole] = useState(null);
+
+  const canManagePermissions = hasPermission('AbpIdentity.Roles.ManagePermissions');
+
+  const handleManagePermissions = (role) => {
+    setSelectedRole(role);
+    onOpen();
+  };
+
+  return (
+    <>
+      <Table>
+        <thead>
+          <tr>
+            <th>Role Name</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          {roles.map(role => (
+            <tr key={role.id}>
+              <td>{role.name}</td>
+              <td>
+                {canManagePermissions && (
+                  <IconButton
+                    aria-label="Manage permissions"
+                    icon={<SettingsIcon />}
+                    onClick={() => handleManagePermissions(role)}
+                  />
+                )}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </Table>
+
+      <PermissionManagementModal
+        isOpen={isOpen}
+        onClose={onClose}
+        providerName="R"
+        providerKey={selectedRole?.id}
+      />
+    </>
+  );
+}
+```
+
+## Customization
+
+### Custom Permission Display
+
+Create your own permission display component:
+
+```tsx
+import { usePermissionManagement } from '@abpjs/permission-management';
+import { Checkbox, VStack, Heading } from '@chakra-ui/react';
+
+function CustomPermissionList({ providerName, providerKey }) {
+  const { permissions, updatePermissions } = usePermissionManagement();
+
+  const handleChange = async (permissionName, isGranted) => {
+    await updatePermissions({
+      providerName,
+      providerKey,
+      permissions: [{ name: permissionName, isGranted }],
+    });
+  };
+
+  return (
+    <VStack align="stretch" spacing={4}>
+      {permissions?.groups.map(group => (
+        <div key={group.name}>
+          <Heading size="sm">{group.displayName}</Heading>
+          {group.permissions.map(permission => (
+            <Checkbox
+              key={permission.name}
+              isChecked={permission.isGranted}
+              onChange={(e) => handleChange(permission.name, e.target.checked)}
+            >
+              {permission.displayName}
+            </Checkbox>
+          ))}
+        </div>
+      ))}
+    </VStack>
+  );
+}
+```
+
+## Related Packages
+
+- [@abpjs/core](https://www.npmjs.com/package/@abpjs/core) - Core infrastructure (required)
+- [@abpjs/theme-shared](https://www.npmjs.com/package/@abpjs/theme-shared) - Shared UI components (required)
+- [@abpjs/account](https://www.npmjs.com/package/@abpjs/account) - Account management
+- [@abpjs/tenant-management](https://www.npmjs.com/package/@abpjs/tenant-management) - Tenant administration
+- [@abpjs/theme-basic](https://www.npmjs.com/package/@abpjs/theme-basic) - Layout components
+
+## Contributing
+
+This package is part of the [ABP React](https://github.com/abpjs/abp-react) monorepo. Contributions are welcome!
+
+## License
+
+LGPL-3.0 - See [LICENSE](https://github.com/abpjs/abp-react/blob/main/LICENSE) for details.
+
+---
+
+**[View Full Documentation](https://docs.abpjs.io/docs/packages/permission-management/overview)** | **[Report Issues](https://github.com/abpjs/abp-react/issues)** | **[View Source](https://github.com/abpjs/abp-react/tree/main/packages/permission-management)**