React UI Library

Description

The React UI Library by Oliasoft is a versatile set of React UI components designed for building modern web applications. It offers a comprehensive suite of layout, navigation, and control components that are flexible and configurable. With detailed examples available in Storybook, developers can easily understand how to implement and customize components for their needs. This library is open-source and can be freely used and modified under the MIT License.

Installation

To install the React UI Library, you can use either npm or yarn as follows:

Using npm:

npm install @oliasoft-open-source/react-ui-library

Using yarn:

yarn add @oliasoft-open-source/react-ui-library

Quick Start: React and Vite

To quickly start a new project using the React UI Library with Vite, you can use the create-vite tool, which sets up everything for you in a few simple steps:

1. Create a New Vite Project: Use the create-vite command to scaffold a new React project. Run:

   npm create vite@latest my-new-project -- --template react

   Or with yarn

   yarn create vite my-new-project --template react

2. Navigate into the Project Directory:

   cd my-new-project

3. Install React UI Library: Add the React UI Library to your project:

   npm install @oliasoft-open-source/react-ui-library

   Or with yarn

    yarn add @oliasoft-open-source/react-ui-library

4. Modify the Sample Page: Open the src/App.jsx file and import a component from the React UI Library to use it:

   import React from 'react';
   import { Text } from '@oliasoft-open-source/react-ui-library';
   
   function App() {
     return (
       <div className="App">
         <Text>Hello World!</Text>
       </div>
     );
   }
   
   export default App;

5. Start the Development Server: Begin development by starting the Vite server:

   npm run dev

   Or with yarn

    yarn dev

Components

• Accordion
• AccordionWithDefaultToggle
• Actions
• Badge
• Breadcrumb
• Button
• ButtonGroup
• Card
• CheckBox
• Column
• Divider
• Dialog
• Drawer
• Empty
• FileInput & readFile
• Field
• Flex
• FormRow
• Grid
• Icon
• InputGroup
• InputGroupAddon
• HelpIcon
• Heading
• Input
• Label
• List
• ListHeading
• ListSubheading
• Loader
• Menu
• Message
• Modal
• OptionDropdown
• Page
• Pagination
• Popover
• Portal
• PrintHeader
• ProgressBar
• RadioButton
• RichTextInput
• NativeSelect
• Row
• Select
• SideBar
• Slider
• Spacer
• Spinner
• Table
• Tabs
• Text
• TextLink
• TextArea
• toast
• Toggle
• Tooltip
• TopBar
• PopConfirm
• Tree
• NumberInput
• UnitInput

Storybook

To see live examples and demos of the components, please visit our Storybook.

License

This project is open-source and available under the MIT License.

Questions or Issues?

If you have any questions or encounter any issues, please open an issue on the issues page of the repository.

Components Details

Accordion Component

The Accordion component provides a versatile way to toggle visibility of content. It can be expanded to show content or collapsed to hide content, with additional options for styling and behavior customization.

Properties

| Prop Name | Description | Default Value | |----------------|-----------------------------------------------------------------------------|---------------| | heading | The content displayed in the accordion header. | None (required) | | expanded | If true, the accordion will be initially expanded. | false | | managed | Determines if the accordion's expansion state is controlled externally. | false | | bordered | If true, adds a border to the accordion. | false | | padding | If true, adds padding inside the accordion content area. | true | | children | The content to be displayed within the accordion when it is expanded. | None (optional) | | onClick | Function to handle click events on the accordion header. | None (optional) | | squareBottom | If true, the bottom of the accordion will be square instead of rounded. | false | | testId | An optional identifier used for testing. | None (optional) |

Usage Example

<Accordion
  heading="Section 1"
  expanded
  bordered
  onClick={() => console.log("Accordion clicked")}
>
  Content goes here
</Accordion>

AccordionWithDefaultToggle

An enhanced accordion component that includes a default toggle feature, allowing for more interactive and user-driven content display. It extends the basic functionality of an accordion by offering a built-in toggle option with customizable label and behavior.

Props

| Prop Name | Description | Default Value | |----------------------|------------------------------------------------------------------------------------------------------|----------------| | heading | The content to be displayed in the accordion header. | None (required)| | toggleLabel | Label for the default toggle switch. | None (required)| | expanded | Controls if the accordion is expanded or collapsed by default. | false | | defaultEnabled | Determines if the default toggle is enabled. | true | | onClickDefaultToggle| Function called when the default toggle is clicked. Receives the change event as an argument. | None (optional) | | padding | If true, adds padding to the accordion content for better spacing. | true | | children | The content to be displayed inside the accordion when it is expanded. | None (optional) |

