excellent-lynx-ui

A modern, comprehensive UI component library for the Lynx framework, designed for building beautiful and responsive mobile applications.

✨ Features

• 📱 Mobile-first Design: Optimized for mobile devices with responsive layouts
• 🎨 Theme Customization: Built-in theme support with easy customization options
• 💪 TypeScript Support: Full TypeScript integration with complete type definitions
• 🔧 Easy to Use: Simple API design inspired by popular UI libraries
• 📦 Small Bundle Size: Optimized for performance with minimal overhead
• 🌟 Rich Component Library: Over 30+ ready-to-use components
• 🚀 Fast Development: Accelerate your mobile app development with pre-built components
• 🎯 Accessibility Focused: Built with accessibility best practices

📦 Installation

# Using npm
npm install excellent-lynx-ui @lynx-js/react

# Using yarn
yarn add excellent-lynx-ui @lynx-js/react

# Using pnpm
pnpm add excellent-lynx-ui @lynx-js/react

🚀 Quick Start

import React from '@lynx-js/react';
import { Button, Input, ThemeProvider } from 'excellent-lynx-ui';

const App: React.FC = () => {
  return (
    <ThemeProvider>
      <view style={{ padding: '20px' }}>
        <view style={{ marginBottom: '16px' }}>
          <Button type="primary" bindtap={() => console.log('Clicked')}>
            Primary Button
          </Button>
        </view>
        <Input 
          placeholder="Enter your name" 
          value="" 
          bindinput={(e) => console.log(e.detail.value)}
        />
      </view>
    </ThemeProvider>
  );
};

export default App;

📋 Components

Basic Components

• Button: Various button styles and sizes
• Text: Typography with different styles and weights
• Input: Form inputs with validation support
• Checkbox: Checkbox with label support
• Radio: Radio buttons with group support
• Switch: Toggle switch component
• Badge: Status indicators and counters

Layout Components

• View: Basic container component
• Flex: Flexbox layout helper
• Stack: Vertical layout container
• Grid: Grid layout system
• Container: Responsive container wrapper
• Space: Spacing utility component
• Divider: Horizontal and vertical dividers

Navigation Components

• NavigationHeader: App navigation header
• Tabbar: Bottom tab navigation
• Tabs: Tabbed content switching

Data Display Components

• List: List with customizable items
• Card: Content cards with shadows
• Avatar: User avatars with fallback support
• Image: Responsive image component
• Icon: Icon component with various icon sets

Feedback Components

• Toast: Toast notifications
• Loading: Loading indicators
• Modal: Modal dialogs
• Drawer: Side drawer panels
• ActionSheet: Action sheets for mobile
• Alert: Alert dialogs

Form Components

• Form: Form wrapper with validation
• FormItem: Form item with label and error handling
• Slider: Range slider component

Search Components

• SearchBar: Search input with cancel button

🎨 Theming

Customize the theme to match your brand identity:

import { ThemeProvider } from 'excellent-lynx-ui';

const customTheme = {
  colors: {
    primary: '#1890ff',
    secondary: '#722ed1',
    success: '#52c41a',
    warning: '#faad14',
    error: '#f5222d',
    info: '#13c2c2',
  },
  typography: {
    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto',
  },
  radius: {
    xs: '2px',
    sm: '4px',
    md: '8px',
    lg: '12px',
  },
};

const App: React.FC = () => {
  return (
    <ThemeProvider theme={customTheme}>
      {/* Your app content */}
    </ThemeProvider>
  );
};

🔧 Development

Prerequisites

• Node.js 18+
• npm, yarn, or pnpm
• Lynx framework knowledge

Setup

# Clone the repository
git clone https://github.com/yourusername/excellent-lynx-ui.git
cd excellent-lynx-ui

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Run type checking
npm run typecheck

# Run linting
npm run lint

# Run tests
npm run test

🤝 Contributing

We welcome contributions from the community! Here's how you can help:

1. Report Issues: Submit bug reports and feature requests on GitHub
2. Fix Bugs: Look for open issues and submit pull requests
3. Add Features: Implement new components or enhance existing ones
4. Improve Documentation: Help us improve the docs and examples

Contribution Guidelines

• Follow the existing code style
• Write tests for new features
• Update documentation when adding new components
• Use TypeScript for all code
• Follow the commit message conventions

📄 License

MIT License - see the LICENSE file for details

📞 Support

If you encounter any issues or have questions, please:

• Check the GitHub Issues
• Create a new issue with detailed information
• Join our community discussion (coming soon)

📊 Changelog

See the CHANGELOG for a list of changes in each version.

📈 Roadmap

• [ ] Add more components
• [ ] Improve accessibility support
• [ ] Add dark mode support
• [ ] Enhance theme customization
• [ ] Add more examples and documentation
• [ ] Improve performance

🙏 Acknowledgments

• Built for the Lynx framework
• Thanks to all contributors

excellent-lynx-ui - Making mobile UI development easier and more beautiful!