@true-tech-team/react-components 0.0.3 → 0.0.5

package/lib/hooks/useAsyncToast/useAsyncToast.d.ts

@@ -0,0 +1,93 @@
+import { UseToastReturn } from '../useToast';
+import { ToastData } from '../../components/overlays/Toast';
+/**
+ * Async toast configuration
+ */
+export interface AsyncToastConfig<TData, TError = Error> {
+    /**
+     * Message or data to show while loading
+     */
+    loading: string | Partial<ToastData>;
+    /**
+     * Message or data to show on success
+     * Can be a function that receives the result
+     */
+    success: string | Partial<ToastData> | ((data: TData) => string | Partial<ToastData>);
+    /**
+     * Message or data to show on error
+     * Can be a function that receives the error
+     */
+    error: string | Partial<ToastData> | ((error: TError) => string | Partial<ToastData>);
+    /**
+     * Duration for success toast (default: 5000)
+     */
+    successDuration?: number;
+    /**
+     * Duration for error toast (default: 5000)
+     */
+    errorDuration?: number;
+}
+/**
+ * Hook return type
+ */
+export interface UseAsyncToastReturn {
+    /**
+     * Wrap an async function with toast notifications
+     * Returns a function that when called, shows loading toast,
+     * then success/error based on result
+     */
+    wrap: <TArgs extends unknown[], TData, TError = Error>(fn: (...args: TArgs) => Promise<TData>, config: AsyncToastConfig<TData, TError>) => (...args: TArgs) => Promise<TData>;
+    /**
+     * Execute a promise with toast notifications
+     */
+    execute: <TData, TError = Error>(promise: Promise<TData>, config: AsyncToastConfig<TData, TError>) => Promise<TData>;
+    /**
+     * Access to underlying toast methods
+     */
+    toast: UseToastReturn;
+}
+/**
+ * Hook for API endpoint toasts with loading -> success/error flow
+ *
+ * @example
+ * ```tsx
+ * function UserForm() {
+ *   const { wrap, execute } = useAsyncToast();
+ *
+ *   // Method 1: Wrap an existing function
+ *   const saveUser = wrap(
+ *     async (data: UserData) => api.saveUser(data),
+ *     {
+ *       loading: 'Saving user...',
+ *       success: (user) => `User ${user.name} saved successfully`,
+ *       error: (err) => `Failed to save: ${err.message}`,
+ *     }
+ *   );
+ *
+ *   // Method 2: Execute a one-off promise
+ *   const handleFetch = async () => {
+ *     try {
+ *       const data = await execute(
+ *         fetch('/api/data').then(r => r.json()),
+ *         {
+ *           loading: { message: 'Fetching data...', title: 'Loading' },
+ *           success: 'Data loaded!',
+ *           error: 'Failed to load data',
+ *         }
+ *       );
+ *       // Use data...
+ *     } catch (err) {
+ *       // Handle error if needed
+ *     }
+ *   };
+ *
+ *   const handleSubmit = async (formData: UserData) => {
+ *     const user = await saveUser(formData);
+ *     // user is typed as the return value of api.saveUser
+ *   };
+ *
+ *   return <form onSubmit={handleSubmit}>...</form>;
+ * }
+ * ```
+ */
+export declare function useAsyncToast(): UseAsyncToastReturn;

package/lib/hooks/useDialog/index.d.ts

@@ -0,0 +1,2 @@
+export { useDialog } from './useDialog';
+export type { UseDialogOptions, UseDialogReturn } from './useDialog';

package/lib/hooks/useDialog/useDialog.d.ts