Usage Example

<AccordionWithDefaultToggle
  heading="Section 1"
  toggleLabel="Enable Section"
  onClickDefaultToggle={(evt) => console.log(evt.target.checked)}
  expanded
  defaultEnabled
  padding
>
  {/* Content here */}
</AccordionWithDefaultToggle>

Actions

The Actions component is designed to display a set of actions or options. It supports primary actions, subactions, icons, tooltips, and can conditionally hide or disable actions. Ideal for implementing interactive lists, toolbars, or context menus within your application.

Properties

| Prop Name | Description | Type | Default Value (optional) | |----------------|-----------------------------------------------------------|------------------------------------------------------------|---------------------------| | actions | Array of action items to display. | IAction[] | | | closeLayer | Function to close the action layer. Optional. | TEmpty (Function with no arguments and no return value) | None |

IAction Properties

| Prop Name | Description | Type | Default Value (optional) | |--------------------|-----------------------------------------------------|---------------------------------------------------------------|---------------------------| | label | Text label for the action. | TStringNumberNull (String, number, or null) | None | | childComponent | Component to render as a child. | ReactNode | (() => ReactNode) | None | | subActions | Array of subaction items. | ISubAction[] | None | | primary | Marks the action as primary. | boolean | False | | icon | Icon to display alongside the label. | ReactNode | None | | testId | Identifier for testing purposes. | string | None | | hidden | Whether the action is hidden. | boolean | False | | disabled | Whether the action is disabled. | boolean | False | | onClick | Function to call when the action is clicked. | (evt: React.MouseEvent, id?: TStringOrNumber) => void | None | | tooltip | Tooltip to display on hover. | ReactNode | string | None |

Usage Example

<Actions
  actions={[
    {
      label: 'Action 1',
      onClick: () => console.log('Action 1 clicked'),
      primary: true,
    },
    {
      label: 'Action 2',
      onClick: () => console.log('Action 2 clicked'),
      disabled: true,
    },
    {
      label: 'Action 3',
      onClick: () => console.log('Action 3 clicked'),
      tooltip: 'This is a tooltip for Action 3',
    },
  ]}
/>

Badge

The Badge component is used to display a small badge, often used to show a count or to label an item with a short piece of text. This component can be customized with color, size, and optional dot mode for notifications or status indicators.

Properties

| Prop Name | Description | Default Value | |-----------|-------------------------------------------------------|---------------| | children | The content inside the badge. | None (optional) | | color | The color of the badge. | '' (empty string) | | title | The title or text displayed inside the badge. | None (optional) | | dot | If true, displays a dot instead of the children. | false | | margin | Margin around the badge. | None (optional) | | small | If true, displays a smaller version of the badge. | false |

Usage Example

<Badge
  color="red"
  title="New"
  dot
  margin="0 8px"
  small
>
  {/* Children here, if any */}
</Badge>

Breadcrumb Component

The Breadcrumb component displays a navigation path, typically used to show the user's location within a hierarchical structure.

Props:

| Prop Name | Description | Default Value | |---|---|---| | links | An array of objects representing the breadcrumb links. (See ILinkProps for details) | Required | | small | If true, displays a smaller version of the breadcrumb. | false |

ILinkProps Interface:

This interface defines the properties for each breadcrumb link.

| Prop Name | Description | |---|---| | type | The type of the link (implementation-specific). | Optional | | label | The text displayed for the link. | Optional | | url | The URL the link points to. | Optional | | onClick | A function to be called when the link is clicked. | Optional | | active | If true, indicates the link is the current location. | Optional | | disabled | If true, the link is disabled and cannot be clicked. | Optional | | element | A React node to render instead of the default link behavior. | Optional |

Usage Example:

<Breadcrumb
  links={[
    { label: 'Home', url: '/' },
    { label: 'Products', url: '/products' },
    { label: 'Current Product', active: true },
  ]}
/>

Button

The Button component is a versatile interface element that supports various styles and states, including active, basic, colored, disabled, and loading states. It's suitable for a wide range of actions within an application, from form submissions to interactive commands.

Props

