@abpjs/theme-shared 2.4.0 → 2.7.0

package/dist/models/common.d.ts

@@ -2,6 +2,7 @@
  * Common types for theme-shared module.
  * Translated from @abp/ng.theme.shared/lib/models/common.ts
  * @since 1.1.0
+ * @since 2.7.0 - Added skipHandledErrorCodes, simplified forWhichErrors type
  */
 import type { ComponentType } from 'react';
 /**
@@ -19,8 +20,15 @@ export type ErrorScreenErrorCodes = 401 | 403 | 404 | 500;
 /**
  * Configuration for HTTP error handling.
  * @since 1.1.0
+ * @since 2.7.0 - Added skipHandledErrorCodes, simplified forWhichErrors to array
  */
 export interface HttpErrorConfig {
+    /**
+     * Error codes to skip handling (let them pass through).
+     * Can be either ErrorScreenErrorCodes or any number.
+     * @since 2.7.0
+     */
+    skipHandledErrorCodes?: ErrorScreenErrorCodes[] | number[];
     /**
      * Custom error screen configuration.
      */
@@ -32,8 +40,9 @@ export interface HttpErrorConfig {
         /**
          * Which error codes to show the custom component for.
          * Defaults to all error codes if not specified.
+         * @since 2.7.0 - Simplified to just an array of ErrorScreenErrorCodes
          */
-        forWhichErrors?: [ErrorScreenErrorCodes] | [ErrorScreenErrorCodes, ErrorScreenErrorCodes] | [ErrorScreenErrorCodes, ErrorScreenErrorCodes, ErrorScreenErrorCodes] | [ErrorScreenErrorCodes, ErrorScreenErrorCodes, ErrorScreenErrorCodes, ErrorScreenErrorCodes];
+        forWhichErrors?: ErrorScreenErrorCodes[];
         /**
          * Whether to hide the close icon on the error screen.
          */

package/dist/tokens/append-content.token.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Append content token.
+ * Re-exported from constants for consistency with Angular API.
+ *
+ * @since 2.7.0
+ */
+export { ThemeSharedAppendContentContext, THEME_SHARED_APPEND_CONTENT, } from '../constants/append-content';

package/dist/tokens/http-error.token.d.ts

@@ -0,0 +1,70 @@
+/**
+ * HTTP Error configuration tokens.
+ * Translated from @abp/ng.theme.shared/lib/tokens/http-error.token.ts
+ *
+ * @since 2.7.0
+ */
+import type { HttpErrorConfig } from '../models/common';
+/**
+ * Token name constant for HTTP_ERROR_CONFIG.
+ * Matches the Angular InjectionToken name.
+ *
+ * @since 2.7.0
+ */
+export declare const HTTP_ERROR_CONFIG = "HTTP_ERROR_CONFIG";
+/**
+ * Context for HTTP error configuration.
+ * Use this to provide custom HTTP error handling configuration.
+ *
+ * This is the React equivalent of Angular's HTTP_ERROR_CONFIG InjectionToken.
+ *
+ * @since 2.7.0
+ *
+ * @example
+ * ```tsx
+ * import { HttpErrorConfigContext } from '@abpjs/theme-shared';
+ *
+ * function App() {
+ *   const httpErrorConfig: HttpErrorConfig = {
+ *     skipHandledErrorCodes: [404],
+ *     errorScreen: {
+ *       component: MyCustomErrorComponent,
+ *       forWhichErrors: [401, 403, 500],
+ *     },
+ *   };
+ *
+ *   return (
+ *     <HttpErrorConfigContext.Provider value={httpErrorConfig}>
+ *       <YourApp />
+ *     </HttpErrorConfigContext.Provider>
+ *   );
+ * }
+ * ```
+ */
+export declare const HttpErrorConfigContext: import("react").Context<HttpErrorConfig | undefined>;
+/**
+ * Factory function to create default HTTP error config.
+ * Matches Angular's httpErrorConfigFactory function.
+ *
+ * @returns Default HttpErrorConfig
+ * @since 2.7.0
+ */
+export declare function httpErrorConfigFactory(): HttpErrorConfig;
+/**
+ * Hook to access the HTTP error configuration.
+ *
+ * @returns HttpErrorConfig or default config if not provided
+ * @since 2.7.0
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const config = useHttpErrorConfig();
+ *
+ *   if (config.skipHandledErrorCodes?.includes(404)) {
+ *     // Skip handling 404 errors
+ *   }
+ * }
+ * ```
+ */
+export declare function useHttpErrorConfig(): HttpErrorConfig;

package/dist/tokens/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Theme shared tokens.
+ * Translated from @abp/ng.theme.shared/lib/tokens
+ *
+ * @since 2.7.0
+ */
+export * from './append-content.token';
+export * from './http-error.token';

package/dist/utils/index.d.ts

@@ -1 +1,2 @@
 export * from './styles';
+export * from './validation-utils';

package/dist/utils/validation-utils.d.ts

@@ -0,0 +1,125 @@
+/**
+ * Validation utility functions for form validation.
+ * Translated from @abp/ng.theme.shared/lib/utils/validation-utils.ts
+ *
+ * @since 2.7.0
+ */
+import type { RegisterOptions } from 'react-hook-form';
+/**
+ * Password validation settings from ABP configuration.
+ * These values come from Identity.Settings.Password in the ABP framework.
+ * @since 2.7.0
+ */
+export interface PasswordSettings {
+    /** Minimum required length for passwords */
+    requiredLength?: number;
+    /** Maximum allowed length for passwords */
+    maxLength?: number;
+    /** Whether passwords must contain at least one digit */
+    requireDigit?: boolean;
+    /** Whether passwords must contain at least one lowercase letter */
+    requireLowercase?: boolean;
+    /** Whether passwords must contain at least one uppercase letter */
+    requireUppercase?: boolean;
+    /** Whether passwords must contain at least one non-alphanumeric character */
+    requireNonAlphanumeric?: boolean;
+    /** Number of unique characters required */
+    requiredUniqueChars?: number;
+}
+/**
+ * Password validator function type for custom validation.
+ * Returns true if valid, or an error message string if invalid.
+ * @since 2.7.0
+ */
+export type PasswordValidator = (value: string) => true | string;
+/**
+ * Store-like interface for accessing ABP settings.
+ * This matches the pattern used by @abpjs/core's useAbpConfig hook.
+ * @since 2.7.0
+ */
+export interface SettingsStore {
+    getSetting: (key: string) => string | undefined;
+}
+/**
+ * Default password setting keys in ABP Identity module.
+ * @since 2.7.0
+ */
+export declare const PASSWORD_SETTING_KEYS: {
+    readonly requiredLength: "Abp.Identity.Password.RequiredLength";
+    readonly maxLength: "Abp.Identity.Password.MaxLength";
+    readonly requireDigit: "Abp.Identity.Password.RequireDigit";
+    readonly requireLowercase: "Abp.Identity.Password.RequireLowercase";
+    readonly requireUppercase: "Abp.Identity.Password.RequireUppercase";
+    readonly requireNonAlphanumeric: "Abp.Identity.Password.RequireNonAlphanumeric";
+    readonly requiredUniqueChars: "Abp.Identity.Password.RequiredUniqueChars";
+};
+/**
+ * Get password settings from the store.
+ * @param store - The settings store (typically from useAbpConfig hook)
+ * @returns Password settings object
+ * @since 2.7.0
+ */
+export declare function getPasswordSettings(store: SettingsStore): PasswordSettings;
+/**
+ * Get password validators based on ABP Identity settings.
+ *
+ * This is the React equivalent of Angular's getPasswordValidators function.
+ * It reads password requirements from ABP settings and returns validation functions
+ * compatible with react-hook-form's validate option.
+ *
+ * @param store - The settings store (typically from useAbpConfig hook)
+ * @returns Array of validator functions for password validation
+ *
+ * @since 2.7.0
+ *
+ * @example
+ * ```tsx
+ * import { useAbpConfig } from '@abpjs/core';
+ * import { getPasswordValidators } from '@abpjs/theme-shared';
+ * import { useForm } from 'react-hook-form';
+ *
+ * function PasswordForm() {
+ *   const { getSetting } = useAbpConfig();
+ *   const validators = getPasswordValidators({ getSetting });
+ *
+ *   const { register } = useForm();
+ *
+ *   return (
+ *     <input
+ *       {...register('password', {
+ *         validate: Object.fromEntries(
+ *           validators.map((v, i) => [`rule${i}`, v])
+ *         )
+ *       })}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export declare function getPasswordValidators(store: SettingsStore): PasswordValidator[];
+/**
+ * Convert password validators to react-hook-form RegisterOptions.
+ * This is a convenience function to create validation rules for react-hook-form.
+ *
+ * @param store - The settings store (typically from useAbpConfig hook)
+ * @returns RegisterOptions with validate rules for react-hook-form
+ *
+ * @since 2.7.0
+ *
+ * @example
+ * ```tsx
+ * import { useAbpConfig } from '@abpjs/core';
+ * import { getPasswordValidationRules } from '@abpjs/theme-shared';
+ * import { useForm } from 'react-hook-form';
+ *
+ * function PasswordForm() {
+ *   const { getSetting } = useAbpConfig();
+ *   const { register } = useForm();
+ *
+ *   return (
+ *     <input {...register('password', getPasswordValidationRules({ getSetting }))} />
+ *   );
+ * }
+ * ```
+ */
+export declare function getPasswordValidationRules(store: SettingsStore): RegisterOptions;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abpjs/theme-shared",
-  "version": "2.4.0",
+  "version": "2.7.0",
   "description": "ABP Framework Theme Shared components for React - translated from @abp/ng.theme.shared",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -27,10 +27,10 @@
     "next-themes": "^0.4.6",
     "react-hook-form": "^7.48.0",
     "react-icons": "^5.5.0",
-    "@abpjs/core": "2.4.0"
+    "@abpjs/core": "2.7.0"
   },
   "devDependencies": {
-    "@abp/ng.theme.shared": "2.4.0",
+    "@abp/ng.theme.shared": "2.7.0",
     "@vitest/coverage-v8": "^3.2.0"
   },
   "author": "tekthar.com",