@@ -0,0 +1,58 @@
+import { DialogContextValue, DialogProps } from '../../components/overlays/Dialog';
+/**
+ * Hook options
+ */
+export interface UseDialogOptions {
+    /**
+     * Default props to apply to all dialogs
+     */
+    defaultProps?: Partial<DialogProps>;
+}
+/**
+ * Hook return type
+ */
+export interface UseDialogReturn extends Pick<DialogContextValue, 'closeDialog' | 'closeTopDialog' | 'closeAllDialogs' | 'isDialogOpen' | 'dialogCount'> {
+    /**
+     * Open a dialog with optional default props merged
+     * @returns Promise that resolves when dialog closes
+     */
+    open: <T = void>(props: Omit<DialogProps, 'isOpen'>) => Promise<T>;
+    /**
+     * Update props of an open dialog
+     */
+    update: (id: string, props: Partial<DialogProps>) => void;
+}
+/**
+ * Hook for programmatically creating and managing dialogs
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const dialog = useDialog();
+ *
+ *   const handleClick = async () => {
+ *     const result = await dialog.open({
+ *       title: 'Confirm Action',
+ *       children: 'Are you sure you want to proceed?',
+ *       actions: (
+ *         <>
+ *           <Button variant="ghost" onClick={() => dialog.closeTopDialog(false)}>
+ *             Cancel
+ *           </Button>
+ *           <Button onClick={() => dialog.closeTopDialog(true)}>
+ *             Confirm
+ *           </Button>
+ *         </>
+ *       ),
+ *     });
+ *
+ *     if (result) {
+ *       // User confirmed
+ *     }
+ *   };
+ *
+ *   return <Button onClick={handleClick}>Open Dialog</Button>;
+ * }
+ * ```
+ */
+export declare function useDialog(options?: UseDialogOptions): UseDialogReturn;

package/lib/hooks/useResizeObserver/index.d.ts

@@ -0,0 +1,2 @@
+export { useResizeObserver } from './useResizeObserver';
+export type { UseResizeObserverOptions, UseResizeObserverReturn } from './useResizeObserver';

package/lib/hooks/useResizeObserver/useResizeObserver.d.ts

@@ -0,0 +1,69 @@
+/**
+ * Options for the resize observer hook
+ */
+export interface UseResizeObserverOptions {
+    /**
+     * Callback when size changes
+     */
+    onResize?: (entry: ResizeObserverEntry) => void;
+    /**
+     * Debounce delay for resize callback (ms)
+     * @default 0
+     */
+    debounce?: number;
+    /**
+     * Which box model to observe
+     * @default 'border-box'
+     */
+    box?: ResizeObserverBoxOptions;
+    /**
+     * Whether to disable the observer
+     * @default false
+     */
+    disabled?: boolean;
+}
+/**
+ * Return value from useResizeObserver
+ */
+export interface UseResizeObserverReturn {
+    /**
+     * Ref callback to attach to the observed element
+     */
+    ref: (node: HTMLElement | null) => void;
+    /**
+     * Current width of the element
+     */
+    width: number;
+    /**
+     * Current height of the element
+     */
+    height: number;
+    /**
+     * The observed element
+     */
+    element: HTMLElement | null;
+}
+/**
+ * Hook that observes element resize using ResizeObserver
+ *
+ * @example
+ * ```tsx
+ * const { ref, width, height } = useResizeObserver();
+ *
+ * return (
+ *   <div ref={ref}>
+ *     Width: {width}, Height: {height}
+ *   </div>
+ * );
+ * ```
+ *
+ * @example
+ * ```tsx
+ * const { ref, width } = useResizeObserver({
+ *   onResize: (entry) => console.log('Resized:', entry),
+ *   debounce: 100,
+ * });
+ * ```
+ */
+export declare function useResizeObserver(options?: UseResizeObserverOptions): UseResizeObserverReturn;
+export default useResizeObserver;

package/lib/hooks/useToast/index.d.ts

@@ -0,0 +1,2 @@
+export { useToast } from './useToast';
+export type { UseToastOptions, UseToastReturn } from './useToast';

package/lib/hooks/useToast/useToast.d.ts