| Prop | Description | Default Value | |---------------|------------------------------------------------------------|----------------| | active | Shows the button in an active state. | false | | basic | Applies a link-style appearance to the button. | false | | colored | Applies color styling. Can be boolean or string (color code or name). | false | | disabled | If true, disables the button. | false | | groupOrder | Specifies the button's position in a group (e.g., start, middle, end). | None (optional) | | icon | An icon to be displayed on the button. Deprecated in favor of using label. | None (optional) | | ignoreDisabledContext | Allows the button to be enabled even when inside DisabledContext. | false | | label | The content of the button, which can be text or a ReactNode. | None (optional) | | loading | Shows an activity indicator, suggesting that an action is in progress. | false | | name | The name of the button, which can be used in forms. | None (optional) | | onClick | Function to call when the button is clicked. | None (optional) | | pill | Deprecated. Use round for rounded corners instead. | false | | round | If true, applies rounded corners to the button. | false | | small | If true, displays the button in a smaller size. | false | | styles | Custom styles to be applied to the button. | None (optional) | | width | The width of the button, can be a number or string. | None (optional) | | title | Tooltip text for the button. | None (optional) | | type | The button type (e.g., "button", "submit"). | button | | error | Displays an error state or message. | None (optional) | | warning | Displays a warning state or message. | None (optional) | | testId | A test identifier for the button. | None (optional) | | tooltip | Tooltip content. Can be text or a ReactNode. | None (optional) | | inverted | Deprecated. | false |

Usage Example

<Button
  label="Click Me"
  onClick={() => console.log('Button clicked')}
  colored="blue"
  small
/>

ButtonGroup

The ButtonGroup component allows for the grouping of button-like elements, making it useful for presenting a selection of options or actions together. This component supports customization in terms of appearance, selection handling, and more, making it versatile for various UI scenarios.

IButtonGroupProps

| Prop | Description | Default Value | |---------------|----------------------------------------------------------------|----------------| | disabled | If true, disables all buttons in the group. | None (optional) | | basic | If true, applies a basic style to the button group. | false | | items | An array of items (strings or IBtnGroupItemProps) in the group. | [] | | header | An optional header for the group. | '' | | onSelected | Callback function triggered when an item is selected. | () => {} | | small | If true, applies a smaller size to the buttons in the group. | false | | value | The currently selected value. | None (optional) | | testId | A unique identifier for testing purposes. | None (optional) |

IBtnGroupItemProps

| Prop | Description | Default Value | |--------------------|--------------------------------------------------|----------------| | label | The label for the item. | None (optional) | | value | The value associated with the item. | None (required) | | key | A unique key for the item. | None (required) | | hidden | If true, the item is hidden. | false | | icon | An icon displayed next to the item label. | None (optional) | | error | Displays an error state for the item. | None (optional) | | maxTooltipWidth | The maximum width of the item's tooltip. | None (optional) | | testId | A unique identifier for testing purposes. | None (optional) | | tooltip | Tooltip text or component for the item. | None (optional) | | warning | Displays a warning state for the item. | None (optional) | | disabled | If true, the item is disabled. | false |

Usage Example

<ButtonGroup
  items={[
    { label: 'Button 1', value: '1' },
    { label: 'Button 2', value: '2', disabled: true },
    { label: 'Button 3', value: '3' }
  ]}
  onSelected={(selectedValue) => console.log(selectedValue)}
/>

Card

Props

| Prop | Description | Default Value | |------------|------------------------------------------------------------------|----------------| | bordered | If true, displays a border around the card. | true | | heading | Optional heading content for the card. | None (optional) | | margin | The margin around the card, specified as a CSS value. | '0' | | padding | If true, applies padding inside the card. | true | | raised | If true, applies a box-shadow to give the card a "raised" effect. | false | | children | The content within the card. | None (optional) |

Usage Example

<Card heading="Card Title" raised>
  <p>This is some content within a card.</p>
</Card>

CheckBox

The CheckBox component is used to create a checkbox input field, often utilized for options that can be toggled between two states, such as true/false or yes/no. This component supports various customizations including label display, size adjustments, and integrated help text.

Props

| Prop | Description | Default Value | |---------------|------------------------------------------------------------------|-----------------| | checked | Determines whether the checkbox is checked. | false | | isInTable | If true, optimizes the checkbox for use within a table. | false | | label | The text label associated with the checkbox. | None (optional) | | name | The name of the checkbox input, useful for form submission. | None (required) | | noMargin | If true, removes the margin around the checkbox for tighter UI integration. | false | | onChange | A callback function that is called when the checkbox state changes. | None (required) | | tabIndex | The tab index of the checkbox. | 0 | | disabled | If true, disables the checkbox preventing user interaction. | false | | small | If true, renders a smaller version of the checkbox. | false | | testId | A unique identifier for testing purposes. | None (optional) | | key | A unique key for rendering the component in lists. | '' | | dataix | Custom data index attribute for the component. | 0 | | value | The value of the checkbox. | None (optional) | | helpText | Optional help text displayed near the checkbox. | None (optional) | | onClickHelp | A callback function triggered when the help text is clicked. | None (optional) |

