@next-feature/client 0.1.0-MIGRATION.22.0.3

package/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

package/README.md

@@ -0,0 +1,7 @@
+# client
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test client` to execute the unit tests via [Vitest](https://vitest.dev/).

package/eslint.config.mjs

@@ -0,0 +1,12 @@
+import nx from '@nx/eslint-plugin';
+import baseConfig from '../../eslint.config.mjs';
+
+export default [
+  ...baseConfig,
+  ...nx.configs['flat/react'],
+  {
+    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
+    // Override or add rules here
+    rules: {},
+  },
+];

package/jest.config.ts

@@ -0,0 +1,10 @@
+export default {
+  displayName: 'client',
+  preset: '../../jest.preset.js',
+  transform: {
+    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nx/react/plugins/jest',
+    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/react/babel'] }],
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  coverageDirectory: '../../coverage/clients/client',
+};

package/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@next-feature/client",
+  "version": "0.1.0-MIGRATION.22.0.3",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.js"
+    }
+  }
+}

package/project.json

@@ -0,0 +1,32 @@
+{
+  "name": "client",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "clients/client/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "@nx/vite:build",
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "production",
+      "options": {
+        "outputPath": "dist/clients/client"
+      },
+      "configurations": {
+        "development": {
+          "mode": "development"
+        },
+        "production": {
+          "mode": "production"
+        }
+      }
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "clients/client/jest.config.ts"
+      }
+    }
+  }
+}

package/src/components/api-error-boundary.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+import { ApiError } from '../lib/error';
+import { getErrorMessage } from '../lib/utils/error';
+
+interface Props {
+  children: ReactNode;
+  fallback?: (error: ApiError) => ReactNode;
+  onError?: (error: Error, errorInfo: ErrorInfo) => void;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class ApiErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error('ApiErrorBoundary caught error:', error, errorInfo);
+
+    if (this.props.onError) {
+      this.props.onError(error, errorInfo);
+    }
+  }
+
+  render() {
+    if (this.state.hasError && this.state.error) {
+      if (this.state.error instanceof ApiError && this.props.fallback) {
+        return this.props.fallback(this.state.error);
+      }
+
+      // Default error UI
+      return (
+        <div className="error-container">
+          <h2>Something went wrong</h2>
+          <p>{getErrorMessage(this.state.error)}</p>
+          <button
+            onClick={() => this.setState({ hasError: false, error: null })}
+          >
+            Try again
+          </button>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

package/src/hooks/use-api-error.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { useState, useCallback } from 'react';
+import { ApiError } from '../lib/error';
+import { getErrorMessage } from '../lib/utils/error';
+
+interface UseApiErrorResult {
+  error: ApiError | null;
+  setError: (error: ApiError | null) => void;
+  clearError: () => void;
+  handleError: (error: unknown) => void;
+  errorMessage: string | null;
+}
+
+export function useApiError(): UseApiErrorResult {
+  const [error, setError] = useState<ApiError | null>(null);
+
+  const clearError = useCallback(() => {
+    setError(null);
+  }, []);
+
+  const handleError = useCallback((err: unknown) => {
+    if (err instanceof ApiError) {
+      setError(err);
+    } else {
+      console.error('Non-API error:', err);
+    }
+  }, []);
+
+  const errorMessage = error ? getErrorMessage(error) : null;
+
+  return {
+    error,
+    setError,
+    clearError,
+    handleError,
+    errorMessage,
+  };
+}

package/src/index.ts

@@ -0,0 +1,30 @@
+/**
+ * Client package exports
+ *
+ * This client package provides all necessary API client utilities.
+ * All implementations are self-contained and do not depend on external packages.
+ *
+ * CUSTOMIZATION:
+ * You can easily customize any part of the implementation:
+ *
+ * 1. For custom ApiClient/ApiError logic with interceptors:
+ *    - Run: npx nx g next-feature:client-config --projectName=<your-project>
+ *    - This creates lib/client/config.ts for centralized setup
+ *
+ * 2. For full custom implementations:
+ *    - Edit src/lib/client.ts to customize ApiClient behavior
+ *    - Edit src/lib/error.ts to customize error handling
+ *    - The changes are immediately reflected in all imports
+ *
+ * 3. For project-specific hooks/components:
+ *    - Import directly: import { useApiError } from './hooks/use-api-error'
+ *    - Customize src/hooks/use-api-error.tsx
+ *    - Customize src/components/api-error-boundary.tsx
+ */
+
+// Core API utilities
+export { ApiClient, type ApiClientConfig } from './lib/client';
+export { ApiError, ApiErrorBuilder, type ProblemDetail } from './lib/error';
+export * from './lib/types';
+export * from './lib/utils/error';
+export * from './lib/utils/helper';

package/src/lib/client.ts

@@ -0,0 +1,431 @@
+import axios, {
+  AxiosError,
+  AxiosInstance,
+  AxiosRequestConfig,
+  AxiosResponse,
+  InternalAxiosRequestConfig,
+} from 'axios';
+import { ApiError, ProblemDetail } from './error';
+
+/**
+ * Configuration options for the API client
+ */
+export interface ApiClientConfig {
+  baseURL: string;
+  timeout?: number;
+  enableRefreshToken?: boolean;
+  maxRetries?: number;
+  retryDelay?: number;
+  onAuthenticated?: (
+    config: InternalAxiosRequestConfig
+  ) => void | Promise<void>;
+  onUnauthorized?: () => void | Promise<void>;
+  onRefreshTokenExpired?: () => void | Promise<void>;
+  onRefreshToken?: () => string | Promise<string>;
+}
+
+/**
+ * Pending request queue item
+ */
+interface PendingRequest {
+  resolve: (token: string) => void;
+  reject: (error: any) => void;
+}
+
+/**
+ * Axios wrapper with JWT/Refresh token handling
+ */
+export class ApiClient {
+  private readonly instance: AxiosInstance;
+  private isRefreshing = false;
+  private pendingRequests: PendingRequest[] = [];
+  private config: Required<ApiClientConfig>;
+
+  constructor(config: ApiClientConfig) {
+    this.config = {
+      timeout: 30000,
+      enableRefreshToken: true,
+      maxRetries: 3,
+      retryDelay: 1000,
+      onUnauthorized: async () => {
+        // Redirect to login page
+        if (typeof window !== 'undefined') {
+          window.location.href = '/login';
+        }
+      },
+      onRefreshTokenExpired: async () => {
+        console.error('Session expired. Please login again.');
+        if (typeof window !== 'undefined') {
+          window.location.href = '/login?expired=true';
+        }
+      },
+      onAuthenticated: async (config) => {
+        console.log('Authenticated', config.baseURL);
+      },
+      onRefreshToken: async () => {
+        return '';
+      },
+      ...config,
+    };
+
+    this.instance = axios.create({
+      baseURL: this.config.baseURL,
+      timeout: this.config.timeout,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+
+    this.setupInterceptors();
+  }
+
+  /**
+   * Setup request and response interceptors
+   */
+  private setupInterceptors(): void {
+    // Request interceptor
+    this.instance.interceptors.request.use(
+      this.handleRequestFulfilled.bind(this),
+      this.handleRequestRejected.bind(this)
+    );
+
+    // Response interceptor
+    this.instance.interceptors.response.use(
+      this.handleResponseFulfilled.bind(this),
+      this.handleResponseRejected.bind(this)
+    );
+  }
+
+  /**
+   * Attach JWT token to request headers
+   */
+  private async handleRequestFulfilled(
+    config: InternalAxiosRequestConfig
+  ): Promise<InternalAxiosRequestConfig> {
+    try {
+      if (this.config.onAuthenticated) {
+        this.config.onAuthenticated(config);
+      }
+
+      return config;
+    } catch (error) {
+      console.error('Error attaching token to request:', error);
+      return config;
+    }
+  }
+
+  /**
+   * Handle request errors
+   */
+  private handleRequestRejected(error: any): Promise<never> {
+    console.error('Request configuration error:', error);
+    return Promise.reject(error);
+  }
+
+  /**
+   * Pass through successful responses
+   */
+  private handleResponseFulfilled(response: AxiosResponse): AxiosResponse {
+    return response;
+  }
+
+  /**
+   * Handle response errors with retry logic and token refresh
+   */
+  private async handleResponseRejected(error: AxiosError): Promise<any> {
+    const originalRequest = error.config as InternalAxiosRequestConfig & {
+      _retry?: boolean;
+      _retryCount?: number;
+    };
+
+    if (!originalRequest) {
+      return Promise.reject(this.createApiError(error));
+    }
+
+    // Handle 401 Unauthorized - attempt token refresh
+    if (error.response?.status === 401 && this.config.enableRefreshToken) {
+      return this.handleUnauthorizedError(error, originalRequest);
+    }
+
+    // Handle network errors and 5xx errors with retry logic
+    if (this.shouldRetry(error, originalRequest)) {
+      return this.retryRequest(originalRequest);
+    }
+
+    // Create and reject with custom ApiError
+    return Promise.reject(this.createApiError(error));
+  }
+
+  /**
+   * Handle 401 errors with token refresh
+   */
+  private async handleUnauthorizedError(
+    error: AxiosError,
+    originalRequest: InternalAxiosRequestConfig & { _retry?: boolean }
+  ): Promise<any> {
+    // Prevent infinite loops
+    if (originalRequest._retry) {
+      if (this.config.onRefreshTokenExpired) {
+        await this.config.onRefreshTokenExpired();
+      }
+      return Promise.reject(this.createApiError(error));
+    }
+
+    originalRequest._retry = true;
+
+    // If already refreshing, queue the request
+    if (this.isRefreshing) {
+      return new Promise((resolve, reject) => {
+        this.pendingRequests.push({ resolve, reject });
+      })
+        .then((token) => {
+          originalRequest.headers.Authorization = `Bearer ${token}`;
+          return this.instance(originalRequest);
+        })
+        .catch((err) => {
+          return Promise.reject(err);
+        });
+    }
+
+    this.isRefreshing = true;
+
+    try {
+      const newToken = await this.refreshToken();
+
+      // Update the original request with new token
+      originalRequest.headers.Authorization = `Bearer ${newToken}`;
+
+      // Resolve all pending requests with new token
+      this.processPendingRequests(null, newToken);
+
+      // Retry the original request
+      return this.instance(originalRequest);
+    } catch (refreshError) {
+      // Reject all pending requests
+      this.processPendingRequests(refreshError, null);
+
+      if (this.config.onUnauthorized) {
+        await this.config.onUnauthorized();
+      }
+
+      return Promise.reject(this.createApiError(error));
+    } finally {
+      this.isRefreshing = false;
+    }
+  }
+
+  /**
+   * Refresh the JWT token using the refresh token
+   */
+  private async refreshToken(): Promise<string> {
+    try {
+      // const session = await auth();
+      //
+      // if (!session?.user || !('refreshToken' in session.user)) {
+      //   throw new Error('No refresh token available');
+      // }
+      //
+      // const refreshToken = session.user.refreshToken as string;
+      const refreshToken = this.config.onRefreshToken();
+
+      // Call your refresh token endpoint
+      const response = await axios.post<{ jwtToken: string }>(
+        `${this.config.baseURL}/auth/refresh`,
+        { refreshToken },
+        {
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        }
+      );
+
+      const newToken = response.data.jwtToken;
+
+      // Update the session with the new token
+      // Note: You'll need to implement this based on your auth setup
+      // This might involve updating cookies or calling an API route
+      await this.updateSession(newToken);
+
+      return newToken;
+    } catch (error) {
+      console.error('Token refresh failed:', error);
+      throw error;
+    }
+  }
+
+  /**
+   * Update session with new token
+   * Implement this based on your Next.js auth setup
+   */
+  private async updateSession(newToken: string): Promise<void> {
+    // Example implementation - adjust based on your auth setup
+    try {
+      await fetch('/api/auth/update-token', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ jwtToken: newToken }),
+      });
+    } catch (error) {
+      console.error('Failed to update session:', error);
+      throw error;
+    }
+  }
+
+  /**
+   * Process all pending requests after token refresh
+   */
+  private processPendingRequests(error: any, token: string | null): void {
+    this.pendingRequests.forEach((request) => {
+      if (error) {
+        request.reject(error);
+      } else if (token) {
+        request.resolve(token);
+      }
+    });
+
+    this.pendingRequests = [];
+  }
+
+  /**
+   * Determine if request should be retried
+   */
+  private shouldRetry(
+    error: AxiosError,
+    config: InternalAxiosRequestConfig & { _retryCount?: number }
+  ): boolean {
+    const retryCount = config._retryCount || 0;
+
+    // Don't retry if max retries exceeded
+    if (retryCount >= this.config.maxRetries) {
+      return false;
+    }
+
+    // Retry on network errors
+    if (!error.response) {
+      return true;
+    }
+
+    // Retry on 5xx server errors (except 501)
+    const status = error.response.status;
+    if (status >= 500 && status !== 501) {
+      return true;
+    }
+
+    // Retry on 429 (Too Many Requests)
+    if (status === 429) {
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * Retry failed request with exponential backoff
+   */
+  private async retryRequest(
+    config: InternalAxiosRequestConfig & { _retryCount?: number }
+  ): Promise<any> {
+    config._retryCount = (config._retryCount || 0) + 1;
+
+    const delay = this.config.retryDelay * Math.pow(2, config._retryCount - 1);
+
+    await this.sleep(delay);
+
+    console.log(
+      `Retrying request (attempt ${config._retryCount}):`,
+      config.url
+    );
+
+    return this.instance(config);
+  }
+
+  /**
+   * Sleep helper for retry delays
+   */
+  private sleep(ms: number): Promise<void> {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  }
+
+  /**
+   * Create ApiError from AxiosError
+   */
+  private createApiError(error: AxiosError): ApiError {
+    const status = error.response?.status || 0;
+    const problemDetail = this.extractProblemDetail(error);
+
+    return new ApiError(status, problemDetail, error);
+  }
+
+  /**
+   * Extract ProblemDetail from error response
+   */
+  private extractProblemDetail(error: AxiosError): ProblemDetail | null {
+    if (!error.response?.data) {
+      return null;
+    }
+
+    const data = error.response.data;
+
+    // Check if response matches ProblemDetail structure
+    if (
+      typeof data === 'object' &&
+      'type' in data &&
+      'title' in data &&
+      'status' in data
+    ) {
+      return data as ProblemDetail;
+    }
+
+    return null;
+  }
+
+  /**
+   * HTTP Methods with proper typing
+   */
+
+  async get<T = any>(url: string, config?: AxiosRequestConfig): Promise<T> {
+    const response = await this.instance.get<T>(url, config);
+    return response.data;
+  }
+
+  async post<T = any>(
+    url: string,
+    data?: any,
+    config?: AxiosRequestConfig
+  ): Promise<T> {
+    const response = await this.instance.post<T>(url, data, config);
+    return response.data;
+  }
+
+  async put<T = any>(
+    url: string,
+    data?: any,
+    config?: AxiosRequestConfig
+  ): Promise<T> {
+    const response = await this.instance.put<T>(url, data, config);
+    return response.data;
+  }
+
+  async patch<T = any>(
+    url: string,
+    data?: any,
+    config?: AxiosRequestConfig
+  ): Promise<T> {
+    const response = await this.instance.patch<T>(url, data, config);
+    return response.data;
+  }
+
+  async delete<T = any>(url: string, config?: AxiosRequestConfig): Promise<T> {
+    const response = await this.instance.delete<T>(url, config);
+    return response.data;
+  }
+
+  /**
+   * Get the underlying Axios instance for advanced usage
+   */
+  getAxiosInstance(): AxiosInstance {
+    return this.instance;
+  }
+}

package/src/lib/error.ts

@@ -0,0 +1,157 @@
+import { AxiosError, HttpStatusCode } from 'axios';
+import { ZodError } from 'zod';
+
+/**
+ * Spring Boot ProblemDetail structure
+ */
+export interface ProblemDetail {
+  type: string;
+  title: string;
+  status: HttpStatusCode;
+  detail?: string;
+  instance?: string;
+  errors?: Record<string, unknown>;
+  [key: string]: unknown;
+}
+
+/**
+ * Custom error class for API errors
+ */
+export class ApiError extends Error {
+  constructor(
+    public status: HttpStatusCode,
+    public problemDetail: ProblemDetail | null,
+    public originalError: Error,
+    message?: string
+  ) {
+    super(
+      message ||
+        problemDetail?.detail ||
+        problemDetail?.title ||
+        originalError?.message ||
+        'An error occurred'
+    );
+    this.name = 'ApiError';
+    Object.setPrototypeOf(this, ApiError.prototype);
+  }
+
+  get isClientError(): boolean {
+    return this.status >= 400 && this.status < 500;
+  }
+
+  get isServerError(): boolean {
+    return this.status >= 500;
+  }
+
+  get isUnauthorized(): boolean {
+    return this.status === 401;
+  }
+
+  get isForbidden(): boolean {
+    return this.status === 403;
+  }
+
+  get isNotFound(): boolean {
+    return this.status === 404;
+  }
+
+  static builder<T>(): ApiErrorBuilder {
+    return new ApiErrorBuilder<T>();
+  }
+
+  static of(error: Error) {
+    if (error instanceof ApiError) {
+      return error;
+    }
+
+    return ApiError.builder().originalError(error).build();
+  }
+
+  /**
+   * Create ApiError from Zod validation error
+   */
+  static fromZodError(zodError: ZodError) {
+    const errors: Record<string, string> = {};
+
+    zodError.errors.forEach((error) => {
+      error.path.forEach((path) => {
+        errors[path] = error.message;
+      });
+    });
+
+    return ApiError.builder()
+      .originalError(zodError)
+      .status(HttpStatusCode.BadRequest)
+      .message('Validation error')
+      .problemDetail('errors', errors)
+      .build();
+  }
+}
+
+export class ApiErrorBuilder<
+  AdditionalProblemDetails = Record<string, unknown>
+> {
+  private readonly _problemDetail: ProblemDetail;
+  private _status: HttpStatusCode;
+  private _originalError: Error;
+  private _message: string;
+
+  constructor() {
+    this._status = HttpStatusCode.InternalServerError;
+    this._problemDetail = {
+      status: this._status,
+      title: '',
+      type: 'about:blank',
+    };
+  }
+
+  /**
+   * Set standard ProblemDetail fields
+   */
+  problemDetail<K extends keyof (ProblemDetail & AdditionalProblemDetails)>(
+    key: K,
+    value: K extends keyof ProblemDetail
+      ? ProblemDetail[K]
+      : K extends keyof AdditionalProblemDetails
+      ? AdditionalProblemDetails[K]
+      : unknown
+  ): ApiErrorBuilder<AdditionalProblemDetails> {
+    (this._problemDetail as any)[key] = value;
+    return this;
+  }
+
+  originalError(error: Error): ApiErrorBuilder<AdditionalProblemDetails> {
+    this._originalError = error;
+    this._problemDetail.title = error.name;
+
+    if (error instanceof AxiosError) {
+      this.status(error.status);
+    }
+    if (error instanceof ZodError) {
+      this.status(HttpStatusCode.BadRequest);
+      this.message('Validation error');
+    }
+    return this;
+  }
+
+  status(status: HttpStatusCode): ApiErrorBuilder<AdditionalProblemDetails> {
+    this._status = status;
+    this._problemDetail.status = status;
+    return this;
+  }
+
+  message(msg: string): ApiErrorBuilder<AdditionalProblemDetails> {
+    this._message = msg;
+    this._problemDetail.detail = msg;
+    return this;
+  }
+
+  build(): ApiError {
+    return new ApiError(
+      this._status,
+      this._problemDetail,
+      this._originalError,
+      this._message
+    );
+  }
+}

package/src/lib/types/index.ts

@@ -0,0 +1,13 @@
+import { ProblemDetail } from '../error';
+
+/**
+ * [api-response]
+ * next-feature@0.0.11-beta
+ * November 4th 2025, 6:37:27 pm
+ */
+export interface ApiResponse<Response> {
+  success?: boolean;
+  message?: string;
+  error?: ProblemDetail;
+  data: Response;
+}

package/src/lib/utils/error.ts

@@ -0,0 +1,136 @@
+import { ApiError } from '../error';
+
+/**
+ * Extract user-friendly error message from ApiError
+ *
+ * [get-error-message]
+ * next-feature@0.0.11-beta
+ * November 4th 2025, 11:47:45 am
+ *
+ */
+export function getErrorMessage(error: unknown): string {
+  if (error instanceof ApiError) {
+    // Use Spring Boot ProblemDetail information
+    if (error.problemDetail?.detail) {
+      return error.problemDetail.detail;
+    }
+    if (error.problemDetail?.title) {
+      return error.problemDetail.title;
+    }
+    return error.message;
+  }
+
+  if (error instanceof Error) {
+    return error.message;
+  }
+
+  return 'An unexpected error occurred';
+}
+
+/**
+ * Format ProblemDetail for display
+ */
+export function formatProblemDetail(error: ApiError): string {
+  if (!error.problemDetail) {
+    return error.message;
+  }
+
+  const parts: string[] = [];
+
+  if (error.problemDetail.title) {
+    parts.push(`Title: ${error.problemDetail.title}`);
+  }
+
+  if (error.problemDetail.detail) {
+    parts.push(`Detail: ${error.problemDetail.detail}`);
+  }
+
+  if (error.problemDetail.instance) {
+    parts.push(`Instance: ${error.problemDetail.instance}`);
+  }
+
+  return parts.join('\n');
+}
+
+/**
+ * Check if error is a specific HTTP status
+ */
+export function isHttpStatus(error: unknown, status: number): boolean {
+  return error instanceof ApiError && error.status === status;
+}
+
+/**
+ * Handle common API errors
+ */
+export function handleApiError(error: unknown): void {
+  if (!(error instanceof ApiError)) {
+    console.error('Unexpected error:', error);
+    return;
+  }
+
+  switch (error.status) {
+    case 400:
+      console.error('Bad Request:', error.problemDetail?.detail);
+      break;
+    case 401:
+      console.error('Unauthorized - Please login');
+      break;
+    case 403:
+      console.error('Forbidden - Access denied');
+      break;
+    case 404:
+      console.error('Not Found:', error.problemDetail?.detail);
+      break;
+    case 409:
+      console.error('Conflict:', error.problemDetail?.detail);
+      break;
+    case 422:
+      console.error('Validation Error:', error.problemDetail);
+      break;
+    case 429:
+      console.error('Too Many Requests - Please slow down');
+      break;
+    case 500:
+      console.error('Server Error:', error.problemDetail?.detail);
+      break;
+    case 503:
+      console.error('Service Unavailable - Please try again later');
+      break;
+    default:
+      console.error(`Error ${error.status}:`, error.message);
+  }
+}
+
+/**
+ * Validation error extractor for Spring Boot validation errors
+ */
+export function extractValidationErrors(
+  error: ApiError
+): Record<string, string[]> | null {
+  if (!error.problemDetail || error.status !== 400) {
+    return null;
+  }
+
+  // Spring Boot often includes validation errors in a 'errors' or 'fieldErrors' property
+  const errors = error.problemDetail.errors || error.problemDetail.fieldErrors;
+
+  if (!errors) {
+    return null;
+  }
+
+  // Convert to a more usable format
+  if (Array.isArray(errors)) {
+    const result: Record<string, string[]> = {};
+    errors.forEach((err: any) => {
+      const field = err.field || err.property || 'general';
+      const message = err.message || err.defaultMessage || 'Validation error';
+      if (!result[field]) {
+        result[field] = [];
+      }
+      result[field].push(message);
+    });
+    return result;
+  }
+
+  return errors as Record<string, string[]>;
+}

package/src/lib/utils/helper.ts

@@ -0,0 +1,20 @@
+import { ProblemDetail } from '../error';
+
+/**
+ * [show-error-toast]
+ * next-feature@0.0.11-beta
+ * November 4th 2025, 11:58:52 am
+ */
+export function showErrorToast(data: any) {
+  return data;
+}
+
+export function getFieldError(
+  error: ProblemDetail | undefined,
+  fieldName: string
+): string | undefined {
+  if (!error) return undefined;
+
+  const errors = error.errors as Record<string, string>;
+  return errors?.[fieldName];
+}

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "types": ["vite/client"]
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json"
+}

package/tsconfig.lib.json

@@ -0,0 +1,28 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts",
+      "vite/client",
+      "next",
+      "@nx/next/typings/image.d.ts"
+    ]
+  },
+  "exclude": [
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx",
+    "jest.config.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}

package/tsconfig.spec.json

@@ -0,0 +1,22 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "moduleResolution": "node10",
+    "jsx": "react-jsx",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}

package/vite.config.ts

@@ -0,0 +1,48 @@
+/// <reference types='vitest' />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
+import * as path from 'path';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
+
+export default defineConfig(() => ({
+  root: __dirname,
+  cacheDir: '../../node_modules/.vite/clients/client',
+  plugins: [
+    react(),
+    nxViteTsPaths(),
+    nxCopyAssetsPlugin(['*.md']),
+    dts({
+      entryRoot: 'src',
+      tsconfigPath: path.join(__dirname, 'tsconfig.lib.json'),
+    }),
+  ],
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+  // Configuration for building your library.
+  // See: https://vitejs.dev/guide/build.html#library-mode
+  build: {
+    outDir: '../../dist/clients/client',
+    emptyOutDir: true,
+    reportCompressedSize: true,
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    },
+    lib: {
+      // Could also be a dictionary or array of multiple entry points.
+      entry: 'src/index.ts',
+      name: 'client',
+      fileName: 'index',
+      // Change this to the formats you want to support.
+      // Don't forget to update your package.json as well.
+      formats: ['es' as const],
+    },
+    rollupOptions: {
+      // External packages that should not be bundled into your library.
+      external: ['react', 'react-dom', 'react/jsx-runtime'],
+    },
+  },
+}));