UI Library

Welcome to my test-task ui library, a lightweight and customizable UI component library designed for modern web applications. This library provides essential UI components that are easy to integrate, flexible, and styled to match a wide range of design systems.

Features

• Checkbox – A customizable checkbox component.
• Tooltip – Displays helpful information on hover or focus.
• Snackbar – Provides brief feedback messages.
• Buttons – Various button styles for different actions.
• Popup – A modal-style component for displaying content.
• TextInput – An input field for capturing user text.
• Dropdown – A select menu for choosing options.

Whether you're building a simple project or a complex application, this UI library aims to streamline your development process while maintaining a polished look and feel.

Button Component Documentation

Installation

Ensure you have Tailwind CSS configured in your project. Import the button component into your React project:

import Button from "./axion-tt-uilib";

Usage

The Button component is a customizable button that supports different sizes, colors, and states.

Basic Example

<Button handleClick={() => alert("Button clicked!")}>Click Me</Button>

Props

| Prop | Type | Default | Description | | ------------- | ----------------------- | ----------- | -------------------------------------- | | children | React.ReactNode | - | Content inside the button. | | color | 'primary' 'secondary' | 'primary' | Defines the button color. | | handleClick | () => void | undefined | Function called on button click. | | outline | boolean | false | If true, renders an outlined button. | | size | 'sm' 'md' 'lg' | 'md' | Defines the button size. | | disabled | boolean | false | If true, disables the button. |

Examples

Primary Button

<Button>Primary</Button>

Secondary Button

<Button color="secondary">Secondary</Button>

Outlined Button

<Button outline>Outlined</Button>

Large Disabled Button

<Button size="lg" disabled>
  Disabled
</Button>

Dropdown Component Documentation

Installation

Ensure you have Tailwind CSS configured in your project. Import the dropdown component into your React project:

import Dropdown from "./axion-tt-uilib";

Usage

The Dropdown component is a flexible dropdown menu supporting single and multi-selection.

Basic Example

const [items, setItems] = useState([
  { name: "Option 1", state: "default" },
  { name: "Option 2", state: "default" },
  { name: "Option 3", state: "default" },
]);

<Dropdown list={items} changeList={setItems} />;

Props

| Prop | Type | Default | Description | | ------------ | --------------------------------- | ----------- | -------------------------------------- | | list | IList[] | [] | List of options for the dropdown. | | changeList | (newList: IList[]) => void | undefined | Function to handle list state updates. | | state | 'auto' 'select' 'multiselect' | 'auto' | Defines the selection mode. |

Examples

Single Select Dropdown

<Dropdown list={items} changeList={setItems} state="select" />

Multi-Select Dropdown

<Dropdown list={items} changeList={setItems} state="multiselect" />

Auto Selection Mode

<Dropdown list={items} changeList={setItems} state="auto" />

Popup Component Documentation

Installation

Import the popup component into your React project:

import Popup from "./axion-tt-uilib";

Usage

The Popup component is a simple modal-like container with a close button.

Basic Example

const [isOpen, setIsOpen] = useState(true);

{
  isOpen && (
    <Popup handleClose={() => setIsOpen(false)}>
      <p>This is a popup content.</p>
    </Popup>
  );
}

Props

| Prop | Type | Description | | ------------- | ----------------- | ---------------------------- | | children | React.ReactNode | Content inside the popup. | | handleClose | () => void | Function to close the popup. |

Example with Button Trigger

const [isOpen, setIsOpen] = useState(false);

<button onClick={() => setIsOpen(true)}>Open Popup</button>;
{
  isOpen && (
    <Popup handleClose={() => setIsOpen(false)}>
      <p>Popup Content</p>
    </Popup>
  );
}

Selector Component Documentation

Installation

Import the Selector component into your React project:

import Selector from "./axion-tt-uilib";

Usage

The Selector component provides a flexible way to implement checkboxes, radio buttons, and toggle switches.

Basic Example

const [options, setOptions] = useState([
  { name: "Option 1", state: "default" },
  { name: "Option 2", state: "default" },
  { name: "Option 3", state: "default" },
]);

<Selector options={options} type="checkbox" onChange={setOptions} />;

Props

