@instincthub/react-ui 0.0.4 → 0.0.5

package/dist/src/types/components/forms/InputText.d.ts

@@ -0,0 +1,97 @@
+import React, { ChangeEvent, FocusEvent } from "react";
+interface InputTextProps {
+    /**
+     * The input field's label text
+     */
+    label: string;
+    /**
+     * The name attribute for the input element
+     */
+    name: string;
+    /**
+     * The input's current value
+     */
+    value?: string;
+    /**
+     * Placeholder text to display when input is empty
+     */
+    placeholder?: string;
+    /**
+     * Whether the input is required
+     */
+    required?: boolean;
+    /**
+     * The input type (text, email, password, etc.)
+     */
+    type?: string;
+    /**
+     * Maximum character length
+     */
+    maxLength?: number;
+    /**
+     * Whether the input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the input is read-only
+     */
+    readOnly?: boolean;
+    /**
+     * Additional CSS classes to apply to the wrapper
+     */
+    className?: string;
+    /**
+     * Text transformation to apply (lowercase, uppercase, capitalize)
+     */
+    textTransform?: "lowercase" | "uppercase" | "capitalize";
+    /**
+     * Error message to display
+     */
+    error?: string;
+    /**
+     * Callback for value changes
+     */
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Callback for blur events
+     */
+    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Helper text or notes to display below the input
+     */
+    helperText?: string;
+    /**
+     * Note text to display below the input
+     */
+    note?: string;
+    /**
+     * The id of the input
+     */
+    id?: string;
+}
+/**
+ * A modern input text component with floating label for InstinctHub
+ * @example
+ * ```tsx
+ * <InputText label="Name" name="name" />
+ * ```
+ * @prop {string} label - The label text for the input field
+ * @prop {string} name - The name attribute for the input element
+ * @prop {string} value - The current value of the input field
+ * @prop {string} placeholder - Placeholder text to display when input is empty
+ * @prop {boolean} required - Whether the input is required
+ * @prop {string} type - The type of input field (text, email, password, etc.)
+ * @prop {number} maxLength - The maximum number of characters allowed in the input
+ * @prop {boolean} disabled - Whether the input is disabled
+ * @prop {boolean} readOnly - Whether the input is read-only
+ * @prop {string} className - Additional CSS classes to apply to the wrapper
+ * @prop {string} textTransform - Text transformation to apply (lowercase, uppercase, capitalize)
+ * @prop {string} error - Error message to display
+ * @prop {function} onChange - Callback for value changes
+ * @prop {function} onBlur - Callback for blur events
+ * @prop {string} helperText - Helper text or notes to display below the input
+ * @prop {string} note - Note text to display below the input
+ * @prop {string} id - The id of the input
+ */
+declare const InputText: React.FC<InputTextProps>;
+export default InputText;

package/dist/src/types/components/forms/InputTextarea.d.ts

@@ -0,0 +1,47 @@
+import React, { ChangeEvent, TextareaHTMLAttributes } from "react";
+interface InputTextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /**
+     * Label text for the textarea
+     */
+    label: string;
+    /**
+     * Optional error message to display
+     */
+    error?: string;
+    /**
+     * Optional helper text displayed below the textarea
+     */
+    helperText?: string;
+    /**
+     * Optional minimum number of rows for the textarea
+     * @default 3
+     */
+    minRows?: number;
+    /**
+     * Optional maximum number of rows for the textarea
+     */
+    maxRows?: number;
+    /**
+     * Whether to automatically resize the textarea based on content
+     * @default true
+     */
+    autoResize?: boolean;
+    /**
+     * Callback for value changes
+     */
+    onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+    /**
+     * Optional text transform style
+     */
+    textTransform?: "lowercase" | "uppercase" | "capitalize" | "none";
+    /**
+     * Note text to display below the textarea
+     */
+    note?: string;
+}
+/**
+ * InputTextarea component for InstinctHub
+ * A modern textarea component that matches the InstinctHub design system
+ */
+declare const InputTextarea: React.FC<InputTextareaProps>;
+export default InputTextarea;

package/dist/src/types/components/forms/PasswordField.d.ts

