@aziziaziz/react-components 1.0.1 → 1.0.2

package/dist/index.d.mts

@@ -1,25 +1,343 @@
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 
+/**
+ * Props for the Input component.
+ */
 interface InputProps {
+    /**
+     * Unique identifier for the input field.
+     * Used by react-hook-form as the field name.
+     */
     id: string;
+    /**
+     * Label text displayed above the input.
+     *
+     * @default "Label"
+     */
     label?: string;
+    /**
+     * Placeholder text shown when the input is empty.
+     *
+     * @default "Placeholder"
+     */
     placeholder?: string;
+    /**
+     * Marks the input as required in form validation.
+     *
+     * When true, react-hook-form will enforce a required rule.
+     *
+     * @default false
+     */
     required?: boolean;
+    /**
+     * Hides the label visually while keeping the input functional.
+     *
+     * Useful for compact layouts or custom label rendering.
+     *
+     * @default false
+     */
     hideLabel?: boolean;
+    /**
+     * Displays a loading indicator inside the input.
+     *
+     * Typically used while fetching or validating data.
+     *
+     * @default false
+     */
     loading?: boolean;
+    /**
+     * Disables the input field.
+     *
+     * Prevents user interaction and applies disabled styles.
+     *
+     * @default false
+     */
     disabled?: boolean;
 }
 
+/** Create an input component including label
+ *
+ * This component needs to be wrap in FormProvider from react-hook-form
+ */
 declare const Input: FC<InputProps>;
 
 interface SkeletonLoadingProps {
     /** The border radius of the skeleton
      *
-     * Default: 10
+     * @default 10
      */
     radius?: number;
 }
 
+/** A skeleton loading with animation
+ *
+ * This needs to be wrap in a container with position: relative;
+ */
 declare const SkeletonLoading: FC<SkeletonLoadingProps>;
 
