@aziziaziz/react-components 1.0.1 → 1.0.3

package/dist/index.d.mts

@@ -1,25 +1,468 @@
-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>;
+
+/**
+ * Props for the DatePicker component.
+ */
+interface DatePickerProps {
+    /**
+     * Unique identifier for the date picker input.
+     * Used for accessibility and form association.
+     */
+    id: string;
+    /**
+     * Optional label text displayed for the date picker.
+     *
+     * @default "Label"
+     */
+    label?: string;
+    /**
+     * Placeholder text shown when no date is selected.
+     *
+     * @default "Placeholder"
+     */
+    placeholder?: string;
+    /**
+     * Whether the date picker is in a loading state.
+     * Typically used to indicate async data or processing.
+     *
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Whether the date picker is disabled and non-interactive.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+}
+
+declare const DatePicker: React.FC<DatePickerProps>;
+
+/**
+ * Props for the Drawer component.
+ */
+interface DrawerProps extends PropsWithChildren {
+    /**
+     * Controls whether the drawer is visible.
+     */
+    show: boolean;
+    /**
+     * Callback invoked to update the drawer's visibility state.
+     *
+     * @param value - The new visibility state.
+     */
+    updateShow: (value: boolean) => void;
+}
+
+declare const Drawer: React.FC<DrawerProps>;
+
+/**
+ * Represents a single selectable option in the Dropdown component.
+ */
+interface DropdownOptions {
+    /**
+     * The underlying value associated with the option.
+     * Can be a primitive or an object, depending on usage.
+     */
+    value: object | string;
+    /**
+     * The text label displayed to the user for this option.
+     */
+    label: string;
+}
+/**
+ * Props for the Dropdown component.
+ */
+interface DropdownProps {
+    /**
+     * Unique identifier for the dropdown element.
+     * Used for accessibility and form integration.
+     */
+    id: string;
+    /**
+     * List of selectable options displayed in the dropdown.
+     */
+    options: DropdownOptions[];
+    /**
+     * Optional label text displayed above or alongside the dropdown.
+     *
+     * @default "Label"
+     */
+    label?: string;
+    /**
+     * Placeholder text shown when no option is selected.
+     *
+     * @default "Placeholder"
+     */
+    placeholder?: string;
+    /**
+     * Whether the dropdown is in a loading state.
+     * Typically used to indicate asynchronous option loading.
+     *
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Whether the dropdown is disabled and non-interactive.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+}
+
+declare const Dropdown: React.FC<DropdownProps>;
+
+/**
+ * Props for the Icon component.
+ */
+interface IconProps {
+    /**
+     * Source URL or path for the icon image.
+     */
+    src: string;
+    /**
+     * Optional CSS class names applied to the icon element.
+     */
+    className?: string;
+    /**
+     * Whether the icon should be rendered in a flat style
+     *
+     * @default true
+     */
+    flat?: boolean;
+}
+
+declare const Icon: React.FC<IconProps>;
+
+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, type DatePickerProps, Drawer, type DrawerProps, Dropdown, type DropdownOptions, type DropdownProps, Icon, type IconProps, Input, type InputProps, type NotificationType, SkeletonLoading, type SkeletonLoadingProps, usePostMessage, useSnackbar };