@abpjs/setting-management 0.9.0

package/dist/index.mjs

@@ -0,0 +1,287 @@
+// src/constants/routes.ts
+var SETTING_MANAGEMENT_ROUTES = {
+  routes: [
+    {
+      name: "Settings",
+      path: "setting-management",
+      layout: "application",
+      order: 100
+    }
+  ]
+};
+
+// src/services/setting-management.service.ts
+var SettingManagementService = class {
+  constructor() {
+    this._settings = [];
+    this._selected = null;
+    this._subscribers = /* @__PURE__ */ new Set();
+  }
+  /**
+   * Get all registered settings tabs sorted by order
+   */
+  get settings() {
+    return [...this._settings].sort((a, b) => a.order - b.order);
+  }
+  /**
+   * Get the currently selected setting tab
+   */
+  get selected() {
+    return this._selected;
+  }
+  /**
+   * Register a new setting tab
+   * @param tab The setting tab to register
+   */
+  addSetting(tab) {
+    const exists = this._settings.some((s) => s.name === tab.name);
+    if (!exists) {
+      this._settings.push(tab);
+      this.notifySubscribers();
+    }
+  }
+  /**
+   * Register multiple setting tabs at once
+   * @param tabs Array of setting tabs to register
+   */
+  addSettings(tabs) {
+    let changed = false;
+    for (const tab of tabs) {
+      const exists = this._settings.some((s) => s.name === tab.name);
+      if (!exists) {
+        this._settings.push(tab);
+        changed = true;
+      }
+    }
+    if (changed) {
+      this.notifySubscribers();
+    }
+  }
+  /**
+   * Remove a setting tab by name
+   * @param name The name of the setting tab to remove
+   */
+  removeSetting(name) {
+    const index = this._settings.findIndex((s) => s.name === name);
+    if (index !== -1) {
+      this._settings.splice(index, 1);
+      if (this._selected?.name === name) {
+        this._selected = null;
+      }
+      this.notifySubscribers();
+    }
+  }
+  /**
+   * Set the currently selected setting tab
+   * @param tab The tab to select (or null to clear selection)
+   */
+  setSelected(tab) {
+    this._selected = tab;
+    this.notifySubscribers();
+  }
+  /**
+   * Select a setting tab by name
+   * @param name The name of the tab to select
+   */
+  selectByName(name) {
+    const tab = this._settings.find((s) => s.name === name);
+    if (tab) {
+      this.setSelected(tab);
+    }
+  }
+  /**
+   * Select a setting tab by URL
+   * @param url The URL of the tab to select
+   */
+  selectByUrl(url) {
+    const tab = this._settings.find((s) => s.url === url);
+    if (tab) {
+      this.setSelected(tab);
+    }
+  }
+  /**
+   * Clear all registered settings
+   */
+  clearSettings() {
+    this._settings = [];
+    this._selected = null;
+    this.notifySubscribers();
+  }
+  /**
+   * Subscribe to changes in settings or selection
+   * @param callback Function to call when changes occur
+   * @returns Unsubscribe function
+   */
+  subscribe(callback) {
+    this._subscribers.add(callback);
+    return () => {
+      this._subscribers.delete(callback);
+    };
+  }
+  notifySubscribers() {
+    this._subscribers.forEach((callback) => callback());
+  }
+};
+var _instance = null;
+function getSettingManagementService() {
+  if (!_instance) {
+    _instance = new SettingManagementService();
+  }
+  return _instance;
+}
+
+// src/hooks/useSettingManagement.ts
+import { useState, useEffect, useCallback, useMemo } from "react";
+function useSettingManagement() {
+  const service = useMemo(() => getSettingManagementService(), []);
+  const [, forceUpdate] = useState({});
+  useEffect(() => {
+    const unsubscribe = service.subscribe(() => {
+      forceUpdate({});
+    });
+    return unsubscribe;
+  }, [service]);
+  const addSetting = useCallback(
+    (tab) => {
+      service.addSetting(tab);
+    },
+    [service]
+  );
+  const addSettings = useCallback(
+    (tabs) => {
+      service.addSettings(tabs);
+    },
+    [service]
+  );
+  const removeSetting = useCallback(
+    (name) => {
+      service.removeSetting(name);
+    },
+    [service]
+  );
+  const setSelected = useCallback(
+    (tab) => {
+      service.setSelected(tab);
+    },
+    [service]
+  );
+  const selectByName = useCallback(
+    (name) => {
+      service.selectByName(name);
+    },
+    [service]
+  );
+  const selectByUrl = useCallback(
+    (url) => {
+      service.selectByUrl(url);
+    },
+    [service]
+  );
+  const clearSettings = useCallback(() => {
+    service.clearSettings();
+  }, [service]);
+  return {
+    settings: service.settings,
+    selected: service.selected,
+    addSetting,
+    addSettings,
+    removeSetting,
+    setSelected,
+    selectByName,
+    selectByUrl,
+    clearSettings
+  };
+}
+
+// src/components/SettingLayout/SettingLayout.tsx
+import { useEffect as useEffect2 } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SettingLayout({
+  children,
+  onTabSelect,
+  className = ""
+}) {
+  const { settings, selected, setSelected } = useSettingManagement();
+  const location = useLocation();
+  const navigate = useNavigate();
+  useEffect2(() => {
+    if (settings.length > 0) {
+      const matchingTab = settings.find((tab) => tab.url && location.pathname.startsWith(tab.url));
+      if (matchingTab) {
+        setSelected(matchingTab);
+      } else if (!selected && settings.length > 0) {
+        setSelected(settings[0]);
+      }
+    }
+  }, [location.pathname, settings, selected, setSelected]);
+  const handleTabClick = (tab) => {
+    setSelected(tab);
+    onTabSelect?.(tab);
+    if (tab.url) {
+      navigate(tab.url);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `setting-layout ${className}`, style: styles.container, children: [
+    /* @__PURE__ */ jsx("div", { className: "setting-layout-sidebar", style: styles.sidebar, children: /* @__PURE__ */ jsx("nav", { className: "setting-tabs", style: styles.nav, children: settings.map((tab) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => handleTabClick(tab),
+        className: `setting-tab ${selected?.name === tab.name ? "active" : ""}`,
+        style: {
+          ...styles.tabButton,
+          ...selected?.name === tab.name ? styles.tabButtonActive : {}
+        },
+        children: tab.name
+      },
+      tab.name
+    )) }) }),
+    /* @__PURE__ */ jsx("div", { className: "setting-layout-content", style: styles.content, children })
+  ] });
+}
+var styles = {
+  container: {
+    display: "flex",
+    minHeight: "400px",
+    gap: "24px"
+  },
+  sidebar: {
+    width: "240px",
+    flexShrink: 0
+  },
+  nav: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "4px"
+  },
+  tabButton: {
+    display: "block",
+    width: "100%",
+    padding: "12px 16px",
+    textAlign: "left",
+    border: "none",
+    borderRadius: "6px",
+    background: "transparent",
+    cursor: "pointer",
+    fontSize: "14px",
+    color: "inherit",
+    transition: "background-color 0.2s"
+  },
+  tabButtonActive: {
+    backgroundColor: "rgba(59, 130, 246, 0.1)",
+    color: "#3b82f6",
+    fontWeight: 500
+  },
+  content: {
+    flex: 1,
+    minWidth: 0
+  }
+};
+export {
+  SETTING_MANAGEMENT_ROUTES,
+  SettingLayout,
+  SettingManagementService,
+  getSettingManagementService,
+  useSettingManagement
+};

