lumia-ui v0.0.42

Utils

Utils

Description

This set of utility functions provides helpful methods for handling class names and converting color formats. These functions streamline common operations, making it easier to manage class names and color formats in your application.

Use Case

These utility functions are ideal for:

• Concatenating class names conditionally.
• Converting hexadecimal color codes to RGBA format.
• Rendering assets conditionally based on visibility.

Utility Functions

LMAsset

Renders an asset conditionally based on the visibility prop.

LMAssetProps

cx

A method to extract classNames on a React Component.

hexToRgba

take two arguments hex: string, opacity: number and returns a rgba value with opacity.

Form

Validations

Description

This set of validation utilities provides a variety of functions to validate different types of input data. It includes general validations like required fields and email format, number validations, length validations, phone number validations, URL and IP address validations, password strength checks, and date validations. These utilities throw errors when the validations fail, making them easy to integrate into form handling or other input validation processes.

Use Case

These validation utilities are ideal for:

• Validating form inputs in web applications.
• Ensuring data consistency and correctness before processing.
• Providing user feedback for incorrect inputs.

Validation Functions

General Validations

required

Ensures that the input value is not empty.

export const required = (...args: unknown[]) => {
  const value = args[0] as string;
  if (!value) {
    throw new Error("cannot be empty");
  } else {
    if (value.trim() == "") {
      throw new Error("cannot be empty");
    }
  }
};

Typography

Typography

Description

The typography components provide a set of styled text elements for your application, including various heading levels (H1 to H6), Text, bold, underline, and italic elements. These components support customization options such as type, number of lines, text case, and editable content.

Use Case

These components are ideal for:

• Structuring content with appropriate heading levels.
• Styling text with different formats like bold, underline, and italic.
• Displaying body text, captions, and error messages.
• Providing editable text elements for user-generated content.

Props Table

HeaderProps

TextProps

Example Use Case

Example 1: Using Headings

Using different heading levels and types.

import React from 'react';
import { H1, H2, H3, H4, H5, H6 } from './typography';

const TypographyExample = () => (
  <div>
    <H1 type="serif">Heading 1</H1>
    <H2 type="sans">Heading 2</H2>
    <H3>Heading 3</H3>
    <H4>Heading 4</H4>
    <H5>Heading 5</H5>
    <H6>Heading 6</H6>
  </div>
);

export default TypographyExample;

Component

Alert

Description

The Alert component is used to display important messages to the user. It can be configured to show different types of alerts, such as success, warning, or error. It also supports icons, titles, descriptions, and actions, making it highly customizable for various use cases.

Use Case

This component is suitable for displaying notifications, warnings, errors, or any important information that requires the user's attention. It can be integrated into various parts of an application where user feedback or system messages need to be conveyed effectively.

Props Table

Badge

Description

The Badge component is a highly customizable UI element used to display labels, counts, or statuses. It supports different shapes (round and square) and styles (filled or outlined). The component can be configured with various colors for both text and background, making it suitable for a wide range of use cases.

Use Case

The Badge component is ideal for displaying:

• Notification counts (e.g., unread messages).
• Status indicators (e.g., online/offline status).
• Labels or tags for categorization.
• Any other brief, prominent information that needs to be highlighted.

Props Table

Example Use Case

Round Badge:

• To display a count of unread notifications, use a round badge with a numeric label. If the count exceeds 9, it will display "9+".

Square Badge:

• To display a status label like "New" or "Sale", use a square badge with a string label. This can be filled or outlined based on the type.

Component Props

Usage Example

Round Badge:

<Badge type="round" label={5} />

Button

Description

The Button component is a versatile UI element used to trigger actions or events in an application. It supports different styles, icons, and labels, making it highly customizable for various use cases. The component is designed to be easily integrated and styled to match the application's design system.

Use Case

The Button component is ideal for:

• Triggering form submissions.
• Initiating navigation to different parts of an application.
• Performing in-app actions like saving data, opening modals, etc.
• Displaying buttons with icons for enhanced visual appeal.

Props Table

Example Use Case

Example 1: Primary Button

A primary button that triggers a form submission.

<Button
  type="fill"
  label="Submit"
  color="#fff"
  backgroundColor="#007bff"
/>

Checkbox

Description

The Checkbox component is a customizable UI element used to capture user input in the form of a boolean value. It supports indeterminate states, custom labels, and callback functions for change events. The component is designed to be easily integrated into forms and other interactive parts of an application.

Use Case

The Checkbox component is ideal for:

• Capturing user agreement (e.g., terms and conditions).
• Toggling settings on or off.
• Selecting multiple items from a list.
• Displaying an indeterminate state for partially selected groups.

Props Table

Example Use Case

Example 1: Simple Checkbox

A simple checkbox to accept terms and conditions.