-export { Input, type InputProps, SkeletonLoading, type SkeletonLoadingProps };
+/**
+ * Props for the Button component.
+ */
+interface ButtonProps extends PropsWithChildren {
+    /**
+     * Callback fired when the button is clicked.
+     */
+    onClick: () => void;
+    /**
+     * Additional CSS class names to apply to the button.
+     *
+     * Useful for custom styling or utility classes.
+     */
+    className?: string;
+    /**
+     * Visual style of the button.
+     *
+     * @default "submit"
+     */
+    type?: "warning" | "danger" | "submit";
+    /**
+     * Displays a loading state inside the button.
+     *
+     * When true, the button may show a spinner and
+     * user interaction should be disabled.
+     *
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Disables the button.
+     *
+     * Prevents click events and applies disabled styles.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Size variant of the button.
+     *
+     * @default "default"
+     */
+    size?: "default" | "medium" | "small";
+    /**
+     * Removes the minimum width constraint from the button.
+     *
+     * Useful for icon-only or compact buttons.
+     *
+     * @default false
+     */
+    removeMinWidth?: boolean;
+}
+
+/** The button component with size and type */
+declare const Button: FC<ButtonProps>;
+
+interface DatePickerProps {
+    id: string;
+    label?: string;
+    placeholder?: string;
+    loading?: boolean;
+    disabled?: boolean;
+}
+declare const DatePicker: React.FC<DatePickerProps>;
+
+type SnackbarType = "info" | "danger" | "warning" | "success";
+interface SnackbarReturn {
+    /** To show the snackbar */
+    showSnackbar: (
+    /** Can be in any string format of the message to show */
+    message: string, 
+    /** info, danger, warning or success - default: info */
+    type?: SnackbarType) => void;
+}
+/** Init the snackbar container
+ *
+ * @param id To set the id of the root container of the snackbar - default: snackbarRoot
+ * @param timeout To set the timeout on when the snackbar will be auto hide - default: 3000
+ */
+declare const useSnackbar: (body?: HTMLElement | null, id?: string, timeout?: number) => SnackbarReturn;
+
+/**
+ * Available notification types.
+ */
+type NotiTypes = "default" | "error" | "warning" | "success";
+/**
+ * Notification payload structure sent to the parent window.
+ */
+interface NotificationType {
+    /**
+     * The notification message text.
+     */
+    message: string;
+    /**
+     * Notification visual type.
+     *
+     * @default "default"
+     */
+    type?: NotiTypes;
+    /**
+     * Duration (in milliseconds) before the notification auto-dismisses.
+     *
+     * @default undefined
+     */
+    duration?: number;
+}
+/**
+ * Configuration object for a popup component.
+ */
+interface PopupType {
+    /**
+     * Title or header text displayed at the top of the popup.
+     */
+    header?: string;
+    /**
+     * Main content text displayed inside the popup.
+     *
+     * Can be plain text or formatted content depending on usage.
+     */
+    content?: string;
+}
+/**
+ * Configuration object for a confirmation or question dialog.
+ */
+interface QuestionType {
+    /**
+     * Title or header text of the question dialog.
+     */
+    header: string;
+    /**
+     * Main content or message of the question.
+     *
+     * Typically explains what action the user is being asked to confirm.
+     */
+    content: string;
+    /**
+     * Value returned when the user confirms or selects "Yes".
+     *
+     * @default "Yes"
+     */
+    yesValue?: string;
+    /**
+     * Value returned when the user declines or selects "No".
+     *
+     * @default "No"
+     */
+    noValue?: string;
+    /**
+     * Indicates whether the action is destructive.
+     *
+     * When true, the dialog should visually emphasize caution
+     * (e.g. red buttons or warning styles).
+     *
+     * @default false
+     */
+    isDestructive?: boolean;
+}
+/**
+ * Function signature for posting a message to the parent window.
+ */
+interface PostMessage {
+    /**
+     * Sends a message to the parent window via `window.postMessage`.
+     *
+     * @param data - The data payload to send to the parent window
+     */
+    (data: any): void;
+}
+/**
+ * Function signature for posting a notification message
+ * to the parent window.
+ */
+interface PostNotification {
+    /**
+     * Sends a notification payload to the parent window.
+     *
+     * @param data - Notification data including message, type and duration
+     */
+    (data: NotificationType): void;
+}
+/**
+ * Function signature for posting a popup payload
+ * to the parent window.
+ */
+interface PostPopup {
+    /**
+     * Sends a popup configuration to the parent window.
+     *
+     * Typically used to trigger modal or popup displays
+     * in the parent application.
+     *
+     * @param data - Popup configuration including header and content
+     */
+    (data: PopupType): void;
+}
+/**
+ * Function signature for posting a question or confirmation dialog
+ * to the parent window.
+ */
+interface PostQuestion {
+    /**
+     * Sends a question configuration to the parent window.
+     *
+     * Typically used to trigger confirmation or decision dialogs
+     * in the parent application.
+     *
+     * @param data - Question configuration including content and response values
+     *
+     * @returns The yes or no text from the button that the user clicked
+     */
+    (data: QuestionType): Promise<string>;
+}
+/**
+ * Return object of the `usePostMessage` / `useIFrameDimensions` hook.
+ */
+interface UsePostMessageReturn {
+    /**
+     * Sends the current iframe width and height to the parent window.
+     *
+     * Useful when the iframe content changes size dynamically.
+     */
+    sendDimension: () => void;
+    /**
+     * Posts a custom message to the parent window.
+     */
+    postMessage: PostMessage;
+    /**
+     * Posts a notification message to the parent window.
+     *
+     * Typically used to trigger toast/snackbar notifications
+     * in the parent application.
+     */
+    postNotification: PostNotification;
+    /**
+     * Posts a popup configuration to the parent window.
+     *
+     * Typically used to trigger modal or popup displays
+     * in the parent application.
+     */
+    postPopup: PostPopup;
+    /**
+     * Posts a question or confirmation dialog configuration
+     * to the parent window.
+     *
+     * Typically used to prompt the user to confirm or
+     * make a decision in the parent application.
+     */
+    postQuestion: PostQuestion;
+}
+
+/**
+ * React hook for communicating iframe dimensions and messages
+ * to a parent window.
+ *
+ * This hook automatically:
+ * - Sends initial iframe dimensions on mount
+ * - Updates dimensions on DOM content load
+ * - Updates dimensions on window resize
+ *
+ * @param url - The target origin for `postMessage`
+ *
+ * @returns Functions for sending dimensions and posting custom messages
+ */
+declare const usePostMessage: (url: string) => UsePostMessageReturn;
+
+export { Button, type ButtonProps, DatePicker, Input, type InputProps, type NotificationType, SkeletonLoading, type SkeletonLoadingProps, usePostMessage, useSnackbar };