Usage Example

<CheckBox
  label="Accept Terms"
  name="termsAccepted"
  checked={this.state.accepted}
  onChange={e => this.setState({ accepted: e.target.checked })}
/>

Column

The Column component is a layout tool designed for creating structured, flexible column-based layouts within your application. It supports a wide range of customization options, including background color, border control, padding, and responsive width adjustments, making it an essential element for responsive design.

Props

| Prop | Description | Default Value | |-----------------|------------------------------------------------------------------|-----------------------| | background | The background color of the column. | 'transparent' | | borderLeft | Controls the presence and style of the left border. | None (optional) | | borderRight | Controls the presence and style of the right border. | None (optional) | | children | The content to be displayed inside the column. | None (optional) | | flex | If true, enables flex layout for the column contents. | true | | flexbox | If true, the column will use flexbox layout. | false | | padding | Controls padding inside the column. Can be boolean or string. | false | | scroll | If true, enables scrolling within the column. | false | | showScrollbar | Controls the visibility of the scrollbar. | true | | spacing | Controls the spacing around items inside the column. | 'var(--padding)' | | width | The width of the column, responsive on all devices. | None (optional) | | widthMobile | The column's width specifically for mobile devices. | None (optional) | | widthTablet | The column's width specifically for tablet devices. | None (optional) | | testId | A unique identifier for testing purposes. | None (optional) |

Usage Example

<Column
  background="lightgrey"
  borderLeft="1px solid black"
  padding="20px"
  width={100}
  widthMobile={50}
>
  {/* Column Content Here */}
</Column>

Divider

The Divider component visually separates content within your layout. It's customizable with respect to margin, color, and alignment, making it versatile for various design needs. It can be particularly useful in forms, lists, or between sections of content to provide a clear visual distinction.

Props

| Prop | Description | Default Value | |------------|---------------------------------------------------|----------------------| | margin | Margin around the divider, specified as a string or number. | 'var(--padding)' | | color | The color of the divider line. | 'var(--color-border)' | | align | The alignment of the divider within its container. Options are left, center, or right. | Align.CENTER | | children | The content to display within the divider. This can be used to place text or icons in the divider line. | None (optional) |

Usage Example

<Divider align="center" color="grey" margin="20px">
  <Text>OR</Text>
</Divider>

Dialog

The Dialog component encapsulates a dialog box or modal's structure and behavior, providing a flexible way to display content in a floating layer above the app's main UI. This component supports a variety of content and layouts, including headers, footers, and customizable padding, making it ideal for confirmations, information dialogs, and more complex interactions.

Props

| Prop | Description | Default Value | |--------------------|-------------------------------------------------------|-------------------| | heading | The title or heading of the dialog. | None (optional) | | content | The main content of the dialog, can be a node or an array of strings. | None (optional) | | contentPadding | Padding inside the dialog, around the content. | 'var(--padding)'| | footer | Footer content, typically used for actions. | None (optional) | | width | Width of the dialog. | None (optional) | | height | Height of the dialog. | None (optional) | | bordered | If true, the dialog will have a border. | None (optional) | | onClose | Function to call when the dialog is requested to close. | None (optional) | | scroll | Enables scrolling within the dialog. | None (optional) | | testId | A test identifier for the component. | None (optional) |

Usage Example

<Dialog
  dialog={{
    heading: "Dialog Title",
    content: "This is the content of the dialog.",
    footer: <button onClick={() => console.log('Closing dialog')}>Close</button>,
    width: 400,
    scroll: true,
    onClose: () => console.log('Dialog closed'),
  }}
/>

Drawer

The Drawer component is a flexible and customizable sidebar or navigation drawer that slides in from the side of your application. It supports both left and right placement, fixed positioning, and the inclusion of tabs for additional organization. The drawer can be triggered to open or close programmatically, making it adaptable for various user interactions.

Props

