diff --git a/frontend/src/app/components/action/README.md b/frontend/src/app/components/action/README.md new file mode 100644 index 00000000..56d916c2 --- /dev/null +++ b/frontend/src/app/components/action/README.md @@ -0,0 +1,168 @@ +# `Actions` Component + +A reusable and customizable dropdown component for React applications. The `Actions` component allows you to display a list of actions that users can select from. It provides flexibility to customize the dropdown button, the items, and their behavior, and can be styled with custom CSS. + +## Features + +- **Customizable Dropdown**: Modify dropdown button, menu, items, and icons. +- **Responsive**: Works seamlessly across all screen sizes. +- **TypeScript Support**: Fully typed with TypeScript for better development experience. +- **Customizable Styling**: Pass custom CSS classes for the button, menu, and items. +- **Custom Icons**: Add custom icons in the dropdown button or menu items. + +## Installation + +To install `Actions` in your project, run the following command: + +```bash +npm install path-to-actions-component +``` + +## Usage +### Basic Usage +Here is an example of how to use the Actions component in your React project: +```tsx +import React from 'react'; +import { Actions } from 'path-to-actions-component'; + +const items = [ + { label: 'Edit', value: 'edit' }, + { label: 'Delete', value: 'delete' }, + { label: 'Archive', value: 'archive' }, +]; + +const handleItemClick = (value: string, index?: any) => { + console.log(`Item clicked: ${value} at index ${index}`); +}; + +const MyComponent = () => { + return ( + + ); +}; + +export default MyComponent; +``` + +## Props Overview + +The `Actions` component accepts the following props: + +| **Prop Name** | **Type** | **Description** | **Required?** | +|-----------------------------|------------------------------------|---------------------------------------------------------------------------------------------------------------|---------------| +| `label` | `string` | The label displayed on the dropdown toggle button. Example: `"Choose Action"` | Yes | +| `items` | `DropdownItem[]` | Array of items to display in the dropdown. Each item must have a `label` (string) and a `value` (any). | Yes | +| `disable` | `boolean` | If `true`, the dropdown button will be disabled, preventing users from interacting with it. Default is `false`.| No | +| `customCssToggleBtn` | `string` | Custom CSS class for the dropdown toggle button. Default is `'custom-action-btn'`. | No | +| `customCssMenu` | `string` | Custom CSS class for the dropdown menu. Default is `'custom-action-menu'`. | No | +| `customCssMenuItem` | `string` | Custom CSS class for each dropdown item. Default is `'custom-action-item'`. | No | +| `customDropdownIcon` | `ReactNode` | A custom icon to display next to the label in the dropdown toggle button. Example: `` | No | +| `onItemClick` | `(value: string, index?: any) => void` | Callback function triggered when an item is clicked. Receives the `value` and optionally the `index`. | Yes | +| `toggleButtonVariant` | `ButtonVariant` | Variant for the dropdown button, such as `primary`, `secondary`. | No | +| `toggleButtonSize` | `ButtonSize` | Size of the dropdown button, such as `sm`, `lg`. | No | + +### Prop Descriptions + +- **`label`** (`string`) + **Required**: The text displayed on the dropdown button. This is usually something like "Select Action" or "Choose Option." + +- **`items`** (`DropdownItem[]`) + **Required**: An array of `DropdownItem` objects. Each item should have a `label` (the text displayed) and a `value` (the value associated with the item). Example: + + ```ts + const items = [ + { label: 'Edit', value: 'edit' }, + { label: 'Delete', value: 'delete' } + ]; + ``` +## Example +Here’s a complete example of using the Actions component with custom styles and icons: +```tsx +import React from 'react'; +import { Actions } from 'path-to-actions-component'; +import { FaEdit, FaTrash, FaArchive } from 'react-icons/fa'; + +const items = [ + { label: 'Edit', value: 'edit' }, + { label: 'Delete', value: 'delete' }, + { label: 'Archive', value: 'archive' }, +]; + +const handleItemClick = (value: string, index?: any) => { + console.log(`You clicked on ${value} at index ${index}`); +}; + +const MyComponent = () => { + return ( + } // Custom icon for dropdown button + /> + ); +}; + +export default MyComponent; +``` + +## CSS Customization + +You can pass custom CSS classes to various parts of the dropdown to match your project’s branding. For example: + +```tsx + +``` +This will apply the custom classes to the dropdown button, menu, and items respectively. + +## Custom Icons +You can provide custom icons to be displayed in the dropdown button or for each menu item: +```tsx +} // Custom icon for the dropdown button +/> +``` + +## Exports +The module exports the Actions component and the types DropdownItem and IActions: + +```ts +// Named and default exports +export { default as Actions } from './Actions'; // Named export +export type { DropdownItem, IActions } from './IActions'; // Type exports +``` + +The Actions component can be imported in other files as: + +```tsx +import { Actions } from 'path-to-actions-component'; // Named import +``` +or + +```tsx +import Actions from 'path-to-actions-component'; // Default import +``` +The types DropdownItem and IActions can also be imported for use in TypeScript files: + +```tsx +import type { DropdownItem, IActions } from 'path-to-actions-component'; +``` + +## Conclusion +The ```Actions``` component provides a flexible and customizable dropdown menu for your React application. It supports custom styling, icons, and behavior, allowing you to integrate it easily into your app's UI. You can control how each item behaves on click, and customize its appearance by passing in your own CSS classes. \ No newline at end of file diff --git a/frontend/src/app/components/avatar/README.md b/frontend/src/app/components/avatar/README.md new file mode 100644 index 00000000..7db27c62 --- /dev/null +++ b/frontend/src/app/components/avatar/README.md @@ -0,0 +1,164 @@ +# `Avatar` Component + +The `Avatar` component is a simple, reusable component for displaying user profile avatars. It supports displaying user initials derived from the `firstName` and `lastName` props or showing a fallback question mark (`?`) if no names are provided. It can be customized with CSS classes for both the image container and the text (initials) inside the avatar. + +## Features + +- **Customizable Avatar**: Display initials or fallback text (`?`). +- **Flexible Styling**: Customizable CSS for the avatar container and text. +- **Supports Optional Props**: Includes options for first and last name to generate initials. +- **TypeScript Support**: Fully typed with TypeScript for better development experience. + +## Installation + +To install the `Avatar` component into your project, use the following command: + +```bash +npm install avatar-component-package +``` + +## Usage +Here is an example of how to use the `Avatar` component in your React project: + +```tsx +import React from 'react'; +import Avatar from 'path-to-avatar-component'; +import './App.css'; + +const App: React.FC = () => { + return ( +
+ {/* Using the Avatar component */} + +
+ ); +}; + +export default App; +``` + +## Props Overview +The `Avatar` component accepts the following props: + + +| **Prop Name** | **Type** | **Description** | +|---------------------|-----------------------|-------------------------------------------------------------------------------------------------------------| +| `firstName` | `string` (optional) | The user's first name. Used to generate the first initial for the avatar. | +| `lastName` | `string` (optional) | The user's last name. Used to generate the second initial for the avatar. | +| `customImageCss` | `string` (optional) | Custom CSS class for the avatar image container. Defaults to 'avatar-image'. | +| `customTextCss` | `string` (optional) | Custom CSS class for the initials text inside the avatar. Defaults to 'avatar-txt'. | + +## Prop Details: +- `firstName` **(optional)**: +The first name of the user, which is used to generate the first initial. If provided, the first letter will be capitalized and used as part of the avatar's initials. + +- `lastName` **(optional)**: +The last name of the user, which is used to generate the second initial. If provided, the first letter will be capitalized and used as part of the avatar's initials. + +- `customImageCss` **(optional)**: +A custom CSS class that can be passed to the avatar's image container to apply custom styles. If not provided, the default class 'avatar-image' will be used. + +- `customTextCss` **(optional)**: +A custom CSS class for the text (initials) inside the avatar. This can be used to style the initials. If not provided, the default class 'avatar-txt' will be used. + +## Component Logic +#### `getInitials` Function +The `Avatar` component includes a helper function `getInitials`, which generates the initials based on the provided `firstName` and `lastName` props. + +- If both `firstName` and `lastName` are provided, it returns the first letter of each, capitalized. +- If only one of the names is provided, it uses the first letter of that name. +- If neither `firstName` nor `lastName` are provided, it returns '?' as a fallback. + +##### Example Output +- **With First Name and Last Name**: If `firstName="John"` and `lastName="Doe"`, the component will display JD. +- **With First Name Only**: If `firstName="Alice"` and `lastName=""`, the component will display A. +- **With No Name**: If no `firstName` or `lastName` are provided, the component will display ?. + + +## CSS Customization +You can pass custom CSS classes to various parts of the avatar to match your project's branding. For example, you can customize the avatar image or text like this: + +```tsx + +``` + +Here is an example of how you can style the avatar components using custom CSS: + +```css +/* Custom styling for the avatar image */ +.my-custom-avatar { + border-radius: 50%; + background-color: #d1e7f5; + height: 50px; + width: 50px; + display: flex; + align-items: center; + justify-content: center; +} + +/* Custom styling for the avatar text (initials) */ +.my-custom-avatar-text { + font-size: 20px; + color: #4a90e2; + font-weight: bold; +} +``` + +##### Example of Full Usage +```tsx +import React from 'react'; +import Avatar from 'path-to-avatar-component'; + +const App: React.FC = () => { + return ( +
+ {/* Avatar with both first and last names */} + + + {/* Avatar with only the first name */} + + + {/* Avatar with no names, displaying a question mark */} + +
+ ); +}; + +export default App; +``` + +## Accessibility +The `Avatar` component includes an `aria-label="User profile image"` attribute for accessibility, which helps screen readers understand the content and purpose of the avatar. + +## Default and Named Exports +By default, the `Avatar` component is exported as the default export: + +```tsx +export default Avatar; +``` + +You can also export it as a named export if needed: + +```tsx +export { Avatar }; +``` diff --git a/frontend/src/app/components/button/README.md b/frontend/src/app/components/button/README.md new file mode 100644 index 00000000..7b645a1c --- /dev/null +++ b/frontend/src/app/components/button/README.md @@ -0,0 +1,171 @@ +# Button & Custom Button Components + +This repository provides reusable and customizable button components for your React application. It includes several variants like `primary`, `secondary`, and `tertiary`, along with custom buttons like `SaveButton`, `CancelButton`, `DiscardButton`, and `CustomPillButton`. + +The `Button` component is designed to be flexible and easy to integrate into any project with minimal configuration. You can customize the button's size, variant, label, and icons. + +## Table of Contents + +- [Installation](#installation) +- [Components](#components) + - [Button](#button) + - [SaveButton](#savebutton) + - [CancelButton](#cancelbutton) + - [DiscardButton](#discardbutton) + - [CustomPillButton](#custompillbutton) +- [Custom Button CSS](#custom-button-css) +- [Example Usage](#example-usage) +- [Exports](#exports) + +## Installation + +To install the button components in your project, run the following command: + +```bash +npm install path-to-your-button-component +``` + +## Components +### `Button` +A reusable button component that supports multiple sizes and variants. The Button component uses a button HTML element with several customization options. + +**Props** + +| **Prop Name** | **Type** | **Description** | **Required?** | +|-----------------|-----------------------------------|----------------------------------------------------------------------------------------------------------|---------------| +| `size` | `'small' | 'medium'` | The size of the button. The options are `small` and `medium`. Default is `medium`. | No | +| `variant` | `'primary' | 'secondary' | 'tertiary'` | The variant of the button. The options are `primary`, `secondary`, and `tertiary`. Default is `primary`. | No | +| `className` | `string` | Optional custom CSS class to apply to the button. | No | +| `onClick` | `(event: React.MouseEvent) => void` | The event handler for the button's click event. | Yes | + +**Example Usage** +```tsx + + + + + +``` +--- + +### `SaveButton` +A specialized button that displays a save icon and a label. The SaveButton uses the Button component with a primary variant and shows a disk icon by default. + +**Props** + +| **Prop Name** | **Type** | **Description** | **Required?** | +|-----------------|-----------------------------------|----------------------------------------------------------------------------------------------------------|---------------| +| `clickHandler` | `(event: React.MouseEvent) => void` | The event handler for the button's click event. | Yes | +| `label` | `string` | The label to display on the button. If not provided, the default label is "Save". | No | +| `showIcon` | `boolean` | Whether or not to show the save icon. Default is `true`. | No | + +**Example Usage** +```tsx + +``` +--- + +### `CancelButton` +A button that displays a cancel icon and a label. The CancelButton uses the Button component with a tertiary variant and shows a close icon by default. + +**Props** + +| **Prop Name** | **Type** | **Description** | **Required?** | +|-----------------|-----------------------------------|----------------------------------------------------------------------------------------------------------|---------------| +| `clickHandler` | `(event: React.MouseEvent) => void` | The event handler for the button's click event. | Yes | +| `label` | `string` | The label to display on the button. If not provided, the default label is "Cancel". | No | +| `showIcon` | `boolean` | Whether or not to show the cancel icon. Default is `true`. | No | + +**Example Usage** +```tsx + +``` +--- + +### `DiscardButton` + +A button that displays a discard icon and a label. The DiscardButton uses the Button component with a secondary variant and shows a close icon by default. + +**Props** + +| **Prop Name** | **Type** | **Description** | **Required?** | +|-----------------|-----------------------------------|----------------------------------------------------------------------------------------------------------|---------------| +| `clickHandler` | `(event: React.MouseEvent) => void` | The event handler for the button's click event. | Yes | +| `label` | `string` | The label to display on the button. If not provided, the default label is "Discard Changes". | No | +| `showIcon` | `boolean` | Whether or not to show the discard icon. Default is `true`. | No | + +**Example Usage** +```tsx + +``` + +--- + +### `CustomPillButton` + +**Props** +A custom pill-shaped button that displays a label and an optional close button (X) for dismissing. + +| **Prop Name** | **Type** | **Description** | **Required?** | +|-----------------|-----------------------------------|----------------------------------------------------------------------------------------------------------|---------------| +| `clickHandler` | `(event: any) => void` | The event handler for the button's click event. | Yes | +| `label` | `string | number` | The label to display on the pill button. | Yes | + +**Example Usage** +```tsx + +``` + +--- + + + +**Example Usage** +```tsx + + + + + +``` + +## Example Usage +Here is how you can use the components in your application: +```tsx +import { Button, SaveButton, CancelButton, DiscardButton, CustomPillButton } from 'path-to-your-button-component'; + +const App = () => { + const handleSave = () => console.log('Save clicked'); + const handleCancel = () => console.log('Cancel clicked'); + const handleDiscard = () => console.log('Discard clicked'); + const handlePillClick = () => console.log('Pill button clicked'); + + return ( +
+ + + + + + + + + +
+ ); +}; +``` \ No newline at end of file diff --git a/frontend/src/app/components/form/README.md b/frontend/src/app/components/form/README.md new file mode 100644 index 00000000..a5668626 --- /dev/null +++ b/frontend/src/app/components/form/README.md @@ -0,0 +1,357 @@ +# Form Component Documentation + +This documentation covers the usage and features of the `Form` component, which renders a dynamic form with multiple input types and configurable fields. It is designed to handle a wide variety of form elements such as text inputs, dropdowns, date pickers, checkboxes, and more. + +## Table of Contents +1. [Overview](#overview) +2. [Props](#props) +3. [FormField Types](#formfield-types) +4. [Usage](#usage) +5. [Component Structure](#component-structure) +6. [Custom Styling](#custom-styling) +7. [Example Usage](#example-usage) + +--- + +## Overview + +The `Form` component is a flexible and extensible form renderer built using **React**. It supports a wide variety of input types (e.g., text fields, checkboxes, dropdowns, date pickers) and is fully customizable. The component dynamically generates form fields based on the `formRows` prop, which contains a 2D array of field definitions. + +--- + +## Props + +The `Form` component accepts the following props: + +| Prop Name | Type | Description | +|----------------------|------------------------------------------|-------------| +| `formRows` | `IFormField[][]` | A 2D array representing the rows of form fields. Each field is defined by an object of type `IFormField`. | +| `formData` | `{ [key: string]: any | [Date, Date] }` | An object that holds the data for each form field. The keys are field names, and values can be any type or a date range (for fields like DateRange). | +| `editMode` | `boolean` (optional) | Optional flag to indicate whether the form is in "edit mode". Defaults to `true`. | +| `isLoading` | `RequestStatus` (optional) | Optional flag indicating whether data is being fetched or submitted. | +| `srMode` | `boolean` (optional) | Optional flag to render the form in a screen reader (accessibility) mode. | +| `handleInputChange` | `(graphQLPropertyName: string, value: string | [Date, Date]) => void` | Callback function to handle changes in input values. Receives the field's GraphQL property name and its updated value. | + +--- + +## FormField Types + +The `IFormField` interface defines the different types of fields that can be used in the form. Here are the main field types supported: + +| Field Type | Description | +|-------------------------|-------------| +| `FormFieldType.Text` | A standard text input field. | +| `FormFieldType.Search` | A text input field with search capabilities. | +| `FormFieldType.TextArea` | A multi-line text input (textarea). | +| `FormFieldType.DropDown` | A dropdown select input. | +| `FormFieldType.DropDownWithSearch` | A searchable dropdown input. | +| `FormFieldType.DateRange` | A date range picker input. | +| `FormFieldType.Date` | A single date picker input. | +| `FormFieldType.Checkbox` | A checkbox input. | +| `FormFieldType.Group` | A group of form fields, usually used to group related fields together. | +| `FormFieldType.Link` | A link or clickable text. | + +--- + +## Usage + +To use the `Form` component, you need to import it and provide the necessary props. + +### Basic Example + +```tsx +import React, { useState } from 'react'; +import { Form } from './Form'; +import { FormFieldType } from '../inputControl/IFormField'; + +const ExampleForm = () => { + const [formData, setFormData] = useState({ + name: '', + email: '', + isActive: true, + }); + + const handleInputChange = (property: string, value: any) => { + setFormData((prevData) => ({ + ...prevData, + [property]: value, + })); + }; + + const formRows = [ + [ + { + type: FormFieldType.Text, + label: 'Name', + graphQLPropertyName: 'name', + placeholder: 'Enter your name', + }, + { + type: FormFieldType.Text, + label: 'Email', + graphQLPropertyName: 'email', + placeholder: 'Enter your email', + }, + ], + [ + { + type: FormFieldType.Checkbox, + label: 'Is Active?', + graphQLPropertyName: 'isActive', + isChecked: formData.isActive, + }, + ], + ]; + + return ( +
+ ); +}; + +export default ExampleForm; +``` + +## Component Structure + +### `IFormField` Interface + +Each form field is defined by an object that conforms to the `IFormField` interface. Here's the structure of the `IFormField` interface: + +```tsx +export interface IFormField { + type: FormFieldType; // The type of the form field + label: string; // The label text for the field + graphQLPropertyName: string; // The GraphQL property name corresponding to the field + placeholder?: string; // Placeholder text + value?: any; // The value of the field + options?: Array; // Options for dropdowns, etc. + validation?: any; // Validation rule for the field + isDisabled?: boolean; // Flag to disable the field + isChecked?: boolean; // For checkbox type fields + textAreaRow?: number; // Row count for textarea fields + textAreaColoum?: number; // Column count for textarea fields + customLabelCss?: string; // Custom CSS class for label + customInputTextCss?: string; // Custom CSS class for input text + customPlaceholderCss?: string; // Custom CSS class for placeholder + isImage?: boolean; // For image-based dropdown fields + srMode?: boolean; // Flag for screen reader mode + handleSearch?: (searchQuery: string) => void; // Search handler for searchable dropdown + filteredOptions?: Array; // Filtered options for searchable dropdown + customInfoMessage?: string; // Custom message to be shown with the input + customMenuMessage?: string; // Custom menu message for dropdown +} +``` + +# Form Component Documentation + +## Field Types + +The `FormFieldType` enum provides the possible types of fields that can be rendered by the `Form` component. Here’s a list of available field types: + +```tsx +export enum FormFieldType { + Text = "Text", + Search = "Search", + TextArea = "TextArea", + DropDown = "DropDown", + DropDownWithSearch = "DropDownWithSearch", + DateRange = "DateRange", + Date = "Date", + Checkbox = "Checkbox", + Group = "Group", + Link = "Link" +} +``` + +# Field Types + +- **Text**: A standard text input field. +- **Search**: A text input field with search capabilities. +- **TextArea**: A multi-line text input field (textarea). +- **DropDown**: A dropdown select input field. +- **DropDownWithSearch**: A dropdown input with a search bar. +- **DateRange**: A field for selecting a date range. +- **Date**: A single date picker field. +- **Checkbox**: A checkbox field. +- **Group**: A group of related fields, usually used to group form fields that belong together (like a set of related options). +- **Link**: A clickable link, usually for navigation purposes. + +--- + +# Field Components + +## TextInput + +- **Type**: `FormFieldType.Text` +- **Props**: + - `label`: The label of the input field. + - `placeholder`: Placeholder text inside the input. + - `value`: The current value of the input. + - `onChange`: Callback function that handles input changes. + - `customLabelCss`, `customInputTextCss`: Custom CSS for the input field and label. + - `isEditing`: Whether the field is in edit mode. + +--- + +## SearchCustomInput + +- **Type**: `FormFieldType.Search` +- **Props**: + - Same as `TextInput`, but includes additional props for handling search options. + +--- + +## TextAreaInput + +- **Type**: `FormFieldType.TextArea` +- **Props**: + - `rows`: The number of rows for the textarea. + - `cols`: The number of columns for the textarea. + +--- + +## DropdownInput + +- **Type**: `FormFieldType.DropDown` +- **Props**: + - `options`: The options for the dropdown field. + - `isImage`: Whether the dropdown options are images. + +--- + +## DropdownSearchInput + +- **Type**: `FormFieldType.DropDownWithSearch` +- **Props**: + - `options`: List of options for the dropdown. + - `handleSearch`: Function to handle filtering options based on user input. + +--- + +## DateRangeInput + +- **Type**: `FormFieldType.DateRange` +- **Props**: + - `value`: The currently selected date range. + - `onChange`: Callback to handle date range changes. + +--- + +## DateInput + +- **Type**: `FormFieldType.Date` +- **Props**: + - `value`: The currently selected date. + - `onChange`: Callback to handle date changes. + +--- + +## CheckBoxInput + +- **Type**: `FormFieldType.Checkbox` +- **Props**: + - `isChecked`: Whether the checkbox is checked. + - `isLabel`: Whether to show the label next to the checkbox. + +--- + +## GroupInput + +- **Type**: `FormFieldType.Group` +- **Props**: + - `children`: Nested form fields inside the group. + - `isChildLabel`: Whether to show labels for child fields. + +--- + +## Link + +- **Type**: `FormFieldType.Link` +- **Props**: + - `href`: The URL the link should navigate to. + - `customLinkValue`: Custom link text or value. + - `customIcon`: Icon to display next to the link. + +--- +# Example Usage + +Here is an example of how you can use the Form component to create a form with various field types. + +```tsx +import React, { useState } from 'react'; +import { Form, FormFieldType } from './Form'; +import { IFormField } from '../inputControl/IFormField'; + +const ExampleForm = () => { + const [formData, setFormData] = useState({ + name: '', + email: '', + isActive: true, + }); + + const handleInputChange = (property: string, value: any) => { + setFormData((prevData) => ({ + ...prevData, + [property]: value, + })); + }; + + const formRows: IFormField[][] = [ + [ + { + type: FormFieldType.Text, + label: 'Name', + graphQLPropertyName: 'name', + placeholder: 'Enter your name', + }, + { + type: FormFieldType.Email, + label: 'Email', + graphQLPropertyName: 'email', + placeholder: 'Enter your email', + }, + ], + [ + { + type: FormFieldType.Checkbox, + label: 'Is Active?', + graphQLPropertyName: 'isActive', + isChecked: formData.isActive, + }, + ], + ]; + + return ( + + ); +}; + +export default ExampleForm; +``` + +# Custom Styling + +You can style individual elements using the `customLabelCss`, `customInputTextCss`, and `customPlaceholderCss` props. + +Here is an example of custom styling: + +```css +/* Example custom CSS for text input */ +.custom-label { + color: blue; +} + +.custom-input { + background-color: lightgrey; +} +``` + +By applying the `custom CSS` classes through the props, you can easily customize the look and feel of each input field in the form. \ No newline at end of file diff --git a/frontend/src/app/components/input-controls/README.md b/frontend/src/app/components/input-controls/README.md new file mode 100644 index 00000000..4ffdb312 --- /dev/null +++ b/frontend/src/app/components/input-controls/README.md @@ -0,0 +1,812 @@ +# Custom Input Components Documentation + +This document provides detailed usage and explanations for custom input components, including links, buttons, checkboxes, text inputs, dropdowns, search inputs, and date inputs, implemented in React. These components are highly customizable and suitable for various form scenarios. + +--- + +## Table of Contents + +1. [Link](#link) +2. [IconButton](#iconbutton) +3. [DeleteIcon](#deleteicon) +4. [Label](#label) +5. [TextInput](#textinput) +6. [DropdownInput](#dropdowninput) +7. [GroupInput](#groupinput) +8. [DateRangeInput](#daterangeinput) +9. [DateInput](#dateinput) +10. [CheckBoxInput](#checkboxinput) +11. [TextAreaInput](#textareainput) +12. [DropdownSearchInput](#dropdownsearchinput) +13. [SearchCustomInput](#searchcustominput) + +--- + +## Link + +The `Link` component is a customizable link element in React. It supports a variety of props to control its appearance and behavior. Below is a comprehensive list of the props available for the `Link` component. + +### Props + +| **Prop Name** | **Type** | **Description** | **Default Value** | +|-----------------------------|---------------------|-----------------------------------------------------------------------------------------------------------|---------------------------| +| `label` | `string` | The label for the link, used for accessibility purposes. This can be styled with custom CSS. | N/A | +| `value` | `string` | The value that will be appended to the `href` prop. This forms the complete URL by concatenating `href + value`. | N/A | +| `customLabelCss` | `string` | A custom CSS class to style the label part of the link. | `"ps-1"` (if not provided)| +| `customInputTextCss` | `string` | A custom CSS class to style the text inside the link. | N/A | +| `customLinkValue` | `string` | Custom text to be displayed in place of `value`. If not provided, `value` will be displayed. | `value` (if not provided) | +| `isPrefixcustomLinkValue` | `boolean` | Determines if the `customIcon` should be placed before (`true`) or after (`false`) the link text. | `false` | +| `customIcon` | `ReactNode` | A custom icon to be displayed before or after the link text based on the value of `isPrefixcustomLinkValue`. | N/A | +| `tableMode` | `boolean` | If `true`, the component is rendered inside a table cell (``). | `false` | +| `stickyCol` | `boolean` | When `tableMode` is `true`, this makes the table column sticky (i.e., fixed in position when scrolling). | N/A | +| `href` | `string` | The base URL to which `value` is appended to form the complete URL. | N/A | + +#### Example Usage +#### 1. Link with Custom Text and Icon +In this example: + +- The `label` is **"User Profile"**. +- The value **12345** is appended to `/profile/` to form the complete link `/profile/12345`. +- The link text will display **"View Profile"**. +- The custom icon **()** will be placed **after** the link text. +- Custom CSS classes are applied to the label (`customLabelCss`) and text (`customInputTextCss`). +- Since `tableMode` is `false`, the link will **not** be rendered inside a table cell. +```tsx +} + href="/profile/" + tableMode={false} +/> +``` + +```tsx + console.log('Link clicked!')} +/> +``` + + +## IconButton + +The `IconButton` component is used to display a clickable button with an icon and an optional label. The component is highly customizable with different props for controlling the appearance and behavior of the button. + +### Props + +| **Prop** | **Type** | **Description** | +|------------------------|------------------------|-------------------------------------------------------------------------------------------------------| +| `value` | `string` | The default value to display on the button if no `customLinkValue` is provided. | +| `customInputTextCss` | `string` (optional) | Custom CSS class for styling the text content of the button. | +| `customLinkValue` | `string` (optional) | Custom label to display on the button instead of the `value`. | +| `customIcon` | `ReactNode` (optional) | The icon to display on the button, typically passed as an icon component (e.g., ``). | +| `onChange` | `() => void` | Function to handle the click event of the button. This is typically used to trigger some action. | + +### Example Usage + + **1. Basic IconButton with Custom Text and Icon** + +In this example: + +- The `value` is **"Submit"** and it will be displayed as the label on the button. +- A custom icon **()** is added before the label text. +- A custom CSS class (`customInputTextCss`) is applied for additional styling of the button's content. +- When the button is clicked, the `onChange` function will be triggered. + +```tsx +import { FaCheck } from 'react-icons/fa'; + +} + onChange={() => console.log("Button clicked!")} +/> +``` + +#### Result: +- The button will display the text **"Submit Now"** and the **FaCheck** icon before it. +- Clicking the button will trigger the `onChange` function, which logs **"Button clicked!"** to the console. + +--- + + **2. IconButton Inside Table** +When tableMode is enabled (via renderTableCell), the button will be rendered within a table cell, making it suitable for use in table-based layouts. + +```tsx + +import { FaEdit } from 'react-icons/fa'; + +} + onChange={() => console.log("Edit clicked!")} +/> +``` + +#### Result: +- The button will appear in a table cell with the label **"Edit"** and the **FaEdit** icon. +- Clicking the button triggers the `onChange` event, logging **"Edit clicked!"** to the console. + +--- + **3. IconButton in Table Mode with Custom Text and Icon** +In this example, the `IconButton` is used with the `renderTableCell` function in table mode. + +```tsx + +import { FaTrash } from 'react-icons/fa'; + +} + onChange={() => console.log("Delete clicked!")} +/> + +``` + +#### Result: +- The button will be rendered within a table cell, showing the **"Delete Item"** text and the **FaTrash** icon. +- The `onChange` function will log **"Delete clicked!"** when clicked. + +--- + +## DeleteIcon + + +The `DeleteIcon` component renders a clickable icon (trash can) that triggers an action when clicked. + +### Props + +| Prop | Type | Description | +|-----------|--------------------|-----------------------------------------------------------| +| `label` | `string` | The label text associated with the icon (for accessibility). | +| `onChange` | `() => void` | The callback function to be triggered when the icon is clicked. | + +### Example Usage + +```tsx +import { FaTrashCan } from 'react-icons/fa'; + + console.log("Item deleted!")} +/> +``` +---- +## Label + +## `Label` Component + +The `Label` component renders a label element that displays a value, with optional custom styling. It is especially useful for displaying dynamic or static text in both normal and table layouts. + +### Props + +| Prop | Type | Description | +|--------------------|---------------------|---------------------------------------------------------------------------| +| `label` | `string` | The text or identifier associated with the label (for accessibility). | +| `value` | `string | ReactNode` | The content or value to be displayed within the label. | +| `customInputTextCss` | `string` | Optional custom CSS class to style the label text. | +| `stickyCol` | `boolean` | If `true`, the label will be rendered inside a sticky table column. | + +### Example Usage + +```tsx +