package/dist/index.d.ts

@@ -1,25 +1,343 @@
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 
+/**
+ * Props for the Input component.
+ */
 interface InputProps {
+    /**
+     * Unique identifier for the input field.
+     * Used by react-hook-form as the field name.
+     */
     id: string;
+    /**
+     * Label text displayed above the input.
+     *
+     * @default "Label"
+     */
     label?: string;
+    /**
+     * Placeholder text shown when the input is empty.
+     *
+     * @default "Placeholder"
+     */
     placeholder?: string;
+    /**
+     * Marks the input as required in form validation.
+     *
+     * When true, react-hook-form will enforce a required rule.
+     *
+     * @default false
+     */
     required?: boolean;
+    /**
+     * Hides the label visually while keeping the input functional.
+     *
+     * Useful for compact layouts or custom label rendering.
+     *
+     * @default false
+     */
     hideLabel?: boolean;
+    /**
+     * Displays a loading indicator inside the input.
+     *
+     * Typically used while fetching or validating data.
+     *
+     * @default false
+     */
     loading?: boolean;
+    /**
+     * Disables the input field.
+     *
+     * Prevents user interaction and applies disabled styles.
+     *
+     * @default false
+     */
     disabled?: boolean;
 }
 
+/** Create an input component including label
+ *
+ * This component needs to be wrap in FormProvider from react-hook-form
+ */
 declare const Input: FC<InputProps>;
 
 interface SkeletonLoadingProps {
     /** The border radius of the skeleton
      *
-     * Default: 10
+     * @default 10
      */
     radius?: number;
 }
 
+/** A skeleton loading with animation
+ *
+ * This needs to be wrap in a container with position: relative;
+ */
 declare const SkeletonLoading: FC<SkeletonLoadingProps>;
 