| Prop | Description | Default Value | |--------------------|---------------------------------------------------------------------|---------------------------------| | background | The background color of the drawer. | 'var(--color-background-raised)' | | children | The content displayed inside the drawer. | None (optional) | | fixed | If true, the drawer is fixed in position. | false | | open | Controls the open state of the drawer. | false | | setOpen | Function to set the open state of the drawer. | None (optional) | | right | If true, the drawer slides in from the right. | false | | shadow | If true, the drawer casts a shadow. | false | | top | The distance of the drawer from the top of the viewport. | 0 | | width | The width of the drawer when opened. Can be a single value or an array for responsive design. | 400 | | closedWidth | The width of the drawer when closed. | 0 | | button | Optional button to toggle the drawer. Can be boolean or a ReactNode for custom button. | None (optional) | | buttonAnimate | If true, the toggle button animates on state change. | true | | buttonPosition | Position of the toggle button. | ButtonPosition.BOTTOM | | border | If true, adds a border to the drawer. Can be a boolean or a string for custom border styles. | false | | tabs | Array of tabs for organizing content within the drawer. | None (optional) | | defaultTabIndex | The index of the tab to be selected by default. | 0 | | activeTab | Controls the active tab state. | None (optional) | | setActiveTab | Function to set the active tab. | None (optional) | | testId | A unique identifier for testing purposes. | None (optional) | | onResize | Callback function that is called when the drawer is resized. | None (optional) | | getActiveTab | Function that receives the active tab information. | None (optional) | | onClose | Callback function that is called when the drawer is closed. | None (optional) | | onOpen | Callback function that is called when the drawer is opened. | None (optional) |

Usage Example

<Drawer
  open={true}
  right
  width="250px"
  onClose={() => console.log("Drawer closed")}
>
  {/* Content here */}
</Drawer>

Empty

The Empty component is a useful UI element for displaying a state where there is no data or content available. It can be customized with specific dimensions and text, making it adaptable to various scenarios where you might need to inform users that a section or area is intentionally empty.

Props

| Prop | Description | Default Value | |------------|--------------------------------------------------|---------------| | width | The width of the empty state container. | 'auto' | | height | The height of the empty state container. | 'auto' | | text | The text or ReactNode displayed in the empty state. | 'No data' | | children | Children elements to be rendered inside the empty state container. | None (optional) | | testId | A unique identifier for testing purposes. | None (optional) |

Usage Example

<Empty
  width={300}
  height={200}
  text="No items found."
>
  <Button>Refresh</Button>
</Empty>

FileInput

The FileInput component allows users to select files from their device storage. It supports single and multiple file selections, customizable via props. This component is ideal for forms requiring file uploads, offering options for file type acceptance, loading states, and accessibility features.

Props

| Prop | Description | Default Value | |----------------|-----------------------------------------------------------|---------------------| | label | The label displayed on the file input. | 'Select' | | loading | Displays a loading state if set to true. | false | | placeholder | Text displayed when no file is selected. | 'No file selected'| | disabled | If true, disables the file input. | false | | file | The currently selected file. | None (optional) | | accept | Defines the file types the file input should accept. | None (optional) | | multi | Allows multiple files to be selected if set to true. | None (optional) | | name | The name attribute of the input element. | None (optional) | | width | The width of the file input. | None (optional) | | onChange | Callback function called when the selected file changes. | None (optional) | | testId | A test identifier for the component. | None (optional) |

Usage Example

<FileInput
  label="Upload Document"
  accept=".pdf"
  multi
  onChange={(evt) => console.log(evt.target.files)}
/>

Field

The Field component serves as a container for form elements, providing a structured layout for labels, input fields, help text, and additional features like lock icons or information tooltips.

Props

| Prop | Description | Default Value | |------------------|--------------------------------------------------------------|------------------------------| | label | The label for the field. | None | | labelLeft | If true, aligns the label to the left. | false | | labelWidth | The width of the label. | 'auto' | | children | The content of the field, typically an input component. | None (required) | | helpText | Additional text to assist users with the field. | None | | helpTextMaxWidth | The maximum width of the help text. | '300px' | | onClickHelp | A callback function triggered when the help text is clicked. | () => {} | | lock | Configuration for a lock icon. | { visible: false, active: false, onClick: () => {}, tooltip: '', testId: undefined } | | info | Additional information displayed alongside the field. | '' | | libraryIcon | Configuration for an icon from a library. | None | | testId | A unique identifier for testing purposes. | - |

Usage Example

<Field
  label="Username"
  helpText="Choose a unique username"
  info="Your username must be at least 6 characters long."
>
  <Input placeholder="Enter your username" />
</Field>

Flex

The Flex component enables flexible layout arrangements by providing properties to control the alignment, direction, and spacing of its children elements.

Props