@@ -0,0 +1,97 @@
+import { ToastContextValue, ToastData } from '../../components/overlays/Toast';
+/**
+ * Hook options
+ */
+export interface UseToastOptions {
+    /**
+     * Default props to apply to all toasts
+     */
+    defaultProps?: Partial<ToastData>;
+}
+/**
+ * Hook return type
+ */
+export interface UseToastReturn {
+    /**
+     * Add a toast with full configuration
+     * @returns Toast ID
+     */
+    toast: (data: ToastData) => string;
+    /**
+     * Show a success toast
+     * @returns Toast ID
+     */
+    success: (message: string, options?: Partial<ToastData>) => string;
+    /**
+     * Show an error toast
+     * @returns Toast ID
+     */
+    error: (message: string, options?: Partial<ToastData>) => string;
+    /**
+     * Show a warning toast
+     * @returns Toast ID
+     */
+    warning: (message: string, options?: Partial<ToastData>) => string;
+    /**
+     * Show an info toast
+     * @returns Toast ID
+     */
+    info: (message: string, options?: Partial<ToastData>) => string;
+    /**
+     * Show a loading toast
+     * @returns Toast ID
+     */
+    loading: (message: string, options?: Partial<ToastData>) => string;
+    /**
+     * Update an existing toast
+     */
+    update: (id: string, data: Partial<ToastData>) => void;
+    /**
+     * Dismiss a specific toast
+     */
+    dismiss: (id: string) => void;
+    /**
+     * Dismiss all toasts
+     */
+    dismissAll: () => void;
+    /**
+     * Promise-based toast that shows loading, then success/error
+     */
+    promise: ToastContextValue['promise'];
+}
+/**
+ * Hook for programmatically creating toasts
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const toast = useToast();
+ *
+ *   const handleSave = () => {
+ *     toast.success('Changes saved successfully');
+ *   };
+ *
+ *   const handleError = () => {
+ *     toast.error('Failed to save changes', {
+ *       action: { label: 'Retry', onClick: handleSave }
+ *     });
+ *   };
+ *
+ *   const handleAsyncOperation = async () => {
+ *     await toast.promise(
+ *       fetchData(),
+ *       {
+ *         loading: 'Fetching data...',
+ *         success: (data) => `Loaded ${data.length} items`,
+ *         error: (err) => `Error: ${err.message}`,
+ *       }
+ *     );
+ *   };
+ *
+ *   return (
+ *     <Button onClick={handleSave}>Save</Button>
+ *   );
+ * }
+ * ```
+ */
+export declare function useToast(options?: UseToastOptions): UseToastReturn;

package/lib/providers/GlobalProvider/GlobalProvider.d.ts

@@ -1,4 +1,8 @@
 import { ReactNode } from 'react';
+import { PageMessagesProviderProps } from '../../contexts/PageMessagesContext';
+import { DialogProviderProps } from '../../components/overlays/Dialog';
+import { AlertProviderProps } from '../../components/overlays/Alert';
+import { ToastProviderProps } from '../../components/overlays/Toast';
 import { ThemeConfig } from '../../types';
 export interface GlobalProviderProps {
     /**
@@ -13,6 +17,22 @@ export interface GlobalProviderProps {
      * Whether to inject global styles (default: true)
      */
     injectGlobalStyles?: boolean;
+    /**
+     * PageMessages default configuration
+     */
+    pageMessagesConfig?: Omit<PageMessagesProviderProps, 'children'>;
+    /**
+     * Dialog provider configuration
+     */
+    dialogConfig?: Omit<DialogProviderProps, 'children'>;
+    /**
+     * Alert provider configuration
+     */
+    alertConfig?: Omit<AlertProviderProps, 'children'>;
+    /**
+     * Toast provider configuration
+     */
+    toastConfig?: Omit<ToastProviderProps, 'children'>;
 }
 /**
  * GlobalProvider component that wraps the entire application
@@ -52,5 +72,5 @@ export interface GlobalProviderProps {
  * </GlobalProvider>
  * ```
  */
-export declare function GlobalProvider({ children, themeConfig, injectGlobalStyles, }: GlobalProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function GlobalProvider({ children, themeConfig, injectGlobalStyles, pageMessagesConfig, dialogConfig, alertConfig, toastConfig, }: GlobalProviderProps): import("react/jsx-runtime").JSX.Element;
 export default GlobalProvider;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-tech-team/react-components",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "React TypeScript component library",
   "main": "./index.js",
   "types": "./index.d.ts",