<Checkbox
  label="I agree to the terms and conditions"
  onUpdate={(value) => console.log(value)}
/>

Code

Description

The Code component is a flexible and customizable UI element for displaying code snippets in various programming languages. It supports syntax highlighting, formatting, and can be editable or non-editable based on the requirements. This component can be used in blogs, documentation sites, or any application that needs to present code to users.

Use Case

The Code component is ideal for:

• Displaying code snippets in different programming languages with syntax highlighting.
• Allowing users to edit and format code in real-time.
• Embedding formatted code within articles, tutorials, or documentation.

Props Table

Example Use Case

Example 1: Displaying HTML Code

A non-editable code snippet displaying HTML code.

<Code
  code="<div>Hello, World!</div>"
  language="html"
/>

Dialogue

Description

The Dialogue component is a modal dialog box used to display important information and actions to the user. It supports customizable titles, descriptions, buttons, and icons. The component can be aligned in different ways and is suitable for various use cases such as confirmations, alerts, or detailed messages.

Use Case

The Dialogue component is ideal for:

• Displaying confirmation dialogs for user actions.
• Showing alerts or error messages.
• Providing detailed information with optional actions.
• Any scenario where a modal dialog is required to capture user attention and interaction.

Props Table

Example Use Case

Example 1: Confirmation Dialogue

A confirmation dialogue with primary and secondary buttons.

<Dialogue
  visible={true}
  title="Delete Item"
  description="Are you sure you want to delete this item?"
  actionBtnType="both"
  primaryBtnLabel="Delete"
  secondaryBtnLabel="Cancel"
  primaryBtnOnPress={() => console.log('Item deleted')}
  secondaryBtnOnPress={() => console.log('Action cancelled')}
  onClose={() => console.log('Dialogue closed')}
  closeIcon={true}
/>

HorizontalModal

Description

The ModalHorizontalIn component is a customizable slide-in modal dialog that appears from either the left or right side of the screen. It supports visibility toggling, customizable direction, and an optional close function triggered when clicking outside the modal.

Use Case

The ModalHorizontalIn component is ideal for:

• Displaying off-canvas menus or side panels.
• Implementing slide-in dialogs for notifications or additional content.
• Creating interactive interfaces where modal dialogs need to appear from the sides of the screen.

Props Table

Example Use Case

Example 1: Left Slide-In Modal

A modal that slides in from the left side of the screen.

<ModalHorizontalIn
  visible={true}
  direction="left"
  onClose={() => console.log('Modal closed')}
>
  <p>This is a left slide-in modal.</p>
</ModalHorizontalIn>

Link

Description

The Link component is a customizable anchor element used for navigation. It extends the native HTML anchor element, allowing you to use all the default anchor attributes while providing additional styling and functionality as needed. This component can be used for both internal and external navigation in your application.

Use Case

The Link component is ideal for:

• Navigating to different pages within your application.
• Linking to external websites or resources.
• Creating styled hyperlinks that match the design system of your application.

Props Table

Example Use Case

Example 1: Basic Link

A basic link to an external website.

<Link href="https://www.example.com">
  Visit Example
</Link>

listComponent

Description

The ListComponent is a flexible and customizable component for rendering nested lists. It supports both ordered and unordered lists and can handle multiple levels of nesting. This component is ideal for displaying hierarchical data or creating structured content.

Use Case

The ListComponent is ideal for:

• Displaying hierarchical data such as organizational structures or file directories.
• Creating structured content with nested lists.
• Generating lists with different bullet or numbering styles for each level.

Props Table

ListItem Interface

Example Use Case

Example 1: Unordered List

A basic unordered list with nested items.

const items = [
  {
    text: 'Item 1',
    level: 1,
    children: [
      {
        text: 'Item 1.1',
        level: 2,
      },
      {
        text: 'Item 1.2',
        level: 2,
        children: [
          {
            text: 'Item 1.2.1',
            level: 3,
          },
        ],
      },
    ],
  },
  {
    text: 'Item 2',
    level: 1,
  },
];

<ListComponent items={items} type="unordered-List" />

Modal

Description

The Modal component is a customizable dialog box used to display important information and actions to the user. It supports customizable titles, descriptions, primary and secondary buttons, and icons. The component is suitable for various use cases such as confirmations, alerts, or detailed messages.

Use Case

The Modal component is ideal for:

• Displaying confirmation dialogs for user actions.
• Showing alerts or error messages.
• Providing detailed information with optional actions.
• Any scenario where a modal dialog is required to capture user attention and interaction.

Props Table

Example Use Case

Example 1: Confirmation Modal

A confirmation modal with primary and secondary buttons.

