@abpjs/setting-management 0.9.0

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,287 @@
+# @abpjs/setting-management
+
+> Setting management UI components for ABP Framework in React
+
+[![npm version](https://img.shields.io/npm/v/@abpjs/setting-management.svg)](https://www.npmjs.com/package/@abpjs/setting-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/setting-management` provides a settings management page layout and tab management for ABP-based React applications. It allows organizing application settings into categorized tabs with a unified UI.
+
+This package is a React translation of the original `@abp/ng.setting-management` Angular package.
+
+## Features
+
+- **Setting Tabs** - Register and manage setting tabs from different modules
+- **Tab Layout** - Responsive sidebar layout with tab navigation
+- **URL Sync** - Automatic tab selection based on current URL
+- **Ordering** - Tabs sorted by configurable order property
+- **TypeScript** - Full type safety with comprehensive definitions
+
+## Installation
+
+```bash
+# Using npm
+npm install @abpjs/setting-management
+
+# Using yarn
+yarn add @abpjs/setting-management
+
+# Using pnpm
+pnpm add @abpjs/setting-management
+```
+
+### Required Dependencies
+
+This package requires the following peer dependencies:
+
+```bash
+npm install @abpjs/core @abpjs/theme-shared react-router-dom
+```
+
+## Quick Start
+
+### Using the Setting Layout Component
+
+```tsx
+import { useEffect } from 'react';
+import { Outlet } from 'react-router-dom';
+import { SettingLayout, useSettingManagement } from '@abpjs/setting-management';
+
+function SettingsPage() {
+  const { addSettings } = useSettingManagement();
+
+  useEffect(() => {
+    addSettings([
+      { name: 'Account', order: 1, url: '/settings/account' },
+      { name: 'Identity', order: 2, url: '/settings/identity' },
+      { name: 'Tenant', order: 3, url: '/settings/tenant', requiredPolicy: 'AbpTenantManagement.Tenants' },
+    ]);
+  }, [addSettings]);
+
+  return (
+    <SettingLayout>
+      <Outlet />
+    </SettingLayout>
+  );
+}
+```
+
+### Using the Hook
+
+```tsx
+import { useSettingManagement } from '@abpjs/setting-management';
+
+function SettingsMenu() {
+  const {
+    settings,
+    selected,
+    setSelected,
+    addSetting,
+    removeSetting,
+  } = useSettingManagement();
+
+  return (
+    <nav>
+      {settings.map(tab => (
+        <button
+          key={tab.name}
+          onClick={() => setSelected(tab)}
+          className={selected?.name === tab.name ? 'active' : ''}
+        >
+          {tab.name}
+        </button>
+      ))}
+    </nav>
+  );
+}
+```
+
+### Registering Settings from Other Modules
+
+```tsx
+// In your account module
+import { useEffect } from 'react';
+import { useSettingManagement } from '@abpjs/setting-management';
+
+function AccountModule() {
+  const { addSetting } = useSettingManagement();
+
+  useEffect(() => {
+    addSetting({
+      name: 'Account',
+      order: 1,
+      url: '/settings/account',
+    });
+  }, [addSetting]);
+
+  return null;
+}
+```
+
+## Components
+
+### SettingLayout
+
+Layout component for the settings management page with sidebar navigation.
+
+```tsx
+import { SettingLayout } from '@abpjs/setting-management';
+
+<SettingLayout
+  className="my-settings"
+  onTabSelect={(tab) => console.log('Selected:', tab.name)}
+>
+  {/* Content renders here */}
+</SettingLayout>
+```
+
+**Props:**
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `children` | `ReactNode` | No | Content to render in the main area |
+| `className` | `string` | No | Additional CSS class for the container |
+| `onTabSelect` | `(tab: SettingTab) => void` | No | Callback when a tab is selected |
+
+## Hooks
+
+### useSettingManagement
+
+Hook for managing setting tabs and selection state.
+
+```tsx
+import { useSettingManagement } from '@abpjs/setting-management';
+
+const {
+  settings,       // All registered tabs (sorted by order)
+  selected,       // Currently selected tab
+  addSetting,     // Add a single setting tab
+  addSettings,    // Add multiple setting tabs
+  removeSetting,  // Remove a setting tab by name
+  setSelected,    // Set the selected tab
+  selectByName,   // Select a tab by name
+  selectByUrl,    // Select a tab by URL
+  clearSettings,  // Clear all registered settings
+} = useSettingManagement();
+```
+
+## Services
+
+### SettingManagementService
+
+Service class for managing setting tabs (singleton pattern).
+
+```tsx
+import { getSettingManagementService } from '@abpjs/setting-management';
+
+const service = getSettingManagementService();
+
+// Add a setting tab
+service.addSetting({
+  name: 'My Settings',
+  order: 10,
+  url: '/settings/my',
+});
+
+// Get all settings
+const allSettings = service.settings;
+
+// Subscribe to changes
+const unsubscribe = service.subscribe(() => {
+  console.log('Settings changed!');
+});
+```
+
+## Data Models
+
+### SettingTab
+
+The `SettingTab` interface is re-exported from `@abpjs/theme-shared`:
+
+```typescript
+import type { SettingTab } from '@abpjs/setting-management';
+
+interface SettingTab {
+  name: string;           // Display name of the tab
+  order: number;          // Sort order (lower = higher priority)
+  requiredPolicy?: string; // Required permission policy
+  url?: string;           // URL/route for this tab
+}
+```
+
+## Constants
+
+### SETTING_MANAGEMENT_ROUTES
+
+Default route configuration for the setting management module:
+
+```tsx
+import { SETTING_MANAGEMENT_ROUTES } from '@abpjs/setting-management';
+
+// Use in your router configuration
+const routes = [
+  ...SETTING_MANAGEMENT_ROUTES.routes,
+  // your other routes
+];
+```
+
+## Router Setup Example
+
+```tsx
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import { SettingLayout } from '@abpjs/setting-management';
+import AccountSettings from './AccountSettings';
+import IdentitySettings from './IdentitySettings';
+
+function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/settings" element={<SettingsPage />}>
+          <Route index element={<Navigate to="account" replace />} />
+          <Route path="account" element={<AccountSettings />} />
+          <Route path="identity" element={<IdentitySettings />} />
+        </Route>
+      </Routes>
+    </BrowserRouter>
+  );
+}
+
+function SettingsPage() {
+  const { addSettings } = useSettingManagement();
+
+  useEffect(() => {
+    addSettings([
+      { name: 'Account', order: 1, url: '/settings/account' },
+      { name: 'Identity', order: 2, url: '/settings/identity' },
+    ]);
+  }, [addSettings]);
+
+  return (
+    <SettingLayout>
+      <Outlet />
+    </SettingLayout>
+  );
+}
+```
+
+## 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 module (provides account settings)
+- [@abpjs/identity](https://www.npmjs.com/package/@abpjs/identity) - Identity management
+
+## 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/setting-management/overview)** | **[Report Issues](https://github.com/abpjs/abp-react/issues)** | **[View Source](https://github.com/abpjs/abp-react/tree/main/packages/setting-management)**

package/dist/index.d.mts

@@ -0,0 +1,191 @@
+import { SettingTab } from '@abpjs/theme-shared';
+export { SettingTab } from '@abpjs/theme-shared';
+import { ABP } from '@abpjs/core';
+import React from 'react';
+
+/**
+ * Setting Management Routes
+ * Translated from @abp/ng.setting-management v0.9.0
+ */
+
+/**
+ * Default routes for setting management module
+ */
+declare const SETTING_MANAGEMENT_ROUTES: {
+    routes: ABP.FullRoute[];
+};
+
+/**
+ * Setting Management Service
+ * Translated from @abp/ng.setting-management v0.9.0
+ */
+
+/**
+ * Service for managing settings tabs and selection.
+ * This service maintains the list of registered setting tabs
+ * and tracks the currently selected tab.
+ */
+declare class SettingManagementService {
+    private _settings;
+    private _selected;
+    private _subscribers;
+    /**
+     * Get all registered settings tabs sorted by order
+     */
+    get settings(): SettingTab[];
+    /**
+     * Get the currently selected setting tab
+     */
+    get selected(): SettingTab | null;
+    /**
+     * Register a new setting tab
+     * @param tab The setting tab to register
+     */
+    addSetting(tab: SettingTab): void;
+    /**
+     * Register multiple setting tabs at once
+     * @param tabs Array of setting tabs to register
+     */
+    addSettings(tabs: SettingTab[]): void;
+    /**
+     * Remove a setting tab by name
+     * @param name The name of the setting tab to remove
+     */
+    removeSetting(name: string): void;
+    /**
+     * Set the currently selected setting tab
+     * @param tab The tab to select (or null to clear selection)
+     */
+    setSelected(tab: SettingTab | null): void;
+    /**
+     * Select a setting tab by name
+     * @param name The name of the tab to select
+     */
+    selectByName(name: string): void;
+    /**
+     * Select a setting tab by URL
+     * @param url The URL of the tab to select
+     */
+    selectByUrl(url: string): void;
+    /**
+     * Clear all registered settings
+     */
+    clearSettings(): void;
+    /**
+     * Subscribe to changes in settings or selection
+     * @param callback Function to call when changes occur
+     * @returns Unsubscribe function
+     */
+    subscribe(callback: () => void): () => void;
+    private notifySubscribers;
+}
+/**
+ * Get the singleton instance of SettingManagementService
+ */
+declare function getSettingManagementService(): SettingManagementService;
+
+/**
+ * Return type for useSettingManagement hook
+ */
+interface UseSettingManagementReturn {
+    /** All registered setting tabs sorted by order */
+    settings: SettingTab[];
+    /** Currently selected setting tab */
+    selected: SettingTab | null;
+    /** Add a new setting tab */
+    addSetting: (tab: SettingTab) => void;
+    /** Add multiple setting tabs */
+    addSettings: (tabs: SettingTab[]) => void;
+    /** Remove a setting tab by name */
+    removeSetting: (name: string) => void;
+    /** Set the selected setting tab */
+    setSelected: (tab: SettingTab | null) => void;
+    /** Select a setting tab by name */
+    selectByName: (name: string) => void;
+    /** Select a setting tab by URL */
+    selectByUrl: (url: string) => void;
+    /** Clear all registered settings */
+    clearSettings: () => void;
+}
+/**
+ * Hook for managing settings tabs
+ *
+ * This hook provides access to the setting management service state
+ * and methods for managing setting tabs in a React application.
+ *
+ * @example
+ * ```tsx
+ * function SettingsPage() {
+ *   const {
+ *     settings,
+ *     selected,
+ *     setSelected,
+ *     addSetting,
+ *   } = useSettingManagement();
+ *
+ *   useEffect(() => {
+ *     addSetting({
+ *       name: 'My Settings',
+ *       order: 1,
+ *       url: '/settings/my',
+ *     });
+ *   }, []);
+ *
+ *   return (
+ *     <div>
+ *       {settings.map(tab => (
+ *         <button
+ *           key={tab.name}
+ *           onClick={() => setSelected(tab)}
+ *           className={selected?.name === tab.name ? 'active' : ''}
+ *         >
+ *           {tab.name}
+ *         </button>
+ *       ))}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useSettingManagement(): UseSettingManagementReturn;
+
+/**
+ * Setting Layout Component
+ * Translated from @abp/ng.setting-management v0.9.0
+ */
+
+interface SettingLayoutProps {
+    /** Optional children to render in the content area */
+    children?: React.ReactNode;
+    /** Optional callback when tab is selected */
+    onTabSelect?: (tab: SettingTab) => void;
+    /** Optional CSS class for the container */
+    className?: string;
+}
+/**
+ * Layout component for the settings management page.
+ * Displays a list of setting tabs on the left and content on the right.
+ *
+ * @example
+ * ```tsx
+ * function SettingsPage() {
+ *   const { addSettings } = useSettingManagement();
+ *
+ *   useEffect(() => {
+ *     addSettings([
+ *       { name: 'Account', order: 1, url: '/settings/account' },
+ *       { name: 'Tenant', order: 2, url: '/settings/tenant' },
+ *     ]);
+ *   }, []);
+ *
+ *   return (
+ *     <SettingLayout>
+ *       <Outlet />
+ *     </SettingLayout>
+ *   );
+ * }
+ * ```
+ */
+declare function SettingLayout({ children, onTabSelect, className, }: SettingLayoutProps): React.ReactElement;
+
+export { SETTING_MANAGEMENT_ROUTES, SettingLayout, type SettingLayoutProps, SettingManagementService, type UseSettingManagementReturn, getSettingManagementService, useSettingManagement };