@abpjs/theme-shared 0.8.0 → 1.0.0

package/dist/index.mjs

@@ -817,6 +817,7 @@ function LoaderBar({
 }
 
 // src/components/modal/Modal.tsx
+import React6 from "react";
 import {
   Dialog as Dialog2,
   Portal as Portal3,
@@ -846,9 +847,12 @@ function getSizeWidth(size) {
 function Modal({
   visible,
   onVisibleChange,
+  busy = false,
   size = "md",
   centered = true,
   modalClass,
+  height,
+  minHeight,
   header,
   children,
   footer,
@@ -858,9 +862,24 @@ function Modal({
   scrollBehavior = "inside",
   motionPreset = "scale",
   trapFocus = true,
-  preventScroll = true
+  preventScroll = true,
+  onInit
 }) {
+  const prevVisibleRef = React6.useRef(false);
+  const onInitRef = React6.useRef(onInit);
+  React6.useEffect(() => {
+    onInitRef.current = onInit;
+  }, [onInit]);
+  React6.useEffect(() => {
+    if (visible && !prevVisibleRef.current && onInitRef.current) {
+      onInitRef.current();
+    }
+    prevVisibleRef.current = visible;
+  }, [visible]);
   const handleOpenChange = (details) => {
+    if (busy && !details.open) {
+      return;
+    }
     onVisibleChange?.(details.open);
   };
   return /* @__PURE__ */ jsx7(
@@ -869,8 +888,8 @@ function Modal({
       open: visible,
       onOpenChange: handleOpenChange,
       placement: centered ? "center" : "top",
-      closeOnInteractOutside: closeOnOverlayClick,
-      closeOnEscape,
+      closeOnInteractOutside: closeOnOverlayClick && !busy,
+      closeOnEscape: closeOnEscape && !busy,
       scrollBehavior,
       motionPreset,
       trapFocus,
@@ -884,6 +903,8 @@ function Modal({
             width: getSizeWidth(size),
             maxWidth: size === "full" ? "100vw" : void 0,
             maxHeight: size === "full" ? "100vh" : void 0,
+            height,
+            minHeight,
             children: [
               (header || showCloseButton) && /* @__PURE__ */ jsxs4(Fragment, { children: [
                 /* @__PURE__ */ jsx7(Dialog2.Header, { children: /* @__PURE__ */ jsxs4(Flex3, { justify: "space-between", align: "center", width: "100%", children: [
@@ -1064,6 +1085,356 @@ function FormField({
   ] });
 }
 
+// src/components/change-password/ChangePassword.tsx
+import { useEffect as useEffect3 } from "react";
+import {
+  Button as Button5,
+  VStack as VStack2,
+  Input,
+  Field as Field2
+} from "@chakra-ui/react";
+import { useForm } from "react-hook-form";
+import { useLocalization as useLocalization3, useProfile } from "@abpjs/core";
+import { Check } from "lucide-react";
+import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+function ChangePassword({
+  visible,
+  onVisibleChange
+}) {
+  const { t } = useLocalization3();
+  const { changePassword } = useProfile();
+  const toaster = useToaster();
+  const {
+    register,
+    handleSubmit,
+    watch,
+    reset,
+    formState: { errors, isSubmitting }
+  } = useForm({
+    defaultValues: {
+      password: "",
+      newPassword: "",
+      repeatNewPassword: ""
+    }
+  });
+  const newPassword = watch("newPassword");
+  useEffect3(() => {
+    if (visible) {
+      reset();
+    }
+  }, [visible, reset]);
+  const onSubmit = async (data) => {
+    try {
+      await changePassword({
+        currentPassword: data.password,
+        newPassword: data.newPassword
+      });
+      toaster.success(
+        t("AbpIdentity::PasswordChangedMessage") || "Password changed successfully",
+        t("AbpUi::Success") || "Success"
+      );
+      onVisibleChange(false);
+    } catch (error) {
+      toaster.error(
+        error instanceof Error ? error.message : "An error occurred",
+        t("AbpIdentity::PasswordChangeFailed") || "Failed to change password"
+      );
+    }
+  };
+  const handleClose = () => {
+    if (!isSubmitting) {
+      onVisibleChange(false);
+    }
+  };
+  const passwordValidation = {
+    required: t("AbpIdentity::ThisFieldIsRequired") || "This field is required",
+    minLength: {
+      value: 6,
+      message: t("AbpIdentity::PasswordTooShort") || "Password must be at least 6 characters"
+    },
+    validate: {
+      hasLowercase: (value) => /[a-z]/.test(value) || t("AbpIdentity::PasswordRequiresLower") || "Password must contain a lowercase letter",
+      hasUppercase: (value) => /[A-Z]/.test(value) || t("AbpIdentity::PasswordRequiresUpper") || "Password must contain an uppercase letter",
+      hasNumber: (value) => /[0-9]/.test(value) || t("AbpIdentity::PasswordRequiresDigit") || "Password must contain a number",
+      hasSpecial: (value) => /[!@#$%^&*(),.?":{}|<>]/.test(value) || t("AbpIdentity::PasswordRequiresNonAlphanumeric") || "Password must contain a special character"
+    }
+  };
+  const modalFooter = /* @__PURE__ */ jsxs8(Fragment3, { children: [
+    /* @__PURE__ */ jsx12(Button5, { variant: "ghost", mr: 3, onClick: handleClose, disabled: isSubmitting, children: t("AbpIdentity::Cancel") || "Cancel" }),
+    /* @__PURE__ */ jsxs8(
+      Button5,
+      {
+        colorPalette: "blue",
+        type: "submit",
+        loading: isSubmitting,
+        form: "change-password-form",
+        children: [
+          /* @__PURE__ */ jsx12(Check, { size: 16 }),
+          t("AbpIdentity::Save") || "Save"
+        ]
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsx12(
+    Modal,
+    {
+      visible,
+      onVisibleChange,
+      busy: isSubmitting,
+      header: t("AbpIdentity::ChangePassword") || "Change Password",
+      footer: modalFooter,
+      centered: true,
+      children: /* @__PURE__ */ jsx12("form", { id: "change-password-form", onSubmit: handleSubmit(onSubmit), children: /* @__PURE__ */ jsxs8(VStack2, { gap: 4, children: [
+        /* @__PURE__ */ jsxs8(Field2.Root, { invalid: !!errors.password, children: [
+          /* @__PURE__ */ jsxs8(Field2.Label, { children: [
+            t("AbpIdentity::DisplayName:CurrentPassword") || "Current Password",
+            /* @__PURE__ */ jsx12(Field2.RequiredIndicator, {})
+          ] }),
+          /* @__PURE__ */ jsx12(
+            Input,
+            {
+              type: "password",
+              ...register("password", {
+                required: t("AbpIdentity::ThisFieldIsRequired") || "This field is required"
+              })
+            }
+          ),
+          /* @__PURE__ */ jsx12(Field2.ErrorText, { children: errors.password?.message })
+        ] }),
+        /* @__PURE__ */ jsxs8(Field2.Root, { invalid: !!errors.newPassword, children: [
+          /* @__PURE__ */ jsxs8(Field2.Label, { children: [
+            t("AbpIdentity::DisplayName:NewPassword") || "New Password",
+            /* @__PURE__ */ jsx12(Field2.RequiredIndicator, {})
+          ] }),
+          /* @__PURE__ */ jsx12(
+            Input,
+            {
+              type: "password",
+              ...register("newPassword", passwordValidation)
+            }
+          ),
+          /* @__PURE__ */ jsx12(Field2.ErrorText, { children: errors.newPassword?.message })
+        ] }),
+        /* @__PURE__ */ jsxs8(Field2.Root, { invalid: !!errors.repeatNewPassword, children: [
+          /* @__PURE__ */ jsxs8(Field2.Label, { children: [
+            t("AbpIdentity::DisplayName:NewPasswordConfirm") || "Confirm New Password",
+            /* @__PURE__ */ jsx12(Field2.RequiredIndicator, {})
+          ] }),
+          /* @__PURE__ */ jsx12(
+            Input,
+            {
+              type: "password",
+              ...register("repeatNewPassword", {
+                required: t("AbpIdentity::ThisFieldIsRequired") || "This field is required",
+                validate: (value) => value === newPassword || t("AbpIdentity::Identity.PasswordConfirmationFailed") || "Passwords do not match"
+              })
+            }
+          ),
+          /* @__PURE__ */ jsx12(Field2.ErrorText, { children: errors.repeatNewPassword?.message })
+        ] })
+      ] }) })
+    }
+  );
+}
+
+// src/components/profile/Profile.tsx
+import { useEffect as useEffect4 } from "react";
+import {
+  Button as Button6,
+  VStack as VStack3,
+  HStack,
+  Input as Input2,
+  Field as Field3
+} from "@chakra-ui/react";
+import { useForm as useForm2 } from "react-hook-form";
+import { useLocalization as useLocalization4, useProfile as useProfile2 } from "@abpjs/core";
+import { Check as Check2 } from "lucide-react";
+import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+function Profile({
+  visible,
+  onVisibleChange
+}) {
+  const { t } = useLocalization4();
+  const { profile, fetchProfile, updateProfile, loading } = useProfile2();
+  const toaster = useToaster();
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors, isSubmitting }
+  } = useForm2({
+    defaultValues: {
+      userName: "",
+      email: "",
+      name: "",
+      surname: "",
+      phoneNumber: ""
+    }
+  });
+  const modalBusy = isSubmitting || loading;
+  useEffect4(() => {
+    if (visible) {
+      fetchProfile().then(() => {
+      });
+    }
+  }, [visible, fetchProfile]);
+  useEffect4(() => {
+    if (profile) {
+      reset({
+        userName: profile.userName || "",
+        email: profile.email || "",
+        name: profile.name || "",
+        surname: profile.surname || "",
+        phoneNumber: profile.phoneNumber || ""
+      });
+    }
+  }, [profile, reset]);
+  const onSubmit = async (data) => {
+    try {
+      await updateProfile(data);
+      toaster.success(
+        t("AbpIdentity::ProfileUpdatedMessage") || "Profile updated successfully",
+        t("AbpUi::Success") || "Success"
+      );
+      onVisibleChange(false);
+    } catch (error) {
+      toaster.error(
+        error instanceof Error ? error.message : "An error occurred",
+        t("AbpIdentity::ProfileUpdateFailed") || "Failed to update profile"
+      );
+    }
+  };
+  const handleClose = () => {
+    if (!modalBusy) {
+      onVisibleChange(false);
+    }
+  };
+  const modalFooter = /* @__PURE__ */ jsxs9(Fragment4, { children: [
+    /* @__PURE__ */ jsx13(Button6, { variant: "ghost", mr: 3, onClick: handleClose, disabled: modalBusy, children: t("AbpIdentity::Cancel") || "Cancel" }),
+    /* @__PURE__ */ jsxs9(
+      Button6,
+      {
+        colorPalette: "blue",
+        type: "submit",
+        loading: modalBusy,
+        form: "profile-form",
+        children: [
+          /* @__PURE__ */ jsx13(Check2, { size: 16 }),
+          t("AbpIdentity::Save") || "Save"
+        ]
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsx13(
+    Modal,
+    {
+      visible,
+      onVisibleChange,
+      busy: modalBusy,
+      header: t("AbpIdentity::PersonalInfo") || "Personal Info",
+      footer: modalFooter,
+      size: "lg",
+      centered: true,
+      children: /* @__PURE__ */ jsx13("form", { id: "profile-form", onSubmit: handleSubmit(onSubmit), children: /* @__PURE__ */ jsxs9(VStack3, { gap: 4, children: [
+        /* @__PURE__ */ jsxs9(Field3.Root, { invalid: !!errors.userName, children: [
+          /* @__PURE__ */ jsxs9(Field3.Label, { children: [
+            t("AbpIdentity::DisplayName:UserName") || "Username",
+            /* @__PURE__ */ jsx13(Field3.RequiredIndicator, {})
+          ] }),
+          /* @__PURE__ */ jsx13(
+            Input2,
+            {
+              type: "text",
+              ...register("userName", {
+                required: t("AbpIdentity::ThisFieldIsRequired") || "This field is required",
+                maxLength: {
+                  value: 256,
+                  message: "Maximum 256 characters"
+                }
+              })
+            }
+          ),
+          /* @__PURE__ */ jsx13(Field3.ErrorText, { children: errors.userName?.message })
+        ] }),
+        /* @__PURE__ */ jsxs9(HStack, { gap: 4, w: "full", children: [
+          /* @__PURE__ */ jsxs9(Field3.Root, { invalid: !!errors.name, flex: 1, children: [
+            /* @__PURE__ */ jsx13(Field3.Label, { children: t("AbpIdentity::DisplayName:Name") || "Name" }),
+            /* @__PURE__ */ jsx13(
+              Input2,
+              {
+                type: "text",
+                ...register("name", {
+                  maxLength: {
+                    value: 64,
+                    message: "Maximum 64 characters"
+                  }
+                })
+              }
+            ),
+            /* @__PURE__ */ jsx13(Field3.ErrorText, { children: errors.name?.message })
+          ] }),
+          /* @__PURE__ */ jsxs9(Field3.Root, { invalid: !!errors.surname, flex: 1, children: [
+            /* @__PURE__ */ jsx13(Field3.Label, { children: t("AbpIdentity::DisplayName:Surname") || "Surname" }),
+            /* @__PURE__ */ jsx13(
+              Input2,
+              {
+                type: "text",
+                ...register("surname", {
+                  maxLength: {
+                    value: 64,
+                    message: "Maximum 64 characters"
+                  }
+                })
+              }
+            ),
+            /* @__PURE__ */ jsx13(Field3.ErrorText, { children: errors.surname?.message })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs9(Field3.Root, { invalid: !!errors.email, children: [
+          /* @__PURE__ */ jsxs9(Field3.Label, { children: [
+            t("AbpIdentity::DisplayName:EmailAddress") || "Email Address",
+            /* @__PURE__ */ jsx13(Field3.RequiredIndicator, {})
+          ] }),
+          /* @__PURE__ */ jsx13(
+            Input2,
+            {
+              type: "email",
+              ...register("email", {
+                required: t("AbpIdentity::ThisFieldIsRequired") || "This field is required",
+                pattern: {
+                  value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+                  message: t("AbpIdentity::InvalidEmail") || "Invalid email address"
+                },
+                maxLength: {
+                  value: 256,
+                  message: "Maximum 256 characters"
+                }
+              })
+            }
+          ),
+          /* @__PURE__ */ jsx13(Field3.ErrorText, { children: errors.email?.message })
+        ] }),
+        /* @__PURE__ */ jsxs9(Field3.Root, { invalid: !!errors.phoneNumber, children: [
+          /* @__PURE__ */ jsx13(Field3.Label, { children: t("AbpIdentity::DisplayName:PhoneNumber") || "Phone Number" }),
+          /* @__PURE__ */ jsx13(
+            Input2,
+            {
+              type: "tel",
+              ...register("phoneNumber", {
+                maxLength: {
+                  value: 16,
+                  message: "Maximum 16 characters"
+                }
+              })
+            }
+          ),
+          /* @__PURE__ */ jsx13(Field3.ErrorText, { children: errors.phoneNumber?.message })
+        ] })
+      ] }) })
+    }
+  );
+}
+
 // src/providers/ThemeSharedProvider.tsx
 import { ChakraProvider, LocaleProvider } from "@chakra-ui/react";
 
@@ -1302,11 +1673,11 @@ var abpSystem = createAbpSystem();
 // src/components/ui/color-mode.tsx
 import { ClientOnly, IconButton, Skeleton, Span } from "@chakra-ui/react";
 import { ThemeProvider, useTheme } from "next-themes";
-import * as React8 from "react";
+import * as React11 from "react";
 import { Moon, Sun } from "lucide-react";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 function ColorModeProvider(props) {
-  return /* @__PURE__ */ jsx12(ThemeProvider, { attribute: "class", disableTransitionOnChange: true, ...props });
+  return /* @__PURE__ */ jsx14(ThemeProvider, { attribute: "class", disableTransitionOnChange: true, ...props });
 }
 function useColorMode() {
   const { resolvedTheme, setTheme, forcedTheme } = useTheme();
@@ -1322,11 +1693,11 @@ function useColorMode() {
 }
 function ColorModeIcon() {
   const { colorMode } = useColorMode();
-  return colorMode === "dark" ? /* @__PURE__ */ jsx12(Moon, {}) : /* @__PURE__ */ jsx12(Sun, {});
+  return colorMode === "dark" ? /* @__PURE__ */ jsx14(Moon, {}) : /* @__PURE__ */ jsx14(Sun, {});
 }
-var ColorModeButton = React8.forwardRef(function ColorModeButton2(props, ref) {
+var ColorModeButton = React11.forwardRef(function ColorModeButton2(props, ref) {
   const { toggleColorMode } = useColorMode();
-  return /* @__PURE__ */ jsx12(ClientOnly, { fallback: /* @__PURE__ */ jsx12(Skeleton, { boxSize: "9" }), children: /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx14(ClientOnly, { fallback: /* @__PURE__ */ jsx14(Skeleton, { boxSize: "9" }), children: /* @__PURE__ */ jsx14(
     IconButton,
     {
       onClick: toggleColorMode,
@@ -1341,13 +1712,13 @@ var ColorModeButton = React8.forwardRef(function ColorModeButton2(props, ref) {
           height: "5"
         }
       },
-      children: /* @__PURE__ */ jsx12(ColorModeIcon, {})
+      children: /* @__PURE__ */ jsx14(ColorModeIcon, {})
     }
   ) });
 });
-var LightMode = React8.forwardRef(
+var LightMode = React11.forwardRef(
   function LightMode2(props, ref) {
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx14(
       Span,
       {
         color: "fg",
@@ -1361,9 +1732,9 @@ var LightMode = React8.forwardRef(
     );
   }
 );
-var DarkMode = React8.forwardRef(
+var DarkMode = React11.forwardRef(
   function DarkMode2(props, ref) {
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx14(
       Span,
       {
         color: "fg",
@@ -1380,7 +1751,7 @@ var DarkMode = React8.forwardRef(
 
 // src/providers/ThemeSharedProvider.tsx
 import { useDirection } from "@abpjs/core";
-import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 function ThemeSharedProvider({
   children,
   renderToasts = true,
@@ -1394,13 +1765,13 @@ function ThemeSharedProvider({
   const system = themeOverrides ? createAbpSystem(themeOverrides) : abpSystem;
   const { endSide } = useDirection();
   toastPosition = `bottom-${endSide}`;
-  const content = /* @__PURE__ */ jsx13(ToasterProvider, { children: /* @__PURE__ */ jsxs8(ConfirmationProvider, { children: [
+  const content = /* @__PURE__ */ jsx15(ToasterProvider, { children: /* @__PURE__ */ jsxs10(ConfirmationProvider, { children: [
     children,
-    renderToasts && /* @__PURE__ */ jsx13(ToastContainer, { position: toastPosition }),
-    renderConfirmation && /* @__PURE__ */ jsx13(ConfirmationDialog, {})
+    renderToasts && /* @__PURE__ */ jsx15(ToastContainer, { position: toastPosition }),
+    renderConfirmation && /* @__PURE__ */ jsx15(ConfirmationDialog, {})
   ] }) });
   const colorModeProps = enableColorMode ? { defaultTheme: defaultColorMode } : { forcedTheme: "light" };
-  return /* @__PURE__ */ jsx13(ChakraProvider, { value: system, children: /* @__PURE__ */ jsx13(LocaleProvider, { locale, children: /* @__PURE__ */ jsx13(ColorModeProvider, { ...colorModeProps, children: content }) }) });
+  return /* @__PURE__ */ jsx15(ChakraProvider, { value: system, children: /* @__PURE__ */ jsx15(LocaleProvider, { locale, children: /* @__PURE__ */ jsx15(ColorModeProvider, { ...colorModeProps, children: content }) }) });
 }
 
 // src/utils/styles.ts
@@ -1480,6 +1851,7 @@ export {
   Alert,
   Button3 as Button,
   Dialog2 as ChakraDialog,
+  ChangePassword,
   Checkbox,
   ConfirmationDialog,
   ConfirmationProvider,
@@ -1491,6 +1863,7 @@ export {
   AbpModalBody as ModalBody,
   AbpModalFooter as ModalFooter,
   AbpModalHeader as ModalHeader,
+  Profile,
   THEME_SHARED_STYLES,
   ThemeSharedProvider,
   ToastContainer,

package/dist/models/index.d.ts

@@ -1,2 +1,4 @@
 export * from './toaster';
 export * from './confirmation';
+export * from './setting-management';
+export * from './statistics';

package/dist/models/setting-management.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Setting management models for theme-shared
+ * Translated from @abp/ng.theme.shared v0.9.0
+ */
+/**
+ * Represents a settings tab in the settings management UI.
+ */
+export interface SettingTab {
+    /** Display name of the tab */
+    name: string;
+    /** Order/priority for tab sorting */
+    order: number;
+    /** Required policy to view this tab */
+    requiredPolicy?: string;
+    /** URL/route for this settings tab */
+    url?: string;
+}

package/dist/models/statistics.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Statistics models for theme-shared
+ * Translated from @abp/ng.theme.shared v0.9.0
+ */
+export declare namespace Statistics {
+    /**
+     * Response from statistics API
+     */
+    interface Response {
+        data: Data;
+    }
+    /**
+     * Statistics data - key-value pairs of metric names and values
+     */
+    interface Data {
+        [key: string]: number;
+    }
+    /**
+     * Filter for statistics queries
+     */
+    interface Filter {
+        startDate: string | Date;
+        endDate: string | Date;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abpjs/theme-shared",
-  "version": "0.8.0",
+  "version": "1.0.0",
   "description": "ABP Framework Theme Shared components for React - translated from @abp/ng.theme.shared",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -25,11 +25,13 @@
     "@emotion/react": "^11.11.0",
     "lucide-react": "^0.400.0",
     "next-themes": "^0.4.6",
+    "react-hook-form": "^7.48.0",
     "react-icons": "^5.5.0",
-    "@abpjs/core": "0.8.0"
+    "@abpjs/core": "1.0.0"
   },
   "devDependencies": {
-    "@abp/ng.theme.shared": "0.8.0"
+    "@abp/ng.theme.shared": "1.0.0",
+    "@vitest/coverage-v8": "^1.6.1"
   },
   "author": "tekthar.com",
   "license": "LGPL-3.0",
@@ -52,6 +54,7 @@
     "format": "prettier --write \"src/**/*.{ts,tsx,json,md}\"",
     "format:check": "prettier --check \"src/**/*.{ts,tsx,json,md}\"",
     "type-check": "tsc --noEmit",
-    "test": "vitest"
+    "test": "vitest run",
+    "test:watch": "vitest"
   }
 }