AIRA-UI

A collection of reusable React components with Storybook documentation.

📦 Installation

npm install aira-ui

🚀 Usage

import { Button, Card, Input, Badge, CalendarDaysIcon } from "aira-ui";
import "aira-ui/dist/styles/globals.css";

function App() {
  return (
    <div>
      <Button variant="primary" size="medium">
        <CalendarDaysIcon size="small" />
        Click me
      </Button>

      <Card title="My Card">
        <p>Card content</p>
      </Card>

      <Input placeholder="Enter text..." />

      <Badge variant="success">Success</Badge>
    </div>
  );
}

🎨 Components

UI Components

Button

A customizable button component with multiple variants and sizes.

Props:

• variant: 'primary' | 'secondary' (default: 'primary')
• size: 'small' | 'medium' | 'large' (default: 'medium')
• disabled: boolean (default: false)
• onClick: () => void
• className: string

Card

A flexible card component for displaying content.

Props:

• title: string (optional)
• footer: React.ReactNode (optional)
• className: string

Input

A form input component with error states.

Props:

• type: 'text' | 'email' | 'password' | 'number' (default: 'text')
• placeholder: string
• value: string
• error: boolean (default: false)
• disabled: boolean (default: false)
• onChange: (value: string) => void
• className: string

Badge

A small status indicator component.

Props:

• variant: 'primary' | 'success' | 'warning' | 'danger' (default: 'primary')
• className: string

🎯 Icon Components

CalendarDaysIcon

A calendar icon component.

Props:

• size: 'small' | 'medium' | 'large' (default: 'medium')
• color: string (default: 'currentColor')
• className: string

📁 Project Structure

src/
├── components/
│   ├── Button/
│   ├── Card/
│   ├── Input/
│   ├── Badge/
│   └── Icons/
│       ├── CalendarDaysIcon.tsx    # One icon per file ✨
│       ├── index.ts                 # Export all icons
│       └── Icons.stories.tsx       # Storybook stories
├── styles/
│   └── globals.css
└── index.ts                         # Main export

🔧 Development

Run Storybook

npm run storybook

Visit http://localhost:6006

Build Components

npm run build

Build Storybook for Production

npm run build:storybook

📚 Adding New Icons

See ICON_STRUCTURE.md for complete guide.

Quick steps:

1. Create new file: src/components/Icons/YourIcon.tsx
2. Add export to: src/components/Icons/index.ts
3. Add story to: Icons.stories.tsx
4. Build: npm run build

📦 Publishing

# Login to npm
npm login

# Build
npm run build

# Publish
npm publish

📄 License

MIT