-export { Input, type InputProps, SkeletonLoading, type SkeletonLoadingProps };
+/**
+ * Props for the Button component.
+ */
+interface ButtonProps extends PropsWithChildren {
+    /**
+     * Callback fired when the button is clicked.
+     */
+    onClick: () => void;
+    /**
+     * Additional CSS class names to apply to the button.
+     *
+     * Useful for custom styling or utility classes.
+     */
+    className?: string;
+    /**
+     * Visual style of the button.
+     *
+     * @default "submit"
+     */
+    type?: "warning" | "danger" | "submit";
+    /**
+     * Displays a loading state inside the button.
+     *
+     * When true, the button may show a spinner and
+     * user interaction should be disabled.
+     *
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Disables the button.
+     *
+     * Prevents click events and applies disabled styles.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Size variant of the button.
+     *
+     * @default "default"
+     */
+    size?: "default" | "medium" | "small";
+    /**
+     * Removes the minimum width constraint from the button.
+     *
+     * Useful for icon-only or compact buttons.
+     *
+     * @default false
+     */
+    removeMinWidth?: boolean;
+}
+
+/** The button component with size and type */
+declare const Button: FC<ButtonProps>;
+
+interface DatePickerProps {
+    id: string;
+    label?: string;
+    placeholder?: string;
+    loading?: boolean;
+    disabled?: boolean;
+}
+declare const DatePicker: React.FC<DatePickerProps>;
+
+type SnackbarType = "info" | "danger" | "warning" | "success";
+interface SnackbarReturn {
+    /** To show the snackbar */
+    showSnackbar: (
+    /** Can be in any string format of the message to show */
+    message: string, 
+    /** info, danger, warning or success - default: info */
+    type?: SnackbarType) => void;
+}
+/** Init the snackbar container
+ *
+ * @param id To set the id of the root container of the snackbar - default: snackbarRoot
+ * @param timeout To set the timeout on when the snackbar will be auto hide - default: 3000
+ */
+declare const useSnackbar: (body?: HTMLElement | null, id?: string, timeout?: number) => SnackbarReturn;
+
+/**
+ * Available notification types.
+ */
+type NotiTypes = "default" | "error" | "warning" | "success";
+/**
+ * Notification payload structure sent to the parent window.
+ */
+interface NotificationType {
+    /**
+     * The notification message text.
+     */
+    message: string;
+    /**
+     * Notification visual type.
+     *
+     * @default "default"
+     */
+    type?: NotiTypes;
+    /**
+     * Duration (in milliseconds) before the notification auto-dismisses.
+     *
+     * @default undefined
+     */
+    duration?: number;
+}
+/**
+ * Configuration object for a popup component.
+ */
+interface PopupType {
+    /**
+     * Title or header text displayed at the top of the popup.
+     */
+    header?: string;
+    /**
+     * Main content text displayed inside the popup.
+     *
+     * Can be plain text or formatted content depending on usage.
+     */
+    content?: string;
+}
+/**
+ * Configuration object for a confirmation or question dialog.
+ */
+interface QuestionType {
+    /**
+     * Title or header text of the question dialog.
+     */
+    header: string;
+    /**
+     * Main content or message of the question.
+     *
+     * Typically explains what action the user is being asked to confirm.
+     */
+    content: string;
+    /**
+     * Value returned when the user confirms or selects "Yes".
+     *
+     * @default "Yes"
+     */
+    yesValue?: string;
+    /**
+     * Value returned when the user declines or selects "No".
+     *
+     * @default "No"
+     */
+    noValue?: string;
+    /**
+     * Indicates whether the action is destructive.
+     *
+     * When true, the dialog should visually emphasize caution
+     * (e.g. red buttons or warning styles).
+     *
+     * @default false
+     */
+    isDestructive?: boolean;
+}
+/**
+ * Function signature for posting a message to the parent window.
+ */
+interface PostMessage {
+    /**
+     * Sends a message to the parent window via `window.postMessage`.
+     *
+     * @param data - The data payload to send to the parent window
+     */
+    (data: any): void;
+}
+/**
+ * Function signature for posting a notification message
+ * to the parent window.
+ */
+interface PostNotification {
+    /**
+     * Sends a notification payload to the parent window.
+     *
+     * @param data - Notification data including message, type and duration
+     */
+    (data: NotificationType): void;
+}
+/**
+ * Function signature for posting a popup payload
+ * to the parent window.
+ */
+interface PostPopup {
+    /**
+     * Sends a popup configuration to the parent window.
+     *
+     * Typically used to trigger modal or popup displays
+     * in the parent application.
+     *
+     * @param data - Popup configuration including header and content
+     */
+    (data: PopupType): void;
+}
+/**
+ * Function signature for posting a question or confirmation dialog
+ * to the parent window.
+ */
+interface PostQuestion {
+    /**
+     * Sends a question configuration to the parent window.
+     *
+     * Typically used to trigger confirmation or decision dialogs
+     * in the parent application.
+     *
+     * @param data - Question configuration including content and response values
+     *
+     * @returns The yes or no text from the button that the user clicked
+     */
+    (data: QuestionType): Promise<string>;
+}
+/**
+ * Return object of the `usePostMessage` / `useIFrameDimensions` hook.
+ */
+interface UsePostMessageReturn {
+    /**
+     * Sends the current iframe width and height to the parent window.
+     *
+     * Useful when the iframe content changes size dynamically.
+     */
+    sendDimension: () => void;
+    /**
+     * Posts a custom message to the parent window.
+     */
+    postMessage: PostMessage;
+    /**
+     * Posts a notification message to the parent window.
+     *
+     * Typically used to trigger toast/snackbar notifications
+     * in the parent application.
+     */
+    postNotification: PostNotification;
+    /**
+     * Posts a popup configuration to the parent window.
+     *
+     * Typically used to trigger modal or popup displays
+     * in the parent application.
+     */
+    postPopup: PostPopup;
+    /**
+     * Posts a question or confirmation dialog configuration
+     * to the parent window.
+     *
+     * Typically used to prompt the user to confirm or
+     * make a decision in the parent application.
+     */
+    postQuestion: PostQuestion;
+}
+
+/**
+ * React hook for communicating iframe dimensions and messages
+ * to a parent window.
+ *
+ * This hook automatically:
+ * - Sends initial iframe dimensions on mount
+ * - Updates dimensions on DOM content load
+ * - Updates dimensions on window resize
+ *
+ * @param url - The target origin for `postMessage`
+ *
+ * @returns Functions for sending dimensions and posting custom messages
+ */
+declare const usePostMessage: (url: string) => UsePostMessageReturn;
+
+export { Button, type ButtonProps, DatePicker, Input, type InputProps, type NotificationType, SkeletonLoading, type SkeletonLoadingProps, usePostMessage, useSnackbar };