| Prop | Description | Default Value | |-------------------|-----------------------------------------------------------|---------------| | alignItems | The alignment of flex items along the cross axis. | 'initial' | | justifyContent | The alignment of flex items along the main axis. | 'initial' | | direction | The direction of the flex container's main axis. | 'initial' | | height | The height of the flex container. | 'initial' | | children | The child elements of the flex container. | null | | wrap | If true, allows flex items to wrap onto multiple lines. | true | | gap | The gap between flex items. | false |

Usage Example

<Flex alignItems="center" justifyContent="space-between" direction="row" gap={10}>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Flex>

FormRow

The FormRow component is used to group form elements together in a row layout.

Props

| Prop | Description | Default Value | |------------|----------------------------------------|---------------| | children | The child elements of the form row. | null |

Usage Example

<FormRow>
  <Input label="Username" />
  <Button label="Submit" onClick={handleSubmit} />
</FormRow>

Grid

The Grid component allows you to create a grid layout with specified rows and columns.

Props

| Prop | Description | Default Value | |-----------------|-----------------------------------------------------|---------------| | rows | The CSS value for defining the grid rows | 'initial' | | columns | The CSS value for defining the grid columns | 'initial' | | columnsTablet | The CSS value for defining grid columns on tablets | null | | columnsMobile | The CSS value for defining grid columns on mobiles | null | | gap | Whether to include gap between grid items | false | | height | The CSS value for defining the grid height | 'initial' | | children | The child elements of the grid | null |

Usage Example

<Grid rows="auto" columns="repeat(3, 1fr)" gap={20}>
  <GridItem>Item 1</GridItem>
  <GridItem>Item 2</GridItem>
  <GridItem>Item 3</GridItem>
</Grid>

Icon

The Icon component is a wrapper used to render various types of icons within your application.

Props

| Prop | Description | Default Value | |-------------|--------------------------------------------------------|---------------| | icon | The icon to be rendered. This can be a ReactNode, string name, or SVG. | | | onClick | The callback function triggered when the icon is clicked. | - | | clickable | Determines whether the icon is clickable or not. | false | | color | The color of the icon. | - | | size | The size of the icon. | - | | testId | A test id for identification in automated tests. | - |

Usage Example

<Icon icon="search" color="blue" size={24} />

In this example, the Icon component renders an icon with the name "search", colored blue, and sized at 24 pixels.

• The icon prop accepts various formats such as string names, React components, or SVG elements.
• If using a string name, it's recommended to use icon libraries like Font Awesome or Material Icons.
• When providing a custom SVG, ensure it's properly formatted and compatible with React's rendering.
• Setting the clickable prop to true adds cursor pointer and hover effects to the icon.

<Icon icon={<CustomIcon />} clickable onClick={handleIconClick} />

InputGroup

The InputGroup component is used to group together multiple input elements or components.

Props

| Prop | Description | Default Value | |------------|-------------------------------------------------------|---------------| | children | The input elements or components to be grouped. | | | small | Determines whether the input group is small or not. | false | | width | The width of the input group. | '100%' |

Usage Example

<InputGroup>
  <Input placeholder="Username" />
  <Button>Search</Button>
</InputGroup>

InputGroupAddon

The InputGroupAddon component is used to add additional content or components to an InputGroup.

Props

| Prop | Description | Default Value | |---------------|------------------------------------------------------------|---------------| | children | The content or components to be added to the input group. | | | groupOrder | The order of the addon within the input group. | null | | small | Determines whether the addon is small or not. | false |

Usage Example

<InputGroup>
  <InputGroupAddon>$</InputGroupAddon>
  <Input placeholder="Amount" />
</InputGroup>

HelpIcon

The HelpIcon component provides an icon with optional tooltip text to offer assistance or additional information.

Props

| Prop | Description | Default Value | |-------------|-----------------------------------------------------------------------------------------------------|---------------| | text | The text or content to display in the tooltip. | | | onClick | A function to be called when the icon is clicked. | | | icon | The icon to display. It can be a ReactNode or a string representing an icon (e.g., "help", "info"). | 'help' | | active | Determines whether the icon is in an active state. | false | | maxWidth | The maximum width of the tooltip. | '300px' | | testId | The test ID for identifying the component in tests. | |

Usage Example

<HelpIcon text="Click here for more information" />

Heading

The Heading component renders a heading element with optional features such as help text and an icon.

Props