package/package.json

@@ -0,0 +1,86 @@
+{
+  "name": "@abpjs/setting-management",
+  "version": "0.9.0",
+  "description": "ABP Framework setting-management components for React - translated from @abp/ng.setting-management",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "keywords": [
+    "abp",
+    "react",
+    "framework",
+    "setting-management"
+  ],
+  "dependencies": {
+    "@chakra-ui/react": "^3.2.0",
+    "@emotion/react": "^11.11.0",
+    "@abpjs/core": "0.9.0",
+    "@abpjs/theme-shared": "0.9.0",
+    "@abpjs/permission-management": "0.9.0"
+  },
+  "devDependencies": {
+    "@abp/ng.setting-management": "0.9.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "autoprefixer": "^10.4.16",
+    "eslint": "^8.0.0",
+    "eslint-config-prettier": "^9.1.2",
+    "eslint-plugin-react": "^7.0.0",
+    "eslint-plugin-react-hooks": "^4.0.0",
+    "jsdom": "^24.0.0",
+    "postcss": "^8.4.32",
+    "prettier": "^3.7.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.20.0",
+    "tailwindcss": "^3.4.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "vitest": "^1.0.0",
+    "@vitest/coverage-v8": "^1.0.0"
+  },
+  "author": "tekthar.com",
+  "license": "LGPL-3.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/abpjs/abp-react"
+  },
+  "homepage": "https://docs.abpjs.io/docs/packages/setting-management/overview",
+  "bugs": {
+    "url": "https://github.com/abpjs/abp-react/issues"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0",
+    "react-router-dom": ">=6.0.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup src/index.ts --format cjs,esm --watch",
+    "lint": "eslint src",
+    "lint:fix": "eslint src --fix",
+    "format": "prettier --write \"src/**/*.{ts,tsx,json,md}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx,json,md}\"",
+    "type-check": "tsc --noEmit",
+    "test": "vitest"
+  }
+}