@@ -1,10 +1,51 @@
+import React from "react";
 interface PasswordFieldProps {
-    names: string;
-    labels: string;
-    requireds?: boolean;
-    defaultValues?: string;
-    setValues?: (value: string) => void;
-    inputEvent?: (name: string, value: string) => void;
+    id?: string | null;
+    name: string;
+    label: string;
+    note?: string | null;
+    required?: boolean;
+    value?: string;
+    setValue?: (value: string) => void;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void | null;
+    setNameValue?: (name: string, value: string) => void | null;
+    error?: string | null;
+    className?: string | null;
+    helperText?: string | null;
 }
-export default function PasswordField({ names, labels, requireds, defaultValues, setValues, inputEvent, }: PasswordFieldProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * PasswordField component
+ * @component
+ * @example
+ * ```jsx
+ * import { PasswordField } from "@instincthub/react-ui";
+ *
+ * <PasswordField
+ *   id={["password"]}
+ *   name={["password"]}
+ *   label={["Password"]}
+ *   note={["Enter your password"]}
+ *   required={true}
+ *   value={""}
+ *   error={""}
+ *   className={""}
+ *   setValue={(value) => {
+ *     console.log(value);
+ *   }}
+ *   onChange={(e) => {
+ *     console.log(e);
+ *   }}
+ * />
+ * ```
+ * Props interface for the PasswordField component
+ * @property {string} id - ID for the input field
+ * @property {string} name - Name for the input field
+ * @property {string} label - Label for the input field
+ * @property {string} note - Note for the input field
+ * @property {boolean} required - Whether the field is required
+ * @property {string} value - Default value for the input field
+ * @property {(value: string) => void} setValue - Callback for setting values
+ * @property {(e: React.ChangeEvent<HTMLInputElement>) => void} onChange - Callback for input events
+ */
+export default function PasswordField({ id, name, label, note, required, value, setValue, onChange, setNameValue, error, className, helperText, }: PasswordFieldProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/types/components/forms/PhoneNumberInput.d.ts

@@ -8,5 +8,27 @@ interface PhoneNumberInputProps {
     names?: string;
     inputEvent?: (event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => void;
 }
+/**
+ *
+ * @component
+ * @example
+ * ```jsx
+ * import { PhoneNumberInput } from "@instincthub/react-ui";
+ *
+ * <PhoneNumberInput
+ *   phoneCode="234"
+ *   defaultValues={{ mobile: "1234567890" }}
+ *   names="phoneNumber"
+ *   inputEvent={(event) => {
+ *     console.log(event);
+ *   }}
+ * />
+ * ```
+ * Props interface for the PhoneNumberInput component
+ * @property {string} phoneCode - Default country code
+ * @property {object} defaultValues - Default values for the input field
+ * @property {string} names - Name of the input field
+ * @property {(event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => void} inputEvent - Callback for input events
+ */
 declare const PhoneNumberInput: React.FC<PhoneNumberInputProps>;
 export default PhoneNumberInput;

package/dist/src/types/components/forms/RadioField.d.ts

@@ -6,11 +6,44 @@ interface RadioOption {
 }
 interface RadioFieldProps {
     options?: RadioOption[];
-    names: string;
-    labels: string;
-    requireds?: boolean;
-    defaultValues?: string | number;
+    name: string;
+    label: string;
+    required?: boolean;
+    defaultValue?: string | number;
     setSelectedValue?: (value: string) => void;
+    setNameIDValueIndex?: (name: string, id: string, value: string, index: number) => void;
+    note?: string;
 }
+/**
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { RadioField } from "@instincthub/react-ui";
+ *
+ * <RadioField
+ *   options={[
+ *     { id: 1, title: "Option 1" },
+ *     { id: 2, title: "Option 2" },
+ *     { id: 3, title: "Option 3" },
+ *   ]}
+ *   names="radioField"
+ *   labels="Radio Field"
+ *   requireds={true}
+ *   defaultValues={1}
+ *   setSelectedValue={(value) => {
+ *     console.log(value);
+ *   }}
+ * />
+ * ```
+ * Props interface for the RadioField component
+ * @property {RadioOption[]} options - Array of options for the radio field
+ * @property {string} names - Name of the input field
+ * @property {string} labels - Label for the radio field
+ * @property {boolean} requireds - Whether the field is required
+ * @property {string | number} defaultValues - Default value for the radio field
+ * @property {(name: string, id: string, value: string, index: number) => void} setNameIDValueIndex - Callback for setting name, id, value, and index
+ * @property {(value: string) => void} setSelectedValue - Callback for setting the selected value
+ */
 declare const RadioField: React.FC<RadioFieldProps>;
 export default RadioField;

package/dist/src/types/components/forms/RadioSimple.d.ts

@@ -1,11 +1,38 @@
 import React from "react";
 interface RadioSimpleProps {
-    ids: string;
-    names: string;
-    values: string | number;
-    labels: string;
+    id: string;
+    name: string;
+    value: string | number;
+    label: string;
     checked?: boolean;
-    inputEvent?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    note?: string;
 }
+/**
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { RadioSimple } from "@instincthub/react-ui";
+ *
+ * <RadioSimple
+ *   id="radio-simple"
+ *   name="radio-simple"
+ *   value="1"
+ *   label="Radio Simple"
+ *   checked={true}
+ *   inputEvent={(e) => {
+ *     console.log(e);
+ *   }}
+ * />
+ * ```
+ * Props interface for the RadioSimple component
+ * @property {string} id - ID for the radio input
+ * @property {string} name - Name for the radio input
+ * @property {string | number} value - Value for the radio input
+ * @property {string} label - Label for the radio input
+ * @property {boolean} checked - Whether the radio input is checked
+ * @property {(e: React.ChangeEvent<HTMLInputElement>) => void} inputEvent - Callback for input events
+ */
 declare const RadioSimple: React.FC<RadioSimpleProps>;
 export default RadioSimple;

package/dist/src/types/components/forms/RangeRadio.d.ts

@@ -1,10 +1,12 @@
 import React from "react";
 interface RangeRadioProps {
-    ranges: number;
-    names?: string;
-    labels: string;
-    requireds?: boolean;
+    range: number;
+    name?: string;
+    label: string;
+    required?: boolean;
     setSelectedValue?: (value: string) => void;
+    setNameIDValueIndex?: (name: string, id: string, value: string, index: number) => void;
+    note?: string;
 }
 declare const RangeRadio: React.FC<RangeRadioProps>;
 export default RangeRadio;

package/dist/src/types/components/forms/SearchFieldDB.d.ts

@@ -0,0 +1,54 @@
+import React from "react";
+interface SearchFieldDBProps {
+    /** The API endpoint path to search */
+    urlPath: string;
+    /** Function to set data state with API results */
+    setData: React.Dispatch<React.SetStateAction<any>>;
+    /** Function to set next page URL */
+    setNext: React.Dispatch<React.SetStateAction<string | null>>;
+    /** Function to set previous page URL */
+    setPrevious: React.Dispatch<React.SetStateAction<string | null>>;
+    /** Auth token for API requests */
+    token?: string | null;
+    /** Search parameters from URL */
+    params: {
+        channel?: string;
+        [key: string]: any;
+    };
+    searchParams: {
+        search?: string;
+        [key: string]: any;
+    };
+    /** Custom label for search placeholder */
+    labels?: string;
+}
+/**
+ * SearchFieldDB component for searching items and updating data via API
+ *
+ * @component
+ * @example
+ * ```tsx
+ *
+ * <SearchFieldDB
+ *   urlPath={`channels/courses/${channel}/?`}
+ *   setData={setData}
+ *   setNext={setNext}
+ *   setPrevious={setPrevious}
+ *   token={session?.user?.name?.token}
+ *   searchParams={{ channel, search }}
+ *   labels="Courses"
+ * />
+ * ```
+ * Props interface for the THeadSortList component
+ * @property {string} [urlPath] - Optional authentication token
+ * @interface THeadSortListProps
+ * @property {React.Dispatch<React.SetStateAction<any[]>>} setData - State setter for the table data
+ * @property {React.Dispatch<React.SetStateAction<string>>} setNext - State setter for the pagination next URL
+ * @property {React.Dispatch<React.SetStateAction<string>>} setPrevious - State setter for the pagination next URL
+ * @property {Function} fetchData - Function to fetch data from the API
+ * @property {string} [token] - Optional user/account handle
+ * @property {{channel?: string; search?: string; }} searchParams - Search params for the API
+ * @property {string} labels - Field name for visual search placeholder
+ */
+declare const SearchFieldDB: React.FC<SearchFieldDBProps>;
+export default SearchFieldDB;

package/dist/src/types/components/forms/SearchObjectsFromDB.d.ts

@@ -0,0 +1,50 @@
+import React from "react";
+import { SearchObjectItemType } from "@/types";
+interface SearchObjectsFromDBProps<T extends SearchObjectItemType = SearchObjectItemType> {
+    label: string | null;
+    token: string;
+    handle: string;
+    setSelected: React.Dispatch<React.SetStateAction<T[]>>;
+    value?: T[];
+    appLabel?: string;
+    modelName?: string;
+    filterChannel?: boolean;
+    limit_query?: number;
+    limit_select?: number;
+    key_name?: string;
+    placeholder?: string;
+    searchUrl?: string;
+    selected: T[];
+    err?: boolean;
+}
+/**
+ * Component for searching objects from a database with filtering capabilities
+ * @example
+ * ```tsx
+ * <SearchObjectsFromDB<UserType>
+ *  token={authToken}
+ *  handle={channelHandle}
+ *  set={setSelectedUser}
+ *  key_name="display_name"
+ *  selected={selectedUsers}
+ * />
+ * ```
+ * @param {SearchObjectsFromDBProps<T>} props - The component props
+ * @param {string} props.token - The token for the API request
+ * @param {string} props.handle - The handle for the API request
+ * @param {Function} props.setSelected - The function to set the handle object
+ * @param {T[]} props.value - The prevent defaults for the API request
+ * @param {string} props.appLabel - The app label for the API request
+ * @param {string} props.modelName - The model name for the API request
+ * @param {boolean} props.filterChannel - The filter channel for the API request
+ * @param {number} props.limit_query - The limit for the API request
+ * @param {number} props.limit_select - The limit user can select (0 means unlimited)
+ * @param {keyof T | "name_plus_username"} props.key_name - The key_name to display search results (option[key_name])
+ * @param {string} props.placeholder - The placeholder for the API request
+ * @param {string} props.searchUrl - The search url for the API request
+ * @param {T[]} props.selected - The selected for the API request
+ * @param {boolean} props.err - The error for the API request
+ */
+declare function SearchObjectsFromDB<T extends SearchObjectItemType = SearchObjectItemType>({ label, token, handle, setSelected, appLabel, modelName, filterChannel, limit_query, limit_select, key_name, placeholder, searchUrl, selected, err, }: SearchObjectsFromDBProps<T>): JSX.Element;
+declare const _default: typeof SearchObjectsFromDB;
+export default _default;

package/dist/src/types/components/forms/SubmitButton.d.ts

@@ -0,0 +1,29 @@
+import React, { ReactNode } from "react";
+interface SubmitButtonProps {
+    /** Button label text */
+    label: string | ReactNode;
+    /** Loading state: 0 = loading, 1 = ready, 2 = success, 3 = error */
+    status?: number;
+    /** Button type attribute */
+    type?: "submit" | "button" | "reset";
+    /** Button name attribute */
+    name?: string;
+    /** Button style variant */
+    variant?: "important" | "outlined" | "primary" | "danger" | "default" | "icon";
+    /** Disable the button */
+    disabled?: boolean;
+    /** Button onClick handler */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Auto-reset timer (in ms) for loading state (0 to disable) */
+    autoResetTimeout?: number;
+    /** Custom class name to add to the button */
+    className?: string;
+    /** ARIA label for better accessibility */
+    ariaLabel?: string;
+    /** ID for the button element */
+    id?: string;
+    /** Data testid for testing */
+    testId?: string;
+}
+declare const _default: React.FC<SubmitButtonProps>;
+export default _default;

package/dist/src/types/components/forms/TBodyNoData.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const TBodyNoData: React.FC;
+export default TBodyNoData;

package/dist/src/types/components/forms/THeadSortBtn.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+/**
+ * Props interface for the THeadSortBtn component
+ * @interface THeadSortBtnProps
+ */
+interface THeadSortBtnProps {
+    /** The key used for sorting */
+    keys: string;
+    /** The content to display in the table header */
+    labels: React.ReactNode;
+    /** The currently sorted column key */
+    sorted: string;
+    /** Optional minimum width for the column */
+    widths?: string;
+    /** Function to call when clicking the sort button */
+    handleSort: (key: string) => void;
+}
+/**
+ * A sortable table header component with up/down arrows to indicate sort direction
+ *
+ * @param {THeadSortBtnProps} props - Component props
+ * @returns {JSX.Element} - Rendered component
+ */
+declare const THeadSortBtn: React.FC<THeadSortBtnProps>;
+export default THeadSortBtn;

package/dist/src/types/components/forms/THeadSortList.d.ts

@@ -0,0 +1,76 @@
+import React from "react";
+/**
+ * Interface for table header item configuration
+ * @interface HeaderItem
+ * @property {string} label - The display label for the header
+ * @property {string} [key] - Optional key for sortable columns, matches data object property
+ * @property {string} [width] - Optional CSS width value for the column
+ */
+interface HeaderItem {
+    label: string;
+    key?: string;
+    width?: string;
+}
+interface THeadSortListProps {
+    setData: React.Dispatch<React.SetStateAction<any>>;
+    setNext: React.Dispatch<React.SetStateAction<string | null>>;
+    onChange?: (urlPath: string, reset?: boolean) => void;
+    token?: string;
+    handle?: string;
+    urlPath: string;
+    headerItems: HeaderItem[];
+}
+/**
+ * Component for sortable table headers
+ * Renders a table header row with sortable columns based on the provided configuration
+ *
+ * @component
+ * @example
+ * ```tsx
+ * Steps for implementing Sort:
+ * 1. Declare the header list array
+ * const headerItems = [
+ *   { label: "No." },
+ *   { label: "Name" },
+ *   { label: "Enrolled", key: "total_enrolled" },
+ *   { label: "Courses", key: "total_courses" },
+ *   { label: "Projects", key: "total_projects" },
+ *   { label: "Visibility", key: "" },
+ *   { label: "Updated", key: "" },
+ * ];
+ * b. declare width
+ * const headerItems = [
+ *   { label: "No.", width: 'auto' },
+ *   { label: "Name", width: '200px' },
+ *   { label: "Email", width: 'auto' },
+ *   { label: "Ap Fee", width: '100px' },
+ *   { label: "Status", key: "status", width: 'auto' },
+ *   { label: "Mode", key: "mode", width: '100px' },
+ *   { label: "First Choice", key: "first_course_choice_title", width: '200px' },
+ *   { label: "Last Action", key: "last_action", width: '200px'},
+ *   { label: "Action", width: 'auto' },
+ * ];
+ *
+ * 2. Import the component and add props
+ * <THeadSortList
+ *   setData={setData}
+ *   setNext={setNext}
+ *   onChange={onChange}
+ *   token={token}
+ *   urlPath="/api/users"
+ *   headerItems={headerItems}
+ * />
+ *
+ * ```
+ * Props interface for the THeadSortList component
+ * @interface THeadSortListProps
+ * @property {React.Dispatch<React.SetStateAction<any[]>>} setData - State setter for the table data
+ * @property {React.Dispatch<React.SetStateAction<string>>} setNext - State setter for the pagination next URL
+ * @property {Function} onChange - Function to fetch data from the API
+ * @property {string} [token] - Optional authentication token
+ * @property {string} [handle] - Optional user/account handle
+ * @property {string} urlPath - API endpoint path for data
+ * @property {HeaderItem[]} headerItems - Configuration for table headers
+ */
+declare const THeadSortList: React.FC<THeadSortListProps>;
+export default THeadSortList;

package/dist/src/types/components/forms/TextArea.d.ts

@@ -1,13 +1,37 @@
 import React from "react";
 interface TextAreaProps {
-    names: string;
-    labels: string;
+    name: string;
+    label: string;
     rows?: number;
-    defaultValues?: string;
+    defaultValue?: string;
     placeholder?: string;
-    maxLengths?: number | string;
-    setValues?: (value: string) => void;
-    inputEvent?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    maxLength?: number | string;
+    note?: string;
+    setValue?: (value: string) => void;
+    onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
 }
+/**
+ * TextArea component
+ * @example
+ * ```tsx
+ * <TextArea
+ *   name="textArea"
+ *   label="Text Area"
+ *   rows={10}
+ *   defaultValue="Default value"
+ * />
+ * ```
+ * Props interface for the TextArea component
+ * @property {string} name - The name of the TextArea
+ * @property {string} label - The label of the TextArea
+ * @property {number} rows - The number of rows of the TextArea
+ * @property {string} defaultValue - The default value of the TextArea
+ * @property {string} placeholder - The placeholder of the TextArea
+ * @property {number | string} maxLength - The max length of the TextArea
+ * @property {string} note - The note of the TextArea
+ * @property {(value: string) => void} setValue - The function to set the value of the TextArea
+ * @property {(e: React.ChangeEvent<HTMLTextAreaElement>) => void} onChange - The function to handle the change of the TextArea
+ * @returns {React.ReactElement} The TextArea component
+ */
 declare const TextArea: React.FC<TextAreaProps>;
 export default TextArea;