| Prop | Description | Default Value | |----------------|----------------------------------------------------------------------------------------------------------------------|---------------| | children | The content to be rendered within the heading element. | | | helpText | Additional text or content to provide assistance or information about the heading. | | | onClick | A function to be called when the heading is clicked. | | | onClickHelp | A function to be called when the help text is clicked. | | | onIconClick | A function to be called when the icon is clicked. | | | icon | The icon element to be displayed alongside the heading. | | | libraryIcon | Configuration for the library icon, containing an onClick function and an optional tooltip text. | | | marginBottom | The margin at the bottom of the heading. | | | top | Determines whether the heading is displayed at the top of the container. | false | | testId | The test ID for identifying the component in tests. | |

Usage Example

<Heading>Page Title</Heading>

<Heading
  top={true}
  onClick={() => console.log('Heading clicked')}
  helpText="This is the main title of the page"
  onClickHelp={() => console.log('Help text clicked')}
  icon={<QuestionCircleOutlined />}
  libraryIcon={{ onClick: () => console.log('Library icon clicked'), tooltip: 'More info' }}
  marginBottom="10px"
>
  Page Title
</Heading>

Input

The Input component provides an input field for users to enter data. It supports various features such as error and warning messages, tooltips, and custom event handlers.

Props

| Prop | Description | Default Value | |-----------------|---------------------------------------------------------------------------------------------------------------------|---------------| | error | Error message or content to indicate validation errors. | null | | warning | Warning message or content to indicate potential issues. | null | | tooltip | Additional information or context provided as a tooltip. | null | | name | The name attribute of the input field. | - | | type | The type of input field (e.g., text, number, email). | 'text' | | onChange | Event handler called when the input value changes. | () => {} | | onKeyPress | Event handler called when a key is pressed while the input is focused. | () => {} | | onFocus | Event handler called when the input is focused. | () => {} | | onBlur | Event handler called when the input loses focus. | () => {} | | onPaste | Event handler called when content is pasted into the input field. | () => {} | | small | Determines whether to render a smaller-sized input field. | false | | placeholder | Placeholder text displayed when the input is empty. | '' | | tabIndex | The tab index of the input field. | 0 | | value | The value of the input field. | '' | | disabled | Determines whether the input field is disabled. | false | | right | Determines whether to align content to the right of the input field. | false | | groupOrder | Position of the input field within a group or sequence. | null | | maxTooltipWidth | The maximum width of the tooltip. | - | | testId | Test ID for identifying the component in tests. | - | | size | Deprecated. Use width instead to define the size of the input field. | null | | isInTable | Specifies whether the input is used within a table. | false | | width | Width of the input field. | - |

Usage Example

<Input
  type="text"
  placeholder="Enter your name"
  value={name}
  onChange={(e) => setName(e.target.value)}
  error={nameError}
  tooltip="Please enter your full name"
  disabled={isDisabled}
/>

<Input
  type="number"
  placeholder="Enter your age"
  value={age}
  onChange={(e) => setAge(e.target.value)}
  warning={ageWarning}
/>

Label

The Label component represents a label or caption associated with an input field or other form elements. It can include optional elements such as help text, lock icons, and library icons.

Props

| Prop | Description | Default Value | |--------------------|--------------------------------------------------------------------------------------------------------------------|---------------| | label | The text or content of the label. | null | | width | The width of the label. | 'auto' | | helpText | Help text or additional information associated with the label. | '' | | helpTextMaxWidth | The maximum width of the help text. | '300px' | | onClickHelp | Event handler called when the help icon or text is clicked. | - | | lock | Configuration for the lock icon displayed with the label. | See below | | libraryIcon | Configuration for the library icon displayed with the label. | - | | labelLeft | Determines whether to align the label to the left side. | false | | info | Additional information or tooltip associated with the label. | - |

Lock Props:

| Prop | Description | Default Value | |------------|-------------------------------------------------------|---------------| | visible | Determines whether the lock icon is visible. | false | | active | Determines whether the lock icon is active. | false | | onClick | Event handler called when the lock icon is clicked. | () => {} | | tooltip | Tooltip text displayed when hovering over the icon. | '' | | testId | Test ID for identifying the lock icon in tests. | - |

Usage Example

<Label
  label="Username"
  helpText="Enter your username"
  onClickHelp={() => console.log('Help clicked')}
  lock={{
    visible: true,
    active: false,
    onClick: () => console.log('Lock clicked'),
    tooltip: 'Locked',
  }}
  libraryIcon={{
    onClick: () => console.log('Library icon clicked'),
    tooltip: 'Open library',
  }}
/>

List

The List component renders a list of data items with various customization options such as borders, expanding items, and draggable rows.

Props

