Air Command UI Library

A custom React component library built from scratch using basic HTML elements for the Air Command System project.

Features

• 🎨 Custom Components: Built from scratch using basic HTML elements
• 🎯 TypeScript: Full TypeScript support with comprehensive type definitions
• 🌙 Theme Support: Light and dark theme support
• 📦 Rollup Bundler: Optimized builds with tree-shaking
• 🚀 Zero Dependencies: No external UI library dependencies

Components

Input

A customizable input component with support for different types and states.

import { Input } from 'air-command-ui-lib';

<Input
  value={value}
  onChange={setValue}
  placeholder="Enter text..."
  type="text"
/>

Button

A flexible button component with multiple variants and sizes.

import { Button } from 'air-command-ui-lib';

<Button
  variant="primary"
  size="medium"
  onClick={handleClick}
>
  Click me
</Button>

Autocomplete

A searchable autocomplete component with multiple selection support.

import { Autocomplete } from 'air-command-ui-lib';

<Autocomplete
  options={options}
  value={selectedValues}
  onChange={setSelectedValues}
  multiple={true}
  placeholder="Select options..."
/>

Dialog

A modal dialog component with backdrop and keyboard support.

import { Dialog } from 'air-command-ui-lib';

<Dialog
  open={isOpen}
  onClose={handleClose}
  title="Dialog Title"
  size="medium"
>
  <p>Dialog content goes here</p>
</Dialog>

Table

A feature-rich table component with sorting, selection, and customization.

import { Table } from 'air-command-ui-lib';

<Table
  data={data}
  columns={columns}
  sortable={true}
  onSort={handleSort}
  selectedRows={selectedRows}
  onRowSelect={handleRowSelect}
/>

Installation

npm install air-command-ui-lib

Usage

import React from 'react';
import { Input, Button, Autocomplete, Dialog, Table } from 'air-command-ui-lib';

function App() {
  return (
    <div>
      <Input placeholder="Enter your name" />
      <Button variant="primary">Submit</Button>
    </div>
  );
}

Development

Build

npm run build

Development Mode

npm run dev

Clean

npm run clean

License

MIT