<Modal
  visible={true}
  title="Delete Item"
  description="Are you sure you want to delete this item?"
  actionBtnType="both"
  actionBtnAlign="right"
  primaryBtnLabel="Delete"
  secondaryBtnLabel="Cancel"
  primaryBtnOnPress={() => console.log('Item deleted')}
  secondaryBtnOnPress={() => console.log('Action cancelled')}
  onClose={() => console.log('Modal closed')}
  closeIcon={true}
/>

Pagination

Description

The Pagination component is a versatile and customizable UI element used for navigating through paginated content. It supports displaying page numbers, next and previous buttons, and ellipsis for a compact representation of large page ranges. This component is ideal for applications with paginated data or content that needs easy navigation.

Use Case

The Pagination component is ideal for:

• Navigating through paginated data such as tables, lists, or galleries.
• Providing users with an intuitive way to jump to specific pages.
• Displaying a compact pagination interface for large sets of pages.

Props Table

Example Use Case

Example 1: Basic Pagination

A basic pagination component for navigating through 10 pages.

<Pagination
  pageNumber={1}
  totalPages={10}
  onPressNext={() => console.log("Next page")}
  onPressPrevious={() => console.log("Previous page")}
  onPressPageNumber={(page) => console.log(`Page ${page}`)}
/>

Profile

Description

The Profile component is a flexible and customizable UI element used to display profile information. It supports displaying an avatar, title, subtitle, and an optional action icon. This component is ideal for use in user profile cards, contact lists, or any interface requiring a compact representation of a user's profile.

Use Case

The Profile component is ideal for:

• Displaying user profile information in a card format.
• Presenting contact information in lists.
• Creating profile sections in dashboards or user interfaces.

Props Table

Example Use Case

Example 1: Basic Profile

A basic profile displaying an avatar, title, and subtitle.

<Profile
  title="John Doe"
  subtitle="Software Engineer"
  avatar="https://example.com/avatar.jpg"
/>

Radio

Description

The Radio component is a customizable UI element used for single selection from multiple options. It supports labels, checked state, and can be disabled. This component is ideal for forms or any other input scenarios where users need to select one option from a set.

Use Case

The Radio component is ideal for:

• Creating single-select options in forms.
• Implementing radio button groups for surveys or questionnaires.
• Any scenario where a user needs to select one option from multiple choices.

Props Table

Example Use Case

Example 1: Basic Radio Button

A basic radio button with a label.

<Radio
  label="Option 1"
  checked={true}
  onChange={(e) => console.log(e.target.checked)}
/>

Switch

Description

The Switch component is a customizable toggle switch used for enabling or disabling options. It supports labels, active and inactive colors, and can handle state changes through a toggle function. This component is ideal for settings or any scenario where a binary choice needs to be made.

Use Case

The Switch component is ideal for:

• Toggling settings or preferences on or off.
• Creating binary choices in forms.
• Implementing on/off switches for features.

Props Table

Example Use Case

Example 1: Basic Switch

A basic switch with a label.

<Switch
  label="Enable Notifications"
  value={true}
  onToggle={(newValue) => console.log("Switch toggled:", newValue)}
/>

Ticker

Description

The Ticker component is a customizable scrolling ticker used to display continuous information, such as news headlines or stock prices. It supports various settings like speed, direction, delay, background color, and whether the ticker should stop on hover. This component is ideal for applications requiring a scrolling text or marquee effect.

Use Case

The Ticker component is ideal for:

• Displaying continuous news headlines or updates.
• Showing stock prices or financial data.
• Any scenario where a scrolling text effect is needed.

Props Table

Example Use Case

Example 1: Basic Ticker

A basic ticker displaying continuous text.

<Ticker>
  Breaking News: This is an example of a basic ticker.
</Ticker>

Input

PinInput

Description

The PinInput component is a customizable UI element used for capturing multi-digit inputs, such as PIN codes or verification codes. It supports different input styles, secret mode for sensitive inputs, and validation mechanisms. This component is ideal for applications requiring secure and user-friendly PIN or code entry.

Use Case

The PinInput component is ideal for:

• Capturing PIN codes for authentication.
• Inputting verification codes sent via SMS or email.
• Securely entering multi-digit passwords or access codes.

Props Table

Example Use Case

Example 1: Basic PIN Input

A basic PIN input with 4 fields.

<PinInput
  value="1234"
  onValueChange={(pin) => console.log(pin)}
/>

SearchInput

Description

The SearchInput component is a versatile and customizable UI element used for search functionality. It supports different input styles, auto-search capabilities, and can display suggestions based on the input. This component can be used to enhance the user experience by providing real-time search results and suggestions.

Use Case

The SearchInput component is ideal for:

• Implementing search functionality in applications.
• Providing a search bar with real-time suggestions.
• Creating dropdown search inputs for selecting from a list of options.

Props Table

Example Use Case

Example 1: Basic Search Input

A basic search input with a search button.

<SearchInput
  placeholder="Search..."
  handleSearch={(value) => console.log("Search for:", value)}