| Prop | Description | Default Value | |------------------------|-----------------------------------------------------------------------------------------------------------------|--------------------------| | drawer | Specifies whether the list is rendered as a drawer. | false | | list | The data to be displayed in the list. | Required | | bordered | Determines whether the list items have borders. | false | | expanding | Specifies whether the list items can be expanded to show additional content. | false | | narrow | Determines whether the list items have a narrower layout. | false | | toggleNarrow | Specifies whether to enable toggling the narrow mode. | false | | onToggleNarrow | Callback function called when toggling the narrow mode. | () => {} | | invokeEditOnRowClick | Determines whether clicking on a row invokes editing mode. | true | | noHeader | Specifies whether to hide the header of the list. | false | | stickyHeader | Determines whether the list header sticks to the top when scrolling. | - | | draggable | Specifies whether the list items can be dragged to reorder. | false | | onListReorder | Callback function called when reordering the list items. | () => {} | | marginBottom | The margin bottom applied to the list. | 0 | | height | The height of the list. | - | | testId | Test ID for identifying the list component. | - | | scrollDetails | Configuration for scrolling behavior and infinite scroll functionality. See details below. | See details below |

Scroll Details:

| Prop | Description | Default Value | |-----------------------------|-----------------------------------------------------------------------------------------------------------------|--------------------------| | scrollable | Determines whether the list is scrollable. | false | | hideScrollbar | Determines whether to hide the scrollbar when scrolling. | false | | triggerScrollToActiveItem | Specifies whether scrolling should be triggered to display the active item. | false | | infiniteScroll | Specifies whether to enable infinite scroll functionality. | false | | limit | The limit of items to load per page when using infinite scroll. | 10 | | infiniteScrollTarget | The target element for infinite scroll (e.g., the list container). | - |

Usage Example

<List
  list={myData}
  bordered
  expanding
  draggable
  stickyHeader
  marginBottom={20}
  height={300}
  testId="my-list"
  scrollDetails={{
    scrollable: true,
    hideScrollbar: true,
    triggerScrollToActiveItem: true,
    infiniteScroll: true,
    limit: 10,
    infiniteScrollTarget: document.getElementById('list-container'),
  }}
/>

ListHeading

The ListHeading component represents the header of a list. It typically includes the name or title of the list and optional actions.

Props

| Prop | Description | Default Value | |------------------|-----------------------------------------------------------------------------------------------------------------|--------------------------| | name | The name or title of the list. | Required | | actions | An array of action items to be displayed in the header. | [] | | toggleNarrow | Specifies whether to enable toggling the narrow mode for the list. | false | | onToggleNarrow | Callback function called when toggling the narrow mode. | () => {} | | stickyHeader | Determines whether the list header sticks to the top when scrolling. | - |

Usage Example

<ListHeading
  name="My List"
  actions={[{ label: 'Add', onClick: handleAdd }, { label: 'Edit', onClick: handleEdit }]}
  toggleNarrow
  onToggleNarrow={handleToggleNarrow}
  stickyHeader
/>

ListSubheading

The ListSubheading component represents a subheading within a list. It is typically used to provide additional information or context for a group of items within the list.

Props

| Prop | Description | Default Value | |---------|--------------------------------------------------------------------|---------------| | item | An object containing data for the subheading item. | Required | | index | The index of the subheading item within the list. | - |

Usage Example

<ListSubheading item={{ label: 'Group A', count: 5 }} index={0} />

Loader

The Loader component renders a loading indicator, typically used to indicate that content is being fetched or processed.

Props

| Prop | Description | Default Value | |--------------------|------------------------------------------------------------------------------------------------------|----------------| | width | The width of the loader. | | | height | The height of the loader. | | | text | The text to display alongside the loader. | '' (empty) | | details | Additional details or information to display below the loader. | '' (empty) | | fullViewPortSize | A boolean indicating whether the loader should cover the entire viewport. | false | | cover | A boolean indicating whether the loader should cover its parent element. | false | | children | Additional React elements to render alongside the loader. | null | | theme | The theme of the loader. This can be either Theme.DARK or Theme.LIGHT. | Theme.DARK | | testId | A string value representing the test ID for testing purposes. | null |

Usage Example

<Loader text="Loading..." cover />

Menu

The Menu component is used to render a menu with various options or sections.

Props

| Prop | Description | Default Value | |-----------------------------|-----------------------------------------------------------------------------------------------------------|---------------| | menu | An object containing properties for configuring the menu. | {} | | contextMenu | A boolean indicating whether the menu is a context menu. | false | | width