| Prop | Type | Default | Description | | ---------- | ------------------------------------------------------------ | -------- | -------------------------------------- | | options | { name: string, state: "disabled" "checked" "default" }[] | [] | Array of selectable options. | | type | 'checkbox' 'radio' 'toggle' | Required | Type of selection input. | | disabled | boolean | false | Disables interaction with all options. | | onChange | (updatedOptions: Option[]) => void | Required | Callback when selection changes. |

Examples

Checkbox Group

<Selector options={options} type="checkbox" onChange={setOptions} />

Radio Button Group

<Selector options={options} type="radio" onChange={setOptions} />

Toggle Switch

<Selector options={options} type="toggle" onChange={setOptions} />

Disabled Selector

<Selector options={options} type="checkbox" disabled onChange={setOptions} />

Snackbar Component Documentation

Installation

Import the Snackbar component into your React project:

import Snackbar from "./axion-tt-uilib";

Basic Example

const handleClose = () => {
  setIsOpen(false);
};

<Snackbar state="success" onClose={handleClose}>
  This is a success message!
</Snackbar>;

Props

| Prop | Type | Default | Description | | ---------- | --------------------------------------------- | --------------- | --------------------------------------------- | | state | "warning" "success" "error" "information" | "information" | Defines the message type and style. | | children | React.ReactNode | Required | The content to display inside the snackbar. | | onClose | () => void | Required | Function to call when the snackbar is closed. |

State Options

• warning: Yellow background for warning messages.
• success: Green background for success messages.
• error: Red background for error messages.
• information: Blue background for informational messages.

Example with Dynamic State

<Snackbar state={currentState} onClose={handleClose}>
  {currentState === "error" ? "Something went wrong!" : "Operation successful!"}
</Snackbar>

Tooltip Component Documentation

A customizable Tooltip component that displays additional information when hovering over an element. It supports two states: default and error, with distinct icon and tooltip styles.

Installation

Import the Tooltip component into your React project:

import Tooltip from "./axion-tt-uilib";

Basic Example

      <Tooltip state="default">
        This is the default tooltip text.
      </Tooltip>
      <Tooltip state="error">
        This is an error tooltip text.
      </Tooltip>

Props

| Prop | Type | Default | Description | |-----------|---------------------------------------------|-------------|-----------------------------------------------------| | state | "default" \| "error" | "default" | Defines the style of the tooltip (default or error).| | children| React.ReactNode | Required | The content to display inside the tooltip. |

State Options

• "default": Displays a tooltip with a cyan background and a default icon.
• "error": Displays a tooltip with a red background and an error icon.

TextInput Component Documentation

The TextInput component is a customizable input field with optional buttons, tooltips, and status indicators. It supports displaying success or error messages with visual feedback.

Installation

Import the component into your React project:

import TextInput from "axion-tt-uilib";

Usage

The TextInput component provides a customizable text input with options to show buttons, tooltips, and status messages.

Basic Example

import React, { useState } from "react";
import TextInput from "your-package-name";

const App: React.FC = () => {
  const [text, setText] = useState("");

  return (
    <TextInput
      text={text}
      setText={setText}
      placeholder="Enter text"
      tooltipText="This is a tooltip"
      showButtons={true}
      status="success"
      message="Input is correct!"
      onApply={() => console.log("Apply clicked")}
      onDelete={() => console.log("Delete clicked")}
    />
  );
};

export default App;

Props

| Prop | Type | Default | Description | |---------------|-----------------------------------------------------|---------------|-----------------------------------------------------| | placeholder | string | "placeholder" | Placeholder text for the input field. | | tooltipText | string | undefined | Text to display in a tooltip when hovered. | | showButtons | boolean | false | Determines if the Apply and Delete buttons are shown. | | text | string | Required | The current value of the input field. | | setText | (value: string) => void | Required | Function to update the input value. | | status | "success" \| "error" | undefined | Displays a status message with a visual indicator. | | message | string | undefined | Message displayed under the input field when a status is shown. | | onApply | () => void | undefined | Callback function when the Apply button is clicked. | | onDelete | () => void | undefined | Callback function when the Delete button is clicked. |

Status Options

• "success": Displays a green check icon and a success message.
• "error": Displays a red error icon and an error message.

Example with Buttons and Status

<TextInput
  text={text}
  setText={setText}
  placeholder="Enter text"
  tooltipText="This is a tooltip"
  showButtons={true}
  status="error"
  message="Something went wrong!"
  onApply={handleApply}
  onDelete={handleDelete}
/>