ATHOS React Components

A set of useful ReactJS components developed by Athos.

Installation

npm install @athosws/react-components
# or
pnpm install @athosws/react-components
# or
yarn add @athosws/react-components

Components

Module Components (Full-featured)

| Component | Description | |-----------|-------------| | ATHOSButton | Versatile button with multiple styles and tooltip support | | ATHOSInput | Customizable input component | | ATHOSSelect | Dropdown select component | | ATHOSModal | Modal dialog component | | ATHOSToast | Toast notification system | | ATHOSTooltip | Tooltip component | | ATHOSCollapse | Collapsible content component | | ATHOSDropDown | Dropdown menu component | | ATHOSPopUp | Popup component | | ATHOSTabs | Tab navigation component | | ATHOSCards | Draggable card components | | ATHOSBreadcrumbs | Breadcrumb navigation | | ATHOSDynamicTable | Dynamic table with sorting/filtering | | ATHOSResizableDiv | Resizable container | | ATHOSSwitcher | Toggle switch component | | ATHOSTreeview | Tree view component | | ATHOSVirtualDiv | Virtualized list container | | ATHOSMenu | Navigation menu component |

Light Module Components (Lightweight)

| Component | Description | |-----------|-------------| | LightButton | Lightweight button component | | LightInput | Lightweight input component | | LightList | Lightweight list component | | LightPopover | Lightweight popover component | | LightSelect | Lightweight select component | | LightTable | Lightweight table component |

Usage

import { 
  ATHOSButton, 
  ATHOSInput, 
  LightButton, 
  LightSelect 
} from "@athosws/react-components";

function App() {
  return (
    <div>
      <ATHOSButton type="default" onClick={() => console.log("Clicked!")}>
        Click Me
      </ATHOSButton>
      
      <LightButton buttontype="primary">
        Light Button
      </LightButton>
    </div>
  );
}

Peer Dependencies

This library requires the following peer dependencies:

{
  "react": "^19.1.0",
  "react-dom": "^19.1.0",
  "tailwindcss": "^4.1.8",
  "daisyui": "^5.0.43",
  "motion": "^12.15.0"
}

Publishing to npm

# Build the package
pnpm build

# Publish (scoped packages require --access public)
npm publish --access public

ATHOSButton Component

The ATHOSButton component is a versatile button component that supports multiple styles and states, such as default, alt, action, and disabled. It allows for customization of colors, text, and additional styling. It also supports an optional tooltip that provides extra information when hovering over the button.

Import

import { ATHOSButton } from "@athosws/react-components";

Basic Usage

import React from "react";
import { ATHOSButton } from "@athosws/react-components";

const App = () => {
  return (
    <ATHOSButton type="default" onClick={() => console.log("Button clicked!")}>
      Click Me
    </ATHOSButton>
  );
};

export default App;

With Tooltip

<ATHOSButton 
  type="action" 
  tooltip="This is an action button" 
  onClick={() => console.log("Action button clicked!")}
>
  Action
</ATHOSButton>

Disabled State

<ATHOSButton disabled={true}>Disabled Button</ATHOSButton>

Props

| Prop | Type | Description | Default | | ----------- | -------------------------- | --------------------------------------------------------------------------- | ----------------- | | type | "default","alt","action" | Specifies the button style. Required if disabled is not set. | "default" | | onClick | () => void | Function to call when the button is clicked. | undefined | | children | React.ReactNode | The content to be displayed inside the button. | undefined | | tooltip | React.ReactNode | Content to be shown as a tooltip when hovering over the button. | undefined | | disabled | boolean | If true, the button is disabled and does not respond to click events. | false | | style | React.CSSProperties | Custom styles to apply to the button. | undefined | | color | string | Background color of the button. | Depends on type | | textColor | string | Text color of the button. | Depends on type |

Author

Athos Matos - [email protected]