LDE UI Component Library

A modern, lightweight React component library built with TypeScript and Vite. Designed to provide essential UI components with consistent styling and excellent developer experience.

Features

• 🎨 Modern Design: Clean, responsive components with CSS modules
• 📦 Tree Shakeable: Import only what you need
• 🔧 TypeScript Support: Full type safety and IntelliSense
• ⚡ Lightweight: Minimal bundle size with zero dependencies
• 🧪 Testing Ready: Components designed for easy testing
• 🔄 Automated Releases: Semantic versioning with automated publishing

Installation

npm install lde-ui
# or
yarn add lde-ui
# or
pnpm add lde-ui

Quick Start

import React from 'react';
import { Button, Input, Label, Form, Modal, Tooltip } from 'lde-ui';

function App() {
  return (
    <div>
      <Form
        validationRules={{
          email: { required: true, pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/ },
        }}
        onSubmit={(data, isValid) => console.log('Form submitted:', data)}
      >
        <Input
          label="Email Address"
          name="email"
          type="email"
          placeholder="Enter your email"
          helperText="We'll never share your email"
          fullWidth
        />

        <Tooltip content="Submit the form">
          <Button type="submit" color="primary" fullWidth>
            Submit
          </Button>
        </Tooltip>
      </Form>
    </div>
  );
}

export default App;

Available Components

Core Components

Button

A versatile button component with multiple variants, sizes, and states.

import { Button } from 'lde-ui';

// Basic usage
<Button>Click me</Button>

// With variants and states
<Button color="success" size="lg" loading>
  Save Changes
</Button>

Input

Enhanced input component with labels, validation states, icons, and helper text.

import { Input } from 'lde-ui';

// With label and helper text
<Input
  label="Password"
  type="password"
  helperText="Must be at least 8 characters"
  state="error"
  errorText="Password too short"
  fullWidth
/>

// With icon
<Input
  placeholder="Search..."
  icon={<SearchIcon />}
  iconPosition="left"
/>

Label

Semantic label component for form accessibility.

import { Label } from 'lde-ui';

<Label htmlFor="input-id" required>
  Field Label
</Label>;

Advanced Components

Form

Comprehensive form component with built-in validation and error handling.

import { Form, Input, Button } from 'lde-ui';

<Form
  validationRules={{
    username: { required: true, minLength: 3 },
    email: { required: true, pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/ },
  }}
  onSubmit={(data, isValid) => {
    if (isValid) {
      console.log('Form data:', data);
    }
  }}
  showErrorSummary
>
  <Input name="username" label="Username" />
  <Input name="email" label="Email" type="email" />
  <Button type="submit">Submit</Button>
</Form>;

Modal

Accessible modal dialog with focus management and keyboard navigation.

import { Modal, Button } from 'lde-ui';

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

<>
  <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
  <Modal
    isOpen={isOpen}
    onClose={() => setIsOpen(false)}
    title="Confirmation"
    size="md"
  >
    <p>Are you sure you want to continue?</p>
  </Modal>
</>;

Tooltip

Contextual information component with automatic positioning.

import { Tooltip, Button } from 'lde-ui';

<Tooltip content="Save your work" position="top" trigger="hover">
  <Button>Save</Button>
</Tooltip>;

Sidebar

Flexible navigation sidebar with collapsible functionality.

import { Sidebar } from 'lde-ui';

const sidebarItems = [
  { id: 'dashboard', label: 'Dashboard', icon: <DashboardIcon /> },
  { id: 'settings', label: 'Settings', icon: <SettingsIcon /> },
];

<Sidebar
  isOpen={sidebarOpen}
  items={sidebarItems}
  collapsible
  onToggleCollapse={() => setCollapsed(!collapsed)}
/>;

Wizard

Multi-step workflow component with progress tracking and validation.

import { Wizard } from 'lde-ui';

const steps = [
  {
    id: 'step1',
    title: 'Personal Info',
    content: <PersonalInfoForm />,
    validation: () => validatePersonalInfo(),
  },
  {
    id: 'step2',
    title: 'Preferences',
    content: <PreferencesForm />,
    optional: true,
  },
];

<Wizard
  steps={steps}
  onComplete={() => console.log('Wizard completed!')}
  showProgress
/>;

FinancialDashboard

Comprehensive business analytics dashboard with charts and metrics.

import { FinancialDashboard } from 'lde-ui';

<FinancialDashboard
  title="Business Dashboard"
  showPeriodSelector
  onPeriodChange={period => console.log('Period changed:', period)}
/>;

Financial Dashboard Features:

• 📊 Interactive Charts: Bar charts and pie charts with custom data
• 📈 Key Metrics: Revenue, expenses, profit, and growth indicators
• 🎯 Goals Tracking: Visual progress bars for targets
• 📱 Responsive Design: Works on all screen sizes
• ⚙️ Customizable: Custom metrics, data, and styling
• 🔄 Real-time Updates: Dynamic data visualization

Development

Prerequisites

• Node.js 18.x or later
• npm, yarn, or pnpm

Getting Started

1. Clone the repository:

git clone https://github.com/cswni/lde-ui.git
cd lde-ui

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Build the library:

npm run build

Scripts

• npm run dev - Start development server
• npm run build - Build the library for production
• npm run lint - Run ESLint
• npm run lint:fix - Fix ESLint issues automatically
• npm run format - Format code with Prettier
• npm run format:check - Check code formatting
• npm run preview - Preview the built library

Contributing

We welcome contributions! Please read our Contributing Guidelines for details on how to submit pull requests, report issues, and contribute to the project.

Development Workflow

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Commit your changes using conventional commits: git commit -m 'feat: add amazing feature'
4. Push to the branch: git push origin feature/amazing-feature
5. Open a Pull Request

Commit Convention

This project follows Conventional Commits:

• feat: - New features
• fix: - Bug fixes
• docs: - Documentation changes
• style: - Code style changes (formatting, etc.)
• refactor: - Code refactoring
• test: - Adding or updating tests
• chore: - Maintenance tasks

Roadmap

✅ Completed Components

• [x] Button - Interactive button with multiple variants, sizes, and states
• [x] Input - Enhanced input field with labels, validation, icons, and helper text
• [x] Label - Semantic form label with accessibility support
• [x] Form - Comprehensive form component with validation and error handling
• [x] Modal - Accessible modal dialog with focus management
• [x] Tooltip - Contextual information with smart positioning
• [x] Sidebar - Flexible navigation sidebar with collapsible functionality
• [x] Wizard - Multi-step workflow with progress tracking and validation
• [x] FinancialDashboard - Business analytics dashboard with charts and metrics

🔮 Future Components

• [ ] Card - Content container with header, body, and footer
• [ ] Dropdown - Select component with search and multi-select
• [ ] Checkbox - Checkbox input with indeterminate state
• [ ] Radio - Radio button group component
• [ ] Textarea - Multi-line text input with auto-resize
• [ ] Switch - Toggle switch component
• [ ] Badge - Status and notification indicator
• [ ] Spinner - Loading indicator with multiple variants
• [ ] Progress - Progress bar and circular progress
• [ ] Alert - Notification and alert messages
• [ ] Tabs - Tab navigation component
• [ ] Accordion - Collapsible content sections
• [ ] DatePicker - Calendar-based date selection
• [ ] Table - Data table with sorting and pagination
• [ ] Breadcrumb - Navigation breadcrumb trail

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

This project is licensed under the MIT License - see the LICENSE file for details.

Changelog

See CHANGELOG.md for a detailed history of changes.

Support

• 📖 Documentation
• 🐛 Issue Tracker
• 💬 Discussions

Made with ❤️ by the LDE UI team