/>

Slider

Description

The Slider component is a customizable UI element used for selecting a value from a range. It supports different styles, customizable colors, and can display the selected value as a percentage. This component is ideal for applications requiring user input for adjustable settings or preferences.

Use Case

The Slider component is ideal for:

• Adjusting settings such as volume, brightness, or other preferences.
• Selecting a value from a range in forms or settings pages.
• Providing a visual representation of progress or value selection.

Props Table

Example Use Case

Example 1: Basic Slider

A basic slider to adjust a value.

<Slider
  value={50}
  onChange={(e) => console.log(e.target.value)}
/>

TextArea

Description

The Textarea component is a customizable and versatile UI element used for capturing multi-line text input. It supports different styles, labels, validation messages, and placeholders. This component is ideal for forms or any other input scenarios where users need to enter longer text.

Use Case

The Textarea component is ideal for:

• Capturing user input in forms.
• Providing an area for comments or feedback.
• Allowing multi-line text entry in applications.

Props Table

Example Use Case

Example 1: Basic Textarea

A basic textarea for user input.

<Textarea
  placeholder="Enter your comments"
  onChange={(e) => console.log(e.target.value)}
  value=""
/>

TextInput

Description

The TextInput component is a customizable and versatile UI element used for capturing single-line text input. It supports different input types, styles, labels, validation messages, and placeholders. This component is ideal for forms or any other input scenarios where users need to enter text.

Use Case

The TextInput component is ideal for:

• Capturing user input in forms.
• Providing an input field for passwords, emails, numbers, or plain text.
• Displaying validation messages for user input.

Props Table

Example Use Case

Example 1: Basic TextInput

A basic text input for user input.

<TextInput
  placeholder="Enter your name"
  onChange={(e) => console.log(e.target.value)}
  value=""
/>

Disclosure

Accordion

Description

The Accordion component is a collapsible UI element used to hide and show content. It supports customizable headers and can be used to organize information in a compact and user-friendly way. This component can be integrated into various parts of an application where content needs to be expandable and collapsible.

Use Case

The Accordion component is ideal for:

• Displaying FAQs where each question can be expanded to reveal the answer.
• Organizing content in a compact manner where sections can be expanded and collapsed.
• Providing a navigable list of items or options where details are hidden until needed.

Props Table

Example Use Case

Example 1: Simple Accordion

A simple accordion to display additional information.

<Accordion
  headerText="More Information"
>
  <p>This is the hidden content that is revealed when the accordion is expanded.</p>
</Accordion>

Card

Description

The Card component is a versatile and customizable UI element used to display information in a concise and visually appealing manner. It supports different styles, optional images, titles, descriptions, and additional interactive elements such as switches and action buttons. This component can be used to present various types of content in a structured format.

Use Case

The Card component is ideal for:

• Displaying product information with images, titles, and descriptions.
• Showing user profiles or contact information.
• Presenting articles or blog post summaries.
• Providing an interactive element like a switch for toggling states.

Props Table

Tabs

Description

The Tabs component is a versatile UI element used for navigation or switching between different views or content sections. It supports horizontal and vertical orientations, custom icons, labels, and different selection styles. This component can be used to enhance the user experience by organizing content in a structured and easily accessible manner.

Use Case

The Tabs component is ideal for:

• Navigating between different sections of a single-page application.
• Switching between various views or data sets within a page.
• Creating a tabbed interface for content that needs to be categorized or segmented.

Props Table

Example Use Case

Example 1: Horizontal Tabs

A set of horizontal tabs for navigating between different sections.

<Tabs
  label="Home"
  icon={HomeIcon}
  selected={true}
  onClick={() => console.log('Home clicked')}
/>
<Tabs
  label="Profile"
  icon={ProfileIcon}
  onClick={() => console.log('Profile clicked')}
/>
<Tabs
  label="Settings"
  icon={SettingsIcon}
  onClick={() => console.log('Settings clicked')}
/>

View

DataTable

DataTable Component Documentation

Description

The DataTable component is a versatile and customizable table component designed for displaying tabular data. It supports features such as pagination, search functionality, and row click handling, making it suitable for a wide range of applications where data needs to be presented in a tabular format.

Use Case

This component is ideal for:

• Displaying lists of items in a tabular format.
• Providing search functionality to filter data.
• Enabling pagination to navigate through large datasets.
• Handling row clicks for interactive data tables.

Props Table

Example

import React from "react";
import DataTable from "./DataTable";
import { DataTableItemType } from "./datatable.types";

const dataset: DataTableItemType[] = [
  { name: "John Doe", age: 30, email: "john@example.com" },
  { name: "Jane Smith", age: 25, email: "jane@example.com" },
  // ...more data items
];

const headerLabels = ["Name", "Age", "Email"];